christian/hugo-page-test
1
0
Fork 0
forked from tsc-vfl/hugo-page
Code Pull Requests Activity

Create styles for mobile menu

Browse Source
This commit is contained in:
Christian Wolf 2024-01-07 10:44:26 +01:00
parent 02d17099a4
commit 85527b4467
1 changed files with 64 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
themes/tsc_vfl/assets/css/main.scss
View File

@ -2,7 +2,9 @@
$total_width: 95%; $total_width: 95%;
$color_red: #cd1013; $color_red: #cd1013;
$color_background_mobile_menu: #f5f5f5;
$color_background_mobile_menu_header: #e0e0e0; $color_background_mobile_menu_header: #e0e0e0;
$color_hor_line: #a5a5a5;
$gap_columns_persons: 25px; $gap_columns_persons: 25px;
@ -487,6 +489,68 @@ h1 {
} }
} }
.mobile-menu {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 30px 0;
padding: 30px 5% 0 5%;
box-sizing: border-box;
@include media-large() {
display: none;
}
border-top: 1px solid $color_hor_line;
.level-1 {
width: 100%;
a {
background-color: $color_background_mobile_menu_header;
}
}
.level-2 {
width: 50%;
a {
background-color: $color_background_mobile_menu;
}
}
.level-1, .level-2 {
display: flex;
padding: 3px;
box-sizing: border-box;
a {
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
@include menu-style();
&.active {
color: white;
background-color: $color_red;
}
}
}
}
.mobile-menu-link {
display: block;
border: 1px solid black;
width: max-content;
padding: 5px 75px 5px 15px;
margin: 5px 0 5px 20px;
@include menu-style();
@include media-large() {
display: none;
}
}
.announcement-list { .announcement-list {
.entry { .entry {
margin: 0 30px; margin: 0 30px;