grid system and header

HieuTech · Nov 18, 2023 · 5349ded · 5349ded
1 parent d64510a
commit 5349ded
Show file tree

Hide file tree

Showing 19 changed files with 1,497 additions and 16 deletions.
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/assets/css/main.css.map b/assets/css/main.css.map
diff --git a/assets/icons/arrow-down.svg b/assets/icons/arrow-down.svg
diff --git a/assets/icons/buy.svg b/assets/icons/buy.svg
diff --git a/assets/icons/heart.svg b/assets/icons/heart.svg
diff --git a/assets/icons/logo.svg b/assets/icons/logo.svg
diff --git a/assets/icons/search.svg b/assets/icons/search.svg
diff --git a/assets/img/avatar.jpg b/assets/img/avatar.jpg
diff --git a/index.html b/index.html
@@ -23,18 +23,21 @@
 
 <body>
     <!-- header -->
-    <header id="header"></header>
+    <header id="header" class="header"></header>
     <script>
         load("#header","./template/header.html");
     </script>
-    <!-- Main -->
-    <h1>home page</h1>
-
-    <!-- footer -->
-    <footer id="footer"></footer>
-    <script>
-        load("#footer","./template/footer.html");
-    </script>
+   <div class="container">
+
+        <!-- Main -->
+        <h1>home page</h1>
+
+        <!-- footer -->
+        <footer id="footer"></footer>
+        <script>
+            load("#footer","./template/footer.html");
+        </script>
+   </div>
 </body>
 </html>
 
diff --git a/scss/base/_base.scss b/scss/base/_base.scss
@@ -2,11 +2,36 @@
     box-sizing: border-box;
 }
 
+:root{
+    // --text-color: #1A162E;
+    --text-color: #1A162E;
+    --icon-color: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7482%) hue-rotate(217deg) brightness(90%) contrast(95%);
+}
 html{
     font-size: 62.5%;
 }
 
 body{
     font-size: 1.6rem;
     font-family: Gordita, sans-serif;
+    color: var(--text-color);
+}
+
+a{
+    color: inherit;
+    text-decoration: none;
+}
+
+button{
+    border: none;
+    outline: none;
+    background-color: transparent;
+}
+button, input, textarea, select{
+    font-family: inherit;
+    color:inherit;
+}
+
+.icon{
+    filter: var(--icon-color);
 }
diff --git a/scss/base/_grid.scss b/scss/base/_grid.scss
@@ -0,0 +1,134 @@
+@use "sass:math";
+
+// Breakpoints, dimension, container, row, column, v.v
+$grid-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px,
+);
+$container-max-widths: (
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px,
+    xxl: 1370px,
+);
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+$gutters: (
+    0: 0,
+    1: 0.25,
+    2: 0.5,
+    3: 1,
+    4: 1.5,
+    5: 3,
+);
+
+%gutter-padding {
+    padding-left: calc(var(--grid-gutter-x) * 0.5);
+    padding-right: calc(var(--grid-gutter-x) * 0.5);
+}
+
+.container-fluid {
+    --grid-gutter-x: #{$grid-gutter-width};
+    --grid-gutter-y: 0;
+
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    @extend %gutter-padding;
+}
+
+.container {
+    @extend .container-fluid;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: calc(var(--grid-gutter-y) * -1);
+    margin-left: calc(var(--grid-gutter-x) * 0.5 * -1);
+    margin-right: calc(var(--grid-gutter-x) * 0.5 * -1);
+
+    > * {
+        margin-top: var(--grid-gutter-y);
+        @extend %gutter-padding;
+    }
+}
+
+.col {
+    flex: 1 0;
+}
+
+@mixin make-media-query($dimension, $bypass: false) {
+    @if $bypass {
+        @content;
+    } @else {
+        @media (min-width: $dimension) {
+            @content;
+        }
+    }
+}
+
+@mixin make-row-columns($infix) {
+    @for $i from 1 through $grid-columns * 0.5 {
+        .row-cols#{$infix}-#{$i} > * {
+            flex: 0 0 auto;
+            width: math.div(100%, $i);
+        }
+    }
+}
+
+@mixin make-columns($infix) {
+    @for $i from 1 through $grid-columns {
+        .col#{$infix}-#{$i} {
+            flex: 0 0 auto;
+            width: math.div(100%, $grid-columns) * $i;
+        }
+    }
+}
+
+@mixin make-offsets($infix) {
+    @for $i from 0 to $grid-columns {
+        .offset#{$infix}-#{$i} {
+            margin-left: if($i > 0, math.div(100%, $grid-columns) * $i, 0);
+        }
+    }
+}
+
+@mixin make-gutters($infix) {
+    @each $i, $ratio in $gutters {
+        .g#{$infix}-#{$i},
+        .gx#{$infix}-#{$i} {
+            --grid-gutter-x: #{$grid-gutter-width * $ratio};
+        }
+
+        .g#{$infix}-#{$i},
+        .gy#{$infix}-#{$i} {
+            --grid-gutter-y: #{$grid-gutter-width * $ratio};
+        }
+    }
+}
+
+@each $breakpoint, $dimension in $grid-breakpoints {
+    $max-width: map-get($container-max-widths, $breakpoint);
+    $is-xs: $breakpoint == xs;
+    $infix: if($is-xs, "", "-#{$breakpoint}");
+
+    @include make-media-query($dimension, $is-xs) {
+        .container {
+            max-width: $max-width;
+        }
+
+        @include make-row-columns($infix);
+
+        @include make-columns($infix);
+
+        @include make-offsets($infix);
+
+        @include make-gutters($infix);
+    }
+}
diff --git a/scss/base/_index.scss b/scss/base/_index.scss
@@ -0,0 +1,3 @@
+@forward "./reset";
+@forward "./base";
+@forward "./grid";
diff --git a/scss/components/_index.scss b/scss/components/_index.scss
@@ -0,0 +1 @@
+@forward "./logo";
diff --git a/scss/components/_logo.scss b/scss/components/_logo.scss
@@ -0,0 +1,14 @@
+.logo{
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    &__title{
+        font-size: 2.2rem;
+font-weight: 700;
+line-height: 1.4555em;
+    };
+    &__img{
+        width: 3.2rem;
+    height: 3.2rem;
+    }
+}
diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss
@@ -0,0 +1,79 @@
+%flexItemsCenter {
+    display: flex;
+    align-items: center;
+}
+
+.header{
+    display: flex;
+    align-items: center;
+    background: #EEE;
+
+}
+.top-bar{
+    @extend %flexItemsCenter;
+    padding: 30px 0;
+}
+
+.navbar{
+    margin-left: 144px;
+    margin-right: auto;
+    &__list{
+        @extend %flexItemsCenter;
+    }
+
+    &__link{
+        font-size: 15px;
+        font-weight: 500;
+        line-height: 1.46667em; /* 146.667% */
+        margin-right: 30px;
+        display: flex;
+        gap:6px;
+    }
+
+
+}
+
+.top-act{
+    // margin-left: auto;
+    @extend %flexItemsCenter;
+    justify-content: center;
+    gap:20px;
+
+
+    &__group{
+        @extend %flexItemsCenter;
+        border-radius: 8px;
+        background-color: #fff;
+        height: 50px;
+        min-width: 50px;
+    }
+
+    &__group--single &__btn{
+        padding: 13px;
+    }
+    &__btn{
+        @extend %flexItemsCenter;
+        gap:10px;
+        padding: 13px 20px;
+        cursor: pointer;
+    }
+    &__title{
+        font-size: 1.5rem;
+font-weight: 500;
+line-height: 1.4667em; /* 146.667% */
+    }
+
+   &__separate{
+    color:#EDEDF6;
+    width: 1px;
+height: 30px;
+   }
+   &__avatar{
+       display: block;
+       width: 50px;
+       height: 50px;
+       border-radius: 8px;
+        cursor: pointer;
+    }
+
+}
diff --git a/scss/layout/_index.scss b/scss/layout/_index.scss
@@ -0,0 +1 @@
+@forward "./header";
diff --git a/scss/main.scss b/scss/main.scss
@@ -1,4 +1,3 @@
-@use "./base/reset";
-@use "./base/base";
-
-
+@use "./base/" as base;
+@use "./layout" as layout;
+@use "./components/" as components;