Finish new width

src/index.xhtml

@@ -24,27 +24,20 @@
             </div>
         </div>
 
-        <div id="navbar">
-            <div id="navbar-inner">
-                <div>
-                    <!-- Links before the active one -->
-                </div>
-                <a href="index.xhtml" class="active">HOME</a>
-                <div>
-                    <!-- Links after the active one -->
-                </div>
-            </div>
-        </div>
+        <div id="navbar"><div id="navbar-inner">
+            <a href="index.xhtml" class="active">Home</a>
+        </div></div>
 
         <div id="main">
-            <div class="box" id="welcome">
+            <div class="box" id="portrait">
                 <img src="res/nicolas.jpg" alt="Portrait"/>
+            </div>
+            <div class="box" id="welcome">
                     <h1>Welcome!</h1>
                     <p>
-                        My name is <span class="small-caps">Nicolas Lenz</span>, I am 20 years old and I currently study computer science at Technical University Dortmund in Germany.
+                        My name is <span class="small-caps">Nicolas Lenz</span>, I am 21 years old and I currently study computer science at Technical University Dortmund in Germany.
                     </p>
             </div>
-
             <div class="box" id="contact">
                 <h2>Contact</h2>
                 <ul>
@@ -69,6 +62,7 @@
             <div class="box" id="projects">
                 <h2>Projects</h2>
                 <ul>
+                    <li><b><a href="https://git.eisfunke.com/web/online-lenz.de">online-lenz.de</a>:</b> The source code of this page.</li>
                     <li><b><a href="https://eisfunke.com">eisfunke.com</a>:</b> My blog about technology, science, politics and photography.</li>
                     <li><b><a href="https://git.eisfunke.com/research/katrin">katrin</a>:</b> The vague idea of a innovative, dependently-typed functional programming and markup language.</li>
                 </ul>

src/style/stylesheet.scss

@@ -16,6 +16,9 @@ body {
     @extend .bg-background-very-dark;
 }
 
+$content-width: 65rem;
+
+
 // Headers and text
 
 .sans {
@@ -93,6 +96,10 @@ code {
   background-color: rgba(black, 20%);
 }
 
+div {
+    box-sizing: border-box;
+}
+
 // Lists
 
 ul {
@@ -121,11 +128,6 @@ a {
 
 img {
   margin: 5px;
-  &[src="res/nicolas.jpg"] {
-    float: left;
-    height: 260px;
-    margin: -10px 15px -10px -10px;
-  }
   &[src="res/nicolaslenz-qr.svg"] {
     height: 180px;
   }
@@ -137,7 +139,6 @@ img {
     width: 100%;
     height: 40vh;
     // Sets the header image height to 40% of the viewport.
-    // padding-left: 50px
     background-image: url("../res/header.jpg");
     background-repeat: no-repeat;
     background-position: center center;
@@ -148,9 +149,10 @@ img {
     text-shadow: 0 0 8px black;
     z-index: 800;
     div {
-        max-width: 75rem;
+        max-width: $content-width;
         margin: auto auto;
         width: 100%;
+        padding: 10px;
     }
     h1 {
         font-weight: 900;
@@ -171,33 +173,22 @@ img {
 }
 
 #navbar-inner {
-  margin: auto auto;
-  display: flex;
-  color: white;
-  position: sticky;
-  position: -webkit-sticky;
-  top: 0;
-  max-width: 75rem;
-  width: 100%;
-  height: 50px;
-  z-index: 1000;
-  div {
-      float: left;
-      height: 100%;
-      &:first-child {
-          padding-left: 50px;
-          height: 100%;
-          box-shadow: 0 0 5px 1px black;
-      }
-          &:last-child {
-              height: 100%;
-              flex-grow: 1;
-              box-shadow: 0 0 5px 1px black;
-          }
-  }
+    margin: auto auto;
+    padding-left: 10px;
+    padding-right: 10px;
+    display: flex;
+    color: white;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    max-width: $content-width;
+    width: 100%;
+    height: 50px;
+    //z-index: 1000;
     a {
         font-size: 1.5rem;
         font-weight: 200;
+        text-transform: uppercase;
         color: white;
         text-decoration: none;
         text-align: center;
@@ -210,14 +201,14 @@ img {
         padding-left: 15px;
         padding-right: 15px;
         margin: 0;
-        text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
+        text-shadow: 0 0 2.5px rgba(0, 0, 0, 0.95);
         transition: background-color 0.5s;
         &.active {
-            z-index: -20;
+            @extend .bg-primary-light;
+        }
+        &:hover {
+            @extend .bg-primary-dim;
         }
-            &:hover {
-                @extend .bg-primary-dim;
-            }
     }
 }
 
@@ -226,12 +217,16 @@ img {
 #main {
     margin: auto auto;
     padding: 5px;
-    box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
-    max-width: 75rem;
+    max-width: $content-width;
     width: 100%;
-    left: 0;
+    & .breaker {
+        width: 100%;
+        height: 0;
+        margin: 0;
+        padding: 0;
+    }
 }
 
 .box {
@@ -242,24 +237,32 @@ img {
     color: white;
 }
 
-#welcome {
-    flex-basis: 32rem;
+#portrait {
+    flex-basis: 0;
+    background-color: transparent;
+    max-width: 260px;
+    img[src="res/nicolas.jpg"] {
+        float: left;
+        max-height: 260px;
+        margin: -10px -10px -10px -10px;
+    }
 }
 
-#contact {
-    flex-basis: 21rem;
+#welcome {
+    flex-basis: 13rem;
+    flex-grow: 100;
 }
 
-#qr {
-    flex-basis: auto;
+#contact {
+    flex-basis: 23rem;
 }
 
 #involvements {
-    flex-basis: 28rem;
+    flex-basis: 30rem;
 }
 
 #projects {
-    flex-basis: 25rem;
+    flex-basis: 24rem;
 }
 
 #interests {