Split & convert CSS into 4 SCSS, dont use .button for now

themes/qogir/assets/scss/button.scss

@@ -0,0 +1,22 @@
+a.button {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+
+  background: transparent;
+  color: $fg;
+  border: 0.0625rem solid $border;
+
+  transition:
+    background-color 0.075s linear,
+    border-color 0.1s linear;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &:active {
+    background: $bg-selected;
+    border-color: $bg-selected;
+  }
+}

themes/qogir/assets/scss/colors.scss

@@ -0,0 +1,7 @@
+$base: #282a33;
+$bg: #32343d;
+$fg: #e6ebef;
+$link: #a9caf1;
+$link-hover: #d5e5f8;
+$border: rgba(255, 255, 255, 0.2);
+$bg-selected: #5294e2;

themes/qogir/assets/scss/main.scss

@@ -0,0 +1,23 @@
+@import "colors.scss";
+
+body {
+  padding: 0 0.25rem;
+  margin: auto;
+  max-width: 48rem;
+  color: $fg;
+  background: $bg;
+  font-family: 'Roboto', 'Ubuntu', sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
+
+a {
+  color: $link;
+  text-decoration: none;
+
+  &:hover {
+    color: $link-hover;
+  }
+}

themes/qogir/assets/scss/post-item.scss

@@ -0,0 +1,21 @@
+@import "colors.scss";
+
+.post-item {
+  padding: 3%;
+  border-radius: 0.25rem;
+  background: $base;
+
+  h2 a {
+    color: $fg;
+  }
+
+  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));
+  }
+}