Improvements for smaller viewports

wlsf82 · Jun 22, 2024 · 804f3b8 · 804f3b8
1 parent 55e9c88
commit 804f3b8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/index.html b/src/index.html
@@ -9,8 +9,8 @@
   </head>
   <body>
     <header>
-      <h1>Checklist de habilidades em Cypress</h1>
-      <p>Por favor, marque todas as habilidades com as quais você tem experiência 📚.</p>
+      <h1>Checklist de <span>habilidades em</span> Cypress</h1>
+      <p>Marque os itens que você tem experiência ☑️.</p>
       <button id="themeToggle">Mudar tema</button>
     </header>
     <main>

diff --git a/src/style.css b/src/style.css
@@ -38,7 +38,7 @@ header {
   z-index: 1000; /* Ensure header is above other content */
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
   background-color: var(--container-bg-color); /* Use variable for background to maintain theme consistency */
-  padding: 20px 0; /* Add vertical padding for alignment */
+  padding: 20px 0 0 0; /* Add vertical padding for alignment */
   text-align: center;
 }
 
@@ -131,7 +131,7 @@ footer p {
 /* Responsive adjustments */
 @media (max-width: 768px) {
   :root {
-    --header-height: 100px;
+    --header-height: 90px;
   }
 
   body {
@@ -142,6 +142,10 @@ footer p {
     padding: 15px 10px; /* Smaller padding for mobile */
   }
 
+  h1 span {
+    display: none;
+  }
+
   li {
     padding: 8px;
   }