mode switch

a00b30b8 · Luis Ribeiro · 6e691b57 · a00b30b8 · a00b30b8 · a00b30b8
Commit a00b30b8 authored Mar 17, 2023 by Luis Ribeiro
Show whitespace changes
Inline Side-by-side

Showing with 96 additions and 16 deletions

images/moon-svgrepo-com.svg
+5 -0

index.html
+2 -0

script.js
+8 -0

styles.css
+81 -16

No files found.
--- a/images/moon-svgrepo-com.svg
+++ b/images/moon-svgrepo-com.svg
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 12C20 7.11149 16.0007 3.13144 11 3C16.6829 8.75775 10.952 18.6176 3 17C4.65938 19.4319 7.77111 21 11 21C13.8836 21 16.3745 19.7215 18 17.7163" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,500;0,600;0,700;0,800;1,100;1,200;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css" />
+  <script defer src="script.js"></script>
  <title>Teste00--Coffee Shop</title>
 </head>
 <body>
@@ -17,6 +18,7 @@
        <li><a href="#menu">Menu</a></li>
        <li><a href="#sobre">Sobre</a></li>
        <li><a href="#contato">Contato</a></li>
+        <img class="header__img--moon" src="images/moon-svgrepo-com.svg" alt="Moon icon for switch mode" />
      </ul>
    </nav>
  </header>

--- a/script.js
+++ b/script.js
+// Switch mode (light-dark) 
+ let darkswitch = document.querySelector('.header__img--moon');
+ let body = document.querySelector('body');
+
+ darkswitch.onclick = function() {
+    body.classList.toggle('dark');
+ }
\ No newline at end of file
--- a/styles.css
+++ b/styles.css
-
 * {
  box-sizing: border-box;
  font-family: Poppins;
@@ -7,9 +6,11 @@

 :root {
  --corPrimeira: #f5deb3;
-  --corSegunda: #B88B4A;
-  --corTerceira: #214E34;
-  --corQuarta: #122B1D;
+  --corSegunda: #b88b4a;
+  --corTerceira: #214e34;
+  --corQuarta: #122b1d;
+  --corQuinta: #1D2022;
+  --corSexta: #FFECD1;
 }

 html,
@@ -18,10 +19,50 @@ body {
  padding: 0;
 }

+.dark {
+  background-color: var(--corQuinta);
+  color: var(--corSexta);
+}
+
+.dark header {
+  background-color: var(--corQuarta);
+}
+
+.dark main {
+  color: var(--corSexta);
+}
+
+.dark .section__title::after {
+  content: "";
+  background: var(--corSexta);
+  width: 120px;
+  height: 5px;
+  border-radius: 5px;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.dark .section__follow {
+  background-color: var(--corQuarta);
+}
+
+.dark .section__follow--background {
+  box-shadow: 0 0 0 100vmax var(--corQuarta);
+  clip-path: inset(0 -100vmax);
+}
+
+.dark .figures__img {
+  filter: invert(55%) sepia(91%) saturate(274%) hue-rotate(356deg) brightness(87%) contrast(86%);
+}
+
 header {
  color: var(--corPrimeira);
-  background-color: var(--corQuarta);
+  background-color: var(--corTerceira);
+  position: relative;
  padding: 10px 170px;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
 }

 .header__logo {
@@ -43,7 +84,7 @@ header {
  float: right;
 }

-.header__ul a{
+.header__ul a {
  color: var(--corPrimeira);
  text-decoration: none;
  transition: 0.4s;
@@ -60,7 +101,22 @@ header {
  color: var(--corSegunda);
 }

-.main__container{
+.header__img--moon {
+  width: 30px;
+  float: right;
+  margin-inline-start: 20px;
+  filter: invert(84%) sepia(8%) saturate(1561%) hue-rotate(338deg)
+  brightness(112%) contrast(92%);
+  transition: 0.4s;
+}
+
+.header__img--moon:hover {
+  cursor: pointer;
+  filter: invert(53%) sepia(7%) saturate(3064%) hue-rotate(356deg) brightness(108%) contrast(80%);
+  transition: 0.4s;
+}
+
+.main__container {
  color: var(--corSegunda);
  margin: 0 auto;
  padding: 0;
@@ -94,7 +150,7 @@ h1 {
 }

 .section__title::after {
-  content: '';
+  content: "";
  background: var(--corSegunda);
  width: 120px;
  height: 5px;
@@ -162,7 +218,6 @@ h1 {
  color: var(--corSegunda);
 }

-
 .section__follow {
  margin-top: 130px;
  background-color: var(--corTerceira);
@@ -248,7 +303,7 @@ h1 {

 .contact__background {
  width: 100%;
-  filter:brightness(50%);
+  filter: brightness(50%);
  object-fit: cover;
  height: 400px;
  border: none;
@@ -259,14 +314,14 @@ h1 {
  font-size: 1.4em;
  top: 30%;
  left: 44%;
-  transform: translate(-30%,-44%);
+  transform: translate(-30%, -44%);
  position: absolute;
 }

 .contact__button {
  top: 50%;
  left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
  position: absolute;
  border: 1px solid var(--corPrimeira);
  font-size: 1em;
@@ -279,7 +334,7 @@ h1 {
 .contact__button:hover {
  top: 50%;
  left: 50%;
-  transform: translate(-50%,-50%) scale(1.09);
+  transform: translate(-50%, -50%) scale(1.09);
  background-color: var(--corPrimeira);
  transition: 0.2s;
  border: 1px solid var(--corSegunda);
@@ -333,7 +388,7 @@ footer h3 {
  flex-direction: column;
  display: flex;
  align-content: flex-start;
-  justify-content:flex-start;
+  justify-content: flex-start;
 }

 .footer__col ul {
@@ -343,6 +398,16 @@ footer h3 {
  list-style-type: none;
 }

+.footer__col li {
+  transition: 0.3s;
+}
+
+.footer__col li:hover {
+  color: var(--corSegunda);
+  cursor: pointer;
+  transition: 0.3s;
+}
+
 .footer__row ul {
  display: inline-flex;
  margin-top: 80px;
@@ -363,8 +428,8 @@ footer h3 {
 }

 .footer__svg {
-  filter: invert(84%) sepia(8%) saturate(1561%) hue-rotate(338deg) brightness(112%)
-  contrast(92%);
+  filter: invert(84%) sepia(8%) saturate(1561%) hue-rotate(338deg)
+  brightness(112%) contrast(92%);
  padding: 2.8px;
  background-color: rgb(0, 0, 0);
  border: none;