[happybirthdaygnome-web] Replace happybirthdaygnome.css

[Caroline Henriksen <chenriksen src gnome org>]

commit d4e5998c9cbf8f220a69c33c72cfdb936981c26a
Author: Caroline Henriksen <chenriksen gnome org>
Date:   Mon Aug 15 07:06:20 2022 +0000

    Replace happybirthdaygnome.css

 css/happybirthdaygnome.css | 174 +++++++++++++++++++++++++++++++++++++++------
 1 file changed, 153 insertions(+), 21 deletions(-)
---
diff --git a/css/happybirthdaygnome.css b/css/happybirthdaygnome.css
index 5dea322..16ef459 100644
--- a/css/happybirthdaygnome.css
+++ b/css/happybirthdaygnome.css
@@ -1,9 +1,16 @@
 section {
     padding: 80px 0;
-    border-bottom: 1px solid #e7e7e7;
 }
-.bg-dark {
-    background: #f6f6f6;
+
+nav {
+    background: linear-gradient(90deg, #4a86cf, #613583 );
+}
+
+nav a {
+    color: white;
+}
+.bg-light {
+    background: #F6F5F4;
 }
 .thumbnail {
     margin-bottom: 0px;
@@ -11,23 +18,11 @@ section {
     background-color: #f6f6f6;
 }
 .modal-footer {
-    background: #01808f;
+    background: #241F31;
     color: white;
     font-weight: 700;
 }
-.btn-xl {
-    padding: 10px 40px;
-}
-.btn-blue {
-    background-color: #4a86cf;
-    border-color: #3968a1;
-    color: #ffffff;
-}
-.btn-blue:hover {
-    background-color: #6e9ed9;
-    border-color: #3968a1;
-    color: #ffffff;
-}
+
 .m-t-2 {
     margin-top: 20px;
 }
@@ -37,16 +32,153 @@ section {
 .m-b-2 {
     margin-bottom: 20px;
 }
+
+Body {
+    font-family: Cantarell;
+    font-size: 18px;
+    padding-bottom: 15px;
+    color: #241F31;
+
+}
+
+h1 {
+    font-weight: 800;
+    font-size: 280%;
+    padding-bottom: 30px;
+}
+
+h2 {
+    font-weight: 300;
+    font-size: 260%;
+}
+
+h3 {
+    font-weight: 800;
+    font-size: 130%;
+}
+
+h4 {
+    font-weight: 600;
+    font-size: 100%;
+}
+
+header {
+    margin-bottom: -110px;
+}
+
+
+
+/* Hero Image Styling */
+
+section#hero {
+    background: linear-gradient(90deg, #4a86cf, #613583 );
+}
+
+.heroimg {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+    height: auto;
+}
+
+
+
+/* Feature Text Block Styling */
+
+section#featured {
+    background: #3D3846;
+}
+section#featured h1 {
+    color: white;
+    text-align: center;
+}
+
+section#featured p {
+    color: white;
+    text-align: center;
+}
+
+.featurecolumns {
+    margin-top: 100px;
+}
+
+.featurecolumns h2 {
+    color: white;
+    text-align: center;
+    padding-bottom: 30px;
+}
+
+.featurecolumns p {
+    color: white;
+    text-align: center;
+
+}
+.featurecolumns h3 {
+    color: white;
+    text-align: center;
+}
+
+.column {
+    float: left;
+    width: 33.33%;
+    padding: 0 20px 0 20px;
+}
+
+.column img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 30%;
+    height: auto;
+}
+
+.featurebutton {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    height: auto;
+    max-width: 100%;
+    background-color: #3584E4;
+    border-radius: 8px;
+    padding: 10px;
+    border: none;
+}
+
+.featurebutton a {
+    color: white;
+}
+
+/* Clear floats after the columns */
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each 
other instead of next to each other */
+@media screen and (max-width: 600px) {
+    .column {
+        width: 100%;
+    }
+}
+
+
+
+/* Timeline Styling */
+
 .timeline {
     width: 100%;
-    max-width: 800px;
+    max-width: 1080px;
     position: relative;
 }
 .timeline:before {
     content: '';
     position: absolute;
     top: 0px;
-    left: calc(33% + 2px);
+    left: calc(25% + 2px);
     bottom: 0px;
     width: 4px;
     background: #ddd;
@@ -64,7 +196,7 @@ section {
 .entry .title {
     margin-bottom: .5em;
     float: left;
-    width: 33%;
+    width: 25%;
     padding-right: 30px;
     text-align: right;
     position: relative;
@@ -91,7 +223,7 @@ section {
 .entry .body {
     margin: 0 0 3em;
     float: right;
-    width: 66%;
+    width: 75%;
     padding-left: 30px;
 }
 .entry .body p {