forked from projects/fipamo
ro
8bf640ee18
conversion of markdown files to html works fine, but the coresponding
css, js and image assets were not being moved, so the class responsible
for moving them was edited so theme assets are moved to their
appropriate directories when the site is published.
also made some css and image edits, and removed a legacy css files that
were no longer in use
228 lines
3.4 KiB
CSS
228 lines
3.4 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(--secondary);
|
|
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;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
a:hover {
|
|
border-bottom: 1px solid var(--secondary-highlight);
|
|
}
|
|
|
|
sup {
|
|
background: var(--black);
|
|
color: var(--white);
|
|
padding: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
background: var(--black);
|
|
color: var(--secondary-highlight);
|
|
border-radius: 3px;
|
|
padding: 3px;
|
|
}
|
|
|
|
img.logo-medium {
|
|
width: 60px;
|
|
}
|
|
|
|
#menu-open,
|
|
#menu-close {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* HEADER */
|
|
|
|
header {
|
|
width: 100%;
|
|
border-top: var(--secondary) 3px solid;
|
|
position: relative;
|
|
z-index: 400;
|
|
}
|
|
|
|
div#menu {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--secondary-highlight);
|
|
z-index: 500;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
div.menu > div.links {
|
|
font-size: 2em;
|
|
line-height: 1em;
|
|
}
|
|
|
|
/* Slideshow */
|
|
|
|
div.slide-show {
|
|
width: 100%;
|
|
height: 90%;
|
|
position: relative;
|
|
}
|
|
|
|
div.slide-show > div.slide {
|
|
transition: all 0.7s linear;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
.hide {
|
|
opacity: 0;
|
|
}
|
|
|
|
.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
div.slide-show > div.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: 40px;
|
|
border-bottom: none;
|
|
}
|
|
|
|
nav > div.right {
|
|
text-align: right;
|
|
}
|
|
|
|
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(--secondary);
|
|
line-height: 30px;
|
|
font-weight: lighter;
|
|
width: 100%;
|
|
color: var(--primary);
|
|
}
|
|
|
|
main > article {
|
|
position: relative;
|
|
background: var(--secondary);
|
|
vertical-align: top;
|
|
color: var(--primary);
|
|
padding: 0 10%;
|
|
}
|
|
|
|
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(--secondary-highlight);
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
padding: 0 10%;
|
|
max-width: 1000px;
|
|
color: var(--primary);
|
|
}
|
|
|
|
main > section > div {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
main > sectio.page-meta > div a {
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* FOOTER */
|
|
footer {
|
|
background: var(--primary);
|
|
padding: 30px 10%;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
footer a {
|
|
color: var(--primary-highlight);
|
|
}
|
|
|
|
/* RESPONSIVE */
|
|
|
|
@media only screen and (max-width: 640px) {
|
|
main > article {
|
|
padding: 0 10%;
|
|
}
|
|
|
|
main > section {
|
|
padding: 0 10%;
|
|
}
|
|
|
|
footer {
|
|
background: var(--secondary-highlight);
|
|
padding: 30px 10%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 480px) {
|
|
main > section {
|
|
display: inline-grid;
|
|
grid-template-columns: 50%;
|
|
width: 100%;
|
|
}
|
|
}
|