From 0ebcf0f67f637e7296e04d1b17fb82d1acfc3237 Mon Sep 17 00:00:00 2001
From: SowinskiBraeden <sowinskibraeden@gmail.com>
Date: Sat, 1 Feb 2025 15:35:02 -0800
Subject: [PATCH] update about me page styles

---
 README.md               |   2 +-
 about.html              | 139 ++++++++++++++++++++--------------------
 index.html              |   4 +-
 public/css/about.css    |  96 +++++++++++++--------------
 public/css/projects.css |  58 ++++++++---------
 public/css/style.css    |  70 ++++++++++----------
 6 files changed, 180 insertions(+), 189 deletions(-)

diff --git a/README.md b/README.md
index e6f507a..6265cae 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-<h1 align="center">Hey there!<img src="https://github.com/wervlad/wervlad/assets/24524555/766d336d-b87d-44ba-807c-c51de2bc6b4d" width="28px" alt="👋"></h1>
+<h1 align="center">Hey there!<img src="https://github.com/wervlad/wervlad/assets/24524555/766d336d-b87d-44ba-807c-c51de2bc6b4d" width="28pt" alt="👋"></h1>
 
 <p align="center">
     <br>
diff --git a/about.html b/about.html
index 9166abf..95d6c81 100644
--- a/about.html
+++ b/about.html
@@ -96,6 +96,7 @@
           <li><a href="https://www.python.org/" target="_blank">Python 3+</a></li>
           <li><a href="https://nodejs.org/en" target="_blank">Node.js</a></li>
           <li><a href="https://go.dev/" target="_blank">Go</a></li>
+          <li>Java</li>
           <li>C</li>
           <li>Markdown</li>
           <li>System Administration</li>
@@ -104,77 +105,77 @@
         <ul>
       </section>
     </div>
-    
-    <div class="right-content">
-      <section id="about">
-        <h3 class="title">About me</h3>
-        <p class="text">
-          Hello there,
-          I am Braeden Sowinski, you may also know me by my pseudonym McDazzzled. I am an avid software engineer, actively
-          pursuing a Diploma in Computer System Technologies at <abbr title="British Columbia Institute of Technology">BCIT</abbr>. I am adaptable and driven with a strong work ethic; 
-          possessing the ability to thrive in both a team-based or individualy motivated setting.
-        </p>
-        <p class="text">
-          I am eager to expand my knowledge in Software Engineering, IT, System Administration and related fields.
-          Approaching more than 5 years of continuous learning and programming, I have learned many valuable languages and 
-          frameworks such as C, Go, Node.js, and Python 3+. However, there is always more to learn and experience that I 
-          will accomplish by quickly adapting to a new setting.
-        </p>
-      </section>
-      <section id="honors">
-        <h3 class="title">Honors & Awards</h3>
+  
+    <section class="about" id="about">
+      <h3 class="title">About me</h3>
+      <p class="text">
+        Hello there,
+        I am Braeden Sowinski, you may also know me by my pseudonym McDazzzled. I am an avid software engineer, actively
+        pursuing a Diploma in Computer System Technologies at <abbr title="British Columbia Institute of Technology">BCIT</abbr>. I am adaptable and driven with a strong work ethic; 
+        possessing the ability to thrive in both a team-based or individualy motivated setting.
+      </p>
+      <p class="text">
+        I am eager to expand my knowledge in Software Engineering, IT, System Administration and related fields.
+        Approaching more than 5 years of continuous learning and programming, I have learned many valuable languages and 
+        frameworks such as C, Go, Node.js, and Python 3+. However, there is always more to learn and experience that I 
+        will accomplish by quickly adapting to a new setting.
+      </p>
+    </section>
 
-        <dl>
-        <dt class="text"><b>Capstone Project Recognition</b></dt>
-        <dd class="text">
-          Issued by
-          <abbr title="Sullivan Heights Secondary School">SHSS</abbr>
-          — Recognition award
-            for capstone project.
-        </dd>
+    <section class="honors" id="honors">
+      <h3 class="title">Honors & Awards</h3>
 
-        <dt class="text"><b>Master Digital Crafter</b></dt>
-        <dd class="text">
-          Issued by
-          <abbr title="Sullivan Heights Secondary School">SHSS</abbr>
-          — Exceeding expectationg in Software Engineering 11/12</dd>
-        </dl>
-      </section>
-      <footer class="footer flex-container">
-        <p>Get in touch with me!</p>
-        <div class="social-icons">
-          <a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me"
-            title=LinkedIn>
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
-              viewBox="0 0 16 16">
-              <path
-                d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
-            </svg>
-          </a>
-          <a class="icon" href=https://github.com/SowinskiBraeden target=_blank rel="noopener noreferrer me" title=Github>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2"
-              stroke-linecap="round" stroke-linejoin="round">
-              <path
-                d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22" />
-            </svg>
-          </a>
-          <a class="icon" href=https://twitter.com/braedensowinski target=_blank rel="noopener noreferrer me" title=Twitter>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2"
-              stroke-linecap="round" stroke-linejoin="round">
-              <path
-                d="M23 3a10.9 10.9.0 01-3.14 1.53 4.48 4.48.0 00-7.86 3v1A10.66 10.66.0 013 4s-4 9 5 13a11.64 11.64.0 01-7 2c9 5 20 0 20-11.5a4.5 4.5.0 00-.08-.83A7.72 7.72.0 0023 3z" />
-            </svg>
-          </a>
-          <a class="icon" href="mailto:braeden@sowinski.dev" target=_blank rel="noopener noreferrer me" title=Email>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2"
-              stroke-linecap="round" stroke-linejoin="round">
-              <path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
-              <polyline points="22,6 12,13 2,6" />
-            </svg>
-          </a>
-        </div>
-      </footer>
-    </div>
+      <dl>
+      <dt class="text"><b>Capstone Project Recognition</b></dt>
+      <dd class="text">
+        Issued by
+        <abbr title="Sullivan Heights Secondary School">SHSS</abbr>
+        — Recognition award
+          for capstone project.
+      </dd>
+
+      <dt class="text"><b>Master Digital Crafter</b></dt>
+      <dd class="text">
+        Issued by
+        <abbr title="Sullivan Heights Secondary School">SHSS</abbr>
+        — Exceeding expectationg in Software Engineering 11/12</dd>
+      </dl>
+    </section>
+
+    <footer class="footer flex-container">
+      <p>Get in touch with me!</p>
+      <div class="social-icons">
+        <a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me"
+          title=LinkedIn>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
+            viewBox="0 0 16 16">
+            <path
+              d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
+          </svg>
+        </a>
+        <a class="icon" href=https://github.com/SowinskiBraeden target=_blank rel="noopener noreferrer me" title=Github>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path
+              d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22" />
+          </svg>
+        </a>
+        <a class="icon" href=https://twitter.com/braedensowinski target=_blank rel="noopener noreferrer me" title=Twitter>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path
+              d="M23 3a10.9 10.9.0 01-3.14 1.53 4.48 4.48.0 00-7.86 3v1A10.66 10.66.0 013 4s-4 9 5 13a11.64 11.64.0 01-7 2c9 5 20 0 20-11.5a4.5 4.5.0 00-.08-.83A7.72 7.72.0 0023 3z" />
+          </svg>
+        </a>
+        <a class="icon" href="mailto:braeden@sowinski.dev" target=_blank rel="noopener noreferrer me" title=Email>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+            <polyline points="22,6 12,13 2,6" />
+          </svg>
+        </a>
+      </div>
+    </footer>
   </div>
 
   <!-- Import Mobile.js for mobile nav menu -->
diff --git a/index.html b/index.html
index e177c1f..44974c1 100644
--- a/index.html
+++ b/index.html
@@ -78,10 +78,10 @@
     <div id="main-wrapper" class="svg-wrapper">
       <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
         <rect x="0" y="0" class="shape" height="60" width="320" />
-        <h2 style="margin-top: 2px;" class="name">Braeden Sowinski</h2>
+        <h2 style="margin-top: 2pt;" class="name">Braeden Sowinski</h2>
       </svg>
     </div>
-    <h2 style="margin-top: 2px;" class="mobile-name">Braeden Sowinski</h2>
+    <h2 style="margin-top: 2pt;" class="mobile-name">Braeden Sowinski</h2>
     <span class="des">Software Engineer & System Administrator</span>
     <div class="social-icons">
       <a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me"
diff --git a/public/css/about.css b/public/css/about.css
index abf1b4c..b83449a 100644
--- a/public/css/about.css
+++ b/public/css/about.css
@@ -2,33 +2,44 @@
 
 .container {
   display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 24px;
-  padding: 24px;
-  padding-bottom: 0px;
-  /* border: 1px solid pink; */
+  grid-template-areas:
+    "pro about about about about about"
+    "pro other other other other other"
+    "footer footer footer footer footer footer";
+  gap: 24pt;
+  padding: 24pt;
+}
+
+.left-content {
+  grid-area: pro;
+}
+
+.about {
+  grid-area: about;
+}
+
+.honors {
+  grid-area: other;
+}
+
+.footer {
+  grid-area: footer;
 }
 
 section {
   transition: .8s;
-  padding: 24px;
+  padding: 24pt;
   background-color: var(--menu-text-bg);
-  border-radius: 12px;
-  margin-bottom: 24px;
+  border-radius: 12pt;
 }
 
 section h3 {
-  margin-top: -5px;
-}
-
-.flex-container {
-  display: flex;
-  justify-content: space-between;
+  margin-top: -5pt;
 }
 
 .social-icons {
-  margin-top: 6px;
-  margin-right: 24px;
+  margin-top: 6pt;
+  margin-right: 24pt;
 }
 
 #profile {
@@ -37,84 +48,63 @@ section h3 {
 }
 
 #profile img {
-  border: 6px solid var(--primary);
+  border: 6pt solid var(--primary);
   transition: .8s;
 }
 
 .profile-sub {
   background-color: rgba(0, 0, 0, .7);
-  padding: 12px;
-  border-radius: 12px;
+  padding: 12pt;
+  border-radius: 12pt;
 }
 
 dt {
-  margin-top: 12px;
+  margin-top: 12pt;
 }
 
 .text {
-  margin-right: 24px;
+  margin-right: 24pt;
   font-family: "Ubuntu", serif;
   font-weight: 400;
   font-style: normal;
   transition: .8s;
 }
 
-section ul {
-  margin-left: 20px;
-}
-
 footer {
   display: flex;
   justify-content: space-between;
   transition: .8s;
-  padding: 8px;
+  padding: 8pt;
   background-color: var(--menu-text-bg);
-  border-radius: 12px;
+  border-radius: 12pt;
 }
 
 footer p {
-  margin-left: 12px;
+  margin-left: 12pt;
   font-family: "Ubuntu", serif;
   font-weight: 400;
   font-style: normal;
-}
-
-.social-icons {
-  margin-top: 6px;
-  margin-right: 24px;
-}
-
-#profile, #skills {
-  min-width: 275px;
+  margin-top: 20pt;
 }
 
 #profile {
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-  margin-bottom: 0px;
+  border-bottom-right-radius: 0pt;
+  border-bottom-left-radius: 0pt;
+  margin-bottom: 0pt;
 }
 
 #skills {
-  border-top-right-radius: 0px;
-  border-top-left-radius: 0px;
-  margin-top: 0px;
+  border-top-left-radius: 0pt;
+  border-top-right-radius: 0pt;
 }
 
-#about {
-  min-height: 300px;
-}
-
-#honors {
-  min-height: 218px;
-}
-
-@media only screen and (max-width: 740px) {
+@media only screen and (max-width: 740pt) {
   .container {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   #skills {
-    margin-bottom: 0px;
+    margin-bottom: 0pt;
   }
 }
diff --git a/public/css/projects.css b/public/css/projects.css
index 112631a..027c97f 100644
--- a/public/css/projects.css
+++ b/public/css/projects.css
@@ -13,33 +13,33 @@
   transition: 0.8s;
   width: 54vh;
   height: auto;
-  margin: 30px;
-  padding: 20px;
+  margin: 30pt;
+  padding: 20pt;
   background-color: var(--menu-text-bg);
-  border-radius: 24px;
+  border-radius: 24pt;
   display: flex;
 }
 
 .box {
   transition: 0.8s;
   background-color: var(--theme);
-  border-radius: 12px;
-  padding-top: 12px;
-  padding-left: 12px;
-  padding-right: 12px;
+  border-radius: 12pt;
+  padding-top: 12pt;
+  padding-left: 12pt;
+  padding-right: 12pt;
 }
 
 .content {
   transition: 0.8s;
-  margin-left: 18px;
-  margin-right: 18px;
+  margin-left: 18pt;
+  margin-right: 18pt;
   align-items: stretch;
 }
 
 .content h2 {
   transition: 0.8s;
   font-size: 275%;
-  margin-top: 5px;
+  margin-top: 5pt;
   font-family: "Sixtyfour Convergence", serif;
   font-optical-sizing: auto;
   font-weight: 400;
@@ -49,8 +49,8 @@
     "SCAN" 0,
     "XELA" 0,
     "YELA" 0;
-  margin-bottom: 0px;
-  text-shadow: 1px 1px 2px red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
+  margin-bottom: 0pt;
+  text-shadow: 1pt 1pt 2pt red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
   min-width: 2.75cm;
 }
 
@@ -60,7 +60,7 @@
   font-weight: 400;
   font-style: normal;
   text-transform: uppercase;
-  margin-top: 20px;
+  margin-top: 20pt;
   margin-left: 0.75cm;
 }
 
@@ -75,11 +75,11 @@
 
 .content a {
   background-color: var(--secondary);
-  padding: 8px;
-  border-radius: 8px;
+  padding: 8pt;
+  border-radius: 8pt;
   position: relative;
-  box-shadow: 1px 1px 2px red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
-  margin-bottom: 15px;
+  box-shadow: 1pt 1pt 2pt red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
+  margin-bottom: 15pt;
 }
 
 .content-head {
@@ -98,9 +98,9 @@
 }
 
 .content-body a {
-  margin-bottom: 15px;
+  margin-bottom: 15pt;
   text-align: center;
-  max-width: 100px;
+  max-width: 100pt;
 }
 
 .content-body #links {
@@ -109,9 +109,9 @@
 }
 
 #links a {
-  margin-bottom: 15px;
+  margin-bottom: 15pt;
   text-align: center;
-  width: 100px;
+  width: 100pt;
 }
 
 /* prevents it changing color */
@@ -123,10 +123,10 @@
   display: flex;
   justify-content: space-between;
   transition: .8s;
-  padding: 8px;
+  padding: 8pt;
   background-color: var(--menu-text-bg);
-  border-radius: 12px;
-  margin-bottom: 24px;
+  border-radius: 12pt;
+  margin-bottom: 24pt;
   width: 80vw;
 }
 
@@ -134,20 +134,20 @@
   font-family: "Ubuntu", serif;
   font-weight: 400;
   font-style: normal;
-  margin-left: 12px;
+  margin-left: 12pt;
 }
 
 .social-icons {
-  margin-top: 6px;
-  margin-right: 24px;
+  margin-top: 6pt;
+  margin-right: 24pt;
 }
 
 .content-body a:hover {
   background-color: #e4a295;
 }
 
-@media only screen and (max-width: 544px) {
+@media only screen and (max-width: 544pt) {
   .content-head h2 {
-    margin-top: 24px;
+    margin-top: 24pt;
   }
 }
diff --git a/public/css/style.css b/public/css/style.css
index cb9b557..cca619e 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -58,21 +58,21 @@ ul {
 ul li::before {
   content: '';
   position: absolute;
-  margin-top: 42px;
+  margin-top: 42pt;
   width: 0;
   background-color: var(--secondary);
   z-index: 9999;
-  height: 3px;
+  height: 3pt;
   transition: 0.8s all;
 }
 
 ul li#home-link:hover::before,
 ul li#about-link:hover::before {
-  width: 45px;
+  width: 45pt;
 }
 
 ul li#projects-link:hover::before {
-  width: 58px;
+  width: 58pt;
 }
 
 a {
@@ -97,10 +97,10 @@ ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  max-width: calc(1024px + 24px * 2);
+  max-width: calc(1024pt + 24pt * 2);
   margin-inline-start: auto;
   margin-inline-end: auto;
-  line-height: 60px;
+  line-height: 60pt;
 }
 
 .nav a {
@@ -110,7 +110,7 @@ ul {
 .logo,
 #menu {
   display: flex;
-  margin: auto 24px;
+  margin: auto 24pt;
 }
 
 .logo {
@@ -127,8 +127,8 @@ ul {
   vertical-align: middle;
   pointer-events: none;
   transform: translate(0, -10%);
-  border-radius: 6px;
-  margin-inline-end: 8px
+  border-radius: 6pt;
+  margin-inline-end: 8pt
 }
 
 #menu {
@@ -139,11 +139,11 @@ ul {
 }
 
 #menu li+li {
-  margin-inline-start: 24px;
+  margin-inline-start: 24pt;
 }
 
 #menu a {
-  font-size: 16px
+  font-size: 16px;
 }
 
 #menu .active {
@@ -158,15 +158,15 @@ ul {
   left: 50%;
   transform: translate(-50%, -50%);
   width: 50%;
-  padding: 10px;
+  padding: 10pt;
   color: var(--primary);
 }
 
 .svg-wrapper {
   margin: 0 auto;
-  width: 320px;
+  width: 320pt;
   position: relative;
-  height: 64px;
+  height: 64pt;
   overflow-y: hidden;
 }
 
@@ -174,14 +174,14 @@ ul {
   z-index: 9999;
   stroke-dasharray: 140 540;
   stroke-dashoffset: -474;
-  stroke-width: 8px;
+  stroke-width: 8pt;
   fill: transparent;
   stroke: var(--secondary);
   transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
 }
 
 .svg-wrapper:hover .shape {
-  stroke-width: 2px;
+  stroke-width: 2pt;
   stroke-dashoffset: 0;
   stroke-dasharray: 760;
 }
@@ -190,8 +190,8 @@ ul {
   transition: 0.8s;
   font-size: 30px;
   font-weight: 900;
-  margin-bottom: 10px;
-  transform: translate(0, -64px);
+  margin-bottom: 10pt;
+  transform: translate(0, -64pt);
 }
 
 .name:hover {
@@ -214,23 +214,23 @@ ul {
 }
 
 .profile {
-  width: 190px;
-  height: 190px;
+  width: 190pt;
+  height: 190pt;
   border-radius: 50%;
   transition: 0.8s;
 }
 
 .social-icons {
-  padding: 12px 0;
+  padding: 12pt 0;
 }
 
 .social-icons a:not(:last-of-type) {
-  margin-inline-end: 12px;
+  margin-inline-end: 12pt;
 }
 
 .social-icons a svg {
-  height: 26px;
-  width: 26px;
+  height: 26pt;
+  width: 26pt;
 }
 
 .social-icons a {
@@ -251,7 +251,7 @@ ul {
 }
 
 #theme-toggle svg {
-  height: 18px;
+  height: 18pt;
 }
 
 button#theme-toggle {
@@ -259,7 +259,7 @@ button#theme-toggle {
   border: none;
   color: var(--primary);
   font-size: 26px;
-  margin: auto 4px;
+  margin: auto 4pt;
   transition: 0.8s;
 }
 
@@ -319,7 +319,7 @@ body:not(.light) #sun {
 .overlay a {
   color: white;
   text-decoration: none;
-  padding: 15px;
+  padding: 15pt;
   font-size: 36px;
   display: block;
   transition: all 0.3s ease 0s;
@@ -332,8 +332,8 @@ body:not(.light) #sun {
 
 .overlay .close {
   position: absolute;
-  top: 20px;
-  right: 45px;
+  top: 20pt;
+  right: 45pt;
   font-size: 60px;
   color: #edf0f1;
   cursor: pointer;
@@ -351,18 +351,18 @@ body:not(.light) #sun {
   cursor: default;
 }
 
-@media screen and (max-width:768px) {
+@media screen and (max-width:768pt) {
   .profile img {
     transform: scale(.85);
   }
 
   .profile {
-    width: 128px;
+    width: 128pt;
     height: auto;
   }
 
   .first-entry {
-    min-height: 260px;
+    min-height: 260pt;
   }
 
   .archive-month {
@@ -370,15 +370,15 @@ body:not(.light) #sun {
   }
 
   .archive-year {
-    margin-top: 20px;
+    margin-top: 20pt;
   }
 
   .footer {
-    padding: calc((60 - 24px - 10px)/2)24px;
+    padding: calc((60 - 24pt - 10pt)/2)24pt;
   }
 }
 
-@media only screen and (max-width: 740px) {
+@media only screen and (max-width: 740pt) {
 
   .nav__links li a,
   .svg-wrapper#main-wrapper {