Merge pull request #3

Styles About Section

.gitignore

@@ -29,14 +29,14 @@
 # When using Gradle or Maven with auto-import, you should exclude module files,
 # since they will be recreated, and may cause churn.  Uncomment if using
 # auto-import.
-# .idea/artifacts
+ .idea/artifacts
-# .idea/compiler.xml
+ .idea/compiler.xml
-# .idea/jarRepositories.xml
+ .idea/jarRepositories.xml
-# .idea/modules.xml
+ .idea/modules.xml
-# .idea/*.iml
+ .idea/*.iml
-# .idea/modules
+ .idea/modules
-# *.iml
+ *.iml
-# *.ipr
+ *.ipr
 
 # CMake
 cmake-build-*/

dist/js/main.js

@@ -1 +1 @@
-const scrollLimit=150;window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let e="";document.querySelectorAll("section").forEach((t=>{const o=t.offsetTop;window.pageYOffset>=o-60&&(e=t.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((t=>{t.classList.remove("active"),t.href.includes(e)&&""!==e?t.classList.add("active"):""===e&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{var e=["full stack developer","web designer","student","gamer","drummer"];function t(e,o,n){o<e.length?(document.querySelector("header div h1").innerHTML=e.substring(0,o+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){t(e,o+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}!function o(n){void 0===e[n]?setTimeout((function(){o(0)}),1e3):n<e[n].length&&t(e[n],0,(function(){setTimeout(o,1500,n+1)}))}(0)}));
+const scrollLimit=150;window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let e="";document.querySelectorAll("section").forEach((t=>{const o=t.offsetTop;window.pageYOffset>=o-60&&(e=t.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((t=>{t.classList.remove("active"),t.href.includes(e)&&""!==e?t.classList.add("active"):""===e&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{var e=["full stack developer","web designer","student","gamer","drummer"];function t(e,o,n){o<e.length?(document.querySelector("header div h1").innerHTML=e.substring(0,o+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){t(e,o+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}!function o(n){void 0===e[n]?setTimeout((function(){o(0)}),1500):n<e[n].length&&t(e[n],0,(function(){setTimeout(o,1500,n+1)}))}(0)}));

src/css/main.css

@@ -1,10 +1,10 @@
-/******** Imports ********/
+/******** Imports *******/
 @import "/node_modules/normalize.css/normalize.css";
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
 
 /****** Root Style ******/
 :root {
-    /* colours */
+    /* Colours */
     --primaryDefault: hsla(79, 62%, 51%, 1);
     --primaryHover: hsla(79, 75%, 41%, 1);
     --errorDefault: hsla(0, 62%, 51%, 1);
@@ -13,7 +13,7 @@
     --mutedBlack: hsla(0, 0%, 0%, 0.25);
     --navBack: hsl(0, 0%, 30%);
 
-    /* font sizes */
+    /* Font Sizes */
     --titleFS: 2.25rem;
     --generalFS: 1.125rem;
     --headingFS: 1.5rem;
@@ -29,7 +29,7 @@ body {
     font-family: Noto Sans KR, sans-serif;
     font-style: normal;
     font-weight: 500;
-    font-size: 1.125rem;
+    font-size: var(--generalFS);
     line-height: 1.625rem;
 }
 
@@ -41,7 +41,7 @@ h1, nav {
     font-family: Share Tech Mono, monospace;
     font-style: normal;
     font-weight: normal;
-    font-size: 2.25rem;
+    font-size: var(--titleFS);
     line-height: 2.5625rem;
     text-transform: lowercase;
 }
@@ -50,7 +50,7 @@ h2 {
     font-family: Noto Sans KR, sans-serif;
     font-style: normal;
     font-weight: 500;
-    font-size: 1.5rem;
+    font-size: var(--headingFS);
     line-height: 2.1875rem;
 }
 
@@ -201,10 +201,21 @@ div h1 span {
     }
 }
 
+/***** About Styles *****/
+
+section#about {
+    padding: 0 5em;
+}
+
+section#about div {
+    padding: 0.1em 5em;
+}
+
 /**** Media Queries *****/
 
 @media screen and (max-width: 75em) {
-    /*** Navigation styles **/
+
+    /*** Navigation Styles **/
 
     nav {
         display: block;
@@ -281,7 +292,7 @@ div h1 span {
         transition: .25s ease-in;
     }
 
-    /** burger not clicked **/
+    /** Burger Not Clicked **/
 
     nav  #nav-check:not(:checked) ~ ul{
         height: auto;
@@ -316,7 +327,7 @@ div h1 span {
         background-color: rgba(-1, 0, 0, 0.3);
     }
 
-    /**** burger clicked ****/
+    /**** Burger Clicked ****/
 
     nav #nav-check:checked ~ ul{
         max-height: 50vh;
@@ -366,12 +377,33 @@ div h1 span {
         -o-transform: rotate(-45deg);
         transform: rotate(-45deg);
     }
+
+    /***** About Styles *****/
+
+    section#about {
+        padding: 0 1em;
+    }
+
+    section#about div {
+        padding: 0.1em 2.5em;
+    }
 }
 
 @media screen and (max-width: 31em) {
-    /** not to squish name **/
+    /*** Navigation Styles **/
 
     header div h1 {
         width: min-content;
     }
+
+    /***** About Styles *****/
+
+    section#about {
+        padding: 0 0.5em;
+    }
+
+    section#about div {
+        padding: 0.1em 1em;
+    }
+
 }

src/index.html

@@ -41,13 +41,17 @@
     <main>
         <section id="about">
             <h1>about</h1>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus molestias
+            <div>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus
+                molestias
                 officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima
                 nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex
                 exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem
                 beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi
                 nostrum odio sed sunt tempora totam voluptatem voluptatibus.</p>
-            <a href="other/rohitpaicv.pdf" class="btn btnPrimary boxShadowIn boxShadowOut" download="">Download CV</a></section>
+                <a href="other/rohitpaicv.pdf" class="btn btnOutline boxShadowIn boxShadowOut" download>Download CV</a>
+            </div>
+        </section>
         <section id="curiculumvitae">
             <h1>curriculum vitae</h1>
             <div class="cvGrid">