Theme
/* ============================================
WRITEFREELY CUSTOM CSS BY KNIX
Theme: Dunkel mit Violetten-Akzenten
Mastodon: https://dark.morbia.org/@knix
Lizenz: CC BY-SA 4.0
============================================ */
/* ============================================
1. GRUNDLEGENDES STYLING
============================================ */
body {
background-color: #1b1b1b;
font-family: serif;
}
/* ============================================
2. LINKS
============================================ */
/* Standard-Links */
a {
color: #cc4ec4;
}
/* Post-Titel Links (besucht und unbesucht) */
.post-title a:visited {
color: #cc4ec4;
font-family: serif;
}
.post-title a:link {
color: #cc4ec4;
font-family: serif;
}
/* Versteckte Action-Links in Collections */
body#collection article .book a.hidden.action {
color: #cc4ec4;
font-family: serif;
}
/* H1-Links */
body h1 a {
color: #cc4ec4;
}
body h1 a:hover {
color: #463946;
}
/* ============================================
3. TYPOGRAFIE - FARBEN
============================================ */
/* Listen-Elemente */
li {
color: #ccc;
}
/* Absätze */
p {
color: #ccc;
}
/* Tabellen-Zellen */
td {
color: #ccc;
}
th {
color: #ccc;
}
/* ============================================
4. TYPOGRAFIE - ÜBERSCHRIFTEN
============================================ */
h1 {
color: #ffffff;
background-color: transparent;
}
/* Post-Titel */
#post article #title {
color: #ccc;
}
/* Collection-Überschriften */
body#collection #wrapper h2 {
color: #ccc;
}
/* Subpage-Body */
body#subpage {
color: #ccc;
}
/* Official Writing Überschriften */
#official-writing h2 {
color: #ccc;
}
#official-writing h3 {
color: #ccc;
}
#official-writing h4 {
color: #ccc;
}
/* Wrapper Überschriften */
#wrapper h2 {
color: #ccc;
}
#wrapper h3 {
color: #ccc;
}
#wrapper h4 {
color: #ccc;
}
#wrapper h5 {
color: #ccc;
}
#wrapper h6 {
color: #ccc;
}
/* Post-Artikel Überschriften */
body#post article h1 {
color: #ccc;
}
body#post article h2 {
color: #ccc;
}
body#post article h3 {
color: #ccc;
}
body#post article h4 {
color: #ccc;
}
body#post article h5 {
color: #ccc;
}
body#post article h6 {
color: #ccc;
}
/* Spezielle Post-Titel Farbe */
#post article #title {
color: #cc4ec4 !important;
}
/* ============================================
5. TYPOGRAFIE - SCHRIFTGRÖSSEN
============================================ */
/* Absätze in Posts */
body#post article p {
font-size: 1.05rem;
}
/* Absätze auf Subpages */
body#subpage article p {
font-size: 1.05rem;
}
/* Unsortierte Listen in Posts */
body#post article ul li {
font-size: 0.95rem;
}
/* Nummerierte Listen in Posts */
body#post article ol li {
font-size: 0.95rem;
}
/* Listen in Post-Artikeln */
body#post article ol {
color: #ccc;
}
body#post article ul {
color: #ccc;
}
/* Letzter Absatz im Post (Meta-Info) */
#post-body p:last-child {
font-size: 0.95rem;
margin-top: 2rem;
font-style: normal;
color: #a2a2a2;
}
/* ============================================
6. ARTIKEL-STYLING
============================================ */
/* Artikel-Container */
article {
border-radius: 10px;
border: 2px #441a41 solid;
}
/* ============================================
7. VORSCHAU AUF STARTSEITE
============================================ */
/* Vorschau-Höhe in Collections */
body#collection article .e-content {
max-height: 250px;
overflow: hidden;
position: relative;
}
/* Vorschau-Höhe auf Subpages */
body#subpage article .e-content {
max-height: 250px;
overflow: hidden;
position: relative;
}
/* Ausblend-Effekt in Collections */
body#collection article .e-content::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background: linear-gradient(to bottom, rgba(27,27,27,0), rgba(27,27,27,1));
}
/* Ausblend-Effekt auf Subpages */
body#subpage article .e-content::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background: linear-gradient(to bottom, rgba(27,27,27,0), rgba(27,27,27,1));
}
/* Volle Ansicht im geöffneten Artikel */
body#post article .e-content {
max-height: none !important;
overflow: visible !important;
}
body#post article .e-content::after {
display: none !important;
}
/* ============================================
8. HEADER - NAVIGATION
============================================ */
header {
background-color: transparent;
}
/* Navigation-Links */
header nav a {
color: #666;
}
header nav span {
color: #666;
}
/* ============================================
9. HEADER - LOGO
============================================ */
header h1 {
text-align: center;
background-color: transparent;
margin-bottom: 10px;
}
/* Standard-Logo (Startseite) */
header h1 a {
background-image: url("https://dein-Bild.jpg"); /* Bild einfügen */
background-position: center;
background-repeat: no-repeat;
background-size: 150px 150px;
border-radius: 25%;
color: transparent;
display: block;
width: 150px;
height: 150px;
margin: 0 auto 20px auto;
text-indent: -9999px;
overflow: inherit;
position: relative;
}
/* Blog-Name unter dem Logo */
header h1 a:after {
content: "Dein Name"; /* Name einfügen */
display: block;
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
color: #cc4ec4;
font-family: serif;
font-size: 1.5rem;
text-indent: 0;
white-space: nowrap;
width: max-content;
}
/* Kleineres Logo auf Post-Seiten */
body#post header h1 a {
width: 60px;
height: 60px;
background-size: 60px 60px;
margin-bottom: 10px;
}
/* Kleineres Logo auf Unterseiten */
body#subpage header h1 a {
width: 60px;
height: 60px;
background-size: 60px 60px;
margin-bottom: 10px;
}
/* Kleinerer Blog-Name auf Post-Seiten */
body#post header h1 a:after {
font-size: 1rem;
bottom: -30px;
}
/* Kleinerer Blog-Name auf Unterseiten */
body#subpage header h1 a:after {
font-size: 1rem;
bottom: -30px;
}
/* ============================================
10. HEADER - BESCHREIBUNG
============================================ */
/* Blog-Beschreibung (Startseite) */
header p.description {
font-family: serif;
font-size: 0.9rem;
letter-spacing: 0.1rem;
color: #ccc;
text-align: center;
margin-top: 50px;
}
/* Blog-Beschreibung auf Post-Seiten */
body#post header p.description {
margin-top: 35px;
}
/* Blog-Beschreibung auf Unterseiten */
body#subpage header p.description {
margin-top: 35px;
}
/* ============================================
11. FOOTER
============================================ */
/* Original-Footer-Text verstecken */
body footer nav {
font-size: 0;
text-align: center;
}
/* Eigener Footer-Text */
body footer nav:after {
content: "made with \2665 and writefreely";
font-size: 0.9rem;
color: #8b8b8b;
font-family: serif;
display: block;
padding-bottom: 40px;
}
/* ============================================
12. DATUM/ZEIT
============================================ */
/* Collection Zeitstempel */
body#collection #wrapper h2+time {
color: #ccc;
}
/* Subpage Zeitstempel */
body#subpage #wrapper h2+time {
color: #ccc;
}
/* ============================================
13. TRENNLINIEN
============================================ */
hr {
background-color: #83327e;
}
/* ============================================
14. TABELLEN
============================================ */
table {
width: -webkit-fill-available;
border-collapse: separate;
border-spacing: 0;
}
/* Tabellen-Kopf */
thead {
background: #463946;
}
/* Zellen-Padding */
td {
padding-left: 9px;
padding-right: 9px;
}
th {
padding-left: 9px;
padding-right: 9px;
}
/* Zebra-Streifen */
tr:nth-child(even) {
background-color: #463946;
}
/* Linker Rand */
tr {
border-left: 1px solid #463946;
}
/* ============================================
15. CODE-BLÖCKE
============================================ */
/* Inline-Code in Posts */
body#post article code {
background-color: #463946;
color: #cc4ec4;
}
/* Inline-Code in Collections */
#collection #wrapper code {
background-color: #463946;
color: #cc4ec4;
}
/* Code-Blöcke in Collections */
#collection #wrapper pre {
background: #463946;
}
/* Code-Blöcke in Posts */
body#post pre {
background: #463946;
}
/* ============================================
16. ZITATE (BLOCKQUOTES)
============================================ */
/* Zitate in Collections */
body#collection blockquote {
border-left: 4px solid #cc4ec4;
}
/* Zitate in Posts */
body#post blockquote {
border-left: 4px solid #cc4ec4;
}
/* Zitate auf Subpages */
body#subpage blockquote {
border-left: 4px solid #cc4ec4;
}
/* ============================================
ENDE DES STYLESHEETS
============================================ */