Footer and New fotn

1 files changed, 85 insertions, 32 deletions

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;
 }