Desktop version

3 files changed, 153 insertions, 0 deletions

diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
new file mode 100644
index 0000000..ecfb0a5
--- /dev/null
+++ b/sass/layout/_footer.scss
@@ -0,0 +1,60 @@
+@use "../abstracts" as *;
+
+footer {
+  background-color: $bg-text-container;
+  // delete positioning to make grid footer from body work
+  // position: absolute;
+  // bottom: 0;
+  // left: 0;
+  width: 100%;
+
+  & * {
+    margin: $margin-main;
+  }
+
+  dl {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 2rem;
+
+    & * {
+      color: inherit;
+      font-size: $medium-text;
+      margin: 0.5rem;
+      transition: transform 0.3s;
+    }
+
+    & dd i:hover {
+      @include main-link-hover;
+    }
+  }
+
+  p {
+    text-align: center;
+  }
+
+  .big-icon {
+    font-size: $big-text;
+  }
+}
+
+@media screen and (max-width: 420px) {
+  footer {
+    top: 100;
+
+    & * {
+      margin: $margin-mobile;
+    }
+
+    dl {
+      flex-direction: column;
+      height: max-content;
+
+      & * {
+        font-size: $medium-text-mobile;
+        margin: 0.3rem;
+      }
+    }
+  }
+}
diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss
new file mode 100644
index 0000000..fb2d433
--- /dev/null
+++ b/sass/layout/_main-sections.scss
@@ -0,0 +1,32 @@
+@use "../abstracts/" as *;
+
+.about-section {
+  @include flex-sp-around-center;
+  @include narrow-container;
+}
+
+.welcome-section {
+  @include standard-grid;
+  gap: 8rem;
+  @include narrow-container;
+  width: 60%;
+
+  .welcome-intro {
+    border-radius: $radius-text-container;
+    outline: 3px solid $text-special-dark;
+    outline-offset: 1rem;
+  }
+}
+
+.projects-section {
+  @include wide-container;
+
+  // less margin between h2 and the 2nd child = first project-container
+  & > div:not(:nth-child(2)) {
+    margin-top: 10rem;
+  }
+}
+
+.contact-section {
+  @include wide-container;
+}
diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
new file mode 100644
index 0000000..d57f3d7
--- /dev/null
+++ b/sass/layout/_nav.scss
@@ -0,0 +1,61 @@
+@use "../abstracts" as *;
+
+nav {
+  background-color: $bg-text-container;
+  font-family: "Archivo Black", sans-serif;
+  height: 10vh;
+  width: 100%;
+
+  ul {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: flex-end;
+    height: 100%;
+    list-style-type: none;
+    padding: 0 3rem;
+    width: 100%;
+  }
+
+  // logo to the left side of navbar
+  li:first-child {
+    text-align: left;
+    margin-right: auto;
+  }
+
+  li a {
+    display: block;
+    color: inherit;
+    font-size: $medium-text;
+    padding: 0 1.5rem;
+    text-align: center;
+    transition: transform 0.3s;
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:hover {
+      @include main-link-hover;
+    }
+  }
+}
+
+// mobile
+@media screen and (max-width: 770px) {
+  nav {
+    ul {
+      gap: 1rem;
+      justify-content: center;
+      padding: 0;
+    }
+
+    li:first-child {
+      text-align: center;
+      margin-right: 1.5rem;
+    }
+
+    li a {
+      font-size: 1rem;
+      padding: 0;
+    }
+  }
+}