Feature Update
- Responsive Layout - Mobile Support - Columns Block
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
+141
-77
@@ -25,28 +25,34 @@
|
||||
}
|
||||
}
|
||||
|
||||
body > .header {
|
||||
// --------------------------------------------------------------------------------
|
||||
// Header
|
||||
// --------------------------------------------------------------------------------
|
||||
#header {
|
||||
padding: 5px;
|
||||
background: $theme-header-background;
|
||||
color: $theme-header-color;
|
||||
}
|
||||
|
||||
body > .header > .content {
|
||||
#header > .content {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-columns: min-content auto;
|
||||
max-width: $theme-width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
body > .header > .content .logo {
|
||||
// --------------------------------------------------------------------------------
|
||||
// Header > Logo
|
||||
// --------------------------------------------------------------------------------
|
||||
#header > .content .logo {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
margin: 0 2em 0 0;
|
||||
margin: 0 20px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body > .header > .content .logo > .icon {
|
||||
#header > .content .logo > .icon {
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
height: 90px;
|
||||
@@ -54,7 +60,7 @@ body > .header > .content .logo > .icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body > .header > .content .logo > figcaption {
|
||||
#header > .content .logo > figcaption {
|
||||
justify-self: left;
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
@@ -66,82 +72,140 @@ body > .header > .content .logo > figcaption {
|
||||
letter-spacing: .25ch;
|
||||
}
|
||||
|
||||
body > .header > .content .navigation {
|
||||
justify-self: left;
|
||||
align-self: center;
|
||||
font-size: 0.9rem;
|
||||
// --------------------------------------------------------------------------------
|
||||
// Header > Navigation
|
||||
// --------------------------------------------------------------------------------
|
||||
#navigation-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
font-size: 1.0rem;
|
||||
color: $theme-menu-color;
|
||||
}
|
||||
|
||||
body > .header > .content .navigation > .menu {
|
||||
#navigation .menu {
|
||||
list-style: none inside;
|
||||
text-transform: uppercase;
|
||||
padding: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body > .header > .content .navigation > .menu > li {
|
||||
display: inline-block;
|
||||
padding: 0px .5em 0px 0px;
|
||||
margin: 0;
|
||||
#navigation .menu > .entry > .item {
|
||||
color: $theme-menu-color;
|
||||
}
|
||||
|
||||
body > .header > .content .navigation > .menu > li > .menu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
padding: 0px .5em;
|
||||
margin: 0;
|
||||
cursor: auto;
|
||||
list-style: none inside;
|
||||
background: $theme-menu-background;
|
||||
box-shadow: 2px 2px 5px 0px black;
|
||||
}
|
||||
|
||||
body > .header > .content .navigation > .menu > li > .menu > li {
|
||||
display: block;
|
||||
padding: 0 .5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body > .header > .content .navigation .menu > li > a {
|
||||
display: block;
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
body > .header > .content .navigation .menu li {
|
||||
color: hsl(0, 0%, 75%);
|
||||
}
|
||||
|
||||
body > .header > .content .navigation .menu li.has-menu {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body > .header > .content .navigation .menu li.has-menu > .menu {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
animation-name: menu_hide;
|
||||
animation-duration: 100ms;
|
||||
animation-fill-mode: both;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
body > .header > .content .navigation .menu li.has-menu:hover > .menu,
|
||||
body > .header > .content .navigation .menu li.has-menu > .menu:hover,
|
||||
body > .header > .content .navigation .menu li.has-menu:focus > .menu,
|
||||
body > .header > .content .navigation .menu li.has-menu > .menu:focus,
|
||||
body > .header > .content .navigation .menu li.has-menu:active > .menu,
|
||||
body > .header > .content .navigation .menu li.has-menu > .menu:active {
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
animation-name: menu_show;
|
||||
animation-duration: 100ms;
|
||||
animation-fill-mode: both;
|
||||
animation-direction: normal;
|
||||
}
|
||||
|
||||
body > .header > .content .navigation .menu li:hover,
|
||||
body > .header > .content .navigation .menu li:active,
|
||||
body > .header > .content .navigation .menu li:focus {
|
||||
#navigation .menu > .entry > .item:hover,
|
||||
#navigation .menu > .entry > .item:active,
|
||||
#navigation .menu > .entry > .item:focus {
|
||||
color: $theme-menu-color-active;
|
||||
}
|
||||
|
||||
// Responsive Layout
|
||||
@media (pointer: coarse), (max-width: 767px) {
|
||||
#navigation-toggle {
|
||||
justify-self: stretch;
|
||||
align-self: center;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0rem 2.5rem;
|
||||
text-align: right;
|
||||
font-size: 3.0rem;
|
||||
color: $theme-menu-color;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
grid-column-start: span 2;
|
||||
}
|
||||
|
||||
// Show/Hide menu
|
||||
#navigation {
|
||||
display: none;
|
||||
}
|
||||
#navigation.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#navigation .menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#navigation .menu .menu {
|
||||
padding-left: 1.5rem;
|
||||
background: $theme-menu-background;
|
||||
box-shadow: 2px 2px 5px 0px black;
|
||||
}
|
||||
|
||||
#navigation .item {
|
||||
display: block;
|
||||
padding: .5rem .5rem;
|
||||
//border: 1px solid $theme-menu-background;
|
||||
transition: color 250ms linear;
|
||||
}
|
||||
}
|
||||
|
||||
@media (pointer: fine) and (min-width: 768px) {
|
||||
#navigation {
|
||||
justify-self: stretch;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#navigation > .menu {
|
||||
text-transform: uppercase;
|
||||
padding: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#navigation > .menu > li {
|
||||
display: inline-block;
|
||||
padding: 0px .5em 0px 0px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#navigation > .menu > li > .menu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
padding: 0px .5em;
|
||||
margin: 0;
|
||||
cursor: auto;
|
||||
background: $theme-menu-background;
|
||||
box-shadow: 2px 2px 5px 0px black;
|
||||
}
|
||||
|
||||
#navigation > .menu > li > .menu > li {
|
||||
display: block;
|
||||
padding: 0 .5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#navigation .menu > li > a {
|
||||
display: block;
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
#navigation .menu li.has-menu {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#navigation .menu li.has-menu > .menu {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
animation-name: menu_hide;
|
||||
animation-duration: 100ms;
|
||||
animation-fill-mode: both;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
#navigation .menu li.has-menu:hover > .menu,
|
||||
#navigation .menu li.has-menu > .menu:hover,
|
||||
#navigation .menu li.has-menu:focus > .menu,
|
||||
#navigation .menu li.has-menu > .menu:focus,
|
||||
#navigation .menu li.has-menu:active > .menu,
|
||||
#navigation .menu li.has-menu > .menu:active {
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
animation-name: menu_show;
|
||||
animation-duration: 100ms;
|
||||
animation-fill-mode: both;
|
||||
animation-direction: normal;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user