revsuine/hugo-theme-terminal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplify menus

Browse source
This commit is contained in:
panr 2022-11-08 00:34:01 +01:00
parent 09628b6b3d
commit 39ba3a4ea9
10 changed files with 236 additions and 250 deletions
Download patch file Download diff file Expand all files Collapse all files

140
assets/css/header.scss
View file

@ -1,17 +1,3 @@
@mixin menu {
$shadow-color: opacify($background, .8);
$shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
position: absolute;
background: $background;
box-shadow: $shadow;
color: white;
border: 2px solid;
margin: 0;
padding: 10px;
list-style: none;
z-index: 99;
}
.header {
display: flex;
flex-direction: column;
@ -45,130 +31,4 @@
text-decoration: none;
}
}
.menu {
display: flex;
align-items: flex-start;
margin: 20px 1px;
@media ($phone) {
@include menu;
top: 50px;
right: 0;
&.hidden-on-mobile {
display: none;
}
}
&__inner {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
&--desktop {
@media ($phone) {
display: none;
}
}
&--mobile {
display: none;
@media ($phone) {
display: block;
}
}
li {
&:not(:last-of-type) {
margin-right: 20px;
margin-bottom: 10px;
flex: 0 0 auto;
}
}
@media ($phone) {
flex-direction: column;
align-items: flex-start;
padding: 0;
li {
margin: 0;
padding: 5px;
}
}
}
&__sub-inner {
position: relative;
list-style: none;
padding: 0;
margin: 0;
&:not(:only-child) {
margin-left: 20px;
}
&-more {
@include menu;
top: 0;
left: 0;
&-trigger {
color: $accent;
user-select: none;
cursor: pointer;
}
li {
margin: 0;
padding: 5px;
white-space: nowrap;
}
}
}
.spacer {
flex-grow: 1 !important;
}
.language-selector {
position: relative;
list-style: none;
margin: 0;
&-current {
list-style-type: none;
display: flex;
flex-direction: row;
color: $accent;
cursor: pointer;
margin-right: 0 !important;
}
&__more {
@include menu;
top: 0;
right: 0;
}
}
&-trigger {
display: none;
color: $accent;
border: 2px solid;
margin-left: 10px;
height: 100%;
padding: 3px 8px;
position: relative;
cursor: pointer;
@media ($phone) {
display: block;
}
}
}
}

156
assets/css/menu.scss Normal file
View file

@ -0,0 +1,156 @@
@mixin menu {
display: none;
flex-direction: column;
$shadow-color: opacify($background, .8);
$shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
position: absolute;
background: $background;
box-shadow: $shadow;
color: white;
border: 2px solid;
margin: 0;
padding: 10px;
top: 10px;
left: 0;
list-style: none;
z-index: 99;
}
@mixin header-menu-trigger {
color: $accent;
border: 2px solid;
margin-left: 10px;
height: 100%;
padding: 3px 8px;
margin-bottom: 0 !important;
position: relative;
cursor: pointer;
}
.navigation-menu {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin: 20px 1px;
@media ($phone) {
margin: 0;
}
&__inner {
display: flex;
flex: 1;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
> li {
flex: 0 0 auto;
margin-bottom: 10px;
&:not(:last-of-type) {
margin-right: 20px;
}
}
@media ($phone) {
flex-direction: column;
align-items: flex-start;
padding: 0;
li {
margin: 0;
padding: 5px;
}
}
}
.spacer {
flex-grow: 1 !important;
}
}
.menu {
display: flex;
flex-direction: column;
position: relative;
list-style: none;
padding: 0;
margin: 0;
&__trigger {
margin-right: 0 !important;
color: $accent;
user-select: none;
cursor: pointer;
}
&__dropdown {
@include menu;
.open & {
display: flex;
}
> li {
flex: 0 0 auto;
&:not(:last-of-type) {
margin-bottom: 10px;
}
a {
display: flex;
padding: 5px;
}
}
}
&--desktop {
@media ($phone) {
display: none
}
}
&--mobile {
.menu__trigger {
@include header-menu-trigger;
display: none;
@media ($phone) {
display: block;
}
}
.menu__dropdown {
@media ($phone) {
left: auto;
right: 0;
}
}
li {
flex: 0 0 auto;
&:not(:last-of-type) {
margin-bottom: 10px;
}
}
}
&--language-selector {
.menu__trigger {
@include header-menu-trigger;
@media ($phone) {
display: none;
}
}
.menu__dropdown {
left: auto;
right: 0;
}
}
}

1
assets/css/style.scss
View file

@ -5,6 +5,7 @@
@import "form";
@import "header";
@import "menu";
@import "logo";
@import "main";
@import "post";