From a057e504ef66b830a65d7862e15593a2e953b005 Mon Sep 17 00:00:00 2001
From: Santiago Soler <santiago.r.soler@gmail.com>
Date: Thu, 4 Feb 2021 16:58:03 -0300
Subject: [PATCH] Improve CSS by setting hierarchies

---
 index.html | 59 ++++++++++++++++++------------------
 style.css  | 88 ++++++++++++++++++++++++++++--------------------------
 2 files changed, 76 insertions(+), 71 deletions(-)

diff --git a/index.html b/index.html
index fb0a35c..fce3758 100644
--- a/index.html
+++ b/index.html
@@ -77,9 +77,9 @@ <h1>Coding Group</h1>
 
     <main>
       <!-- About-->
-      <article id="about">
+      <section id="about">
         <div class="container">
-          <h2>About</h2>
+          <h1>About</h1>
 
           <p>
             Programming is a vital skill to have as a geoscientist. As we delve
@@ -109,10 +109,10 @@ <h2>About</h2>
           </p>
 
           <div class="row align-items-center">
-            <div class="col-lg col-padding">
+            <div class="col-lg">
               <img src="images/members.jpg" style="width: 100%" />
             </div>
-            <div class="col-lg quote col-padding">
+            <div class="col-lg quote">
               <p>
                 "Monday, 6am here, 9am over there, and 7pm on the other side of
                 the globe. The cup of coffee is ready, also the mate and the
@@ -126,12 +126,12 @@ <h2>About</h2>
             </div>
           </div>
         </div>
-      </article>
+      </section>
 
       <!-- Our courses -->
-      <article style="background-color: #f3e4ff" id="courses">
+      <section style="background-color: #f3e4ff" id="courses">
         <div class="container">
-          <h2>Our Courses</h2>
+          <h1>Our Courses</h1>
 
           <p>
             Group members provide <b>different programming courses</b> useful
@@ -140,15 +140,14 @@ <h2>Our Courses</h2>
             <b>extra material</b>.
           </p>
           <div class="row text-center justify-content-around">
-            <div class="col-lg-5 col-md-6 col-padding">
-              <div class="card box">
+            <div class="col-lg-5 col-md-6 course">
+              <div class="card">
                 <div class="card-body">
                   <a
                     class=""
                     href="https://github.com/GeoLatinas/Intro-to-python"
                   >
-                    <h3><i class="fab fa-python"></i></h3>
-                    <h3>Intro to Python</h3>
+                    <h2><i class="fab fa-python"></i><br />Intro to Python</h2>
                     <p class="card-text">
                       Getting started with Python, installation, exploration of
                       libraries for data analysis and visualization.
@@ -157,15 +156,17 @@ <h3>Intro to Python</h3>
                 </div>
               </div>
             </div>
-            <div class="col-lg-5 col-md-6 col-padding">
-              <div class="card box">
+            <div class="col-lg-5 col-md-6 course">
+              <div class="card">
                 <div class="card-body">
                   <a
                     class=""
                     href="https://sainosmichelle.github.io/elements.html"
                   >
-                    <h3><i class="fas fa-project-diagram"></i></h3>
-                    <h3>Intro to Data Science</h3>
+                    <h2>
+                      <i class="fas fa-project-diagram"></i><br />Intro to Data
+                      Science
+                    </h2>
                     <p class="card-text">
                       Introduction to data science to solve challenges in the
                       areas of earth science, environmental science, etc using
@@ -177,16 +178,16 @@ <h3>Intro to Data Science</h3>
             </div>
           </div>
         </div>
-      </article>
+      </section>
 
       <!-- Getting stated section -->
-      <article style="background-color: white" id="started">
+      <section style="background-color: white" id="started">
         <div class="container">
-          <h2>Getting Started</h2>
+          <h1>Getting Started</h1>
 
           <div class="row align-items-between align-items-top">
-            <div class="col-md col-padding">
-              <h3>Setup your System</h3>
+            <div class="col-md">
+              <h2>Setup your System</h2>
               <p>
                 In order to start doing our courses you need to
                 <b>install a Python distribution</b>. We recommend using
@@ -201,8 +202,8 @@ <h3>Setup your System</h3>
                 >.
               </p>
             </div>
-            <div class="col-md col-padding">
-              <h3>New to Python?</h3>
+            <div class="col-md">
+              <h2>New to Python?</h2>
               <p>
                 If you don’t have much experience with Python,
                 <b>don’t worry!</b>. A great place to start learning Python for
@@ -237,12 +238,12 @@ <h3>New to Python?</h3>
             </div>
           </div>
         </div>
-      </article>
+      </section>
 
       <!-- Achievement -->
-      <article style="background-color: #f3e4ff" id="achievements">
+      <section style="background-color: #f3e4ff" id="achievements">
         <div class="container">
-          <h2>Achievements</h2>
+          <h1>Achievements</h1>
 
           <p>
             The <b>GeoLatinas Coding Group</b> has participated in different
@@ -306,16 +307,16 @@ <h2>Achievements</h2>
             </div>
           </div>
         </div>
-      </article>
+      </section>
 
       <!-- Upcoming events section -->
-      <article style="background-color: white" id="events">
+      <section style="background-color: white" id="events">
         <div class="container">
-          <h2>Upcoming Events</h2>
+          <h1>Upcoming Events</h1>
 
           <p>Coming soon...</p>
         </div>
-      </article>
+      </section>
     </main>
 
     <footer>
diff --git a/style.css b/style.css
index 6de1510..6b3b247 100644
--- a/style.css
+++ b/style.css
@@ -13,37 +13,46 @@ body {
 }
 
 h1,
+h1 a,
 h2,
-h3 {
+h2 a,
+h3,
+h3 a {
   color: #31292f;
   text-align: center;
-  font-weight: 700;
-  padding-top: 0px;
-  padding-bottom: 20px;
-  padding-left: 0px;
-  padding-right: 0px;
+  margin: 0px;
+  padding: 0px;
 }
 
-article {
-  padding: 120px 0px 120px 0px;
+h1,
+h1 a {
+  font-weight: 700;
+  font-size: 38pt;
+  padding-top: 100px;
+  padding-bottom: 40px;
+  line-height: 1.2em;
 }
 
-article h2,
-article h2 a {
-  color: #31292f;
-  text-align: center;
-  font-weight: 700;
-  font-size: 35pt;
+h2,
+h2 a {
+  font-weight: 600;
+  font-size: 25pt;
+  padding-top: 40px;
   padding-bottom: 30px;
+  line-height: 1.2em;
 }
 
-article h3,
-article h3 a {
-  color: #31292f;
-  text-align: center;
-  font-weight: 700;
-  font-size: 22pt;
+h3,
+h3 a {
+  font-weight: 500;
+  font-size: 20pt;
+  padding-top: 20px;
   padding-bottom: 10px;
+  line-height: 1.2em;
+}
+
+section {
+  padding-bottom: 100px;
 }
 
 a {
@@ -64,11 +73,7 @@ p {
   line-height: 1.8;
   margin: 0px;
   padding: 0px;
-}
-
-.fas,
-.fab {
-  color: #574e55;
+  margin-bottom: 1.5em;
 }
 
 ul {
@@ -80,18 +85,6 @@ li {
   margin-bottom: 1em;
 }
 
-.col-padding {
-  padding-bottom: 20px;
-  padding-top: 20px;
-}
-
-/* Reduce size of headers on very small screens */
-@media (max-width: 575.98px) {
-  article h2 {
-    font-size: 24pt;
-  }
-}
-
 /* ----------------- */
 /* Header and navbar */
 /* ----------------- */
@@ -132,11 +125,12 @@ nav a:hover {
 
 .cover h1 {
   color: #ffffff;
-  font-size: 3.8em;
+  font-size: 45pt;
   font-weight: bold;
   border: none;
   margin-top: 20px;
   margin-bottom: 20px;
+  padding: 0px;
   line-height: 1em;
 }
 
@@ -203,7 +197,6 @@ nav a:hover {
 /* Sections */
 /* -------- */
 
-/* About section style */
 .quote {
   max-width: 760px;
   margin: 0 auto;
@@ -223,14 +216,18 @@ nav a:hover {
 }
 
 /* Our courses section style */
-.box {
+.course {
+  padding-bottom: 30px;
+}
+
+.course .card {
   border: 5px solid white;
   background-color: #f3e4ff;
   height: 100%;
 }
 
-h3 i {
-  font-size: 1.8em;
+.course i {
+  font-size: 1.6em;
 }
 
 /* Achievement section style */
@@ -241,6 +238,13 @@ h3 i {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
+/* Reduce size of headers on very small screens */
+@media (max-width: 575.98px) {
+  h1 {
+    font-size: 33px;
+  }
+}
+
 /* ------ */
 /* Footer */
 /* ------ */