update about me page styles

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;
   }
 }