ro
a92e124957
the default theme included with fipamo was a bit janky, so that's been cleaned to bring it more inline with current accessiblility standards, an updated mobile friendly menu, updated the logo and plugged in the fresh colors. the layout is still a bit boring but the main purpose of the default is to show how templating works, so it needs to be kept as simple as possible but it still has some room for making it pop a bit more.
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: 50px;
|
|
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%;
|
|
}
|
|
}
|