a70bb7b2b0
Cleaned up the themes folder since it did not need the additional folder depth to manage bundled scripts anymore. Updated the theme engine accordingly.
203 lines
3.1 KiB
CSS
203 lines
3.1 KiB
CSS
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font: 400 1.2em/1.4em var(--base-type);
|
|
}
|
|
|
|
html body {
|
|
background: var(--white);
|
|
margin: 0;
|
|
padding: 0;
|
|
perspective: 1px;
|
|
transform-style: preserve-3d;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* GLOBALS */
|
|
|
|
a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--secondary);
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
a:hover {
|
|
border-bottom: 1px solid var(--highlight);
|
|
}
|
|
|
|
sup {
|
|
background: var(--black);
|
|
color: var(--white);
|
|
padding: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
background: var(--black);
|
|
color: var(--highlight);
|
|
border-radius: 3px;
|
|
padding: 3px;
|
|
}
|
|
|
|
/* HEADER */
|
|
|
|
header {
|
|
background: var(--primary);
|
|
height: 90%;
|
|
width: 100%;
|
|
border-top: var(--white) 3px solid;
|
|
}
|
|
|
|
/* HEADER -> Slideshow */
|
|
|
|
header > div[role="slide-show"] {
|
|
width: 100%;
|
|
height: 90%;
|
|
position: absolute;
|
|
}
|
|
|
|
header > div[role="slide-show"] > div[role="slide"] {
|
|
transition: all 0.7s linear;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
.hide {
|
|
opacity: 0;
|
|
}
|
|
|
|
.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
header > div[role="slide-show"] > div[role="slide"] > video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* HEADER -> Navigation */
|
|
|
|
nav {
|
|
width: 97%;
|
|
margin: 10px auto;
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
z-index: 1000;
|
|
position: relative;
|
|
color: var(--primary);
|
|
}
|
|
|
|
nav img {
|
|
width: 50px;
|
|
border-bottom: none;
|
|
}
|
|
|
|
nav div[role="nav-right"] {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
|
|
nav a[role="home-link"] {
|
|
border-bottom: none;
|
|
}
|
|
|
|
nav a[role="menu-link"] {
|
|
background: var(--secondary);
|
|
margin-bottom: 14px;
|
|
padding: 3px;
|
|
border-radius: 2px;
|
|
display: inline-block;
|
|
font-size: 0.8em;
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* MAIN CONTENT */
|
|
main {
|
|
z-index: 2;
|
|
background: var(--white);
|
|
line-height: 30px;
|
|
font-weight: lighter;
|
|
width: 100%;
|
|
color: var(--black);
|
|
}
|
|
|
|
main > article {
|
|
position: relative;
|
|
background: var(--white);
|
|
vertical-align: top;
|
|
color: var(--black);
|
|
padding: 0 15%;
|
|
}
|
|
|
|
main > article > div[role="archives"] {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
column-gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
main article div[role="archives"] h1,
|
|
main article div[role="archives"] h2,
|
|
main article div[role="archives"] h3 {
|
|
color: var(--primary);
|
|
}
|
|
|
|
main > section {
|
|
background: var(--primary);
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
padding: 0 15%;
|
|
max-width: 1000px;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
main > section > div {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
main > section[role="page-meta"] > div a {
|
|
color: var(--white);
|
|
}
|
|
|
|
/* FOOTER */
|
|
footer {
|
|
background: var(--highlight);
|
|
padding: 30px 15%;
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* RESPONSIVE */
|
|
|
|
@media only screen and (max-width: 640px) {
|
|
main > article {
|
|
padding: 0 10%;
|
|
}
|
|
|
|
main > section {
|
|
padding: 0 10%;
|
|
}
|
|
|
|
footer {
|
|
background: var(--highlight);
|
|
padding: 30px 10%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 480px) {
|
|
main > section {
|
|
display: inline-grid;
|
|
grid-template-columns: 50%;
|
|
width: 100%;
|
|
}
|
|
}
|