diff --git a/practice/practice-02/src/assets/images/favicon-16x16.png b/practice/practice-02/src/assets/images/favicon-16x16.png new file mode 100644 index 0000000..9ee9997 Binary files /dev/null and b/practice/practice-02/src/assets/images/favicon-16x16.png differ diff --git a/practice/practice-02/src/index.pug b/practice/practice-02/src/index.pug index e5f0787..a9bf8ef 100644 --- a/practice/practice-02/src/index.pug +++ b/practice/practice-02/src/index.pug @@ -4,6 +4,11 @@ html(lang="en") meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="./styles/main.scss") + link( + rel="icon", + type="image/x-icon", + href="./assets/images/favicon-16x16.png" + ) title Food Hut body header.header diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss index 52ff198..d5f760d 100644 --- a/practice/practice-02/src/styles/abstracts/_mixins.scss +++ b/practice/practice-02/src/styles/abstracts/_mixins.scss @@ -49,12 +49,15 @@ } @mixin setAbsoluteAndLocation( + $absolute: false, $top: null, $left: null, $right: null, $bottom: null ) { - position: absolute; + @if $absolute { + position: absolute; + } @if $top != null { top: $top; diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss index d795f72..388638b 100644 --- a/practice/practice-02/src/styles/layouts/_header.scss +++ b/practice/practice-02/src/styles/layouts/_header.scss @@ -1,5 +1,10 @@ .header { - @include setAbsoluteAndLocation($top: 0, $right: 0, $left: 0); + @include setAbsoluteAndLocation( + $absolute: true, + $top: 0, + $right: 0, + $left: 0 + ); max-width: 428px; margin: auto; diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss index f7f1e49..e4d8b1d 100644 --- a/practice/practice-02/src/styles/layouts/_welcome.scss +++ b/practice/practice-02/src/styles/layouts/_welcome.scss @@ -27,18 +27,18 @@ } &__lines-background { - @include setAbsoluteAndLocation($top: -76px, $right: 0); + @include setAbsoluteAndLocation($absolute: true, $top: -76px, $right: 0); @include size(187px, 430px); } &__arrow-img-up { - @include setAbsoluteAndLocation($top: -15px, $right: 50px); + @include setAbsoluteAndLocation($absolute: true, $top: -15px, $right: 50px); @include size(43px, 215px); } &__mint-img { - @include setAbsoluteAndLocation($bottom: 100px, $right: 0); + @include setAbsoluteAndLocation($absolute: true, $bottom: 100px, $right: 0); } // End banner @@ -57,7 +57,7 @@ } &__orange-img-wrapper { - @include setAbsoluteAndLocation($top: 0, $right: 35px); + @include setAbsoluteAndLocation($absolute: true, $top: 0, $right: 35px); } &__text-box { @@ -84,7 +84,7 @@ &__head-arrow-container { @include size(13px, 7.3px); - @include setAbsoluteAndLocation($right: 107px); + @include setAbsoluteAndLocation($absolute: true, $right: 107px); } &__heading { @@ -96,7 +96,11 @@ } &__underline-img-container { - @include setAbsoluteAndLocation($bottom: -20px, $left: 0px); + @include setAbsoluteAndLocation( + $absolute: true, + $bottom: -20px, + $left: 0px + ); } &__description { @@ -293,7 +297,11 @@ } &__arrow-down-img-wrapper { - @include setAbsoluteAndLocation($top: -50px, $left: 220px); + @include setAbsoluteAndLocation( + $absolute: true, + $top: -50px, + $left: 220px + ); display: block; transition: 0.2s; @@ -305,7 +313,11 @@ &__slider-container { display: block; - @include setAbsoluteAndLocation($bottom: -135px, $left: 65px); + @include setAbsoluteAndLocation( + $absolute: true, + $bottom: -135px, + $left: 65px + ); } // End content @@ -327,7 +339,7 @@ } &__arrow-down-img-wrapper { - @include setAbsoluteAndLocation($top: -95px, $left: 230px); + @include setAbsoluteAndLocation($top: -75px, $left: 230px); } } }