Added base CSS for rantology's design

app/assets/stylesheets/_variables.scss

@@ -2,7 +2,7 @@
   Neat Overrides
 */
 
-$max-width: 1140px;
+$max-width: 1020px;
 $gutter: em(20);
 
 /*
@@ -27,13 +27,13 @@ $large-screen-up: new-breakpoint(min-width $large-screen 8);
   Typography
 */
 
-$open-sans: 'Open Sans', sans-serif;
+$inder: 'Inder', sans-serif;
-$montserrat: 'Montserrat', sans-serif;
+$electrolize: 'Electrolize', sans-serif;
 $fontawesome: 'FontAwesome';
-$sans-serif: $open-sans;
+$sans-serif: $electrolize;
 
-$base-font-family: $sans-serif;
+$base-font-family: $inder;
-$header-font-family: $montserrat;
+$header-font-family: $electrolize;
  
 /*
   Sizes
@@ -49,7 +49,7 @@ $base-border-radius: 3px;
 
 $red: #de8650;
 $green: darken(#68cc90, 10);
-$blue: #3379A9;
+$blue: #0e4d78;
 $gold: #FFD700;
 
 $dark-blue: darken($blue, 15);
@@ -58,7 +58,7 @@ $dark-gray: #21262A;
 
 $medium-gray: #2F383D;
 
-$light-blue: darken(#2FB0E7, 5);
+$light-blue: #36b1ff;
 $light-gray: darken(#ECF1F5, 5);
 $light-red: #e56c69;
 $light-yellow: #FFF6BF;

app/assets/stylesheets/components/_forms.scss

@@ -58,7 +58,7 @@ form {
       select {
         @include appearance(none);
         font-size: $input-font-size;
-        font-family: $open-sans;
+        font-family: $sans-serif;
         float: left;
         display: block;
         width: auto;
@@ -146,7 +146,7 @@ form {
 
     textarea {
       padding: $input-padding;
-      font-family: $open-sans;
+      font-family: $sans-serif;
     }
 
     .inputs label.checkbox,

app/assets/stylesheets/components/_tabs.scss

@@ -11,7 +11,7 @@
   ul.tabs {
     @include span-columns(12);
     display: block;
-    font-family: $montserrat;
+    font-family: $header-font-family;
     height: $tabs-height;
     max-height: $tabs-height;
     position: relative;

app/assets/stylesheets/layout/_body.scss

@@ -18,7 +18,12 @@ body#tinymce {
 
 #container {
   min-height: 100%;
-  background-color: $light-gray;
+  background: {
+    color: $blue;
+    image: image-url('layout/background.jpg');
+    position: top center;
+    repeat: no-repeat;  
+  }
 }
 
 .wrapper {
@@ -27,20 +32,10 @@ body#tinymce {
 
 #content {
   @include span-columns(12);
-  padding: $container-padding 0;
+  box-shadow: $content-shadow;
-
+  margin-top: -35px;
-  &.full {
+  padding: 10px $container-padding $container-padding $container-padding;
-    box-shadow: $content-shadow;
+  background: image-url('layout/body-background.png') top center repeat-y;
-    margin: 0;
-    padding: $container-padding;
-    background: white;
-  }
-
-  &.no-body.full {
-    background: transparent;
-    box-shadow: none;
-    padding: $container-padding 0;
-  }
 }
 
 #forums {
@@ -49,10 +44,7 @@ body#tinymce {
 
 #main {
   @include span-columns(9 of 12);
-  border-radius: $base-border-radius;
+  padding: 20px 25px 20px 15px;
-  box-shadow: $content-shadow;
-  background: white;
-  padding: 20px;
 
   &.no-body {
     box-shadow: none;
@@ -81,7 +73,6 @@ h1, h2, h3, h4, h5, h6 {
     clear: both;
     text-align: center;
     position: relative;
-    background-color: white;
 
     &:before {
       content: "";

app/assets/stylesheets/layout/_footer.scss

@@ -1,23 +1,19 @@
 .footer {
-  $footer-background: $medium-gray;
+  $footer-link-color: #5a5a5a;
-  $footer-color: white;
-  $footer-link-color: transparentize($footer-color, .6);
-  $footer-disclaimer-color: transparentize($footer-color, .6);
 
-  background: $footer-background;
+  background: image-url('layout/footer-background.png');
+  height: 155px;
+  max-height: 155px;
 
   .content {
-    padding: $container-padding*2 0;
+    padding-top: $container-padding;
   }
 
   .footer-links {
     @include clearfix;
-    margin-bottom: $base-line-height;
   }
 
   ul {
-    margin-bottom: $base-line-height*2;
-
     @include media($medium-screen) {
       @include span-columns(3);
       @include omega(4n);
@@ -35,29 +31,16 @@
 
   li a {
     color: $footer-link-color;
-
-    &:hover {
-      color: transparentize($footer-color, 0);
-    }
   }
 
-  li h3 {
+  li h3 a {
-    color: $footer-color;
+    text-transform: uppercase;
-    font-size: 1em;
+    color: white;
-    font-weight: 800;
+    font-size: 20px;
-    margin-bottom: .4em;
   }  
 
-  hr {
-    border: 1px solid transparentize($footer-disclaimer-color, .3);
-    margin: 0 auto $base-line-height;
-    width: 12em;
-  }
-
   p {
-    color: $footer-disclaimer-color;
+    color: $footer-link-color;
-    font-size: .9em;
-    line-height: 1.5em;
     margin: auto;
     max-width: 35em;
     text-align: center;

app/assets/stylesheets/layout/_header.scss

@@ -3,38 +3,34 @@
 */
 
 header .banner {  
-  @include linear-gradient($dark-blue, $deep-blue);
+  height: 125px;
-  height: 170px;
 
   #logo {
     @include span-columns(9 of 12);
-    min-height: 220px;
+    min-height: 180px;
     position: relative;
 
     img {
-      height: 200px;
+      height: 180px;
       position: absolute;
-      top: 15px;
+      top: 30px;
-      left: -40px;
+      left: -10px;
       z-index: 1;
     }
   }
 
   #authentication {
     @include span-columns(3 of 12);
-    padding: 20px 0;
+    padding: 30px 0;
     color: white;
+    line-height: 16px;
 
     .logged {
-      padding-top: 10px;
+      position: relative;
     }
 
     a {
-      color: white;
+      color: #497588;
-
-      &:hover {
-        color: $light-blue;
-      }
     }
 
     form {
@@ -74,8 +70,9 @@ header .banner {
     }
 
     .links {
-      @include span-columns(7);
+      float: right;
       position: relative;
+      padding-right: 80px;
 
       li {
         text-align: right;
@@ -85,37 +82,27 @@ header .banner {
         display: inline-block;
         width: 1em;
         text-align: center;
-        margin: 0 10px;
+        margin: 0 5px;
       }
     }
 
-    .profile {
+    .avatar {
-      @include span-columns(5);
+      box-shadow: $content-shadow;
+      border-radius: $base-border-radius;
+      border: 1px solid #61beff;
+      text-align: center;
       vertical-align: middle;
       position: relative;
-
+      float: left;
-      .avatar {
+      height: 0;
-        box-shadow: $content-shadow;
+      background-size: cover;
-        border-radius: $base-border-radius;
+      position: absolute;
-        border: 2px solid $blue;
+      right: 0;
-        text-align: center;
+      top: 0;
-        vertical-align: middle;
+      background-position: center;
-        position: relative;
+      background-repeat: no-repeat;
-        width: 100%;
+      height: 75px;
-        padding-bottom: 96%;
+      width: 75px;
-        float: left;
-        height: 0;
-        background-size: cover;
-        position: absolute;
-        background-position: center;
-        background-repeat: no-repeat;
-        height: 100%;
-        width: 100%;
-      }
-
-      .timezone {
-        text-align: center;
-      }
     }
   }
 }

app/assets/stylesheets/layout/_navigation.scss

@@ -6,10 +6,11 @@ $navigation-height: 50px;
 
 #menu {
   @include span-columns(12);
-  font-family: $montserrat;
+  font-family: $header-font-family;
   height: $navigation-height;
-  margin-top: - $navigation-height;
+  margin-top: -50px;
-  background: $blue;
+  background: image-url('layout/nav-background.png') top center repeat-x;
+  height: 100px;
   
   nav {
     @include outer-container;
@@ -23,73 +24,63 @@ ul.navigation {
   padding: 0;
   list-style: none;
   float: right;
-  background: transparent;
   max-width: $max-width;
   max-height: $navigation-height;
+  margin-top: 5px;
 
   > li {
     float: left;
-    border-left: 1px solid $dark-blue;
+    border: none;
-
-    .count {
-      position: absolute;
-      top: 16px;
-      right: 12px;
-      border-radius: $base-border-radius;
-      background-color: $light-blue;
-      display: inline-block;
-      color: white;
-      line-height: 18px;
-      padding: 0 4px;
-      font-size: 12px;
-      font-weight: bold;
-    }
 
     a {
       font-weight: 400;
       font-size: 15px;
       height: $navigation-height;
       line-height: $navigation-height;
-      padding: 0 50px 0 20px;
+      padding: 0 20px;
+      color: #5f5f5f;
+      text-transform: uppercase;
+      border-top: 1px solid #54585b;
+
+      &:before,
+      &:after {
+        @include box-sizing(border-box);
+        display: block;
+        content: '';
+        position: absolute;
+        width: 1px;
+        height: 100%;
+        top: 0;
+      }
+      
+      &:before {
+        @include linear-gradient(#54585b, #15181a);
+        left: 0;
+      }
+
+      &:after {
+        @include linear-gradient(#54585b, #15181a);
+        right: -1px;
+      }
     }
 
     > a {
       width: 100%;
-      color: white;
       float: left;
       position: relative;
-      background-color: $navbar-primary;
+      border-top: 1px solid #266d98;
 
       &:hover,
       &.active {
-        background-color: $navbar-secondary;
+        @include background-image(radial-gradient(50% -10%, ellipse cover, transparentize(#2abdfb, 0.6), transparent 60%));
+        color: #3dcfff;
 
-        .count {
+        &:before,
-          background-color: lighten($light-blue, 20);
+        &:after {
+          @include linear-gradient(#266d98, #15181a);
+          z-index: 100;
         }
       }
-
-      &.gathers {
-        padding-right: 65px;
-      }
-    }
-
-    &:last-child {
-      border-right: 1px solid $dark-blue;
-    }
-
-    &.icon {
-
-      i {
-        color: white;
-        max-height: $navigation-height;
-        position: absolute;
-        top: 0;
-        right: 0;
-        font-size: 18px;
-        line-height: 1em;
-        padding: $navigation-height/3;
-      }
     }
 
     &.dropdown {
@@ -105,7 +96,6 @@ ul.navigation {
         top: $navigation-height;
         left: 0;
         min-width: 100%;
-        background-color: $navbar-primary;
         list-style: none;
         padding: 0;
         margin: 0;
@@ -114,21 +104,11 @@ ul.navigation {
       &:hover {
 
         ul {
-          visibility: visible;
+          display: none;
           opacity: 1;
           pointer-events: auto;
 
-
           li {
-            border-bottom: 1px solid $navbar-secondary;
-
-            &:first-child {
-              border-top: 1px solid $navbar-secondary;
-            }
-
-            &:last-child {
-              border-bottom: none;
-            }
             
             a {
               white-space: nowrap;
@@ -138,7 +118,7 @@ ul.navigation {
             }
 
             &:hover a {
-              background: $light-blue;
+              
             }
           }
         }

app/assets/stylesheets/layout/_sidebar.scss

@@ -2,19 +2,27 @@
 
   .widget {
     @include span-columns(12);
-    box-shadow: $content-shadow;
     margin-bottom: $container-padding;
-    border-radius: $base-border-radius;
+    font-family: $header-font-family;
-    padding: 20px;
+    color: white;
-    background: white;
+    padding-top: 20px;
+    position: relative;
+    
+    &:before {
+      content: '';
+      position: absolute;
+      width: 265px;
+      height: 75px;
+      background: image-url('layout/sidebar-shadow.png') top center no-repeat;
+      top: 0;
+      right: -15px;
+    }
 
     h4 {
-      @include linear-gradient($blue, $dark-blue);
+      font-family: 'Impact';
-      border-radius: $base-border-radius $base-border-radius 0 0;
+      text-align: center;
-      margin-bottom: 20px;
+      margin-bottom: 25px;
-      padding: 10px 20px;
+      color: $light-blue;
-      margin: -20px -20px 20px -20px;
-      color: white;
     }
 
     .widget-content-wrapper {
@@ -22,14 +30,21 @@
       font-size: 12px;
     }
 
+    a {
+      color: $light-blue;
+    }
+
     .separator {
-      color: $dark-blue;
+      border-radius: 10px 0 0 10px;
-      background: transparentize($light-blue, 0.75);
+      color: white;
+      background: #5a5a5a;
       padding: 0 20px;
-      margin: 0 -20px;
+      margin: 0 -15px 0 0;
       margin-bottom: 12px;
       font-weight: 600;
-      line-height: 35px;
+      line-height: 30px;
+      text-align: right;
+      font-family: $header-font-family;
 
       a {
         color: $dark-blue;
@@ -37,19 +52,48 @@
       }
     }
 
+    input[type=text] {
+      background: #0e1010;
+      border: 1px solid #494949;
+    }
+
+    .controls {
+      text-align: center;
+    }
+
+    .button,
+    .controls input {
+      @include linear-gradient(#585858, #585858);
+      font-family: 'Impact';
+      color: white;
+      border-radius: 10px;
+      background: #585858;
+      border: 0;
+      line-height: 30px;
+      height: 30px;
+      width: 175px;
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+      font-size: 18px;
+      display: inline-block;
+      float: none;
+    }
+
     &:last-child {
       margin-bottom: 0;
     }
   }
 
   .calendar {
-    h4 {
+    .entry {
-      margin-bottom: 0;
+      margin-bottom: 20px;
     }
 
-    max-height: 400px;
+    .time {
-    overflow-x: hidden;
+      float: right;
-    overflow-y: scroll;
+      margin-left: 10px;
+    }
   }
 
   .shoutbox {
@@ -61,13 +105,34 @@
       @include span-columns(12);
       margin-bottom: 10px;
     }
+
+    .shoutmsg {
+      display: block;
+      clear: both;
+
+      .user {
+        float: left;
+        padding: 0 5px 5px 0;
+
+        .delete {
+          float: left;
+        }
+
+        .username {
+          clear: right;
+          display: block;
+        }
+
+        .time {
+          clear: left;
+          display: block;
+        }
+      }
+    }
   }
 
   .highlights,
   .posts {
-    h4 {
-      margin-bottom: 0;
-    }
 
     ol {
       margin-bottom: 20px;

app/assets/stylesheets/layout/_typography.scss

@@ -2,8 +2,8 @@
   Typography
 */
 
-@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
+@import url(http://fonts.googleapis.com/css?family=Electrolize);
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
+@import url(http://fonts.googleapis.com/css?family=Inder);
 
 body {
   color: $base-font-color;

app/assets/stylesheets/mixins/_buttons.scss

@@ -7,7 +7,7 @@
 
   @include linear-gradient($blue, $dark-blue);
   border-radius: $base-border-radius;
-  font-family: $montserrat;
+  font-family: $header-font-family;
   font-size: 14px;
   background-color: $background;
   color: $text;

app/assets/stylesheets/pages/_forums.scss

@@ -52,7 +52,7 @@ div#categories {
       @include linear-gradient($blue, $dark-blue);
       padding-top: 0.75em;
       padding-bottom: 0.75em;
-      font-family: $montserrat;
+      font-family: $header-font-family;
       font-size: 16px;
       color: white;
 
@@ -121,7 +121,7 @@ div#categories {
     @include linear-gradient($blue, $dark-blue);
     padding-top: 0.75em;
     padding-bottom: 0.75em;
-    font-family: $montserrat;
+    font-family: $header-font-family;
     font-size: 16px;
     color: white;
 

app/assets/stylesheets/pages/_matches.scss

@@ -47,7 +47,7 @@ div#match {
     .vs {
       margin: 0 auto;
       display: block;
-      font: $title-height/2 $montserrat;
+      font: $title-height/2 $header-font-family;
       border-radius: 50px;
       background: $blue;
       width: $title-height;
@@ -98,7 +98,7 @@ div#match {
 
       .score-1,
       .score-2 {
-        font: $title-height/2 $montserrat;
+        font: $title-height/2 $header-font-family;
         color: white;
         width: 50%;
         position: absolute;

app/assets/stylesheets/pages/_news.scss

@@ -46,19 +46,27 @@ div.article {
 
   &.preview {
     @include span-columns(12);
-    border-radius: $base-border-radius;
+    padding: 20px 20px 20px 20px;
-    background: white;
-    padding: 20px;
     margin-bottom: 20px;
-    box-shadow: $light-shadow;
+    margin-left: -10px;
+    box-shadow: $content-shadow;
     border: 0;
 
     .content {
       margin-bottom: 10px;
     }
 
+    .author {
+      color: #8f8f8f;
+    }
+
+    .comments a {
+      color: #404040;
+    }
+
     h2 {
       margin: 0 0 .5em 0;
+      font-family: 'Impact';
     }
   }
 }

app/views/application/_footer.html.erb

@@ -24,7 +24,6 @@
         <li><%= link_to "Rules", "/topics/12" %></li>
       </ul>
     </div>
-    <hr>
     <p>&copy; <%= Time.zone.now.year %> NSL</p>
   </div>
 </footer>

app/views/application/_navigation.html.erb

@@ -3,12 +3,12 @@
     <ul class="navigation">
       <li class="icon">
         <%= active_link_to root_path, active: ["articles", "news_index"], class: 'news' do %>
-          News <%= icon 'list-alt' %>
+          News
         <% end %>
       </li>
       <li class="dropdown icon">
         <%= active_link_to controller: "contests", action: "current", class: 'contests' do %>
-          Contests <%= icon 'trophy' %>
+          Contests
         <% end %>
         <ul>
           <li><%= link_to "Rules", latest_rules %></li>
@@ -20,7 +20,6 @@
       <li class="dropdown">
         <%= active_link_to Gather.last, class: 'gathers' do %>
           Gathers 
-          <span class="count"><%= Gather.player_count_for_game('NS2') %>/<%= Gather::FULL %></span>
         <% end %>
         
         <ul>
@@ -30,7 +29,7 @@
       </li>
       <li class="dropdown icon">
         <%= active_link_to articles_path, class: 'articles' do %>
-          Articles <%= icon 'file-text' %>
+          Articles
         <% end %>
         <ul>
           <li><%= link_to "Hall of Fame", article_url(Article::HOF) %></li>
@@ -41,7 +40,7 @@
       </li>
       <li class="dropdown icon">
         <%= active_link_to forums_path, active: [["forums", "topics"]], class: 'forums' do %>
-          Forums <%= icon 'comments' %>
+          Forums
         <% end %>
         <ul>
           <li><%= link_to "Index", forums_path %></li>
@@ -50,12 +49,12 @@
       </li>
       <li class="icon">
         <%= active_link_to controller: "teams", action: :index, class: 'teams' do %>
-          Teams <%= icon 'users' %>
+          Teams
         <% end %>
       </li>
       <li class="dropdown icon">
         <%= active_link_to controller: "users", action: :index, class: 'users' do %>
-          Users <%= icon 'user' %>
+          Users
         <% end %>
         <ul>
           <li><%= link_to "Staff", controller: "about", action: "staff" %></li>

app/views/layouts/application.html.erb

@@ -22,7 +22,7 @@
           </div>
           <div id="sidebar">
             <%= yield :sidebar %>
-            <% ['calendar', 'shoutbox', 'highlights', 'posts', 'poll'].each do |widget| %>
+            <% ['calendar', 'shoutbox', 'posts', 'poll'].each do |widget| %>
               <%= render partial: "widgets/#{widget}" %>  
             <% end %>
           </div>

app/views/polls/_show.html.erb

@@ -16,6 +16,10 @@
       </p>
     <% end %>
   </div>
+
+  <div class="controls">
+    <%= link_to "Archive", polls_path, class: "button" %>  
+  </div>
 </div>
 
-<%= link_to "Archive", polls_path, class: "button" %>
+

app/views/shoutmsgs/_shoutmsg.html.erb

@@ -1,12 +1,12 @@
 <div class="shoutmsg">
-  <% if shoutmsg.can_destroy? cuser %>
+  <div class="user">
-    <%= link_to icon('times'), shoutmsg, method: :delete %>
+    <span class="username">
-  <% end %>
+      <%= namelink shoutmsg.user %>
-
+    </span>
-  <span class="timestamp">
+    <span class="time">
-    <%= shoutmsg.created_at ? shoutmsg.created_at.strftime("%H:%M") : Time.now.strftime("%H:%M") %>
+      <%= shoutmsg.created_at ? shoutmsg.created_at.strftime("%H:%M") : Time.now.strftime("%H:%M") %>
-  </span>
+    </span>  
-
+  </div>
-  <%= namelink shoutmsg.user %>:
+    
-  <%= shoutmsg.text %><br />
+  <%= shoutmsg.text %>
 </div>

app/views/widgets/_calendar.html.erb

@@ -7,8 +7,10 @@
         <div class="separator"><%= day_events.first.start.strftime("%A, %e %B") %></div>
           <% day_events.each do |event| %>
             <div class="entry">
-              <p class="summary"><%= event.formatted_summary %></p>
+              <p class="summary">
-              <p class="time"><%= event.start.strftime("%H:%M %Z") %></p>
+                <span class="time"><%= event.start.strftime("%H:%M %Z") %></span>
+                <%= event.formatted_summary %>
+              </p>
             </div>
           <% end %>
       <% end %>

app/views/widgets/_logged.html.erb

@@ -36,7 +36,5 @@
     </ul>
   </div>
 
-  <div class="profile">
+  <div class="avatar" style="background-image: url('<%= cuser.profile.avatar.url %>')"></div>
-    <div class="avatar" style="background-image: url('<%= cuser.profile.avatar.url %>')"></div>
-  </div>
 </div>

config/deploy/staging.rb

@@ -1,4 +1,4 @@
-set :branch, 'feature-redesign'
+set :branch, 'feature-redesign-rantology'
 set :deploy_to, '/var/www/virtual/ensl.org/staging/rails'
 
 set :rails_env, 'staging'