Adding background images

css/main.css

@@ -294,16 +294,30 @@ section:nth-of-type(2) {
   position: relative;
   overflow: hidden;
   min-height: 60vmax;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0.8156862745)), url("../assets/representational/esau-gonzalez-bQefbdSC4ko-unsplash.jpg") no-repeat center center fixed;
+  color: rgba(var(--foreground-color), 1);
+}
+#el_salvador_section p {
+  color: rgba(var(--foreground-color), 0.9);
 }
 
-#el_salvador_map {
+#projectb_milestones_section {
-  position: absolute;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.8156862745), rgba(0, 0, 0, 0.8156862745)), url("../assets/representational/nik-z1d-LP8sjuI-unsplash.jpg") no-repeat top 20% center fixed;
-  opacity: 0.06;
+  color: rgba(var(--foreground-color), 1);
-  top: 0;
+  padding-bottom: 3rem;
-  width: max(100vh, 90vw);
+}
-  height: auto;
+#projectb_milestones_section p {
-  left: 50%;
+  color: rgba(var(--foreground-color), 0.9);
-  transform: translateX(-50%);
+}
+#projectb_milestones_section .carousel-control {
+  border: solid thin rgba(var(--foreground-color), 0.5);
+  background: rgba(var(--foreground-color), 1);
+}
+#projectb_milestones_section .milestone {
+  isolation: isolate;
+}
+#projectb_milestones_section .milestone__label::before {
+  background-color: rgba(var(--foreground-color), 1);
 }
 
 .carousel {
@@ -340,12 +354,13 @@ section:nth-of-type(2) {
 .milestone__label {
   display: flex;
   align-items: center;
-  background-color: rgba(var(--text-color), 1);
+  background-color: rgba(var(--foreground-color), 1);
-  color: rgba(var(--foreground-color), 1);
+  color: rgba(var(--text-color), 1);
   padding: 0.4rem 0.5rem;
   align-self: flex-start;
   border-radius: 0.3rem;
   font-size: 0.9rem;
+  font-weight: 500;
 }
 .milestone__label::before {
   position: absolute;
@@ -374,6 +389,9 @@ section:nth-of-type(2) {
   padding-bottom: 3rem;
 }
 
+#projects_section {
+  padding-top: 5rem;
+}
 #projects_section h2 {
   margin-bottom: 3rem;
 }
@@ -492,6 +510,16 @@ section:nth-of-type(2) {
   font-size: 0.9rem;
 }
 
+#methodology_section {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.6274509804), rgba(0, 0, 0, 0.8156862745)), url("../assets/representational/irfan-simsar-wxWulfjN-G0-unsplash.jpg") no-repeat center center;
+  color: rgba(var(--foreground-color), 1);
+}
+#methodology_section p {
+  color: rgba(var(--foreground-color), 0.9);
+}
+
 #methodology_wrapper {
   display: flex;
   flex-direction: column;
@@ -629,6 +657,14 @@ section:nth-of-type(2) {
   max-width: max(100vw - 2.5rem);
 }
 
+#socials_section {
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.5019607843)), url("../assets/representational/nasa-Q1p7bh3SHj8-unsplash.jpg") no-repeat center center fixed;
+  color: rgba(var(--foreground-color), 1);
+}
+#socials_section p {
+  color: rgba(var(--foreground-color), 0.9);
+}
+
 #social_links {
   display: flex;
   flex-wrap: wrap;
@@ -645,9 +681,10 @@ section:nth-of-type(2) {
   transition: box-shadow 0.1s ease;
   flex: 1 1 8rem;
   border-radius: 0.5rem;
+  background-color: rgba(var(--foreground-color), 1);
 }
 #social_links li:hover {
-  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1);
+  box-shadow: 0 0 0 0.1rem rgba(var(--foreground-color), 1);
 }
 #social_links a {
   display: flex;
@@ -686,44 +723,6 @@ section:nth-of-type(2) {
   width: 2.5rem;
 }
 
-#news_list {
-  display: grid;
-  gap: 0.5rem;
-}
-#news_list li {
-  container: news-item/inline-size;
-}
-
-.news-item {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-areas: " icon ." "icon ." "icon ." "icon .";
-  gap: 0.5rem 1rem;
-  border: solid thin rgba(var(--text-color), 0.5);
-  border-radius: 0.5rem;
-  padding: max(1rem, 2vw);
-  text-decoration: none;
-  color: rgba(var(--text-color), 0.9);
-  -webkit-animation: slide-up 0.5s ease var(--delay) forwards;
-          animation: slide-up 0.5s ease var(--delay) forwards;
-  opacity: 0;
-}
-.news-item__icon {
-  grid-area: icon;
-}
-.news-item__icon .icon {
-  height: 2rem;
-  width: 2rem;
-}
-.news-item__date {
-  background-color: rgba(var(--text-color), 0.1);
-  margin-right: auto;
-  padding: 0.1rem 0.5rem;
-  border-radius: 0.3rem;
-  font-weight: 500;
-  font-size: 0.8rem;
-}
-
 @-webkit-keyframes slide-up {
   from {
     opacity: 0;

css/main.scss

@@ -252,15 +252,35 @@ section {
   position: relative;
   overflow: hidden;
   min-height: 60vmax;
+  background: linear-gradient(to left, #00000080, #000000d0),
+    url("../assets/representational/esau-gonzalez-bQefbdSC4ko-unsplash.jpg")
+      no-repeat center center fixed;
+  color: rgba(var(--foreground-color), 1);
+  p {
+    color: rgba(var(--foreground-color), 0.9);
+  }
 }
-#el_salvador_map {
+#projectb_milestones_section {
-  position: absolute;
+  background: linear-gradient(to left, #000000d0, #000000d0),
-  opacity: 0.06;
+    url("../assets/representational/nik-z1d-LP8sjuI-unsplash.jpg") no-repeat top
-  top: 0;
+      20% center fixed;
-  width: max(100vh, 90vw);
+  color: rgba(var(--foreground-color), 1);
-  height: auto;
+  padding-bottom: 3rem;
-  left: 50%;
+  p {
-  transform: translateX(-50%);
+    color: rgba(var(--foreground-color), 0.9);
+  }
+  .carousel-control {
+    border: solid thin rgba(var(--foreground-color), 0.5);
+    background: rgba(var(--foreground-color), 1);
+  }
+  .milestone {
+    isolation: isolate;
+    &__label {
+      &::before {
+        background-color: rgba(var(--foreground-color), 1);
+      }
+    }
+  }
 }
 .carousel {
   display: flex;
@@ -296,12 +316,13 @@ section {
   &__label {
     display: flex;
     align-items: center;
-    background-color: rgba(var(--text-color), 1);
+    background-color: rgba(var(--foreground-color), 1);
-    color: rgba(var(--foreground-color), 1);
+    color: rgba(var(--text-color), 1);
     padding: 0.4rem 0.5rem;
     align-self: flex-start;
     border-radius: 0.3rem;
     font-size: 0.9rem;
+    font-weight: 500;
     &::before {
       position: absolute;
       content: "";
@@ -329,6 +350,7 @@ section {
   padding-bottom: 3rem;
 }
 #projects_section {
+  padding-top: 5rem;
   h2 {
     margin-bottom: 3rem;
   }
@@ -442,6 +464,17 @@ section {
     }
   }
 }
+#methodology_section {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  background: linear-gradient(to left, #000000a0, #000000d0),
+    url("../assets/representational/irfan-simsar-wxWulfjN-G0-unsplash.jpg")
+      no-repeat center center;
+  color: rgba(var(--foreground-color), 1);
+  p {
+    color: rgba(var(--foreground-color), 0.9);
+  }
+}
 #methodology_wrapper {
   display: flex;
   flex-direction: column;
@@ -577,6 +610,13 @@ section {
 }
 
 #socials_section {
+  background: linear-gradient(to left, #00000050, #00000080),
+    url("../assets/representational/nasa-Q1p7bh3SHj8-unsplash.jpg") no-repeat
+      center center fixed;
+  color: rgba(var(--foreground-color), 1);
+  p {
+    color: rgba(var(--foreground-color), 0.9);
+  }
 }
 #social_links {
   display: flex;
@@ -593,8 +633,9 @@ section {
     transition: box-shadow 0.1s ease;
     flex: 1 1 8rem;
     border-radius: 0.5rem;
+    background-color: rgba(var(--foreground-color), 1);
     &:hover {
-      box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1);
+      box-shadow: 0 0 0 0.1rem rgba(var(--foreground-color), 1);
     }
   }
   a {
@@ -635,41 +676,6 @@ section {
     width: 2.5rem;
   }
 }
-#news_list {
-  display: grid;
-  gap: 0.5rem;
-  li {
-    container: news-item / inline-size;
-  }
-}
-.news-item {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-areas: " icon ." "icon ." "icon ." "icon .";
-  gap: 0.5rem 1rem;
-  border: solid thin rgba(var(--text-color), 0.5);
-  border-radius: 0.5rem;
-  padding: max(1rem, 2vw);
-  text-decoration: none;
-  color: rgba(var(--text-color), 0.9);
-  animation: slide-up 0.5s ease var(--delay) forwards;
-  opacity: 0;
-  &__icon {
-    grid-area: icon;
-    .icon {
-      height: 2rem;
-      width: 2rem;
-    }
-  }
-  &__date {
-    background-color: rgba(var(--text-color), 0.1);
-    margin-right: auto;
-    padding: 0.1rem 0.5rem;
-    border-radius: 0.3rem;
-    font-weight: 500;
-    font-size: 0.8rem;
-  }
-}
 @keyframes slide-up {
   from {
     opacity: 0;

index.html

@@ -166,7 +166,7 @@
                 </li>
             </ul>
         </section>
-        <section>
+        <section id="projectb_milestones_section">
             <h2>Milestones</h2>
             <ul id="projectb_milestones_wrapper" class="carousel"> </ul>
             <div class="carousel-controls flex gap-0-3">
@@ -313,7 +313,7 @@
             <img id="bitcoin_lineart" src="assets/svg/bitcoin line art.svg" alt="">
         </section>
         <section id="el_salvador_section">
-            <img src="assets/svg/el-salvador.svg" alt="" id="el_salvador_map">
+            <!-- <img src="assets/representational/oswaldo-martinez-bK-SRSgPWz8-unsplash.jpg" alt="" id="el_salvador_map"> -->
             <div class="grid gap-2">
                 <div class="grid">
                     <h4>Why</h4>