🎉 Initial commit

2020-08-22 13:20:08 +02:00
commit c698d944e6
69 changed files with 3781 additions and 0 deletions
@@ -0,0 +1,214 @@
+/*!
+ * Hamburgers
+ * @description Tasty CSS-animated hamburgers
+ * @author Jonathan Suh @jonsuh
+ * @site https://jonsuh.com/hamburgers
+ * @link https://github.com/jonsuh/hamburgers
+ */
+
+.hamburger {
+    padding-top: 10px;
+    display: inline-block;
+    cursor: pointer;
+    transition-property: opacity, filter;
+    transition-duration: 0.15s;
+    transition-timing-function: linear;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    overflow: visible;
+}
+.hamburger:hover {
+    opacity: 0.7;
+}
+.hamburger.is-active:hover {
+    opacity: 0.7;
+}
+.hamburger.is-active .hamburger-inner,
+.hamburger.is-active .hamburger-inner::before,
+.hamburger.is-active .hamburger-inner::after {
+    background-color: #000;
+}
+
+.hamburger-box {
+    width: 30px;
+    height: 24px;
+    display: inline-block;
+    position: relative;
+}
+
+.hamburger-inner {
+    display: block;
+    top: 50%;
+    margin-top: -2px;
+}
+
+.hamburger-inner,
+.hamburger-inner::before,
+.hamburger-inner::after {
+    width: 30px;
+    height: 2px;
+    background-color: var(--card-text-color-main);
+    border-radius: 4px;
+    position: absolute;
+    transition-property: transform;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+}
+.hamburger-inner::before,
+.hamburger-inner::after {
+    content: "";
+    display: block;
+}
+.hamburger-inner::before {
+    top: -10px;
+}
+.hamburger-inner::after {
+    bottom: -10px;
+}
+
+.hamburger--spin .hamburger-inner {
+    transition-duration: 0.22s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+.hamburger--spin .hamburger-inner::before {
+    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
+}
+.hamburger--spin .hamburger-inner::after {
+    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+.hamburger--spin.is-active .hamburger-inner {
+    transform: rotate(225deg);
+    transition-delay: 0.12s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.hamburger--spin.is-active .hamburger-inner::before {
+    top: 0;
+    opacity: 0;
+    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
+}
+.hamburger--spin.is-active .hamburger-inner::after {
+    bottom: 0;
+    transform: rotate(-90deg);
+    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+#toggle-menu {
+    background: none;
+    border: none;
+    position: absolute;
+    right: 30px;
+    top: 30px;
+    z-index: 2;
+    cursor: pointer;
+
+    @media (min-width: $on-phone + 1) {
+        display: none;
+    }
+    outline: none;
+
+    &.is-active {
+        .hamburger-inner,
+        .hamburger-inner::before,
+        .hamburger-inner::after {
+            background-color: var(--accent-color);
+        }
+    }
+}
+
+/* Menu style */
+.menu {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    margin: 30px 0;
+
+    @media (max-width: $on-phone) {
+        background-color: var(--card-background);
+        margin-top: 0;
+        padding: 15px 0;
+        @include box_shadow(1);
+        display: none;
+
+        &.show {
+            display: block;
+        }
+    }
+
+    @media (min-width: $on-phone + 1) {
+        align-items: flex-end;
+    }
+
+    li {
+        position: relative;
+        vertical-align: middle;
+        padding: 10px 0;
+
+        &:not(:last-of-type) {
+            margin-bottom: 20px;
+
+            @media (max-width: $on-desktop) {
+                margin-bottom: 10px;
+            }
+        }
+
+        @media (max-width: $on-phone) {
+            padding: 10px 30px;
+        }
+
+        @media (min-width: $on-phone + 1) and (max-width: ($on-desktop - 1)) {
+            padding: 10px 0;
+        }
+
+        @media (min-width: $on-phone + 1) {
+            width: 100%;
+        }
+
+        svg {
+            width: 32px;
+            height: 32px;
+            stroke-width: 1.33;
+
+            margin-right: 40px;
+
+            @media (max-width: $on-desktop) {
+                width: 30px;
+                height: 30px;
+            }
+        }
+
+        a {
+            height: 100%;
+            display: inline-flex;
+            align-items: center;
+            color: var(--body-text-color);
+
+            @media (max-width: $on-desktop) {
+                font-size: 1.5rem;
+            }
+        }
+
+        span {
+            flex: 1;
+        }
+
+        &.current {
+            a {
+                color: var(--accent-color);
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+@media (max-width: $on-phone) {
+    .show-menu {
+        .site-info {
+            //@include box_shadow(2);
+        }
+    }
+}