diff --git a/assets/_colors.scss b/assets/_colors.scss index 8b60a25..7fb97f2 100644 --- a/assets/_colors.scss +++ b/assets/_colors.scss @@ -1,5 +1,6 @@ -$color-background: #151821; -$color-burger: #ddd; -$color-highlight: #fff200; -$color-link: #fff200; -$color-text: #fff; +$color-background-0: #272771; +$color-background-100: #1d71b8; +$color-burger: #ddd; +$color-highlight: #fff200; +$color-link: #fff200; +$color-text: #fff; diff --git a/assets/_fonts.scss b/assets/_fonts.scss index db5feb1..eb368e0 100644 --- a/assets/_fonts.scss +++ b/assets/_fonts.scss @@ -20,3 +20,8 @@ font-weight: 700; src: local("Noto Sans Mono Bold"), local("NotoSansMono-Bold"), url(/NotoSansMono-Bold.ttf); } + +@font-face { + font-family: "OCR A"; + src: local("OCR A"), local("OCR-A"), local("OCRA"), url(/OCRA.ttf), url(/OCRA.otf); +} diff --git a/assets/_schedule.scss b/assets/_schedule.scss index edce23e..eb42e92 100644 --- a/assets/_schedule.scss +++ b/assets/_schedule.scss @@ -71,7 +71,7 @@ $timeslot-height: 0.65em; } & > .schedule-title { - background: $color-background; + background: $color-background-0; font-size: 1.17rem; margin-bottom: 0; padding-bottom: 0.5em; @@ -92,7 +92,7 @@ $timeslot-height: 0.65em; } .schedule-timeline { - background: $color-background; + background: $color-background-0; padding: 0 0.5em 0 1em; position: sticky; left: 0; @@ -107,7 +107,7 @@ $timeslot-height: 0.65em; } .schedule-days { - background: $color-background; + background: $color-background-0; display: flex; font-size: 1rem; left: 0; diff --git a/assets/_vars.scss b/assets/_vars.scss index 8030333..04b702e 100644 --- a/assets/_vars.scss +++ b/assets/_vars.scss @@ -1,9 +1,14 @@ +$footer-spacing: 200px; +$footer-height: 200px; + //* -$header-height: 150px; -$header-spacing: 150px; +$header-height: 200px; +$header-spacing: 200px; $header-variant: header; /*/ $header-height: 1000px; $header-spacing: 300px; $header-variant: header-tall; //*/ + +$stars-height: 1057px; diff --git a/assets/style.scss b/assets/style.scss index 9a24e26..946e6dd 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -12,7 +12,7 @@ } body { - background: $color-background; + background: linear-gradient($color-background-0, $color-background-100); color: $color-text; display: flex; flex-direction: column; @@ -23,6 +23,21 @@ body { main { flex-grow: 1; } + + @media screen and (min-width: $small) { + &::before { + background: url(/stars.svg) repeat-x top; + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(100% - (100% - 1000px) / 2) 100%, calc(100% - (100% - 1000px) / 2) $header-spacing, calc((100% - 1000px) / 2) $header-spacing, calc((100% - 1000px) / 2) 100%, 0% 100%); + content: ''; + display: block; + height: $stars-height; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: -1; + } + } } header, footer { @@ -37,7 +52,7 @@ header { margin-top: 1rem; pre { - font-family: "Noto Sans Mono", monospace; + font-family: "OCR A", "Noto Sans Mono", monospace; font-size: 0.8rem; font-weight: bold; line-height: 1; @@ -109,7 +124,24 @@ footer { } @media screen and (min-width: $small) { - margin-bottom: 0.5rem; + margin-bottom: 0; + + &::before { + background: url(/footer.svg) bottom / auto $footer-height no-repeat; + content: ''; + display: block; + height: $footer-height; + left: 0; + margin-top: calc(1.5rem + 1.5em); + position: absolute; + width: 100%; + z-index: -1; + } + + & > nav { + margin-bottom: $footer-spacing; + margin-top: 1.5rem; + } } } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index dc15c10..1bba229 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -20,11 +20,11 @@
- - 
INTER
-GALAKTISCHE
-ERFAHRUNGS
-REISE
+ + 
Inter
+Galaktische
+Erfahrungs
+Reise