From 3e2cdcd1385b24152c0bdbbc89820edd1938d167 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Sat, 13 Jul 2013 15:02:32 -0400 Subject: [PATCH] redesign included all dev and production files for new redesign. the index file has a different layout than the interior page files. for more in-depth look into how these are set up, look in the templates > includes & layouts folders. I used .liquid files to create these pages, and all the content for the files are in there, with the base layout stuff in the includes and layout files. check the converted-html folder to see how everything should look. (test it on an android phone. should look good now) :) --- files/new-Design/README.md | 0 files/new-Design/assets/css/.gitignore | 1 + .../assets/css/_base-sass/_base-Form.scss | 29 + .../assets/css/_base-sass/_base-HTML5.scss | 10 + .../assets/css/_base-sass/_base-Media.scss | 18 + .../assets/css/_base-sass/_basic.scss | 24 + .../assets/css/_base-sass/_forms.scss | 99 ++ .../assets/css/_base-sass/_navs.scss | 26 + .../assets/css/_base-sass/_tables.scss | 51 + .../assets/css/_base-sass/_type-Code.scss | 41 + .../assets/css/_base-sass/_type-Lists.scss | 20 + .../assets/css/_base-sass/_typography.scss | 59 + .../assets/css/_helper-sass/_buttons.scss | 112 ++ .../assets/css/_helper-sass/_helper.scss | 116 ++ .../assets/css/_helper-sass/_layout.scss | 67 + .../assets/css/_helper-sass/_mixins.scss | 138 ++ .../assets/css/_helper-sass/_navs.scss | 125 ++ .../assets/css/_helper-sass/_type.scss | 86 ++ .../assets/css/_project-sass/_print.scss | 28 + .../css/_project-sass/_project-Base.scss | 50 + .../css/_project-sass/_project-Footer.scss | 106 ++ .../css/_project-sass/_project-Header.scss | 260 ++++ .../css/_project-sass/_project-Main.scss | 61 + .../css/_project-sass/_project-Type.scss | 25 + .../css/_project-sass/_project-Vars.scss | 112 ++ files/new-Design/assets/css/_tidy.scss | 4 + files/new-Design/assets/css/master.css | 0 files/new-Design/assets/css/neo.css | 1279 +++++++++++++++++ files/new-Design/assets/css/neo.min.css | 1 + files/new-Design/assets/css/neo.scss | 34 + files/new-Design/assets/img/.gitignore | 1 + files/new-Design/assets/img/border.png | Bin 0 -> 985 bytes files/new-Design/assets/img/cat.png | Bin 0 -> 16793 bytes files/new-Design/assets/img/drop-Arrow.png | Bin 0 -> 1076 bytes files/new-Design/assets/img/featured/test.jpg | Bin 0 -> 7473 bytes files/new-Design/assets/img/icons.png | Bin 0 -> 2315 bytes files/new-Design/assets/img/nav-Icon.png | Bin 0 -> 173 bytes .../new-Design/assets/img/neocities-Logo.png | Bin 0 -> 29658 bytes files/new-Design/assets/img/neocity.jpg | Bin 0 -> 29097 bytes files/new-Design/assets/img/sign-up-bg.png | Bin 0 -> 1092 bytes files/new-Design/assets/scripts/.gitignore | 1 + files/new-Design/assets/scripts/app.js | 26 + files/new-Design/assets/scripts/app.min.js | 1 + files/new-Design/assets/scripts/html5.js | 4 + files/new-Design/assets/scripts/html5.min.js | 1 + .../assets/scripts/jquery-1.10.1.min.js | 6 + files/new-Design/converted-html/404.html | 230 +++ files/new-Design/converted-html/about.html | 224 +++ .../converted-html/assets/css/master.css | 0 .../converted-html/assets/css/neo.css | 1279 +++++++++++++++++ .../converted-html/assets/css/neo.min.css | 1 + .../converted-html/assets/img/border.png | Bin 0 -> 985 bytes .../converted-html/assets/img/cat.png | Bin 0 -> 16793 bytes .../converted-html/assets/img/drop-Arrow.png | Bin 0 -> 1076 bytes .../assets/img/featured/test.jpg | Bin 0 -> 7473 bytes .../converted-html/assets/img/icons.png | Bin 0 -> 2315 bytes .../converted-html/assets/img/nav-Icon.png | Bin 0 -> 173 bytes .../assets/img/neocities-Logo.png | Bin 0 -> 29658 bytes .../converted-html/assets/img/neocity.jpg | Bin 0 -> 29097 bytes .../converted-html/assets/img/sign-up-bg.png | Bin 0 -> 1092 bytes .../converted-html/assets/scripts/app.js | 26 + .../converted-html/assets/scripts/app.min.js | 1 + .../converted-html/assets/scripts/html5.js | 4 + .../assets/scripts/html5.min.js | 1 + .../assets/scripts/jquery-1.10.1.min.js | 6 + files/new-Design/converted-html/browse.html | 144 ++ .../new-Design/converted-html/dashboard.html | 155 ++ files/new-Design/converted-html/favicon.ico | Bin 0 -> 60518 bytes files/new-Design/converted-html/humans.txt | 63 + files/new-Design/converted-html/index.html | 317 ++++ files/new-Design/converted-html/package.png | Bin 0 -> 686 bytes files/new-Design/converted-html/robots.txt | 3 + .../new-Design/converted-html/tutorials.html | 168 +++ files/new-Design/favicon.ico | Bin 0 -> 60518 bytes files/new-Design/humans.txt | 63 + files/new-Design/mixture.json | 20 + files/new-Design/models/.gitignore | 1 + files/new-Design/package.png | Bin 0 -> 686 bytes files/new-Design/robots.txt | 3 + files/new-Design/templates/404.liquid | 11 + files/new-Design/templates/about.liquid | 91 ++ files/new-Design/templates/browse.liquid | 11 + files/new-Design/templates/dashboard.liquid | 22 + .../templates/includes/footer.liquid | 57 + .../templates/includes/hp-header.liquid | 52 + .../templates/includes/int-footer.liquid | 20 + .../templates/includes/int-header.liquid | 6 + .../templates/includes/navigation.liquid | 26 + files/new-Design/templates/index.liquid | 102 ++ files/new-Design/templates/layouts/int.liquid | 85 ++ .../templates/layouts/layout.liquid | 85 ++ files/new-Design/templates/tutorials.liquid | 35 + 92 files changed, 6334 insertions(+) create mode 100644 files/new-Design/README.md create mode 100644 files/new-Design/assets/css/.gitignore create mode 100644 files/new-Design/assets/css/_base-sass/_base-Form.scss create mode 100644 files/new-Design/assets/css/_base-sass/_base-HTML5.scss create mode 100644 files/new-Design/assets/css/_base-sass/_base-Media.scss create mode 100644 files/new-Design/assets/css/_base-sass/_basic.scss create mode 100644 files/new-Design/assets/css/_base-sass/_forms.scss create mode 100644 files/new-Design/assets/css/_base-sass/_navs.scss create mode 100644 files/new-Design/assets/css/_base-sass/_tables.scss create mode 100644 files/new-Design/assets/css/_base-sass/_type-Code.scss create mode 100644 files/new-Design/assets/css/_base-sass/_type-Lists.scss create mode 100644 files/new-Design/assets/css/_base-sass/_typography.scss create mode 100644 files/new-Design/assets/css/_helper-sass/_buttons.scss create mode 100644 files/new-Design/assets/css/_helper-sass/_helper.scss create mode 100644 files/new-Design/assets/css/_helper-sass/_layout.scss create mode 100644 files/new-Design/assets/css/_helper-sass/_mixins.scss create mode 100644 files/new-Design/assets/css/_helper-sass/_navs.scss create mode 100644 files/new-Design/assets/css/_helper-sass/_type.scss create mode 100644 files/new-Design/assets/css/_project-sass/_print.scss create mode 100644 files/new-Design/assets/css/_project-sass/_project-Base.scss create mode 100644 files/new-Design/assets/css/_project-sass/_project-Footer.scss create mode 100644 files/new-Design/assets/css/_project-sass/_project-Header.scss create mode 100644 files/new-Design/assets/css/_project-sass/_project-Main.scss create mode 100644 files/new-Design/assets/css/_project-sass/_project-Type.scss create mode 100644 files/new-Design/assets/css/_project-sass/_project-Vars.scss create mode 100644 files/new-Design/assets/css/_tidy.scss create mode 100644 files/new-Design/assets/css/master.css create mode 100644 files/new-Design/assets/css/neo.css create mode 100644 files/new-Design/assets/css/neo.min.css create mode 100644 files/new-Design/assets/css/neo.scss create mode 100644 files/new-Design/assets/img/.gitignore create mode 100644 files/new-Design/assets/img/border.png create mode 100644 files/new-Design/assets/img/cat.png create mode 100644 files/new-Design/assets/img/drop-Arrow.png create mode 100644 files/new-Design/assets/img/featured/test.jpg create mode 100644 files/new-Design/assets/img/icons.png create mode 100644 files/new-Design/assets/img/nav-Icon.png create mode 100644 files/new-Design/assets/img/neocities-Logo.png create mode 100644 files/new-Design/assets/img/neocity.jpg create mode 100644 files/new-Design/assets/img/sign-up-bg.png create mode 100644 files/new-Design/assets/scripts/.gitignore create mode 100644 files/new-Design/assets/scripts/app.js create mode 100644 files/new-Design/assets/scripts/app.min.js create mode 100644 files/new-Design/assets/scripts/html5.js create mode 100644 files/new-Design/assets/scripts/html5.min.js create mode 100644 files/new-Design/assets/scripts/jquery-1.10.1.min.js create mode 100644 files/new-Design/converted-html/404.html create mode 100644 files/new-Design/converted-html/about.html create mode 100644 files/new-Design/converted-html/assets/css/master.css create mode 100644 files/new-Design/converted-html/assets/css/neo.css create mode 100644 files/new-Design/converted-html/assets/css/neo.min.css create mode 100644 files/new-Design/converted-html/assets/img/border.png create mode 100644 files/new-Design/converted-html/assets/img/cat.png create mode 100644 files/new-Design/converted-html/assets/img/drop-Arrow.png create mode 100644 files/new-Design/converted-html/assets/img/featured/test.jpg create mode 100644 files/new-Design/converted-html/assets/img/icons.png create mode 100644 files/new-Design/converted-html/assets/img/nav-Icon.png create mode 100644 files/new-Design/converted-html/assets/img/neocities-Logo.png create mode 100644 files/new-Design/converted-html/assets/img/neocity.jpg create mode 100644 files/new-Design/converted-html/assets/img/sign-up-bg.png create mode 100644 files/new-Design/converted-html/assets/scripts/app.js create mode 100644 files/new-Design/converted-html/assets/scripts/app.min.js create mode 100644 files/new-Design/converted-html/assets/scripts/html5.js create mode 100644 files/new-Design/converted-html/assets/scripts/html5.min.js create mode 100644 files/new-Design/converted-html/assets/scripts/jquery-1.10.1.min.js create mode 100644 files/new-Design/converted-html/browse.html create mode 100644 files/new-Design/converted-html/dashboard.html create mode 100644 files/new-Design/converted-html/favicon.ico create mode 100644 files/new-Design/converted-html/humans.txt create mode 100644 files/new-Design/converted-html/index.html create mode 100644 files/new-Design/converted-html/package.png create mode 100644 files/new-Design/converted-html/robots.txt create mode 100644 files/new-Design/converted-html/tutorials.html create mode 100644 files/new-Design/favicon.ico create mode 100644 files/new-Design/humans.txt create mode 100644 files/new-Design/mixture.json create mode 100644 files/new-Design/models/.gitignore create mode 100644 files/new-Design/package.png create mode 100644 files/new-Design/robots.txt create mode 100644 files/new-Design/templates/404.liquid create mode 100644 files/new-Design/templates/about.liquid create mode 100644 files/new-Design/templates/browse.liquid create mode 100644 files/new-Design/templates/dashboard.liquid create mode 100644 files/new-Design/templates/includes/footer.liquid create mode 100644 files/new-Design/templates/includes/hp-header.liquid create mode 100644 files/new-Design/templates/includes/int-footer.liquid create mode 100644 files/new-Design/templates/includes/int-header.liquid create mode 100644 files/new-Design/templates/includes/navigation.liquid create mode 100644 files/new-Design/templates/index.liquid create mode 100644 files/new-Design/templates/layouts/int.liquid create mode 100644 files/new-Design/templates/layouts/layout.liquid create mode 100644 files/new-Design/templates/tutorials.liquid diff --git a/files/new-Design/README.md b/files/new-Design/README.md new file mode 100644 index 00000000..e69de29b diff --git a/files/new-Design/assets/css/.gitignore b/files/new-Design/assets/css/.gitignore new file mode 100644 index 00000000..af3f6036 --- /dev/null +++ b/files/new-Design/assets/css/.gitignore @@ -0,0 +1 @@ +# This file is here simplt to force git to allow the folder within the zip \ No newline at end of file diff --git a/files/new-Design/assets/css/_base-sass/_base-Form.scss b/files/new-Design/assets/css/_base-sass/_base-Form.scss new file mode 100644 index 00000000..6cc7e1cf --- /dev/null +++ b/files/new-Design/assets/css/_base-sass/_base-Form.scss @@ -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} diff --git a/files/new-Design/assets/css/_base-sass/_base-HTML5.scss b/files/new-Design/assets/css/_base-sass/_base-HTML5.scss new file mode 100644 index 00000000..c29697e9 --- /dev/null +++ b/files/new-Design/assets/css/_base-sass/_base-HTML5.scss @@ -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} diff --git a/files/new-Design/assets/css/_base-sass/_base-Media.scss b/files/new-Design/assets/css/_base-sass/_base-Media.scss new file mode 100644 index 00000000..2880ccc1 --- /dev/null +++ b/files/new-Design/assets/css/_base-sass/_base-Media.scss @@ -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} diff --git a/files/new-Design/assets/css/_base-sass/_basic.scss b/files/new-Design/assets/css/_base-sass/_basic.scss new file mode 100644 index 00000000..2a542c0a --- /dev/null +++ b/files/new-Design/assets/css/_base-sass/_basic.scss @@ -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
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 diff --git a/files/new-Design/assets/css/_base-sass/_forms.scss b/files/new-Design/assets/css/_base-sass/_forms.scss new file mode 100644 index 00000000..8ef250f0 --- /dev/null +++ b/files/new-Design/assets/css/_base-sass/_forms.scss @@ -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; +} diff --git a/files/new-Design/assets/css/_base-sass/_navs.scss b/files/new-Design/assets/css/_base-sass/_navs.scss new file mode 100644 index 00000000..bc93acb8 --- /dev/null +++ b/files/new-Design/assets/css/_base-sass/_navs.scss @@ -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; + } + + } +} diff --git a/files/new-Design/assets/css/_base-sass/_tables.scss b/files/new-Design/assets/css/_base-sass/_tables.scss new file mode 100644 index 00000000..bc9a694a --- /dev/null +++ b/files/new-Design/assets/css/_base-sass/_tables.scss @@ -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} +} diff --git a/files/new-Design/assets/css/_base-sass/_type-Code.scss b/files/new-Design/assets/css/_base-sass/_type-Code.scss new file mode 100644 index 00000000..70e41151 --- /dev/null +++ b/files/new-Design/assets/css/_base-sass/_type-Code.scss @@ -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; +} diff --git a/files/new-Design/assets/css/_base-sass/_type-Lists.scss b/files/new-Design/assets/css/_base-sass/_type-Lists.scss new file mode 100644 index 00000000..00348484 --- /dev/null +++ b/files/new-Design/assets/css/_base-sass/_type-Lists.scss @@ -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
  • +} + +// Definition Lists +dt{@extend %margin-bottom;} +dd{ + margin:0 0 $spacing*2; + padding-left:$spacing*4 +} \ No newline at end of file diff --git a/files/new-Design/assets/css/_base-sass/_typography.scss b/files/new-Design/assets/css/_base-sass/_typography.scss new file mode 100644 index 00000000..ea539fa9 --- /dev/null +++ b/files/new-Design/assets/css/_base-sass/_typography.scss @@ -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

    or

  • , +// 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 diff --git a/files/new-Design/assets/css/_helper-sass/_buttons.scss b/files/new-Design/assets/css/_helper-sass/_buttons.scss new file mode 100644 index 00000000..ac7b29d6 --- /dev/null +++ b/files/new-Design/assets/css/_helper-sass/_buttons.scss @@ -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)} diff --git a/files/new-Design/assets/css/_helper-sass/_helper.scss b/files/new-Design/assets/css/_helper-sass/_helper.scss new file mode 100644 index 00000000..011e797a --- /dev/null +++ b/files/new-Design/assets/css/_helper-sass/_helper.scss @@ -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 + -------------------------- + + + +*/ + +// 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 + -------------------------- +
    +
    + +
    +
    +

    Title for Meida Element

    +

    Paragraph text to go along with media element.

    +
    +
    + + -- 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} +} + + + diff --git a/files/new-Design/assets/css/_helper-sass/_layout.scss b/files/new-Design/assets/css/_helper-sass/_layout.scss new file mode 100644 index 00000000..6607f961 --- /dev/null +++ b/files/new-Design/assets/css/_helper-sass/_layout.scss @@ -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} +} diff --git a/files/new-Design/assets/css/_helper-sass/_mixins.scss b/files/new-Design/assets/css/_helper-sass/_mixins.scss new file mode 100644 index 00000000..85648fd0 --- /dev/null +++ b/files/new-Design/assets/css/_helper-sass/_mixins.scss @@ -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; + } +} + diff --git a/files/new-Design/assets/css/_helper-sass/_navs.scss b/files/new-Design/assets/css/_helper-sass/_navs.scss new file mode 100644 index 00000000..52af85ea --- /dev/null +++ b/files/new-Design/assets/css/_helper-sass/_navs.scss @@ -0,0 +1,125 @@ +// ---------------------------------------------------------------- +// Basic Setups for Navigation Elements +// ---------------------------------------------------------------- + +// The main navigation class to be placed on the