Common.css
Aus Enzyklopaedia Artimear
Version vom 21. April 2019, 23:30 Uhr von Falke (Diskussion | Beiträge)
Hinweis: Leere nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Gehe zu Menü → Einstellungen (Opera → Einstellungen auf dem Mac) und dann auf Datenschutz & Sicherheit → Browserdaten löschen → Gespeicherte Bilder und Dateien.
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
@import url ("https://use.fontawesome.com/releases/v5.7.2/css/all.css");
@import url ("../assets/css/all.css");
@import url('https://fonts.googleapis.com/css?family=Alice');
/* Import */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700|Oswald:400,300,700);
/* Variables */
@background: #252827;
@color-primary: #4298C3;
@color-light: white;
@spacing: 50px;
@radius: 4px;
@date: 120px;
@dotborder: 4px;
@dot: 11px;
@line: 4px;
@font-title: 'Oswald', sans-serif;
@font-text: 'Source Sans Pro', sans-serif;
/* Base */
body {
background: @background;
font-size: 16px;
}
strong {
font-weight: 600;
}
h1 {
font-family: @font-title;
letter-spacing: 1.5px;
color: @color-light;
font-weight: 100;
font-size: 2.4em;
}
#content {
margin-top: @spacing;
text-align: center;
}
/* Timeline */
.timeline {
border-left: @line solid @color-primary;
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
background: fade(@color-light, 3%);
color: fade(white, 80%);
font-family: @font-text;
margin: @spacing auto;
letter-spacing: 0.5px;
position: relative;
line-height: 1.4em;
font-size: 1.03em;
padding: @spacing;
list-style: none;
text-align: left;
font-weight: 100;
max-width: 30%;
h1, h2, h3 {
font-family: @font-title;
letter-spacing: 1.5px;
font-weight: 100;
font-size: 1.4em;
}
.event {
border-bottom: 1px dashed fade(@color-light, 10%);
padding-bottom: (@spacing * 0.5);
margin-bottom: @spacing;
position: relative;
&:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
border: none;
}
&:before, &:after {
position: absolute;
display: block;
top: 0;
}
&:before {
left: (((@date * 0.6) + @spacing + @line + @dot + (@dotborder * 2)) * 1.5) * -1;
color: fade(@color-light, 40%);
content: attr(data-date);
text-align: right;
font-weight: 100;
font-size: 0.9em;
min-width: @date;
}
&:after {
box-shadow: 0 0 0 @dotborder fade(@color-primary,100%);
left: (@spacing + @line + (@dot * 0.35)) * -1;
background: lighten(@background,5%);
border-radius: 50%;
height: @dot;
width: @dot;
content: "";
top: 5px;
}
}
}
