initial commit

1 files changed, 81 insertions, 0 deletions

diff --git a/static/style/header/text$x-scss.scss b/static/style/header/text$x-scss.scss
new file mode 100644
index 0000000..a51457f
--- /dev/null
+++ b/static/style/header/text$x-scss.scss
@@ -0,0 +1,81 @@
+header {
+  > div {
+    font-family: 'Source Sans Pro', sans-serif;
+    padding: 1rem 2rem;
+    text-align: right;
+
+    color: $gray-bright;
+    background: $gray-dark;
+
+    h1 {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      flex-wrap: wrap;
+      margin: 0;
+      line-height: 5rem;
+
+      font-size: 4rem;
+      font-weight: 200;
+
+      > span {
+        margin-left: auto;
+      }
+
+      .bold {
+        font-weight: 400;
+      }
+
+      > a {
+        height: 5rem;
+      }
+
+      @include media-small() {
+        font-size: 2rem;
+        line-height: 5rem
+      }
+
+      .sun {
+        height: 100%;
+        stroke: currentColor;
+        fill: currentColor;
+
+        .out, .in {
+          animation: spin 2s;
+          animation-iteration-count: 1;
+          transform: scale(1);
+        }
+
+        .in {
+          animation: size 2s;
+        }
+
+        &.spin .circle {
+          animation: none;
+        }
+      }
+    }
+  }
+
+  aside {
+    margin: 0;
+    padding: 0 2rem;
+    color: $gray-bright;
+    background: $gray-darker;
+    line-height: 3em;
+
+    > a {
+      margin-right: 2em;
+    }
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate3d(0.5, 1, 0, 0turn); }
+  100% { transform: rotate3d(0.5, 1, 0, 1turn); }
+}
+
+@keyframes size {
+  0%, 100% { transform: scale(1); }
+  40%, 60% { transform: scale(1.8); }
+}