restyle about page - mobile multi-column realign

src/static/css/App.css

@@ -191,7 +191,7 @@ a {
 
 .foreground {
   position: relative;
-  padding-top: 7rem;
+  padding-top: 6rem;
   padding-left: 8rem;
   width: calc(100%-8rem);
   min-height: calc(100vh - 8rem);
@@ -270,6 +270,10 @@ a {
   justify-content: left;
 }
 
+.relative {
+  position: relative;
+}
+
 .onRight {
   position: absolute;
   right: 0;
@@ -311,10 +315,20 @@ a {
   max-height: min(30rem, 100%);
 }
 
+/* #aboutGrid{
+  display: grid;
+} */
+
 .col {
-  float: left;
-  margin-right: 3rem;
   width: calc(50% - 3rem);
+  margin-bottom: 3em;
+}
+
+.rightCol {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin-right: 3em;
 }
 
 .boxedImg {
@@ -868,6 +882,7 @@ a {
     /* centered objects will need to remove 1.5 of this to center */
     padding-right: .5rem;
     padding-bottom: 36px;
+    padding-top: 3em;
   }
 
   .homeground {
@@ -894,17 +909,9 @@ a {
     margin-bottom: 3rem;
   }
 
-  #aboutMe {
-    float: none;
-    display: block;
-    width: 90%;
-  }
-
-  #skills {
-    float: none;
-    margin-right: auto;
-    display: block;
-    width: 90%;
+  .rightCol {
+    position: inherit;
+    margin-right: inherit;
   }
   
   .footer {

src/templates/about.html

@@ -1,7 +1,8 @@
 {% block content %}
 <div class="foreground">
-  <div class="col">
-    <div id="aboutMe" data-aos="fade-up">
+  <div class="relative">
+  <div id="aboutGrid">
+    <div id="aboutMe" class="col" data-aos="fade-up">
       <h2 class="concentratedHead">About Me</h2>
       <p>
         I'm Andrew Simonson, a second year (third year standing) student at
@@ -36,20 +37,17 @@
         multifaceted purpose present in everything around us.
       </p> -->
     </div>
-  </div>
-  <div class="col">
-    <div id="skills" data-aos="fade-up">
+    <div id="skills" class="col rightCol" data-aos="fade-up">
       <h2>Skills</h2>
-      {% from 'partials/skills.html' import skills %}
-        {{ skills([ "Python", "JavaScript", "Java", "C", "C++", "R", "MIPS Assembly",
-        "Processing", "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy",
-        "HTML", "CSS", "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux",
-        "OKD4", "Kubernetes", "Openshift", "Angular", "Flask", "Jinja", "DOM Scraping",
-        "Google API", "React", "Node.js", "ArcGIS", ]) }}
-      </Skills>
+      {% from 'partials/skills.html' import skills %} {{ skills([ "Python",
+      "JavaScript", "Java", "C", "C++", "R", "MIPS Assembly", "Processing",
+      "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy", "HTML", "CSS",
+      "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux", "OKD4",
+      "Kubernetes", "Openshift", "Nginx", "Angular", "Flask", "Jinja", "DOM
+      Scraping", "Google API", "React", "Node.js", "ArcGIS", ]) }}
       <div class="chess">
-        {% from 'partials/chess.html' import chess %}
-        {{ chess('asimonson1125') }}
+        {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
+        }}
       </div>
     </div>
     <!-- {/* <div data-aos="fade-up" class="elementBlock">
@@ -82,8 +80,8 @@
         ]}
       </MyCarousel>
     </div> */} -->
-  </div>
-  <div class="col">
+    <div id="timeline" class="col">
+      <h2>Timeline</h2>
       <div class="checkbox-wrapper">
         <div class="flex start">
           <label class="switch" htmlFor="pinned">
@@ -99,20 +97,32 @@
         </div>
         <div class="flex start">
           <label class="switch" htmlFor="education">
-          <input type="checkbox" id="education" onClick="toggleCheckbox('up')" />
+            <input
+              type="checkbox"
+              id="education"
+              onClick="toggleCheckbox('up')"
+            />
             <div class="slider round"></div>
             <strong>Education</strong>
           </label>
         </div>
         <div class="flex start">
-        <label class="switch" htmlFor="experience" onClick="toggleCheckbox('up')">
+          <label
+            class="switch"
+            htmlFor="experience"
+            onClick="toggleCheckbox('up')"
+          >
             <input type="checkbox" id="experience" />
             <div class="slider round"></div>
             <strong>Work Experience</strong>
           </label>
         </div>
         <div class="flex start">
-        <label class="switch" htmlFor="technical" onClick="toggleCheckbox('up')">
+          <label
+            class="switch"
+            htmlFor="technical"
+            onClick="toggleCheckbox('up')"
+          >
             <input type="checkbox" id="technical" />
             <div class="slider round"></div>
             <strong>Technical</strong>
@@ -120,12 +130,16 @@
         </div>
       </div>
       <div class="timeline checkbox-client">
-      {% from 'partials/timeline.html' import timeitem %} 
-      {% for i in var["timeline"] %}
-      {{ timeitem(i, var["timeline"][i]["classes"], var["timeline"][i]["date"], var["timeline"][i]["content"])}}
-      {% endfor %}
+        {% from 'partials/timeline.html' import timeitem %} {% for i in
+        var["timeline"] %} {{ timeitem(i, var["timeline"][i]["classes"],
+        var["timeline"][i]["date"], var["timeline"][i]["content"])}} {% endfor
+        %}
+      </div>
+      <script>
+        toggleCheckbox("up");
+      </script>
+    </div>
   </div>
-    <script>toggleCheckbox('up')</script>
   </div>
 </div>
 {% endblock %}