Theme: basic styles + posts list

themes/qogir/assets/css/main.css

@@ -1,22 +1,59 @@
 body {
-  color: #222;
+  padding: 0 0.25rem;
-  font-family: sans-serif;
+  margin: auto;
-  line-height: 1.5;
+  max-width: 48rem;
-  margin: 1rem;
+  color: #e6ebef;
-  max-width: 768px;
+  background: #32343d;
+  font-family: 'Roboto', 'Ubuntu', sans-serif;
 }
 
-header {
+h1, h2, h3, h4, h5, h6 {
-  border-bottom: 1px solid #222;
+  margin: 0;
-  margin-bottom: 1rem;
-}
-
-footer {
-  border-top: 1px solid #222;
-  margin-top: 1rem;
 }
 
 a {
-  color: #00e;
+  color: #a9caf1;
   text-decoration: none;
 }
+a:hover {
+  color: #d5e5f8;
+}
+
+.post-item {
+  padding: 3%;
+  border-radius: 0.25rem;
+  background: #282a33;
+}
+.post-item h2 a {
+  color: #e6ebef;
+}
+.post-item div {
+  /* Make the same value as in post-item's 3% padding.
+   * 100 / 94 = ratio .post-item width / this div width,
+   * 94 = 100% - (3% * 2), where
+   * 3% is the padding in .post-item,
+   * 3 * 2 = padding-left + padding-right = 3% + 3%
+   */
+  margin-top: calc(3% * 100 / (100 - 3 * 2));
+}
+
+a.button {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+
+  background: transparent;
+  color: #e6ebef;
+  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
+
+  transition:
+    background-color 0.075s linear,
+    border-color 0.1s linear;
+}
+a.button:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+a.button:active {
+  background: #5294e2;
+  border-color: #5294e2;
+}

themes/qogir/layouts/_default/home.html

@@ -1,7 +1,6 @@
 {{ define "main" }}
   {{ .Content }}
   {{ range site.RegularPages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+    {{ partial "post-item.html" . }}
-    {{ .Summary }}
   {{ end }}
 {{ end }}

themes/qogir/layouts/_default/list.html

@@ -2,7 +2,6 @@
   <h1>{{ .Title }}</h1>
   {{ .Content }}
   {{ range .Pages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+    {{ partial "post-item.html" . }}
-    {{ .Summary }}
   {{ end }}
 {{ end }}

themes/qogir/layouts/_default/terms.html

@@ -0,0 +1,9 @@
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+  {{ range .Pages }}
+    <div class="tag-item">
+      <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+    </div>
+  {{ end }}
+{{ end }}

themes/qogir/layouts/partials/post-item.html

@@ -0,0 +1,4 @@
+<div class="post-item">
+  <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+  <div>{{ .Summary }}</div>
+</div>