css refactoring
This commit is contained in:
parent
5fab362054
commit
1be98b0663
6 changed files with 17 additions and 22 deletions
|
@ -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;
|
||||||
|
|
|
@ -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" %}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 }};
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,7 @@ eleventyComputed:
|
||||||
<body>
|
<body>
|
||||||
{% include 'header.njk' %}
|
{% include 'header.njk' %}
|
||||||
|
|
||||||
<main>
|
<main class="content">
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue