diff --git a/practice/practice-02/src/layouts/nav/nav-menu.pug b/practice/practice-02/src/layouts/nav/nav-menu.pug index 0183ac8..8e73368 100644 --- a/practice/practice-02/src/layouts/nav/nav-menu.pug +++ b/practice/practice-02/src/layouts/nav/nav-menu.pug @@ -7,4 +7,4 @@ nav.nav each val in list li.nav-item a.nav-link(href="javascrip:void(0)")= val -a.btn(href="javascript:void(0)") Download App +a.btn.nav-download-btn(href="javascript:void(0)") Download App diff --git a/practice/practice-02/src/styles/base/reset.scss b/practice/practice-02/src/styles/base/reset.scss deleted file mode 100644 index 93d88f2..0000000 --- a/practice/practice-02/src/styles/base/reset.scss +++ /dev/null @@ -1,54 +0,0 @@ -$background-color_1: transparent; - -* { - box-sizing: border-box; - margin: 0; - padding: 0; - font: inherit; - &:before { - box-sizing: border-box; - } - &:after { - box-sizing: border-box; - } -} -img { - display: block; - max-width: 100%; -} -picture { - display: block; - max-width: 100%; -} -svg { - display: block; - max-width: 100%; -} -video { - display: block; - max-width: 100%; -} -input { - background-color: $background-color_1; - outline: none; -} -select { - background-color: $background-color_1; - outline: none; -} -textarea { - background-color: $background-color_1; - outline: none; -} -button { - cursor: pointer; - background-color: $background-color_1; - outline: none; - border: 0; -} -body { - min-height: 100vh; - font-weight: 400; - font-size: 16px; - line-height: 1; -} diff --git a/practice/practice-02/src/styles/bases/_reset.scss b/practice/practice-02/src/styles/bases/_reset.scss new file mode 100644 index 0000000..3089150 --- /dev/null +++ b/practice/practice-02/src/styles/bases/_reset.scss @@ -0,0 +1,128 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/practice/practice-02/src/styles/bases/_typography.scss b/practice/practice-02/src/styles/bases/_typography.scss index 2f86ba5..3d72fac 100644 --- a/practice/practice-02/src/styles/bases/_typography.scss +++ b/practice/practice-02/src/styles/bases/_typography.scss @@ -9,3 +9,7 @@ $font-path: "../assets/fonts"; src: url("#{$font-path}/inter-regular.ttf") format("truetype"); font-family: "Inter"; } + +* { + font-family: $primary-font; +} diff --git a/practice/practice-02/src/styles/bases/reset.scss b/practice/practice-02/src/styles/bases/reset.scss deleted file mode 100644 index 93d88f2..0000000 --- a/practice/practice-02/src/styles/bases/reset.scss +++ /dev/null @@ -1,54 +0,0 @@ -$background-color_1: transparent; - -* { - box-sizing: border-box; - margin: 0; - padding: 0; - font: inherit; - &:before { - box-sizing: border-box; - } - &:after { - box-sizing: border-box; - } -} -img { - display: block; - max-width: 100%; -} -picture { - display: block; - max-width: 100%; -} -svg { - display: block; - max-width: 100%; -} -video { - display: block; - max-width: 100%; -} -input { - background-color: $background-color_1; - outline: none; -} -select { - background-color: $background-color_1; - outline: none; -} -textarea { - background-color: $background-color_1; - outline: none; -} -button { - cursor: pointer; - background-color: $background-color_1; - outline: none; - border: 0; -} -body { - min-height: 100vh; - font-weight: 400; - font-size: 16px; - line-height: 1; -} diff --git a/practice/practice-02/src/styles/components/_button.scss b/practice/practice-02/src/styles/components/_button.scss index d6cf620..8a61dd4 100644 --- a/practice/practice-02/src/styles/components/_button.scss +++ b/practice/practice-02/src/styles/components/_button.scss @@ -1,6 +1,5 @@ .btn { align-self: center; - display: none; padding: 13px 20px; background-color: $primary-color; border-radius: 100px; @@ -11,8 +10,12 @@ transition: 0.2s; } +.nav-download-btn { + display: none; +} + @media screen and (min-width: 840px) { - .btn { + .nav-download-btn { display: block; &:hover { diff --git a/practice/practice-02/src/styles/components/_menu-button.scss b/practice/practice-02/src/styles/components/_toggle-menu.scss similarity index 98% rename from practice/practice-02/src/styles/components/_menu-button.scss rename to practice/practice-02/src/styles/components/_toggle-menu.scss index 6625e5e..e9a6e95 100644 --- a/practice/practice-02/src/styles/components/_menu-button.scss +++ b/practice/practice-02/src/styles/components/_toggle-menu.scss @@ -2,7 +2,6 @@ @include base-icon-menu; position: relative; - top: 27px; width: 36px; cursor: pointer; diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss index 8c6fa8c..4b18779 100644 --- a/practice/practice-02/src/styles/layouts/_header.scss +++ b/practice/practice-02/src/styles/layouts/_header.scss @@ -2,6 +2,7 @@ position: relative; display: flex; justify-content: space-between; + align-items: center; max-width: $max-width; min-width: $min-width; padding: 24px; diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss index 5f73fe4..d10cf75 100644 --- a/practice/practice-02/src/styles/layouts/_navbar.scss +++ b/practice/practice-02/src/styles/layouts/_navbar.scss @@ -7,9 +7,11 @@ right: -300px; width: auto; height: auto; - margin-top: 80px; + margin-top: 105px; margin-right: 10px; + margin-left: 10px; z-index: 2; + background-color: $white; } .nav-item { diff --git a/practice/practice-02/src/styles/main.scss b/practice/practice-02/src/styles/main.scss index 19e3138..1843f43 100644 --- a/practice/practice-02/src/styles/main.scss +++ b/practice/practice-02/src/styles/main.scss @@ -8,13 +8,9 @@ // Components @import "./components/button"; -@import "./components/menu-button"; +@import "./components/toggle-menu"; @import "./components/logo"; // Layouts @import "./layouts/navbar"; @import "./layouts/header"; - -* { - font-family: $primary-font; -}