forked from oyd/oyd-web
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
186 lines
3.6 KiB
186 lines
3.6 KiB
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0,0,0,0);
|
|
border: 0;
|
|
}
|
|
|
|
/*
|
|
===================================================
|
|
Base styles for all devices sizes, but mobile first
|
|
===================================================
|
|
*/
|
|
|
|
/*
|
|
Hamburger menu icon/'button' styling
|
|
*/
|
|
.menu-toggle {
|
|
display: block;
|
|
float: right;
|
|
vertical-align: middle;
|
|
/* padding: .75em 15px; */
|
|
line-height: 1.8em;
|
|
font-size: 1.8em;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.menu-toggle:hover,
|
|
.menu-toggle:focus {
|
|
color: #484557;
|
|
}
|
|
|
|
/*
|
|
Offscreen menu styling
|
|
- Default styles + mobile first
|
|
*/
|
|
.main-menu {
|
|
position: absolute;
|
|
display: none;
|
|
left: -200px; /* push off the screen to the left for future animation */
|
|
top: 0;
|
|
height: 100%;
|
|
background-color: #4C2447;
|
|
z-index: 999;
|
|
}
|
|
|
|
.main-menu ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 1.2em 0.8em 0;
|
|
/* Hide shadow w/ -8px while 'closed' */
|
|
min-height: 100%;
|
|
width: 200px;
|
|
background: #4C2447;
|
|
/* text-align: center; */
|
|
|
|
}
|
|
|
|
/*
|
|
Generic style for ALL hamburger menu links
|
|
*/
|
|
|
|
/*
|
|
Close button positioning
|
|
- Other styles come from `.main-menu a`
|
|
*/
|
|
.main-menu .menu-close {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 0;
|
|
line-height: 1.5em;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
/*
|
|
=======================================
|
|
On small devices, allow it to toggle...
|
|
=======================================
|
|
*/
|
|
|
|
/*
|
|
Opening hamburger menu!
|
|
- Using `:target` for non-JavaScript
|
|
- `[aria-expanded]` will be used if/when JavaScript is added to improve interaction, though it's completely optional.
|
|
*/
|
|
.main-menu:target,
|
|
.main-menu[aria-expanded="true"] {
|
|
display: block;
|
|
left: 0; /* slide from -200px to the left edge at 0 */
|
|
top: -12px;
|
|
overflow-x: visible;
|
|
overflow-y: hidden;
|
|
outline: none;
|
|
/* fix box-shadow so it shows now */
|
|
|
|
}
|
|
|
|
/*
|
|
Close menu button
|
|
- Make sure it's on top!
|
|
- Basically, when `.main-menu` is the target of the click, get its child `.menu-close` link
|
|
*/
|
|
.main-menu:target .menu-close,
|
|
.main-menu[aria-expanded="true"] .menu-close {
|
|
z-index: 1001;
|
|
font-size: 1.7em;
|
|
color: white;
|
|
}
|
|
|
|
/*
|
|
Hamburger menu list
|
|
- Make sure it's on top!
|
|
- Basically, when `.main-menu` is the target of the click, get its child `<ul>`
|
|
*/
|
|
.main-menu:target ul,
|
|
.main-menu[aria-expanded="true"] ul {
|
|
position: relative;
|
|
z-index: 1000;
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
/*
|
|
Backdrop
|
|
- Show backdrop
|
|
- Basically, when `.main-menu` is the target of the click, get its sibling `.backdrop`
|
|
- Note: we could use `.main-menu:target:after`, but
|
|
it wouldn't be clickable.
|
|
*/
|
|
|
|
|
|
/*
|
|
======================================================
|
|
If CSS supports `fixed`, like all good modern browsers
|
|
======================================================
|
|
*/
|
|
@supports (position: fixed) {
|
|
/*
|
|
Allow backdrop to stay fixed and not "scroll"
|
|
*/
|
|
.main-menu,
|
|
.main-menu:target + .backdrop,
|
|
.main-menu[aria-expanded="true"] + .backdrop {
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
/*
|
|
================================
|
|
Larger screen styling
|
|
================================
|
|
*/
|
|
|
|
/*
|
|
Horizontal menu (i.e. no hamburger)
|
|
*/
|
|
@media (min-width: 600px) {
|
|
/* Hide hamburger menu/'button' */
|
|
.menu-toggle,
|
|
.main-menu .menu-close {
|
|
display: none;
|
|
}
|
|
|
|
/* Undo positioning of off-canvas menu */
|
|
.main-menu {
|
|
position: relative;
|
|
left: auto;
|
|
top: auto;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.main-menu ul {
|
|
display: flex; /* allows for full height of menu */
|
|
|
|
/* Undo off-canvas styling */
|
|
padding: 0;
|
|
height: auto;
|
|
width: auto;
|
|
background: none;
|
|
}
|
|
|
|
}
|
|
|