pdostal/receptty.org
1
0
Fork 0
forked from em/receptty.org
Code Issues Pull Requests Releases Activity

Navigation refactoring

Browse Source
This commit is contained in:
Emil Miler
2023-04-03 22:11:05 +02:00
parent e17c6a2b47
commit 4f9c0bb74d
5 changed files with 66 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
sass/_nav.scss
View File

@@ -1,71 +1,68 @@
nav {
display:flex;
flex-direction:column;
width:100%;
background:$nav-background-primary;
color:$nav-h1-color;
display: flex;
flex-direction: column;
width: 100%;
color: $nav-h1-color;
h1 {
a.title {
margin: 0;
a {
display: block;
padding: $nav-h1-padding;
color: $nav-h1-color;
font-size: $nav-h1-font-size;
}
padding: 0 $nav-item-padding;
color: $nav-h1-color;
font-size: $nav-h1-font-size;
font-weight: bold;
}
ul {
display:flex;
flex-wrap:wrap;
justify-content:center;
margin:0;
padding:0;
list-style-type:none;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
list-style-type: none;
li {
a {
padding: $nav-item-padding;
display:block;
text-decoration:none;
&, &:active, &:visited {
color:$nav-color;
}
li a {
display: block;
padding: $nav-item-padding;
text-decoration: none;
&:hover {
color:$nav-anchor-hover-color;
}
&, &:active, &:visited {
color: $nav-color;
}
&:hover, &.selected {
color: $nav-anchor-hover-color;
background-color: $nav-background-primary;
}
}
}
img {
height:1em;
width:1em;
height: 1em;
width: 1em;
}
.mainnav {
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
max-width:$recipe-wrap;
margin:0 auto;
box-sizing:border-box;
.wrap {
width: 100%;
max-width: $main-wrap;
margin: 0 auto;
}
.subnav {
display:flex;
justify-content:center;
background:$nav-background-secondary;
.primary {
background: $nav-background-primary;
a.active {
color: $nav-anchor-hover-color;
background-color: $nav-background-primary;
.wrap {
display: flex;
justify-content: space-between;
align-items : center;
}
}
.secondary {
background: $nav-background-secondary;
.wrap {
display: flex;
justify-content: center;
}
}
}

3
sass/_variables.scss
View File

@@ -29,10 +29,9 @@ $nav-color:#fff;
$nav-background-primary:#333;
$nav-background-secondary:#555;
$nav-anchor-hover-color:$anchor-hover-color;
$nav-h1-padding: .8em;
$nav-h1-color: $primary;
$nav-h1-font-size: 1.5rem;
$nav-item-padding: 1em;
$nav-item-padding: 1rem;
// recipe
$recipe-background:#fff;

5
sass/style.scss
View File

@@ -7,6 +7,10 @@
@import "fonts";
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
margin:0;
}
@@ -138,7 +142,6 @@ main {
border:1px solid $border;
border-radius:$article-border-radius;
overflow:hidden;
box-sizing:border-box;
width:100%;
box-shadow: none;
transition: box-shadow .15s ease;