Steev
efd8da0bc8
moves files from scss to sass directory moved all variables to different file to simplify theming accross the whole library
154 lines
2.6 KiB
CSS
154 lines
2.6 KiB
CSS
/* Colours */
|
|
header {
|
|
background: #f8f8f8;
|
|
text-align: center;
|
|
height: 30px;
|
|
z-index: 999;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 10px; }
|
|
|
|
.locked-top {
|
|
top: 0;
|
|
position: fixed; }
|
|
|
|
.nav-toggle {
|
|
display: none; }
|
|
|
|
.nav-toggle-label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin-left: 1em;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center; }
|
|
|
|
.nav-toggle-label span,
|
|
.nav-toggle-label span::before,
|
|
.nav-toggle-label span::after {
|
|
display: block;
|
|
background: white;
|
|
height: 2px;
|
|
width: 2em;
|
|
border-radius: 2px; }
|
|
|
|
.nav-toggle-label span::before,
|
|
.nav-toggle-label span::after {
|
|
content: '';
|
|
position: absolute; }
|
|
|
|
.nav-toggle-label span::before {
|
|
bottom: 30px; }
|
|
|
|
.nav-toggle-label span::after {
|
|
top: 30px; }
|
|
|
|
.nav-locked {
|
|
top: 100%;
|
|
left: 0;
|
|
position: absolute; }
|
|
|
|
nav {
|
|
text-align: left;
|
|
width: 100%;
|
|
background: #f8f8f8;
|
|
display: none;
|
|
transform: scale(1, 0);
|
|
transform-origin: top;
|
|
transition: 400ms;
|
|
transition: transform 400ms ease-in-out; }
|
|
|
|
nav ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none; }
|
|
|
|
nav li {
|
|
margin-bottom: 1em;
|
|
margin-left: 1em; }
|
|
|
|
nav a {
|
|
text-decoration: none;
|
|
font-size: 1.2rem;
|
|
text-transform: uppercase;
|
|
color: #2e2e2e;
|
|
opacity: 0; }
|
|
|
|
nav a:hover {
|
|
color: #a5a5a5; }
|
|
|
|
.nav-toggle:checked ~ nav {
|
|
display: block;
|
|
transform: scale(1, 1);
|
|
transition: 400ms; }
|
|
|
|
.nav-toggle:checked ~ nav a {
|
|
opacity: 1;
|
|
transition: opacity 150ms ease-in-out; }
|
|
|
|
@media screen and (min-width: 800px) {
|
|
.nav-toggle-label {
|
|
display: none; } }
|
|
|
|
header {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr; }
|
|
|
|
nav {
|
|
all: unset;
|
|
display: flex;
|
|
align-items: center; }
|
|
|
|
nav a {
|
|
opacity: 1; }
|
|
|
|
nav ul {
|
|
display: flex; }
|
|
|
|
nav li {
|
|
margin-left: 1em;
|
|
margin-bottom: 0;
|
|
list-style: none; }
|
|
|
|
.nav-logo-left {
|
|
grid-column: 2 / span 1; }
|
|
|
|
.nav-left {
|
|
all: unset;
|
|
grid-column: 3 / 4;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center; }
|
|
|
|
.nav-left ul {
|
|
display: flex;
|
|
justify-content: flex-end; }
|
|
|
|
.sidebar-wrapper {
|
|
display: flex; }
|
|
|
|
.sidebar-wrapper .sidebar-content {
|
|
width: 100%; }
|
|
|
|
.sidebar-wrapper .sidebar-left {
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-left: 0;
|
|
padding-right: 5px;
|
|
height: 100%; }
|
|
|
|
.sidebar-wrapper .sidebar-left .sidebar-menu ul {
|
|
width: fit-content; }
|
|
|
|
.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-title {
|
|
width: max-content;
|
|
font-size: 20pt;
|
|
padding-right: 5px; }
|
|
|
|
.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-item li {
|
|
width: fit-content;
|
|
color: #2980b9;
|
|
text-decoration: none;
|
|
font-size: 12pt; }
|