diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 34e0501..54a1fdc 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -19,6 +19,9 @@ header { display: grid; place-items: flex-start; margin-left: -25px; + background: $menu_background_color; + box-shadow: 300px 0px 0px 0px $menu_background_color, + -300px 0px 0px 0px $menu_background_color; .title_dropdown { background-color: transparent; border: none; @@ -34,7 +37,7 @@ header { text-align: center; display: inline-block; color: #fff; - font-size: 1.125rem; + font-size: $font_size_default; &:focus { outline: none; @@ -150,102 +153,73 @@ header { p { - font-size: 1.125rem; + font-size: $font_size_default; line-height: 1.5; } } } -// header { -// margin: -25px -25px 0px -25px; -// background: $background_accent_1; -// padding: 20px 30px; -// box-shadow: 5px 5px 5px 10px $background_accent_1; -// h1 a, h1 a:hover, h1 a:link, h1 a:visited { -// font-family: $headline_font, sans-serif; -// color: $font_accent_1; -// margin: 0; -// font-weight: bold; -// font-size: $font_size_h1; -// text-decoration: none; -// } -// nav ul { -// list-style: none; -// margin: 0; -// padding: 0; -// display: inline; -// position: relative; -// li { -// margin: 0 8px 0 0; -// padding: 0; -// a, a:link, a:visited { -// font-size: $font_size_default; -// color: $font_accent_2; -// text-decoration: none; -// background: $shadow_accent_1; -// padding: 8px 24px; -// border-radius: 5px; -// text-transform: $menu_text_transform; -// } -// a:hover, a:active { -// color: $font_accent_2_hover; -// box-shadow: 0px 0px 1px 1px $shadow_accent_1; -// } -// ul li { -// display: none; -// position: absolute; -// background: green; -// } -// } -// } -// } +@media (min-width: $large_view) { + header { + max-width: $large_min_width; + margin: auto; + box-shadow: 0px -10000px 0px 10000px $background_accent_1; + h1 a, h1 a:hover, h1 a:link { + font-size: $font_size_h1_large; + } + nav { + box-shadow: $large_view 0px 0px 0px $menu_background_color, + -$large_view 0px 0px 0px $menu_background_color; + > ul { + > li { + a, .title_dropdown { + font-size: $font_size_default_large; + } + } + } + p { + font-size: $font_size_default_large; + } + } + } +} -// @media (min-width: $large_view) { -// header { -// max-width: $large_min_width; -// margin: auto; -// box-shadow: 0px -10000px 0px 10000px $background_accent_1; -// h1 a, h1 a:hover, h1 a:link { -// font-size: $font_size_h1_large; -// } -// nav ul { -// font-size: $font_size_default_large; -// } -// } -// } -// -// @media (max-width: $mobile_view) { -// header { -// h1 a, h1 a:hover, h1 a:link { -// font-size: $font_size_h1_mobile; -// } -// nav ul { -// font-size: $font_size_default_mobile; -// a, a:link, a:visited { -// display: block; -// padding: 5px 8px; -// margin: -6px 0px; -// } -// } -// } -// } -// -// @media (max-width: $tiny_view) { -// header { -// h1 a, h1 a:hover, h1 a:link { -// font-size: $font_size_h1_tiny; -// } -// nav ul { -// font-size: $font_size_default_tiny; -// } -// } -// } -// -// @media (max-width: $pico_view) { -// header { -// h1 a, h1 a:hover, h1 a:link { -// font-size: $font_size_h1_pico; -// } -// } -// } +@media (max-width: $mobile_view) { + header { + h1 a, h1 a:hover, h1 a:link { + font-size: $font_size_h1_mobile; + } + nav { + ul { + display: table; + + } + .dropdown { + .dropdown__menu { + left: 180%; + } + &:after { + content: none; + opacity: 1; + } + } + } + } +} + +@media (max-width: $tiny_view) { + header { + h1 a, h1 a:hover, h1 a:link { + font-size: $font_size_h1_tiny; + } + } +} + +@media (max-width: $pico_view) { + header { + h1 a, h1 a:hover, h1 a:link { + font-size: $font_size_h1_pico; + } + } +} diff --git a/assets/scss/_start.scss b/assets/scss/_start.scss index b8a5e19..20b8481 100644 --- a/assets/scss/_start.scss +++ b/assets/scss/_start.scss @@ -17,9 +17,12 @@ div.start { max-width: 100%; } - p, a { - color: $font_default; - font-size: $font_size_default; + p { + font-size: $font_size_default; + color: $font_default; + } + a { + color: $font_default; } code { @@ -41,7 +44,7 @@ div.start { .right, .left { flex: 50%; } - p, a { + p { font-size: $font_size_default_large; } code { @@ -62,7 +65,7 @@ div.start { @media (max-width: $mobile_view) { div.start { display: initial; - p, a { + p { font-size: $font_size_default_mobile; } code { @@ -81,7 +84,7 @@ div.start { @media (max-width: $tiny_view) { div.start { - p, a { + p { font-size: $font_size_default_tiny; } } diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 888c4f1..71d09be 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -1,5 +1,6 @@ $background_accent_1: rgb(247, 196, 24 ); $background_accent_2: black; +$menu_background_color: rgba(255,69,0,0.3); $menu_background_dropdown_color: white; $menu_accent_hover: red; diff --git a/content/contents.lr b/content/contents.lr index a555047..201c857 100644 --- a/content/contents.lr +++ b/content/contents.lr @@ -20,5 +20,3 @@ Der Fokus unser Arbeit liegt dabei darauf, die technischen Möglichkeiten zu erg Hast ein Projekt, ein Thema oder auch eine komplette Veranstaltung die du mit der Welt teilen Willst? Sprich uns einfach an! -> ``Kontaktseite Talk oder Veranstaltung Streamen`` Klingt das spannend für dich und du hast Lust dich auch in Veranstaltungstechnik, Video, Audio, Licht oder eins der vielen anderen Themen rein zu nerden? Dann mach doch bei uns mit! Wir suchen immer motivierte Wesen die an solchen Themen spaß haben! Sprich uns an oder komme auf einer präsenzveranstaltung bei uns vorbei! -> ``Kontaktseite mitmachen`` ---- -image: diff --git a/models/start.ini b/models/start.ini index 6eb5824..9fd4899 100644 --- a/models/start.ini +++ b/models/start.ini @@ -7,11 +7,6 @@ hidden = true label = Title type = string -[fields.image] -label = Image -description = Image URL Path -type = string - [fields.body] label = Body type = markdown diff --git a/templates/start.html b/templates/start.html index 291d3e2..993c81f 100644 --- a/templates/start.html +++ b/templates/start.html @@ -7,9 +7,6 @@