From b42d7cafcd4b0faa5d42e8959503cf161550b9b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20In=C3=A1cio=20Neto?= Date: Mon, 25 Sep 2023 16:09:06 -0300 Subject: [PATCH 1/2] feat: dark mode --- assets/css/style.css | 34 +++++++++++++- assets/css/var.css | 12 +++++ assets/js/script.js | 17 +++++++ index.html | 107 +++++++++++++++++++++---------------------- 4 files changed, 112 insertions(+), 58 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index f36e7ced..9c13e243 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -8,10 +8,12 @@ } body { - background-color: var(--white); + background-color: var(--background-color); + color: var(--text-color); font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; padding: 50px; + transition: background-color 0.5s ease-in-out; } .header { @@ -115,5 +117,33 @@ body { border-radius: 5px; color: var(--white); background-color: var(--purple-500); - font-size: 0.75rem; /* pra caber no card e não quebrar linha */ + font-size: 0.75rem; + /* pra caber no card e não quebrar linha */ +} + +.dark-mode-button { + background-color: var(--purple-500); + color: var(--white); + border: none; + border-radius: 5px; + padding: 10px 20px; + cursor: pointer; + position: absolute; + top: 20px; + right: 20px; +} + +.dark-mode-button i { + font-size: 1.2rem; + margin-right: 8px; } + +.dark-mode .ph-sun, +:not(.dark-mode) .ph-moon { + display: none; +} + +.dark-mode .ph-moon, +:not(.dark-mode) .ph-sun { + display: inline; +} \ No newline at end of file diff --git a/assets/css/var.css b/assets/css/var.css index efff99fb..fbd801e5 100644 --- a/assets/css/var.css +++ b/assets/css/var.css @@ -8,4 +8,16 @@ --gray-500: #9698a0; --gray-300: #cccccc; --gray-100: #f2f2f2; +} + +/* Light Mode */ +:root { + --background-color: #ffffff; + --text-color: #333333; +} + +/* Dark Mode */ +.dark-mode { + --background-color: #333333; + --text-color: #ffffff; } \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index f71da449..874abec8 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -46,5 +46,22 @@ async function getCardsFromJson() { } } +const darkModeToggle = document.getElementById('dark-mode-toggle'); +const body = document.body; +const moonIcon = document.querySelector('.ph-moon'); +const sunIcon = document.querySelector('.ph-sun'); + +darkModeToggle.addEventListener('click', () => { + body.classList.toggle('dark-mode'); + + if (body.classList.contains('dark-mode')) { + moonIcon.style.display = 'none'; + sunIcon.style.display = 'inline'; + } else { + sunIcon.style.display = 'none'; + moonIcon.style.display = 'inline'; + } +}); + searchInput.addEventListener("input", searchCards); getCardsFromJson(); diff --git a/index.html b/index.html index a4ddf2a3..371b2ffd 100644 --- a/index.html +++ b/index.html @@ -1,59 +1,54 @@ - - - - - - - - - - - - - - - Diciotech - - -
-

- Diciotech -

-

- Um dicionário tech para pessoas que querem aprender mais sobre termos - técnicos dentro da tecnologia 📖 -

-
-
-
- - - - -
-
-
- - + + + + + + + + + + + + + + + + + + + + Diciotech + + + +
+

+ Diciotech +

+

+ Um dicionário tech para pessoas que querem aprender mais sobre termos + técnicos dentro da tecnologia 📖 +

+ + +
+
+
+ + + + +
+
+
+ + + \ No newline at end of file From c6bf548828b5f75c1f26c855f017882fa1fda5f1 Mon Sep 17 00:00:00 2001 From: thiagofqs <39809188+thiagofqs@users.noreply.github.com> Date: Mon, 25 Sep 2023 21:51:37 -0300 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20converte=20o=20c=C3=B3digo=20CS?= =?UTF-8?q?S=20atual=20e=20do=20PR=2025=20para=20SASS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/style.css | 38 ++++------ assets/css/style.css.map | 1 + assets/css/var.css | 11 --- assets/sass/_variables.sass | 9 +++ assets/sass/style.sass | 136 ++++++++++++++++++++++++++++++++++++ 5 files changed, 161 insertions(+), 34 deletions(-) create mode 100644 assets/css/style.css.map delete mode 100644 assets/css/var.css create mode 100644 assets/sass/_variables.sass create mode 100644 assets/sass/style.sass diff --git a/assets/css/style.css b/assets/css/style.css index aff44632..91d97322 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,6 +1,4 @@ -@import url(var.css); @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); - * { margin: 0; padding: 0; @@ -8,7 +6,7 @@ } body { - background-color: var(--white); + background-color: #ffffff; font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; padding: 40px 24px; @@ -20,11 +18,11 @@ body { ::-webkit-scrollbar-thumb { border-radius: 8px; - background: var(--purple-500); + background: #6e6197; } ::-webkit-scrollbar-track { - background: var(--gray-100); + background: #f2f2f2; } html { @@ -42,17 +40,15 @@ input { flex-direction: column; gap: 24px; } - .header__title img { display: block; max-width: 100%; height: auto; } - .header__subtitle { font-size: 2rem; text-align: center; - color: var(--black); + color: #232226; font-weight: 400; } @@ -67,7 +63,7 @@ input { } .searchbar { - background-color: var(--gray-100); + background-color: #f2f2f2; display: flex; align-items: center; justify-content: center; @@ -91,7 +87,7 @@ input { .searchbar__icon { width: 24px; height: 24px; - fill: var(--gray-500); + fill: #9698a0; } .searchbar__input { @@ -100,10 +96,9 @@ input { background-color: transparent; padding: 4px; flex: 1; - color: var(--black); + color: #232226; font-size: 2rem; } - .searchbar__input:focus { outline: none; } @@ -116,34 +111,30 @@ input { overflow: auto; padding: 24px; border-radius: 8px; - background-color: var(--white); + background-color: #ffffff; box-shadow: rgba(35, 35, 38, 0.2) 0px 0px 16px; display: list-item; list-style-type: none; } - .card__title { - color: var(--purple-500); + color: #6e6197; margin-bottom: 16px; font-size: 2.4rem; } - .card__description { - color: var(--black); + color: #232226; line-height: 160%; font-size: 1.8rem; } - .card__content { margin-top: 16px; } - .card__code { padding: 8px; border-radius: 4px; - color: var(--white); - background-color: var(--purple-500); - font-size: 1.4rem; /* pra caber no card e não quebrar linha */ + color: #ffffff; + background-color: #6e6197; + font-size: 1.4rem; } @media screen and (max-width: 1200px) { @@ -151,7 +142,6 @@ input { width: 40%; } } - @media screen and (max-width: 768px) { .card { width: 100%; @@ -159,3 +149,5 @@ input { min-height: 250px; } } + +/*# sourceMappingURL=style.css.map */ diff --git a/assets/css/style.css.map b/assets/css/style.css.map new file mode 100644 index 00000000..8dacf8c8 --- /dev/null +++ b/assets/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/style.sass","../sass/_variables.sass"],"names":[],"mappings":"AAAQ;AAGR;EACI;EACA;EACA;;;AAEJ;EACI,kBCLI;EDMJ;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA,YCdS;;;ADgBb;EACI,YCdO;;;ADgBX;EACI;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA,OC1CA;ED2CA;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI,kBClDO;EDmDP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA,MC1EO;;;AD4EX;EACI;EACA;EACA;EACA;EACA;EACA,OCrFI;EDsFJ;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBClGI;EDmGJ;EACA;EACA;;AAEA;EACI,OCvGK;EDwGL;EACA;;AAEJ;EACI,OC9GA;ED+GA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA,OCvHA;EDwHA,kBCvHK;EDwHL;;;AAER;EACI;IACI;;;AAER;EACI;IACI;IACA;IACA","file":"style.css"} \ No newline at end of file diff --git a/assets/css/var.css b/assets/css/var.css deleted file mode 100644 index bd77c9f5..00000000 --- a/assets/css/var.css +++ /dev/null @@ -1,11 +0,0 @@ -:root { - --light-green: #5e9188; - --dark-green: #3e5954; - --dark-blue: #253342; - --black: #232226; - --white: #ffffff; - --purple-500: #6e6197; - --gray-500: #9698a0; - --gray-300: #cccccc; - --gray-100: #f2f2f2; -} diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass new file mode 100644 index 00000000..041b079f --- /dev/null +++ b/assets/sass/_variables.sass @@ -0,0 +1,9 @@ +$light-green: #5e9188 +$dark-green: #3e5954 +$dark-blue: #253342 +$black: #232226 +$white: #ffffff +$purple-500: #6e6197 +$gray-500: #9698a0 +$gray-300: #cccccc +$gray-100: #f2f2f2 diff --git a/assets/sass/style.sass b/assets/sass/style.sass new file mode 100644 index 00000000..80bc4f20 --- /dev/null +++ b/assets/sass/style.sass @@ -0,0 +1,136 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap") +@import "variables" + +* + margin: 0 + padding: 0 + box-sizing: border-box + +body + background-color: $white + font-family: "Roboto", sans-serif + -webkit-font-smoothing: antialiased + padding: 40px 24px + +::-webkit-scrollbar + width: 8px + +::-webkit-scrollbar-thumb + border-radius: 8px + background: $purple-500 + +::-webkit-scrollbar-track + background: $gray-100 + +html + font-size: 62.5% + +input + font-family: "Roboto", sans-serif + +.header + display: flex + justify-content: center + align-items: center + flex-direction: column + gap: 24px + + &__title img + display: block + max-width: 100% + height: auto + + &__subtitle + font-size: 2rem + text-align: center + color: $black + font-weight: 400 + +.main + display: flex + justify-content: center + align-items: center + flex-direction: column + flex-wrap: wrap + max-width: 1440px + margin: 0 auto + +.searchbar + background-color: $gray-100 + display: flex + align-items: center + justify-content: center + gap: 16px + border: none + border-radius: 4px + padding: 16px + margin: 30px 0 + width: 100% + +.cards + display: flex + justify-content: center + align-items: center + flex-wrap: wrap + gap: 32px + margin: 48px 0 + +.searchbar__icon + width: 24px + height: 24px + fill: $gray-500 + +.searchbar__input + border: none + border-radius: 4px + background-color: transparent + padding: 4px + flex: 1 + color: $black + font-size: 2rem + + &:focus + outline: none + +.card + width: 20% + flex-grow: 1 + max-height: 300px + min-height: 300px + overflow: auto + padding: 24px + border-radius: 8px + background-color: $white + box-shadow: rgba(35, 35, 38, 0.2) 0px 0px 16px + display: list-item + list-style-type: none + + &__title + color: $purple-500 + margin-bottom: 16px + font-size: 2.4rem + + &__description + color: $black + line-height: 160% + font-size: 1.8rem + + &__content + margin-top: 16px + + &__code + padding: 8px + border-radius: 4px + color: $white + background-color: $purple-500 + font-size: 1.4rem // para caber no card e não quebrar linha + +@media screen and (max-width: 1200px) + .card + width: 40% + +@media screen and (max-width: 768px) + .card + width: 100% + max-height: 250px + min-height: 250px