mirror of
https://github.com/ENSL/ensl.org.git
synced 2025-01-20 08:21:04 +00:00
Layout and colour improvements
This commit is contained in:
Luke Barratt
parent
8d870af209
commit
3761a73faf
19 changed files with 157 additions and 140 deletions
|
|
@ -47,24 +47,24 @@ $base-border-radius: em(3);
|
|||
*/
|
||||
|
||||
$red: #de8650;
|
||||
$green: #1f7f5c;
|
||||
$blue: #5a9aa8;
|
||||
$green: #68cc90;
|
||||
$blue: #0A8FC8;
|
||||
$purple: #6a5a8c;
|
||||
$gold: #FFD700;
|
||||
|
||||
$dark-blue: #046;
|
||||
$dark-gray: #232323;
|
||||
$dark-blue: #0072A6;
|
||||
$dark-gray: #21262A;
|
||||
|
||||
$medium-gray: #2e2e2e;
|
||||
$medium-gray: #2F383D;
|
||||
|
||||
$light-blue: #F3F3FB;
|
||||
$light-gray: #DDD;
|
||||
$light-blue: #2FB0E7;
|
||||
$light-gray: #ECF1F5;
|
||||
$light-red: #e56c69;
|
||||
$light-yellow: #FFF6BF;
|
||||
$light-green: #1f7f5c;
|
||||
|
||||
$base-body-color: white;
|
||||
$base-font-color: #232323;
|
||||
$base-font-color: $dark-gray;
|
||||
$base-accent-color: $blue;
|
||||
$base-link-color: #285258;
|
||||
$hover-link-color: darken($base-accent-color, 15);
|
||||
|
|
@ -74,7 +74,7 @@ $error-color: $light-red;
|
|||
$notice-color: $light-yellow;
|
||||
$success-color: $light-green;
|
||||
|
||||
$background-primary: #232323;
|
||||
$background-primary: $medium-gray;
|
||||
$background-secondary: #ece9e1;
|
||||
$background-tertiary: #e2dfd8;
|
||||
|
||||
|
|
@ -84,31 +84,37 @@ $text-tertiary: #666666;
|
|||
|
||||
$link-primary: #285258;
|
||||
|
||||
$navbar-primary: #232323;
|
||||
$navbar-secondary: #5a9aa8;
|
||||
$navbar-border: #2e2e2e;
|
||||
$navbar-primary: $blue;
|
||||
$navbar-secondary: $light-blue;
|
||||
$navbar-border: lighten($dark-gray, 10);
|
||||
$navbar-text: white;
|
||||
|
||||
$flash-text: white;
|
||||
$flash-notice: #5a9aa8;
|
||||
$flash-notice: $blue;
|
||||
$flash-success: $green;
|
||||
$flash-warning: $red;
|
||||
$flash-error: #e56c69;
|
||||
|
||||
$input-font-size: em(16);
|
||||
$input-primary: white;
|
||||
$input-secondary: #5a9aa8;
|
||||
$input-secondary: $blue;
|
||||
$input-text: #232323;
|
||||
$input-border-width: em(3);
|
||||
$input-border-colour: darken($light-blue, 10);
|
||||
$input-border-width: em(2);
|
||||
$input-border-colour: darken($light-gray, 10%);
|
||||
$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-width: em(2);
|
||||
$input-dark-border-hover-colour: $blue;
|
||||
$input-dark-border-focus-colour: $green;
|
||||
|
||||
$button-primary: #5a9aa8;
|
||||
$button-primary: $blue;
|
||||
$button-secondary: $green;
|
||||
$button-text: white;
|
||||
|
||||
/*
|
||||
Shadows
|
||||
*/
|
||||
|
||||
$content-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
$comment-image-padding: .7em;
|
||||
$comment-image-width: 4em;
|
||||
$comment-color: $base-font-color;
|
||||
$comment-background: lighten($base-accent-color, 15);
|
||||
$comment-background: $light-gray;
|
||||
$comment-detail-color: transparentize($comment-color, .5);
|
||||
$comment-image-vert-alignment: top;
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ form {
|
|||
}
|
||||
|
||||
.select-wrapper {
|
||||
$select-padding: em(4);
|
||||
$select-padding: em(7);
|
||||
|
||||
background-color: $input-primary;
|
||||
border: $input-border-colour solid $input-border-width;
|
||||
|
|
@ -58,7 +58,8 @@ form {
|
|||
position: relative;
|
||||
margin-left: 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;
|
||||
|
||||
option {
|
||||
|
|
@ -77,20 +78,28 @@ form {
|
|||
font-weight: normal;
|
||||
font-style: normal;
|
||||
position: absolute;
|
||||
top: em(5);
|
||||
right: $input-padding;
|
||||
padding-left: $input-padding;
|
||||
border-left: em(1) solid lighten($input-secondary, 20%);
|
||||
top: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
padding-top: em(6);
|
||||
width: em(36);
|
||||
height: em(32);
|
||||
border-left: $input-border-width solid $input-border-colour;
|
||||
color: $input-border-colour;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: $input-border-width solid lighten($input-secondary, 20%);
|
||||
|
||||
&:after {
|
||||
border-left: $input-border-width solid $input-secondary;
|
||||
color: $base-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: $input-border-width solid $input-secondary;
|
||||
color: $input-secondary;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,9 +120,7 @@ form {
|
|||
|
||||
&:focus {
|
||||
border: $input-border-width solid $input-secondary;
|
||||
color: $input-secondary;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -202,7 +209,7 @@ form.dark {
|
|||
|
||||
button,
|
||||
input {
|
||||
background-color: $purple;
|
||||
background-color: $dark-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
.timestamp {
|
||||
font-size: em(14);
|
||||
border-radius: em(3);
|
||||
background: darken($light-blue, 10);
|
||||
background: $light-blue;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-style: italic;
|
||||
padding: 0 em(6);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
.tabbed {
|
||||
$tabs-border-width: em(1);
|
||||
$tabs-border-colour: darken($light-gray, 10);
|
||||
$tabs-padding-vertical: em(8);
|
||||
$tabs-padding-horizontal: em(16);
|
||||
|
||||
|
|
@ -18,16 +19,21 @@
|
|||
li {
|
||||
float: left;
|
||||
display: block;
|
||||
background-color: $background-primary;
|
||||
background-color: $light-blue;
|
||||
|
||||
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;
|
||||
float: left;
|
||||
display: block;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
border-right: $tabs-border-width solid $tabs-border-colour;
|
||||
}
|
||||
|
||||
&.activeli {
|
||||
z-index: 100;
|
||||
background-color: $blue;
|
||||
|
|
@ -42,7 +48,7 @@
|
|||
|
||||
.tabbed-contents {
|
||||
@include span-columns(12);
|
||||
border: $tabs-border-width solid $navbar-border;
|
||||
border: $tabs-border-width solid $tabs-border-colour;
|
||||
padding: em(20);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,12 +10,7 @@ body {
|
|||
padding: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
background: $dark-blue;
|
||||
@include background-image(linear-gradient($dark-blue, $medium-gray));
|
||||
background-color: $light-gray;
|
||||
}
|
||||
|
||||
#container {
|
||||
|
|
@ -24,13 +19,18 @@ body {
|
|||
|
||||
.wrapper {
|
||||
@include outer-container;
|
||||
max-width: $max-width + $container-padding*2;
|
||||
}
|
||||
|
||||
#content {
|
||||
@include span-columns(12);
|
||||
background: $light-blue;
|
||||
padding: $container-padding $container-padding 0 $container-padding;
|
||||
padding: $container-padding 0;
|
||||
|
||||
&.full {
|
||||
box-shadow: $content-shadow;
|
||||
margin: 0;
|
||||
padding: $container-padding;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
#forums {
|
||||
|
|
@ -39,6 +39,9 @@ body {
|
|||
|
||||
#main {
|
||||
@include span-columns(9 of 12);
|
||||
box-shadow: $content-shadow;
|
||||
background: white;
|
||||
padding: em(20);
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
|
|
@ -55,12 +58,12 @@ h1, h2, h3, h4, h5, h6 {
|
|||
&.fancy {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-color: $light-blue;
|
||||
background-color: white;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-top: 2px solid $light-gray;
|
||||
border-top: 2px solid $medium-gray;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
.footer {
|
||||
$footer-background: $dark-gray;
|
||||
$footer-background: $medium-gray;
|
||||
$footer-color: white;
|
||||
$footer-link-color: transparentize($footer-color, .6);
|
||||
$footer-disclaimer-color: transparentize($footer-color, .6);
|
||||
|
||||
@include outer-container;
|
||||
background: $footer-background;
|
||||
max-width: $max-width + $container-padding*2;
|
||||
|
||||
.content {
|
||||
padding: $container-padding*2 $container-padding;
|
||||
padding: $container-padding*2 0;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
nav.top {
|
||||
$navigation-background: $dark-gray;
|
||||
$navigation-background: $medium-gray;
|
||||
$navigation-color: transparentize(white, 0.3);
|
||||
$navigation-color-hover: white;
|
||||
$navigation-height: em(40);
|
||||
|
|
@ -110,10 +110,11 @@ nav.top {
|
|||
}
|
||||
|
||||
header .banner {
|
||||
padding: 0 $container-padding;
|
||||
@include linear-gradient($dark-blue, #12526E);
|
||||
height: em(295);
|
||||
|
||||
#logo {
|
||||
@include span-columns(8);
|
||||
@include span-columns(9 of 12);
|
||||
min-height: em(200);
|
||||
position: relative;
|
||||
|
||||
|
|
@ -128,12 +129,10 @@ header .banner {
|
|||
}
|
||||
|
||||
#authentication {
|
||||
@include span-columns(4);
|
||||
@include span-columns(3 of 12);
|
||||
height: em(190);
|
||||
margin: em(20) 0;
|
||||
padding: em(20);
|
||||
border: 1px solid $dark-gray;
|
||||
background: $dark-gray;
|
||||
padding: em(20) 0;
|
||||
color: white;
|
||||
|
||||
a {
|
||||
|
|
@ -196,13 +195,14 @@ header .banner {
|
|||
|
||||
.avatar {
|
||||
@include span-columns(12);
|
||||
border: 1px solid $medium-gray;
|
||||
background: $medium-gray;
|
||||
background: transparentize($light-gray, 0.5);
|
||||
margin: 0 em(20) em(20) 0;
|
||||
text-align: center;
|
||||
border-radius: 75px;
|
||||
|
||||
img {
|
||||
padding: em(10);
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
#menu {
|
||||
@include span-columns(12);
|
||||
font-family: $montserrat;
|
||||
background-color: $background-primary;
|
||||
height: em(60);
|
||||
max-height: em(60);
|
||||
margin-top: - em(60);
|
||||
|
||||
nav {
|
||||
@include outer-container;
|
||||
|
|
@ -19,31 +19,23 @@ ul.navigation {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background-color: $navbar-primary;
|
||||
float: left;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
|
||||
.count {
|
||||
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);
|
||||
}
|
||||
width: $max-width/7;
|
||||
border-right: em(1) solid transparent;
|
||||
|
||||
> a {
|
||||
width: auto;
|
||||
width: 100%;
|
||||
color: white;
|
||||
height: em(60);
|
||||
line-height: em(16);
|
||||
padding: em(22);
|
||||
float: left;
|
||||
border-right: em(1) solid $navbar-border;
|
||||
background-color: $navbar-primary;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
|
|
@ -51,6 +43,10 @@ ul.navigation {
|
|||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
|
||||
> a {
|
||||
|
|
@ -81,16 +77,16 @@ ul.navigation {
|
|||
top: em(60);
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
background-color: $navbar-secondary;
|
||||
background-color: $navbar-primary;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
border-bottom: em(1) solid lighten($navbar-secondary, 10%);
|
||||
border-bottom: em(1) solid $navbar-secondary;
|
||||
|
||||
&:first-child {
|
||||
border-top: em(1) solid lighten($navbar-secondary, 10%);
|
||||
border-top: em(1) solid $navbar-secondary;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -105,6 +101,10 @@ ul.navigation {
|
|||
padding: em(22);
|
||||
color: $navbar-text;
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
background: $light-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
|
||||
.widget {
|
||||
@include span-columns(12);
|
||||
box-shadow: $content-shadow;
|
||||
margin-bottom: em(20);
|
||||
padding: em(20);
|
||||
background: $light-gray;
|
||||
background: white;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -17,7 +18,7 @@
|
|||
|
||||
.separator {
|
||||
color: white;
|
||||
background: #5a9aa8;
|
||||
background: $light-blue;
|
||||
padding: em(12) em(24);
|
||||
margin: 0 -20px;
|
||||
margin-bottom: em(12);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ a.button {
|
|||
@include button;
|
||||
|
||||
&.tiny {
|
||||
background-color: transparentize($green, .5);
|
||||
background-color: $green;
|
||||
border-radius: em(14);
|
||||
height: em(25);
|
||||
padding: em(1) em(12);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<footer class="footer">
|
||||
<div class="content">
|
||||
<div class="content wrapper">
|
||||
<div class="footer-links">
|
||||
<ul>
|
||||
<li><h3><%= link_to "Contests", controller: "contests", action: "current" %></h3></li>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -32,7 +32,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="wrapper banner">
|
||||
<div class="banner">
|
||||
<div class="wrapper">
|
||||
<div id="logo">
|
||||
<%= link_to image_tag("logo.png"), root_path %>
|
||||
</div>
|
||||
|
|
@ -44,4 +45,5 @@
|
|||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<nav id="menu">
|
||||
<div class="wrapper">
|
||||
<ul class="navigation">
|
||||
<li><%= active_link_to "News", root_path, active: ["articles", "news_index"] %></li>
|
||||
<li class="dropdown">
|
||||
|
|
@ -33,4 +34,5 @@
|
|||
<li><%= active_link_to "Teams", controller: "teams", action: :index %></li>
|
||||
<li><%= active_link_to "Users", controller: "users", action: :index %></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
<body>
|
||||
<div id="container">
|
||||
<%= render partial: "header" %>
|
||||
<div class="wrapper">
|
||||
<%= render partial: "navigation" %>
|
||||
<div class="wrapper">
|
||||
<div id="content">
|
||||
<div id="main">
|
||||
<%= render partial: "messages" %>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
<body>
|
||||
<div id="container">
|
||||
<%= render partial: "header" %>
|
||||
<div class="wrapper">
|
||||
<%= render partial: "navigation" %>
|
||||
<div id="content">
|
||||
<div class="wrapper">
|
||||
<div id="content" class="full">
|
||||
<div id="forums">
|
||||
<%= render partial: "messages" %>
|
||||
<%= yield %>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
<body>
|
||||
<div id="container">
|
||||
<%= render partial: "header" %>
|
||||
<div class="wrapper">
|
||||
<%= render partial: "navigation" %>
|
||||
<div id="content">
|
||||
<div class="wrapper">
|
||||
<div id="content" class="full">
|
||||
<%= render partial: "messages" %>
|
||||
<%= yield %>
|
||||
<%= render partial: "gather" %>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<%= form_tag({ controller: "users", action: "login" }, { class: "dark" }) do %>
|
||||
<%= form_tag controller: "users", action: "login" do %>
|
||||
<div class="fields">
|
||||
<%= text_field "login", "username", placeholder: "Username" %>
|
||||
<%= password_field "login", "password", placeholder: "Password" %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue