ensl/ensl.org
0
0
Fork 0
mirror of https://github.com/ENSL/ensl.org.git synced 2025-05-11 09:30:43 +00:00
Code Issues Projects Releases Packages Wiki Activity

Change units to px from em. Downsize all widths and font sizes

Browse source
This commit is contained in:
Luke Barratt 2014-04-29 19:18:14 +01:00
parent 38fdef5363
commit ae9717f00d
30 changed files with 292 additions and 283 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,8 @@
Neat Overrides Neat Overrides
*/ */
$max-width: em(1200); $max-width: 1140px;
$gutter: em(20);
/* /*
Grid Debugging Grid Debugging
@ -16,8 +17,8 @@ $max-width: em(1200);
Neat Breakpoints Neat Breakpoints
*/ */
$medium-screen: em(640); $medium-screen: 640px;
$large-screen: em(860); $large-screen: 860px;
$medium-screen-up: new-breakpoint(min-width $medium-screen 4); $medium-screen-up: new-breakpoint(min-width $medium-screen 4);
$large-screen-up: new-breakpoint(min-width $large-screen 8); $large-screen-up: new-breakpoint(min-width $large-screen 8);
@ -38,9 +39,9 @@ $header-font-family: $montserrat;
Sizes Sizes
*/ */
$base-font-size: 1em; $base-font-size: 14px;
$base-line-height: $base-font-size * 1.5; $base-line-height: $base-font-size * 1.5;
$base-border-radius: em(5); $base-border-radius: 3px;
/* /*
Colours Colours
@ -87,13 +88,13 @@ $flash-success: $green;
$flash-warning: $red; $flash-warning: $red;
$flash-error: #e56c69; $flash-error: #e56c69;
$input-font-size: em(16); $input-font-size: $base-font-size;
$input-primary: white; $input-primary: white;
$input-secondary: $blue; $input-secondary: $blue;
$input-text: #232323; $input-text: #232323;
$input-border-width: em(2); $input-border-width: 2px;
$input-border-colour: darken($light-gray, 10%); $input-border-colour: darken($light-gray, 10%);
$input-padding: em(11); $input-padding: 9px;
$input-border-radius: $base-border-radius; $input-border-radius: $base-border-radius;
$button-primary: $blue; $button-primary: $blue;
@ -104,4 +105,4 @@ $button-text: white;
Shadows Shadows
*/ */
$content-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); $content-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);

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

@ -4,13 +4,13 @@
.breadcrumbs { .breadcrumbs {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
a { a {
display: inline-block; display: inline-block;
} }
.fa { .fa {
margin: 0 em(10); margin: 0 10px;
} }
} }

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

@ -69,11 +69,11 @@
} }
a.user { a.user {
margin-right: em(10); margin-right: 10px;
} }
a.team { a.team {
margin-left: em(10); margin-left: 10px;
} }
p { p {
@ -84,12 +84,12 @@
font-style: italic; font-style: italic;
font-size: .9em; font-size: .9em;
color: $comment-detail-color; color: $comment-detail-color;
margin-top: em(10); margin-top: 10px;
} }
.controls { .controls {
position: absolute; position: absolute;
top: - em(5); top: - 5px;
right: 0; right: 0;
} }
} }
@ -101,7 +101,7 @@
.comment-form { .comment-form {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
h1, h1,
h5 { h5 {
@ -110,6 +110,6 @@
} }
.fields { .fields {
margin-bottom: em(20); margin-bottom: 20px;
} }
} }

8
app/assets/stylesheets/components/_flashes.scss
View file

@ -4,7 +4,7 @@
.flash { .flash {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
font-weight: 600; font-weight: 600;
&.notice { &.notice {
@ -44,18 +44,18 @@
div#errors { div#errors {
@extend .flash.error; @extend .flash.error;
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
strong { strong {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(10); margin-bottom: 10px;
} }
ul.errors { ul.errors {
@include span-columns(12); @include span-columns(12);
li { li {
margin-bottom: .5em; margin-bottom: 0;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;

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

@ -2,13 +2,15 @@
Forms Forms
*/ */
$input-height: 35px;
form { form {
.inline { .inline {
float: left; float: left;
display: inline-block; display: inline-block;
width: auto; width: auto;
margin-bottom: em(20); margin-bottom: 20px;
input { input {
margin-bottom: 0; margin-bottom: 0;
@ -18,8 +20,8 @@ form {
.fields { .fields {
> .field_with_errors:first-child, > .field_with_errors:first-child,
> label { > label {
padding: em(11) 0; padding: 9px 0;
line-height: em(16); line-height: $input-font-size;
} }
> .field_with_errors { > .field_with_errors {
@ -40,14 +42,15 @@ form {
} }
.select-wrapper { .select-wrapper {
$select-padding: em(7); $select-padding: 7px;
$select-height: $input-height - 4px;
border-radius: $input-border-radius; border-radius: $input-border-radius;
background-color: $input-primary; background-color: $input-primary;
border: $input-border-colour solid $input-border-width; border: $input-border-colour solid $input-border-width;
position: relative; position: relative;
display: inline-block; display: inline-block;
margin-right: em(10); margin-right: 10px;
float: left; float: left;
max-width: 100%; max-width: 100%;
@ -59,13 +62,13 @@ form {
display: block; display: block;
width: auto; width: auto;
position: relative; position: relative;
line-height: em(22); line-height: $select-height/2 + 4px;
vertical-align: middle; vertical-align: middle;
max-height: em(36); max-height: $select-height;
margin-left: 0; margin-left: 0;
border: 0; border: 0;
margin: 0; margin: 0;
padding: $select-padding em(50) $select-padding $input-padding; padding: $select-padding ($select-height + 10) $select-padding $input-padding;
font-size: $input-font-size; font-size: $input-font-size;
max-width: 100%; max-width: 100%;
@ -88,9 +91,9 @@ form {
top: 0; top: 0;
right: 0; right: 0;
text-align: center; text-align: center;
padding-top: em(6); padding-top: 6px;
width: em(36); width: $select-height;
height: em(32); height: $select-height - 4px;
border-left: $input-border-width solid $input-border-colour; border-left: $input-border-width solid $input-border-colour;
color: $input-border-colour; color: $input-border-colour;
} }
@ -119,7 +122,7 @@ form {
color: $input-text; color: $input-text;
font-size: $input-font-size; font-size: $input-font-size;
padding: 0 $input-padding; padding: 0 $input-padding;
height: em(40); height: $input-height;
border: $input-border-colour solid $input-border-width; border: $input-border-colour solid $input-border-width;
&:hover { &:hover {
@ -148,8 +151,8 @@ form {
.inputs label.checkbox, .inputs label.checkbox,
> label.checkbox { > label.checkbox {
position: relative; position: relative;
width: em(40); width: $input-height;
height: em(40); height: $input-height;
overflow: hidden; overflow: hidden;
&:before { &:before {
@ -157,8 +160,8 @@ form {
content: ""; content: "";
display: block; display: block;
border-radius: $input-border-radius; border-radius: $input-border-radius;
width: em(40); width: $input-height;
height: em(40); height: $input-height;
padding: $input-padding; padding: $input-padding;
background-color: $input-primary; background-color: $input-primary;
border: $input-border-colour solid $input-border-width; border: $input-border-colour solid $input-border-width;
@ -196,7 +199,7 @@ form {
} }
.controls { .controls {
margin-bottom: em(20); margin-bottom: 20px;
button, button,
input[type=submit] { input[type=submit] {
@ -204,6 +207,7 @@ form {
border-radius: $input-border-radius; border-radius: $input-border-radius;
border: $input-border-width solid $button-primary; border: $input-border-width solid $button-primary;
margin-bottom: 0; margin-bottom: 0;
line-height: 30px;
outline: none; outline: none;
} }
} }
@ -211,11 +215,11 @@ form {
form.square { form.square {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0; margin: 20px 0;
.horizontal { .horizontal {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
&.small { &.small {
@include span-columns(6); @include span-columns(6);
@ -233,11 +237,11 @@ form.square {
> label, > label,
> .label { > .label {
@include span-columns(3); @include span-columns(3);
padding: em(11) 0; padding: 9px 0;
line-height: em(16); line-height: $input-font-size;
&.checkbox { &.checkbox {
width: em(40); width: $input-height;
padding: 0; padding: 0;
} }
} }

57
app/assets/stylesheets/components/_gather.scss
View file

@ -20,7 +20,7 @@
@include span-columns(6); @include span-columns(6);
i { i {
margin-right: em(10); margin-right: 10px;
} }
} }
@ -30,7 +30,7 @@
text-align: right; text-align: right;
i { i {
margin-left: em(10); margin-left: 10px;
} }
} }
@ -38,17 +38,17 @@
@include span-columns(12); @include span-columns(12);
.timestamp { .timestamp {
margin: 0 em(5) em(5); margin: 0 5px 5px;
} }
} }
.new-shout { .new-shout {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0; margin: 20px 0;
.shout_input { .shout_input {
width: em(400); width: 400px;
margin-right: em(20); margin-right: 20px;
} }
.fields, .fields,
@ -61,14 +61,14 @@
#gather-info { #gather-info {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0; margin: 20px 0;
border-bottom: em(2) solid $light-gray; border-bottom: 2px solid $light-gray;
.info { .info {
@include span-columns(4); @include span-columns(4);
h6 { h6 {
margin-bottom: em(10); margin-bottom: 10px;
} }
&:nth-child(3) { &:nth-child(3) {
@ -80,13 +80,13 @@
list-style-type: disc; list-style-type: disc;
li { li {
margin-left: em(20); margin-left: 20px;
} }
} }
.hide { .hide {
@include span-columns(12); @include span-columns(12);
padding: em(20) 0; padding: 20px 0;
text-align: center; text-align: center;
a { a {
@ -94,7 +94,7 @@
float: none; float: none;
i { i {
margin-right: em(10); margin-right: 10px;
} }
} }
} }
@ -103,13 +103,13 @@
#gather-area { #gather-area {
@include span-columns(12); @include span-columns(12);
$column-border-width: em(15); $column-border-width: 15px;
$column-border-radius: em(5); $column-border-radius: 5px;
.gather-columns { .gather-columns {
@include span-columns(12); @include span-columns(12);
@include row(table); @include row(table);
margin-bottom: em(20); margin-bottom: 20px;
margin-left: - $column-border-width; margin-left: - $column-border-width;
width: $max-width - ($column-border-width*2); width: $max-width - ($column-border-width*2);
} }
@ -118,14 +118,13 @@
@include span-columns(4); @include span-columns(4);
@include pad; @include pad;
border-radius: $column-border-width + $column-border-radius; border-radius: $column-border-width + $column-border-radius;
overflow-y: scroll; padding-bottom: 20px;
padding-bottom: em(20);
background: $light-gray; background: $light-gray;
padding: em(20); padding: 20px;
border: $column-border-width solid white; border: $column-border-width solid white;
h4 { h4 {
padding-bottom: em(20); padding-bottom: 20px;
text-align: center; text-align: center;
} }
@ -135,7 +134,7 @@
} }
ul { ul {
margin-bottom: em(10); margin-bottom: 10px;
} }
} }
@ -143,12 +142,12 @@
.captain { .captain {
color: $gold; color: $gold;
margin: 0 em(10); margin: 0 10px;
} }
.delete { .delete {
display: inline-block; display: inline-block;
padding: 0 em(10); padding: 0 10px;
} }
} }
} }
@ -157,14 +156,14 @@
@include span-columns(12); @include span-columns(12);
display: block; display: block;
clear: both; clear: both;
padding: em(20) 0; padding: 20px 0;
margin: em(20) 0; margin: 20px 0;
border-top: em(2) solid $light-gray; border-top: 2px solid $light-gray;
border-bottom: em(2) solid $light-gray; border-bottom: 2px solid $light-gray;
position: relative; position: relative;
.admin { .admin {
top: em(20); top: 20px;
right: 0; right: 0;
margin: 0; margin: 0;
position: absolute; position: absolute;
@ -183,9 +182,9 @@
@include span-columns(12); @include span-columns(12);
@include flash; @include flash;
padding: em(14); padding: 14px;
text-align: center; text-align: center;
margin-left: - em(20); margin-left: - 20px;
width: $max-width + $container-padding*2; width: $max-width + $container-padding*2;
} }

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

@ -4,5 +4,5 @@
.pagination { .pagination {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0; margin: 20px 0;
} }

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

@ -3,7 +3,7 @@
*/ */
.shoutmsg { .shoutmsg {
margin-bottom: em(5); margin-bottom: 5px;
.timestamp { .timestamp {
@extend .highlight; @extend .highlight;

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

@ -39,7 +39,7 @@ table.striped > tbody {
} }
> tr:nth-child(2n) td { > tr:nth-child(2n) td {
background-color: transparentize($light-blue, 0.9); background-color: transparentize($light-blue, 0.95);
} }
.actions { .actions {

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

@ -3,49 +3,53 @@
*/ */
.tabbed { .tabbed {
$tabs-border-width: em(1); $tabs-border-width: 1px;
$tabs-border-colour: darken($light-gray, 10); $tabs-border-colour: lighten($light-blue, 40%);
$tabs-padding-vertical: em(8); $tabs-padding-horizontal: 16px;
$tabs-padding-horizontal: em(16); $tabs-height: 35px;
ul.tabs { ul.tabs {
@include span-columns(12); @include span-columns(12);
display: block; display: block;
font-family: $montserrat; font-family: $montserrat;
height: em(40); height: $tabs-height;
max-height: em(40); max-height: $tabs-height;
position: relative; position: relative;
li { li {
float: left; float: left;
display: block; display: block;
background-color: $blue;
a { a {
border: $tabs-border-width solid $tabs-border-colour; border: $tabs-border-width solid $tabs-border-colour;
border-right: 0; border-right: 0;
padding: $tabs-padding-vertical $tabs-padding-horizontal; padding: 0 $tabs-padding-horizontal;
float: left; float: left;
display: block; display: block;
color: white; color: white;
font-weight: 400; font-weight: 400;
line-height: $tabs-height;
background-color: $blue;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
} }
&:first-child a {
border-radius: $base-border-radius 0 0 0;
}
&:last-child a { &:last-child a {
border-right: $tabs-border-width solid $tabs-border-colour; border-right: $tabs-border-width solid $tabs-border-colour;
border-radius: 0 $base-border-radius 0 0;
} }
&.activeli { &.activeli {
z-index: 100; z-index: 100;
background-color: $light-blue;
a { a {
padding-bottom: $tabs-padding-vertical + $tabs-border-width; background-color: $light-blue;
border-bottom: 0;
} }
} }
} }
@ -54,7 +58,8 @@
.tabbed-contents { .tabbed-contents {
@include span-columns(12); @include span-columns(12);
border: $tabs-border-width solid $tabs-border-colour; border: $tabs-border-width solid $tabs-border-colour;
padding: em(20); border-radius: 0 $base-border-radius $base-border-radius $base-border-radius;
padding: 20px;
} }
@for $i from 1 through $grid-columns { @for $i from 1 through $grid-columns {

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

@ -2,7 +2,7 @@
Main Containers Main Containers
*/ */
$container-padding: em(30); $container-padding: 20px;
html, html,
body { body {
@ -41,7 +41,7 @@ body {
@include span-columns(9 of 12); @include span-columns(9 of 12);
box-shadow: $content-shadow; box-shadow: $content-shadow;
background: white; background: white;
padding: em(20); padding: 20px;
} }
#sidebar { #sidebar {
@ -94,10 +94,10 @@ h1, h2, h3, h4, h5, h6 {
ul.disc, ul.disc,
ol { ol {
list-style-type: disc; list-style-type: disc;
margin: em(20) 0; margin: 20px 0;
li { li {
margin-left: em(40); margin-left: 40px;
display: list-item; display: list-item;
} }
} }

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

@ -4,17 +4,17 @@
header .banner { header .banner {
@include linear-gradient($dark-blue, $deep-blue); @include linear-gradient($dark-blue, $deep-blue);
height: em(295); height: 250px;
#logo { #logo {
@include span-columns(9 of 12); @include span-columns(9 of 12);
min-height: em(200); min-height: 200px;
position: relative; position: relative;
img { img {
height: em(200); height: 180px;
position: absolute; position: absolute;
top: em(20); top: 15px;
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
@ -22,9 +22,8 @@ header .banner {
#authentication { #authentication {
@include span-columns(3 of 12); @include span-columns(3 of 12);
height: em(190); margin-top: 10px;
margin: em(20) 0; padding: 10px 0;
padding: em(20) 0;
color: white; color: white;
a { a {
@ -35,30 +34,22 @@ header .banner {
display: inline; display: inline;
} }
&.admin {
margin-top: em(10);
.profile {
padding-top: em(20);
}
}
.fields { .fields {
@include span-columns(12); @include span-columns(12);
input { input {
@include span-columns(6); @include span-columns(6);
margin-bottom: em(10); margin-bottom: 10px;
} }
} }
.controls { .controls {
margin-top: em(20); margin-top: 10px;
text-align: right; text-align: right;
input { input {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(10); margin-bottom: 10px;
} }
a { a {
@ -87,7 +78,7 @@ header .banner {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
text-align: center; text-align: center;
margin-right: em(10); margin-right: 10px;
} }
} }
@ -95,10 +86,10 @@ header .banner {
vertical-align: middle; vertical-align: middle;
.avatar { .avatar {
margin: 0 em(20) 0 0; margin: 0 10px 0 0;
text-align: center; text-align: center;
border-radius: em(100); border-radius: 100px;
padding: em(5); padding: 5px;
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
width: 100%; width: 100%;
@ -112,8 +103,8 @@ header .banner {
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
border-radius: em(100); border-radius: 100px;
padding: em(5); padding: 5px;
} }
} }

10
app/assets/stylesheets/layout/_helpers.scss
View file

@ -4,17 +4,17 @@
img.flag { img.flag {
display: inline-block; display: inline-block;
vertical-align: - em(6); vertical-align: - 6px;
margin-right: em(10); margin-right: 10px;
} }
.actions-bottom { .actions-bottom {
@include span-columns(12); @include span-columns(12);
margin-top: em(20); margin-top: 20px;
} }
fieldset { fieldset {
border: em(2) solid $light-gray; border: 2px solid $light-gray;
> br:first-child, > br:first-child,
> br:last-child { > br:last-child {
@ -22,7 +22,7 @@ fieldset {
} }
legend { legend {
padding: 0 em(10); padding: 0 10px;
&+br { &+br {
display: none; display: none;

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

@ -2,11 +2,13 @@
Navigation Navigation
*/ */
$navigation-height: 50px;
#menu { #menu {
@include span-columns(12); @include span-columns(12);
font-family: $montserrat; font-family: $montserrat;
height: em(60); height: $navigation-height;
margin-top: - em(60); margin-top: - $navigation-height;
nav { nav {
@include outer-container; @include outer-container;
@ -22,35 +24,39 @@ ul.navigation {
width: 100%; width: 100%;
background: transparent; background: transparent;
max-width: $max-width; max-width: $max-width;
max-height: em(60); max-height: $navigation-height;
> li { > li {
float: left; float: left;
width: (100%/7); width: (100%/7);
border-right: 0.1em solid transparent; border-right: 1px solid transparent;
.count { .count {
float: right; position: absolute;
font-size: em(14); top: $navigation-height/2 - ($navigation-height/2)/2;
border-radius: em(25); right: 12px;
border-radius: $navigation-height/2;
background-color: $light-blue; background-color: $light-blue;
display: inline-block; display: inline-block;
color: white; color: white;
line-height: em(14); line-height: $navigation-height/2;
padding: em(5) em(8); padding: 0 8px;
margin-top: - em(2); font-size: 12px;
font-weight: bold;
height: $navigation-height/2;
} }
a { a {
font-weight: 400; font-weight: 400;
font-size: 15px;
height: $navigation-height;
line-height: $navigation-height;
padding: 0 20px;
} }
> a { > a {
width: 100%; width: 100%;
color: white; color: white;
height: em(60);
line-height: em(16);
padding: em(22);
float: left; float: left;
position: relative; position: relative;
background-color: $navbar-primary; background-color: $navbar-primary;
@ -73,14 +79,13 @@ ul.navigation {
i { i {
color: lighten($light-blue, 30); color: lighten($light-blue, 30);
max-height: 60px; max-height: $navigation-height;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
font-size: em(24); font-size: 24px;
line-height: 1em; line-height: 1em;
padding: em(12); padding: $navigation-height/4;
padding-right: em(14);
} }
} }
@ -98,7 +103,7 @@ ul.navigation {
box-shadow: $content-shadow; box-shadow: $content-shadow;
display: block; display: block;
position: absolute; position: absolute;
top: em(60); top: $navigation-height;
left: 0; left: 0;
min-width: 100%; min-width: 100%;
background-color: $navbar-primary; background-color: $navbar-primary;
@ -107,10 +112,10 @@ ul.navigation {
margin: 0; margin: 0;
li { li {
border-bottom: em(1) solid $navbar-secondary; border-bottom: 1px solid $navbar-secondary;
&:first-child { &:first-child {
border-top: em(1) solid $navbar-secondary; border-top: 1px solid $navbar-secondary;
} }
&:last-child { &:last-child {
@ -120,9 +125,6 @@ ul.navigation {
a { a {
white-space: nowrap; white-space: nowrap;
display: block; display: block;
height: em(60);
line-height: em(16);
padding: em(22);
color: $navbar-text; color: $navbar-text;
} }

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

@ -3,8 +3,8 @@
.widget { .widget {
@include span-columns(12); @include span-columns(12);
box-shadow: $content-shadow; box-shadow: $content-shadow;
margin-bottom: em(30); margin-bottom: $container-padding;
padding: em(20); padding: 20px;
background: white; background: white;
h4 { h4 {
@ -13,16 +13,17 @@
.widget-content-wrapper { .widget-content-wrapper {
@include span-columns(12); @include span-columns(12);
font-size: em(14); font-size: 14px;
} }
.separator { .separator {
color: white; color: white;
background: $blue; background: $blue;
padding: em(12) em(24); padding: 0 20px;
margin: 0 -20px; margin: 0 -20px;
margin-bottom: em(12); margin-bottom: 12px;
font-weight: 600; font-weight: 600;
line-height: 35px;
a { a {
color: white; color: white;
@ -36,7 +37,7 @@
} }
.calendar { .calendar {
max-height: 500px; max-height: 400px;
overflow-x: scroll; overflow-x: scroll;
} }
@ -47,7 +48,7 @@
input { input {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(10); margin-bottom: 10px;
} }
} }
@ -55,7 +56,7 @@
.posts { .posts {
ol { ol {
margin-bottom: em(20); margin-bottom: 20px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -66,7 +67,7 @@
.poll { .poll {
.question { .question {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
h5 { h5 {
margin-bottom: 1em; margin-bottom: 1em;

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

@ -3,17 +3,19 @@
*/ */
@mixin button($background: $button-primary, $text: $button-text) { @mixin button($background: $button-primary, $text: $button-text) {
$button-height: 35px;
@include linear-gradient($blue, $dark-blue); @include linear-gradient($blue, $dark-blue);
border-radius: $base-border-radius; border-radius: $base-border-radius;
font-family: $montserrat; font-family: $montserrat;
font-size: em(16); font-size: 14px;
background-color: $background; background-color: $background;
color: $text; color: $text;
height: em(40); height: $button-height;
padding: 0 em(18); padding: 0 $button-height/2;
line-height: em(40); line-height: $button-height;
float: left; float: left;
margin: 0 em(20) em(20) 0; margin: 0 $button-height/2 $button-height/2 0;
border: 0; border: 0;
text-transform: uppercase; text-transform: uppercase;
cursor: pointer; cursor: pointer;
@ -32,10 +34,10 @@ a.button,
&.tiny { &.tiny {
@include linear-gradient($light-blue, $blue); @include linear-gradient($light-blue, $blue);
background-color: transparent; background-color: transparent;
border-radius: em(14); border-radius: 14px;
line-height: em(25); line-height: 25px;
height: em(25); height: 25px;
padding: 0 em(12); padding: 0 12px;
margin: 0 em(10) 0 0; margin: 0 10px 0 0;
} }
} }

17
app/assets/stylesheets/mixins/_flashes.scss
View file

@ -3,11 +3,11 @@
*/ */
@mixin flash($background: $flash-notice, $text: $flash-text) { @mixin flash($background: $flash-notice, $text: $flash-text) {
$flash-height: 35px;
background-color: $background; background-color: $background;
color: $text; color: $text;
font-size: em(16); padding: 7px 7px 7px 44px;
line-height: em(16);
padding: em(14) em(14) em(14) em(54);
position: relative; position: relative;
&:before { &:before {
@ -22,10 +22,9 @@
top: 0; top: 0;
left: 0; left: 0;
float: left; float: left;
width: em(44); width: $flash-height;
height: 100%; height: 100%;
padding: em(9); padding: 7px;
line-height: em(26);
text-align: center; text-align: center;
} }
} }
@ -35,11 +34,11 @@
*/ */
.highlight { .highlight {
font-size: em(14); font-size: 14px;
border-radius: em(3); border-radius: 3px;
background: $blue; background: $blue;
color: white; color: white;
display: inline-block; display: inline-block;
font-style: italic; font-style: italic;
padding: 0 em(6); padding: 0 6px;
} }

2
app/assets/stylesheets/pages/_categories.scss
View file

@ -11,7 +11,7 @@
text-align: right; text-align: right;
i { i {
margin-left: em(5); margin-left: 5px;
} }
} }
} }

30
app/assets/stylesheets/pages/_contests.scss
View file

@ -4,7 +4,7 @@
div#matches { div#matches {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0; margin: 20px 0;
} }
/* /*
@ -12,7 +12,7 @@ div#matches {
*/ */
table.contest { table.contest {
margin-bottom: em(40); margin-bottom: 40px;
.fa-chevron-up { .fa-chevron-up {
color: $light-green; color: $light-green;
@ -44,7 +44,7 @@ table.contest {
text-align: right; text-align: right;
i { i {
padding-left: em(5); padding-left: 5px;
} }
} }
} }
@ -74,7 +74,7 @@ table.contest {
div.widget.contest { div.widget.contest {
a.button { a.button {
margin: em(20) 0 0; margin: 20px 0 0;
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
@ -93,7 +93,7 @@ div.standings {
*/ */
table.brackets { table.brackets {
margin: em(20) 0 em(40) 0; margin: 20px 0 40px 0;
width: auto; width: auto;
td { td {
@ -112,16 +112,16 @@ table.brackets {
} }
.flag { .flag {
width: em(44); width: 44px;
img { img {
width: em(24); width: 24px;
margin-left: em(10); margin-left: 10px;
} }
} }
.team { .team {
padding: em(5) 0; padding: 5px 0;
background-color: $light-gray; background-color: $light-gray;
border-right: 1px solid $medium-gray; border-right: 1px solid $medium-gray;
clear: both; clear: both;
@ -131,13 +131,13 @@ table.brackets {
} }
> a { > a {
padding-left: em(10); padding-left: 10px;
} }
} }
.bracket { .bracket {
padding: 0 em(10) 0 0; padding: 0 10px 0 0;
width: em(158); width: 158px;
} }
.connector { .connector {
@ -145,7 +145,7 @@ table.brackets {
} }
> tbody > tr > td { > tbody > tr > td {
width: em(150); width: 150px;
} }
} }
@ -285,7 +285,7 @@ table.brackets {
div.current { div.current {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
table { table {
@ -310,7 +310,7 @@ table.brackets {
div.previous { div.previous {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
table { table {

20
app/assets/stylesheets/pages/_files.scss
View file

@ -7,7 +7,7 @@
.actions, .actions,
.files-list { .files-list {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0; margin: 20px 0;
} }
} }
@ -19,14 +19,14 @@
.file { .file {
@include span-columns(12); @include span-columns(12);
padding-top: em(20); padding-top: 20px;
margin-bottom: em(20); margin-bottom: 20px;
position: relative; position: relative;
border-top: em(3) solid $light-gray; border-top: 3px solid $light-gray;
.actions { .actions {
position: absolute; position: absolute;
top: em(20); top: 20px;
right: 0; right: 0;
} }
@ -34,14 +34,14 @@
float: right; float: right;
i { i {
margin-right: em(10); margin-right: 10px;
} }
} }
} }
.controls { .controls {
@include span-columns(12); @include span-columns(12);
margin-top: em(20); margin-top: 20px;
} }
} }
@ -53,7 +53,7 @@
.filters { .filters {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
} }
} }
@ -61,7 +61,7 @@ table.movie {
.controls { .controls {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0; margin: 20px 0;
} }
} }
@ -78,7 +78,7 @@ table.movie {
height: 0px; height: 0px;
padding-bottom: 56%; padding-bottom: 56%;
padding-top: 50px; padding-top: 50px;
margin-bottom: em(20); margin-bottom: 20px;
object { object {
position: absolute; position: absolute;

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

@ -28,7 +28,11 @@ div#categories {
.bullet { .bullet {
width: 10%; width: 10%;
background: image-url('layout/forum-category.png') center center no-repeat; background: {
image: url('layout/forum-category.png');
position: center center;
repeat: no-repeat;
}
&.highlight { &.highlight {
background-image: image-url('layout/forum-category-highlight.png'); background-image: image-url('layout/forum-category-highlight.png');
@ -37,7 +41,7 @@ div#categories {
.forum { .forum {
width: 45%; width: 45%;
padding-right: em(10); padding-right: 10px;
} }
.actions { .actions {
@ -61,7 +65,7 @@ div#categories {
#topics { #topics {
table-layout: auto; table-layout: auto;
margin-bottom: em(40); margin-bottom: 40px;
.topic { .topic {
width: 55%; width: 55%;
@ -82,7 +86,7 @@ div#categories {
} }
.statistics { .statistics {
margin: em(20) 0; margin: 20px 0;
h4 { h4 {
margin-bottom: 1em; margin-bottom: 1em;
@ -92,7 +96,7 @@ div#categories {
#topic { #topic {
.controls { .controls {
margin-top: em(20); margin-top: 20px;
} }
#reply { #reply {
@ -106,16 +110,17 @@ div#categories {
#posts { #posts {
@include span-columns(12); @include span-columns(12);
margin-top: em(20); margin-top: 20px;
.post { .post {
@include span-columns(12); @include span-columns(12);
border-top: em(3) solid $light-gray; padding: 20px;
padding: em(20) 0; margin-bottom: 20px;
background: transparentize($light-gray, 0.5);
border-radius: 5px;
&:last-child { &:last-child {
border-bottom: em(3) solid $light-gray; margin-bottom: 40px;
margin-bottom: em(40);
} }
.avatar { .avatar {
@ -130,7 +135,7 @@ div#categories {
.team { .team {
@include span-columns(12); @include span-columns(12);
text-align: center; text-align: center;
margin-bottom: em(10); margin-bottom: 10px;
} }
.admin { .admin {
@ -145,17 +150,15 @@ div#categories {
.text, .text,
.signature { .signature {
@include span-columns(12); @include span-columns(12);
padding: em(20) 0; padding: 20px 0;
} }
.text { .text {
border-radius: $base-border-radius; margin-top: 20px;
background: $light-gray;
margin-top: em(20);
padding: em(20);
fieldset { fieldset {
border-color: $light-blue; border-color: darken($light-gray, 10);
border-radius: $base-border-radius;
} }
} }
} }

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

@ -6,7 +6,7 @@ table#matches {
width: 100%; width: 100%;
display: table; display: table;
table-layout: auto; table-layout: auto;
margin-bottom: em(20); margin-bottom: 20px;
.opponent { .opponent {
width: 30%; width: 30%;
@ -28,8 +28,10 @@ table#matches {
*/ */
div#match { div#match {
$title-height: 75px;
@include span-columns(12); @include span-columns(12);
border-bottom: em(3) solid $light-gray; border-bottom: 3px solid $light-gray;
.contesters, .contesters,
.details, .details,
@ -40,18 +42,18 @@ div#match {
} }
.contesters { .contesters {
margin-bottom: em(20); margin-bottom: 20px;
.vs { .vs {
margin: 0 auto; margin: 0 auto;
display: block; display: block;
font: 50px $montserrat; font: $title-height/2 $montserrat;
border-radius: 50px; border-radius: 50px;
background: $blue; background: $blue;
width: 100px; width: $title-height;
height: 100px; height: $title-height;
text-align: center; text-align: center;
line-height: 100px; line-height: $title-height;
color: white; color: white;
font-style: italic; font-style: italic;
text-transform: uppercase; text-transform: uppercase;
@ -61,19 +63,19 @@ div#match {
.team-1, .team-1,
.team-2 { .team-2 {
max-height: 100px; max-height: $title-height;
overflow: hidden; overflow: hidden;
} }
.team-1 { .team-1 {
@include span-columns(5); @include span-columns(5);
line-height: 100px; line-height: $title-height;
text-align: right; text-align: right;
} }
.team-2 { .team-2 {
@include span-columns(5); @include span-columns(5);
line-height: 100px; line-height: $title-height;
text-align: left; text-align: left;
} }
@ -88,7 +90,7 @@ div#match {
position: absolute; position: absolute;
background: white; background: white;
width: 1px; width: 1px;
height: 100px; height: $title-height;
margin: 0 auto; margin: 0 auto;
left: 50%; left: 50%;
top: 0; top: 0;
@ -96,30 +98,30 @@ div#match {
.score-1, .score-1,
.score-2 { .score-2 {
font: 50px $montserrat; font: $title-height/2 $montserrat;
color: white; color: white;
width: 50%; width: 50%;
position: absolute; position: absolute;
top: 0; top: 0;
text-align: center; text-align: center;
line-height: 100px; line-height: $title-height;
font-weight: bold; font-weight: bold;
} }
.score-1 { .score-1 {
padding-left: 15px; padding-left: $title-height/3;
left: 0; left: 0;
} }
.score-2 { .score-2 {
padding-right: 15px; padding-right: $title-height/3;
right: 0; right: 0;
} }
} }
} }
.details { .details {
margin-bottom: em(20); margin-bottom: 20px;
text-align: center; text-align: center;
.contest, .contest,
@ -133,13 +135,13 @@ div#match {
} }
.contest { .contest {
margin-bottom: em(10); margin-bottom: 10px;
} }
} }
.lineups { .lineups {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0 em(40); margin: 20px 0 40px;
h3 { h3 {
text-align: center; text-align: center;
@ -156,8 +158,8 @@ div#match {
.player { .player {
@include span-columns(12); @include span-columns(12);
line-height: em(40); line-height: 40px;
margin-bottom: em(10); margin-bottom: 10px;
} }
.players { .players {
@ -187,7 +189,7 @@ div#match {
text-align: right; text-align: right;
.flag { .flag {
margin: 0 0 0 em(10); margin: 0 0 0 10px;
} }
.controls { .controls {
@ -235,7 +237,7 @@ div#match {
.scoring { .scoring {
@include span-columns(12); @include span-columns(12);
border-top: em(3) solid $light-gray; border-top: 3px solid $light-gray;
h3 { h3 {
margin-bottom: 1em; margin-bottom: 1em;
@ -245,7 +247,7 @@ div#match {
width: auto; width: auto;
margin-left: 0; margin-left: 0;
text-align: center; text-align: center;
width: em(40); width: 40px;
} }
} }
@ -266,7 +268,7 @@ div#match {
input { input {
float: none; float: none;
margin: em(20) 0 0 0; margin: 20px 0 0 0;
} }
} }
@ -275,7 +277,7 @@ div#match {
text-align: right; text-align: right;
.highlight { .highlight {
margin-left: em(10); margin-left: 10px;
} }
} }
@ -285,24 +287,24 @@ div#match {
text-align: left; text-align: left;
.highlight { .highlight {
margin-right: em(10); margin-right: 10px;
} }
} }
} }
.report { .report {
margin: em(20) 0; margin: 20px 0;
padding-top: em(20); padding-top: 20px;
border-top: em(3) solid $light-gray; border-top: 3px solid $light-gray;
textarea { textarea {
margin: em(20) 0; margin: 20px 0;
width: 100%; width: 100%;
height: em(600); height: 600px;
} }
.mceLayout { .mceLayout {
margin: em(20) 0; margin: 20px 0;
} }
} }
} }
@ -318,7 +320,7 @@ div#map {
text-align: center; text-align: center;
img { img {
margin: em(20) 0; margin: 20px 0;
} }
} }
} }

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

@ -5,7 +5,7 @@
div.article { div.article {
@include span-columns(12); @include span-columns(12);
border-bottom: 1px solid rgba(35, 35, 35, 0.1); border-bottom: 1px solid rgba(35, 35, 35, 0.1);
padding-bottom: em(20); padding-bottom: 20px;
h1 { h1 {
margin: 1em 0; margin: 1em 0;
@ -13,7 +13,7 @@ div.article {
.content { .content {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(40); margin-bottom: 40px;
ul { ul {
@extend ul.disc; @extend ul.disc;
@ -34,14 +34,14 @@ div.article {
text-align: right; text-align: right;
.fa { .fa {
margin-right: em(10); margin-right: 10px;
} }
} }
.actions { .actions {
@include span-columns(12); @include span-columns(12);
@include omega; @include omega;
margin-top: em(10); margin-top: 10px;
} }
&:first-child { &:first-child {
@ -59,7 +59,7 @@ div.article-links {
@include span-columns(6); @include span-columns(6);
.fa { .fa {
padding-right: em(10); padding-right: 10px;
} }
} }
@ -69,7 +69,7 @@ div.article-links {
text-align: right; text-align: right;
.fa { .fa {
padding-left: em(10); padding-left: 10px;
} }
} }
} }
@ -81,22 +81,22 @@ div.article-links {
form.article { form.article {
h4 { h4 {
margin-bottom: em(20); margin-bottom: 20px;
} }
} }
.files { .files {
.files-list { .files-list {
margin: em(20) 0 em(40); margin: 20px 0 40px;
} }
form { form {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0; margin: 20px 0;
.fields { .fields {
margin-bottom: em(20); margin-bottom: 20px;
} }
} }
} }
@ -115,11 +115,11 @@ form.article {
.article-list { .article-list {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(10); margin-bottom: 10px;
.new { .new {
@extend .highlight; @extend .highlight;
margin-right: em(10); margin-right: 10px;
} }
.title { .title {
@ -134,7 +134,7 @@ form.article {
} }
.button.new { .button.new {
margin-top: em(20); margin-top: 20px;
} }
} }

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

@ -44,8 +44,8 @@ table.polls {
.remove { .remove {
display: inline-block; display: inline-block;
line-height: em(40); line-height: 40px;
margin-left: em(10); margin-left: 10px;
} }
} }
} }

8
app/assets/stylesheets/pages/_servers.scss
View file

@ -4,13 +4,13 @@
#servers { #servers {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
div.server { div.server {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
padding-bottom: em(20); padding-bottom: 20px;
border-bottom: em(3) solid $light-gray; border-bottom: 3px solid $light-gray;
position: relative; position: relative;
.connect { .connect {

6
app/assets/stylesheets/pages/_teams.scss
View file

@ -38,7 +38,7 @@
} }
.tabbed-contents { .tabbed-contents {
margin-bottom: em(20); margin-bottom: 20px;
} }
} }
} }
@ -51,7 +51,7 @@
.logo { .logo {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0; margin: 20px 0;
text-align: center; text-align: center;
img { img {
@ -63,7 +63,7 @@
.controls { .controls {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0; margin: 20px 0;
} }
} }

20
app/assets/stylesheets/pages/_users.scss
View file

@ -32,7 +32,7 @@
@include span-columns(12); @include span-columns(12);
.tabbed-contents { .tabbed-contents {
margin-bottom: em(20); margin-bottom: 20px;
} }
} }
@ -58,7 +58,7 @@
.photo { .photo {
@include span-columns(12); @include span-columns(12);
margin: em(20) 0; margin: 20px 0;
text-align: center; text-align: center;
img { img {
@ -70,7 +70,7 @@
#user-data { #user-data {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
h2, h2,
h3, h3,
@ -88,7 +88,7 @@
} }
.achievements { .achievements {
margin-bottom: em(20); margin-bottom: 20px;
} }
tbody td { tbody td {
@ -129,12 +129,12 @@
} }
table { table {
margin-bottom: em(20); margin-bottom: 20px;
} }
form { form {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
} }
.tab { .tab {
@ -146,7 +146,7 @@
#teams { #teams {
table { table {
margin-bottom: em(40); margin-bottom: 40px;
} }
} }
} }
@ -169,14 +169,14 @@
.message { .message {
@include span-columns(12); @include span-columns(12);
margin-bottom: em(20); margin-bottom: 20px;
.subject { .subject {
margin-bottom: 1em; margin-bottom: 1em;
} }
.content { .content {
margin-bottom: em(20); margin-bottom: 20px;
} }
a.message { a.message {
@ -191,7 +191,7 @@
} }
.back { .back {
margin-top: em(20); margin-top: 20px;
} }
} }

2
app/views/forums/index.html.erb
View file

@ -5,7 +5,7 @@
<h3><%=h cat.name %></h3> <h3><%=h cat.name %></h3>
<div class="category"> <div class="category">
<table class="category"> <table class="category striped">
<tr> <tr>
<th colspan="2" class="forums">Forums</th> <th colspan="2" class="forums">Forums</th>
<th class="actions"></th> <th class="actions"></th>

2
app/views/forums/show.html.erb
View file

@ -8,7 +8,7 @@
<%= will_paginate @topics %> <%= will_paginate @topics %>
<table id="topics"> <table id="topics" class="striped">
<tr> <tr>
<th class="topic">Topic</th> <th class="topic">Topic</th>
<th class="author">Author</th> <th class="author">Author</th>

4
app/views/posts/_post.html.erb
View file

@ -25,9 +25,9 @@
<div class="content"> <div class="content">
<div class="header"> <div class="header">
<div class="time"> <div class="time">
<a name="post_<%= post.id %>"> <span id="post_<%= post.id %>">
<%= longtime(post.created_at) %> <%= longtime(post.created_at) %>
</a> </span>
</div> </div>
<div class="posts"> <div class="posts">
<%= link_to "##{post.number(@posts, n)}", "#post_#{post.id}" %> <%= link_to "##{post.number(@posts, n)}", "#post_#{post.id}" %>