Organize SCSS partials

This commit is contained in:
Michael Rose 2016-11-17 12:17:18 -05:00
parent 3a7dd49734
commit 71ddbf1e70
7 changed files with 130 additions and 109 deletions

View file

@ -235,4 +235,4 @@
} }
} }
} }
} }

View file

@ -15,4 +15,4 @@
.page__footer { .page__footer {
display: none; display: none;
} }
} }

View file

@ -184,4 +184,4 @@ input[type="search"]::-webkit-search-cancel-button {
textarea { textarea {
overflow: auto; /* remove vertical scrollbar in IE6-9*/ overflow: auto; /* remove vertical scrollbar in IE6-9*/
vertical-align: top; /* readability and alignment cross-browser*/ vertical-align: top; /* readability and alignment cross-browser*/
} }

View file

@ -467,4 +467,4 @@ a.reversefootnote {
.required { .required {
color: $danger-color; color: $danger-color;
font-weight: bold; font-weight: bold;
} }

View file

@ -6,142 +6,123 @@
Typography Typography
========================================================================== */ ========================================================================== */
$doc-font-size : 16; $doc-font-size : 16 !default;
/* paragraph indention */ /* paragraph indention */
$paragraph-indent : false; // true, false (default) $paragraph-indent : false !default; // true, false (default)
$indent-var : 1.3em; $indent-var : 1.3em !default;
/* system typefaces */ /* system typefaces */
$serif : Georgia, Times, serif; $serif : Georgia, Times, serif !default;
$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; $sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace : Monaco, Consolas, "Lucida Console", monospace; $monospace : Monaco, Consolas, "Lucida Console", monospace !default;
/* sans serif typefaces */ /* sans serif typefaces */
$sans-serif-narrow : $sans-serif; $sans-serif-narrow : $sans-serif !default;
$helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif; $helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif !default;
/* serif typefaces */ /* serif typefaces */
$georgia : Georgia, serif; $georgia : Georgia, serif !default;
$times : Times, serif; $times : Times, serif !default;
$bodoni : "Bodoni MT", serif; $bodoni : "Bodoni MT", serif !default;
$calisto : "Calisto MT", serif; $calisto : "Calisto MT", serif !default;
$garamond : Garamond, serif; $garamond : Garamond, serif !default;
$global-font-family : $sans-serif; $global-font-family : $sans-serif !default;
$header-font-family : $sans-serif; $header-font-family : $sans-serif !default;
$caption-font-family : $serif; $caption-font-family : $serif !default;
/* type scale */ /* type scale */
$type-size-1 : 2.441em; // ~39.056px $type-size-1 : 2.441em !default; // ~39.056px
$type-size-2 : 1.953em; // ~31.248px $type-size-2 : 1.953em !default; // ~31.248px
$type-size-3 : 1.563em; // ~25.008px $type-size-3 : 1.563em !default; // ~25.008px
$type-size-4 : 1.25em; // ~20px $type-size-4 : 1.25em !default; // ~20px
$type-size-5 : 1em; // ~16px $type-size-5 : 1em !default; // ~16px
$type-size-6 : 0.75em; // ~12px $type-size-6 : 0.75em !default; // ~12px
$type-size-7 : 0.6875em; // ~11px $type-size-7 : 0.6875em !default; // ~11px
$type-size-8 : 0.625em; // ~10px $type-size-8 : 0.625em !default; // ~10px
/* /*
Colors Colors
========================================================================== */ ========================================================================== */
$gray : #7a8288; $gray : #7a8288 !default;
$dark-gray : mix(#000, $gray, 40%); $dark-gray : mix(#000, $gray, 40%) !default;
$darker-gray : mix(#000, $gray, 60%); $darker-gray : mix(#000, $gray, 60%) !default;
$light-gray : mix(#fff, $gray, 50%); $light-gray : mix(#fff, $gray, 50%) !default;
$lighter-gray : mix(#fff, $gray, 90%); $lighter-gray : mix(#fff, $gray, 90%) !default;
$body-color : #fff; $body-color : #fff !default;
$background-color : #fff; $background-color : #fff !default;
$code-background-color : #fafafa; $code-background-color : #fafafa !default;
$code-background-color-dark : $light-gray; $code-background-color-dark : $light-gray !default;
$text-color : $dark-gray; $text-color : $dark-gray !default;
$border-color : $lighter-gray; $border-color : $lighter-gray !default;
$primary-color : #7a8288; $primary-color : #7a8288 !default;
$success-color : #62c462; $success-color : #62c462 !default;
$warning-color : #f89406; $warning-color : #f89406 !default;
$danger-color : #ee5f5b; $danger-color : #ee5f5b !default;
$info-color : #52adc8; $info-color : #52adc8 !default;
/* brands */ /* brands */
$behance-color : #1769FF; $behance-color : #1769FF !default;
$dribbble-color : #ea4c89; $dribbble-color : #ea4c89 !default;
$facebook-color : #3b5998; $facebook-color : #3b5998 !default;
$flickr-color : #ff0084; $flickr-color : #ff0084 !default;
$foursquare-color : #0072b1; $foursquare-color : #0072b1 !default;
$github-color : #171516; $github-color : #171516 !default;
$google-plus-color : #dd4b39; $google-plus-color : #dd4b39 !default;
$instagram-color : #517fa4; $instagram-color : #517fa4 !default;
$lastfm-color : #d51007; $lastfm-color : #d51007 !default;
$linkedin-color : #007bb6; $linkedin-color : #007bb6 !default;
$pinterest-color : #cb2027; $pinterest-color : #cb2027 !default;
$rss-color : #fa9b39; $rss-color : #fa9b39 !default;
$soundcloud-color : #ff3300; $soundcloud-color : #ff3300 !default;
$stackoverflow-color : #fe7a15; $stackoverflow-color : #fe7a15 !default;
$tumblr-color : #32506d; $tumblr-color : #32506d !default;
$twitter-color : #55acee; $twitter-color : #55acee !default;
$vimeo-color : #1ab7ea; $vimeo-color : #1ab7ea !default;
$vine-color : #00bf8f; $vine-color : #00bf8f !default;
$youtube-color : #bb0000; $youtube-color : #bb0000 !default;
$xing-color : #006567; $xing-color : #006567 !default;
/* links */ /* links */
$link-color : $info-color; $link-color : $info-color !default;
$link-color-hover : mix(#000, $link-color, 25%); $link-color-hover : mix(#000, $link-color, 25%) !default;
$link-color-visited : mix(#fff, $link-color, 25%); $link-color-visited : mix(#fff, $link-color, 25%) !default;
$masthead-link-color : $primary-color; $masthead-link-color : $primary-color !default;
$masthead-link-color-hover : mix(#000, $primary-color, 25%); $masthead-link-color-hover : mix(#000, $primary-color, 25%) !default;
/* /*
Breakpoints Breakpoints
========================================================================== */ ========================================================================== */
@include breakpoint-set("to ems", true); $small : 600px !default;
$medium : 768px !default;
$small : 600px; $medium-wide : 900px !default;
$medium : 768px; $large : 1024px !default;
$medium-wide : 900px; $x-large : 1280px !default;
$large : 1024px;
$x-large : 1280px;
/* /*
Grid Grid
========================================================================== */ ========================================================================== */
$right-sidebar-width-narrow : 200px; $right-sidebar-width-narrow : 200px !default;
$right-sidebar-width : 300px; $right-sidebar-width : 300px !default;
$right-sidebar-width-wide : 400px; $right-sidebar-width-wide : 400px !default;
$susy: (
columns: 12,
// column-width: 90px,
gutters: 1/4,
math: fluid,
output: float,
gutter-position: after,
container: $large,
global-box-sizing: border-box,
// debug: (
// image: show,
// color: blue,
// output: overlay,
// toggle: top right,
// ),
);
/* /*
Other Other
========================================================================== */ ========================================================================== */
$border-radius : 4px; $border-radius : 4px !default;
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125); $box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125) !default;
$navicon-width : 28px; $navicon-width : 28px !default;
$navicon-height : 4px; $navicon-height : 4px !default;
$global-transition : all 0.2s ease-in-out; $global-transition : all 0.2s ease-in-out !default;

View file

@ -43,4 +43,4 @@ $mfp-caption-subtitle-color: #bdbdbd; // Caption sub
.mfp-counter { font-family: $serif; } // Caption font family .mfp-counter { font-family: $serif; } // Caption font family
// A11y // A11y
$mfp-use-visuallyhidden: false; $mfp-use-visuallyhidden: false;

View file

@ -10,14 +10,53 @@
* *
*/ */
@import "vendor/breakpoint/breakpoint"; // media query mixins /*
Variables
========================================================================== */
@import "variables"; @import "variables";
@import "mixins";
/*
Vendor
========================================================================== */
/* Breakpoint - media query mixins */
@import "vendor/breakpoint/breakpoint";
@include breakpoint-set("to ems", true);
/* Font Awesome - icon font set */
@import "vendor/font-awesome/font-awesome";
/* Magnific Popup - responsive lightbox */
@import "vendor/magnific-popup/magnific-popup"; // Magnific Popup
/* Susy - grid mixins */
$susy: (
columns: 12,
gutters: 1/4,
math: fluid,
output: float,
gutter-position: after,
container: $large,
global-box-sizing: border-box,
// debug: (
// image: show,
// color: blue,
// output: overlay,
// toggle: top right,
// ),
);
@import "vendor/susy/susy"; @import "vendor/susy/susy";
/*
Base
========================================================================== */
@import "mixins";
@import "reset"; @import "reset";
@import "base"; @import "base";
@import "utilities"; @import "utilities";
@import "animations"; @import "animations";
@import "tables"; @import "tables";
@ -27,13 +66,14 @@
@import "navigation"; @import "navigation";
@import "footer"; @import "footer";
@import "syntax"; @import "syntax";
@import "forms"; @import "forms";
/*
Layout specific
========================================================================== */
@import "page"; @import "page";
@import "archive"; @import "archive";
@import "sidebar"; @import "sidebar";
@import "vendor/font-awesome/font-awesome";
@import "vendor/magnific-popup/magnific-popup";
@import "print"; @import "print";