Fixed responsiveness, added new SVG and aligned icons #13

boitatech · Jan 8, 2024 · 25365a6 · 25365a6
1 parent c56835f
commit 25365a6
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 29 deletions.
diff --git a/assets/img/matrix.svg b/assets/img/matrix.svg
diff --git a/index.html b/index.html
@@ -179,7 +179,9 @@ <h3>A Staff é a Boitatech?</h3>
                   href="https://discord.gg/boitatech"
                   target="_blank"
                   ><img src="assets/img/discord.svg" alt="logo discord" />
-                  <p>discord.gg/boitatech</p></a
+                  <p>
+                    <span class="social-link">discord.gg</span>/boitatech
+                  </p></a
                 >
               </li>
               <li>
@@ -188,7 +190,9 @@ <h3>A Staff é a Boitatech?</h3>
                   href="https://youtube.com/@BOITATECH"
                   target="_blank"
                   ><img src="assets/img/youtube.svg" alt="logo youtube" />
-                  <p>youtube.com/@BOITATECH</p></a
+                  <p>
+                    <span class="social-link">youtube.com</span>/@BOITATECH
+                  </p></a
                 >
               </li>
               <li>
@@ -197,7 +201,9 @@ <h3>A Staff é a Boitatech?</h3>
                   href="https://github.com/boitatech"
                   target="_blank"
                   ><img src="assets/img/github.svg" alt="logo github" />
-                  <p>github.com/boitatech</p></a
+                  <p>
+                    <span class="social-link">github.com</span>/boitatech
+                  </p></a
                 >
               </li>
             </ul>
@@ -209,7 +215,7 @@ <h3>A Staff é a Boitatech?</h3>
                   href="https://twitch.tv/BOITATECH"
                   target="_blank"
                   ><img src="assets/img/twitch.svg" alt="logo twitch" />
-                  <p>twitch.tv/boitatech</p></a
+                  <p><span class="social-link">twitch.tv</span>/boitatech</p></a
                 >
               </li>
               <li>
@@ -218,15 +224,19 @@ <h3>A Staff é a Boitatech?</h3>
                   href="https://twitter.com/boitatech"
                   target="_blank"
                   ><img src="assets/img/x.svg" alt="logo x" />
-                  <p>twitter.com/boitatech</p></a
+                  <p>
+                    <span class="social-link">twitter.com</span>/boitatech
+                  </p></a
                 >
               </li>
               <li>
                 <a
                   class="socials"
                   href="https://matrix.to/#/#boitatech:matrix.org"
                   ><img src="assets/img/matrix.svg" alt="logo matrix" />
-                  <p>#boitatech:matrix.org</p></a
+                  <p>
+                    #boitatech<span class="social-link">:matrix.org</span>
+                  </p></a
                 >
               </li>
             </ul>

diff --git a/style.css b/style.css
@@ -224,6 +224,11 @@ a {
   align-items: center;
 }
 
+.medias a {
+  display: flex;
+  align-items: center;
+}
+
 @media (max-width: 399px) {
   .content-container {
     height: auto;
@@ -300,7 +305,7 @@ a {
   }
 }
 
-@media (max-height: 900px) {
+@media (max-height: 950px) {
   footer {
     position: relative;
   }
@@ -312,9 +317,14 @@ a {
   }
 }
 
-/* 
-@media (max-height: 945px) {
-  body {
-    height: auto;
+@media (max-width: 1406px) and (max-height: 1190px) {
+  footer {
+    position: relative;
+  }
+}
+
+@media (max-width: 450px) {
+  .social-link {
+    display: none;
   }
-} */
+}