Commit a7af94d0 authored by Jakob Moser's avatar Jakob Moser
Browse files

Re-order styles

parent 6ec6377a

style.css

+43 −38
Changes for style.css: 43 added lines, 38 removed lines.
Original line number Diff line number Diff line
@@ -4,7 +4,7 @@ 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. Seit Mitte 2020 nach Anpassungen von Jakob Moser sogar leidlich responsive.

Author: personads :: Maximilian Müller-Eberstein

Author URI: https://personads.me/

Version: 1.00-snapshot-13

Version: 1.00-snapshot-14

Tags: fs-coli, custom



License: GNU General Public License v3.0
@@ -22,10 +22,12 @@ Fachschaft Computerlinguistik is distributed under the terms of the GNU GPL 
/* --- Structural elements --- */

body {

    /* Variables */

    --fscoli-dark-red: #990000;

    --menu-shadow-gray: #8a8a8a;

    --accent-color: #990000;

    --menu-shadow-color: #8a8a8a;

    --light-gray: #cacaca;

    --text-black: #242424;

    --text-color: #242424;

    --background-color: #ffffff;

    --shadow-color: #424242;



    /* Layout */

    display: grid;
@@ -36,8 +38,8 @@ body { 
    /* Font and appearance */

    font-family: "Open Sans", sans-serif;

    font-size: 17px;

    color: var(--text-black);

    background: #ffffff;

    color: var(--text-color);

    background: var(--background-color);

}



/* By default: Let header, main and footer span the entire page */
@@ -57,14 +59,19 @@ aside + main { 
    grid-column-end: 3;

}



/* -- Header styles -- */

/* -- Header and footer -- */

header, footer {

    font-family: "Inconsolata", monospace;

}



header {

    z-index: 100;

    border-style: solid;

    border-width: 0px 0px 4px 0px;

    border-color: var(--fscoli-dark-red);

    box-shadow: 0px 0px 15px #424242;

    font-family: "Inconsolata", monospace;

    border-color: var(--accent-color);

    box-shadow: 0px 0px 15px var(--shadow-color);

    

    background-color: var(--background-color);

}



header::before {
@@ -74,7 +81,7 @@ header::before { 
    top: 100%;

    border-width: 30px 0px 0px 30px;

    border-style: solid;

    border-color: var(--fscoli-dark-red) transparent;

    border-color: var(--accent-color) transparent;

}



header::after {
@@ -84,7 +91,7 @@ header::after { 
    right: 0px;

    border-width: 26px 0px 0px 26px;

    border-style: solid;

    border-color: #fff transparent;

    border-color: var(--background-color) transparent;

    margin-top: -2px;

}
@@ -96,14 +103,12 @@ header div.logo { 
}



header div.logo:hover {

    background-color: var(--fscoli-dark-red);

    background-color: var(--accent-color);

}



/* -- Footer styles -- */

footer {

    background-color: var(--light-gray);

    box-shadow: 0px 0px 10px #8d8d8d inset;

    font-family: "Inconsolata", monospace;

    color: #8d8d8d;

    padding: 1em;

}
@@ -119,8 +124,8 @@ footer a { 


/* --- Text markup elements --- */

a {

    color: var(--fscoli-dark-red);

    border-color: var(--fscoli-dark-red);

    color: var(--accent-color);

    border-color: var(--accent-color);

    text-decoration: none;

    border-style: solid;

    border-width: 0 0 1px 0;
@@ -182,7 +187,7 @@ th { 
    font-weight: normal;

    border-style: solid;

    border-width: 0px 0px 2px 0px;

    border-color: var(--fscoli-dark-red);

    border-color: var(--accent-color);

    background-color: rgba(153, 0, 0, 0.5);

    color: #fff;

}
@@ -206,7 +211,7 @@ select { 
    background-position: center right;

    background-size: contain;

    background-color: #fff;

    border: 1px solid var(--fscoli-dark-red);

    border: 1px solid var(--accent-color);

    border-radius: 5px;

    font-family: "Open Sans", sans-serif;

}
@@ -228,16 +233,16 @@ input[type="submit"] { 
    background-color: #fff;

    border: none;

    border-radius: 5px;

    box-shadow: 0px 0px 2px var(--fscoli-dark-red);

    box-shadow: 0px 0px 2px var(--accent-color);

    font-size: 1em;

    font-family: "Open Sans", sans-serif;

    cursor: pointer;

    color: var(--fscoli-dark-red);

    color: var(--accent-color);

    transition: box-shadow 0.2s;

}



input[type="submit"]:hover {

    box-shadow: 0px 0px 5px var(--fscoli-dark-red);

    box-shadow: 0px 0px 5px var(--accent-color);

}



/* - easter egg: Pictures that change on hover - */
@@ -313,7 +318,7 @@ ul.link-list li a { 
    display: inline-block;

    margin: 0.25em;

    padding: 0.3em;

    border: 1px solid var(--fscoli-dark-red);

    border: 1px solid var(--accent-color);

    box-shadow: 0px 0px 5px var(--light-gray);

    font-size: 1.25em;

}
@@ -387,9 +392,9 @@ div.square-icon { 
    padding: 0px;

    border-width: 0px 4px 4px 4px;

    border-style: solid;

    border-color: var(--fscoli-dark-red);

    border-color: var(--accent-color);

    background: #fff;

    box-shadow: 0px 0px 10px var(--menu-shadow-gray) inset;

    box-shadow: 0px 0px 10px var(--menu-shadow-color) inset;

}



#menu-container li ul li:hover > ul {
@@ -407,7 +412,7 @@ div.square-icon { 
    border-style: solid;

    border-color: #ba0000;

    background: #fff;

    box-shadow: 0px 0px 10px var(--menu-shadow-gray);

    box-shadow: 0px 0px 10px var(--menu-shadow-color);

}



#menu-container li li {
@@ -458,7 +463,7 @@ div.home-row { 
    position: relative;

    width: 100%;

    border-style: solid;

    border-color: var(--fscoli-dark-red);

    border-color: var(--accent-color);

    border-width: 1px 0px 0px 0px;

}
@@ -557,9 +562,9 @@ aside { 
    padding: 1em;

    background-color: #fff;

    border-style: solid;

    border-color: var(--fscoli-dark-red);

    border-color: var(--accent-color);

    border-width: 0px 2px 0px 0px;

    box-shadow: 0px 0px 5px #424242;

    box-shadow: 0px 0px 5px var(--shadow-color);

    height: max-content;

}
@@ -600,7 +605,7 @@ main.list { 
main.list article {

    margin: 4em 0;

    position: relative;

    box-shadow: 0px 0px 10px #424242;

    box-shadow: 0px 0px 10px var(--shadow-color);

}



main.list .post-content::before {
@@ -674,7 +679,7 @@ main.list .post-meta-timestamp { 
    display: inline-block;

    margin: 0.25em;

    padding: 0.3em;

    border: 1px solid var(--fscoli-dark-red);

    border: 1px solid var(--accent-color);

    box-shadow: 0px 0px 5px var(--light-gray);

}
@@ -709,7 +714,7 @@ article { 
    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    box-shadow: 0px 0px 15px #424242 inset;

    box-shadow: 0px 0px 15px var(--shadow-color) inset;

}



.post-title .post-title-box {
@@ -721,9 +726,9 @@ article { 
    padding: 0.5em;

    background-color: rgba(0, 0, 0, 0.8);

    border-style: solid;

    border-color: var(--fscoli-dark-red);

    border-color: var(--accent-color);

    border-width: 0px 0px 0px 2px;

    box-shadow: 0px 0px 3px #424242;

    box-shadow: 0px 0px 3px var(--shadow-color);

    text-align: left;

    font-family: "Inconsolata", monospace;

    font-weight: normal;
@@ -762,7 +767,7 @@ article { 
    margin: 0.25em 0em;

    padding: 0.25em;

    border-style: solid;

    border-color: var(--fscoli-dark-red);

    border-color: var(--accent-color);

    border-width: 0px 0px 0px 2px;

}
@@ -831,7 +836,7 @@ article { 
/* 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)*/

.pill {

    border: 2px solid var(--fscoli-dark-red);

    border: 2px solid var(--accent-color);

    margin: 0;

    border-radius: 10px;

    display: inline-flex;
@@ -839,7 +844,7 @@ article { 
.pill li {

    display: inline;

    list-style: none;

    border-right: 2px solid var(--fscoli-dark-red);

    border-right: 2px solid var(--accent-color);

    padding: 0 7px;

    cursor: pointer;

}
@@ -853,7 +858,7 @@ article { 
    border-bottom-right-radius: 5px;

}

.pill li.active {

    background-color: var(--fscoli-dark-red);

    background-color: var(--accent-color);

    color: white;

}