Footer and New fotn

6 files changed, 95 insertions, 36 deletions

diff --git a/template/_footer.html b/template/_footer.html
index f137b83..76980a6 100755
--- a/template/_footer.html
+++ b/template/_footer.html
@@ -1,5 +1,7 @@
 <div class="footer">
   <footer class="wrapper">
-    Generic footer
+    This website does not track you.
+    Content is made available under the <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0 license</a> unless specified otherwise.
+    Blog feed available as <a href="/feed.rss" target="_blank">RSS</a> or <a href="/feed.json" target="_blank">JSON</a> feeds.
   </footer>
 </div>
diff --git a/template/_meta.html b/template/_meta.html
index 4741672..60d8541 100755
--- a/template/_meta.html
+++ b/template/_meta.html
@@ -3,9 +3,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-<link rel="stylesheet" href="/style.css">
+<link rel="stylesheet" href="/style.css?v=20210731-09">
 
 <link rel="alternate" type="application/rss+xml" href="/feed.rss">
 <link rel="alternate" type="application/feed+json" href="/feed.json">
 
-<link rel="icon" href="/assets/general/favicon.png" type="image/png">
+<link rel="icon" href="/assets/general/favicon.png?v=20210731-01" type="image/png">
diff --git a/template/_navigation.html b/template/_navigation.html
index b80caf6..2943afe 100755
--- a/template/_navigation.html
+++ b/template/_navigation.html
@@ -7,8 +7,8 @@
     <nav itemscope itemtype="http://schema.org/SiteNavigationElement" class="main-navigation">
       <meta itemprop="name" content="Main Menu">
 
-      <a href="/curriculum-vitae.html">CV</a>
       <a href="https://github.com/mitjafelicijan" target="_blank" rel="noopener nofollow" itemprop="url">Github</a>
+      <a href="/curriculum-vitae.html">CV</a>
       <a href="/feed.rss" itemprop="url">RSS Feed</a>
     </nav>
   </header>
diff --git a/template/index.html b/template/index.html
index 73677a5..83567e7 100755
--- a/template/index.html
+++ b/template/index.html
@@ -55,6 +55,8 @@
 
     </main>
 
+    {{template "_footer.html"}}
+
   </body>
 
 </html>
diff --git a/template/post.html b/template/post.html
index 8d43217..00be220 100755
--- a/template/post.html
+++ b/template/post.html
@@ -59,6 +59,8 @@
 
     </main>
 
+    {{template "_footer.html"}}
+
     {{template "_includes.html"}}
 
   </body>
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;
 }