Add .title-footer

- Incomplete

css/about.css

@@ -17,13 +17,25 @@ main {
 .section {
   scroll-snap-align: start;
   height: 90vh;
-  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 1rem;
   box-sizing: border-box;
-  position: relative;
+  margin: 0;
+}
+.section .title-footer {
+  position: sticky;
+  top: 0;
+  height: 10vh;
+  width: 100%;
+  margin: 0;
+  z-index: 2;
+  text-align: left;
+  font-size: 2rem;
+  text-shadow: 0 0 5px #000;
+  transition: top 0.3s ease;
+  background-color: white;
+  color: purple;
 }
 .section::before {
   content: "";
@@ -43,6 +55,7 @@ main {
   z-index: 1;
   text-align: center;
   max-width: 800px;
+  margin: 0 2rem;
 }
 
 h2 {
@@ -74,12 +87,12 @@ footer {
 }
 .section1 .content {
   text-align: left;
-  margin-left: -30rem;
+  max-width: 1024px;
+  margin: 4rem auto auto;
 }
 .section1 .content .portrait {
   text-align: right;
   margin-top: 0;
-  margin-right: -25rem;
 }
 .section1 .content .portrait img {
   width: 350px;
@@ -152,22 +165,34 @@ footer {
     color: #fff;
   }
 }
-.lastsection {
-  height: 100vh;
+.section2 {
+  background-color: orange;
 }
-
 .section2::before {
   background-image: url("https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg");
 }
 
+.lastsection {
+  height: 100vh;
+}
+
+.section3 {
+  background-color: red;
+}
 .section3::before {
   background-image: url("https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg");
 }
 
+.section4 {
+  background-color: green;
+}
 .section4::before {
   background-image: url("https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg");
 }
 
+.section5 {
+  background-color: blue;
+}
 .section5::before {
   background-image: url("https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg");
 }

html/about.html

@@ -25,15 +25,19 @@
     </section>
 
     <section class="section section2" id="about">
-      <div class="content">
+      <a class="title-footer">
         <h2>About Me</h2>
+      </a>
+      <div class="content">
         <p>A short, informal overview about who you are and what you enjoy doing.</p>
       </div>
     </section>
 
     <section class="section section3" id="skills">
-      <div class="content">
+      <a class="title-footer">
         <h2>Skills</h2>
+      </a>
+      <div class="content">
         <ul>
           <li>Web development</li>
           <li>Linux & system tinkering</li>
@@ -44,15 +48,19 @@
     </section>
 
     <section class="section section4" id="projects">
-      <div class="content">
+      <a class="title-footer">
         <h2>Projects</h2>
+      </a>
+      <div class="content">
         <p>A few interesting things I've made or contributed to.</p>
       </div>
     </section>
 
     <section class="section section5 lastsection" id="contact">
-      <div class="content">
+      <a class="title-footer">
         <h2>Contact</h2>
+      </a>
+      <div class="content">
         <p>Email: you@example.com<br />Mastodon / GitHub / etc.</p>
       </div>
       <footer>

scss/about.scss

@@ -1,27 +1,27 @@
 @use "about/base";
 @use "about/section1";
+@use "about/section2";
 @use "about/section5";
 
-.section2 {
-    &::before {
-      background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');
-    }
-}
+
 
 .section3 {
   &::before {
     background-image: url('https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg');
   }
+  background-color: red;
 }
 
 .section4 {
   &::before {
     background-image: url('https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg');
   }
+  background-color: green;
 }
 
 .section5 {
   &::before {
     background-image: url('https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg');
   }
+  background-color: blue;
 }

scss/about/_base.scss

@@ -19,13 +19,30 @@ main {
 .section {
   scroll-snap-align: start;
   height: 90vh;
-  display: flex;
+  //display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 1rem;
+  //padding: 1rem;
   box-sizing: border-box;
-  position: relative;
+  //position: relative;
+  margin:0; 
+
+  .title-footer {
+    position: sticky;
+    top: 0;
+    height: 10vh;
+    width: 100%;
+    margin: 0;
+    z-index: 2;
+    text-align: left;
+    //color: white;
+    font-size: 2rem;
+    text-shadow: 0 0 5px #000;
+    transition: top 0.3s ease;
+    background-color: white;
+    color: purple;
+  }
 
   &::before {
     content: "";
@@ -43,6 +60,7 @@ main {
     z-index: 1;
     text-align: center;
     max-width: 800px;
+    margin: 0 2rem;
   }
 }
 

scss/about/_section1.scss

@@ -9,12 +9,13 @@
 
     .content {
       text-align: left;
-      margin-left: -30rem;
+      max-width: 1024px;
+      margin: 4rem auto auto;
 
       .portrait {
         text-align: right;
         margin-top: 0;
-        margin-right: -25rem;
+        //margin-right: -25rem;
     
         img {
           width: 350px;

scss/about/_section2.scss

@@ -0,0 +1,6 @@
+.section2 {
+    &::before {
+      background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');
+    }
+    background-color: orange;
+}