Styling

static/css/articles.css

@@ -103,7 +103,7 @@
 
 figcaption h4 {
   font-size: 10px;
-  padding-bottom: var(--element-padding);
+  margin: 0px;
 }
 
 .main-article {
@@ -161,30 +161,61 @@ ol {
   padding: var(--content-padding);
 }
 
+.article-card {
+  display: inline-block;
+  border-top: var(--border-width) var(--border-style) var(--border-color);
+  width: 100%;
+}
+
+.article-card-summary h3 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .article-card-summary p {
   color: var(--text-color);
   text-align: left;
   margin: 0px;
   border: none;
 }
-
 .article-card-container a:hover {
   text-decoration: underline;
   color: var(--text-color) !important;
 }
 
+.tags-container a {
+  border: var(--border-width) var(--border-style) var(--border-color);
+  color: var(--text-color);
+  border-radius: 20px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.tags-container a:hover {
+  border: var(--border-width) var(--border-style) var(--border-color);
+  border-radius: 20px;
+  padding-left: 5px;
+  padding-right: 5px;
+  text-decoration: none;
+  background-color: var(--navbar-hover);
+}
+
 .article-card-info {
   display: flex;
-  border-top: var(--border-width) var(--border-style) var(--border-color);
+  margin: 20px;
 }
 
 .article-card-info img {
   width: 300px;
   height: auto;
-  padding: 30px;
+  padding-right: 20px;
 }
 
-@media (max-width: 600px) {
+.reading-time {
+  font-weight: 200;
+}
+
+@media (max-width: 800px) {
   .article-card {
     display: flex;
     justify-content: center;
@@ -192,13 +223,16 @@ ol {
 
   .article-card-info {
     display: flex;
-    justify-content: center;
     flex-direction: column;
-    border-bottom: var(--border-width) var(--border-style) var(--border-color);
+  }
+
+  .article-card-thumb {
+    display: flex;
+    justify-content: center;
   }
 
   .article-card-info img {
-    width: 80vw;
+    width: 70vw;
     padding: 10px;
   }
 
@@ -208,11 +242,12 @@ ol {
   }
 
   .article-card-summary h3 {
-    margin-top: 0px;
+    margin-top: 10px;
+    margin-bottom: 10px;
   }
 }
 
-/* horizontal list*/
+/* content list*/
 .content-list-container {
   display: flex;
   flex-direction: column;
@@ -222,6 +257,7 @@ ol {
 
 .content-list-item {
   width: 100%;
+  border-bottom: var(--border-width) var(--border-style) var(--border-color);
 }
 
 .content-list-container a:hover {
@@ -234,7 +270,7 @@ ol {
   flex-direction: row;
   align-items: center;
   justify-content: left;
-  border-bottom: var(--border-width) var(--border-style) var(--border-color);
+  margin: 20px 0px 20px 0px;
 }
 
 .content-list-info img {

static/css/navbar.css

@@ -32,7 +32,6 @@
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   background-color: var(--navbar-background-color);
   border-radius: 5px;
-  border: var(--border-width) var(--border-style) var(--border-color) !important;
 }
 
 .navbar_link_dropdown:hover .navbar-link-dropdown-content {
@@ -41,11 +40,13 @@
 }
 
 .navbar-link-dropdown-content a {
-  border: none;
+  border-width: 0px;
+  border-color: transparent;
 }
 
 .navbar-link-dropdown-content a:hover {
-  border: none;
+  border-width: 0px;
+  border-color: transparent;
   background-color: var(--navbar-hover);
 }
 
@@ -123,7 +124,6 @@
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     background-color: var(--navbar-background-color);
     border-radius: 5px;
-    border: var(--border-width) var(--border-style) var(--border-color) !important;
   }
   .navbar-dropdown-content li {
     list-style-type: none;
@@ -131,7 +131,8 @@
   }
 
   .navbar-dropdown-content a {
-    border: none;
+    border-width: 0px;
+    border-color: transparent;
   }
 
   .navbar-dropdown-content li:hover {
@@ -144,7 +145,8 @@
   }
 
   .navbar-dropdown-content a:hover {
-    border: none;
+    border-width: 0px;
+    border-color: transparent;
   }
 
   .navbar-link-dropdown-content {
@@ -156,7 +158,6 @@
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     background-color: var(--navbar-background-color);
     border-radius: 5px;
-    border: var(--border-width) var(--border-style) var(--border-color) !important;
   }
 
   .navbar-link-dropdown-content a:hover {

static/css/style.css

@@ -41,7 +41,7 @@
   --line-height: 1.5;
 
   /* code */
-  --code-block-font-size: 10px;
+  --code-block-font-size: 14px;
   --codeblock-bg-color: #edeeee;
   --inline-code-color: #373841;
   --inline-code-bg-color: #edeeee;
@@ -85,8 +85,8 @@
 }
 
 html {
-  height: 100%;
   display: flex;
+  min-height: 100vh;
 }
 
 body {
@@ -98,6 +98,21 @@ body {
   width: 100%;
 }
 
+figure {
+  text-align: center;
+  margin: 20px;
+}
+
+p {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+h4 {
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
 a {
   text-decoration: none;
   color: var(--link-color);