kosmos/akkounts
8
1
Fork 0
Code Issues 22 Pull Requests 1 Actions Packages Releases 12 Activity

Add small-screen layout for main navigation

Browse Source
This commit is contained in:
Basti
2020-12-27 14:14:53 +01:00
parent c62ce00184
commit 9372ea7343
2 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/assets/stylesheets/main_nav.scss
View File

@@ -1,4 +1,5 @@
@import "variables";
@import "mediaqueries";
#main-nav {
width: 100%;
@@ -12,15 +13,34 @@
}
ul {
@include media-max(large) {
display: grid;
grid-template-columns: repeat(1fr);
grid-template-columns: 1fr 1fr 1fr;
}
li {
display: inline;
@include media-min(large) {
display: inline;
}
@include media-max(large) {
display: block;
}
a {
display: inline-block;
padding: 1.5rem;
padding: 1.5rem 2rem;
text-decoration: none;
color: $text-color-discreet;
@include media-max(large) {
display: block;
text-align: center;
padding-left: 0;
padding-right: 0;
}
&.active {
color: $text-color-body;
border-bottom: 2px solid #ffd000;