more stuff. yay.

stylesheets/sass/_content.scss

@@ -1,7 +1,4 @@
 #content {
-  margin-left: 250px;
-  margin-right: $pad;
-
   line-height: 15pt;
   font-size: 11pt;
 

stylesheets/sass/screen.scss

@@ -17,10 +17,13 @@ $pad: 20px;
 $fSansSerif: "Noto Sans", Verdana, sans-serif;
 $fSerif: Vollkorn, serif;
 
+
 body {
   background-color: $cMainBG;
   color: $cMainText;
   font-family: $fSansSerif;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .grid {
@@ -54,7 +57,10 @@ body {
 
 #sidebar {
   margin-left: 20px;
-  float: left;
+  width: 200px;
+}
+
+#sidebar-rechts {
   width: 200px;
 }
 
@@ -65,15 +71,20 @@ body {
 #title-bar {
   margin: 20px;
   
-  background: radial_gradient(transparent, transparentize($cMainBG, .2) 60%, $cMainBG 70%) no-repeat center, url("../bg-army.png") no-repeat center;
+  background: radial_gradient(transparent, transparentize($cMainBG, .2) 60%, $cMainBG 70%) no-repeat center, url("../bg-navy.png") no-repeat center;
   background-size: 853px, auto;
+  flex-grow: 1;
+  flex-basis: 100%;
 
-  .logo {
+  a.logo {
     text-align: center;
     font-family: serif;
     font-size: xx-large;
     text-transform: uppercase;
     text-shadow: 1px 1px 2px #111;
+    display: block;
+    text-decoration: none;
+    color: $cMainText;
 
     img {
       height: 70px;
@@ -118,6 +129,10 @@ body {
       color: $cBoxHeading;
       float: right;
     }
+
+    a, a:visited, a:active {
+      color: $cMainBG;
+    }
   }
 
 
@@ -191,55 +206,60 @@ body {
   }
 }
 
-.content-header {
-  text-align: center;
-  border-bottom: 2px solid $cMenuOutline;
+#content {
+  margin-left: $pad;
+  margin-right: $pad;
+  flex-grow: 1;
 
-  .pageTitle {
+  .content-header {
     text-align: center;
-    margin: 0 auto;
-    border-bottom: 30px solid $cMenuOutline;
-    border-right: 20px solid rgba(0, 0, 0, 0);
-    border-left: 20px solid rgba(0, 0, 0, 0);
-    display: inline-block;
-    height: 0;
-    line-height: 32px;
+    border-bottom: 2px solid $cMenuOutline;
 
-    font-family: $fSerif;
-    font-variant: small-caps;
+    .pageTitle {
+      text-align: center;
+      margin: 0 auto;
+      border-bottom: 30px solid $cMenuOutline;
+      border-right: 20px solid rgba(0, 0, 0, 0);
+      border-left: 20px solid rgba(0, 0, 0, 0);
+      display: inline-block;
+      height: 0;
+      line-height: 32px;
 
-    text-shadow: 1px 1px 2px #111;
-    color: $cBoxHeading;
-  }
-}
+      font-family: $fSerif;
+      font-variant: small-caps;
 
-.content-footer {
-  text-align: center;
-  border-top: 1px solid $cMenuOutline;
-  clear: both;
+      text-shadow: 1px 1px 2px #111;
+      color: $cBoxHeading;
+    }
+  }
 
-  .copy {
+  .content-footer {
     text-align: center;
-    border-top: 15px solid $cMenuOutline;
-    border-right: 10px solid rgba(0, 0, 0, 0);
-    border-left: 10px solid rgba(0, 0, 0, 0);
-    display: inline-block;
-    height: 0;
-    line-height: 0;
-    margin: 0; padding: 0;
-    font-size: x-small;
-    color: $cBoxHeading;
-
-    div {
-      position: relative;
-      top: -14px;
+    border-top: 1px solid $cMenuOutline;
+    clear: both;
+
+    .copy {
+      text-align: center;
+      border-top: 15px solid $cMenuOutline;
+      border-right: 10px solid rgba(0, 0, 0, 0);
+      border-left: 10px solid rgba(0, 0, 0, 0);
+      display: inline-block;
+      height: 0;
+      line-height: 0;
+      margin: 0; padding: 0;
+      font-size: x-small;
+      color: $cBoxHeading;
+
+      div {
+        position: relative;
+        top: -14px;
+      }
     }
   }
-}
 
-.content-body {
-  background-color: $cContentBG;
-  padding: $pad;
-
-  @include clearfix;
+  .content-body {
+    background-color: $cContentBG;
+    padding: $pad;
+    @include clearfix;
+  }
 }

stylesheets/screen.css

@@ -78,110 +78,114 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   box-sizing: border-box;
 }
 
-/* line 20, sass/screen.scss */
+/* line 21, sass/screen.scss */
 body {
   background-color: #111;
   color: #ccc;
   font-family: "Noto Sans", Verdana, sans-serif;
+  display: flex;
+  flex-wrap: wrap;
 }
 
-/* line 26, sass/screen.scss */
+/* line 29, sass/screen.scss */
 .grid {
   margin: 20px 0 20px 20px;
 }
-/* line 29, sass/screen.scss */
+/* line 32, sass/screen.scss */
 .grid:after {
   content: '';
   display: table;
   clear: both;
 }
 
-/* line 36, sass/screen.scss */
+/* line 39, sass/screen.scss */
 [class*='col-'] {
   float: left;
   padding-right: 20px;
 }
 
-/* line 41, sass/screen.scss */
+/* line 44, sass/screen.scss */
 .col-twelfth {
   width: 8.33%;
 }
 
-/* line 42, sass/screen.scss */
+/* line 45, sass/screen.scss */
 .col-sixth {
   width: 16.66%;
 }
 
-/* line 43, sass/screen.scss */
+/* line 46, sass/screen.scss */
 .col-quarter {
   width: 25%;
 }
 
-/* line 44, sass/screen.scss */
+/* line 47, sass/screen.scss */
 .col-third {
   width: 33.33%;
 }
 
-/* line 45, sass/screen.scss */
+/* line 48, sass/screen.scss */
 .col-fivetwelfth {
   width: 41.66%;
 }
 
-/* line 46, sass/screen.scss */
+/* line 49, sass/screen.scss */
 .col-half {
   width: 50%;
 }
 
-/* line 47, sass/screen.scss */
+/* line 50, sass/screen.scss */
 .col-seventwelfth {
   width: 58.33%;
 }
 
-/* line 48, sass/screen.scss */
+/* line 51, sass/screen.scss */
 .col-twothird {
   width: 66.66%;
 }
 
-/* line 49, sass/screen.scss */
+/* line 52, sass/screen.scss */
 .col-threequarter {
   width: 75%;
 }
 
-/* line 50, sass/screen.scss */
+/* line 53, sass/screen.scss */
 .col-fivesixth {
   width: 83.33%;
 }
 
-/* line 51, sass/screen.scss */
+/* line 54, sass/screen.scss */
 .col-eleventwelfth {
   width: 91.66%;
 }
 
-/* line 52, sass/screen.scss */
+/* line 55, sass/screen.scss */
 .col-full {
   width: 100%;
 }
 
-/* line 55, sass/screen.scss */
+/* line 58, sass/screen.scss */
 #sidebar {
   margin-left: 20px;
-  float: left;
+  width: 200px;
+}
+
+/* line 63, sass/screen.scss */
+#sidebar-rechts {
   width: 200px;
 }
 
 /* line 1, sass/_content.scss */
 #content {
-  margin-left: 250px;
-  margin-right: 20px;
   line-height: 15pt;
   font-size: 11pt;
 }
-/* line 8, sass/_content.scss */
+/* line 5, sass/_content.scss */
 #content p {
   margin-top: 10px;
   margin-bottom: 10px;
 }
-/* line 13, sass/_content.scss */
+/* line 10, sass/_content.scss */
 #content ul, #content ol {
   list-style: disc outside;
   padding-left: 20px;
@@ -255,32 +259,37 @@ body {
   text-align: left;
 }
 
-/* line 65, sass/screen.scss */
+/* line 71, sass/screen.scss */
 #title-bar {
   margin: 20px;
-  background: radial-gradient(rgba(0, 0, 0, 0), rgba(17, 17, 17, 0.8) 60%, #111111 70%) no-repeat center, url("../bg-army.png") no-repeat center;
+  background: radial-gradient(rgba(0, 0, 0, 0), rgba(17, 17, 17, 0.8) 60%, #111111 70%) no-repeat center, url("../bg-navy.png") no-repeat center;
   background-size: 853px, auto;
+  flex-grow: 1;
+  flex-basis: 100%;
 }
-/* line 71, sass/screen.scss */
-#title-bar .logo {
+/* line 79, sass/screen.scss */
+#title-bar a.logo {
   text-align: center;
   font-family: serif;
   font-size: xx-large;
   text-transform: uppercase;
   text-shadow: 1px 1px 2px #111;
+  display: block;
+  text-decoration: none;
+  color: #ccc;
 }
-/* line 78, sass/screen.scss */
-#title-bar .logo img {
+/* line 89, sass/screen.scss */
+#title-bar a.logo img {
   height: 70px;
   vertical-align: middle;
   background: radial-gradient(#111111, rgba(0, 0, 0, 0));
 }
-/* line 85, sass/screen.scss */
+/* line 96, sass/screen.scss */
 #title-bar .titles {
   display: flex;
   justify-content: space-between;
 }
-/* line 89, sass/screen.scss */
+/* line 100, sass/screen.scss */
 #title-bar .titles .left {
   padding-left: 5px;
   padding-right: 5px;
@@ -292,7 +301,7 @@ body {
   font-size: smaller;
   color: #111;
 }
-/* line 104, sass/screen.scss */
+/* line 115, sass/screen.scss */
 #title-bar .titles .right {
   padding-left: 5px;
   padding-right: 5px;
@@ -307,16 +316,20 @@ body {
   color: #111;
   float: right;
 }
-/* line 124, sass/screen.scss */
+/* line 133, sass/screen.scss */
+#title-bar .titles a, #title-bar .titles a:visited, #title-bar .titles a:active {
+  color: #111;
+}
+/* line 139, sass/screen.scss */
 #title-bar .body {
   display: block;
 }
-/* line 128, sass/screen.scss */
+/* line 143, sass/screen.scss */
 #title-bar .top-menu {
   display: flex;
   width: 100%;
 }
-/* line 132, sass/screen.scss */
+/* line 147, sass/screen.scss */
 #title-bar .top-menu li {
   flex-grow: 1;
   padding: 5px;
@@ -328,18 +341,18 @@ body {
   font-variant: small-caps;
   text-shadow: 1px 1px 2px #111;
 }
-/* line 143, sass/screen.scss */
+/* line 158, sass/screen.scss */
 #title-bar .top-menu li a {
   text-decoration: none;
   color: #ccc;
   display: block;
 }
-/* line 149, sass/screen.scss */
+/* line 164, sass/screen.scss */
 #title-bar .top-menu li:hover {
   background-color: #444;
 }
 
-/* line 158, sass/screen.scss */
+/* line 173, sass/screen.scss */
 .menu a {
   text-decoration: none;
   font-style: italic;
@@ -347,12 +360,12 @@ body {
   color: #ccc;
   display: block;
 }
-/* line 166, sass/screen.scss */
+/* line 181, sass/screen.scss */
 .menu li {
   padding: 7px 0 5px 5px;
   transition: all .3s ease;
 }
-/* line 170, sass/screen.scss */
+/* line 185, sass/screen.scss */
 .menu li:before {
   content: "\f054";
   font-family: FontAwesome, serif;
@@ -362,27 +375,33 @@ body {
   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
   color: transparent;
 }
-/* line 179, sass/screen.scss */
+/* line 194, sass/screen.scss */
 .menu li:hover {
   background-color: #444;
 }
-/* line 182, sass/screen.scss */
+/* line 197, sass/screen.scss */
 .menu li:hover:before {
   color: inherit;
   width: 12px;
 }
-/* line 188, sass/screen.scss */
+/* line 203, sass/screen.scss */
 .menu li.title {
   font-weight: bold;
 }
 
-/* line 194, sass/screen.scss */
-.content-header {
+/* line 209, sass/screen.scss */
+#content {
+  margin-left: 20px;
+  margin-right: 20px;
+  flex-grow: 1;
+}
+/* line 214, sass/screen.scss */
+#content .content-header {
   text-align: center;
   border-bottom: 2px solid silver;
 }
-/* line 198, sass/screen.scss */
-.content-header .pageTitle {
+/* line 218, sass/screen.scss */
+#content .content-header .pageTitle {
   text-align: center;
   margin: 0 auto;
   border-bottom: 30px solid silver;
@@ -396,15 +415,14 @@ body {
   text-shadow: 1px 1px 2px #111;
   color: #111;
 }
-
-/* line 216, sass/screen.scss */
-.content-footer {
+/* line 236, sass/screen.scss */
+#content .content-footer {
   text-align: center;
   border-top: 1px solid silver;
   clear: both;
 }
-/* line 221, sass/screen.scss */
-.content-footer .copy {
+/* line 241, sass/screen.scss */
+#content .content-footer .copy {
   text-align: center;
   border-top: 15px solid silver;
   border-right: 10px solid transparent;
@@ -417,14 +435,13 @@ body {
   font-size: x-small;
   color: #111;
 }
-/* line 233, sass/screen.scss */
-.content-footer .copy div {
+/* line 253, sass/screen.scss */
+#content .content-footer .copy div {
   position: relative;
   top: -14px;
 }
-
-/* line 240, sass/screen.scss */
-.content-body {
+/* line 260, sass/screen.scss */
+#content .content-body {
   background-color: #222;
   padding: 20px;
   overflow: hidden;