ensl/ensl.org
0
0
Fork 0
mirror of https://github.com/ENSL/ensl.org.git synced 2025-01-26 03:01:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

Layout and colour improvements

Browse source
This commit is contained in:
Luke Barratt 2014-04-18 01:07:07 +01:00
parent dc0603153c
commit 894aca11fd
19 changed files with 157 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
app/assets/stylesheets/_variables.scss
View file

@ -47,24 +47,24 @@ $base-border-radius: em(3);
*/ */
$red: #de8650; $red: #de8650;
$green: #1f7f5c; $green: #68cc90;
$blue: #5a9aa8; $blue: #0A8FC8;
$purple: #6a5a8c; $purple: #6a5a8c;
$gold: #FFD700; $gold: #FFD700;
$dark-blue: #046; $dark-blue: #0072A6;
$dark-gray: #232323; $dark-gray: #21262A;
$medium-gray: #2e2e2e; $medium-gray: #2F383D;
$light-blue: #F3F3FB; $light-blue: #2FB0E7;
$light-gray: #DDD; $light-gray: #ECF1F5;
$light-red: #e56c69; $light-red: #e56c69;
$light-yellow: #FFF6BF; $light-yellow: #FFF6BF;
$light-green: #1f7f5c; $light-green: #1f7f5c;
$base-body-color: white; $base-body-color: white;
$base-font-color: #232323; $base-font-color: $dark-gray;
$base-accent-color: $blue; $base-accent-color: $blue;
$base-link-color: #285258; $base-link-color: #285258;
$hover-link-color: darken($base-accent-color, 15); $hover-link-color: darken($base-accent-color, 15);
@ -74,7 +74,7 @@ $error-color: $light-red;
$notice-color: $light-yellow; $notice-color: $light-yellow;
$success-color: $light-green; $success-color: $light-green;
$background-primary: #232323; $background-primary: $medium-gray;
$background-secondary: #ece9e1; $background-secondary: #ece9e1;
$background-tertiary: #e2dfd8; $background-tertiary: #e2dfd8;
@ -84,31 +84,37 @@ $text-tertiary: #666666;
$link-primary: #285258; $link-primary: #285258;
$navbar-primary: #232323; $navbar-primary: $blue;
$navbar-secondary: #5a9aa8; $navbar-secondary: $light-blue;
$navbar-border: #2e2e2e; $navbar-border: lighten($dark-gray, 10);
$navbar-text: white; $navbar-text: white;
$flash-text: white; $flash-text: white;
$flash-notice: #5a9aa8; $flash-notice: $blue;
$flash-success: $green; $flash-success: $green;
$flash-warning: $red; $flash-warning: $red;
$flash-error: #e56c69; $flash-error: #e56c69;
$input-font-size: em(16); $input-font-size: em(16);
$input-primary: white; $input-primary: white;
$input-secondary: #5a9aa8; $input-secondary: $blue;
$input-text: #232323; $input-text: #232323;
$input-border-width: em(3); $input-border-width: em(2);
$input-border-colour: darken($light-blue, 10); $input-border-colour: darken($light-gray, 10%);
$input-padding: em(11); $input-padding: em(11);
$input-dark-background-colour: $dark-gray; $input-dark-background-colour: $medium-gray;
$input-dark-border-colour: $light-gray; $input-dark-border-colour: $light-gray;
$input-dark-border-width: em(2); $input-dark-border-width: em(2);
$input-dark-border-hover-colour: $blue; $input-dark-border-hover-colour: $blue;
$input-dark-border-focus-colour: $green; $input-dark-border-focus-colour: $green;
$button-primary: #5a9aa8; $button-primary: $blue;
$button-secondary: $green; $button-secondary: $green;
$button-text: white; $button-text: white;
/*
Shadows
*/
$content-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);

2
app/assets/stylesheets/components/_comments.scss
View file

@ -25,7 +25,7 @@
$comment-image-padding: .7em; $comment-image-padding: .7em;
$comment-image-width: 4em; $comment-image-width: 4em;
$comment-color: $base-font-color; $comment-color: $base-font-color;
$comment-background: lighten($base-accent-color, 15); $comment-background: $light-gray;
$comment-detail-color: transparentize($comment-color, .5); $comment-detail-color: transparentize($comment-color, .5);
$comment-image-vert-alignment: top; $comment-image-vert-alignment: top;

27
app/assets/stylesheets/components/_forms.scss
View file

@ -39,7 +39,7 @@ form {
} }
.select-wrapper { .select-wrapper {
$select-padding: em(4); $select-padding: em(7);
background-color: $input-primary; background-color: $input-primary;
border: $input-border-colour solid $input-border-width; border: $input-border-colour solid $input-border-width;
@ -58,7 +58,8 @@ form {
position: relative; position: relative;
margin-left: 0; margin-left: 0;
border: 0; border: 0;
padding: $select-padding em(45) $select-padding $input-padding; margin: 0;
padding: $select-padding em(50) $select-padding $input-padding;
font-size: $input-font-size; font-size: $input-font-size;
option { option {
@ -77,20 +78,28 @@ form {
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
position: absolute; position: absolute;
top: em(5); top: 0;
right: $input-padding; right: 0;
padding-left: $input-padding; text-align: center;
border-left: em(1) solid lighten($input-secondary, 20%); padding-top: em(6);
width: em(36);
height: em(32);
border-left: $input-border-width solid $input-border-colour;
color: $input-border-colour;
} }
&:hover { &:hover {
border: $input-border-width solid lighten($input-secondary, 20%); border: $input-border-width solid lighten($input-secondary, 20%);
&:after {
border-left: $input-border-width solid $input-secondary;
color: $base-font-color;
}
} }
&:focus { &:focus {
border: $input-border-width solid $input-secondary; border: $input-border-width solid $input-secondary;
color: $input-secondary; color: $input-secondary;
background: transparent;
} }
} }
@ -111,9 +120,7 @@ form {
&:focus { &:focus {
border: $input-border-width solid $input-secondary; border: $input-border-width solid $input-secondary;
color: $input-secondary;
outline: none; outline: none;
background: transparent;
} }
} }
@ -202,7 +209,7 @@ form.dark {
button, button,
input { input {
background-color: $purple; background-color: $dark-blue;
} }
} }
} }

3
app/assets/stylesheets/components/_shoutbox.scss
View file

@ -8,7 +8,8 @@
.timestamp { .timestamp {
font-size: em(14); font-size: em(14);
border-radius: em(3); border-radius: em(3);
background: darken($light-blue, 10); background: $light-blue;
color: white;
display: inline-block; display: inline-block;
font-style: italic; font-style: italic;
padding: 0 em(6); padding: 0 em(6);

12
app/assets/stylesheets/components/_tabs.scss
View file

@ -4,6 +4,7 @@
.tabbed { .tabbed {
$tabs-border-width: em(1); $tabs-border-width: em(1);
$tabs-border-colour: darken($light-gray, 10);
$tabs-padding-vertical: em(8); $tabs-padding-vertical: em(8);
$tabs-padding-horizontal: em(16); $tabs-padding-horizontal: em(16);
@ -18,16 +19,21 @@
li { li {
float: left; float: left;
display: block; display: block;
background-color: $background-primary; background-color: $light-blue;
a { a {
border: $tabs-border-width solid $navbar-border; border: $tabs-border-width solid $tabs-border-colour;
border-right: 0;
padding: $tabs-padding-vertical $tabs-padding-horizontal; padding: $tabs-padding-vertical $tabs-padding-horizontal;
float: left; float: left;
display: block; display: block;
color: white; color: white;
} }
&:last-child a {
border-right: $tabs-border-width solid $tabs-border-colour;
}
&.activeli { &.activeli {
z-index: 100; z-index: 100;
background-color: $blue; background-color: $blue;
@ -42,7 +48,7 @@
.tabbed-contents { .tabbed-contents {
@include span-columns(12); @include span-columns(12);
border: $tabs-border-width solid $navbar-border; border: $tabs-border-width solid $tabs-border-colour;
padding: em(20); padding: em(20);
} }

25
app/assets/stylesheets/layout/_body.scss
View file

@ -10,12 +10,7 @@ body {
padding: 0; padding: 0;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
background-color: transparent; background-color: $light-gray;
}
body {
background: $dark-blue;
@include background-image(linear-gradient($dark-blue, $medium-gray));
} }
#container { #container {
@ -24,13 +19,18 @@ body {
.wrapper { .wrapper {
@include outer-container; @include outer-container;
max-width: $max-width + $container-padding*2;
} }
#content { #content {
@include span-columns(12); @include span-columns(12);
background: $light-blue; padding: $container-padding 0;
padding: $container-padding $container-padding 0 $container-padding;
&.full {
box-shadow: $content-shadow;
margin: 0;
padding: $container-padding;
background: white;
}
} }
#forums { #forums {
@ -39,6 +39,9 @@ body {
#main { #main {
@include span-columns(9 of 12); @include span-columns(9 of 12);
box-shadow: $content-shadow;
background: white;
padding: em(20);
} }
#sidebar { #sidebar {
@ -55,12 +58,12 @@ h1, h2, h3, h4, h5, h6 {
&.fancy { &.fancy {
text-align: center; text-align: center;
position: relative; position: relative;
background-color: $light-blue; background-color: white;
&:before { &:before {
content: ""; content: "";
display: block; display: block;
border-top: 2px solid $light-gray; border-top: 2px solid $medium-gray;
width: 100%; width: 100%;
height: 2px; height: 2px;
position: absolute; position: absolute;

6
app/assets/stylesheets/layout/_footer.scss
View file

@ -1,15 +1,13 @@
.footer { .footer {
$footer-background: $dark-gray; $footer-background: $medium-gray;
$footer-color: white; $footer-color: white;
$footer-link-color: transparentize($footer-color, .6); $footer-link-color: transparentize($footer-color, .6);
$footer-disclaimer-color: transparentize($footer-color, .6); $footer-disclaimer-color: transparentize($footer-color, .6);
@include outer-container;
background: $footer-background; background: $footer-background;
max-width: $max-width + $container-padding*2;
.content { .content {
padding: $container-padding*2 $container-padding; padding: $container-padding*2 0;
} }
.footer-links { .footer-links {

18
app/assets/stylesheets/layout/_header.scss
View file

@ -1,5 +1,5 @@
nav.top { nav.top {
$navigation-background: $dark-gray; $navigation-background: $medium-gray;
$navigation-color: transparentize(white, 0.3); $navigation-color: transparentize(white, 0.3);
$navigation-color-hover: white; $navigation-color-hover: white;
$navigation-height: em(40); $navigation-height: em(40);
@ -110,10 +110,11 @@ nav.top {
} }
header .banner { header .banner {
padding: 0 $container-padding; @include linear-gradient($dark-blue, #12526E);
height: em(295);
#logo { #logo {
@include span-columns(8); @include span-columns(9 of 12);
min-height: em(200); min-height: em(200);
position: relative; position: relative;
@ -128,12 +129,10 @@ header .banner {
} }
#authentication { #authentication {
@include span-columns(4); @include span-columns(3 of 12);
height: em(190); height: em(190);
margin: em(20) 0; margin: em(20) 0;
padding: em(20); padding: em(20) 0;
border: 1px solid $dark-gray;
background: $dark-gray;
color: white; color: white;
a { a {
@ -196,13 +195,14 @@ header .banner {
.avatar { .avatar {
@include span-columns(12); @include span-columns(12);
border: 1px solid $medium-gray; background: transparentize($light-gray, 0.5);
background: $medium-gray;
margin: 0 em(20) em(20) 0; margin: 0 em(20) em(20) 0;
text-align: center; text-align: center;
border-radius: 75px;
img { img {
padding: em(10); padding: em(10);
float: left;
} }
} }

36
app/assets/stylesheets/layout/_navigation.scss
View file

@ -5,9 +5,9 @@
#menu { #menu {
@include span-columns(12); @include span-columns(12);
font-family: $montserrat; font-family: $montserrat;
background-color: $background-primary;
height: em(60); height: em(60);
max-height: em(60); max-height: em(60);
margin-top: - em(60);
nav { nav {
@include outer-container; @include outer-container;
@ -19,31 +19,23 @@ ul.navigation {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
background-color: $navbar-primary;
float: left; float: left;
width: 100%;
background: transparent;
> li { > li {
float: left; float: left;
width: $max-width/7;
.count { border-right: em(1) solid transparent;
background-color: #6a5a8c;
display: inline-block;
font-size: em(14);
color: white;
line-height: em(14);
padding: em(5) em(8);
margin-left: em(25);
margin-top: - em(8);
}
> a { > a {
width: auto; width: 100%;
color: white; color: white;
height: em(60); height: em(60);
line-height: em(16); line-height: em(16);
padding: em(22); padding: em(22);
float: left; float: left;
border-right: em(1) solid $navbar-border; background-color: $navbar-primary;
&:hover, &:hover,
&.active { &.active {
@ -51,6 +43,10 @@ ul.navigation {
} }
} }
&:last-child {
border-right: 0;
}
&.icon { &.icon {
> a { > a {
@ -81,16 +77,16 @@ ul.navigation {
top: em(60); top: em(60);
left: 0; left: 0;
min-width: 100%; min-width: 100%;
background-color: $navbar-secondary; background-color: $navbar-primary;
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
li { li {
border-bottom: em(1) solid lighten($navbar-secondary, 10%); border-bottom: em(1) solid $navbar-secondary;
&:first-child { &:first-child {
border-top: em(1) solid lighten($navbar-secondary, 10%); border-top: em(1) solid $navbar-secondary;
} }
&:last-child { &:last-child {
@ -105,6 +101,10 @@ ul.navigation {
padding: em(22); padding: em(22);
color: $navbar-text; color: $navbar-text;
} }
&:hover a {
background: $light-blue;
}
} }
} }
} }

5
app/assets/stylesheets/layout/_sidebar.scss
View file

@ -2,9 +2,10 @@
.widget { .widget {
@include span-columns(12); @include span-columns(12);
box-shadow: $content-shadow;
margin-bottom: em(20); margin-bottom: em(20);
padding: em(20); padding: em(20);
background: $light-gray; background: white;
h4 { h4 {
margin-bottom: 20px; margin-bottom: 20px;
@ -17,7 +18,7 @@
.separator { .separator {
color: white; color: white;
background: #5a9aa8; background: $light-blue;
padding: em(12) em(24); padding: em(12) em(24);
margin: 0 -20px; margin: 0 -20px;
margin-bottom: em(12); margin-bottom: em(12);

2
app/assets/stylesheets/mixins/_buttons.scss
View file

@ -21,7 +21,7 @@ a.button {
@include button; @include button;
&.tiny { &.tiny {
background-color: transparentize($green, .5); background-color: $green;
border-radius: em(14); border-radius: em(14);
height: em(25); height: em(25);
padding: em(1) em(12); padding: em(1) em(12);

2
app/views/application/_footer.html.erb
View file

@ -1,5 +1,5 @@
<footer class="footer"> <footer class="footer">
<div class="content"> <div class="content wrapper">
<div class="footer-links"> <div class="footer-links">
<ul> <ul>
<li><h3><%= link_to "Contests", controller: "contests", action: "current" %></h3></li> <li><h3><%= link_to "Contests", controller: "contests", action: "current" %></h3></li>

9
app/views/application/_gather.html.erb
View file

@ -1,9 +0,0 @@
<div id="gather-status">
<% if cuser && (gather = cuser.gathers.active.ordered.first) %>
<%= link_to t('gather.status.joined'), gather %>
<% elsif Gather.last && (Gather::FULL - Gather.last.gatherers.count) == 12 %>
Be first to join the <%= link_to t('activerecord.models.gather'), Gather.last %>!
<% elsif Gather.last %>
<%= link_to t('activerecord.models.gather'), Gather.last %> running, <%= Gather::FULL - Gather.last.gatherers.count %> more needed.
<% end %>
</div>

4
app/views/application/_header.html.erb
View file

@ -32,7 +32,8 @@
</div> </div>
</div> </div>
</nav> </nav>
<div class="wrapper banner"> <div class="banner">
<div class="wrapper">
<div id="logo"> <div id="logo">
<%= link_to image_tag("logo.png"), root_path %> <%= link_to image_tag("logo.png"), root_path %>
</div> </div>
@ -44,4 +45,5 @@
<% end %> <% end %>
</div> </div>
</div> </div>
</div>
</header> </header>

2
app/views/application/_navigation.html.erb
View file

@ -1,4 +1,5 @@
<nav id="menu"> <nav id="menu">
<div class="wrapper">
<ul class="navigation"> <ul class="navigation">
<li><%= active_link_to "News", root_path, active: ["articles", "news_index"] %></li> <li><%= active_link_to "News", root_path, active: ["articles", "news_index"] %></li>
<li class="dropdown"> <li class="dropdown">
@ -33,4 +34,5 @@
<li><%= active_link_to "Teams", controller: "teams", action: :index %></li> <li><%= active_link_to "Teams", controller: "teams", action: :index %></li>
<li><%= active_link_to "Users", controller: "users", action: :index %></li> <li><%= active_link_to "Users", controller: "users", action: :index %></li>
</ul> </ul>
</div>
</nav> </nav>

2
app/views/layouts/application.html.erb
View file

@ -13,8 +13,8 @@
<body> <body>
<div id="container"> <div id="container">
<%= render partial: "header" %> <%= render partial: "header" %>
<div class="wrapper">
<%= render partial: "navigation" %> <%= render partial: "navigation" %>
<div class="wrapper">
<div id="content"> <div id="content">
<div id="main"> <div id="main">
<%= render partial: "messages" %> <%= render partial: "messages" %>

4
app/views/layouts/forums.html.erb
View file

@ -13,9 +13,9 @@
<body> <body>
<div id="container"> <div id="container">
<%= render partial: "header" %> <%= render partial: "header" %>
<div class="wrapper">
<%= render partial: "navigation" %> <%= render partial: "navigation" %>
<div id="content"> <div class="wrapper">
<div id="content" class="full">
<div id="forums"> <div id="forums">
<%= render partial: "messages" %> <%= render partial: "messages" %>
<%= yield %> <%= yield %>

4
app/views/layouts/full.html.erb
View file

@ -13,9 +13,9 @@
<body> <body>
<div id="container"> <div id="container">
<%= render partial: "header" %> <%= render partial: "header" %>
<div class="wrapper">
<%= render partial: "navigation" %> <%= render partial: "navigation" %>
<div id="content"> <div class="wrapper">
<div id="content" class="full">
<%= render partial: "messages" %> <%= render partial: "messages" %>
<%= yield %> <%= yield %>
<%= render partial: "gather" %> <%= render partial: "gather" %>

2
app/views/widgets/_login.html.erb
View file

@ -1,4 +1,4 @@
<%= form_tag({ controller: "users", action: "login" }, { class: "dark" }) do %> <%= form_tag controller: "users", action: "login" do %>
<div class="fields"> <div class="fields">
<%= text_field "login", "username", placeholder: "Username" %> <%= text_field "login", "username", placeholder: "Username" %>
<%= password_field "login", "password", placeholder: "Password" %> <%= password_field "login", "password", placeholder: "Password" %>