forked from projects/fipamo
bfb0873f5f
Started cleaning up responsive styles for the site starting with the Settings section. Still needs some tweaking but the structure for that section is in so it's just a matter of police. Some changes need to be made to the main nav as reduced viewport throws off the alignment.
160 lines
2.4 KiB
CSS
160 lines
2.4 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;
|
|
}
|
|
|
|
#notifications {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
background: var(--black);
|
|
color: var(--highlight);
|
|
border-radius: 3px;
|
|
padding: 3px;
|
|
}
|
|
|
|
svg[role="icon"] {
|
|
fill: var(--white);
|
|
width: 25px;
|
|
height: 25px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
/* 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 > div[role="nav-left"] img {
|
|
width: 40px;
|
|
padding: 5px;
|
|
}
|
|
|
|
header > nav > div[role="title"] {
|
|
text-align: left;
|
|
height: 100%;
|
|
}
|
|
|
|
header > nav > div[role="title"] h1 {
|
|
color: var(--primary);
|
|
margin: 15px;
|
|
}
|
|
|
|
header > nav > div[role="nav-right"] {
|
|
padding: 5px;
|
|
}
|
|
|
|
header > nav > div[role="nav-right"] button {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-left: 5px;
|
|
font-size: 0.8em;
|
|
color: var(--white);
|
|
}
|
|
|
|
header > nav > div[role="nav-right"] div[role="submenu"] {
|
|
display: inline;
|
|
}
|
|
|
|
header > nav > div[role="nav-right"] div[role="submenu"] button {
|
|
background: var(--primary);
|
|
color: var(--white);
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
header
|
|
> nav
|
|
> div[role="nav-right"]
|
|
div[role="submenu"]
|
|
button[data-render="true"] {
|
|
background: var(--tertiary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
section[role="login"] {
|
|
margin: 15% auto;
|
|
padding: 10px;
|
|
width: 500px;
|
|
border-radius: 5px;
|
|
background: var(--white);
|
|
display: grid;
|
|
grid-template-columns: 28.5% 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
section[role="login"] form input {
|
|
width: 95%;
|
|
height: 30px;
|
|
padding: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
section[role="login"] form button {
|
|
padding: 10px 5px;
|
|
width: 82%;
|
|
}
|
|
|
|
section[role="login"] form a {
|
|
padding: 10px 5px;
|
|
border-radius: 5px;
|
|
width: 10%;
|
|
height: 20px;
|
|
display: inline-block;
|
|
background: var(--tertiary);
|
|
vertical-align: top;
|
|
text-align: center;
|
|
margin: 0 0 0 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* RESPONSIVE */
|
|
|
|
@media only screen and (max-width: 900px) {
|
|
header {
|
|
width: 97%;
|
|
}
|
|
}
|