improved the responsiveness

Rephili · Rephili · commit 75b17e26fc34 · 2021-10-03T18:27:03.000+02:00
diff --git a/code/index.html b/code/index.html
@@ -9,20 +9,29 @@
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
+    <!-- The hero image and user info -->
+
     <div class="heroimage">
+      <h1>GitHub Tracker</h1>
+      <div id="userProfile"></div>
+    </div>
+    <hr />
+
+    <!-- The projects/repositories -->
+
+    <div class="logowrapper">
       <img
         class="githublogo"
-        src="https://cdn-icons-png.flaticon.com/512/733/733609.png"
+        src="https://cdn-icons-png.flaticon.com/512/2111/2111612.png"
         alt="githublogo"
       />
-      <h1>GitHub Tracker</h1>
-      <div id="userProfile"></div>
+      <h2>Projects:</h2>
     </div>
 
-    <h2>Projects:</h2>
     <main id="projects" class="projectscontainer"></main>
 
-    <!-- This will be used to draw the chart 👇 -->
+    <!-- The chart -->
+
     <div class="chart">
       <canvas id="chart"></canvas>
     </div>
diff --git a/code/style.css b/code/style.css
@@ -28,15 +28,32 @@ h1 {
   object-fit: cover;
 }
 
+hr {
+  width: 200px;
+  height: 2px;
+  background-color: #3d5a80;
+  border-radius: 5px;
+  line-height: 2px;
+  opacity: 0.85;
+}
+
+.logowrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 h2 {
-  text-align: center;
+  display: inline;
+  margin-left: 5px;
 }
 
 .projectscontainer {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
+  width: 100%;
 }
 
 .projectinfo {
@@ -45,7 +62,7 @@ h2 {
   flex-direction: column;
   align-items: center;
   background-color: #88b7d3;
-  width: 350px;
+  width: 90%;
   height: 200px;
   margin-bottom: 20px;
   box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
@@ -85,6 +102,7 @@ h2 {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-evenly;
+    margin-top: 20px;
   }
 
   .projectinfo:nth-last-child(-n + 2) {
@@ -112,7 +130,7 @@ h2 {
   .heroimage {
     background: linear-gradient(rgba(44, 40, 27, 0.39), rgba(41, 37, 25, 0.76)),
       url("https://images.unsplash.com/photo-1607970669494-309137683be5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80");
-    height: 60vh;
+    height: 65vh;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -125,9 +143,9 @@ h2 {
     text-align: start;
     display: inline;
     letter-spacing: 2px;
+    text-shadow: 1px 1px 1px #293241;
     position: absolute;
     margin-left: 20px;
-    text-shadow: 1px 1px 1px #293241;
   }
 
   .userinfo {
@@ -147,6 +165,6 @@ h2 {
   }
 
   .userinfo {
-    padding-top: 20px;
+    padding-top: 30px;
   }
 }
