Unverified Commit 1f2c60d1 authored by Philip Kaludercic's avatar Philip Kaludercic 🌝
Browse files

updated article styling

parent 444fecfa
......@@ -21,13 +21,18 @@
(nav (span "Beigetragen am "
(time (@ (datetime ,(date->string (post-date post) "~4")))
,(date->string (post-date post)
"~d ~h. ~Y")))
(span "Tags: "
"~Y-~m-~d")))
,@(if (post-ref post 'author)
`((span "Verfasst von " (em ,(post-ref post 'author))))
'())
,@(if (post-ref post 'tags)
`((span "Tags: "
,(intersperse
(map (lambda (tag)
(link tag (format #f "/tags/~a.xml" tag)))
(or (post-ref post 'tags) '()))
", "))
(post-ref post 'tags))
", ")))
'())
(span ,@(if (and site prefix)
`(" "
,(link "Permalink"
......
:root {
--fg-color: black;
--bg-color: whitesmoke;
--accent-color: dodgerblue;
--highlight-color: slateblue;
--header-fg-color: white;
--header-bg-color: darkslateblue;
--header-hover-color: rgba(0, 0, 0, 0.25);
--article-fg-color: black;
--article-bg-color: white;
--article-border-color: silver;
--secondary-fg-color: dimgray;
--secondary-bg-color: whitesmoke;
}
@media (prefers-color-scheme: dark) {
/* something */
}
html {
font-family: "Open Sans", "Noto Sans", Arial, sans-serif;
color: black;
background: whitesmoke;
font-family: "Open Sans", "Noto Sans", "Lato", Arial, sans-serif;
color: var(--fg-color);
background: var(--bg-color);
font-size: 120%;
line-height: 1.4em;
}
......@@ -13,19 +32,20 @@ body {
min-height: calc(100vh - 1.5em)
}
a { text-decoration: none; color: #3f9af4; }
a { text-decoration: none; color: var(--accent-color); }
a:hover { text-decoration: underline; }
code, code { font-family: "Noto Sans Mono", Consolas, Monaco, monospace, monospace; }
body > header {
color: white;
background: darkslateblue;
color: var(--header-fg-color);
background: var(--header-bg-color);
border-radius: 8px;
}
body > header > nav {
margin: 16px 0;
padding: 8px 0;
overflow-x: auto;
}
body > header > nav > a {
......@@ -41,12 +61,13 @@ body > header > nav > a:first-of-type {
}
body > header > nav > a:hover {
background: rgba(0, 0, 0, 0.25);
background: var(--header-hover-color);
text-decoration: none;
}
article {
background: white;
color: var(--article-fg-color);
background: var(--article-bg-color);
margin: 16px 0;
padding: 16px 32px;
border-radius: 8px;
......@@ -61,26 +82,33 @@ article > p:last-of-type {
article > nav {
font-size: small;
color: dimgray;
color: var(--secondary-fg-color);
display: table;
line-height: 1.3;
padding: 8px 0;
border-top: 1px solid slateblue;
border: 0 solid var(--highlight-color);
border-top-width: 1px;
margin: 8px 0 0 auto;
padding: 8px;
line-height: 1.25;
}
article > nav > * {
display: block;
}
p {
overflow-wrap: break-word;
hyphens: auto;
}
hr {
border: 0px solid darkslateblue;
border: 0px solid var(--highlight-color);
border-bottom-width: 1px;
}
footer {
font-size: small;
color: dimgray;
color: var(--secondary-fg-color);
background: var(--secondary-bg-color);
text-align: center;
}
......@@ -92,6 +120,7 @@ footer {
body > article {
margin: 16px;
/* border: 1px solid var(--article-border-color); */
}
body > header {
......@@ -101,9 +130,21 @@ footer {
body > header > nav {
margin: 0;
display: flex;
overflow: auto;
}
/* body > article > nav { */
/* margin: 16px -32px -16px -32px; */
/* padding: 8px 32px; */
/* line-height: 1.25; */
/* float: none; */
/* display: block; */
/* background: var(--secondary-bg-color); */
/* border-width: 1px 0 0 0; */
/* border-bottom-left-radius: 8px; */
/* border-bottom-right-radius: 8px; */
/* border-color: var(--article-border-color); */
/* } */
body > header > nav > a {
white-space: nowrap;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment