init

components/_form.scss

@@ -0,0 +1,49 @@
+form {
+    width: 100%;
+    margin-top: 1rem;
+    border: 1px solid var(--primary-color-ligher);
+    border-radius: 3px;
+    background: rgba(var(--primary-color-darker), .2);
+    padding: 2rem;
+
+    div {
+        padding: .5rem;
+
+        label {
+            display: block;
+        }
+    }
+}
+
+input[type="password"],
+input[type="email"],
+input[type="text"] {
+    @include breakpoint('screen', 'm', 'full') {
+        width: rem(400);
+    }
+    line-height: 1rem;
+    padding: .5rem 1rem;
+    border: 1px solid var(--secondary-color-darker);
+    color: var(--fg-color);
+    border-radius: 5px;
+    transition: background-color .5s;
+    text-decoration: none;
+}
+
+.button, button {
+    @extend .nofx, .noexternal-fx;
+    line-height: 1rem;
+    padding: .5rem 1rem;
+    border: 1px solid var(--secondary-color-darker);
+    background: linear-gradient(rgb(var(--secondary-color)), rgb(var(--secondary-color-darker)));
+    color: #151515 !important;
+    border-radius: 5px;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color .5s;
+    text-shadow: none;
+}
+
+.button:hover, button:hover {
+    background: linear-gradient(rgb(var(--secondary-color-lighter)), rgb(var(--secondary-color)));
+}

components/_linkextern.scss

@@ -0,0 +1,12 @@
+.component-linkextern:not([href^='https://#{$domain}']) {
+  margin-right: 1.2em;
+
+  &:after {
+    content: '\f08e';
+    font-family: var(--font-icon);
+    font-size: .8em;
+    margin-left: .35em;
+    margin-top: .1em;
+    position: absolute;
+  }
+}

components/_linkfx.scss

@@ -0,0 +1,15 @@
+.component-linkfx {
+  &:before {
+    position: absolute;
+    content: '';
+    bottom: .29rem;
+    border-bottom: 1px solid currentColor;
+    width: 0;
+    height: 1px;
+    transition: width .25s;
+  }
+
+  &:hover:before {
+    width: 100%;
+  }
+}

components/_modal.scss

@@ -0,0 +1,27 @@
+.modal {
+    position:absolute;
+    z-index: 1000;
+    top: 1rem;
+    left: 1rem;
+    right: 1rem;
+    bottom: 1rem;
+    overflow: scroll;
+    max-width: 1400px;
+    margin: 0 auto;
+    display: none;
+    background: var(--primary-color-darekr);
+    border-radius: 10px;
+    padding: 2rem;
+
+    i.close {
+        position: absolute;
+        z-index: 10000;
+        color: var(--fg-color-inverted);
+        font-family: 'font-awesome', sans-serif;
+        width: 2rem;
+        height: 2rem;
+        right: .5rem;
+        top: .5rem;
+        cursor: pointer;
+    }
+}

components/_radio.scss

@@ -0,0 +1,7 @@
+.component-radio {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #c00;
+}