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

updated article styling

parent 444fecfa
...@@ -21,20 +21,25 @@ ...@@ -21,20 +21,25 @@
(nav (span "Beigetragen am " (nav (span "Beigetragen am "
(time (@ (datetime ,(date->string (post-date post) "~4"))) (time (@ (datetime ,(date->string (post-date post) "~4")))
,(date->string (post-date post) ,(date->string (post-date post)
"~d ~h. ~Y"))) "~Y-~m-~d")))
(span "Tags: " ,@(if (post-ref post 'author)
,(intersperse `((span "Verfasst von " (em ,(post-ref post 'author))))
(map (lambda (tag) '())
(link tag (format #f "/tags/~a.xml" tag))) ,@(if (post-ref post 'tags)
(or (post-ref post 'tags) '())) `((span "Tags: "
", ")) ,(intersperse
(map (lambda (tag)
(link tag (format #f "/tags/~a.xml" tag)))
(post-ref post 'tags))
", ")))
'())
(span ,@(if (and site prefix) (span ,@(if (and site prefix)
`(" " `(" "
,(link "Permalink" ,(link "Permalink"
(format #f "/~a/~a.html" (format #f "/~a/~a.html"
prefix (site-post-slug site post))) prefix (site-post-slug site post)))
" | ") " | ")
'("")) '(""))
,(link "Source" ,(link "Source"
(string-append "https://gitlab.cs.fau.de/faui2k17/posts/blob/master/" (string-append "https://gitlab.cs.fau.de/faui2k17/posts/blob/master/"
(basename (post-file-name post))))))))) (basename (post-file-name post)))))))))
......
: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 { html {
font-family: "Open Sans", "Noto Sans", Arial, sans-serif; font-family: "Open Sans", "Noto Sans", "Lato", Arial, sans-serif;
color: black; color: var(--fg-color);
background: whitesmoke; background: var(--bg-color);
font-size: 120%; font-size: 120%;
line-height: 1.4em; line-height: 1.4em;
} }
...@@ -13,19 +32,20 @@ body { ...@@ -13,19 +32,20 @@ body {
min-height: calc(100vh - 1.5em) 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; } a:hover { text-decoration: underline; }
code, code { font-family: "Noto Sans Mono", Consolas, Monaco, monospace, monospace; } code, code { font-family: "Noto Sans Mono", Consolas, Monaco, monospace, monospace; }
body > header { body > header {
color: white; color: var(--header-fg-color);
background: darkslateblue; background: var(--header-bg-color);
border-radius: 8px; border-radius: 8px;
} }
body > header > nav { body > header > nav {
margin: 16px 0; margin: 16px 0;
padding: 8px 0; padding: 8px 0;
overflow-x: auto;
} }
body > header > nav > a { body > header > nav > a {
...@@ -41,12 +61,13 @@ body > header > nav > a:first-of-type { ...@@ -41,12 +61,13 @@ body > header > nav > a:first-of-type {
} }
body > header > nav > a:hover { body > header > nav > a:hover {
background: rgba(0, 0, 0, 0.25); background: var(--header-hover-color);
text-decoration: none; text-decoration: none;
} }
article { article {
background: white; color: var(--article-fg-color);
background: var(--article-bg-color);
margin: 16px 0; margin: 16px 0;
padding: 16px 32px; padding: 16px 32px;
border-radius: 8px; border-radius: 8px;
...@@ -61,26 +82,33 @@ article > p:last-of-type { ...@@ -61,26 +82,33 @@ article > p:last-of-type {
article > nav { article > nav {
font-size: small; font-size: small;
color: dimgray; color: var(--secondary-fg-color);
display: table; display: table;
line-height: 1.3; border: 0 solid var(--highlight-color);
padding: 8px 0; border-top-width: 1px;
border-top: 1px solid slateblue;
margin: 8px 0 0 auto; margin: 8px 0 0 auto;
padding: 8px;
line-height: 1.25;
} }
article > nav > * { article > nav > * {
display: block; display: block;
} }
p {
overflow-wrap: break-word;
hyphens: auto;
}
hr { hr {
border: 0px solid darkslateblue; border: 0px solid var(--highlight-color);
border-bottom-width: 1px; border-bottom-width: 1px;
} }
footer { footer {
font-size: small; font-size: small;
color: dimgray; color: var(--secondary-fg-color);
background: var(--secondary-bg-color);
text-align: center; text-align: center;
} }
...@@ -92,18 +120,31 @@ footer { ...@@ -92,18 +120,31 @@ footer {
body > article { body > article {
margin: 16px; margin: 16px;
/* border: 1px solid var(--article-border-color); */
} }
body > header { body > header {
border-radius: 0; border-radius: 0;
} }
body > header > nav { body > header > nav {
margin: 0; margin: 0;
display: flex; 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 { body > header > nav > a {
white-space: nowrap; 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