ensl/ensl.org
0
0
Fork 0
mirror of https://github.com/ENSL/ensl.org.git synced 2024-12-26 12:30:48 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added base CSS for rantology's design

Browse source
This commit is contained in:
Luke Barratt 2014-05-03 02:21:29 +01:00
parent b883b3de6c
commit cfb406cf3e
28 changed files with 233 additions and 217 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/layout/background.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
app/assets/images/layout/body-background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
app/assets/images/layout/footer-background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
app/assets/images/layout/images/body-background_10.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
app/assets/images/layout/images/sidebar-shadow_07.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
app/assets/images/layout/nav-background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
app/assets/images/layout/sidebar-shadow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.2 KiB

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

@ -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;
$montserrat: 'Montserrat', sans-serif;
$inder: 'Inder', sans-serif;
$electrolize: 'Electrolize', sans-serif;
$fontawesome: 'FontAwesome';
$sans-serif: $open-sans;
$sans-serif: $electrolize;
$base-font-family: $sans-serif;
$header-font-family: $montserrat;
$base-font-family: $inder;
$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;

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

@ -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,

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

@ -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;

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

@ -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;
&.full {
box-shadow: $content-shadow;
margin: 0;
padding: $container-padding;
background: white;
}
&.no-body.full {
background: transparent;
box-shadow: none;
padding: $container-padding 0;
}
box-shadow: $content-shadow;
margin-top: -35px;
padding: 10px $container-padding $container-padding $container-padding;
background: image-url('layout/body-background.png') top center repeat-y;
}
#forums {
@ -49,10 +44,7 @@ body#tinymce {
#main {
@include span-columns(9 of 12);
border-radius: $base-border-radius;
box-shadow: $content-shadow;
background: white;
padding: 20px;
padding: 20px 25px 20px 15px;
&.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: "";

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

@ -1,23 +1,19 @@
.footer {
$footer-background: $medium-gray;
$footer-color: white;
$footer-link-color: transparentize($footer-color, .6);
$footer-disclaimer-color: transparentize($footer-color, .6);
$footer-link-color: #5a5a5a;
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 {
color: $footer-color;
font-size: 1em;
font-weight: 800;
margin-bottom: .4em;
li h3 a {
text-transform: uppercase;
color: white;
font-size: 20px;
}
hr {
border: 1px solid transparentize($footer-disclaimer-color, .3);
margin: 0 auto $base-line-height;
width: 12em;
}
p {
color: $footer-disclaimer-color;
font-size: .9em;
line-height: 1.5em;
color: $footer-link-color;
margin: auto;
max-width: 35em;
text-align: center;

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

@ -3,38 +3,34 @@
*/
header .banner {
@include linear-gradient($dark-blue, $deep-blue);
height: 170px;
height: 125px;
#logo {
@include span-columns(9 of 12);
min-height: 220px;
min-height: 180px;
position: relative;
img {
height: 200px;
height: 180px;
position: absolute;
top: 15px;
left: -40px;
top: 30px;
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;
&:hover {
color: $light-blue;
}
color: #497588;
}
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 {
@include span-columns(5);
.avatar {
box-shadow: $content-shadow;
border-radius: $base-border-radius;
border: 1px solid #61beff;
text-align: center;
vertical-align: middle;
position: relative;
.avatar {
box-shadow: $content-shadow;
border-radius: $base-border-radius;
border: 2px solid $blue;
text-align: center;
vertical-align: middle;
position: relative;
width: 100%;
padding-bottom: 96%;
float: left;
height: 0;
background-size: cover;
position: absolute;
background-position: center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
.timezone {
text-align: center;
}
float: left;
height: 0;
background-size: cover;
position: absolute;
right: 0;
top: 0;
background-position: center;
background-repeat: no-repeat;
height: 75px;
width: 75px;
}
}
}

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

@ -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;
background: $blue;
margin-top: -50px;
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;
.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;
}
border: none;
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 {
background-color: lighten($light-blue, 20);
&:before,
&: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;
}
}
}

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

@ -2,19 +2,27 @@
.widget {
@include span-columns(12);
box-shadow: $content-shadow;
margin-bottom: $container-padding;
border-radius: $base-border-radius;
padding: 20px;
background: white;
font-family: $header-font-family;
color: 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);
border-radius: $base-border-radius $base-border-radius 0 0;
margin-bottom: 20px;
padding: 10px 20px;
margin: -20px -20px 20px -20px;
color: white;
font-family: 'Impact';
text-align: center;
margin-bottom: 25px;
color: $light-blue;
}
.widget-content-wrapper {
@ -22,14 +30,21 @@
font-size: 12px;
}
a {
color: $light-blue;
}
.separator {
color: $dark-blue;
background: transparentize($light-blue, 0.75);
border-radius: 10px 0 0 10px;
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 {
margin-bottom: 0;
.entry {
margin-bottom: 20px;
}
max-height: 400px;
overflow-x: hidden;
overflow-y: scroll;
.time {
float: right;
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;

4
app/assets/stylesheets/layout/_typography.scss
View file

@ -2,8 +2,8 @@
Typography
*/
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@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=Electrolize);
@import url(http://fonts.googleapis.com/css?family=Inder);
body {
color: $base-font-color;

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

@ -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;

4
app/assets/stylesheets/pages/_forums.scss
View file

@ -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;

4
app/assets/stylesheets/pages/_matches.scss
View file

@ -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;

16
app/assets/stylesheets/pages/_news.scss
View file

@ -46,19 +46,27 @@ div.article {
&.preview {
@include span-columns(12);
border-radius: $base-border-radius;
background: white;
padding: 20px;
padding: 20px 20px 20px 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';
}
}
}

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

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

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

@ -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>

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

@ -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>

6
app/views/polls/_show.html.erb
View file

@ -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" %>

20
app/views/shoutmsgs/_shoutmsg.html.erb
View file

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

6
app/views/widgets/_calendar.html.erb
View file

@ -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="time"><%= event.start.strftime("%H:%M %Z") %></p>
<p class="summary">
<span class="time"><%= event.start.strftime("%H:%M %Z") %></span>
<%= event.formatted_summary %>
</p>
</div>
<% end %>
<% end %>

4
app/views/widgets/_logged.html.erb
View file

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

2
config/deploy/staging.rb
View file

@ -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'