mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2025-05-24 14:46:16 +00:00
Refactor non-crictical CSS into own files
This commit is contained in:
parent
fd60642ba0
commit
fbe295fbdc
28 changed files with 290 additions and 258 deletions
|
|
@ -8,9 +8,11 @@
|
|||
<title>{{ title or metadata.title }}</title>
|
||||
<meta name="description" content="{{ description or metadata.description }}">
|
||||
|
||||
<link rel="stylesheet" href="{{ '/assets/css/main.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
|
||||
<link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
|
||||
<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
|
||||
|
||||
{% block extraHead %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
|
|
@ -44,7 +46,7 @@
|
|||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="content" {% if templateClass %} class="{{ templateClass }}"{% endif %}>
|
||||
<main id="content" {% if contentClass %} class="{{ contentClass }}"{% endif %}>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
---
|
||||
layout: layouts/base.njk
|
||||
---
|
||||
{% extends "layouts/base.njk" %}
|
||||
|
||||
{% block extraHead %}
|
||||
<link rel="stylesheet" href="{{ '/assets/css/home.css' | url }}">
|
||||
{% endblock %}
|
||||
|
||||
{{ content | safe }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
---
|
||||
layout: layouts/base.njk
|
||||
---
|
||||
{% extends "layouts/base.njk" %}
|
||||
|
||||
{% block extraHead %}
|
||||
{% if useForms %}
|
||||
<link rel="stylesheet" href="{{ '/assets/css/forms.css' | url }}">
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{{ content | safe }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: layouts/page.njk
|
||||
useForms: true
|
||||
eleventyNavigation:
|
||||
key: Computer beantragen
|
||||
order: 40
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: layouts/page.njk
|
||||
useForms: true
|
||||
---
|
||||
# Geräte für eine gemeinnützige Organisation beantragen
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: layouts/page.njk
|
||||
useForms: true
|
||||
---
|
||||
# Privat einen Computer beantragen
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: layouts/page.njk
|
||||
useForms: true
|
||||
eleventyNavigation:
|
||||
key: Hardware spenden
|
||||
order: 50
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: layouts/page.njk
|
||||
useForms: true
|
||||
---
|
||||
# Hardware als Organisation spenden
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: layouts/page.njk
|
||||
useForms: true
|
||||
---
|
||||
# Privat Hardware spenden
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: layouts/page.njk
|
||||
useForms: true
|
||||
eleventyNavigation:
|
||||
key: Kontakt
|
||||
order: 100
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: layouts/page.njk
|
||||
useForms: true
|
||||
---
|
||||
# Hilfe bei Problemen mit unseren Computern
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"description": "Angestöpselt Homepage",
|
||||
"scripts": {
|
||||
"build:site": "eleventy",
|
||||
"build:styles": "sass styles/main.scss:_site/assets/css/main.css",
|
||||
"build:styles": "sass --style=compressed styles/:_site/assets/css/",
|
||||
"build": "npm run build:site && npm run build:styles",
|
||||
"dev:site": "eleventy --serve",
|
||||
"dev:styles": "npm run build:styles -- --watch"
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
$normal-weight: 400;
|
||||
$emphasized-weight: 600;
|
||||
|
||||
// This is the major third type scale.
|
||||
$base-size: 1rem;
|
||||
$title-size: 2.44rem;
|
||||
$heading-size: 1.95rem;
|
||||
$subheading-size: 1.56rem;
|
||||
|
||||
$base-line-height: 1.5;
|
||||
$heading-line-height: 1.3;
|
||||
|
||||
$comfortaa-weights: (
|
||||
'Light': 300,
|
||||
'Regular': 400,
|
||||
'Medium': 500,
|
||||
'Semi-bold': 600,
|
||||
'Bold': 700,
|
||||
);
|
||||
|
||||
@each $name, $weight in $comfortaa-weights {
|
||||
@font-face {
|
||||
font-family: 'Comfortaa';
|
||||
font-style: normal;
|
||||
font-weight: $weight;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/Comfortaa-#{$name}.ttf') format('truetype');
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Comfortaa Variable';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
|
||||
}
|
||||
|
||||
html {
|
||||
$fallback-fonts: Roboto, Arial, sans-serif;
|
||||
|
||||
font-size: 125%; // Scale from 16px to 20px
|
||||
font-family: Comfortaa, $fallback-fonts;
|
||||
font-weight: $normal-weight;
|
||||
|
||||
@supports (font-variation-settings: normal) {
|
||||
font-family: 'Comfortaa Variable', $fallback-fonts;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: $base-size;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
6
styles/base.scss
Normal file
6
styles/base.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@use 'lib/typography';
|
||||
@use 'components/markup';
|
||||
@use 'components/site';
|
||||
@use 'components/page';
|
||||
|
||||
@include typography.root-config;
|
||||
64
styles/components/_actions.scss
Normal file
64
styles/components/_actions.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
@use '../lib/colors';
|
||||
@use '../lib/layout';
|
||||
|
||||
// Actions are another module that is present on the home page. It shows a small
|
||||
// number of CTA-style buttons which lead to different parts of the site.
|
||||
.page-actions {
|
||||
padding: layout.$large-gap;
|
||||
background-color: colors.$teal-300;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-bottom: layout.$large-gap;
|
||||
}
|
||||
|
||||
> div {
|
||||
> *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
margin: layout.$large-gap 0;
|
||||
padding: layout.$large-gap;
|
||||
background: colors.$gray-50;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@include colors.card-shadow;
|
||||
|
||||
> h3 {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: layout.$breakpoint) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: layout.$large-gap;
|
||||
align-items: stretch;
|
||||
|
||||
> * {
|
||||
grid-column: span 3;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
margin: 0;
|
||||
|
||||
&.first {
|
||||
transform: translateY(#{-1 * layout.$huge-gap});
|
||||
}
|
||||
|
||||
&:not(.first) {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
61
styles/components/_banner.scss
Normal file
61
styles/components/_banner.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
@use '../lib/colors';
|
||||
@use '../lib/layout';
|
||||
@use '../lib/typography';
|
||||
|
||||
// Banners can be put at the top of a page to draw attention. A banner has
|
||||
// two children:
|
||||
// - A .background element which contains an image to render behind the text
|
||||
// - A .content which holds the actual text.
|
||||
.page-banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
min-height: 60vh;
|
||||
|
||||
> .background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
padding: layout.$normal-gap max(#{layout.$large-gap}, 15vw);
|
||||
|
||||
> div {
|
||||
display: inline-block;
|
||||
padding: layout.$small-gap layout.$normal-gap;
|
||||
font-size: typography.$subheading-size;
|
||||
background-color: colors.$yellow-600;
|
||||
|
||||
> p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
padding: 0 layout.$normal-gap;
|
||||
line-height: 5rem;
|
||||
font-size: typography.$title-size;
|
||||
font-weight: typography.$emphasized-weight;
|
||||
background-color: colors.$teal-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
57
styles/components/_form-choices.scss
Normal file
57
styles/components/_form-choices.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
@use '../lib/colors';
|
||||
@use '../lib/layout';
|
||||
|
||||
.form-choices {
|
||||
@extend %narrow-content;
|
||||
margin-top: layout.$huge-gap;
|
||||
margin-bottom: layout.$huge-gap;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '\2771';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
&:before {
|
||||
top: calc(50% - #{layout.$large-gap / 2});
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
margin: layout.$large-gap auto;
|
||||
width: 15rem;
|
||||
height: 1px;
|
||||
background-color: colors.$gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
padding: layout.$small-gap layout.$normal-gap;
|
||||
display: inline-block;
|
||||
line-height: 2.5;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: colors.$yellow-600;
|
||||
color: inherit;
|
||||
@include colors.card-shadow;
|
||||
}
|
||||
|
||||
> em {
|
||||
padding-block: layout.$small-gap;
|
||||
font-style: inherit;
|
||||
background-color: colors.$yellow-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,61 +1,6 @@
|
|||
@use '../colors';
|
||||
@use '../layout';
|
||||
@use '../typography';
|
||||
|
||||
.form-choices {
|
||||
@extend %narrow-content;
|
||||
margin-top: layout.$huge-gap;
|
||||
margin-bottom: layout.$huge-gap;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '\2771';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
&:before {
|
||||
top: calc(50% - #{layout.$large-gap / 2});
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
margin: layout.$large-gap auto;
|
||||
width: 15rem;
|
||||
height: 1px;
|
||||
background-color: colors.$gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
padding: layout.$small-gap layout.$normal-gap;
|
||||
display: inline-block;
|
||||
line-height: 2.5;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: colors.$yellow-600;
|
||||
color: inherit;
|
||||
@include colors.card-shadow;
|
||||
}
|
||||
|
||||
> em {
|
||||
padding-block: layout.$small-gap;
|
||||
font-style: inherit;
|
||||
background-color: colors.$yellow-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@use '../lib/colors';
|
||||
@use '../lib/layout';
|
||||
@use '../lib/typography';
|
||||
|
||||
%form-item {
|
||||
@extend %narrow-content-gutter;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@use 'colors';
|
||||
@use 'layout';
|
||||
@use 'typography';
|
||||
@use '../lib/colors';
|
||||
@use '../lib/layout';
|
||||
@use '../lib/typography';
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@use '../colors';
|
||||
@use '../layout';
|
||||
@use '../typography';
|
||||
@use '../lib/colors';
|
||||
@use '../lib/layout';
|
||||
@use '../lib/typography';
|
||||
|
||||
.page-section {
|
||||
padding: layout.$large-gap;
|
||||
|
|
@ -18,123 +18,3 @@
|
|||
background-color: colors.$teal-500;
|
||||
}
|
||||
}
|
||||
|
||||
// Banners can be put at the top of a page to draw attention. A banner has
|
||||
// two children:
|
||||
// - A .background element which contains an image to render behind the text
|
||||
// - A .content which holds the actual text.
|
||||
.page-banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
min-height: 60vh;
|
||||
|
||||
> .background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
padding: layout.$normal-gap max(#{layout.$large-gap}, 15vw);
|
||||
|
||||
> div {
|
||||
display: inline-block;
|
||||
padding: layout.$small-gap layout.$normal-gap;
|
||||
font-size: typography.$subheading-size;
|
||||
background-color: colors.$yellow-600;
|
||||
|
||||
> p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
padding: 0 layout.$normal-gap;
|
||||
line-height: 5rem;
|
||||
font-size: typography.$title-size;
|
||||
font-weight: typography.$emphasized-weight;
|
||||
background-color: colors.$teal-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Actions are another module that is present on the home page. It shows a small
|
||||
// number of CTA-style buttons which lead to different parts of the site.
|
||||
.page-actions {
|
||||
padding: layout.$large-gap;
|
||||
background-color: colors.$teal-300;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-bottom: layout.$large-gap;
|
||||
}
|
||||
|
||||
> div {
|
||||
> *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
margin: layout.$large-gap 0;
|
||||
padding: layout.$large-gap;
|
||||
background: colors.$gray-50;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@include colors.card-shadow;
|
||||
|
||||
> h3 {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: layout.$breakpoint) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: layout.$large-gap;
|
||||
align-items: stretch;
|
||||
|
||||
> * {
|
||||
grid-column: span 3;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
margin: 0;
|
||||
|
||||
&.first {
|
||||
transform: translateY(#{-1 * layout.$huge-gap});
|
||||
}
|
||||
|
||||
&:not(.first) {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@use '../colors';
|
||||
@use '../layout';
|
||||
@use '../typography';
|
||||
@use '../lib/colors';
|
||||
@use '../lib/layout';
|
||||
@use '../lib/typography';
|
||||
|
||||
@mixin header-item {
|
||||
padding: 0 layout.$normal-gap;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@use '../colors';
|
||||
@use '../layout';
|
||||
@use '../typography';
|
||||
@use '../lib/colors';
|
||||
@use '../lib/layout';
|
||||
@use '../lib/typography';
|
||||
|
||||
// This is an HTML/CSS-only tabs component. It expects the following markup:
|
||||
//
|
||||
|
|
|
|||
2
styles/forms.scss
Normal file
2
styles/forms.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@use 'components/form-choices';
|
||||
@use 'components/form-elements';
|
||||
3
styles/home.scss
Normal file
3
styles/home.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@use 'components/actions';
|
||||
@use 'components/banner';
|
||||
@use 'components/tabs';
|
||||
55
styles/lib/_typography.scss
Normal file
55
styles/lib/_typography.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
$normal-weight: 400;
|
||||
$emphasized-weight: 600;
|
||||
|
||||
// This is the major third type scale.
|
||||
$base-size: 1rem;
|
||||
$title-size: 2.44rem;
|
||||
$heading-size: 1.95rem;
|
||||
$subheading-size: 1.56rem;
|
||||
|
||||
$base-line-height: 1.5;
|
||||
$heading-line-height: 1.3;
|
||||
|
||||
$comfortaa-weights: (
|
||||
'Light': 300,
|
||||
'Regular': 400,
|
||||
'Medium': 500,
|
||||
'Semi-bold': 600,
|
||||
'Bold': 700,
|
||||
);
|
||||
|
||||
@mixin root-config {
|
||||
@each $name, $weight in $comfortaa-weights {
|
||||
@font-face {
|
||||
font-family: 'Comfortaa';
|
||||
font-style: normal;
|
||||
font-weight: $weight;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/Comfortaa-#{$name}.ttf') format('truetype');
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Comfortaa Variable';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
|
||||
}
|
||||
|
||||
html {
|
||||
$fallback-fonts: Roboto, Arial, sans-serif;
|
||||
|
||||
font-size: 125%; // Scale from 16px to 20px
|
||||
font-family: Comfortaa, $fallback-fonts;
|
||||
font-weight: $normal-weight;
|
||||
|
||||
@supports (font-variation-settings: normal) {
|
||||
font-family: 'Comfortaa Variable', $fallback-fonts;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: $base-size;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@use 'typography';
|
||||
@use 'base';
|
||||
@use 'components/site';
|
||||
@use 'components/page';
|
||||
@use 'components/tabs';
|
||||
@use 'components/forms';
|
||||
Loading…
Add table
Reference in a new issue