mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
Commit of new front page
This commit is contained in:
Kyle Drake
parent
f6724e3757
commit
e7689a09df
49 changed files with 3406 additions and 2 deletions
4
app.rb
4
app.rb
|
|
@ -31,7 +31,7 @@ end
|
||||||
|
|
||||||
get '/?' do
|
get '/?' do
|
||||||
dashboard_if_signed_in
|
dashboard_if_signed_in
|
||||||
slim :index
|
erb :index
|
||||||
end
|
end
|
||||||
|
|
||||||
get '/browse' do
|
get '/browse' do
|
||||||
|
|
@ -58,7 +58,7 @@ end
|
||||||
|
|
||||||
get '/new' do
|
get '/new' do
|
||||||
dashboard_if_signed_in
|
dashboard_if_signed_in
|
||||||
@site = Site.new
|
@site = Site.new username: params[:username]
|
||||||
slim :'new'
|
slim :'new'
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
||||||
1
public/assets/css/.gitignore
vendored
Normal file
1
public/assets/css/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
# This file is here simplt to force git to allow the folder within the zip
|
||||||
29
public/assets/css/_base-sass/_base-Form.scss
Normal file
29
public/assets/css/_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}
|
||||||
10
public/assets/css/_base-sass/_base-HTML5.scss
Normal file
10
public/assets/css/_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
public/assets/css/_base-sass/_base-Media.scss
Normal file
18
public/assets/css/_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}
|
||||||
24
public/assets/css/_base-sass/_basic.scss
Normal file
24
public/assets/css/_base-sass/_basic.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
// 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{font-size:100%; 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
|
||||||
99
public/assets/css/_base-sass/_forms.scss
Normal file
99
public/assets/css/_base-sass/_forms.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
// 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:1px solid $c-Border; font-family:$arial; line-height:1.25;
|
||||||
|
margin-bottom:$spacing*2; padding:$spacing*2 $spacing; width:50%;
|
||||||
|
&:focus{background:$c-Lighter; border:1px 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; overflow:hidden;
|
||||||
|
}
|
||||||
|
.input-Select{background:none; border:0; font-size:$base; padding-right:$spacing*4; width:120%; -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;
|
||||||
|
}
|
||||||
26
public/assets/css/_base-sass/_navs.scss
Normal file
26
public/assets/css/_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
public/assets/css/_base-sass/_tables.scss
Normal file
51
public/assets/css/_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
public/assets/css/_base-sass/_type-Code.scss
Normal file
41
public/assets/css/_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
public/assets/css/_base-sass/_type-Lists.scss
Normal file
20
public/assets/css/_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
public/assets/css/_base-sass/_typography.scss
Normal file
59
public/assets/css/_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
public/assets/css/_helper-sass/_buttons.scss
Normal file
112
public/assets/css/_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
public/assets/css/_helper-sass/_helper.scss
Normal file
116
public/assets/css/_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="assets/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="assets/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}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
67
public/assets/css/_helper-sass/_layout.scss
Normal file
67
public/assets/css/_helper-sass/_layout.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
// 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%.
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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
public/assets/css/_helper-sass/_mixins.scss
Normal file
138
public/assets/css/_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
public/assets/css/_helper-sass/_navs.scss
Normal file
125
public/assets/css/_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
public/assets/css/_helper-sass/_type.scss
Normal file
86
public/assets/css/_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
public/assets/css/_project-sass/_print.scss
Normal file
28
public/assets/css/_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}
|
||||||
|
}
|
||||||
50
public/assets/css/_project-sass/_project-Base.scss
Normal file
50
public/assets/css/_project-sass/_project-Base.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
// 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{}
|
||||||
|
|
||||||
|
// 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:1000px; 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: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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@import 'project-Header'; // Project Specific Header Styling
|
||||||
|
@import 'project-Main'; // Project Specific Main Content Area Styling
|
||||||
|
@import 'project-Footer'; // Project Specific Footer Styling
|
||||||
106
public/assets/css/_project-sass/_project-Footer.scss
Normal file
106
public/assets/css/_project-sass/_project-Footer.scss
Normal file
|
|
@ -0,0 +1,106 @@
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
// Project Specific: Footer Area
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
// Apply to <footer> for styling
|
||||||
|
.footer-Base{
|
||||||
|
color:#5e5b56;
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.f-Col{
|
||||||
|
@include box-sizing(content-box);
|
||||||
|
min-height:130px;
|
||||||
|
padding-bottom:$spacing*8;
|
||||||
|
position:relative;
|
||||||
|
|
||||||
|
@media (max-device-width:480px), screen and (max-width:800px){
|
||||||
|
min-height:2px;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-Link{
|
||||||
|
bottom:0;
|
||||||
|
position:absolute;
|
||||||
|
right:$spacing*3;
|
||||||
|
|
||||||
|
@media (max-device-width:480px), screen and (max-width:800px){
|
||||||
|
position: static
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.f-Col-1{padding-right:$spacing*3}
|
||||||
|
|
||||||
|
.f-Col-2{
|
||||||
|
padding-left:6px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&: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}
|
||||||
|
}
|
||||||
|
|
||||||
|
.f-Col-3{padding-left:$spacing*3}
|
||||||
|
|
||||||
|
|
||||||
|
// 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}
|
||||||
|
}
|
||||||
260
public/assets/css/_project-sass/_project-Header.scss
Normal file
260
public/assets/css/_project-sass/_project-Header.scss
Normal file
|
|
@ -0,0 +1,260 @@
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
// Project Specific: Header Area
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
// Apply to <header> for styling
|
||||||
|
.header-Base{
|
||||||
|
background:#65a0ad;
|
||||||
|
border-bottom:6px solid #e93250;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-Content{
|
||||||
|
@extend .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;
|
||||||
|
color:#fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
font-size:24px;
|
||||||
|
margin-bottom:10px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.signup-Area{
|
||||||
|
min-height:100px;
|
||||||
|
position:relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.signup-Form{
|
||||||
|
background:#354751;
|
||||||
|
border-radius:4px 4px 0 0;
|
||||||
|
height:600%;
|
||||||
|
overflow:hidden;
|
||||||
|
position:absolute;
|
||||||
|
top:-45px;
|
||||||
|
|
||||||
|
@media (max-device-width:480px), screen and (max-width:800px){
|
||||||
|
height:auto;
|
||||||
|
margin:0;
|
||||||
|
overflow:visible;
|
||||||
|
position:static;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
margin-bottom:0;
|
||||||
|
text-shadow:0 1px 1px rgba(0,0,0,.5);
|
||||||
|
}
|
||||||
|
hr{
|
||||||
|
border-bottom:1px solid #4a6677;
|
||||||
|
border-top:1px solid #1d282d;
|
||||||
|
margin:5px 0 15px;
|
||||||
|
}
|
||||||
|
fieldset{
|
||||||
|
background:url(../img/sign-up-bg.png) repeat-x center top;
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
color:#81b8c6;
|
||||||
|
@media (max-device-width:480px), screen and (max-width:800px){
|
||||||
|
font-size:70%
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-Area{
|
||||||
|
background:#29383f;
|
||||||
|
border:0px solid black;
|
||||||
|
@include box-shadow($bs-2);
|
||||||
|
color:#557380;
|
||||||
|
margin-bottom:$spacing*8;
|
||||||
|
margin-right:$spacing;
|
||||||
|
width:62%;
|
||||||
|
|
||||||
|
&:focus{color:#eee}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 #a1cad4;
|
||||||
|
|
||||||
|
@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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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:46px
|
||||||
|
}
|
||||||
|
.interior .header-Base{
|
||||||
|
left:0;
|
||||||
|
overflow:visible;
|
||||||
|
position:fixed;
|
||||||
|
top:0;
|
||||||
|
width:100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.int-Logo{
|
||||||
|
left:0;
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
width:70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interior .header-Nav{
|
||||||
|
padding-left:70px
|
||||||
|
}
|
||||||
61
public/assets/css/_project-sass/_project-Main.scss
Normal file
61
public/assets/css/_project-sass/_project-Main.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
// Project Specific: Main Content Area
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
// Apply to <main> or top level <section> for styling
|
||||||
|
.content-Base{
|
||||||
|
background:#f6f0e6;
|
||||||
|
min-height:500px;
|
||||||
|
padding-bottom:$spacing*5;
|
||||||
|
padding-top:20px;
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6{
|
||||||
|
color:#e93250
|
||||||
|
}
|
||||||
|
|
||||||
|
.content{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.single-Col{
|
||||||
|
max-width:800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Additional Content Area stylings go below...
|
||||||
|
|
||||||
|
.website-Gallery{
|
||||||
|
list-style:none;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
|
||||||
|
li{
|
||||||
|
@extend .col-25;
|
||||||
|
float:left;
|
||||||
|
margin-bottom:$spacing*2;
|
||||||
|
|
||||||
|
@media (max-device-width:480px), screen and (max-width:800px){
|
||||||
|
width:50%
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
padding:0 $spacing*2;
|
||||||
|
display:block;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
img{
|
||||||
|
background:#fff;
|
||||||
|
@include box-shadow($bs-4);
|
||||||
|
display:block;
|
||||||
|
padding:$spacing*2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// About page
|
||||||
|
.twitter-tweet.twitter-tweet-rendered{margin:0 auto 30px!important}
|
||||||
|
|
||||||
25
public/assets/css/_project-sass/_project-Type.scss
Normal file
25
public/assets/css/_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, li p, .base, li a {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;
|
||||||
|
}
|
||||||
112
public/assets/css/_project-sass/_project-Vars.scss
Normal file
112
public/assets/css/_project-sass/_project-Vars.scss
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
// Fonts Families
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
$arial: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||||
|
$georgia: Georgia, "Times New Roman", Times, serif;
|
||||||
|
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
$brand: 'Open Sans', $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.25; // 20px
|
||||||
|
$zeta: $base-font-multiplier * 1.125; // 18px
|
||||||
|
|
||||||
|
$base: $base-font-multiplier; // 16px
|
||||||
|
$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;
|
||||||
|
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
// 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;
|
||||||
4
public/assets/css/_tidy.scss
Normal file
4
public/assets/css/_tidy.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
// 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
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
0
public/assets/css/master.css
Normal file
0
public/assets/css/master.css
Normal file
1279
public/assets/css/neo.css
Normal file
1279
public/assets/css/neo.css
Normal file
File diff suppressed because it is too large
Load diff
1
public/assets/css/neo.min.css
vendored
Normal file
1
public/assets/css/neo.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
34
public/assets/css/neo.scss
Normal file
34
public/assets/css/neo.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
// Import Fonts
|
||||||
|
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,700italic,600,400italic,300italic,600italic);
|
||||||
|
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);
|
||||||
|
|
||||||
|
// 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
|
||||||
|
|
||||||
|
// Print Styling
|
||||||
|
//@import '_project-sass/print-Styles'; // Styling for printing of websites
|
||||||
|
|
||||||
|
// FIXITFIXITFIXITFIXIT
|
||||||
|
// @import 'tidy';
|
||||||
|
// 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
|
||||||
1
public/assets/img/.gitignore
vendored
Normal file
1
public/assets/img/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
# This file is here simplt to force git to allow the folder within the zip
|
||||||
BIN
public/assets/img/border.png
Normal file
BIN
public/assets/img/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 985 B |
BIN
public/assets/img/cat.png
Normal file
BIN
public/assets/img/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/img/drop-Arrow.png
Normal file
BIN
public/assets/img/drop-Arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/assets/img/featured/test.jpg
Normal file
BIN
public/assets/img/featured/test.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
public/assets/img/icons.png
Normal file
BIN
public/assets/img/icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
public/assets/img/nav-Icon.png
Normal file
BIN
public/assets/img/nav-Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 B |
BIN
public/assets/img/neocities-Logo.png
Normal file
BIN
public/assets/img/neocities-Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
public/assets/img/neocity.jpg
Normal file
BIN
public/assets/img/neocity.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
public/assets/img/sign-up-bg.png
Normal file
BIN
public/assets/img/sign-up-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
1
public/assets/scripts/.gitignore
vendored
Normal file
1
public/assets/scripts/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
# This file is here simplt to force git to allow the folder within the zip
|
||||||
26
public/assets/scripts/app.js
Normal file
26
public/assets/scripts/app.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
// do scrolly things on scroll
|
||||||
|
$(window).bind('scroll', function(){
|
||||||
|
if($(this).scrollTop() > 460) {
|
||||||
|
$(".header-Nav").addClass('add-Stripe');
|
||||||
|
}
|
||||||
|
if($(this).scrollTop() < 460) {
|
||||||
|
$(".header-Nav").removeClass('add-Stripe');
|
||||||
|
}
|
||||||
|
|
||||||
|
if($(this).scrollTop() > 100) {
|
||||||
|
$(".hp-Logo").addClass('in-View');
|
||||||
|
$(".constant-Nav").addClass('in-View');
|
||||||
|
}
|
||||||
|
if($(this).scrollTop() < 100) {
|
||||||
|
$(".hp-Logo").removeClass('in-View');
|
||||||
|
$(".constant-Nav").removeClass('in-View');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.small-Nav').click(function(){
|
||||||
|
$('.header-Nav').toggleClass('show-Nav');
|
||||||
|
})
|
||||||
|
|
||||||
|
});
|
||||||
1
public/assets/scripts/app.min.js
vendored
Normal file
1
public/assets/scripts/app.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
$(document).ready(function(){$(window).bind("scroll",function(){$(this).scrollTop()>460&&$(".header-Nav").addClass("add-Stripe"),460>$(this).scrollTop()&&$(".header-Nav").removeClass("add-Stripe"),$(this).scrollTop()>100&&($(".hp-Logo").addClass("in-View"),$(".constant-Nav").addClass("in-View")),100>$(this).scrollTop()&&($(".hp-Logo").removeClass("in-View"),$(".constant-Nav").removeClass("in-View"))}),$(".small-Nav").click(function(){$(".header-Nav").toggleClass("show-Nav")})});
|
||||||
4
public/assets/scripts/html5.js
Normal file
4
public/assets/scripts/html5.js
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
// iepp v2.1pre @jon_neal & @aFarkas github.com/aFarkas/iepp
|
||||||
|
// html5shiv @rem remysharp.com/html5-enabling-script
|
||||||
|
// Dual licensed under the MIT or GPL Version 2 licenses
|
||||||
|
/*@cc_on(function(a,b){function r(a){var b=-1;while(++b<f)a.createElement(e[b])}if(!window.attachEvent||!b.createStyleSheet||!function(){var a=document.createElement("div");return a.innerHTML="<elem></elem>",a.childNodes.length!==1}())return;a.iepp=a.iepp||{};var c=a.iepp,d=c.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|subline|summary|time|video",e=d.split("|"),f=e.length,g=new RegExp("(^|\\s)("+d+")","gi"),h=new RegExp("<(/*)("+d+")","gi"),i=/^\s*[\{\}]\s*$/,j=new RegExp("(^|[^\\n]*?\\s)("+d+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),k=b.createDocumentFragment(),l=b.documentElement,m=b.getElementsByTagName("script")[0].parentNode,n=b.createElement("body"),o=b.createElement("style"),p=/print|all/,q;c.getCSS=function(a,b){try{if(a+""===undefined)return""}catch(d){return""}var e=-1,f=a.length,g,h=[];while(++e<f){g=a[e];if(g.disabled)continue;b=g.media||b,p.test(b)&&h.push(c.getCSS(g.imports,b),g.cssText),b="all"}return h.join("")},c.parseCSS=function(a){var b=[],c;while((c=j.exec(a))!=null)b.push(((i.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(g,"$1.iepp-$2")+c[4]);return b.join("\n")},c.writeHTML=function(){var a=-1;q=q||b.body;while(++a<f){var c=b.getElementsByTagName(e[a]),d=c.length,g=-1;while(++g<d)c[g].className.indexOf("iepp-")<0&&(c[g].className+=" iepp-"+e[a])}k.appendChild(q),l.appendChild(n),n.className=q.className,n.id=q.id,n.innerHTML=q.innerHTML.replace(h,"<$1font")},c._beforePrint=function(){if(c.disablePP)return;o.styleSheet.cssText=c.parseCSS(c.getCSS(b.styleSheets,"all")),c.writeHTML()},c.restoreHTML=function(){if(c.disablePP)return;n.swapNode(q)},c._afterPrint=function(){c.restoreHTML(),o.styleSheet.cssText=""},r(b),r(k);if(c.disablePP)return;m.insertBefore(o,m.firstChild),o.media="print",o.className="iepp-printshim",a.attachEvent("onbeforeprint",c._beforePrint),a.attachEvent("onafterprint",c._afterPrint)})(this,document)@*/
|
||||||
1
public/assets/scripts/html5.min.js
vendored
Normal file
1
public/assets/scripts/html5.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/*@cc_on(function(a,b){function r(a){var b=-1;while(++b<f)a.createElement(e[b])}if(!window.attachEvent||!b.createStyleSheet||!function(){var a=document.createElement("div");return a.innerHTML="<elem></elem>",a.childNodes.length!==1}())return;a.iepp=a.iepp||{};var c=a.iepp,d=c.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|subline|summary|time|video",e=d.split("|"),f=e.length,g=new RegExp("(^|\\s)("+d+")","gi"),h=new RegExp("<(/*)("+d+")","gi"),i=/^\s*[\{\}]\s*$/,j=new RegExp("(^|[^\\n]*?\\s)("+d+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),k=b.createDocumentFragment(),l=b.documentElement,m=b.getElementsByTagName("script")[0].parentNode,n=b.createElement("body"),o=b.createElement("style"),p=/print|all/,q;c.getCSS=function(a,b){try{if(a+""===undefined)return""}catch(d){return""}var e=-1,f=a.length,g,h=[];while(++e<f){g=a[e];if(g.disabled)continue;b=g.media||b,p.test(b)&&h.push(c.getCSS(g.imports,b),g.cssText),b="all"}return h.join("")},c.parseCSS=function(a){var b=[],c;while((c=j.exec(a))!=null)b.push(((i.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(g,"$1.iepp-$2")+c[4]);return b.join("\n")},c.writeHTML=function(){var a=-1;q=q||b.body;while(++a<f){var c=b.getElementsByTagName(e[a]),d=c.length,g=-1;while(++g<d)c[g].className.indexOf("iepp-")<0&&(c[g].className+=" iepp-"+e[a])}k.appendChild(q),l.appendChild(n),n.className=q.className,n.id=q.id,n.innerHTML=q.innerHTML.replace(h,"<$1font")},c._beforePrint=function(){if(c.disablePP)return;o.styleSheet.cssText=c.parseCSS(c.getCSS(b.styleSheets,"all")),c.writeHTML()},c.restoreHTML=function(){if(c.disablePP)return;n.swapNode(q)},c._afterPrint=function(){c.restoreHTML(),o.styleSheet.cssText=""},r(b),r(k);if(c.disablePP)return;m.insertBefore(o,m.firstChild),o.media="print",o.className="iepp-printshim",a.attachEvent("onbeforeprint",c._beforePrint),a.attachEvent("onafterprint",c._afterPrint)})(this,document)@*/
|
||||||
6
public/assets/scripts/jquery-1.10.1.min.js
vendored
Normal file
6
public/assets/scripts/jquery-1.10.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
63
public/humans.txt
Normal file
63
public/humans.txt
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
# humanstxt.org/
|
||||||
|
# The humans responsible & technology colophon
|
||||||
|
|
||||||
|
/* ****************************************************************************
|
||||||
|
*
|
||||||
|
* The Team:
|
||||||
|
*
|
||||||
|
**************************************************************************** */
|
||||||
|
|
||||||
|
Kyle Drake:
|
||||||
|
Creator, Lead Developer
|
||||||
|
Website: http://kyledrake.net/
|
||||||
|
Twitter: @kyledrake
|
||||||
|
Location: Portland, OR
|
||||||
|
|
||||||
|
|
||||||
|
Scott O'Hara:
|
||||||
|
Front-End Developer, Design, Ground Floor
|
||||||
|
Website: http://www.scottohara.me/
|
||||||
|
Twitter: @scottohara
|
||||||
|
Location: Boston, MA
|
||||||
|
|
||||||
|
Victoria Wang:
|
||||||
|
Design, Tutorial Lead
|
||||||
|
Website: http://www.violasong.com/
|
||||||
|
Twitter: @violasong
|
||||||
|
Location: Chicago,IL
|
||||||
|
|
||||||
|
|
||||||
|
/* ****************************************************************************
|
||||||
|
*
|
||||||
|
* Thanks To:
|
||||||
|
*
|
||||||
|
**************************************************************************** */
|
||||||
|
|
||||||
|
Name: name or url
|
||||||
|
|
||||||
|
|
||||||
|
/* ****************************************************************************
|
||||||
|
*
|
||||||
|
* Website Info:
|
||||||
|
*
|
||||||
|
**************************************************************************** */
|
||||||
|
|
||||||
|
Last update: 2013/MM/DD
|
||||||
|
|
||||||
|
SCSS
|
||||||
|
http://sass-lang.com/
|
||||||
|
|
||||||
|
jQuery
|
||||||
|
http://jquery.com/
|
||||||
|
|
||||||
|
Ground Floor
|
||||||
|
https://github.com/bleachedgraphics/Ground-Floor
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
# robotstxt.org/
|
||||||
|
|
||||||
|
User-agent: *
|
||||||
316
views/index.erb
Normal file
316
views/index.erb
Normal file
|
|
@ -0,0 +1,316 @@
|
||||||
|
<!doctype html>
|
||||||
|
<!--[if IE 8 ]><html lang="en" class="ieAll ie8"><![endif]-->
|
||||||
|
<!--[if IE 9 ]><html lang="en" class="ieAll ie9"><![endif]-->
|
||||||
|
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" itemscope itemtype="http://schema.org/Person"><!--<![endif]-->
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
|
||||||
|
<title>Neocities.org: Create a Free website today</title>
|
||||||
|
<meta itemprop="name" content="NeoCities.org" />
|
||||||
|
<meta itemprop="description" content="Create your own free home page, and do whatever you want with it." />
|
||||||
|
<meta name="description" content="NeoCities is the new Geocities. Create your own free home page, and do whatever you want with it." />
|
||||||
|
<meta name="keywords" content="free website, html, css, learn to code, free hosting, build a website, create a web page" />
|
||||||
|
|
||||||
|
<link rel="canonical" href="http://neocities.org" />
|
||||||
|
|
||||||
|
<!-- Open Graph __ Delete if not needed. -->
|
||||||
|
<meta property="og:title" content="NeoCities"/>
|
||||||
|
<meta property="og:site_name" content="NeoCities | neocities.org"/>
|
||||||
|
<meta property="og:type" content="website"/>
|
||||||
|
<meta property="og:image" content=""/>
|
||||||
|
<meta property="og:url" content="http://www.neocities.org/"/>
|
||||||
|
<meta property="og:description" content="NeoCities is the new Geocities. Create your own free home page, and do whatever you want with it."/>
|
||||||
|
<meta content="pBkqwF1U/KpuF2+f0ZhSf8BnpxYgeU0boCTdnB3joGc=" name="csrf-token" />
|
||||||
|
|
||||||
|
<!-- Styles -->
|
||||||
|
<link href="assets/css/neo.min.css" rel="stylesheet" type="text/css" media="all"/>
|
||||||
|
<!-- If exists, brings over style blocks from child pages -->
|
||||||
|
|
||||||
|
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
|
||||||
|
<link rel="apple-touch-icon-precomposed" href="#apple-icon-144.png" />
|
||||||
|
<link rel="apple-touch-startup-image" href="#startup.png" />
|
||||||
|
|
||||||
|
<!-- Tile icon for Win8 (144x144 + tile color) __doesn't validate__
|
||||||
|
<meta name="msapplication-TileImage" content="#apple-icon-144.png" />
|
||||||
|
<meta name="msapplication-TileColor" content="#222222" />
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Mobile Meta -->
|
||||||
|
<meta name="HandheldFriendly" content="True" />
|
||||||
|
<meta name="MobileOptimized" content="320" />
|
||||||
|
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1" />
|
||||||
|
|
||||||
|
<!-- oh vanity. -->
|
||||||
|
<link rel="author" type="text/plain" href="humans.txt" />
|
||||||
|
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="hp">
|
||||||
|
|
||||||
|
<div class="page">
|
||||||
|
|
||||||
|
<header class="header-Base">
|
||||||
|
<nav class="header-Nav clearfix" role="navigation">
|
||||||
|
<a href="#!" title="show small screen nav" class="small-Nav">
|
||||||
|
<img src="assets/img/nav-Icon.png" alt="navigation icon" />
|
||||||
|
</a>
|
||||||
|
<ul class="h-Nav constant-Nav">
|
||||||
|
<li>
|
||||||
|
<a href="/" title="back to the start">NeoCities</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/browse" title="Browse NeoCities member websites">Browse</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/tutorials" title="Learn to code with these tutorials">Tutorials</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about" title="About NeoCities">About</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="status-Nav">
|
||||||
|
<li>
|
||||||
|
<a href="/signin" class="sign-In" title="Sign into your account">Sign In</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="logo int-Logo hp-Logo">
|
||||||
|
<a href="/" title="back to home">
|
||||||
|
<span class="hidden">NeoCities.org</span>
|
||||||
|
<img src="assets/img/cat.png" alt="Neocities.org" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="header-Intro">
|
||||||
|
<h1 class="logo header-Content">
|
||||||
|
<span class="hidden">NeoCities.org</span>
|
||||||
|
<img src="assets/img/neocities-Logo.png" alt="Neocities.org" />
|
||||||
|
</h1>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="header-Outro">
|
||||||
|
|
||||||
|
<div class="row header-Content">
|
||||||
|
|
||||||
|
<ul class="col col-50 intro-List">
|
||||||
|
<li class="intro-Tools">
|
||||||
|
<span class="intro-Icon"></span>
|
||||||
|
<h2 class="delta">Create your own free website</h2>
|
||||||
|
<p class="tiny">
|
||||||
|
You get 10 MB of space to make whatever you’d like with HTML, CSS, JS, IMG, TXT, and MD files.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li class="intro-Question">
|
||||||
|
<span class="intro-Icon"></span>
|
||||||
|
<h2 class="delta">Don't know how to code?</h2>
|
||||||
|
<p class="tiny">
|
||||||
|
Coming soon: Coding tutorials that anyone can follow!
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="col col-50 signup-Area">
|
||||||
|
|
||||||
|
<form action="/new" method="get" class="signup-Form">
|
||||||
|
<fieldset class="content">
|
||||||
|
<h2 class="gamma">Get Started Now</h2>
|
||||||
|
<hr />
|
||||||
|
<input type="text" class="input-Area" id="create-Input" name="username" placeholder="website name" />
|
||||||
|
<label for="create-Input">.neocities.org</label>
|
||||||
|
<input type="submit" value="Create My Website" class="btn-Action float-Right" />
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div> <!-- end .col-50 -->
|
||||||
|
|
||||||
|
</div> <!-- end .row -->
|
||||||
|
|
||||||
|
</div> <!-- end .header-Outro -->
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="content-Base">
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<section class="featured-Websites clearfix">
|
||||||
|
|
||||||
|
<h2 class="delta">Featured Websites</h2>
|
||||||
|
|
||||||
|
<ul class="row website-Gallery">
|
||||||
|
<li>
|
||||||
|
<a href="http://dragonquest.neocities.org/" title="The Quest of Dragons" target="_blank">
|
||||||
|
<img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="Thumbnail of The Quest of Dragons" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://codeventurer.neocities.org/" title="codeventurer" target="_blank">
|
||||||
|
<img src="http://neocities.org/site_screenshots/codeventurer.jpg" alt="Thumbnail of codeventurer" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://clouds.neocities.org/" title="Cloud Quotes" target="_blank">
|
||||||
|
<img src="http://neocities.org/site_screenshots/clouds.jpg" alt="Thumbnail of Cloud Quotes" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://manatee.neocities.org/" title="Title of Website" target="_blank">
|
||||||
|
<img src="http://neocities.org/site_screenshots/manatee.jpg" alt="Thumbnail of TITLE OF WEBSITE" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://suppilulemur.neocities.org/" title="Sokoban" target="_blank">
|
||||||
|
<img src="http://neocities.org/site_screenshots/suppilulemur.jpg" alt="Thumbnail of Sokoban" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://drawinglair.neocities.org/" title="Tomasz Zawadzki" target="_blank">
|
||||||
|
<img src="http://neocities.org/site_screenshots/drawinglair.jpg" alt="Thumbnail of Tomasz Zawadzki" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://eleanor.neocities.org/" title="Eleanor Holroyd's Website" target="_blank">
|
||||||
|
<img src="http://neocities.org/site_screenshots/eleanor.jpg" alt="Thumbnail of Eleanor Holroyd's Website" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://cute-animation.neocities.org/" title="Cute Animation" target="_blank">
|
||||||
|
<img src="http://neocities.org/site_screenshots/cute-animation.jpg" alt="Thumbnail of Cute Animation" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a href="/browse" title="Browse all Neocities websites" class="action-Link">Browse all Websites</a>
|
||||||
|
|
||||||
|
</section> <!-- end .featured-Websites -->
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<aside class="row">
|
||||||
|
|
||||||
|
<div class="col col-50">
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<h3 class="delta">Learn to Code</h3>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Don't know how to code a website? No problem!
|
||||||
|
We're working on a batch of tutorials that will show you the way.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<code>
|
||||||
|
<span class="code-Tag"><h1></span>Welcome to my website!<span class="code-Tag"></h1></span><br />
|
||||||
|
<span class="code-Tag"><a</span> href="<span class="code-Value">about.html</span>">About Me<span class="code-Tag"></a></span><br />
|
||||||
|
<span class="code-Tag"><img</span> src="<span class="code-Value">me.jpg</span>" alt="<span class="code-Value">photo of me</span>" <span class="code-Tag">/></span>
|
||||||
|
</code>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div> <!-- end .col-50 -->
|
||||||
|
|
||||||
|
<div class="col col-50">
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<h3 class="delta">What People Are Saying</h3>
|
||||||
|
|
||||||
|
<ul class="quote-Slider kill-List">
|
||||||
|
<li class="quote">
|
||||||
|
<blockquote>
|
||||||
|
Designed as a 21st century reincarnation of GeoCities, NeoCities lets you make your own site for free. And it just might spark a renaissance of creativity online.
|
||||||
|
</blockquote>
|
||||||
|
<a href="http://web.appstorm.net/reviews/web-dev/neocities-the-free-place-to-code-your-own-site-from-scratch/" title="App Storm" class="action-Link">Source link</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div> <!-- end .col-50 -->
|
||||||
|
|
||||||
|
</aside> <!-- end .row -->
|
||||||
|
|
||||||
|
</div> <!-- end .content -->
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer-Base">
|
||||||
|
<section class="footer-Intro">
|
||||||
|
<div class="footer-Content">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col col-33">
|
||||||
|
<div class="f-Col f-Col-1 clearfix">
|
||||||
|
<h2 class="delta">Support Us</h2>
|
||||||
|
<p class="tiny">
|
||||||
|
Neocities is funded by donations. If you’d like to contribute, you can help us
|
||||||
|
pay our server costs using Bitcoin or PayPal.
|
||||||
|
</p>
|
||||||
|
<a href="/donate" title="donate to Neocities" class="action-Link">Donate Today</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col col-33">
|
||||||
|
<div class="f-Col f-Col-2 clearfix">
|
||||||
|
<h2 class="delta">About Neocities</h2>
|
||||||
|
<p class="tiny">
|
||||||
|
Neocities is here to bring back the creativity and
|
||||||
|
free expression to the world wide web that made it great.
|
||||||
|
</p>
|
||||||
|
<a href="/about" title="more about Neocities" class="action-Link">More About Us</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col col-33">
|
||||||
|
<div class="f-Col f-Col-3 clearfix">
|
||||||
|
<h2 class="delta">Latest News</h2>
|
||||||
|
<p class="tiny">
|
||||||
|
The latest news on NeoCities can be found on our blog.
|
||||||
|
</p>
|
||||||
|
<a href="/blog" title="read about Neocities news and updates" class="action-Link">Read More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="footer-Outro">
|
||||||
|
<div class="footer-Content">
|
||||||
|
<div class="row">
|
||||||
|
<p class="tiny col col-60 credits">
|
||||||
|
<a href="http://neocities.org" title="NeoCities.org">Neocities.org</a> is an open source
|
||||||
|
project led by <a href="http://kyledrake.neocities.org" title="learn about Kyle Drake">Kyle Drake</a>.
|
||||||
|
Fork us on <a href="https://github.com/kyledrake/neocities-web" title="Neocities on GitHub">GitHub</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<nav class="footer-Nav col col-40">
|
||||||
|
<ul class="tiny h-Nav">
|
||||||
|
<!-- <li><a href="api" title="Neocities API">API</a></li> -->
|
||||||
|
<li><a href="terms" title="Neocities Terms of Use" rel="nofollow">Terms</a></li>
|
||||||
|
<li><a href="privacy" title="Neocities Privacy Policy" rel="nofollow">Privacy</a></li>
|
||||||
|
<li><a href="contact" title="Contact Us" rel="nofollow">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div> <!-- end .page -->
|
||||||
|
|
||||||
|
<!-- scripts -->
|
||||||
|
<script src="assets/scripts/jquery-1.10.1.min.js"></script>
|
||||||
|
|
||||||
|
<script src="assets/scripts/app.min.js"></script> <!-- Script block allowing child pages to inject their own scripts -->
|
||||||
|
|
||||||
|
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID.
|
||||||
|
<script type="text/javascript>
|
||||||
|
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
|
||||||
|
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
|
||||||
|
g.src='//www.google-analytics.com/ga.js';
|
||||||
|
s.parentNode.insertBefore(g,s)}(document,'script'));
|
||||||
|
</script>
|
||||||
|
-->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue