style: update css and add h2

sameemul-haque · Apr 14, 2024 · 9847200 · 9847200
1 parent 2b02799
commit 9847200
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 47 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,11 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    
+
     <title>GitArt - GitHub Contribution Graph Customizer</title>
     <meta
       name="description"
-      content="Enhance your GitHub contribution graph with GitArt - Personalize your profile with names, messages, symbols, logos, and more, shaping your GitHub presence uniquely."
+      content="Enhance your GitHub contribution graph with GitArt - Personalize your profile with names, messages, symbols, and logos, shaping your GitHub presence uniquely."
     />
 
     <meta name="robots" content="index,follow" />
@@ -20,7 +20,7 @@
     />
     <meta
       property="og:description"
-      content="Enhance your GitHub contribution graph with GitArt - Personalize your profile with names, messages, symbols, logos, and more, shaping your GitHub presence uniquely."
+      content="Enhance your GitHub contribution graph with GitArt - Personalize your profile with names, messages, symbols, and logos, shaping your GitHub presence uniquely."
     />
     <meta property="og:type" content="website" />
     <meta
@@ -34,7 +34,10 @@
       content="GitArt - GitHub Contribution Graph Customizer"
     />
     <meta property="og:image:type" content="image/png" />
-    <meta property="og:url" content="https://sameemul-haque.github.io/GitArt/" />
+    <meta
+      property="og:url"
+      content="https://sameemul-haque.github.io/GitArt/"
+    />
     <meta
       property="og:site_name"
       content="GitArt - GitHub Contribution Graph Customizer"
@@ -63,55 +66,17 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <h1
-      style="
-        color: #39d353;
-        display: flex;
-        justify-content: center;
-        font-size: 3rem;
-        align-items: center;
-        margin-top: 2rem;
-        font-family: 'Pixelify Sans', sans-serif;
-        font-optical-sizing: auto;
-        font-size: 5rem;
-      "
-    >
-      <img
-        style="padding: 1rem; font-size: 1rem"
-        src="assets/logo.svg"
-        alt="Logo"
-        width="100"
-        height="100"
-      />GitArt
-    </h1>
-    <p
-      style="
-        font-size: 0.9rem;
-        max-width: 500px;
-        margin-left: auto;
-        margin-right: auto;
-      "
-    >
+    <h1><img class="logo-gitart" src="assets/logo.svg" alt="Logo" />GitArt</h1>
+    <h2>GitHub Contribution Graph Customizer</h2>
+    <p id="description-gitart">
       <b>GitArt</b> is a tool that allows users to manipulate their GitHub
       contribution graph by generating Git commit commands. With this tool,
       users can customize their contribution graph to display their name,
       messages, symbols, logos, or any other desired patterns.
     </p>
-    <div
-      style="
-        display: flex;
-        align-items: center;
-        justify-content: end;
-        margin-right: 5vw;
-      "
-    ></div>
-    <div style="display: flex; justify-content: center">
-      <div
-        class="graph"
-        style="flex-wrap: wrap; flex-direction: column; overflow-x: auto"
-      >
+    <div class="graph-container">
+      <div class="graph">
         <select size="3" id="year-select"></select>
-
         <ul class="months">
           <li>Jan</li>
           <li>Feb</li>

diff --git a/public/style.css b/public/style.css
@@ -11,6 +11,40 @@ body {
   font-family: "Poppins", sans-serif;
 }
 
+h1 {
+  color: #39d353;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2rem;
+  font-family: "Pixelify Sans", sans-serif;
+  font-optical-sizing: auto;
+  font-size: 5rem;
+}
+
+h2 {
+  color: #39d353;
+  font-size: 1rem;
+  text-align: center;
+  margin-top: -60px;
+  margin-bottom: 1.5rem;
+}
+
+.logo-gitart {
+  padding: 1rem;
+  font-size: 1rem;
+  width: 100px;
+  height: 100px;
+}
+
+#description-gitart {
+  font-size: 0.9rem;
+  text-align: center;
+  max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .months {
   grid-area: months;
 }
@@ -21,13 +55,21 @@ body {
   grid-area: squares;
 }
 
+.graph-container {
+  display: flex;
+  justify-content: center;
+}
+
 .graph {
   display: inline-grid;
   grid-template-areas:
     "empty months"
     "days squares";
   grid-template-columns: auto 1fr;
   grid-gap: 10px;
+  flex-wrap: wrap;
+  flex-direction: column;
+  overflow-x: auto;
 }
 
 .months {
@@ -110,3 +152,22 @@ li {
   background-color: #39d353;
   width: 100%;
 }
+
+@media screen and (max-width: 600px) {
+  h1 {
+    font-size: 3rem;
+  }
+  h2 {
+    font-size: 0.75rem;
+    margin-top: -40px;
+  }
+  .logo-gitart {
+    width: 50px;
+    height: 50px;
+  }
+  #description-gitart {
+    font-size: 0.8rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+}