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,19 +909,11 @@ a {
     margin-bottom: 3rem;
   }
 
-  #aboutMe {
+  .rightCol {
-    float: none;
+    position: inherit;
-    display: block;
+    margin-right: inherit;
-    width: 90%;
   }
-
+  
-  #skills {
-    float: none;
-    margin-right: auto;
-    display: block;
-    width: 90%;
-  }
-
   .footer {
     position: relative;
     width: 100%;

src/templates/about.html

@@ -1,7 +1,8 @@
 {% block content %}
 <div class="foreground">
-  <div class="col">
+  <div class="relative">
-    <div id="aboutMe" data-aos="fade-up">
+  <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 id="skills" class="col rightCol" data-aos="fade-up">
-  <div class="col">
-    <div id="skills" data-aos="fade-up">
       <h2>Skills</h2>
-      {% from 'partials/skills.html' import skills %}
+      {% from 'partials/skills.html' import skills %} {{ skills([ "Python",
-        {{ skills([ "Python", "JavaScript", "Java", "C", "C++", "R", "MIPS Assembly",
+      "JavaScript", "Java", "C", "C++", "R", "MIPS Assembly", "Processing",
-        "Processing", "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy",
+      "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy", "HTML", "CSS",
-        "HTML", "CSS", "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux",
+      "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux", "OKD4",
-        "OKD4", "Kubernetes", "Openshift", "Angular", "Flask", "Jinja", "DOM Scraping",
+      "Kubernetes", "Openshift", "Nginx", "Angular", "Flask", "Jinja", "DOM
-        "Google API", "React", "Node.js", "ArcGIS", ]) }}
+      Scraping", "Google API", "React", "Node.js", "ArcGIS", ]) }}
-      </Skills>
       <div class="chess">
-        {% from 'partials/chess.html' import chess %}
+        {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
-        {{ chess('asimonson1125') }}
+        }}
       </div>
     </div>
     <!-- {/* <div data-aos="fade-up" class="elementBlock">
@@ -82,50 +80,66 @@
         ]}
       </MyCarousel>
     </div> */} -->
+    <div id="timeline" class="col">
+      <h2>Timeline</h2>
+      <div class="checkbox-wrapper">
+        <div class="flex start">
+          <label class="switch" htmlFor="pinned">
+            <input
+              type="checkbox"
+              id="pinned"
+              onClick='toggleCheckbox("up")'
+              checked
+            />
+            <div class="slider round"></div>
+            <strong>Pinned</strong>
+          </label>
+        </div>
+        <div class="flex start">
+          <label class="switch" htmlFor="education">
+            <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')"
+          >
+            <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')"
+          >
+            <input type="checkbox" id="technical" />
+            <div class="slider round"></div>
+            <strong>Technical</strong>
+          </label>
+        </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
+        %}
+      </div>
+      <script>
+        toggleCheckbox("up");
+      </script>
+    </div>
   </div>
-  <div class="col">
-    <div class="checkbox-wrapper">
-      <div class="flex start">
-        <label class="switch" htmlFor="pinned">
-          <input
-            type="checkbox"
-            id="pinned"
-            onClick='toggleCheckbox("up")'
-            checked
-          />
-          <div class="slider round"></div>
-          <strong>Pinned</strong>
-        </label>
-      </div>
-      <div class="flex start">
-        <label class="switch" htmlFor="education">
-          <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')">
-          <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')">
-          <input type="checkbox" id="technical" />
-          <div class="slider round"></div>
-          <strong>Technical</strong>
-        </label>
-      </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 %}
-    </div>
-    <script>toggleCheckbox('up')</script>
   </div>
 </div>
 {% endblock %}