first commit

resources/sass/components/_btn.scss

@@ -0,0 +1,39 @@
+// Button
+
+.btn {
+    font-size: 1.6rem;
+    border: 1px solid transparent;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    box-shadow: 1px 1px 2px $grey;
+    transition: background-color 0.2s, color 0.2s;
+
+    &:hover {
+        transition: background-color 0.2s, color 0.2s;
+    }
+}
+
+.btn-primary {
+    @extend .btn;
+    background-color: $medium;
+    border-color: $medium;
+    color: $white;
+
+    &:hover {
+        background-color: $dark;
+        color: $light;
+    }
+}
+
+.btn-secondary {
+    @extend .btn;
+    background-color: $mediumLight;
+    border-color: $medium;
+    color: $dark;
+
+    &:hover {
+        background-color: $dark;
+        color: $light;
+    }
+}

resources/sass/components/_elements.scss

@@ -0,0 +1,23 @@
+// Elements
+
+label {
+    display: block;
+}
+
+input {
+    width: 100%;
+    border: 1px solid $light;
+    background-color: $greyLight;
+    font-size: 1.6rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+
+    &:focus {
+        background-color: $white;
+        border-color: $dark;
+    }
+}
+
+input[type="checkbox"] {
+    width: unset;
+}

resources/sass/components/main.scss

@@ -0,0 +1,10 @@
+body {
+    overflow: hidden;
+    height: 100vh;
+}
+
+main {
+    overflow: auto;
+    width: 100%;
+    height: calc(100vh - 4.5rem);
+}

resources/sass/components/nav.scss

@@ -0,0 +1,16 @@
+
+nav {
+    background-color: $medium;
+    height: 4.5rem;
+
+    .site-logo {
+        width: 3rem;
+        fill: $dark;
+        transition: fill 0.2s;
+
+        &:hover {
+            fill: $mediumDark;
+            transition: fill 0.2s;
+        }
+    }
+}

resources/sass/components/sidebar.scss

@@ -0,0 +1,6 @@
+aside {
+    background-color: $mediumLight;
+    height: calc(100vh - 4.5rem);
+    width: 15rem;
+    flex-shrink: 0;
+}