From 74cbb7b516253db29af37c4915368a9ced666fc1 Mon Sep 17 00:00:00 2001 From: Mitja Felicijan Date: Sat, 31 Jul 2021 23:59:24 +0200 Subject: Footer and New fotn --- template/style.css | 117 ++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 85 insertions(+), 32 deletions(-) (limited to 'template/style.css') diff --git a/template/style.css b/template/style.css index 22ff928..161ef84 100755 --- a/template/style.css +++ b/template/style.css @@ -1,5 +1,7 @@ +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'); + :root { - --base-document-width: 700px; + --base-document-width: 760px; --base-font-size: 18px; --base-color: #111111; @@ -20,7 +22,7 @@ body { background: white; - font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif; + font-family: 'IBM Plex Sans', sans-serif; color: var(--base-color); font-size: var(--base-font-size); line-height: 1.7em; @@ -29,6 +31,11 @@ body { padding-bottom: 100px; } +hr { + border: 0; + border-top: 5px solid #f7f7f7; +} + ::selection { background: #ff0; @@ -47,6 +54,17 @@ body { margin: 0 auto; } +/* links */ + +a { + color: var(--link-color); + /* font-weight: 600; */ +} + +a:hover { + color: var(--link-color-hover); +} + /* headings */ @@ -109,7 +127,8 @@ blockquote p { .navigation { /*border-bottom: 1px dotted var(--border-color);*/ - margin-bottom: 50px; + margin-block-start: 10px; + margin-block-end: 50px; } .navigation header { @@ -117,17 +136,21 @@ blockquote p { align-items: center; } -.navigation header .home { - font-size: 130%; +.navigation header a { + text-decoration: none; } -.navigation header .home a { - text-decoration: none; - color: var(--base-color); +.navigation header a:hover { + text-decoration: underline; +} + +.navigation header .home { + font-size: 130%; + font-weight: 900; } .navigation header .home a:hover { - text-decoration: underline; + text-decoration: none; } .navigation header nav { @@ -137,16 +160,10 @@ blockquote p { .navigation header nav a { padding: 0 10px; - text-decoration: none; - color: var(--link-color-hover); -} - -.navigation header nav a:hover { - text-decoration: underline; - color: var(--link-color-hover); + font-size: 90%; + font-weight: 500; } - /* index post list */ .post-list { @@ -157,21 +174,25 @@ blockquote p { .post-list li { margin: 0 0 20px 0; - text-decoration: none; +} + +.post-list li time { + display: block; + font-size: 70%; + font-weight: 500; } .post-list li a { - /*text-decoration: none; - color: var(--link-color);*/ + display: inline-block; + text-decoration: none; } .post-list li a:hover { - /*text-decoration: underline; - color: var(--link-color-hover);*/ + text-decoration: underline; } .post-list li a h2 { - font-weight: 400; + font-weight: 500; font-size: 100%; margin: 0; } @@ -184,13 +205,20 @@ blockquote p { } .project-list a { - /*text-decoration: none; - color: var(--link-color);*/ + font-weight: 400; + text-decoration: none; +} + +.project-list li { + list-style-type: disclosure-closed; + padding-left: 10px; } -.project-list li a:hover { - /*text-decoration: underline; - color: var(--link-color-hover);*/ + +/* webring */ + +.webring a { + font-weight: 500; } @@ -207,12 +235,10 @@ blockquote p { background: var(--badge-background-color); color: var(--badge-label-color) !important; - text-decoration: none !important; } .tags a:hover { filter: brightness(90%); - text-decoration: none !important; } @@ -227,25 +253,36 @@ blockquote p { } code { + font-family: 'IBM Plex Mono', monospace; background: rgb(255, 241, 177); - padding: 2px 5px; + border-radius: 5px; + padding: 2px 8px; font-size: 14px; + font-weight: 500; } pre > code { background: unset; padding: unset; + + padding: 15px 20px !important; + border-radius: 5px !important; + font-weight: 400; } pre { font-size: 14px; line-height: 1.5em; + + margin-block-start: 40px; + margin-block-end: 40px; } img, video { max-width: 100%; margin: 30px auto; display: block; + border-radius: 5px; } time { @@ -264,6 +301,17 @@ article a { hyphens: auto; } +article img { + max-width: 120%; + position: relative; + width: 130%; + left: -10%; + margin: 70px auto; +} + +article strong { + font-weight: 600; +} /* audio */ @@ -276,10 +324,15 @@ audio { /* footer */ .footer { - border-top: 1px solid var(--border-color); margin-top: 70px; padding-top: 20px; padding-bottom: 50px; + font-size: 90%; + color: #888; +} + +.footer a { + color: #777; } -- cgit v1.2.3