forked from projects/fipamo
ro
989a4c7b69
the notifications and page editor ui elements where the only remaining space that still contained font icons, so they've been removed and replaced with svg some styling tweaks are still needed so that will handlded as the css edits continue
136 lines
2 KiB
CSS
136 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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|