forked from projects/fipamo
ro
ceeb4a2573
routing needed more nuance than what was possible in the web routing controller, so a new RouteContoller was created to identify requests and then sending them to the correct controller to get the appropriatie page this was necessary because routing the previous was erroring out because when the system was looking for pages to display with dynamic page creation it would get confused with prexisting routes and choose to display whatever the Start Controller was capturing, ignoring routes defined in the web controller. but that's been cleaned up without having to re-write everything and continues to use existing controllers
227 lines
3.3 KiB
CSS
227 lines
3.3 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%;
|
|
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%;
|
|
}
|
|
}
|