Update social buttons and font sizes in index.html and output.css

mabushelbaia · Apr 27, 2024 · ce4f710 · ce4f710
1 parent 59b94d6
commit ce4f710
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -121,8 +121,8 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white line-clamp-2 lg:line
     </div>
     <hr class="my-8 border-gray-500 dark:border-gray-500" />
 
-    <h3 class="mb-2 text-4xl font-bold tracking-tight dark:text-white">
-      💻 Featured Projects
+    <h3 class="mb-2 text-3xl font-bold tracking-tight dark:text-white">
+      🛠️ Featured Projects
     </h3>
 
     <div class="flex flex-col gap-4">
@@ -326,13 +326,13 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-800 dark:text-gray-2
       </div>
     </div>
     <hr class="my-8 border-gray-500 dark:border-gray-500" />
-    <h1 class="mb-2 text-4xl font-bold tracking-tight dark:text-white">
-      ⚔️ Skills
+    <h1 class="mb-2 text-3xl font-bold tracking-tight dark:text-white">
+      💻 Languages   and Tools
     </h1>
     <div class="grid md:grid-cols-3 grid-cols-2 gap-3">
       <div class="social-button w-full h-40 flex items-center justify-center flex-col gap-4">
         <i class="fab fa-python fa-4x "></i>
-        <h3 class="text-xl font-bold">Python</h3>
+        <h3 class="text-xl text-center font-bold">Python</h3>
       </div>
       <div class="social-button w-full h-40 flex items-center justify-center flex-col gap-4">
 
@@ -345,7 +345,7 @@ <h3 class="text-xl font-bold">Python</h3>
             </path>
           </g>
         </svg>
-        <h3 class="text-xl font-bold">Django</h3>
+        <h3 class="text-xl text-center font-bold">Django</h3>
       </div>
 
       <div class="social-button w-full h-40 flex items-center justify-center flex-col gap-4">
@@ -359,12 +359,12 @@ <h3 class="text-xl font-bold">Django</h3>
             </path>
           </g>
         </svg>
-        <h3 class="text-xl font-bold">Tailwind CSS</h3>
+        <h3 class="text-xl text-center font-bold">Tailwind CSS</h3>
       </div>
 
       <div class="social-button w-full flex items-center justify-center flex-col gap-4">
         <i class="fab fa-html5 fa-4x"></i>
-        <h3 class="text-xl font-bold">JavaScript</h3>
+        <h3 class="text-xl text-center font-bold">JavaScript</h3>
       </div>
       <div class="social-button w-full h-40 flex items-center justify-center flex-col gap-4">
         <svg fill="currentColor" class="h-16 w-16" viewBox="0 0 32 32" id="Camada_1" version="1.1" xml:space="preserve"
@@ -377,15 +377,15 @@ <h3 class="text-xl font-bold">JavaScript</h3>
             </path>
           </g>
         </svg>
-        <h3 class="text-xl font-bold">Visual Studio</h3>
+        <h3 class="text-xl text-center font-bold ">Visual Studio</h3>
       </div>
       <div class="social-button w-full h-40 flex items-center justify-center flex-col gap-4">
         <i class="fab fa-git-alt fa-4x"></i>
-        <h3 class="text-xl font-bold">Git</h3>
+        <h3 class="text-xl text-center font-bold">Git</h3>
       </div>
       <div class="social-button w-full h-40 flex items-center justify-center flex-col gap-4">
         <i class="fab fa-ubuntu fa-4x"></i>
-        <h3 class="text-xl font-bold">Linux</h3>
+        <h3 class="text-xl text-center font-bold">Linux</h3>
       </div>
       <div class="social-button w-full h-40 flex items-center justify-center flex-col gap-4">
         <svg fill="currentColor" class="h-16 w-16" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -398,7 +398,7 @@ <h3 class="text-xl font-bold">Linux</h3>
             </path>
           </g>
         </svg>
-        <h3 class="text-xl font-bold">Arduino</h3>
+        <h3 class="text-xl text-center font-bold">Arduino</h3>
       </div>
       <div class="social-button w-full h-40 flex items-center justify-center flex-col gap-4 col-span-2 md:col-span-1">
         <svg fill="currentColor" class="h-16 w-16" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg">
@@ -411,7 +411,7 @@ <h3 class="text-xl font-bold">Arduino</h3>
             </path>
           </g>
         </svg>
-        <h3 class="text-xl font-bold">LaTeX</h3>
+        <h3 class="text-xl text-center font-bold">LaTeX</h3>
       </div>
     </div>
     <hr class="my-8 border-gray-500 dark:border-gray-500" />

diff --git a/static/css/output.css b/static/css/output.css
@@ -644,6 +644,13 @@ video {
   margin-top: auto;
 }
 
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
 .line-clamp-3 {
   overflow: hidden;
   display: -webkit-box;
@@ -841,6 +848,26 @@ video {
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
 
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.border-l-blue-200 {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(191 219 254 / var(--tw-border-opacity));
+}
+
+.border-l-blue-400 {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(96 165 250 / var(--tw-border-opacity));
+}
+
+.border-l-blue-800 {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(30 64 175 / var(--tw-border-opacity));
+}
+
 .bg-green-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
@@ -893,6 +920,10 @@ video {
   padding-bottom: 0.25rem;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .align-middle {
   vertical-align: middle;
 }
@@ -902,9 +933,9 @@ video {
   line-height: 2rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
 .text-lg {
@@ -917,6 +948,11 @@ video {
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1188,4 +1224,38 @@ video {
   .md\:flex-row {
     flex-direction: row;
   }
+
+  .md\:border-blue-500 {
+    --tw-border-opacity: 1;
+    border-color: rgb(59 130 246 / var(--tw-border-opacity));
+  }
+
+  .md\:border-blue-200 {
+    --tw-border-opacity: 1;
+    border-color: rgb(191 219 254 / var(--tw-border-opacity));
+  }
+
+  .md\:border-blue-800 {
+    --tw-border-opacity: 1;
+    border-color: rgb(30 64 175 / var(--tw-border-opacity));
+  }
+
+  .md\:border-blue-300 {
+    --tw-border-opacity: 1;
+    border-color: rgb(147 197 253 / var(--tw-border-opacity));
+  }
+
+  .md\:border-blue-400 {
+    --tw-border-opacity: 1;
+    border-color: rgb(96 165 250 / var(--tw-border-opacity));
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:line-clamp-none {
+    overflow: visible;
+    display: block;
+    -webkit-box-orient: horizontal;
+    -webkit-line-clamp: none;
+  }
 }