ro
3b5c753c9a
there were some random logos in the global images folder, so that was cleaned up and replaced with primary and secondary options according to the current color palette for the sake of flexibility found a nice repo of svg icons, so experimented with adding one to the sprite sheet to see if it works, which it does
140 lines
2 KiB
CSS
140 lines
2 KiB
CSS
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font: 400 1.2em/1.4em var(--base-type);
|
|
}
|
|
|
|
html body {
|
|
background: var(--primary);
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* GLOBALS */
|
|
|
|
a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
border-bottom: 0;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
img.logo-medium {
|
|
width: 140px;
|
|
}
|
|
|
|
sup {
|
|
background: var(--black);
|
|
color: var(--white);
|
|
padding: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--secondary-highlight);
|
|
color: var(--white);
|
|
}
|
|
|
|
#notifications {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
background: var(--black);
|
|
color: var(--secondary-highlight);
|
|
border-radius: 3px;
|
|
padding: 3px;
|
|
}
|
|
|
|
/* HEADER
|
|
Navigation
|
|
Notificiations
|
|
*/
|
|
|
|
header {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 10px auto;
|
|
height: 50px;
|
|
border-radius: 5px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
position: fixed;
|
|
z-index: 500;
|
|
}
|
|
|
|
header > nav > a img {
|
|
width: 40px;
|
|
padding: 5px;
|
|
}
|
|
|
|
header > nav > h1 {
|
|
text-align: left;
|
|
height: 100%;
|
|
}
|
|
|
|
header > nav > h1 {
|
|
color: var(--primary);
|
|
margin: 15px;
|
|
}
|
|
|
|
header > nav > div.nav-right {
|
|
padding: 5px;
|
|
}
|
|
|
|
header > nav > div > div.mobile-menu {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
transition: all 0.2s linear;
|
|
background: var(--white);
|
|
}
|
|
|
|
header > nav > div.nav-right button {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-left: 5px;
|
|
font-size: 0.8em;
|
|
color: var(--white);
|
|
}
|
|
|
|
header > nav > div.nav-right > button.menu-toggle {
|
|
display: none;
|
|
}
|
|
|
|
header > nav > div.nav-right div.submenu {
|
|
display: inline;
|
|
}
|
|
|
|
header > nav > div.nav-right div.submenu button {
|
|
background: var(--primary);
|
|
color: var(--white);
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/* RESPONSIVE */
|
|
|
|
@media only screen and (max-width: 900px) {
|
|
header {
|
|
width: 97%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 530px) {
|
|
header > nav > div.nav-right > button.menu-toggle {
|
|
display: inline;
|
|
}
|
|
|
|
header > nav > div > div.menu {
|
|
display: none;
|
|
}
|
|
}
|