forked from projects/fipamo
ro
a5583debbd
to complete page rendering, the default theme needed to be converted to use blade templating. rather than update the theme kit as a seperate progress, it will be integrated into this codebase so themes can be developed and tested in app. the basics for the theme kit are in place, so now conversion of the defualt theme can be completed. once the that is done, it can then be used to complete the rendering engine to export HTML files
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%;
|
|
}
|
|
}
|