Feature/daguttt - Implement Mobile Design

.gitignore

@@ -1,3 +1,7 @@
+# Copiled CSS
+assets/styles/styles.css
+assets/styles/styles.css.map
+
 # Created by .ignore support plugin (hsz.mobi)
 ### Node template
 # Logs

assets/styles/layout/_footer.scss

@@ -0,0 +1,15 @@
+@use "../modules/variables" as v;
+
+.footer {
+  color: v.$footer-text-color;
+  background-color: v.$color-dark;
+  text-align: center;
+
+  a {
+    color: v.$footer-link-color;
+
+    &:hover {
+      color: v.$footer-text-color;
+    }
+  }
+}

assets/styles/layout/_hero.scss

@@ -0,0 +1,29 @@
+@use "../modules/variables" as v;
+@use "../modules/mixins" as m;
+
+.hero {
+  text-align: center;
+
+  &__branding {
+    display: grid;
+    place-content: center;
+
+    img {
+      place-self: center;
+      width: 42px;
+      height: 42px;
+    }
+    h1 {
+      padding-inline: 1rem;
+    }
+
+    @include m.media("medium") {
+      grid-template-columns: auto auto;
+    }
+  }
+
+  h2 {
+    font-family: v.$font-open-sans;
+    font-size: 1.5rem;
+  }
+}

assets/styles/layout/_index.scss

@@ -0,0 +1,3 @@
+@forward "./hero";
+@forward "./main";
+@forward "./footer";

assets/styles/layout/_main.scss

@@ -0,0 +1,3 @@
+.easy-to-use {
+  text-align: center;
+}

assets/styles/modules/_app.scss

@@ -1,8 +1,74 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  outline: 0;
-  padding: 0;
-  text-decoration: none;
-  text-rendering: optimizeLegibility;
+@use "./variables" as v;
+@use "./mixins" as m;
+
+.container {
+  max-width: v.$large-size;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1rem;
+
+  @include m.media("medium") {
+    max-width: v.$medium-size;
+  }
+
+  @include m.media("large") {
+    padding: 0;
+  }
+}
+
+.section {
+  padding: 100px 0;
+  background-color: v.$color-light;
+
+  &--accent {
+    background-color: v.$color-light-accent;
+
+    pre {
+      background-color: v.$color-light;
+    }
+  }
+}
+
+img.elevation {
+  border-radius: 0.5rem;
+  box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
+    0 8px 16px -8px hsla(0, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
+}
+
+.spacing {
+  &--small {
+    margin-bottom: 1rem;
+  }
+}
+
+.title {
+  &--small {
+    font-weight: 300;
+  }
+}
+
+.text {
+  &--large {
+    font-size: 2.25rem;
+  }
+}
+
+a {
+  color: v.$link-color;
+}
+
+code {
+  background-color: v.$color-light-accent;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+pre {
+  white-space: nowrap;
+  padding: 0.875rem;
+  margin-bottom: 1.625rem; // 26px
+  border-radius: 0.5rem;
+  background-color: v.$color-light-accent;
+  font-size: 0.875rem; // 14px
 }

assets/styles/modules/_index.scss

@@ -0,0 +1,5 @@
+@forward "./resets";
+@forward "./app";
+@forward "./mixins";
+@forward "./typography";
+@forward "./variables";

assets/styles/modules/_mixins.scss

@@ -0,0 +1,8 @@
+@use "./variables" as v;
+@use "sass:map";
+
+@mixin media($size) {
+  @media (min-width: map.get(v.$breakpoints, $size)) {
+    @content;
+  }
+}

assets/styles/modules/_resets.scss

@@ -0,0 +1,36 @@
+html {
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+  font-size: 100%;
+}
+
+:is(*, *::after, *::before) {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3 {
+  margin: 0;
+}
+
+h1 {
+  font-size: 2.625rem;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+p {
+  line-height: 1.6;
+}

assets/styles/modules/_typography.scss

@@ -1,5 +1,11 @@
-@import url('https://rsms.me/inter/inter.css');
-html { font-family: 'Inter', sans-serif; }
+@import url("https://rsms.me/inter/inter.css");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap");
+
+html {
+  font-family: "Inter", sans-serif;
+}
 @supports (font-variation-settings: normal) {
-  html { font-family: 'Inter var', sans-serif; }
+  html {
+    font-family: "Inter var", sans-serif;
+  }
 }

assets/styles/modules/_variables.scss

@@ -1,2 +1,16 @@
-$colorLight: #fff;
-$colorDark: #000;
+$color-light: #fff;
+$color-light-accent: #f4f7fc;
+$color-dark: #000;
+$link-color: #386bf3;
+$footer-text-color: hsla(0, 100%, 100%, 0.6);
+$footer-link-color: hsla(0, 100%, 100%, 0.8);
+
+$font-open-sans: "Open Sans", sans-serif;
+
+$medium-size: 768px;
+$large-size: 992px;
+
+$breakpoints: (
+  "medium": $medium-size,
+  "large": $large-size,
+);

assets/styles/styles.css

@@ -1,11 +1,105 @@
 @import url("https://rsms.me/inter/inter.css");
-* {
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap");
+html {
   box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+  font-size: 100%;
+}
+
+:is(*, *::after, *::before) {
+  box-sizing: inherit;
+}
+
+body {
   margin: 0;
-  outline: 0;
-  padding: 0;
+}
+
+a {
   text-decoration: none;
-  text-rendering: optimizeLegibility;
+}
+
+h1,
+h2,
+h3 {
+  margin: 0;
+}
+
+h1 {
+  font-size: 2.625rem;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+p {
+  line-height: 1.6;
+}
+
+.container {
+  max-width: 992px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1rem;
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 992px) {
+  .container {
+    padding: 0;
+  }
+}
+
+.section {
+  padding: 100px 0;
+  background-color: #fff;
+}
+.section--accent {
+  background-color: #f4f7fc;
+}
+.section--accent pre {
+  background-color: #fff;
+}
+
+img.elevation {
+  border-radius: 0.5rem;
+  box-shadow: 0 13px 27px -5px hsla(240deg, 30.1%, 28%, 0.25), 0 8px 16px -8px hsla(0deg, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0deg, 0%, 0%, 0.03);
+}
+
+.spacing--small {
+  margin-bottom: 1rem;
+}
+
+.title--small {
+  font-weight: 300;
+}
+
+.text--large {
+  font-size: 2.25rem;
+}
+
+a {
+  color: #386bf3;
+}
+
+code {
+  background-color: #f4f7fc;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+pre {
+  white-space: nowrap;
+  padding: 0.875rem;
+  margin-bottom: 1.625rem;
+  border-radius: 0.5rem;
+  background-color: #f4f7fc;
+  font-size: 0.875rem;
 }
 
 html {
@@ -17,5 +111,43 @@ html {
     font-family: "Inter var", sans-serif;
   }
 }
+.hero {
+  text-align: center;
+}
+.hero__branding {
+  display: grid;
+  place-content: center;
+}
+.hero__branding img {
+  place-self: center;
+  width: 42px;
+  height: 42px;
+}
+.hero__branding h1 {
+  padding-inline: 1rem;
+}
+@media (min-width: 768px) {
+  .hero__branding {
+    grid-template-columns: auto auto;
+  }
+}
+.hero h2 {
+  font-family: "Open Sans", sans-serif;
+  font-size: 1.5rem;
+}
+
+.easy-to-use {
+  text-align: center;
+}
 
-/*# sourceMappingURL=styles.css.map */
+.footer {
+  color: hsla(0deg, 100%, 100%, 0.6);
+  background-color: #000;
+  text-align: center;
+}
+.footer a {
+  color: hsla(0deg, 100%, 100%, 0.8);
+}
+.footer a:hover {
+  color: hsla(0deg, 100%, 100%, 0.6);
+}/*# sourceMappingURL=styles.css.map */