cwtv
/
chaoswest.tv
3
0
Fork 0
Code Issues 2 Pull Requests Releases Activity

improve startpage, adding responsive layout

This commit is contained in:
L3D 2022-01-21 03:07:29 +01:00
parent 722b5acec1
commit 43dddae55f
Signed by: L3D
GPG Key ID: CD08445BFF4313D1
6 changed files with 77 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
assets/scss/_header.scss
View File

@ -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;
}
}
}

15
assets/scss/_start.scss
View File

@ -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;
}
}

1
assets/scss/_variables.scss
View File

@ -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;

2
content/contents.lr
View File

@ -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:

5
models/start.ini
View File

@ -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

3
templates/start.html
View File

@ -7,9 +7,6 @@
<h2>{{ this.title }}</h2>
{{ this.body }}
</div>
<div class="right">
<img src="{{ this.image }}" />
</div>
{% endblock -%}
{%- block class -%}
start