mirror of
https://github.com/arsenetar/pelican-red.git
synced 2026-01-23 23:21:38 +00:00
Current Sass Files
The Current Sass / scss development files.
This commit is contained in:
130
static/sass/rangertbc/_base.scss
Normal file
130
static/sass/rangertbc/_base.scss
Normal file
@@ -0,0 +1,130 @@
|
||||
//
|
||||
// RangerTBC Specific Styles
|
||||
//
|
||||
|
||||
// Base File _base.scss
|
||||
// Version: 0.1
|
||||
// Created By: Andrew Senetar
|
||||
// Date: May, 22 2013
|
||||
// Used:
|
||||
|
||||
@import "rangertbc/settings"; //just to be reduntant and make sure the right one is loaded for now
|
||||
|
||||
//// Global Mixins
|
||||
|
||||
//// Global Styles
|
||||
|
||||
//// Element Styles
|
||||
body{
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
.article {
|
||||
& > article{
|
||||
background-color: darken($body-bg, 5%);
|
||||
padding-top: $topbar-height + 15px;
|
||||
padding-bottom: emCalc(15px);
|
||||
@include box-shadow(2px 2px 5px rgba(0,0,0,0.2));
|
||||
header{
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid $secondary-color;
|
||||
h1{
|
||||
color: $primary-color;
|
||||
@include text-shadow(2px 2px 2px rgba(0,0,0,0.3));
|
||||
}
|
||||
time{
|
||||
color: darken($secondary-color,20%);
|
||||
font-weight: bold;
|
||||
line-height: emCalc(18px);
|
||||
font-size: emCalc(18px);
|
||||
padding-top: emCalc(10px);
|
||||
paddting-bottom: emCalc(5px);
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding-top: emCalc(10px);
|
||||
background-color: #f5f5f5;
|
||||
padding-left: emCalc(5px);
|
||||
}
|
||||
footer{
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid $secondary-color;
|
||||
padding-top: emCalc(7px);
|
||||
padding-bottom: emCalc(10px);
|
||||
color: darken($secondary-color, 20%);
|
||||
border-bottom: solid 2px rgba(0,0,0,0.2);
|
||||
a{
|
||||
color: rgba($primary-color, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > aside{
|
||||
& >.row > .columns {
|
||||
background-color: #f5f5f5;
|
||||
@include box-shadow(2px 2px 5px rgba(0,0,0,0.2));
|
||||
& > div{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.articleComments {
|
||||
& > div {
|
||||
background-color: #f5f5f5;
|
||||
@include box-shadow(2px 2px 5px rgba(0,0,0,0.2));
|
||||
padding-top: emCalc(10px);
|
||||
}
|
||||
}
|
||||
|
||||
// fixing the aside in small view
|
||||
@media #{$small} {
|
||||
.article > aside{
|
||||
padding-top: $topbar-height + 15px; //mediaquery to remove on small?
|
||||
& >.row > .columns {
|
||||
background-color: inherit;
|
||||
padding-right: 0;
|
||||
@include box-shadow(none);
|
||||
& > div{
|
||||
@include box-shadow(2px 2px 5px rgba(0,0,0,0.2));
|
||||
@include panel(#f5f5f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.articleInfo{
|
||||
h5 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
//custom footer
|
||||
body #footer{
|
||||
color: rgba($primary-color, 0.4);
|
||||
padding-top: emCalc(10px);
|
||||
padding-bottom: emCalc(15px);
|
||||
padding-right: emCalc(15px);
|
||||
text-align: right;
|
||||
a{
|
||||
color: inherit;
|
||||
}
|
||||
a:hover{
|
||||
color: rgba($primary-color, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
//// Components
|
||||
|
||||
@import "rangertbc/components/topbar"; // topbar requires nav for menu
|
||||
@import "rangertbc/components/scrollbar"; // allows styling of window scrollbar (chrome only?)
|
||||
//@import "rangertbc/components/global"; // global styles and mixins
|
||||
|
||||
@import "rangertbc/components/print"; // print styles (LAST)
|
||||
50
static/sass/rangertbc/_settings.scss
Normal file
50
static/sass/rangertbc/_settings.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
//
|
||||
// RangerTBC Specific Styles
|
||||
//
|
||||
|
||||
// Settings File _settings.scss
|
||||
// Version: 0.1
|
||||
// Created By: Andrew Senetar
|
||||
// Date: May, 22 2013
|
||||
// Used:
|
||||
|
||||
//// External Imports
|
||||
|
||||
/// Compass (reason in comment)
|
||||
@import "compass/css3/box-shadow"; // Used by topbar and ...
|
||||
@import "compass/css3/border-radius"; // Used by ...
|
||||
@import "compass/css3/text-shadow"; // Used by ...
|
||||
|
||||
/// Foundation (reason in comment)
|
||||
@import "foundation/components/global"; // Global Foundation (required for any foundation)
|
||||
@import "foundation/components/grid"; // Foundation Grid (styles are used in layout using grid)
|
||||
@import "foundation/components/type"; // The typography styles are nice
|
||||
@import "foundation/components/clearing"; // Not sure by seems to help?
|
||||
@import "foundation/components/panels";
|
||||
|
||||
//// Variables
|
||||
$body-bg: #e5e5e5;
|
||||
|
||||
/// Topbar (defaults shown)
|
||||
|
||||
// Background color for the top bar
|
||||
// $topbar-bg: rgba($primary-color,0.9);
|
||||
|
||||
// Height and margin
|
||||
$topbar-height: 45px; //referenced to setup body margin atm
|
||||
// $topbar-margin-bottom: 0;
|
||||
|
||||
//Shadow Color
|
||||
// $topbar-shadow-color: rgba(50, 50, 50, 0.4);
|
||||
|
||||
// Controlling the styles for the title in the top bar
|
||||
// $topbar-title-weight: bold;
|
||||
// $topbar-title-font-size: emCalc(17px);
|
||||
|
||||
// Set the link colors and styles for top-level nav
|
||||
// $topbar-link-color: #fff;
|
||||
// $topbar-link-color-hover: #fff;
|
||||
// $topbar-link-color-active: #fff;
|
||||
// $topbar-link-weight: bold;
|
||||
// $topbar-link-font-size: emCalc(13px);
|
||||
// $topbar-link-hover-lightness: -10%;
|
||||
17
static/sass/rangertbc/components/_print.scss
Normal file
17
static/sass/rangertbc/components/_print.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
//
|
||||
// RangerTBC Style Components
|
||||
//
|
||||
|
||||
// Print Styles components/_print.scss
|
||||
// Version: 0.1
|
||||
// Created By: Andrew Senetar
|
||||
// Date: May, 22 2013
|
||||
// Used:
|
||||
|
||||
//// Global Print Style
|
||||
@media print {
|
||||
// Hide iframes in .hide-on-print elements
|
||||
.hide-on-print iframe{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
47
static/sass/rangertbc/components/_scrollbar.scss
Normal file
47
static/sass/rangertbc/components/_scrollbar.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
//
|
||||
// RangerTBC Style Components
|
||||
//
|
||||
|
||||
// Scrollbar Component components/_scrollbar.scss
|
||||
// Version: 0.1
|
||||
// Created By: Andrew Senetar
|
||||
// Date: May, 22 2013
|
||||
// Used: Google+ Style as Starting Point
|
||||
|
||||
//// Variables
|
||||
|
||||
//// Mixins
|
||||
|
||||
// this was going to be more cool?
|
||||
@mixin scrollbar(){
|
||||
::-webkit-scrollbar{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
::-webkit-scrollbar-button,{
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
::-webkit-scrollbar-track{
|
||||
border: solid transparent;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #f5f5f5;
|
||||
@include box-shadow(inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07));
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
min-height: 30px;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
border: none;
|
||||
@include box-shadow(inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07));
|
||||
&:hover{
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//// Style
|
||||
|
||||
//scrollbar styling
|
||||
@include scrollbar();
|
||||
123
static/sass/rangertbc/components/_topbar.scss
Normal file
123
static/sass/rangertbc/components/_topbar.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
//
|
||||
// RangerTBC Style Components
|
||||
//
|
||||
|
||||
// Topbar Component components/_topbar.scss
|
||||
// Version: 0.1
|
||||
// Created By: Andrew Senetar
|
||||
// Date: May, 22 2013
|
||||
// Used: Foundation Topbar as starting point
|
||||
|
||||
//// Top Bar Variables
|
||||
|
||||
// Background color for the top bar
|
||||
$topbar-bg: rgba($primary-color,0.9) !default;
|
||||
|
||||
// Height and margin
|
||||
$topbar-height: 45px !default;
|
||||
$topbar-margin-bottom: 0px !default;
|
||||
|
||||
//Shadow Color
|
||||
$topbar-shadow-color: rgba(50, 50, 50, 0.4) !default;
|
||||
|
||||
// Controlling the styles for the title in the top bar
|
||||
$topbar-title-weight: bold !default;
|
||||
$topbar-title-font-size: emCalc(17px) !default;
|
||||
|
||||
// Set the link colors and styles for top-level nav
|
||||
$topbar-link-color: #fff !default;
|
||||
$topbar-link-color-hover: #fff !default;
|
||||
$topbar-link-color-active: #fff !default;
|
||||
$topbar-link-weight: bold !default;
|
||||
$topbar-link-font-size: emCalc(13px) !default;
|
||||
$topbar-link-hover-lightness: -10% !default; // Darken by 10%
|
||||
|
||||
//// Top Bar Style
|
||||
|
||||
.top-bar {
|
||||
overflow: hidden;
|
||||
height: $topbar-height;
|
||||
line-height: $topbar-height;
|
||||
max-width: none;
|
||||
background: $topbar-bg;
|
||||
position: relative;
|
||||
margin-bottom: $topbar-margin-bottom;
|
||||
@include box-shadow(0 5px 5px $topbar-shadow-color);
|
||||
|
||||
// Topbar Global list style
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
float: left;
|
||||
position: relative;
|
||||
height: $topbar-height;
|
||||
margin: 0;
|
||||
line-height: $topbar-height;
|
||||
font-size: $topbar-title-font-size;
|
||||
margin: 0;
|
||||
a {
|
||||
font-weight: $topbar-title-weight;
|
||||
color: $topbar-link-color;
|
||||
width: auto;
|
||||
display: block;
|
||||
padding: 0 $topbar-height / 3;
|
||||
&:hover{
|
||||
color: $topbar-link-color-hover;
|
||||
}
|
||||
&:active{
|
||||
color: $topbar-link-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-area {
|
||||
float: right;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: inline;
|
||||
li {
|
||||
float: left;
|
||||
a {
|
||||
display: block;
|
||||
color: $topbar-link-color;
|
||||
height: $topbar-height;
|
||||
line-height: $topbar-height;
|
||||
width: 100%;
|
||||
padding: 0 $topbar-height / 5;
|
||||
font-size: $topbar-link-font-size;
|
||||
font-weight: $topbar-link-weight;
|
||||
&:hover { background: adjust-color($topbar-bg, $lightness: $topbar-link-hover-lightness); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Fixed Topbar (at end to override default position)
|
||||
|
||||
[class="fixed top-bar"] {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
margin-bottom: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/// Print Styles
|
||||
|
||||
@media print{
|
||||
.top-bar{
|
||||
position: relative; // stop from appearing all over the place when fixed
|
||||
.title-area {
|
||||
i{
|
||||
display: none; // no need to show menu button
|
||||
}
|
||||
}
|
||||
.social-area{
|
||||
display: none; // these icons are uesless as well
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user