taxonomies (categories, tags, year/month/slug), syntax.css und Blog (posts).

public/css/style.css

@@ -1,45 +1,110 @@
 .container {
-    margin: 0 auto;
-    width: 80%;
+  margin: 0 auto;
+  width: 89%;
 }
 nav, footer {
-    background-color: #333;
-    color: #fff;
-    text-align: center;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
 }
 nav {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
+}
+footer li, footer ul {
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+footer li::after {
+  content: " | "
+}
+nav > a, footer a {
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  color: #fff;
 }
 
-nav > a {
-    flex: 1;
-    text-align: center;
-    text-decoration: none;
-    color: #fff;
+/* Blog post section */
+a.tag {
+  background-color: #ddd;
+  color: #333;
+  display: inline-block;
+  padding: 0.1em;
+  font-size: 0.9em;
+  text-decoration: none;
+}
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  list-style: none;
+  margin: 1em auto;
+  padding: 0;
+}
+.pagination > .page-item {
+  border: 1px solid #ddd;
+  flex: 1;
+  text-align: center;
+  width: 5em;
+}
+.pagination .page-link {
+  display: block;
+  color: #000;
+  text-decoration: none;
+}
+.pagination > .page-item.active {
+  background-color: #333;
+}
+.pagination > .page-item.active > .page-link {
+  color: #fff;
+}
+.pagination > .page-item.disabled > .page-link {
+  color: #ddd;
 }
 
+/* Project section */
+.project-container {
+  display: flex;
+  flex-direction: column-reverse;
+}
+/* flex behaviour */
+.project-container img {max-width: 100%; height: auto; }
 @media only screen and (min-width: 768px) {
-    nav { flex-direction: row; }
+  nav { flex-direction: row; }
+  .project-container {
+    flex-direction: row;
+    column-gap: 1.5em;
+  }
+  .pagination { width: 30%; }
 }
-
-.project-container { display: flex; }
-
-.project-container .project-list { width: 20%; }
-
-.project-container .project { flex: 1; }
-/* might do the same with present(ation) */
-
 .oss {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.oss article {
+  border: 1px solid #ddd;
+  box-shadow: 3px 3px 3px #ddd;
+  margin: 0.5%;
+  padding: 0.5%;
+  width: 30%;
 }
 
-.oss article {
-    border: 1px solid #ddd;
-    box-shadow: 3px 3px 3px #ddd;
-    margin: 0.5%;
-    padding: 0.5%;
-    width: 30%;
+blockquote {
+  font-weight: bolder;
+}
+.footnotes {
+  font-size: 11px;
+}
+pre {
+  overflow: auto;
+}
+code[data-lang]::before {
+  content: attr(data-lang);
+  display: block;
+  font-weight: bold;
+}
+abbr {
+  cursor: pointer;
 }