41 lines
1.4 KiB
SCSS
41 lines
1.4 KiB
SCSS
|
/************************************************************
|
||
|
|
*************************************************************
|
||
|
|
******************* SQUAT THEME *********************
|
||
|
|
********** Javascript-free attempt at a better web **********
|
||
|
|
*************************************************************
|
||
|
|
************************************************************/
|
||
|
|
|
||
|
|
/* Menu widget styles */
|
||
|
|
.widget-menu {
|
||
|
|
width: 100%; white-space: nowrap; box-sizing: border-box;
|
||
|
|
ul {
|
||
|
|
list-style: none; margin: 0; padding: 0;
|
||
|
|
display: inline-block;
|
||
|
|
@media screen and (max-width: 62em) { display: none; }
|
||
|
|
li { display: inline-block; padding: 0; margin: 0; position: relative; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#menu-nav-main { text-align: center; font-size: 1.2rem; }
|
||
|
|
.pure-menu-link, .pure-menu-open { display: block; padding: 0.5em 1em; }
|
||
|
|
#menu-nav-main .pure-menu-children { left: 50% !important; transform: translateX(-50%); }
|
||
|
|
|
||
|
|
.pure-menu-open {
|
||
|
|
display: none;
|
||
|
|
@media screen and (max-width: 62em) {
|
||
|
|
display: block;
|
||
|
|
&:target {
|
||
|
|
display: none;
|
||
|
|
& ~ .pure-menu-close { display: inline-block; }
|
||
|
|
& ~ ul {
|
||
|
|
display: block;
|
||
|
|
li { display: block; position: relative; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Making pureCSS menu responsive without Javascript */
|
||
|
|
.pure-menu-close { display: none; }
|