more stuff. yay.

compnor.php

@@ -39,32 +39,35 @@
             </div>
         </div>
     </div>
-    <div id="sidebar">
-        <div class="box" >
-                <div class="title">Main</div>
+    <div id="flex">
+        <div id="sidebar">
+            <div class="box" >
+                    <div class="title">Main</div>
+                    <div class="body">
+                        <ul class="menu">
+                            <li><a href="#">About COMPNOR</a></li>
+                            <li><a href="#">The Select Comittee</a></li>
+                            <li><a href="#">COMPNOR Charter</a></li>
+                            <li><a href="#">Sub-Adult Group</a></li>
+                        </ul>
+                    </div>
+            </div>
+
+            <div class="box" >
+                <div class="title">Security</div>
                 <div class="body">
                     <ul class="menu">
-                        <li><a href="#">News</a></li>
-                        <li><a href="#">Imperial High Command</a></li>
-                        <li><a href="#">The Grands</a></li>
-                        <li><a href="#">Galactic History</a></li>
+                        <li><a href="#">About the ISB</a></li>
+                        <li><a href="#">Directorate</a></li>
+                        <li><a href="#">Sector Liaisons</a></li>
+                        <li><a href="#">Surveillance</a></li>
+                        <li><a href="#">Adjudication</a></li>
+                        <li><a href="#">Enforcement</a></li>
                     </ul>
                 </div>
-        </div>
-
-        <div class="box" >
-            <div class="title">Recruitment</div>
-            <div class="body">
-                <ul class="menu">
-                    <li><a href="#">Joining the Empire</a></li>
-                    <li><a href="#">Stuff</a></li>
-                    <li><a href="#">Stuff</a></li>
-                    <li><a href="#">Stuff</a></li>
-                </ul>
             </div>
         </div>
-    </div>
-    <div id="content">
+        <div id="content">
         <div class="content-header">
             <div class='pageTitle'>The Commission for the Preservation of the New Order</div>
         </div>
@@ -98,10 +101,11 @@
         <div class="content-footer">
             <div class="copy">
                 <div>
-                    Copyright <span class="fa fa-copyright"></span> 2015 &mdash; The Galactic Empire
+                    Copyright <span class="fa fa-copyright"></span> 2016 &mdash; The Galactic Empire
                 </div>
             </div>
         </div>
     </div>
+    </div>
 </body>
 </html>

stylesheets/sass/_news.scss

@@ -0,0 +1,28 @@
+.news-list {
+  .news-item {
+    .title {
+      font-family: $fSerif;
+      font-variant: small-caps;
+      font-size: larger;
+      text-shadow: 1px 1px 2px #111;
+
+
+      padding-bottom: 5px;
+      border-bottom: 1px solid $cMainText;
+
+      .right {
+        float: right;
+        font-size: small;
+        font-family: $fSansSerif;
+        font-variant: normal;
+        //text-shadow: none;
+      }
+    }
+
+    .body {
+      text-align: justify;
+    }
+
+    margin-bottom: 20px;
+  }
+}

stylesheets/sass/screen.scss

@@ -22,8 +22,11 @@ body {
   background-color: $cMainBG;
   color: $cMainText;
   font-family: $fSansSerif;
+}
+
+#flex {
   display: flex;
-  flex-wrap: wrap;
+  align-content: space-between;
 }
 
 .grid {
@@ -58,14 +61,15 @@ body {
 #sidebar {
   margin-left: 20px;
   width: 200px;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
-#sidebar-rechts {
+#sidebar-right {
   width: 200px;
 }
 
 @import "content";
-
 @import "box";
 
 #title-bar {
@@ -73,8 +77,7 @@ body {
   
   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%;
+
 
   a.logo {
     text-align: center;
@@ -108,7 +111,7 @@ body {
 
       font-size: smaller;
 
-      //text-shadow: 1px 1px 2px #111;
+      text-shadow: 1px 1px 2px #444;
       color: $cBoxHeading;
     }
 
@@ -125,7 +128,7 @@ body {
       font-variant: small-caps;*/
       font-size: smaller;
 
-      //text-shadow: 1px 1px 2px #111;
+      text-shadow: 1px 1px 2px #444;
       color: $cBoxHeading;
       float: right;
     }
@@ -210,6 +213,7 @@ body {
   margin-left: $pad;
   margin-right: $pad;
   flex-grow: 1;
+  width: 200px;
 
   .content-header {
     text-align: center;
@@ -262,4 +266,7 @@ body {
     padding: $pad;
     @include clearfix;
   }
+
 }
+
+@import "news";

stylesheets/screen.css

@@ -3,7 +3,7 @@
  * Import this file using the following HTML or equivalent:
  * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
 @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700|Vollkorn);
-/* line 5, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../home/daniel/.gem/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -25,45 +25,45 @@ time, mark, audio, video {
   vertical-align: baseline;
 }
 
-/* line 22, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../home/daniel/.gem/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1;
 }
 
-/* line 24, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../home/daniel/.gem/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none;
 }
 
-/* line 26, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../home/daniel/.gem/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-/* line 28, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../home/daniel/.gem/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle;
 }
 
-/* line 30, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../home/daniel/.gem/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none;
 }
-/* line 103, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 103, ../../../../../home/daniel/.gem/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q:before, q:after, blockquote:before, blockquote:after {
   content: "";
   content: none;
 }
 
-/* line 32, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../home/daniel/.gem/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none;
 }
 
-/* line 116, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../home/daniel/.gem/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block;
 }
@@ -83,95 +83,101 @@ body {
   background-color: #111;
   color: #ccc;
   font-family: "Noto Sans", Verdana, sans-serif;
+}
+
+/* line 27, sass/screen.scss */
+#flex {
   display: flex;
-  flex-wrap: wrap;
+  align-content: space-between;
 }
 
-/* line 29, sass/screen.scss */
+/* line 32, sass/screen.scss */
 .grid {
   margin: 20px 0 20px 20px;
 }
-/* line 32, sass/screen.scss */
+/* line 35, sass/screen.scss */
 .grid:after {
   content: '';
   display: table;
   clear: both;
 }
 
-/* line 39, sass/screen.scss */
+/* line 42, sass/screen.scss */
 [class*='col-'] {
   float: left;
   padding-right: 20px;
 }
 
-/* line 44, sass/screen.scss */
+/* line 47, sass/screen.scss */
 .col-twelfth {
   width: 8.33%;
 }
 
-/* line 45, sass/screen.scss */
+/* line 48, sass/screen.scss */
 .col-sixth {
   width: 16.66%;
 }
 
-/* line 46, sass/screen.scss */
+/* line 49, sass/screen.scss */
 .col-quarter {
   width: 25%;
 }
 
-/* line 47, sass/screen.scss */
+/* line 50, sass/screen.scss */
 .col-third {
   width: 33.33%;
 }
 
-/* line 48, sass/screen.scss */
+/* line 51, sass/screen.scss */
 .col-fivetwelfth {
   width: 41.66%;
 }
 
-/* line 49, sass/screen.scss */
+/* line 52, sass/screen.scss */
 .col-half {
   width: 50%;
 }
 
-/* line 50, sass/screen.scss */
+/* line 53, sass/screen.scss */
 .col-seventwelfth {
   width: 58.33%;
 }
 
-/* line 51, sass/screen.scss */
+/* line 54, sass/screen.scss */
 .col-twothird {
   width: 66.66%;
 }
 
-/* line 52, sass/screen.scss */
+/* line 55, sass/screen.scss */
 .col-threequarter {
   width: 75%;
 }
 
-/* line 53, sass/screen.scss */
+/* line 56, sass/screen.scss */
 .col-fivesixth {
   width: 83.33%;
 }
 
-/* line 54, sass/screen.scss */
+/* line 57, sass/screen.scss */
 .col-eleventwelfth {
   width: 91.66%;
 }
 
-/* line 55, sass/screen.scss */
+/* line 58, sass/screen.scss */
 .col-full {
   width: 100%;
 }
 
-/* line 58, sass/screen.scss */
+/* line 61, sass/screen.scss */
 #sidebar {
   margin-left: 20px;
   width: 200px;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
-/* line 63, sass/screen.scss */
-#sidebar-rechts {
+/* line 68, sass/screen.scss */
+#sidebar-right {
   width: 200px;
 }
 
@@ -259,15 +265,13 @@ body {
   text-align: left;
 }
 
-/* line 71, sass/screen.scss */
+/* line 75, 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-navy.png") no-repeat center;
   background-size: 853px, auto;
-  flex-grow: 1;
-  flex-basis: 100%;
 }
-/* line 79, sass/screen.scss */
+/* line 82, sass/screen.scss */
 #title-bar a.logo {
   text-align: center;
   font-family: serif;
@@ -278,18 +282,18 @@ body {
   text-decoration: none;
   color: #ccc;
 }
-/* line 89, sass/screen.scss */
+/* line 92, sass/screen.scss */
 #title-bar a.logo img {
   height: 70px;
   vertical-align: middle;
   background: radial-gradient(#111111, rgba(0, 0, 0, 0));
 }
-/* line 96, sass/screen.scss */
+/* line 99, sass/screen.scss */
 #title-bar .titles {
   display: flex;
   justify-content: space-between;
 }
-/* line 100, sass/screen.scss */
+/* line 103, sass/screen.scss */
 #title-bar .titles .left {
   padding-left: 5px;
   padding-right: 5px;
@@ -299,9 +303,10 @@ body {
   height: 0;
   line-height: 22px;
   font-size: smaller;
+  text-shadow: 1px 1px 2px #444;
   color: #111;
 }
-/* line 115, sass/screen.scss */
+/* line 118, sass/screen.scss */
 #title-bar .titles .right {
   padding-left: 5px;
   padding-right: 5px;
@@ -313,23 +318,24 @@ body {
   /*font-family: $fSerif;
   font-variant: small-caps;*/
   font-size: smaller;
+  text-shadow: 1px 1px 2px #444;
   color: #111;
   float: right;
 }
-/* line 133, sass/screen.scss */
+/* line 136, sass/screen.scss */
 #title-bar .titles a, #title-bar .titles a:visited, #title-bar .titles a:active {
   color: #111;
 }
-/* line 139, sass/screen.scss */
+/* line 142, sass/screen.scss */
 #title-bar .body {
   display: block;
 }
-/* line 143, sass/screen.scss */
+/* line 146, sass/screen.scss */
 #title-bar .top-menu {
   display: flex;
   width: 100%;
 }
-/* line 147, sass/screen.scss */
+/* line 150, sass/screen.scss */
 #title-bar .top-menu li {
   flex-grow: 1;
   padding: 5px;
@@ -341,18 +347,18 @@ body {
   font-variant: small-caps;
   text-shadow: 1px 1px 2px #111;
 }
-/* line 158, sass/screen.scss */
+/* line 161, sass/screen.scss */
 #title-bar .top-menu li a {
   text-decoration: none;
   color: #ccc;
   display: block;
 }
-/* line 164, sass/screen.scss */
+/* line 167, sass/screen.scss */
 #title-bar .top-menu li:hover {
   background-color: #444;
 }
 
-/* line 173, sass/screen.scss */
+/* line 176, sass/screen.scss */
 .menu a {
   text-decoration: none;
   font-style: italic;
@@ -360,12 +366,12 @@ body {
   color: #ccc;
   display: block;
 }
-/* line 181, sass/screen.scss */
+/* line 184, sass/screen.scss */
 .menu li {
   padding: 7px 0 5px 5px;
   transition: all .3s ease;
 }
-/* line 185, sass/screen.scss */
+/* line 188, sass/screen.scss */
 .menu li:before {
   content: "\f054";
   font-family: FontAwesome, serif;
@@ -375,32 +381,33 @@ body {
   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
   color: transparent;
 }
-/* line 194, sass/screen.scss */
+/* line 197, sass/screen.scss */
 .menu li:hover {
   background-color: #444;
 }
-/* line 197, sass/screen.scss */
+/* line 200, sass/screen.scss */
 .menu li:hover:before {
   color: inherit;
   width: 12px;
 }
-/* line 203, sass/screen.scss */
+/* line 206, sass/screen.scss */
 .menu li.title {
   font-weight: bold;
 }
 
-/* line 209, sass/screen.scss */
+/* line 212, sass/screen.scss */
 #content {
   margin-left: 20px;
   margin-right: 20px;
   flex-grow: 1;
+  width: 200px;
 }
-/* line 214, sass/screen.scss */
+/* line 218, sass/screen.scss */
 #content .content-header {
   text-align: center;
   border-bottom: 2px solid silver;
 }
-/* line 218, sass/screen.scss */
+/* line 222, sass/screen.scss */
 #content .content-header .pageTitle {
   text-align: center;
   margin: 0 auto;
@@ -415,13 +422,13 @@ body {
   text-shadow: 1px 1px 2px #111;
   color: #111;
 }
-/* line 236, sass/screen.scss */
+/* line 240, sass/screen.scss */
 #content .content-footer {
   text-align: center;
   border-top: 1px solid silver;
   clear: both;
 }
-/* line 241, sass/screen.scss */
+/* line 245, sass/screen.scss */
 #content .content-footer .copy {
   text-align: center;
   border-top: 15px solid silver;
@@ -435,15 +442,40 @@ body {
   font-size: x-small;
   color: #111;
 }
-/* line 253, sass/screen.scss */
+/* line 257, sass/screen.scss */
 #content .content-footer .copy div {
   position: relative;
   top: -14px;
 }
-/* line 260, sass/screen.scss */
+/* line 264, sass/screen.scss */
 #content .content-body {
   background-color: #222;
   padding: 20px;
   overflow: hidden;
   *zoom: 1;
 }
+
+/* line 2, sass/_news.scss */
+.news-list .news-item {
+  margin-bottom: 20px;
+}
+/* line 3, sass/_news.scss */
+.news-list .news-item .title {
+  font-family: Vollkorn, serif;
+  font-variant: small-caps;
+  font-size: larger;
+  text-shadow: 1px 1px 2px #111;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #ccc;
+}
+/* line 13, sass/_news.scss */
+.news-list .news-item .title .right {
+  float: right;
+  font-size: small;
+  font-family: "Noto Sans", Verdana, sans-serif;
+  font-variant: normal;
+}
+/* line 22, sass/_news.scss */
+.news-list .news-item .body {
+  text-align: justify;
+}