Skip to content
Snippets Groups Projects

Resolve "Rewrite theme"

Merged Resolve "Rewrite theme"
1-rewrite-theme into master
Merged Jakob Moser requested to merge 1-rewrite-theme into master
Compare
and
Show latest version
1 file
+ 1
− 0
Compare changes
  • Side-by-side
  • Inline
style.css
+ 682
− 698
/*
Theme Name: Fachschaft Computerlinguistik
Theme URI: http://personads.me/x/fscoli-theme
Description: The custom WordPress Theme for the Fachschaft Computerlinguistik in Heidelberg.
Author: personads :: Maximilian Mueller-Eberstein
Author URI: http://personads.me/
Version: 0.87
Tags: fs-coli, custom
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Fachschaft Computerlinguistik WordPress Theme, Copyright 2015 personads
Fachschaft Computerlinguistik is distributed under the terms of the GNU GPL
*/
/* - element styles */
* Theme Name: fscoli next
* Theme URI: https://gitlab.cl.uni-heidelberg.de/fachschaft/wp-theme
* Description: Ein zeitloses WordPress-Theme für die Fachschaft Computerlinguistik in Heidelberg, gehalten in den Farben rot, grau und schwarz. +++ Detaillierte Angaben zu Lizenz, Änderungen und beitragenden Autoren finden sich in der style.css sowie im beiliegenden README.
* Tags: custom-header, custom-menu, blog, education, full-width-template
*
* Author: personads :: Maximilian Müller-Eberstein (ursprüngliche Version und Design); Jakob Moser (Code-Rewrite)
* Author URI: https://personads.me/
*
* Version: 1.0.0
*
* License: GNU General Public License v3.0
* License URI: https://www.gnu.org/licenses/gpl-3.0.html
*
* The "fscoli next" WordPress theme is based on the "Fachschaft Computerlinguistik WordPress Theme", Copyright 2015 personads.
* "Fachschaft Computerlinguistik WordPress Theme" is distributed under the terms of the GNU GPL and can be obtained at
* https://gitlab.cl.uni-heidelberg.de/fachschaft/wp-theme/-/tags/original
*
* The "fscoli next" WordPress theme contains modifications made by Jakob Moser (2020--2021), which are listed in more detail in
* the README.md provided with this theme. "fscoli next" is distributed under the terms of the GNU GPL.
*
* This file contains CSS rules adapted from the Stack Overflow answer https://stackoverflow.com/a/52226523/
* (question title: "Fixed header in CSS Grid") by binaryfunt (https://stackoverflow.com/users/3217306/binaryfunt),
* licensed under CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/). The adapted section is marked in the
* code below with @@@, where an explanation of the changes can also be found.
*/
* {
margin:0px;
padding:0px;
margin: 0;
padding: 0;
}
/* ==== Structural elements ==== */
body {
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
font-family: "Open Sans", sans-serif;
font-size: 17px;
color:#242424;
background:#fff;
text-align:left;
}
a {
color:#900;
text-decoration:none;
border-style:solid;
border-width:0px 0px 1px 0px;
border-color:#900;
transition:text-shadow 0.2s;
/* Variables */
--accent-color: #990000;
--menu-shadow-color: #8a8a8a;
--light-gray: #cacaca;
--text-color: #242424;
--background-color: #ffffff;
--shadow-color: #424242;
/* Layout */
display: grid;
grid-template-rows: min-content 1fr min-content;
grid-template-columns: 2fr 8fr;
min-height: 100vh;
/* Font and appearance */
font-family: "Open Sans", sans-serif;
font-size: 17px;
color: var(--text-color);
background: var(--background-color);
}
a:hover {
text-shadow:0px 0px 1px #cacaca;
body.has-admin-bar {
min-height: calc(100vh - 32px);
}
a img {
border-style:none;
main {
display: grid;
}
h1 {
font-size:1.75em;
font-weight:normal;
/* By default: Let header, main and footer span the entire page */
body > header,
main,
body > footer {
grid-column-start: 1;
grid-column-end: 3;
}
h3 {
margin-bottom: 10px;
}
/* However, when there is an aside, place the aside in the left column and main in the right column */
body > aside {
grid-column-start: 1;
grid-column-end: 2;
hr {
border:0px;
height:1px;
margin:1em 0em 1em 0em;
background-image:-webkit-linear-gradient(left, rgba(153,0,0,0), rgba(153,0,0,0.75), rgba(153,0,0,0));
background-image:-moz-linear-gradient(left, rgba(153,0,0,0), rgba(153,0,0,0.75), rgba(153,0,0,0));
background-image:-ms-linear-gradient(left, rgba(153,0,0,0), rgba(153,0,0,0.75), rgba(153,0,0,0));
padding: 1em;
background-color: var(--background-color);
border-right: 2px solid var(--accent-color);
box-shadow: 0 0 5px var(--shadow-color);
}
table, th, tr, td {
border:solid;
border-color:rgba(153,0,0,0.2);
border-collapse:collapse;
body > aside + main {
grid-column-start: 2;
grid-column-end: 3;
}
tr:nth-child(odd) {
background-color:rgba(255,255,255,0.2);
/* A levitating aside only takes up the height its content needs and has a top margin, which looks less
massive than the classical aside that takes up all the page height */
body > aside.levitating {
margin-top: 2em;
height: max-content;
}
tr:nth-child(even) {
background-color:rgba(153,0,0,0.1);
/* -- Header (containing the menu), footer (containing copyright info), potential sidebars -- */
body > header,
body > footer,
body > aside h1 {
font-family: "Inconsolata", monospace;
}
td, th {
padding:3px;
}
body > header {
z-index: 100;
border-style: solid;
border-width: 0px 0px 4px 0px;
border-color: var(--accent-color);
box-shadow: 0px 0px 15px var(--shadow-color);
th {
font-weight:normal;
border-style:solid;
border-width:0px 0px 2px 0px;
border-color:#900;
background-color:rgba(153,0,0,0.5);
color:#fff;
background-color: var(--background-color);
}
ul, ol {
margin-left:1.5em;
/* @@@ The following lines of code are adapted from https://stackoverflow.com/a/52226523/ (license details above). @@@
*
* We modified the CSS selector for the header and included another CSS rule in case the
* admin bar is shown before the header.
*/
body > header {
position: sticky;
top: 0;
}
ul li {
list-style: square;
body.has-admin-bar > header {
top: 32px;
}
/* @@@ End of adapted code @@@ */
select {
-webkit-appearance:none;
appearance:none;
margin:0.25em;
padding:0.25em 1.5em 0.25em 0.25em;
background-image:url("img/dropdown.png");
background-repeat: no-repeat;
background-position: center right;
background-size: contain;
background-color: #fff;
border: 1px solid #990000;
border-radius:5px;
font-family: "Open Sans", sans-serif;
body > header::before {
content: "";
position: relative;
float: right;
top: 100%;
border-width: 30px 0px 0px 30px;
border-style: solid;
border-color: var(--accent-color) transparent;
z-index: -1;
}
input[type="password"] {
margin: 0.25em;
padding:0.25em;
background-color: #fff;
border: none;
border-radius:5px;
box-shadow: 0px 0px 2px #8d8d8d inset;
font-size: 1em;
font-family: "Open Sans", sans-serif;
body > header::after {
content: "";
display: block;
position: absolute;
right: 0px;
border-width: 26px 0px 0px 26px;
border-style: solid;
border-color: var(--background-color) transparent;
margin-top: -2px;
z-index: -1;
}
input[type="submit"] {
margin: 0.25em;
padding: 0.25em 0.5em;
background-color: #fff;
body > header .logo {
display: inline-block;
max-width: 350px;
max-height: 108px;
background-image: url("img/logo.png");
background-repeat: no-repeat;
background-size: cover;
background-color: #000;
width: 250px;
height: 77px;
margin: 8px 0px -3px 10px;
transition: background-color 0.3s;
border: none;
border-radius:5px;
box-shadow: 0px 0px 2px #990000;
font-size: 1em;
font-family: "Open Sans", sans-serif;
cursor: pointer;
color: #990000;
transition: box-shadow 0.2s;
}
input[type="submit"]:hover {
box-shadow: 0px 0px 5px #990000;
body > header .logo:hover {
background-color: var(--accent-color);
}
/* - easter egg: Pictures that change on hover - */
.wp-block-gallery.easteregg .blocks-gallery-item:nth-child(2) {
display: none;
body > footer {
background-color: var(--light-gray);
box-shadow: 0px 0px 10px #8d8d8d inset;
color: #8d8d8d;
padding: 1em;
}
.wp-block-gallery.easteregg:hover .blocks-gallery-item:nth-child(1) {
display: none;
body > footer .copyright {
float: right;
}
.wp-block-gallery.easteregg:hover .blocks-gallery-item:nth-child(2) {
display: flex;
body > footer a {
color: #424242;
border: none;
}
/* - adjust width of gallery - */
.wp-block-gallery {
width: 70%;
margin-left: auto !important;
margin-right: auto !important;
body > aside h2 {
font-size: 1.1em;
font-weight: normal;
}
@media (max-width: 705px) {
body > footer {
text-align: center;
}
/* - general styles */
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
body > footer .copyright {
float: none;
display: block;
margin-top: 10px;
}
}
img.alignleft {
float:left;
/* -- Navigation bar -- */
header .nav-toggle {
display: none;
}
img.alignright {
float:right;
header nav {
display: inline-block;
position: relative;
vertical-align: bottom;
}
figcaption {
text-align: center;
width: 100%;
header nav li {
display: inline-block;
padding: 3px 15px 7px 15px;
transition: background-color 0.3s;
border-radius: 5px 5px 0 0;
}
div.logo {
display:inline-block;
max-width:350px;
max-height:108px;
background-image:url('img/logo.png');
background-repeat:no-repeat;
background-size:cover;
background-color:#000;
header nav li:hover {
background-color: rgba(153, 0, 0, 0.1);
}
.logo-link {
border: none;
header nav li a {
border: none;
}
.home-row-content.link-list {
text-align: center;
header nav li a[href="#"] {
cursor: default;
}
ul.link-list {
display: inline-block;
text-align: left;
header nav li > ul {
display: none;
position: absolute;
margin: 7px 0px 0px -15px;
padding: 0px;
border-width: 0px 4px 4px 4px;
border-style: solid;
border-color: var(--accent-color);
background-color: var(--background-color);
box-shadow: 0px 0px 10px var(--menu-shadow-color) inset;
}
ul.link-list li {
list-style: none;
color:inherit;
}
header nav li > ul li {
display: block;
margin-left: -5px;
border-radius: 0px;
}
header nav li:hover > ul {
display: block;
}
@media (max-width: 615px) {
body > header {
padding-top: 5px;
position: static;
}
ul.link-list li a {
display:inline-block;
margin:0.25em;
padding: 0.3em;
border: 1px solid #990000;
box-shadow: 0px 0px 5px #cacaca;
font-size:1.25em;
}
body > header .logo {
margin: 0 auto;
display: block;
}
div.square-icon {
display: inline-block;
width:1em;
height:1em;
margin:0.25em;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
vertical-align: middle;
}
header .nav-toggle {
display: block;
padding: 0 15px;
line-height: 35px;
border: none;
}
/* - header styles */
header nav ul {
margin: 0;
padding: 0;
}
#top {
position:fixed;
top:0px;
right:0px;
left:0px;
z-index:100;
border-style:solid;
border-width:0px 0px 4px 0px;
border-color:#900;
background-color:#fff;
box-shadow:0px 0px 15px #424242;
font-family: 'Inconsolata', monospace;
}
header nav li {
display: block;
padding: 0 15px;
line-height: 35px;
}
#top::before {
content:"";
display:block;
position:absolute;
right:0px;
width:0px;
height:0px;
bottom:-30px;
border-width:30px 0px 0px 30px;
border-style:solid;
border-color:#900 transparent;
}
header nav li:hover {
border-radius: 0;
}
#top::after {
content:"";
display:block;
position:absolute;
right:0px;
width:0px;
height:0px;
bottom:-25px;
border-width:26px 0px 0px 26px;
border-style:solid;
border-color:#fff transparent;
}
header nav li > ul {
display: block;
border: none;
box-shadow: none;
position: inherit;
margin: 0;
padding: 0;
}
header nav li > ul li {
margin-left: 0;
}
header nav {
display: none;
}
#top div.logo {
width:250px;
height:77px;
margin:8px 0px -3px 10px;
transition:background-color 0.3s;
header nav:target {
display: block;
}
}
#top div.logo:hover {
background-color:#900;
/* ==== General styles: Articles ==== */
article {
padding: 2em;
}
#top-padding {
width:100%;
height:85px;
article .content p {
margin: 1em 0;
}
/* -- menu styles */
article .content img {
max-width: 100%;
height: auto;
}
.menu-toggle {
display: none;
article footer time {
font-size: 0.7em;
display: block;
}
#menu-container {
display:inline-block;
position:relative;
height:28px;
white-space:nowrap;
vertical-align:bottom;
article .content h1,
article .content h2 {
margin: 0.25em 0em;
padding: 0.25em;
border-style: solid;
border-color: var(--accent-color);
border-width: 0px 0px 0px 2px;
}
#menu-container a {
border:none;
transition:none;
article > header h1,
article > header h3 a,
.headinglike {
display: inline-block;
padding: 0.5em;
background-color: rgba(0, 0, 0, 0.8);
border-style: solid;
border-color: var(--accent-color);
border-width: 0 0 0 2px;
box-shadow: 0 0 3px var(--shadow-color);
text-align: left;
font-family: "Inconsolata", monospace;
font-weight: normal;
color: #fff;
margin-bottom: -2.5em;
}
/* ==== Custom styles: Articles on their own page (page.php or single.php) ==== */
article:only-child {
display: grid;
grid-template-rows: max-content 1fr max-content;
}
#menu-container a[href="#"] {
cursor: default;
article:only-child > header {
width: 100%;
height: 200px;
margin: -2em 0 0 -2em;
padding: 2em;
background-image: url("img/header.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
box-shadow: 0px 0px 15px var(--shadow-color) inset;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-items: left;
align-items: end;
}
#menu-container a:hover {
text-decoration:none;
article:only-child > footer {
margin: 2em -2em -2em -2em;
padding: 1em;
background-color: rgba(153, 0, 0, 0.5);
text-align: right;
color: #fff;
}
#menu-container ul {
display:inline;
article:only-child .content {
position: relative;
margin-top: 2.5em;
}
#menu-container li {
display:inline-block;
height:25px;
padding:3px 15px 0px 15px;
vertical-align:middle;
transition:background-color 0.3s;
article:only-child .content::after {
content: "";
display: block;
position: absolute;
right: -2em;
width: 0;
height: 0;
bottom: -62px;
border-width: 30px 0 0 30px;
border-style: solid;
border-color: #fff transparent;
}
#menu-container li:hover {
background-color: rgba(153,0,0,0.1);
border-radius: 5px 5px 0px 0px;
/* ==== Custom styles: Landing page ==== */
main.landing > header {
height: 260px;
background-image: url("img/header.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: rgba(0, 0, 0, 0.2);
background-blend-mode: overlay;
font-family: "Inconsolata", monospace;
color: #fff;
padding-left: 2em;
display: grid;
grid-template-rows: 1fr max-content max-content 1fr;
grid-template-columns: max-content;
}
#menu-container li:hover > ul {
display:block;
main.landing > header h1 {
grid-row-start: 2;
}
#menu-container li ul {
display:none;
position:absolute;
top:28px;
margin:0px 0px 0px -15px;
padding:0px;
border-width:0px 4px 4px 4px;
border-style:solid;
border-color:#900;
background:#fff;
box-shadow:0px 0px 10px #8a8a8a inset;
main.landing > header h2 {
font-size: 1.25em;
opacity: 0.75;
grid-row-start: 3;
text-align: right;
font-weight: normal;
}
#menu-container li ul li:hover > ul {
display:block;
main.landing section {
border-style: solid;
border-color: var(--accent-color);
border-width: 1px 0px 0px 0px;
padding: 2em;
}
#menu-container li ul li ul {
display:none;
position:absolute;
top:0px;
left:100%;
margin:0px 0px 0px -10px;
padding:0px;
border-width:0px 0px 0px 5px;
border-style:solid;
border-color:#ba0000;
background:#fff;
box-shadow:0px 0px 10px #8a8a8a;
main.landing section::before {
display: block;
position: absolute;
left: 50%;
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-size: contain;
transform: translate(-50%, -40%);
margin-top: -2em;
content: "";
}
#menu-container li li {
display:block;
margin-left:-5px;
border-radius: 0px;
main.landing section.ticker::before {
background-image: url("img/ticker.png");
left: 2em;
}
/* - heading styles */
main.landing section.news::before {
background-image: url("img/news.png");
}
#heading {
position:relative;
width:100%;
height:40%;
background-image:url('img/header.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-color:#cacaca;
overflow:hidden;
main.landing section.varia::before {
background-image: url("img/rocket.png");
}
#heading-content {
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
padding:2em;
background-color:rgba(0,0,0,0.2);
text-align:right;
font-family: "Inconsolata", monospace;
color:#fff;
main.landing section.varia > :first-child {
margin-top: 1em;
}
#heading-title {
position:absolute;
top:50%;
transform:translateY(-50%);
main.landing section.varia .seamless {
margin-bottom: 2.5em;
}
#heading-title h2 {
font-size: 1.25em;
opacity: 0.75;
main.landing section.news {
display: grid;
grid-template-columns: 75fr 25fr;
column-gap: 2em;
}
div.home-row {
position:relative;
width:100%;
border-style: solid;
border-color: #900;
border-width: 1px 0px 0px 0px;
main.landing section.news article {
padding: 0;
}
div.home-row-content {
padding:2em;
main.landing section.news article .content {
margin-top: 2em;
}
div.home-row-icon {
display: block;
position:absolute;
left:50%;
width:60px;
height:60px;
background-repeat: no-repeat;
background-size: contain;
transform:translate(-50%,-40%);
main.landing section.news aside {
border-style: solid;
border-color: var(--light-gray);
border-width: 0px 0px 0px 1px;
}
div.home-row .icon-ticker {
left: 2em;
main.landing section.news aside li {
list-style: none;
margin: 0.25em 0;
}
.icon-ticker {
background-image: url("img/ticker.png");
main.landing section.news aside li a {
margin-bottom: initial !important;
}
.icon-news {
background-image: url("img/news.png");
main.landing section.news aside .more {
text-align: right;
}
.icon-rocket {
background-image: url("img/rocket.png");
main.landing section.varia {
text-align: center;
}
/* -- homepage news listing styles */
/* Responsiveness for news section: Place sidebar below article if screen is to small */
@media (max-width: 570px) {
main.landing section.news {
grid-template-columns: 1fr;
}
div.home-news-main {
display:inline-block;
width:75%;
vertical-align: top;
}
main.landing section.news aside {
border: none;
margin-top: 2em;
}
div.home-news-main-content {
margin-right:1em;
}
main.landing section.news aside ul {
margin-left: 0;
}
div.home-news-main .post-title-box {
margin-bottom:1em;
main.landing section.news aside .more {
line-height: 30px;
text-align: left;
}
}
div.home-news-sidebar {
display:inline-block;
width:24%;
vertical-align: top;
border-style:solid;
border-color:#cacaca;
border-width:0px 0px 0px 1px;
/* ==== Custom styles: Post listing (e.g. blog) page ==== */
main.list {
padding: 0 8%;
}
div.home-news-sidebar li {
list-style: none;
margin:0.25em 0;
main.list article {
margin: 2em 0;
position: relative;
box-shadow: 0px 0px 10px var(--shadow-color);
}
div.home-news-sidebar .more {
text-align: right;
main.list article:first-of-type {
margin-top: 4em;
}
/* - posts listing styles */
#content {
width:100%;
min-height:100%;
main.list article > header h1 {
padding: 0;
position: absolute;
top: -1em;
}
.sidebar {
display:inline-block;
width:20%;
min-width:200px;
vertical-align: top;
main.list article > header h1 a {
display: block;
color: inherit;
border: none;
padding: 0.27em;
}
main.list .content {
margin-top: 1.5em;
}
main.list footer::before {
content: "";
display: block;
position: absolute;
right: 0;
width: 0;
height: 0;
bottom: -2em;
border-width: 32px 0 0 32px;
border-style: solid;
border-color: var(--light-gray) transparent;
}
main.list footer::after {
content: "";
display: block;
position: absolute;
right: 0;
width: 0;
height: 0;
bottom: -1.7em;
border-width: 30px 0 0 30px;
border-style: solid;
border-color: #fff transparent;
}
main.list footer time {
position: absolute;
top: 0.5em;
right: 1em;
font-size: 1em;
opacity: 0.5;
}
.sidebar-content {
margin:2em 0;
padding:1em;
background-color:#fff;
border-style: solid;
border-color: #990000;
border-width: 0px 2px 0px 0px;
box-shadow:0px 0px 5px #424242;
main.list article .content {
position: relative;
z-index: 1;
}
.sidebar-content h1, h2 {
font-weight:normal;
main.list article > header {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 100%;
background-position-y: center;
}
.sidebar-content h1 {
font-family: "Inconsolata", monospace;
font-size: 1.75em;
/* Only apply background-color and blending to headers that have a background-image set, otherwise all posts would have grey background */
main.list article header[style*="background-image"] {
background-blend-mode: overlay;
background-color: #e8e8e8;
}
.sidebar-content h2 {
font-size: 1.1em;
main.list article > header h1 {
left: 1.1em;
}
.sidebar-content .link-list li a {
font-size: 0.8em;
.list-meta > h1::before {
display: inline-block;
width: 1em;
height: 1em;
margin: 0.25em;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
vertical-align: middle;
background-image: url("img/news.png");
content: "";
}
.sidebar-content select {
margin-left: 2em;
.list-meta select {
margin-left: 2em;
}
.sidebar-content .rss-link {
display: block;
border: none;
font-size: 0.8em;
color:#8d8d8d;
text-align:right;
.list-meta a.rss {
display: block;
border: none;
font-size: 0.8em;
color: #8d8d8d;
text-align: right;
}
.posts-listing {
display:inline-block;
position:relative;
width:75%;
min-width:700px;
vertical-align: top;
.list-meta .categories li a {
font-size: 0.8em;
}
.posts-container {
margin-left:55%;
width:90%;
transform:translateX(-50%);
/* ==== Utilities: Pagination ==== */
.pagination {
display: grid;
grid-template-columns: max-content 1fr max-content;
margin-bottom: 1em;
}
.posts-listing .post-container {
margin:4em 0;
box-shadow: 0px 0px 10px #424242;
.pagination a {
display: block;
margin: 0.25em;
padding: 0.3em;
border: 1px solid var(--accent-color);
box-shadow: 0 0 5px var(--light-gray);
}
.posts-listing .post-content::before {
content:"";
display:block;
position:absolute;
right:-2em;
width:0px;
height:0px;
bottom:-5em;
border-width:32px 0px 0px 32px;
border-style:solid;
border-color:#cacaca transparent;
.pagination .older-posts {
grid-column-start: 1;
grid-column-end: 2;
}
.posts-listing .post-content::after {
content:"";
display:block;
position:absolute;
right:-2em;
width:0px;
height:0px;
bottom:-4.7em;
border-width:30px 0px 0px 30px;
border-style:solid;
border-color:#fff transparent;
.pagination .newer-posts {
grid-column-start: 3;
grid-column-end: 4;
}
.post-content.error404 {
text-align:center;
/* ==== Utilities: Search term strings ==== */
.search-term {
color: gray;
}
.post-content.error404 .icon {
margin: 0.25em;
font-size: 10em;
.search-term::before {
content: "„";
}
.post-content.error404 div {
display: inline-block;
vertical-align: middle;
.search-term:empty::before {
content: "Kein Suchterm angegeben";
font-style: italic;
}
.posts-listing .post-header {
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
z-index:-1;
height:auto;
margin:0px;
padding:0px;
box-shadow:none;
opacity:0.2;
.search-term::after {
content: "“";
}
.posts-listing .post-title {
position:absolute;
top:-0.5em;
.search-term:empty::after {
content: "";
}
.posts-listing .post-meta-timestamp {
position:absolute;
top:0.5em;
right:1em;
font-size: 1em;
opacity:0.5;
/* ==== Utilities: Jumbo content (used on 404 page) ==== */
.content.jumbo {
text-align: center;
}
.page-selector a {
display:inline-block;
margin:0.25em;
padding: 0.3em;
border: 1px solid #990000;
box-shadow: 0px 0px 5px #cacaca;
.content.jumbo .icon {
margin: 0.25em;
font-size: 10em;
}
.page-selector-previous {
text-align:left;
.content.jumbo div {
display: inline-block;
vertical-align: middle;
}
.page-selector-previous a {
border-left-width: 2px;
/* ==== Text markup elements ==== */
a {
color: var(--accent-color);
border-color: var(--accent-color);
text-decoration: none;
border-style: solid;
border-width: 0 0 1px 0;
transition: text-shadow 0.2s;
}
.page-selector-next {
text-align:right;
a.box,
.box-links a {
display: inline-block;
margin: 0.25em;
padding: 0.3em;
border: 1px solid var(--accent-color);
box-shadow: 0 0 5px var(--light-gray);
font-size: 1.25em;
}
.page-selector-next a {
border-right-width: 2px;
a:hover {
text-shadow: 0 0 1px var(--light-gray);
}
/* - post styles */
.post-container {
position:relative;
margin:0px 0px 0px 0px;
padding:2em;
a img {
border-style: none;
}
.post-header {
width:100%;
height:200px;
margin:-2em 0 0 -2em;
padding:2em;
background-image: url("img/header.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
box-shadow: 0px 0px 15px #424242 inset;
h1 {
font-size: 1.75em;
font-weight: normal;
}
.post-title .post-title-box {
margin-top: -1.5em;
h3 {
margin-bottom: 10px;
}
.post-title-box {
display:inline-block;
padding:0.5em;
background-color: rgba(0,0,0,0.8);
border-style:solid;
border-color:#900;
border-width:0px 0px 0px 2px;
box-shadow:0px 0px 3px #424242;
text-align:left;
font-family: "Inconsolata", monospace;
font-weight: normal;
color:#fff;
hr {
border: none;
height: 1px;
margin: 1em 0 1em 0;
background: linear-gradient(
to left,
transparent,
rgba(153, 0, 0, 0.75),
transparent
);
}
.post-content {
position:relative;
margin-top:1.5em;
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.post-content::after {
content:"";
display:block;
position:absolute;
right:-2em;
width:0px;
height:0px;
bottom:-62px;
border-width:30px 0px 0px 30px;
border-style:solid;
border-color:#fff transparent;
img.alignleft {
float: left;
}
.post-content p {
margin-bottom: 1em;
img.alignright {
float: right;
}
.post-content > img {
max-width:100%;
height:auto;
figcaption {
text-align: center;
width: 100%;
}
.post-content > h1, .post-content > h2 {
margin:0.25em 0em;
padding:0.25em;
border-style: solid;
border-color: #990000;
border-width: 0px 0px 0px 2px;
/* -- Tables -- */
table,
th,
tr,
td {
border: solid;
border-color: rgba(153, 0, 0, 0.2);
border-collapse: collapse;
}
.post-meta {
margin:2em -2em -2em -2em;
padding:1em;
background-color:rgba(153,0,0,0.5);
text-align:right;
color:#fff;
tr:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.2);
}
.post-meta-timestamp {
font-size:0.7em;
tr:nth-child(even) {
background-color: rgba(153, 0, 0, 0.1);
}
/* - footer styles */
#footer {
width:100%;
background-color:#cacaca;
box-shadow: 0px 0px 10px #8d8d8d inset;
font-family: "Inconsolata", monospace;
color:#8d8d8d;
td,
th {
padding: 3px;
}
#footer > div {
padding: 1em;
th {
font-weight: normal;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: var(--accent-color);
background-color: rgba(153, 0, 0, 0.5);
color: #fff;
}
#footer .copyright {
float: right;
/* -- Lists -- */
ul,
ol {
margin-left: 1.5em;
}
#footer a {
color:#424242;
border:none;
ul li {
list-style: square;
}
/* - special styles */
ul.seamless {
display: inline-block;
text-align: left;
}
.triple-picture-container {
position: relative;
width: 1024px;
height: 574px;
margin: 0 0 2em 50%;
transform: translateX(-50%);
ul.seamless li {
list-style: none;
color: inherit;
}
.triple-picture-container img {
display: none;
position: absolute;
left: 0;
z-index: -1;
/* -- Form elements -- */
select {
-webkit-appearance: none;
appearance: none;
margin: 0.25em;
padding: 0.25em 1.5em 0.25em 0.25em;
background-image: url("img/dropdown.png");
background-repeat: no-repeat;
background-position: center right;
background-size: contain;
background-color: #fff;
border: 1px solid var(--accent-color);
border-radius: 5px;
font-family: "Open Sans", sans-serif;
}
.triple-picture-container div {
display: inline-block;
input[type="password"] {
margin: 0.25em;
padding: 0.25em;
background-color: #fff;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 2px #8d8d8d inset;
font-size: 1em;
font-family: "Open Sans", sans-serif;
}
.triple-picture-container .triple-picture-container-first {
width: 35%;
height: 100%;
input[type="submit"] {
margin: 0.25em;
padding: 0.25em 0.5em;
background-color: #fff;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 2px var(--accent-color);
font-size: 1em;
font-family: "Open Sans", sans-serif;
cursor: pointer;
color: var(--accent-color);
transition: box-shadow 0.2s;
}
.triple-picture-container .triple-picture-container-first img {
display: block;
input[type="submit"]:hover {
box-shadow: 0px 0px 5px var(--accent-color);
}
.triple-picture-container .triple-picture-container-second {
left: 35%;
width: 30%;
height: 100%;
/* -- Galleries -- */
.wp-block-gallery {
width: 70%;
margin-left: auto !important;
margin-right: auto !important;
}
.triple-picture-container .triple-picture-container-second:hover img {
display: block;
/* Easter egg: Pictures that change on hover */
.wp-block-gallery.easteregg .blocks-gallery-item:nth-child(2) {
display: none;
}
.triple-picture-container .triple-picture-container-third {
left: 65%;
width: 30%;
height: 100%;
.wp-block-gallery.easteregg:hover .blocks-gallery-item:nth-child(1) {
display: none;
}
.triple-picture-container .triple-picture-container-third:hover img {
display: block;
.wp-block-gallery.easteregg:hover .blocks-gallery-item:nth-child(2) {
display: flex;
}
/* Pills (a rounded group of multiple button-like entries, one of which can be active (red background), inactive
entries have a white background (therefore making the whole thing looking somewhat like a pill)*/
/* -- Pills --
* Pills are a rounded group of multiple button-like entries, one of which can be active (red background), inactive
* entries have a white background (therefore making the whole thing looking somewhat like a pill)
*/
.pill {
border: 2px solid #900;
border: 2px solid var(--accent-color);
margin: 0;
border-radius: 10px;
display: inline-flex;
}
.pill li {
display: inline;
list-style: none;
border-right: 2px solid #900;
border-right: 2px solid var(--accent-color);
padding: 0 7px;
cursor: pointer;
}
.pill li:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pill li:last-child {
border: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.pill li.active {
background-color: #900;
background-color: var(--accent-color);
color: white;
}
@media(max-width: 830px) {
#menu-container {
display: inherit;
height: inherit;
white-space: inherit;
}
#menu-container ul {
margin: 0;
padding: 0;
}
#menu-container li {
display: block;
height: inherit;
padding: 0 15px;
line-height: 35px;
}
#menu-container li:hover {
border-radius: 0;
}
#menu-container li > ul {
display: block;
}
#menu-container li ul {
border: none;
box-shadow: none;
position: inherit;
margin: 0;
padding: 0;
}
#menu-container li li {
margin-left: 0;
}
#top {
position: relative;
}
#top-padding {
display: none;
}
#top {
padding-top: 5px;
}
#top div.logo {
margin: 0 auto;
display: block;
}
#heading-content {
padding: 0;
}
#heading-title {
position: relative;
text-align: center;
}
div.home-news-main {
width: 100%;
}
div.home-news-main-content {
margin-right: 0;
}
div.home-news-sidebar {
width: 100%;
border: none;
margin-top: 20px;
}
div.home-news-sidebar ul {
margin: 0;
}
div.home-news-sidebar .more {
text-align: left;
line-height: 30px;
}
#footer .copyright {
float: none;
display: block;
margin-top: 10px;
}
.menu-toggle {
display: block;
padding: 0 15px;
margin-top: 15px;
line-height: 35px;
}
#menu-container {
display: none;
}
#menu-container:target {
display: block;
}
}