Visual changes

guicheffer · Nov 6, 2023 · bdd3b49 · bdd3b49
1 parent 42d6199
commit bdd3b49
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 71 deletions.
diff --git a/.me/src/assets/sass/_global.scss b/.me/src/assets/sass/_global.scss
@@ -2,14 +2,12 @@
 
 body {
   @include body-font;
-  padding-top: 54px;
   color: $gray-500;
   background-color: $black;
 }
-@media (min-width: 992px) {
-  body {
-    padding-top: 0;
-    padding-left: $sidebar-base-width;
+@media (max-width: 768px) {
+  .hidden-on-mobile {
+    display: none;
   }
 }
 

diff --git a/.me/src/assets/sass/_resume-item.scss b/.me/src/assets/sass/_resume-item.scss
@@ -21,6 +21,7 @@ section.resume-section {
 }
 @media (min-width: 992px) {
   section.resume-section {
+    margin-left: 240px;
     padding-top: 3rem !important;
     padding-bottom: 3rem !important;
   }

diff --git a/.me/src/assets/sass/resume.scss b/.me/src/assets/sass/resume.scss
@@ -8,4 +8,4 @@
 @import 'bootstrap-overrides.scss';
 @import './fontawesome/css/all.min.css';
 @import url('https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700');
-@import url('https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i');
+@import url('https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i');
diff --git a/.me/src/assets/sass/tolu.scss b/.me/src/assets/sass/tolu.scss
@@ -1,60 +1,57 @@
 @import 'variables.scss';
 
-body {
-  padding :0;
-}
-
 header {
   text-align: center;
 }
 
-img {
-  width: 100vw;
-}
+.luiza-container {
+  .container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 16px;
+    gap: 4px;
+  }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  margin-top: 16px;
-  gap: 4px;
-}
+  img {
+    width: 100vw;
+  }
 
-.announcement-text {
-  font-size: 16px;
-}
+  .announcement-text {
+    font-size: 16px;
+  }
 
-.gift-button {
-  background-color: #FFF;
-  color: #000;
-  padding: 10px 20px;
-  border: 1px solid #333;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
+  .gift-button {
+    background-color: #FFF;
+    color: #000;
+    padding: 10px 20px;
+    border: 1px solid #333;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-bottom: 16px;
+  }
 
-.gift-button:hover {
-  background-color: #000;
-  border-color: #FFF;
-  color: #FFF;
-}
+  .gift-button:hover {
+    background-color: #000;
+    border-color: #FFF;
+    color: #FFF;
+  }
 
-@media (min-width: 999px) {
-  .guicheffer-me {
+  @media (min-width: 999px) {
     display: flex;
     position: absolute;
     top: 30%;
-  }
 
-  .picture {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    justify-content: space-between;
-  }
-
-  img {
-    border-radius: 16px;
-    width: 50vw;
+    .picture {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      justify-content: space-between;
+    }
+
+    img {
+      border-radius: 16px;
+      width: 50vw;
+    }
   }
 }
diff --git a/.me/src/pages/surpresa-pra-luiza.js b/.me/src/pages/surpresa-pra-luiza.js
@@ -17,35 +17,35 @@ const TOLU = () => {
 
   return (
     <Layout>
-      <header>
-        <picture className="picture">
-          <img
-            className="picture-image"
-            src={meCelebing}
-            alt="Me, celebrating nothing"
-          />
-        </picture>
-      </header>
+      <main className="luiza-container">
+        <header>
+          <picture className="picture">
+            <img
+              className="picture-image"
+              src={meCelebing}
+              alt="Me, celebrating nothing"
+            />
+          </picture>
+        </header>
 
-      <section>
-        <div class="container">
-            <p class="announcement-text">Olá pessoal! 😊</p>
+        <section>
+          <div class="container">
+              <p class="announcement-text">Olá pessoal! 😊</p>
 
-            <p class="announcement-text">Estou lançando uma vaquinha bem especial para concretizar um desejo antigo da <strong>Luiza</strong>. Ela é uma mulher exigente, no melhor sentido possível, e tem sonhado com uma bolsa da <i>Yves Saint Laurent</i> há um tempinho. 🌟💼</p>
+              <p class="announcement-text">Estou lançando uma vaquinha bem especial para concretizar um desejo antigo da <strong>Luiza</strong>. Ela é uma mulher exigente, no melhor sentido possível, e tem sonhado com uma bolsa da <i>Yves Saint Laurent</i> há um tempinho. 🌟💼</p>
 
-            <p class="announcement-text">Toda contribuição, não importa o valor, fará uma grande diferença e fará os olhos dela brilharem de felicidade. 💖</p>
+              <p class="announcement-text hidden-on-mobile">Toda contribuição, não importa o valor, fará uma grande diferença e fará os olhos dela brilharem de felicidade. 💖</p>
 
-            <p class="announcement-text">Se você puder nos ajudar nessa missão, será incrível! Vamos unir forças e tornar o dia dela ainda mais especial, no dia <strong>25.11</strong>. 🙏✨</p>
+              <p class="announcement-text">Se você puder nos ajudar nessa missão, será incrível! Vamos unir forças e tornar o dia dela ainda mais especial, no dia <strong>25.11</strong>. 🙏✨</p>
 
-            <p class="announcement-text">Agradecemos de coração pela sua consideração e apoio! 😍</p>
+              <p class="announcement-text">Agradecemos de coração pela sua consideração e apoio! 😍</p>
 
-            <p class="announcement-text">Com carinho,
-            João
-            </p>
+              <p class="announcement-text">Com carinho, João.</p>
 
-            <a href="https://www.paypal.com/pools/c/8Z6WIbJsFq" class="gift-button">Dar Presente</a>
-        </div>
-      </section>
+              <a href="https://www.paypal.com/pools/c/8Z6WIbJsFq" class="gift-button">Surpreenda Luiza com um presente agora!</a>
+          </div>
+        </section>
+      </main>
     </Layout>
   );
 };