mirror of
https://github.com/neocities/neocities.git
synced 2025-08-05 17:18:02 +02:00
streamline CSS, remove google font/cdn dep
This commit is contained in:
Kyle Drake
parent
ab6abc637e
commit
47344e8bdc
186 changed files with 31689 additions and 1655 deletions
29
sass/_base-sass/_base-Form.scss
Normal file
29
sass/_base-sass/_base-Form.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Form Elements Standardization
|
||||
// ----------------------------------------------------------------
|
||||
// Consistent Margins
|
||||
form{@extend %margin-bottom;}
|
||||
|
||||
// Corrects font-family and size not being inherited in all browsers, inconsistent margins, line-heights and transforms
|
||||
button, input, select, textarea{border:0; font:{family:inherit; size:100%}; line-height:normal; margin:0; text-transform:none}
|
||||
|
||||
// Makes buttons look like buttons with appropriate cursors
|
||||
button, html input[type='button'], input[type='reset'], input[type='submit']{cursor:pointer; -webkit-appearance:button}
|
||||
|
||||
// Makes it look like a normal text input, only with a (x) when text has been entered
|
||||
input[type='search']{-webkit-appearance:textfield}
|
||||
|
||||
// Disabled input styling
|
||||
input[disabled]{background:$c-Light; cursor:not-allowed}
|
||||
|
||||
// Read Only input styling
|
||||
input[readonly]{background:$c-Disabled}
|
||||
|
||||
// Removes extra inner padding for webkit
|
||||
input[type='search']::-webkit-search-decoration{-webkit-appearance:none}
|
||||
|
||||
// Removes inner padding & border in Firefox 4+
|
||||
buton::-moz-focus-inner, input::-moz-focus-inner{border:0; padding:0}
|
||||
|
||||
// Makes sure that overflow shows and text is aligned to top of area
|
||||
textarea{overflow:auto; vertical-align:top; border: 2px solid #DCE4EC;}
|
||||
10
sass/_base-sass/_base-HTML5.scss
Normal file
10
sass/_base-sass/_base-HTML5.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// ----------------------------------------------------------------
|
||||
// HTML5 Elements that need some additional loving
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// Give HTML5 elements block display, which is not defined in ie8/9
|
||||
article, aside, details, figure, figcaption, footer,
|
||||
header, main, nav, section, summary{display:block}
|
||||
|
||||
// Makes hidden actually [hidden] in IE 8/9
|
||||
[hidden]{display:none}
|
||||
18
sass/_base-sass/_base-Media.scss
Normal file
18
sass/_base-sass/_base-Media.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Basic Styling: Media Elements
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// If an image doesn't load, make the alt text noticable
|
||||
img{color:$c-Required; font-style:italic}
|
||||
|
||||
// Make sure these guys don't extend beyond their parent containers
|
||||
audio, img, object, embed, video{max-width:100%}
|
||||
|
||||
// Give HTML5 elements inline-block display, which is also not defined in ie8/9
|
||||
audio, canvas, video{display:inline-block}
|
||||
|
||||
// Prevents browsers from displaying 'audio' w/out controls and fixes height for iOS 5
|
||||
audio:not([controls]){display:none; height:0}
|
||||
|
||||
// Corrects overflow issue in IE9
|
||||
svg:not(:root){overflow:hidden}
|
||||
28
sass/_base-sass/_basic.scss
Normal file
28
sass/_base-sass/_basic.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Basic Style Normalizing/Resetting
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// Make a smarter Box Model
|
||||
*, *:before, *:after{@include box-sizing(border-box)}
|
||||
|
||||
// Just to make sure the HTML doesn't act like a bitch
|
||||
html{overflow-y:scroll; min-height:100%}
|
||||
|
||||
// Default body text styling
|
||||
body{line-height:1.5}
|
||||
|
||||
// Reset the Standard Tags
|
||||
body, blockquote, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, img,
|
||||
legend, table, th, td, caption, hr{border:0; margin:0; outline:0; padding:0}
|
||||
|
||||
// Easy re-styling for <hr /> tags
|
||||
hr{border-top:1px solid #ddd; display:block; height:1px; margin:$spacing*6 0}
|
||||
|
||||
@import 'base-HTML5'; // Styling for HTML5 sepecific elements/selectors
|
||||
@import 'base-Media'; // Styling for base media elements
|
||||
@import 'typography'; // Styling for base typographical elements
|
||||
@import 'base-Form'; // Styling for base form elements
|
||||
|
||||
.tooltip-inner {
|
||||
white-space:pre-wrap;
|
||||
}
|
||||
134
sass/_base-sass/_forms.scss
Normal file
134
sass/_base-sass/_forms.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Styling for form elements
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
.form-Container{}
|
||||
.grouping{padding:$spacing 0}
|
||||
|
||||
// Legend Styling
|
||||
.fs-Legend{
|
||||
border:1px solid $c-Border;
|
||||
margin-bottom:$spacing*2;
|
||||
padding:$spacing*2 $spacing*3;
|
||||
}
|
||||
legend, .legend{
|
||||
font-size:$eps;
|
||||
margin-left:-$spacing;
|
||||
padding:0 $spacing;
|
||||
}
|
||||
|
||||
/* Text Input Areas & Labels */
|
||||
.text-Label{
|
||||
font-family:$arial;
|
||||
cursor:pointer;
|
||||
display:block;
|
||||
margin-bottom:$spacing;
|
||||
}
|
||||
|
||||
.dis-Label{cursor:not-allowed}
|
||||
|
||||
.input-Area, %input-Area{
|
||||
background:#fff;
|
||||
border:2px solid $c-Border;
|
||||
font-family:$arial;
|
||||
line-height:1.25;
|
||||
margin-bottom:$spacing*2;
|
||||
padding:$spacing*2 $spacing;
|
||||
width:80%;
|
||||
&:focus{
|
||||
background:$c-Lighter;
|
||||
border:2px solid #50B6D5;
|
||||
@include box-shadow($bs-2)
|
||||
}
|
||||
}
|
||||
|
||||
.text-Area{
|
||||
@extend %input-Area;
|
||||
display:block;
|
||||
min-height:150px;
|
||||
resize:vertical;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* Check/Radio Inputs & Labels */
|
||||
.option-Container{
|
||||
@extend .text-Label;
|
||||
// background:url() no-repeat left center;
|
||||
// ------ instead of reusing btns for inputs, can put img sprites here instead
|
||||
position:relative;
|
||||
&:hover{
|
||||
.btn-Radio,
|
||||
.btn-Check{border-color:#333}
|
||||
}
|
||||
}
|
||||
.option-Label{cursor:pointer; display:block; padding-left:$spacing*7; position:relative; z-index:2}
|
||||
|
||||
.input-Hide{@include invisible;}
|
||||
|
||||
.btn-Radio, .btn-Check{
|
||||
@extend %btn;
|
||||
background:$c-Btn-RC; border:1px solid #ccc; font:{size:14px; weight:bold}; height:19px; left:0; padding:2px; position:absolute; top:0; width:19px;
|
||||
&:hover{background:$c-Btn-1}
|
||||
}
|
||||
.btn-Radio{@include border-radius($radius*5)}
|
||||
|
||||
.input-Radio.selected-Radio .btn-Radio{@extend .btn-Radio:hover; border-color:#333}
|
||||
.input-Check.selected-Check .btn-Check{@extend .btn-Check:hover; border-color:#333}
|
||||
|
||||
.ifChecked{visibility:hidden}
|
||||
.selected-Check .ifChecked{visibility:visible}
|
||||
|
||||
/* Drop Down Selection Inputs */
|
||||
.select-Container{
|
||||
@extend %input-Area;
|
||||
background:url(/img/drop-Arrow.png) no-repeat 99% center #fff; display:inline-block;
|
||||
}
|
||||
.input-Select{background:none; border:0; font-size:$base; padding-right:$spacing*4; width:100%; -webkit-appearance:textarea}
|
||||
|
||||
// File Input Styling
|
||||
.file-Input-Area{
|
||||
position:relative;
|
||||
label{cursor:default}
|
||||
}
|
||||
.input-File{
|
||||
cursor:pointer;
|
||||
left:0;
|
||||
height:100%;
|
||||
opacity:0;
|
||||
position:absolute;
|
||||
top:0;
|
||||
width:100%;
|
||||
z-index:9;
|
||||
}
|
||||
.input-File-Text{
|
||||
cursor:pointer;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
/* Inputs not supported in all browsers */
|
||||
.input-Color{ // reusing a lot of input-Area here, but not @extending it because the rules of input-Area 'break' how this should look in chrome/opera
|
||||
border:1px solid $c-Border; font-family:$arial; margin-bottom:$spacing*2; padding:0 $spacing; height:45px; width:50%;
|
||||
&:focus{background:$c-Lighter; border:1px solid #50B6D5; @include box-shadow($bs-2)}
|
||||
}
|
||||
|
||||
.input-Number{
|
||||
@extend %input-Area;
|
||||
font-size:$base;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder { /* WebKit browsers */
|
||||
color:$placeholderColor;
|
||||
font-style: italic;
|
||||
}
|
||||
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
color:$placeholderColor;
|
||||
font-style: italic;
|
||||
}
|
||||
::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color:$placeholderColor;
|
||||
font-style: italic;
|
||||
}
|
||||
:-ms-input-placeholder { /* Internet Explorer 10+ */
|
||||
color:$placeholderColor;
|
||||
font-style: italic;
|
||||
}
|
||||
26
sass/_base-sass/_navs.scss
Normal file
26
sass/_base-sass/_navs.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Basic Setups for Navigation Elements
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
nav{
|
||||
ul,
|
||||
ol{
|
||||
@extend .clearfix;
|
||||
list-style:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
li{margin:0}
|
||||
|
||||
a{
|
||||
display:inline-block;
|
||||
padding:$spacing $spacing*2;
|
||||
text-decoration:underline;
|
||||
|
||||
&:hover{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
51
sass/_base-sass/_tables.scss
Normal file
51
sass/_base-sass/_tables.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Tables
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
$table-Border: 1px solid #ccc; // sets consistent boarder styling for table elements
|
||||
|
||||
// Removes most of the table spacing issues
|
||||
table{
|
||||
@extend %margin-bottom;
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
.table-Base{
|
||||
background:#fafafa;
|
||||
font-size:$base;
|
||||
width:100%; // make tables always take up the entire width of their containing parent.
|
||||
|
||||
th,
|
||||
td{
|
||||
padding:$spacing;
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
|
||||
.table-Header{
|
||||
background:#eee;
|
||||
}
|
||||
|
||||
.table-Body{
|
||||
// style?
|
||||
}
|
||||
|
||||
.table-Footer{
|
||||
background:#e3e3e3;
|
||||
}
|
||||
|
||||
.table-Border{
|
||||
@extend .table-Base;
|
||||
border-bottom:$table-Border;
|
||||
border-right:$table-Border;
|
||||
|
||||
tr{border-top:$table-Border}
|
||||
th, td{border-left:$table-Border}
|
||||
}
|
||||
|
||||
.table-Stripe{
|
||||
@extend .table-Base;
|
||||
|
||||
tr:nth-child(2n){background:$c-Light}
|
||||
}
|
||||
41
sass/_base-sass/_type-Code.scss
Normal file
41
sass/_base-sass/_type-Code.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Basic Styling: Code Elements
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
code, kbd, pre, samp{
|
||||
@extend %margin-bottom;
|
||||
background:#16414c;
|
||||
border-left:6px solid #acd473;
|
||||
color:#a9b9b9;
|
||||
display:block;
|
||||
font-family:monospace, serif;
|
||||
font-size:$base;
|
||||
padding:$spacing*3 $spacing*2 $spacing*3 $spacing*5;
|
||||
}
|
||||
|
||||
pre{
|
||||
overflow:auto;
|
||||
white-space:pre-wrap;
|
||||
|
||||
mark{ // test out styling for this
|
||||
background:#eee;
|
||||
border-bottom:1px solid #ddd;
|
||||
color:#333;
|
||||
}
|
||||
}
|
||||
|
||||
p, li, pre{
|
||||
code, kbd, pre, samp{
|
||||
display:inline-block;
|
||||
margin:0;
|
||||
padding:$spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.code-Value{
|
||||
color:#24b9af;
|
||||
}
|
||||
|
||||
.code-Tag{
|
||||
color:#8ab04c;
|
||||
}
|
||||
20
sass/_base-sass/_type-Lists.scss
Normal file
20
sass/_base-sass/_type-Lists.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Basic Styling: List Elements
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// Ordered/Unordered lists
|
||||
ol, ul{
|
||||
margin:0 0 $spacing*2;
|
||||
padding:0 0 0 $spacing*6;
|
||||
|
||||
> li:last-child{margin-bottom:0} // Kill double bottom margin
|
||||
li ol, li ul{margin-top:$spacing*2} // keep equal spacing li content followed by lists within lists
|
||||
li li{font-size:1em} // Keeps same font-size as parent <li>
|
||||
}
|
||||
|
||||
// Definition Lists
|
||||
dt{@extend %margin-bottom;}
|
||||
dd{
|
||||
margin:0 0 $spacing*2;
|
||||
padding-left:$spacing*4
|
||||
}
|
||||
59
sass/_base-sass/_typography.scss
Normal file
59
sass/_base-sass/_typography.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Basic Styling: Typography Elements
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// Consistent margin-bottom for block text elements
|
||||
blockquote, h1, h2, h3, h4, h5, h6, li, p, small{@extend %margin-bottom;}
|
||||
|
||||
// Give small some weight when used outside of <p> or <li>,
|
||||
// but make it an inline element again inside of these elements
|
||||
small{display:block}
|
||||
p, li{
|
||||
small{
|
||||
display:inline;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
|
||||
// Bold these things. Bold 'em good.
|
||||
b, strong{font-weight:bold}
|
||||
|
||||
// Italicize these things. Italicize them gooder.
|
||||
i, em, dfn{font-style:italic}
|
||||
|
||||
// Blockquote base styling
|
||||
blockquote{
|
||||
font:{size:$zeta; style:italic};
|
||||
&:before,
|
||||
&:after{
|
||||
font:{size:$eps; weight:400};
|
||||
line-height:1;
|
||||
position:relative;
|
||||
top:2px;
|
||||
}
|
||||
&:before{
|
||||
content:'"';
|
||||
left:-1px;
|
||||
}
|
||||
&:after{
|
||||
content:'"';
|
||||
right:-1px;
|
||||
}
|
||||
}
|
||||
|
||||
// sets consistent quotes across browsers
|
||||
q{quotes:"\201C" "\201D" "\2018" "\2019"}
|
||||
|
||||
// An underline & help cursor in all browsers when a title tag is present
|
||||
abbr[title], dfn[title]{border-bottom:1px dotted $c-Underline; cursor:help}
|
||||
|
||||
// IE 8/9 doesn't do this by default. shame. shame IE. shame...
|
||||
mark{background:$c-Highlight; color:$c-Darker}
|
||||
|
||||
// Prevents sub & sup from affecting the line-height
|
||||
sub, sup{font-size:75%; line-height:0; position:relative; vertical-align:baseline}
|
||||
sub{bottom:-.25em}
|
||||
sup{top:-.5em}
|
||||
|
||||
@import 'type-Code'; // Code styling
|
||||
@import 'type-Lists'; // Lists styling
|
||||
112
sass/_helper-sass/_buttons.scss
Normal file
112
sass/_helper-sass/_buttons.scss
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Basic Styling for Buttons
|
||||
// ----------------------------------------------------------------
|
||||
.btn, %btn{
|
||||
background:$c-Dark;
|
||||
@include border-radius($radius*6);
|
||||
@include box-shadow($bs-1);
|
||||
color:$c-Lighter;
|
||||
cursor:pointer;
|
||||
display:inline-block;
|
||||
font:{family:$arial; size:$base}
|
||||
line-height:1;
|
||||
padding:$spacing*2 $spacing*5;
|
||||
text-align:center;
|
||||
text-decoration:none!important; // set to !important so that if used inside of a .nav, no decoration doesn't get overridden
|
||||
text-shadow:0 1px 1px rgba(0,0,0,.4);
|
||||
@include vendor(transition, all .25s ease-in-out 0s);
|
||||
vertical-align:middle;
|
||||
-webkit-appearance:none;
|
||||
|
||||
&.btn-Pad{
|
||||
padding:$spacing*2 $spacing*4
|
||||
}
|
||||
|
||||
&:hover, &:active{
|
||||
background:$c-Darker;
|
||||
color:$c-Lighter
|
||||
}
|
||||
|
||||
&:visited{color:$c-Lighter;}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Sizing
|
||||
// ----------------------------------------------------------------
|
||||
.btn-Small{
|
||||
@extend %btn;
|
||||
font-size:$tiny;
|
||||
padding:$spacing $spacing*2;
|
||||
|
||||
&.btn-Pad{
|
||||
padding:$spacing $spacing*3
|
||||
}
|
||||
|
||||
}
|
||||
.btn-Large{
|
||||
@extend %btn;
|
||||
font-size:$gamma;
|
||||
padding:$spacing*3;
|
||||
|
||||
&.btn-Pad{
|
||||
padding:$spacing*3 $spacing*5
|
||||
}
|
||||
|
||||
}
|
||||
.btn-XLarge{
|
||||
@extend %btn;
|
||||
font-size:$beta;
|
||||
padding:$spacing*3 $spacing*4;
|
||||
|
||||
&.btn-Pad{
|
||||
padding:$spacing*4 $spacing*6
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-Wide{@extend %btn; display:block}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Coloring
|
||||
// ----------------------------------------------------------------
|
||||
.btn-Action{@extend %btn;
|
||||
background:$c-Btn-1;
|
||||
@include linear-gradient(top, #e93250, #b11f36);
|
||||
|
||||
&:hover{
|
||||
@include linear-gradient(top, #d51c3a, #841526);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-Action-2{@extend %btn; background:$c-Btn-2;
|
||||
&:hover{background:darken($c-Btn-2, 15%)}
|
||||
}
|
||||
|
||||
.btn-Action-3{@extend %btn; background:$c-Btn-3;
|
||||
&:hover{background:darken($c-Btn-3, 15%)}
|
||||
}
|
||||
|
||||
.btn-Neg,
|
||||
.btn-Neg:hover{
|
||||
@extend %btn;
|
||||
background:$c-Btn-Neg;
|
||||
color:$c-Lighter;
|
||||
}
|
||||
|
||||
.btn-Disable{
|
||||
@extend %btn;
|
||||
background:$c-Disabled;
|
||||
border:1px solid #eee;
|
||||
color:$c-Dark;
|
||||
cursor:default;
|
||||
&:hover, &:visited{@extend .btn-Disable}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Additional Styling
|
||||
// ----------------------------------------------------------------
|
||||
.btn-Square{@extend %btn; @include border-radius(0)}
|
||||
.btn-Round{@extend %btn; @include border-radius($radius*4)}
|
||||
116
sass/_helper-sass/_helper.scss
Normal file
116
sass/_helper-sass/_helper.scss
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Floats & Clearing
|
||||
// ----------------------------------------------------------------
|
||||
.float-Left {float:left}
|
||||
.float-Right {float:right}
|
||||
.float-None {float:none}
|
||||
.clear {clear:both}
|
||||
.clearfix {@include clearfix}
|
||||
.overflow {overflow:hidden}
|
||||
|
||||
|
||||
// Consistent Margin Bottom
|
||||
%margin-bottom{margin-bottom:$spacing*3}
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Showing & Hiding
|
||||
// ----------------------------------------------------------------
|
||||
.d-Block, .show{display:block}
|
||||
.d-None, .mobile-Show{display:none}
|
||||
// change display value for .mobile-Show in the appropriate @media break-point
|
||||
|
||||
// Hides from screenreaders and browsers
|
||||
.hidden{display:none!important; visibility:hidden}
|
||||
|
||||
// Hide from browsers but not from screen readers
|
||||
.invis, %invis{@include invisible}
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Reoccuring HTML Elements
|
||||
// ----------------------------------------------------------------
|
||||
// Profile Picture
|
||||
.pic, %pic{
|
||||
border:1px solid $c-White;
|
||||
@include border-radius(4px);
|
||||
@include box-shadow($bs-4);
|
||||
display:inline-block;
|
||||
overflow:hidden;
|
||||
width:90px;
|
||||
|
||||
img{display:block}
|
||||
}
|
||||
|
||||
// Make picture into a circle
|
||||
.pic-Rounded{
|
||||
@extend %pic;
|
||||
@include border-radius(100px);
|
||||
}
|
||||
/*
|
||||
Code Example
|
||||
--------------------------
|
||||
<a href="#" title="TITLE" class="pic-Rounded">
|
||||
<img src="/img/little-V.jpg" alt="" />
|
||||
</a>
|
||||
*/
|
||||
|
||||
// Media Item
|
||||
.media, %media{
|
||||
margin-bottom:$spacing*4;
|
||||
@extend .clearfix;
|
||||
position:relative;
|
||||
z-index:2;
|
||||
.media-Text >:last-child{margin-bottom:0}
|
||||
.media-Object{float:left; margin:0 $spacing*4 $spacing*2 0; max-width:30%;}
|
||||
}
|
||||
|
||||
// Have media element appear on the right hand side
|
||||
.media-Reverse, %media-Reverse{
|
||||
@extend %media;
|
||||
.media-Object{float:right; margin:0 0 $spacing*2 $spacing*4; max-width:30%}
|
||||
}
|
||||
|
||||
.media-No-Wrap{
|
||||
@extend %media;
|
||||
padding-left:100px;
|
||||
.media-Text{float:left; width:100%}
|
||||
.media-Object{margin-left:-100px; margin-right:0}
|
||||
}
|
||||
|
||||
.media-No-Wrap-Reverse{
|
||||
@extend %media-Reverse;
|
||||
padding-right:100px;
|
||||
.media-Object{margin-right:-100px; margin-left:0}
|
||||
}
|
||||
/*
|
||||
Code Example
|
||||
--------------------------
|
||||
<div class="media">
|
||||
<div class="media-Object">
|
||||
<img src="/img/little-V.jpg" alt="" />
|
||||
</div>
|
||||
<div class="media-Text">
|
||||
<h1>Title for Meida Element</h1>
|
||||
<p>Paragraph text to go along with media element.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-- Divs were used in this example, but the media element could be applied to various situations.
|
||||
Ie. could be used for a header or footer area where a logo is placed on the right or left w/text to the side.
|
||||
*/
|
||||
|
||||
|
||||
// Call out boxes
|
||||
.emph-Block{
|
||||
background:#fafafa;
|
||||
border:1px solid #ddd;
|
||||
@include border-radius(4px);
|
||||
@include box-shadow($bs-4);
|
||||
margin-bottom:$spacing*4;
|
||||
min-height:50px;
|
||||
padding:$spacing*4;
|
||||
|
||||
& > :last-child{margin-bottom:0}
|
||||
}
|
||||
|
||||
|
||||
|
||||
71
sass/_helper-sass/_layout.scss
Normal file
71
sass/_helper-sass/_layout.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Layout - Responsive & Static Grid Elements
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// A container for each row of our layout.
|
||||
// Simply styled with only a base margin-bottom and extending the clearfix class,
|
||||
// a row can also have helper classes added onto it for other general styling purposes
|
||||
.row{
|
||||
margin-left:-$spacing*5;
|
||||
margin-bottom:$spacing*5;
|
||||
@extend .clearfix;
|
||||
}
|
||||
|
||||
// The grid columns within a row.
|
||||
// Do not apply styling to this class as its purpose is for layout only.
|
||||
.col{
|
||||
float:left;
|
||||
margin-bottom:0!important;
|
||||
// row has a margin-bottom applied to it already,
|
||||
// to absolutely make sure there is no extra margin, 0!important is used
|
||||
padding-left:$spacing*5;
|
||||
position:relative;
|
||||
width:100%; // default width is 100%
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
float:none;
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
// Convert columns to inline-blocks so we can center them when our row does not add up to 100%
|
||||
.c-Row{
|
||||
@extend .row;
|
||||
font-size:0; // **
|
||||
text-align:center;
|
||||
.col{
|
||||
display:inline-block;
|
||||
float:none;
|
||||
font-size:16px; // resets the font back to the default base to fix the font-size:0 needed for centering
|
||||
text-align:left;
|
||||
}
|
||||
// ** This kills the extra white-space created by the inline-blocks.
|
||||
// Make sure interior elements have a font-size reaplied to them to make text visible.
|
||||
// (as long as they're using semantic tags or the font-size class names,
|
||||
// then this should not be a problem).
|
||||
}
|
||||
|
||||
// Base responsive grid column classes.
|
||||
// Do not apply styling to these as their purpose is for width only.
|
||||
.col-90 {width:90%}
|
||||
.col-80 {width:80%}
|
||||
.col-75 {width:75%}
|
||||
.col-66 {width:66.6666%}
|
||||
.col-60 {width:60%}
|
||||
.col-50 {width:50%}
|
||||
.col-40 {width:40%}
|
||||
.col-33 {width:33.3333%}
|
||||
.col-25 {width:25%}
|
||||
.col-20 {width:20%}
|
||||
.col-10 {width:10%}
|
||||
|
||||
.rfl{@include row-fixed-Left(300px)}
|
||||
.rfr{@include row-fixed-Right(300px)}
|
||||
// make sure to use .f-Col for the fixed column in the row
|
||||
|
||||
// The block class can be modified or deleted and replaced with other classes (like .media or .callout)
|
||||
// The main purpose of a class like this is to apply to an inner HTML element of the column structure
|
||||
// so we can apply styling to the columns.
|
||||
.block{
|
||||
background:#ccc; color:#333; padding:$spacing;
|
||||
& > :last-child{margin-bottom:0}
|
||||
}
|
||||
138
sass/_helper-sass/_mixins.scss
Normal file
138
sass/_helper-sass/_mixins.scss
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Vendor Prefix Mixins
|
||||
// ----------------------------------------------------------------
|
||||
// All Vendor Prefixes
|
||||
@mixin vendor($property, $value...){
|
||||
-moz-#{$property}:$value;
|
||||
-ms-#{$property}:$value;
|
||||
-o-#{$property}:$value;
|
||||
-webkit-#{$property}:$value;
|
||||
#{$property}:$value;
|
||||
}
|
||||
|
||||
// Just webkit & moz Prefixes
|
||||
@mixin base-vendor($property, $value...){
|
||||
-moz-#{$property}:$value;
|
||||
-webkit-#{$property}:$value;
|
||||
#{$property}:$value;
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Useful CSS3 Mixins
|
||||
// ----------------------------------------------------------------
|
||||
// Box Sizing
|
||||
@mixin box-sizing($box-value){
|
||||
@include base-vendor(box-sizing, $box-value);
|
||||
}
|
||||
|
||||
// Border Radius
|
||||
@mixin border-radius($br-value){
|
||||
@include base-vendor(border-radius, $br-value);
|
||||
background-clip:padding-box;
|
||||
}
|
||||
|
||||
// Box Shadow --- See _var.scss to edit & create box-shadow rules
|
||||
@mixin box-shadow($bs-value){
|
||||
@include base-vendor(box-shadow, $bs-value)
|
||||
}
|
||||
|
||||
// Linear Gradient
|
||||
@mixin linear-gradient($grad-Line, $grad-Colors...) {
|
||||
background: -webkit-linear-gradient($grad-Line, $grad-Colors);
|
||||
background: -moz-linear-gradient($grad-Line, $grad-Colors);
|
||||
background: -o-linear-gradient($grad-Line, $grad-Colors);
|
||||
background: linear-gradient($grad-Line, $grad-Colors);
|
||||
}
|
||||
// grad-Line - use either ###deg or top, left, bottom, right
|
||||
// example:
|
||||
// @include linear-gradient(80deg, #fcc, #f23);
|
||||
// @include linear-gradient(top, #fcc, #f23);
|
||||
|
||||
// Radial Gradient
|
||||
@mixin radial-gradient($radial...) {
|
||||
background: -webkit-radial-gradient($radial);
|
||||
background: -moz-radial-gradient($radial);
|
||||
background: -o-radial-gradient($radial);
|
||||
background: radial-gradient($radial);
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Hidden Elements Mixins
|
||||
// ----------------------------------------------------------------
|
||||
// Hide text that you don't want visible
|
||||
// like on submit buttons that use an icon instead of text
|
||||
@mixin hide-text{
|
||||
color:transparent;
|
||||
font:0/0 a;
|
||||
text-shadow:none;
|
||||
}
|
||||
|
||||
// Hide entire elements that you don't want visible
|
||||
// but still need for accesibility / functionality
|
||||
// -- ie. radio buttons for custom styled radio inputs
|
||||
@mixin invisible{
|
||||
border:0!important; height:1px!important; left:-999999px!important; overflow:hidden!important; position:absolute!important; width:1px!important;
|
||||
}
|
||||
|
||||
// Truncate Text
|
||||
@mixin truncate($truncation-boundary){
|
||||
max-width:$truncation-boundary;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
// Example -- @include truncate(100%);
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Clearfix
|
||||
// ----------------------------------------------------------------
|
||||
@mixin clearfix{
|
||||
*zoom:1;
|
||||
&:before, &:after{content:""; display:table}
|
||||
&:after{clear:both}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Hi-Res Retina Images
|
||||
// https://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
|
||||
// ----------------------------------------------------------------
|
||||
@mixin image-2x($image, $width, $height){
|
||||
@media (min--moz-device-pixel-ratio: 1.3),
|
||||
(-o-min-device-pixel-ratio: 2.6/2),
|
||||
(-webkit-min-device-pixel-ratio: 1.3),
|
||||
(min-device-pixel-ratio: 1.3),
|
||||
(min-resolution: 1.3dppx){
|
||||
// on retina, use image that's scaled by 2
|
||||
background-image:url($image);
|
||||
background-size:$width $height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Responsive Row w/fixed width column -- use in combo with .row
|
||||
// ----------------------------------------------------------------
|
||||
@mixin row-fixed-Left($col-Size){
|
||||
padding-left:$col-Size;
|
||||
|
||||
.f-Col{
|
||||
float:left;
|
||||
margin-left:-$col-Size + 20px;
|
||||
width:$col-Size - 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin row-fixed-Right($col-Size){
|
||||
padding-right:$col-Size;
|
||||
|
||||
.f-Col{
|
||||
float:right;
|
||||
margin-right:-$col-Size;
|
||||
width:$col-Size - 20px;
|
||||
}
|
||||
}
|
||||
|
||||
125
sass/_helper-sass/_navs.scss
Normal file
125
sass/_helper-sass/_navs.scss
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Basic Setups for Navigation Elements
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// The main navigation class to be placed on the <nav>
|
||||
.nav{
|
||||
ul,
|
||||
ol{border:1px solid #ccc; padding:$spacing;}
|
||||
|
||||
li{margin:0}
|
||||
|
||||
a{display:block; padding:$spacing $spacing*2; text-decoration:underline;
|
||||
&:hover{text-decoration:none}
|
||||
|
||||
.selected{}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Basic rules for Horizontal Navigations
|
||||
// ----------------------------------------------------------------
|
||||
// to be placed on the <ul> or <ol>
|
||||
.h-Nav{
|
||||
& > li{float:left}
|
||||
|
||||
// Set drop menu location to the bottom of the hovered link
|
||||
.drop-Menu{
|
||||
@extend %drop-H;
|
||||
}
|
||||
}
|
||||
|
||||
// to be placed on the <ul> or <ol> -- don't use floats, but instead use display inline-block and center navigation links
|
||||
.c-Nav{
|
||||
font-size:0; text-align:center;
|
||||
// font-size:0; deletes the white space between the <li>s
|
||||
// However, the font size inside of the <li>'s must be reset when using this trick.
|
||||
|
||||
& > li{@extend %reset-Type;}
|
||||
}
|
||||
|
||||
// Sets links to the base font-size, while also making them inline-block. Update for your own uses.
|
||||
%reset-Type{display:inline-block; font-size:16px}
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Basic rules for Vertical Navigations
|
||||
// ----------------------------------------------------------------
|
||||
// to be placed on the <ul> or <ol>
|
||||
.v-Nav{
|
||||
/* really only needs styling applied to it, as vertical nav is default */
|
||||
.drop-Menu{@extend %drop-V;} // Set drop menu location to the right of the hovered link
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Basic rules for Listless Horizontal Navigations
|
||||
// ----------------------------------------------------------------
|
||||
.ah-Nav{
|
||||
font-size:0;
|
||||
|
||||
a{@extend %reset-Type;}
|
||||
// Set drop menu location to the bottom of the hovered link
|
||||
.drop-Menu{
|
||||
@extend %drop-H;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Basic rules for Listless Vertical Navigations
|
||||
// ----------------------------------------------------------------
|
||||
.av-Nav{
|
||||
// Set drop menu location to the bottom of the hovered link
|
||||
.drop-Start{display:block}
|
||||
.drop-Menu{
|
||||
@extend %drop-V;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Basic rules for Drop Down Menus (applied to both horizontal & vertical navs)
|
||||
// ----------------------------------------------------------------
|
||||
.drop-Start{
|
||||
position:relative;
|
||||
|
||||
&:hover{
|
||||
background:#eee;
|
||||
.drop-Menu{visibility:visible}
|
||||
}
|
||||
|
||||
a{white-space:nowrap} // makes it so the dd doesn't get stuck only being as big as the top level button
|
||||
}
|
||||
.drop-Menu{
|
||||
background:#eee;
|
||||
border:1px solid #ddd;
|
||||
position:absolute;
|
||||
visibility:hidden;
|
||||
z-index:5;
|
||||
}
|
||||
|
||||
%drop-V{
|
||||
left:100%;
|
||||
top:0;
|
||||
}
|
||||
|
||||
%drop-H{
|
||||
left:0;
|
||||
top:100%;
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Basic rules for Breadcrumb Navigations
|
||||
// ----------------------------------------------------------------
|
||||
.bread{
|
||||
@extend .h-Nav;
|
||||
li{
|
||||
&:last-child:after{content:none;}
|
||||
&:after{content:">"; display:inline-block;}
|
||||
}
|
||||
a{display:inline-block}
|
||||
|
||||
span{display:inline-block; padding:$spacing $spacing*2}
|
||||
}
|
||||
|
||||
86
sass/_helper-sass/_type.scss
Normal file
86
sass/_helper-sass/_type.scss
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
// ----------------------------------------------------------------
|
||||
// List Helpers
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// Kill list styling - extend into Navigations & for lists that don't require markings
|
||||
.kill-List, %kill-List{list-style:none; padding:0}
|
||||
|
||||
// Numbered lists for non-ol list types
|
||||
.numbered{list-style-type:decimal;}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Emphasize Text Helpers
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// Shout Out - blockquote / blockquote like styling for emphasizing text
|
||||
.shout-Out{
|
||||
background:$c-Lighter;
|
||||
border-left:4px solid $c-Dark;
|
||||
padding:$spacing*4;
|
||||
&:before, &:after{display:none}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Formatting Text Helpers
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// :after Symbols
|
||||
%degree:after {content:"\00BA"} // degree
|
||||
%go:after {content:"\00A0" "\00BB"} // >> (use on link / btn
|
||||
|
||||
// Align Text
|
||||
.txt-Center {text-align:center}
|
||||
.txt-Left {text-align:left}
|
||||
.txt-Right {text-align:right}
|
||||
.txt-Just {text-align:justify}
|
||||
|
||||
// Highlight Text
|
||||
.highlight, %highlight{
|
||||
background:$c-Highlight;
|
||||
color:$c-Darker;
|
||||
@include border-radius(3px);
|
||||
display:inline-block;
|
||||
padding:$spacing;
|
||||
vertical-align:text-top;
|
||||
}
|
||||
|
||||
// Highlight Text - Skewed
|
||||
.slant{
|
||||
@extend %highlight;
|
||||
@include vendor(transform, skewX(-16deg));
|
||||
}
|
||||
|
||||
.text-Correct{
|
||||
display:inline-block;
|
||||
@include vendor(transform, skewX(16deg));
|
||||
}
|
||||
|
||||
/*
|
||||
Code Example: Slanted Text w/Highlight
|
||||
--------------------------
|
||||
<span class="slant">
|
||||
Text Goes here
|
||||
</span>
|
||||
|
||||
Code Example: Normal flowing text w/slanted highlight
|
||||
--------------------------
|
||||
<span class="slant">
|
||||
<span class="text-Correct">Text Goes here</span>
|
||||
</span>
|
||||
*/
|
||||
|
||||
// Multi-Columned Text
|
||||
.multi{
|
||||
@include base-vendor(column-count, 3);
|
||||
@include base-vendor(column-gap, $spacing*10);
|
||||
@include base-vendor(column-rule, 1px outset #eee);
|
||||
}
|
||||
|
||||
// Truncate Text
|
||||
%truncate{@include truncate(100%)}
|
||||
|
||||
// Word Wraps
|
||||
%auto-wrap {word-wrap:auto}
|
||||
%breakword {word-wrap:break-word}
|
||||
%normal-wrap {word-wrap:normal}
|
||||
28
sass/_project-sass/_print.scss
Normal file
28
sass/_project-sass/_print.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
// Print Stylesheet default from HTML5 Boiler Plate
|
||||
|
||||
@media print{
|
||||
*{
|
||||
background:transparent!important;
|
||||
color:#000!important; // Black prints faster
|
||||
box-shadow:none!important;
|
||||
text-shadow:none!important;
|
||||
}
|
||||
|
||||
a, a:visited{text-decoration:underline}
|
||||
a[href]:after{content:" (" attr(href) ")"}
|
||||
|
||||
abbr[title]:after{content:" (" attr(title) ")"}
|
||||
|
||||
pre, blockquote{border:1px solid #999; page-break-inside:avoid}
|
||||
|
||||
thead{display:table-header-group} // h5bp.com/t
|
||||
|
||||
tr, img{page-break-inside:avoid}
|
||||
|
||||
img{max-width:100%!important}
|
||||
|
||||
@page{margin:0.5cm}
|
||||
|
||||
p,h2, h3{orphans:3; widows:3}
|
||||
h2, h3{page-break-after:avoid}
|
||||
}
|
||||
64
sass/_project-sass/_project-Base.scss
Normal file
64
sass/_project-sass/_project-Base.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Project Specific Extended HTML Stylings
|
||||
// ----------------------------------------------------------------
|
||||
body{background:#CCDF9B}
|
||||
|
||||
// Highlight Text Selection
|
||||
::-moz-selection {background:$c-Brand-1; color:$c-Light; text-shadow:none}
|
||||
::selection {background:$c-Brand-1; color:$c-Light; text-shadow:none}
|
||||
|
||||
// Full container for the entire page.
|
||||
.page{min-height:600px;
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
min-height:25px;
|
||||
}
|
||||
}
|
||||
|
||||
// Generic tag to wrap around content within sections to apply a max width to the interior content
|
||||
// while allowing for larger sections to expand the whole page for BG purposes
|
||||
.content{
|
||||
margin:0 auto;
|
||||
max-width:1200px;
|
||||
padding:$spacing*5;
|
||||
|
||||
& > :last-child{
|
||||
margin-bottom:0; // kill any extra margin on the last element in the .content div
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Project Specific Link Stylings
|
||||
// ----------------------------------------------------------------
|
||||
a{
|
||||
color:$c-Link;
|
||||
&:hover, &:active{color:darken($c-Link, 15%)}
|
||||
&:visited{color:#A5424B}
|
||||
// &:visited{color:darken($c-Link, 30%)}
|
||||
}
|
||||
// example - :hover{color:darken($c-Link, 15%)}
|
||||
|
||||
// Outlines - kill or keep. It's your project
|
||||
:focus, a:focus, a:active, input[type="submit"]::-moz-focus-inner{outline:none}
|
||||
|
||||
.col-33, .col-40, .col-60{
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
float:none;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
.col-50{
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
float:none;
|
||||
padding:0;
|
||||
width:100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'project-Header'; // Project Specific Header Styling
|
||||
@import 'project-Main'; // Project Specific Main Content Area Styling
|
||||
@import 'project-Footer'; // Project Specific Footer Styling
|
||||
|
||||
.alert{
|
||||
background-color:#F5BA00; color:#fff;
|
||||
}
|
||||
165
sass/_project-sass/_project-Footer.scss
Normal file
165
sass/_project-sass/_project-Footer.scss
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Project Specific: Footer Area
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// Apply to <footer> for styling
|
||||
.footer-Base{
|
||||
color:#5e5b56;
|
||||
float: left;
|
||||
width: 100%;
|
||||
|
||||
h1, h2, h3, h4{
|
||||
color:#8b9a7a;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply to internal wrapper for footer content
|
||||
.footer-Content{
|
||||
@extend .content;
|
||||
}
|
||||
|
||||
// Footer Intro Area
|
||||
.footer-Intro{
|
||||
background:#daeea5;
|
||||
border-top:1px solid #cedbab;
|
||||
@include box-shadow($bs-4);
|
||||
position:relative;
|
||||
}
|
||||
.footer-Content{
|
||||
padding-top:20px;
|
||||
padding-bottom:20px;
|
||||
padding-left: 40px;
|
||||
padding-right: 20px;
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.footer-Content .row {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.f-Col{
|
||||
@include box-sizing(content-box);
|
||||
min-height:125px;
|
||||
padding-bottom:$spacing*7;
|
||||
position:relative;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
min-height:2px;
|
||||
padding-left:15px!important;
|
||||
padding-right:100px!important;
|
||||
}
|
||||
|
||||
.action-Link{
|
||||
bottom:0;
|
||||
position:absolute;
|
||||
right:$spacing*3;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
position:static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-icon {
|
||||
background-repeat:no-repeat;
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:-70px;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
@include vendor(background-size, 100%);
|
||||
height:90px!important;
|
||||
top:0;
|
||||
width:77px!important;
|
||||
}
|
||||
}
|
||||
|
||||
.f-Col-1{
|
||||
padding-right:$spacing*3;
|
||||
|
||||
.footer-icon{
|
||||
background-image: url(/img/support-us.png);
|
||||
height:104px;
|
||||
right:5px;
|
||||
width:92px;
|
||||
}
|
||||
}
|
||||
|
||||
.f-Col-2{
|
||||
padding-left:15px;
|
||||
padding-right:6px;
|
||||
position:relative;
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
border-bottom:1px solid rgba(0,0,0,.1);
|
||||
border-top:1px solid rgba(0,0,0,.1);
|
||||
margin:20px 0;
|
||||
overflow:hidden;
|
||||
padding:20px 0;
|
||||
|
||||
.footer-icon{
|
||||
top:14px
|
||||
}
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
background:url("/img/border.png") no-repeat 0 -20px;
|
||||
content:"";
|
||||
height:200px;
|
||||
opacity:0.2;
|
||||
position:absolute;
|
||||
top:0;
|
||||
width:1px;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
&:before{left:-14px}
|
||||
&:after{right:-14px}
|
||||
|
||||
.footer-icon {
|
||||
background-image: url(/img/about-neocities.png);
|
||||
width: 100px;
|
||||
height: 106px;
|
||||
}
|
||||
}
|
||||
|
||||
.f-Col-3{
|
||||
padding-left:20px;
|
||||
@media(max-device-width:480px), screen and (max-width:800px){
|
||||
padding-left:0;
|
||||
}
|
||||
|
||||
.footer-icon{
|
||||
background-image: url(/img/latest-news.png);
|
||||
height:103px;
|
||||
width:134px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Footer Outro Area
|
||||
.footer-Outro{
|
||||
background:#ccdf9b;
|
||||
border-top:1px solid #b3c388;
|
||||
overflow:hidden;
|
||||
|
||||
a{color:#5e5b56}
|
||||
}
|
||||
.credits{margin-bottom:0}
|
||||
.footer-Nav{
|
||||
text-transform:uppercase;
|
||||
|
||||
.h-Nav{float:right;
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
float:none;
|
||||
margin-top:15px;
|
||||
|
||||
li:first-child a{padding-left:0}
|
||||
}
|
||||
}
|
||||
.h-Nav a{padding:0 $spacing*2}
|
||||
.h-Nav li:last-child a{padding-right:0}
|
||||
}
|
||||
326
sass/_project-sass/_project-Header.scss
Normal file
326
sass/_project-sass/_project-Header.scss
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Project Specific: Header Area
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// Apply to header for styling
|
||||
.header-Base{
|
||||
background:#65a0ad;
|
||||
border-bottom:6px solid #e93250;
|
||||
min-height:42px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.header-Content{
|
||||
@media(max-device-width:480px), screen and (max-width:800px){
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
.blurb{background:#fff}
|
||||
|
||||
.header-Intro{
|
||||
background:url(/img/neocity.jpg) 95% bottom no-repeat;
|
||||
min-height:214px;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
@include vendor(background-size, cover);
|
||||
min-height:2px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-Outro{
|
||||
background:#30424b -moz-linear-gradient(top, #2b3c43 0%, #354751 100%); /* FF3.6+ */
|
||||
background:#30424b -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b3c43), color-stop(100%,#354751)); /* Chrome,Safari4+ */
|
||||
background:#30424b -webkit-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Chrome10+,Safari5.1+ */
|
||||
background:#30424b -o-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Opera 11.10+ */
|
||||
background:#30424b -ms-linear-gradient(top, #2b3c43 0%,#354751 100%); /* IE10+ */
|
||||
background:#30424b linear-gradient(to bottom, #2b3c43 0%,#354751 100%); /* W3C */
|
||||
@include box-shadow($outroShadow);
|
||||
color:#fafafa;
|
||||
}
|
||||
.hp .header-Outro .col-50 {
|
||||
width: 48%;
|
||||
}
|
||||
.hp .header-Outro .signup-Area {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.intro-List{
|
||||
@extend %kill-List;
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
margin-bottom:20px;
|
||||
padding:20px!important;
|
||||
}
|
||||
|
||||
li{
|
||||
padding-left:$spacing*9;
|
||||
padding-right:$spacing*3;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin-bottom:2px;
|
||||
}
|
||||
|
||||
p{
|
||||
color:#B2BCC1;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-Icon{
|
||||
background:url(/img/icons.png) no-repeat;
|
||||
display:block;
|
||||
height:37px;
|
||||
left:-10px;
|
||||
position:absolute;
|
||||
top:2px;
|
||||
width:37px;
|
||||
}
|
||||
|
||||
.intro-Tools{position:relative}
|
||||
.intro-Question{
|
||||
position:relative;
|
||||
|
||||
.intro-Icon{
|
||||
background-position:0 -40px;
|
||||
}
|
||||
}
|
||||
.intro-Social {
|
||||
position:relative;
|
||||
|
||||
.intro-Icon {
|
||||
background-position: 0 -80px;
|
||||
}
|
||||
}
|
||||
|
||||
.signup-Area{
|
||||
min-height:100px;
|
||||
position:relative
|
||||
}
|
||||
|
||||
.signup-Form{
|
||||
background:#354751;
|
||||
border-radius:4px 4px 0 0;
|
||||
@include box-shadow($signupShadow);
|
||||
height:600%;
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
top:-45px;
|
||||
width:95%;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
height:auto;
|
||||
margin:0;
|
||||
overflow:visible;
|
||||
padding-bottom:20px;
|
||||
position:static;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin-bottom:0;
|
||||
text-shadow:0 1px 1px rgba(0,0,0,.5);
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
hr{
|
||||
border-bottom:1px solid #4a6677;
|
||||
border-top:1px solid #1d282d;
|
||||
margin:4px 0 22px;
|
||||
}
|
||||
|
||||
fieldset{
|
||||
background:url(/img/sign-up-bg.png) repeat-x center top;
|
||||
padding: 20px 33px;
|
||||
}
|
||||
|
||||
label{
|
||||
color:#81b8c6;
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
font-size:70%
|
||||
}
|
||||
}
|
||||
|
||||
.input-Area{
|
||||
background:#29383f;
|
||||
border:0 solid black;
|
||||
@include box-shadow($inputAreaShadow);
|
||||
color:#557380;
|
||||
margin-bottom:$spacing*7;
|
||||
margin-right:$spacing;
|
||||
padding: 11px 12px 9px 12px;
|
||||
width:62%;
|
||||
|
||||
&:focus{color:#eee}
|
||||
}
|
||||
|
||||
.btn-Action{
|
||||
padding:10px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.small-Nav{
|
||||
background:#30424B;
|
||||
display:none;
|
||||
position:fixed;
|
||||
right:0;
|
||||
top:0;
|
||||
width:50px;
|
||||
z-index:9999;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
display:block
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Top nav area
|
||||
.header-Nav{
|
||||
background:#5e95a1;
|
||||
border-bottom:1px solid #92B4BD;
|
||||
|
||||
@include vendor(transition, all 0.35s);
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
position:fixed;
|
||||
top:-900px!important;
|
||||
}
|
||||
|
||||
&.show-Nav{
|
||||
top:0!important;
|
||||
}
|
||||
|
||||
a, a:visited{
|
||||
color:#fff;
|
||||
padding:$spacing*2 $spacing*3;
|
||||
text-decoration:none;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
display:block;
|
||||
}
|
||||
|
||||
&:hover{background:#528995; text-decoration:underline}
|
||||
&.selected, &:active{background:#528995; text-decoration:underline}
|
||||
}
|
||||
}
|
||||
.constant-Nav{
|
||||
float:left;
|
||||
position:relative;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
float:none;
|
||||
|
||||
li{float:none;}
|
||||
}
|
||||
}
|
||||
|
||||
.status-Nav{
|
||||
float:right;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
float:none;
|
||||
}
|
||||
|
||||
li{
|
||||
float:left;
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
float:none
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// hp CSS
|
||||
.hp .header-Base{
|
||||
padding-top:46px;
|
||||
}
|
||||
.hp .header-Nav{
|
||||
left:0;
|
||||
position:fixed;
|
||||
top:0;
|
||||
width:100%;
|
||||
z-index:3
|
||||
}
|
||||
|
||||
.hp .hp-Logo{
|
||||
left:-90px;
|
||||
position:fixed;
|
||||
@include vendor(transition, all 0.35s);
|
||||
|
||||
|
||||
&.in-View{
|
||||
left:0!important;
|
||||
z-index:99;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
left:-90px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hp .logo{
|
||||
padding-top:45px;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
padding-left:20px;
|
||||
padding-right:20px;
|
||||
}
|
||||
}
|
||||
|
||||
.constant-Nav{
|
||||
margin-left:-88px;
|
||||
@include vendor(transition, all 0.35s);
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
&.in-View{
|
||||
margin-left:0;
|
||||
padding-left:70px;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
padding-left:0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-Stripe{
|
||||
border-bottom:6px solid #E93250;
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
border:0;
|
||||
}
|
||||
}
|
||||
|
||||
// Interior CSS
|
||||
.interior .page{
|
||||
padding-top: 22px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.interior .signup-Form {
|
||||
top: 0;
|
||||
}
|
||||
.interior .header-Base{
|
||||
left:0;
|
||||
overflow:visible;
|
||||
position:fixed;
|
||||
top:0;
|
||||
width:100%;
|
||||
z-index:9;
|
||||
}
|
||||
|
||||
.int-Logo{
|
||||
left:0;
|
||||
position:absolute;
|
||||
top:0;
|
||||
width:70px;
|
||||
z-index:9;
|
||||
}
|
||||
|
||||
.interior .header-Nav{
|
||||
padding-left:70px;
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
.interior .constant-Nav{margin:0}
|
||||
823
sass/_project-sass/_project-Main.scss
Normal file
823
sass/_project-sass/_project-Main.scss
Normal file
|
|
@ -0,0 +1,823 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Project Specific: Main Content Area
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// Apply to <main> or top level <section> for styling
|
||||
.content-Base{
|
||||
background:#f6f0e6;
|
||||
min-height:500px;
|
||||
padding-bottom:50px;
|
||||
padding-top: 10px;
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
color:#e93250
|
||||
}
|
||||
}
|
||||
.content, .footer-Content {
|
||||
padding: 20px 3%;
|
||||
}
|
||||
.single-Col{
|
||||
max-width:800px;
|
||||
}
|
||||
|
||||
// About page
|
||||
.twitter-tweet.twitter-tweet-rendered{margin:0 auto 30px!important}
|
||||
|
||||
// Interior pages
|
||||
.interior .header-Outro {
|
||||
padding-top: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.interior .header-Outro h1 {
|
||||
font-size: 2.5em;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.site-url {
|
||||
font-size:18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.site-url a {
|
||||
color: #e93250;
|
||||
font-weight: bold;
|
||||
}
|
||||
.interior .header-Outro .row.content {
|
||||
|
||||
}
|
||||
.interior .header-Outro .subtitle {
|
||||
font-size: 1em;
|
||||
margin-top: -15px;
|
||||
}
|
||||
.content.wide {
|
||||
padding-left: 6%;
|
||||
padding-right: 6%;
|
||||
}
|
||||
.content.misc-page {
|
||||
background: #FAF6F1;
|
||||
-moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.10);
|
||||
-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.10);
|
||||
box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.10);
|
||||
padding: 1px 3% 40px 3%;
|
||||
}
|
||||
.content.misc-page {
|
||||
h3, h4, h5, h6 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
.content.misc-page h2 {
|
||||
font-size: 1.6em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.content.misc-page h3, .content.misc-page h4, .content.misc-page h5 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.content.misc-page h6 {
|
||||
font-size: 1em;
|
||||
}
|
||||
.content.misc-page h1 {
|
||||
font-size: 2.2em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.content.misc-page hr {
|
||||
margin: 35px 0 25px 0;
|
||||
}
|
||||
|
||||
// Dashboard
|
||||
.interior .header-Outro .col.col-50.signup-Area {padding-left: 0;}
|
||||
.interior .header-Outro a {color:#E93250}
|
||||
.interior .header-Outro .btn-Action {color:#fff}
|
||||
.interior .signup-Area {
|
||||
min-height: 164px;
|
||||
}
|
||||
.interior .signup-Area img {
|
||||
-moz-box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.10);
|
||||
-webkit-box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.10);
|
||||
box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.10);
|
||||
border: 4px solid white;
|
||||
}
|
||||
.interior .signup-Area.large img {
|
||||
border: 6px solid white;
|
||||
}
|
||||
.interior .header-Outro .screenshot {
|
||||
width:235px;height:141px;
|
||||
}
|
||||
.interior .header-Outro ul {
|
||||
margin:0;padding:0;
|
||||
}
|
||||
.interior .header-Outro ul li {
|
||||
list-style: none;
|
||||
font-size: 80%;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.interior .signup-Form fieldset {
|
||||
padding: 20px;
|
||||
}
|
||||
.interior .header-Outro h2 {
|
||||
margin-top: 12px;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
.welcome {
|
||||
background: #daeea5 url(/img/heartcat.png) no-repeat 20px center;
|
||||
background-size: 77px 81px;
|
||||
padding: 20px 20px 20px 108px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.welcome h4 {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.welcome .close-button {
|
||||
float: right;
|
||||
background: url(/img/welcome-close.png) no-repeat;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
.files {
|
||||
float:left;
|
||||
background: #E4D8CB;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.files .header {
|
||||
background: #5E95A1;
|
||||
color: #fff;
|
||||
float:left;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.files .breadcrumbs {
|
||||
float: left;
|
||||
font-weight:bold;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.files .actions {
|
||||
float: right;
|
||||
}
|
||||
.files .btn-Action {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.btn-Action span {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.btn-Action.new-Page span {
|
||||
background-image: url(/img/new-page.png);
|
||||
background-position-y: 1px;
|
||||
padding-left: 29px;
|
||||
}
|
||||
.btn-Action.new-Folder span {
|
||||
background-image: url(/img/new-folder.png);
|
||||
padding-left: 26px;
|
||||
}
|
||||
.btn-Action.upload span {
|
||||
background-image: url(/img/upload.png);
|
||||
padding-left: 24px;
|
||||
}
|
||||
.files .list {
|
||||
padding: 20px;
|
||||
}
|
||||
.files .list .upload-Boundary {
|
||||
float: left;
|
||||
border: 3px dashed #F6F0E6;
|
||||
width: 100%;
|
||||
margin: 18px 0;
|
||||
padding: 10px;
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
min-height: 300px;
|
||||
}
|
||||
.files .list .upload-Boundary.with-instruction {
|
||||
background: url(/img/drag-drop.png) no-repeat center center;
|
||||
}
|
||||
.files .uploading-overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-color:rgba(0, 0, 0, 0.35);
|
||||
z-index: 100;
|
||||
}
|
||||
.files .uploading {
|
||||
background: #fff;
|
||||
font-style: italic;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 400px;
|
||||
margin-top: 14%;
|
||||
padding: 25px 40px 28px 40px;
|
||||
-webkit-box-shadow: 1px 1px 21px 5px rgba(50, 50, 50, 0.5);
|
||||
-moz-box-shadow: 1px 1px 21px 5px rgba(50, 50, 50, 0.5);
|
||||
box-shadow: 1px 1px 21px 5px rgba(50, 50, 50, 0.5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.files .uploading p {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.files .progress-bar {
|
||||
background:#CCCCCC;
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 14px;
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.files .progress-bar .progress {
|
||||
background: #E93250;
|
||||
height: 100%;
|
||||
-webkit-border-top-right-radius: 0px;
|
||||
-webkit-border-bottom-right-radius: 0px;
|
||||
-moz-border-radius-topright: 0px;
|
||||
-moz-border-radius-bottomright: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
-webkit-border-top-left-radius: 20px;
|
||||
-webkit-border-bottom-left-radius: 20px;
|
||||
-moz-border-radius-topleft: 20px;
|
||||
-moz-border-radius-bottomleft: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display:block;
|
||||
}
|
||||
.file {
|
||||
float: left;
|
||||
padding: 5px 0px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 125px;
|
||||
text-align: center;
|
||||
display:block;
|
||||
position:relative;
|
||||
}
|
||||
.file .title {
|
||||
font-weight: bold;
|
||||
font-size: 8px;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
.html-thumbnail {
|
||||
font-size: 11px;
|
||||
margin-top: 5px;
|
||||
margin-left: 10px;
|
||||
display:block;
|
||||
position:relative;
|
||||
width:105px;
|
||||
height:63px;
|
||||
}
|
||||
.html-thumbnail.html img {
|
||||
width: 105px;
|
||||
height:63px;
|
||||
-webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
|
||||
-moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
|
||||
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
|
||||
}
|
||||
.html-thumbnail.image img {
|
||||
max-width:105px;
|
||||
max-height:63px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.html-thumbnail.misc {
|
||||
width: 63px;
|
||||
height: 63px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.misc-icon {
|
||||
background: url(/img/misc-file.png) no-repeat 0px 0px;
|
||||
width: 67px;
|
||||
height: 67px;
|
||||
display: block;
|
||||
padding-top: 35px;
|
||||
font-size: 14px;
|
||||
color: #bbb;
|
||||
font-weight: bold;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.folder-icon {
|
||||
background: url(/img/folder.png) no-repeat 0px 0px;
|
||||
width: 95px;
|
||||
height: 65px;
|
||||
display: block;
|
||||
padding-top: 35px;
|
||||
}
|
||||
.overlay a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
}
|
||||
.overlay i {
|
||||
font-weight: bold;
|
||||
}
|
||||
.overlay {
|
||||
position:absolute;
|
||||
top:0;
|
||||
width:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color:rgba(0, 0, 0, 0.5);
|
||||
display:none;
|
||||
}
|
||||
.link-overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 123px;
|
||||
height: 30px;
|
||||
}
|
||||
.file > .overlay {
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
padding-top: 15px;
|
||||
background-color:rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.filehover:hover .overlay, .fileimagehover:hover .overlay {
|
||||
display:block;
|
||||
}
|
||||
.html-thumbnail.misc.fileimagehover .overlay {
|
||||
margin: 1px 0 0 2px;
|
||||
}
|
||||
.site-actions {
|
||||
float: left;
|
||||
margin-top: 20px;
|
||||
font-size: 90%;
|
||||
}
|
||||
.site-actions a {
|
||||
color: #666;
|
||||
}
|
||||
@media(min-width:1200px) {
|
||||
.container {
|
||||
width: 1200px;
|
||||
}
|
||||
}
|
||||
@media(min-width:700px) and (max-width:1200px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.content.misc-page.columns { //.colmask
|
||||
float: left;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.col-left {
|
||||
float: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.right-col {
|
||||
background: #FAF6F1;
|
||||
}
|
||||
.content.misc-page .col-33 h3 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.content.misc-page .col-33 h3:nth-of-type(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.right-col .col-left {
|
||||
background-color: white;
|
||||
right: 33%;
|
||||
}
|
||||
.content.misc-page.columns .col {
|
||||
padding: 25px 30px 30px 30px;
|
||||
position: relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.content.misc-page.columns .col-66 {
|
||||
width: 67%;
|
||||
left: 33%;
|
||||
}
|
||||
.content.misc-page.columns .col-33 {
|
||||
width: 33%;
|
||||
left: 33%;
|
||||
}
|
||||
.interior .header-Outro.with-columns {
|
||||
padding-top: 22px;
|
||||
}
|
||||
.interior .header-Outro.with-columns h3 {
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
font-size: 1.7em;
|
||||
}
|
||||
.interior .header-Outro.with-columns .content {
|
||||
padding: 0;
|
||||
}
|
||||
.interior .header-Outro.with-columns .col {
|
||||
padding: 25px 0 8px 30px;
|
||||
}
|
||||
.interior .header-Outro.with-columns .col-32 {
|
||||
width: 33%;
|
||||
}
|
||||
.interior .header-Outro.with-columns .col-66 {
|
||||
width: 67%;
|
||||
border-right: 1px solid #0B0F11;
|
||||
}
|
||||
.interior .header-Outro.with-columns .col-32 .edit {
|
||||
margin-top: 4px;
|
||||
float: right;
|
||||
margin-right: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
.feed-filter {
|
||||
float: left;
|
||||
margin-top: 1.4em;
|
||||
font-size: 0.8em;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
.interior .header-Outro .feed-filter a {
|
||||
color: white;
|
||||
margin-left: 13px;
|
||||
}
|
||||
.site-suggestion {
|
||||
float: left;
|
||||
width: 156px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
height: 160px;
|
||||
}
|
||||
.stats {
|
||||
margin-bottom: 2em;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.content.misc-page.columns .stats .col {
|
||||
padding: 0;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.large-portrait {
|
||||
border: 10px solid white;
|
||||
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
|
||||
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
|
||||
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
|
||||
}
|
||||
.site-portrait {
|
||||
border: 5px solid white;
|
||||
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
|
||||
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
|
||||
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
|
||||
float:left;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
.site-portrait img {
|
||||
width: 146px;
|
||||
}
|
||||
.site-portrait .caption {
|
||||
display: block;
|
||||
clear: both;
|
||||
font-size: .8em;
|
||||
margin-top: .2em;
|
||||
margin-bottom: -.2em;
|
||||
}
|
||||
a.tag {
|
||||
font-size: .7em;
|
||||
text-transform: uppercase;
|
||||
background: #FFFFCC;
|
||||
color: #C1A009;
|
||||
float: left;
|
||||
padding: 1px 5px;
|
||||
-moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
|
||||
-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
|
||||
box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
|
||||
margin-right: 3px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
a.tag:hover {
|
||||
text-decoration: none;
|
||||
background: #FFEE8A;
|
||||
}
|
||||
.following {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.avatar {
|
||||
height:37px;
|
||||
width:37px;
|
||||
margin: 0 4px 4px 0;
|
||||
float: left;
|
||||
}
|
||||
.news-item {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.news-item.update, .news-item.tags, .news-item.comment.for-me, .news-item.tip.for-me {
|
||||
margin: 1.8em 0;
|
||||
}
|
||||
.news-item:nth-of-type(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.news-item.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
.news-item .user {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
.news-item .comment {
|
||||
color: #000;
|
||||
font-style: normal;
|
||||
font-size: .8em;
|
||||
}
|
||||
.news-item.for-me .comment {
|
||||
color: #000;
|
||||
font-style: normal;
|
||||
margin-top: .2em;
|
||||
font-size: .9em;
|
||||
margin-bottom: -.4em;
|
||||
}
|
||||
.news-item .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #E6E6E6;
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.news-item.comment .icon {
|
||||
background: #DAEEA5;
|
||||
}
|
||||
.news-item.comment.for-me .icon, .news-item.tip.for-me .icon {
|
||||
background-size: 62px 62px;
|
||||
width: 82px;
|
||||
height: 62px;
|
||||
background-position: right top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.news-item .icon-mini {
|
||||
|
||||
}
|
||||
.news-item.update .icon {
|
||||
background: #E93250;
|
||||
}
|
||||
.news-item.tip .icon {
|
||||
background: #FFCC00;
|
||||
}
|
||||
.news-item.follow .icon {
|
||||
background: #3399CC;
|
||||
}
|
||||
.news-item .title {
|
||||
margin-bottom: .4em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.news-item .date {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 11px;
|
||||
margin-top: .5em;
|
||||
}
|
||||
.news-item .files {
|
||||
background: #eee;
|
||||
padding: 8px 10px 2px 10px;
|
||||
border-top: 1px solid #ddd;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.news-item .file {
|
||||
width: 90px;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.news-item .file a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.news-item .html-thumbnail {
|
||||
margin-top: 1px;
|
||||
margin-left: 0px;
|
||||
width: auto;
|
||||
}
|
||||
.news-item .site-suggestion {
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.news-item .tag {
|
||||
float: none;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.news-item .actions {
|
||||
font-size: 11px;
|
||||
}
|
||||
.news-item .actions a {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.news-item .content {
|
||||
padding: 0 0 0 32px;
|
||||
}
|
||||
.news-item .comments {
|
||||
margin-bottom: 1.5em;
|
||||
margin-top: .7em;
|
||||
}
|
||||
.news-item .comments .comment {
|
||||
font-size: .8em;
|
||||
clear: both;
|
||||
}
|
||||
.news-item .comments .comment .user {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.news-item .comments .comment .actions {
|
||||
margin-top: .3em;
|
||||
}
|
||||
.news-item .avatar {
|
||||
margin-right: 10px;
|
||||
}
|
||||
//profile
|
||||
.signup-Area.large {
|
||||
width: 418px;
|
||||
height: 236px;
|
||||
}
|
||||
.interior .header-Outro.with-site-image {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.report {
|
||||
margin-top: 2em;
|
||||
float: left;
|
||||
width: 100%;
|
||||
font-size: .8em;
|
||||
}
|
||||
.report, .report a {
|
||||
color: #999;
|
||||
}
|
||||
.interior .header-Outro .actions a {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.interior .header-Outro .stats {
|
||||
margin-bottom: 1.2em;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-top: 2em;
|
||||
}
|
||||
.interior .header-Outro .stats strong {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
color: #DAEEA5;
|
||||
}
|
||||
.interior .header-Outro .stats span {
|
||||
font-size: .7em;
|
||||
text-transform: uppercase;
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
.interior .header-Outro .stats .stat {
|
||||
float: left;
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
}
|
||||
.interior .header-Outro .stats .stat.tips {
|
||||
width: 60px;
|
||||
}
|
||||
.btn-Action.follow span {
|
||||
background-image: url(/img/follow.png);
|
||||
padding-left: 22px;
|
||||
}
|
||||
.btn-Action.tip span {
|
||||
background-image: url(/img/tip.png);
|
||||
padding-left: 26px;
|
||||
background-position-y: -1px;
|
||||
}
|
||||
.btn-Action.share span {
|
||||
background-image: url(/img/share.png);
|
||||
padding-left: 26px;
|
||||
}
|
||||
.col-33 .stats .stat {
|
||||
margin-bottom: .4em;
|
||||
}
|
||||
.col-33 .stats .stat span {
|
||||
width: 10em;
|
||||
float: left;
|
||||
}
|
||||
.archives {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.archives img {
|
||||
float: left;
|
||||
border: 3px solid white;
|
||||
-webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
|
||||
-moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
|
||||
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
|
||||
width: 72px;
|
||||
}
|
||||
.archives img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.more {
|
||||
float: left;
|
||||
clear: both;
|
||||
margin-top: 1em;
|
||||
font-size: .8em;
|
||||
}
|
||||
.post-comment {
|
||||
background: #DAEEA5;
|
||||
float: left;
|
||||
width: 111%;
|
||||
padding: 20px 0 10px 30px;
|
||||
margin: -25px 0 28px -30px;
|
||||
}
|
||||
.post-comment input {
|
||||
width: 84%;
|
||||
float: left;
|
||||
}
|
||||
.post-comment .btn-Action {
|
||||
margin-left: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.supporter-badge {
|
||||
background:url(/img/supporter.png);
|
||||
width: 99px;
|
||||
height: 26px;
|
||||
float: left;
|
||||
margin-top: 7px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.title-with-badge {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.title-with-badge span {
|
||||
float: left;
|
||||
}
|
||||
.section.featured-Websites {
|
||||
background:#65A0AD;
|
||||
}
|
||||
.section.featured-Websites h2 {
|
||||
color: white;
|
||||
}
|
||||
.section {
|
||||
padding: 50px 10%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.section.previews {
|
||||
background: #f6f0e6;
|
||||
}
|
||||
.section.previews h2, .section.previews p {
|
||||
color: #31424B;
|
||||
}
|
||||
.section h2 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
.section.last {
|
||||
background: #666666;
|
||||
}
|
||||
.section.last h2, .section.last blockquote {
|
||||
color: white;
|
||||
}
|
||||
.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
max-height: 800px;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.tt-dropdown-menu {
|
||||
padding: 0px 10px 0px 10px;
|
||||
background: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.interior .header-Outro.browse-page {
|
||||
overflow: visible;
|
||||
}
|
||||
.interior .header-Outro.browse-page .select-Container {
|
||||
overflow: none;
|
||||
padding: 2px 4px;
|
||||
width: 40%;
|
||||
}
|
||||
.browse-page .input-Area {
|
||||
width: 100%;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
.header-Outro .twitter-typeahead {
|
||||
top: -2px;
|
||||
color: #000;
|
||||
}
|
||||
.header-Outro .btn-Action {
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.browse-page .text-Label {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
font-weight: bold;
|
||||
line-height: 31px;
|
||||
}
|
||||
.browse-page h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.interior .header-Outro.with-columns .col.filter {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
25
sass/_project-sass/_project-Type.scss
Normal file
25
sass/_project-sass/_project-Type.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Site-Wide Typography Standards
|
||||
// ----------------------------------------------------------------
|
||||
body{font-family:$brand; font-weight:300}
|
||||
h1, h2, h3, h4, h5, h6{font-family:$headings}
|
||||
|
||||
.giga {font:{size:$giga; weight:700}}
|
||||
.ultra {font:{size:$ultra; weight:600}}
|
||||
.mega {font:{size:$mega; weight:300}}
|
||||
h1, .alpha {font:{size:$alpha; weight:400}}
|
||||
h2, .beta {font:{size:$beta; weight:400}}
|
||||
h3, .gamma {font:{size:$gamma; weight:400}}
|
||||
h4, .delta {font:{size:$delta; weight:300}}
|
||||
h5, .eps {font:{size:$eps; weight:300}}
|
||||
h6, .zeta {font:{size:$zeta; weight:300}}
|
||||
p, li, .base {font:{size:$base; weight:300}}
|
||||
small, .tiny {font:{size:$tiny; weight:300}}
|
||||
.mini {font:{size:$mini; weight:300}}
|
||||
|
||||
|
||||
// Text decorations
|
||||
.action-Link{
|
||||
@extend %go;
|
||||
float:right;
|
||||
}
|
||||
119
sass/_project-sass/_project-Vars.scss
Normal file
119
sass/_project-sass/_project-Vars.scss
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Colors
|
||||
// ----------------------------------------------------------------
|
||||
// Base Branding Colors
|
||||
$c-Brand-1: #e93250; //pink/red
|
||||
$c-Brand-2: #daeea5; // green
|
||||
$c-Brand-3: #f6f0e6; // tan
|
||||
|
||||
// 2f4149 dark blue
|
||||
// lighter blue 65a0ad
|
||||
// nav bg blue 5e95a1
|
||||
|
||||
// Base Darker Colors
|
||||
$c-Dark: #343434;
|
||||
$c-Darker: #131313;
|
||||
|
||||
// Base Ligher Colors
|
||||
$c-White: #fff;
|
||||
$c-Light: #eee;
|
||||
$c-Lighter: #f8f8f8;
|
||||
|
||||
$c-Body-Copy: $c-Dark;
|
||||
$c-Heading: $c-Brand-1;
|
||||
|
||||
$c-BG: $c-Lighter;
|
||||
|
||||
$c-Link: $c-Brand-1;
|
||||
|
||||
// Button Colors
|
||||
$c-Btn-1: $c-Brand-1;
|
||||
$c-Btn-2: $c-Brand-2;
|
||||
$c-Btn-3: $c-Brand-3;
|
||||
|
||||
$c-Btn-Neg: #aaa;
|
||||
$c-Disabled: #fafafa;
|
||||
|
||||
// Color for Radio/Check box buttons
|
||||
$c-Btn-RC: $c-Light;
|
||||
|
||||
// Required / Error Text Color
|
||||
$c-Required: #f00;
|
||||
|
||||
// Underlines & Highlights
|
||||
$c-Highlight: #ff0;
|
||||
$c-Underline: #ccc; // not for links
|
||||
$c-Border: #ccc;
|
||||
|
||||
// Place holder for inputs
|
||||
$placeholderColor:#5E7F8D;
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Fonts Families
|
||||
// ----------------------------------------------------------------
|
||||
$arial: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
$georgia: Georgia, "Times New Roman", Times, serif;
|
||||
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$brand: "Lucida Grande", verdana, $helvetica;
|
||||
$headings: 'Droid Serif', $georgia;
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Font Size Declarations
|
||||
// ----------------------------------------------------------------
|
||||
$base-font-multiplier:1em; // 1em = 16px
|
||||
|
||||
$giga: $base-font-multiplier * 4.375; // 70px
|
||||
$ultra: $base-font-multiplier * 3.75; // 60px
|
||||
$mega: $base-font-multiplier * 3.5; // 56px
|
||||
|
||||
$alpha: $base-font-multiplier * 3.125; // 50px
|
||||
$beta: $base-font-multiplier * 2.5; // 40px
|
||||
$gamma: $base-font-multiplier * 2; // 32px
|
||||
$delta: $base-font-multiplier * 1.625; // 26px
|
||||
$eps: $base-font-multiplier * 1.375; // 22px
|
||||
$zeta: $base-font-multiplier * 1.125; // 18px
|
||||
|
||||
$base: $base-font-multiplier * .9;
|
||||
$tiny: $base-font-multiplier * .875; // 14px
|
||||
$mini: $base-font-multiplier * .75; // 12px
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Border Radius Base Default - t-l t-r b-r b-l
|
||||
// ----------------------------------------------------------------
|
||||
$radius: 3px;
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Box Shadow Types (these are just examples. Make your own!)
|
||||
// ----------------------------------------------------------------
|
||||
$bs-1: 0 0 6px rgba(0,0,0,.25);
|
||||
$bs-2: $bs-1 inset;
|
||||
$bs-3: $bs-1, $bs-1 inset;
|
||||
$bs-4: 0 8px 8px -8px rgba(0,0,0,.2);
|
||||
$bs-5: $bs-4, 0 0 6px rgba(0,0,0,.75) inset;
|
||||
$bs-6: 0 0 6px rgba(255,255,255,.5) inset;
|
||||
|
||||
$outroShadow:inset 0 7px 10px 0 rgba(0, 0, 0, 0.10);
|
||||
$signupShadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
|
||||
$inputAreaShadow:inset 1px 3px 10px 0px rgba(0, 0, 0, 0.20);
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Layout
|
||||
// ----------------------------------------------------------------
|
||||
$spacing:4px;
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Media Query Break Points
|
||||
// ----------------------------------------------------------------
|
||||
$break-Mini: 480px;
|
||||
$break-Tiny: 500px;
|
||||
$break-Small: 600px;
|
||||
$break-Medium: 800px;
|
||||
$break-Large: 1000px;
|
||||
$break-xLarge: 1200px;
|
||||
$break-xxLarge: 1600px;
|
||||
69
sass/_project-sass/_project-Website-Gallery.scss
Normal file
69
sass/_project-sass/_project-Website-Gallery.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
// ----------------------------------------------------------------
|
||||
// Project Specific: Browse Websites Gallery
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
.website-Gallery{
|
||||
list-style:none;
|
||||
padding:30px 20px;
|
||||
|
||||
li{
|
||||
@extend .col-25;
|
||||
float:left;
|
||||
margin-bottom:$spacing*2;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
width:50%
|
||||
}
|
||||
}
|
||||
|
||||
li a {
|
||||
display:block;
|
||||
}
|
||||
.site-info a {
|
||||
color: #666;
|
||||
font-size: 80%;
|
||||
}
|
||||
.title {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&.int-Gall{
|
||||
|
||||
li{
|
||||
|
||||
margin:0 .5% 12px;
|
||||
width:24%;
|
||||
|
||||
background-color: white;
|
||||
border: 9px solid white;
|
||||
-moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
width:49%
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.neo-SS, .neo-Screen-Shot{
|
||||
border: 1px solid #eee;
|
||||
display:block;
|
||||
height:auto!important;
|
||||
position:relative;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.img-Holder{
|
||||
-moz-background-size:cover!important;
|
||||
-webkit-background-size:cover!important;
|
||||
background-size:cover!important;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.hp-Gallery img, .neo-Screen-Shot img{
|
||||
width:100%
|
||||
}
|
||||
|
||||
55
sass/_tidy.scss
Normal file
55
sass/_tidy.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
// -----------------------------------------------------------------------
|
||||
// You wrote quick, liklely bad code. It stays here until you can
|
||||
// refactor it back into the main code-base and make it suck less
|
||||
// -----------------------------------------------------------------------
|
||||
|
||||
::-webkit-input-placeholder { /* WebKit browsers */
|
||||
color: #999;
|
||||
}
|
||||
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
color: #999;
|
||||
}
|
||||
::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: #999;
|
||||
}
|
||||
:-ms-input-placeholder { /* Internet Explorer 10+ */
|
||||
color: #999;
|
||||
}
|
||||
|
||||
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#file_criteria li {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.page{background:#F6F0E6}
|
||||
|
||||
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
|
||||
line-height:inherit; height:auto!important}
|
||||
|
||||
.scroll-Admin{
|
||||
background:rgba(255,255,255,.4);
|
||||
border:1px solid #ccc;
|
||||
max-height:400px;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.recaptcha {
|
||||
background: #fff;
|
||||
width: 440px;
|
||||
overflow: auto;
|
||||
}
|
||||
36
sass/neo.scss
Normal file
36
sass/neo.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
// Import Fonts
|
||||
@import url(/fonts/fonts.css);
|
||||
@import url(/css/bootstrap.min.css);
|
||||
@import url(/css/bootstrap-responsive.min.css);
|
||||
@import url(/css/font-awesome.css);
|
||||
|
||||
// Variables and Mixins
|
||||
@import '_project-sass/project-Vars'; // misc. layout and additional styling vars
|
||||
@import '_helper-sass/mixins'; // reusable code bases
|
||||
|
||||
// Base HTML Values
|
||||
@import '_base-sass/basic'; // standardizes the base styling of HTML elements
|
||||
@import '_base-sass/tables'; // Base styling for tables
|
||||
@import '_helper-sass/layout'; // Responsive & fixed layouts
|
||||
|
||||
// Interactions
|
||||
@import '_base-sass/navs'; // Base navigation rules
|
||||
@import '_base-sass/forms'; // Base form component rules
|
||||
@import '_helper-sass/buttons'; // Base button rules
|
||||
|
||||
// Helper Classes
|
||||
@import '_helper-sass/navs'; // Base navigation classes
|
||||
@import '_helper-sass/helper'; // Classes to extend others. Mini-modules -- these need to be separated out?
|
||||
|
||||
// Branding & Typography
|
||||
@import '_helper-sass/type'; // helper classes for general typography
|
||||
@import '_project-sass/project-Type'; // colors, fonts, sizes
|
||||
@import '_project-sass/project-Base'; // restyle and make classes specific for your project here
|
||||
|
||||
// Specific Modules
|
||||
@import '_project-sass/project-Website-Gallery'; // Browse website specific styling
|
||||
|
||||
// FIXITFIXITFIXITFIXIT
|
||||
// Only import tidyUp if you actually need to make some quick fix hacks that you don't
|
||||
// have time to do properly. Otherwise the file should be empty w/no need for import
|
||||
@import 'tidy';
|
||||
Loading…
Add table
Add a link
Reference in a new issue