css refactoring

This commit is contained in:
Lyn Fugmann 2024-09-23 14:37:40 +02:00
parent 5fab362054
commit 1be98b0663
6 changed files with 17 additions and 22 deletions

View file

@ -15,9 +15,6 @@ footer {
} }
.footer-container { .footer-container {
max-width: var(--page-width);
margin-left: auto;
margin-right: auto;
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
grid-auto-flow: column; grid-auto-flow: column;

View file

@ -1,5 +1,5 @@
<footer> <footer>
<div class="footer-container"> <div class="footer-container content">
{% set otherLang = page.url | locale_links | first %} {% set otherLang = page.url | locale_links | first %}
<a href="{{otherLang.url}}" lang="{{otherLang.lang}}" hreflang="{{otherLang.lang}}"> <a href="{{otherLang.url}}" lang="{{otherLang.lang}}" hreflang="{{otherLang.lang}}">
{% if otherLang.lang == "de" %} {% if otherLang.lang == "de" %}

View file

@ -2,7 +2,7 @@ header {
display: flex; display: flex;
position: sticky; position: sticky;
top: 0; top: 0;
min-height: 6.4rem; min-height: 9rem;
padding: 2rem 0; padding: 2rem 0;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
background-color: rgba(255,255,255,.92); background-color: rgba(255,255,255,.92);
@ -10,10 +10,6 @@ header {
} }
.header-container { .header-container {
width: 100%;
max-width: var(--page-width);
margin-left: auto;
margin-right: auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -30,8 +26,8 @@ header {
} }
#mainNav li { #mainNav li {
display: inline; display: inline-block;
margin-left: 1rem; margin-left: 1.9rem;
} }
#mainNav a { #mainNav a {

View file

@ -1,5 +1,5 @@
<header> <header>
<div class="header-container"> <div class="header-container content">
<a id="header-logo" href="{{ "/" | locale_url }}" title="home"> <a id="header-logo" href="{{ "/" | locale_url }}" title="home">
<img alt="ESE {{year}} Logo" src="/static/ESELogo24.svg"> <img alt="ESE {{year}} Logo" src="/static/ESELogo24.svg">
</a> </a>

View file

@ -1,5 +1,6 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
font-size: 17px;
} }
body { body {
@ -9,7 +10,8 @@ body {
color: var(--color-text); color: var(--color-text);
} }
main { .content {
width: 100%;
max-width: var(--page-width); max-width: var(--page-width);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -21,32 +23,32 @@ h1, h2, h3, h4 {
h1 { h1 {
font-weight: 700; font-weight: 700;
font-size: 2.8rem; font-size: 2.8em;
text-transform: uppercase; text-transform: uppercase;
} }
h2 { h2 {
font-weight: 300; font-weight: 300;
font-size: 2.4rem; font-size: 2.4em;
line-height: 2; line-height: 2;
} }
h3 { h3 {
font-weight: 300; font-weight: 300;
font-size: 1.8rem; font-size: 1.8em;
line-height: 2; line-height: 2;
} }
h4 { h4 {
font-weight: 400; font-weight: 400;
font-size: 1.3rem; font-size: 1.3em;
line-height: 2; line-height: 2;
} }
h5 { h5 {
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1em;
margin-bottom: 1rem; margin-bottom: 1em;
} }
p { p {
@ -54,8 +56,8 @@ p {
} }
:root { :root {
font-size: 17px; font-size: 12px;
--page-width: 75rem; --page-width: 1280px;
--color-text: #495057; --color-text: #495057;
--color-primary: {{ eseColor }}; --color-primary: {{ eseColor }};
} }

View file

@ -15,7 +15,7 @@ eleventyComputed:
<body> <body>
{% include 'header.njk' %} {% include 'header.njk' %}
<main> <main class="content">
{{ content | safe }} {{ content | safe }}
</main> </main>