diff --git a/STLYEGUIDE_SPRESS_UPDATE/composer.json b/STLYEGUIDE_SPRESS_UPDATE/composer.json
new file mode 100644
index 0000000..427e7e9
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/composer.json
@@ -0,0 +1,14 @@
+{
+ "name": "palantirnet/STYLEGUIDE-TEMPLATE",
+ "type": "spress-theme",
+ "license": "proprietary",
+ "minimum-stability": "dev",
+ "prefer-stable": true,
+ "preferred-install": "dist",
+ "config": {
+ "sort-packages": "true"
+ },
+ "require": {
+ "spress/spress": "^2.1"
+ }
+}
diff --git a/STLYEGUIDE_SPRESS_UPDATE/config.yml b/STLYEGUIDE_SPRESS_UPDATE/config.yml
new file mode 100644
index 0000000..62895c4
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/config.yml
@@ -0,0 +1,35 @@
+# Site configuration
+
+title: 'STYLEGUIDE TEMPLATE'
+url: ''
+
+text_extensions: [ 'htm', 'html', 'html.twig', 'twig.html', 'js', 'less', 'markdown', 'md', 'mkd', 'mkdn', 'coffee', 'css', 'erb', 'haml', 'handlebars', 'hb', 'ms', 'mustache', 'php', 'rb', 'sass', 'scss', 'slim', 'txt', 'twig', 'xhtml', 'xml', 'svg' ]
+
+server_watch_ext: ['html', 'htm', 'xml', 'css', 'js', 'twig', 'md']
+
+collections:
+ elements:
+ output: true
+ title: "Elements"
+ sort_by: title
+ sort_type: 'ascending'
+
+ components:
+ output: true
+ title: "Components"
+ sort_by: title
+ sort_type: 'ascending'
+
+ comps:
+ output: true
+ title: "High Fidelity Comps"
+ sort_by: title
+ sort_type: 'ascending'
+
+ templates:
+ output: true
+ title: "Templates"
+ sort_by: title
+ sort_type: 'ascending'
+
+categories: ['global', 'rail', 'teaser', 'hero', 'inline', 'general']
diff --git a/STLYEGUIDE_SPRESS_UPDATE/config_dev.yml b/STLYEGUIDE_SPRESS_UPDATE/config_dev.yml
new file mode 100644
index 0000000..692ec10
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/config_dev.yml
@@ -0,0 +1,4 @@
+# Site configuration
+
+url: ''
+debug: true
diff --git a/STLYEGUIDE_SPRESS_UPDATE/config_github.yml b/STLYEGUIDE_SPRESS_UPDATE/config_github.yml
new file mode 100644
index 0000000..b06c0d8
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/config_github.yml
@@ -0,0 +1,3 @@
+# Site configuration
+
+url: https://palantirnet.github.io/STYLEGUIDE-TEMPLATE
diff --git a/STLYEGUIDE_SPRESS_UPDATE/gitignore b/STLYEGUIDE_SPRESS_UPDATE/gitignore
new file mode 100644
index 0000000..0c2e61f
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/gitignore
@@ -0,0 +1,8 @@
+# npm removes this file from butler on install if we name it .gitignore, but
+# it's a necessary part of the Spress template!
+
+/vendor/
+/build/
+/src/content/assets/css/
+/node_modules/
+/npm-debug.log
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/assets/css/styles.css b/STLYEGUIDE_SPRESS_UPDATE/src/content/assets/css/styles.css
new file mode 100644
index 0000000..d943a26
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/assets/css/styles.css
@@ -0,0 +1,2 @@
+h2,h3{letter-spacing:-.0125em}h6{letter-spacing:.1em}h2,h3{font-weight:700}h6{text-transform:uppercase}.sg-dev-drawer__list{margin:0;padding:0;list-style:none}.clearfix:after,.container:after,.form-row:after,.inline-image:after,.inline-video-container:after,.inline-video:after,.nest-wrap:after,.sg-component:after{content:"";display:table;clear:both}.element-focusable,.element-invisible{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.element-focusable:active,.element-focusable:focus{position:static!important;clip:auto;height:auto;width:auto;overflow:auto}
+/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */*,:after,:before{box-sizing:border-box}html{background:#fff;color:#222;font-size:100%;line-height:1.5em;font-family:Helvetica,Arial,Nimbus Sans L,sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (min-width:900px){html{font-size:110%}}@media (min-width:1100px){html{font-size:120%}}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{-webkit-transition:all .3s ease;transition:all .3s ease;background-color:transparent;-webkit-text-decoration-skip:objects;color:#4c4c4b;text-decoration:none}a:active,a:hover{outline-width:0;color:#4c4c4b;text-decoration:underline}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}h1{font-size:2em;line-height:1.125em;margin-top:.9375em;margin-bottom:.375em}h2{font-size:1.85em;line-height:1.09459em;margin-top:1.01351em;margin-bottom:.40541em}h3{font-size:1.5em;line-height:1.15em;margin-top:1em;margin-bottom:.5em}h4{font-size:1.25em;line-height:1.26em;margin-top:1.2em;margin-bottom:.6em}h5{font-size:1em;line-height:1.275em;margin-top:1.125em;margin-bottom:.375em}h6{font-size:.8em;line-height:1.21875em;margin-top:1.40625em;margin-bottom:.46875em}mark{background-color:#ff0;color:#222}small{font-size:80%}sub,sup{font-size:70%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}blockquote{margin:1.5em}dl,menu,ol,ul{margin:.375em 0}ol ol,ol ul,ul ol,ul ul{margin:0}dd{margin:0 0 0 1em}menu,ol,ul{padding:0 0 0 1em}figure{margin:1.5em}hr{box-sizing:content-box;height:0;overflow:visible}p,pre{margin:0 0 1.05em}button,input,optgroup,select,textarea{font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}input{overflow:visible}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{border:1px solid hsla(0,0%,100%,.6);margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;color:inherit;padding:0}optgroup{font-weight:700}textarea{overflow:auto}.container{width:100%;min-width:260px;padding:0 1.5em;margin:0 auto}@media (min-width:900px){.container{width:90%;padding:0}}@media (min-width:1100px){.container{max-width:1600px}}.l-1up,.l-2up{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-2up{clear:right}}@media (min-width:600px){.l-2up,.l-2up:nth-of-type(2n+1){-sgs-span-settings:("span":6,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:48.57143%;float:left;margin-left:0;margin-right:2.85714%}.l-2up:nth-of-type(2n+1){clear:right;clear:both}}@media (min-width:600px){.l-2up:nth-of-type(2n){-sgs-span-settings:("span":6,"location":7,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:48.57143%;clear:right;float:right;margin-right:0}}.l-2up--1{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-2up--1{-sgs-span-settings:("span":6,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:48.57143%;float:left;margin-right:-100%;margin-left:0;clear:both}}.l-2up--2{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-2up--2{-sgs-span-settings:("span":6,"location":7,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:48.57143%;float:right;margin-left:0;margin-right:0;clear:none}}.l-3up{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-3up{clear:right}}@media (min-width:600px){.l-3up,.l-3up:nth-of-type(3n+1){-sgs-span-settings:("span":4,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:31.42857%;float:left;margin-left:0;margin-right:2.85714%}.l-3up:nth-of-type(3n+1){clear:right;clear:both}}@media (min-width:600px){.l-3up:nth-of-type(3n){-sgs-span-settings:("span":4,"location":9,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:31.42857%;clear:right;float:right;margin-right:0}}.l-3up--1{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-3up--1{-sgs-span-settings:("span":4,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:31.42857%;float:left;margin-right:-100%;margin-left:0;clear:both}}.l-3up--2{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-3up--2{-sgs-span-settings:("span":4,"location":5,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:31.42857%;float:left;margin-right:-100%;margin-left:34.28571%;clear:none}}.l-3up--3{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-3up--3{-sgs-span-settings:("span":4,"location":9,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:31.42857%;float:right;margin-left:0;margin-right:0;clear:none}}.fl-3up--1{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.fl-3up--1{-sgs-span-settings:("span":6,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:48.57143%;float:left;margin-right:-100%;margin-left:0;clear:none}}@media (min-width:1100px){.fl-3up--1{-sgs-span-settings:("span":4,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:31.42857%;float:left;margin-right:-100%;margin-left:0;clear:both}}.fl-3up--2{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.fl-3up--2{-sgs-span-settings:("span":6,"location":7,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:48.57143%;float:right;margin-left:0;margin-right:0;clear:none}}@media (min-width:1100px){.fl-3up--2{-sgs-span-settings:("span":6,"location":5,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:48.57143%;float:left;margin-right:-100%;margin-left:34.28571%;clear:none}}.fl-3up--3{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.fl-3up--3{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}}@media (min-width:1100px){.fl-3up--3{-sgs-span-settings:("span":2,"location":11,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:14.28571%;float:right;margin-left:0;margin-right:0;clear:none}}.l-4up{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-4up{clear:right}}@media (min-width:600px){.l-4up,.l-4up:nth-of-type(4n+1){-sgs-span-settings:("span":3,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:22.85714%;float:left;margin-left:0;margin-right:2.85714%}.l-4up:nth-of-type(4n+1){clear:right;clear:both}}@media (min-width:600px){.l-4up:nth-of-type(4n){-sgs-span-settings:("span":3,"location":10,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:22.85714%;clear:right;float:right;margin-right:0}}.l-4up--1{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-4up--1{-sgs-span-settings:("span":3,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:22.85714%;float:left;margin-right:-100%;margin-left:0;clear:both}}.l-4up--2{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-4up--2{-sgs-span-settings:("span":3,"location":4,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:22.85714%;float:left;margin-right:-100%;margin-left:25.71429%;clear:none}}.l-4up--3{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-4up--3{-sgs-span-settings:("span":3,"location":7,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:22.85714%;float:left;margin-right:-100%;margin-left:51.42857%;clear:none}}.l-4up--4{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-4up--4{-sgs-span-settings:("span":3,"location":10,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:22.85714%;float:right;margin-left:0;margin-right:0;clear:none}}.l-6up{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-6up{clear:right}}@media (min-width:600px){.l-6up,.l-6up:nth-of-type(6n+1){-sgs-span-settings:("span":2,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:14.28571%;float:left;margin-left:0;margin-right:2.85714%}.l-6up:nth-of-type(6n+1){clear:right;clear:both}}@media (min-width:600px){.l-6up:nth-of-type(6n){-sgs-span-settings:("span":2,"location":11,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:14.28571%;clear:right;float:right;margin-right:0}}.l-6up--1{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-6up--1{-sgs-span-settings:("span":2,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:14.28571%;float:left;margin-right:-100%;margin-left:0;clear:both}}.l-6up--2{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-6up--2{-sgs-span-settings:("span":2,"location":3,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:14.28571%;float:left;margin-right:-100%;margin-left:17.14286%;clear:none}}.l-6up--3{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-6up--3{-sgs-span-settings:("span":2,"location":5,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:14.28571%;float:left;margin-right:-100%;margin-left:34.28571%;clear:none}}.l-6up--4{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-6up--4{-sgs-span-settings:("span":2,"location":7,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:14.28571%;float:left;margin-right:-100%;margin-left:51.42857%;clear:none}}.l-6up--5{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-6up--5{-sgs-span-settings:("span":2,"location":9,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:14.28571%;float:left;margin-right:-100%;margin-left:68.57143%;clear:none}}.l-6up--6{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-6up--6{-sgs-span-settings:("span":2,"location":11,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:14.28571%;float:right;margin-left:0;margin-right:0;clear:none}}.l-33-66--1{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-33-66--1{-sgs-span-settings:("span":4,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:31.42857%;float:left;margin-right:-100%;margin-left:0;clear:both}}.l-33-66--2{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-33-66--2{-sgs-span-settings:("span":8,"location":5,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:65.71429%;float:right;margin-left:0;margin-right:0;clear:none}}.l-66-33--1{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-66-33--1{-sgs-span-settings:("span":8,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:65.71429%;float:left;margin-right:-100%;margin-left:0;clear:both}}.l-66-33--2{-sgs-span-settings:("span":12,"location":1,"grid":12,"gutter":.5,"style":"opposite","start row":true,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":both));width:100%;float:right;margin-left:0;margin-right:0;clear:both}@media (min-width:600px){.l-66-33--2{-sgs-span-settings:("span":4,"location":9,"grid":12,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":("clear":none));width:31.42857%;float:right;margin-left:0;margin-right:0;clear:none}}.button,.button--gray,.button--gray[type=button],.button--gray[type=submit],.button--reset,button,input[type=button],input[type=reset],input[type=submit]{font-size:.8em;line-height:1.875em;display:inline-block;background-color:#4c4c4b;color:#fff;border:0;border-radius:0;padding:6px 16px}.button--gray:link,.button--gray:visited,.button--reset:link,.button--reset:visited,.button:link,.button:visited,button:link,button:visited,input[type=button]:link,input[type=button]:visited,input[type=reset]:link,input[type=reset]:visited,input[type=submit]:link,input[type=submit]:visited{color:#fff}.button--gray:active,.button--gray:focus,.button--gray:hover,.button--reset:active,.button--reset:focus,.button--reset:hover,.button:active,.button:focus,.button:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:#999898;-webkit-transition:background-color .5s ease;transition:background-color .5s ease;text-decoration:none}.button--gray,.button--gray[type=button],.button--gray[type=submit],.button--reset,input[type=reset]{background-color:#4c4c4b}.button--gray:active,.button--gray:focus,.button--gray:hover,.button--gray[type=button]:active,.button--gray[type=button]:focus,.button--gray[type=button]:hover,.button--gray[type=submit]:active,.button--gray[type=submit]:focus,.button--gray[type=submit]:hover,.button--reset:active,.button--reset:focus,.button--reset:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{background-color:#999898}.button--container{margin:24px 0}.input-wrapper,.input-wrapper--half{box-sizing:border-box;width:100%;margin-bottom:24px}@media (min-width:600px){.input-wrapper--half{width:50%;float:left}.input-wrapper--half:first-child{padding-right:12px}.input-wrapper--half:last-child{padding-left:12px}}label,legend{font-size:.8em;line-height:1.875em;color:#4c4c4b;margin-bottom:.375em}::-webkit-input-placeholder{color:#4c4c4b}:-moz-placeholder,::-moz-placeholder{color:#4c4c4b}:-ms-input-placeholder{color:#4c4c4b}input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=range],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{width:100%;outline:0;border:1px solid #d8d8d8;background-color:transparent;box-sizing:border-box;color:#222;padding:8px}input[type=date]:active,input[type=date]:focus,input[type=date]:hover,input[type=datetime-local]:active,input[type=datetime-local]:focus,input[type=datetime-local]:hover,input[type=datetime]:active,input[type=datetime]:focus,input[type=datetime]:hover,input[type=email]:active,input[type=email]:focus,input[type=email]:hover,input[type=month]:active,input[type=month]:focus,input[type=month]:hover,input[type=number]:active,input[type=number]:focus,input[type=number]:hover,input[type=range]:active,input[type=range]:focus,input[type=range]:hover,input[type=search]:active,input[type=search]:focus,input[type=search]:hover,input[type=tel]:active,input[type=tel]:focus,input[type=tel]:hover,input[type=text]:active,input[type=text]:focus,input[type=text]:hover,input[type=time]:active,input[type=time]:focus,input[type=time]:hover,input[type=url]:active,input[type=url]:focus,input[type=url]:hover,input[type=week]:active,input[type=week]:focus,input[type=week]:hover{border-color:#4c4c4b;-webkit-transition:border-color .5s ease;transition:border-color .5s ease}input[type=color]{display:block;width:100%}select{width:100%;outline:0;border-radius:0;border:0;border-bottom:3px solid transparent;box-sizing:border-box;color:#222;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml;utf8,We have organized the site components into sections the following sections: global, rail, teaser, hero, inline, and general.
+As the styleguide grows, more component categories will be created and added to the list.
+When you select a component from the navigation, you will see the component on the page along with a brief description.
+{% endblock %}
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-image.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-image.html
new file mode 100644
index 0000000..7cf2335
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-image.html
@@ -0,0 +1,92 @@
+---
+layout: component
+section: component
+type: inline
+
+title: Inline Images
+description: 'The inline image adds images into the WYSIWYG component. It includes an image with alt text and an optional caption. It has four variants, full-width (default), left, right, and portrait.'
+
+
+drupal_theme_paths:
+
+changelog:
+ -
+ date: ''
+ log: ''
+
+dev_notes:
+
+---
+
+{% block content_wrapper %}
+ {% block content %}
+
+ {% include 'inline-image.twig' with { 'image' : 'fpo-16x9.jpg', 'alt' : 'Alt Text', 'caption' : 'This is optional caption text.' } %}
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ {% include 'inline-image.twig' with { 'image' : 'fpo-16x9.jpg', 'alignment' : 'inline--left', 'alt' : 'Alt Text' } %}
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ {% include 'inline-image.twig' with { 'image' : 'fpo-16x9.jpg', 'alignment' : 'inline--right', 'alt' : 'Alt Text', 'caption' : 'This is an optional image caption.' } %}
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ {% include 'inline-image.twig' with { 'image' : 'fpo-1x1.jpg', 'alignment' : 'inline--portrait', 'alt' : 'Alt Text', 'caption' : 'This is an optional inline caption on a portrait sized image.' } %}
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+ {% endblock %}
+{% endblock %}
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-video.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-video.html
new file mode 100644
index 0000000..95e1c0c
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-video.html
@@ -0,0 +1,60 @@
+---
+layout: component
+section: component
+type: inline
+
+title: Inline Video
+description: 'The inline video component is used to add inline video to the WYSIWYG. It includes an embedded video (YouTube or Vimeo) and an optional caption.'
+
+
+drupal_theme_paths:
+
+changelog:
+ -
+ date: ''
+ log: ''
+
+dev_notes:
+
+---
+
+{% block content_wrapper %}
+ {% block content %}
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ {% include 'inline-video.twig' with { 'video_url' : 'https://www.youtube.com/embed/M93NNRGTsFY' } %}
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ {% include 'inline-video.twig' with { 'video_url' : 'https://www.youtube.com/embed/7cmvHgNZ20E', 'caption' : 'Learn about complex valve operations and mitral valve re-operations in this special interview with Dr. Anelechi Anyanwu, cardiac surgeon at The Mount Sinai Medical Center.' } %}
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+ {% endblock %}
+{% endblock %}
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements.html
new file mode 100644
index 0000000..8931464
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements.html
@@ -0,0 +1,10 @@
+---
+layout: element
+title:
+description:
+---
+
+{% block pageContent %}
+ Elements are the basic building block of the page. These elements are shared amongst both sites.
+ When you select an element from the navigation, you will see the element on the page along with a brief description.
+{% endblock %}
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-buttons.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-buttons.html
new file mode 100644
index 0000000..0f07ef7
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-buttons.html
@@ -0,0 +1,15 @@
+---
+layout: element
+section: element
+
+title: Buttons
+description: Create basic button styles for the site. This includes only the button element and the inputs for submit and reset.
+---
+
+Default Buttons
+Link Button
+This is a Button
+
+
Primary Palette
+
+
+ {% for primary_color in page.primary_colors %}
+
+
+
+ Variable
+ {{ primary_color.name }}
+ Hex
+ #{{ primary_color.hex }}
+
+
+
+
+
Grayscale Palette
+
+
+ {% for gray_color in page.gray_colors %}
+
+
+
+ Variable
+ {{ gray_color.name }}
+ Hex
+ #{{ gray_color.hex }}
+
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-forms.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-forms.html
new file mode 100644
index 0000000..f09dc51
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-forms.html
@@ -0,0 +1,137 @@
+---
+layout: element
+section: element
+
+title: Form Elements
+description: Form elements show the basic styles for form items as they will appear on the site. This includes some basic layout options.
+
+---
+
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-grid.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-grid.html
new file mode 100644
index 0000000..8a84eb2
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-grid.html
@@ -0,0 +1,162 @@
+---
+layout: element
+section: element
+
+title: Grid System
+description: This is the structural framework for the layout of the website.
+---
+
+
12 Column "Isolation" grid layout classes
+
Perfect for single row layouts
+
+
12 Column "Float" grid layout classes
+
Perfect for multi-row layouts
+
+
Nested grid example
+
If need be you can nest items inside each other
+
+
+
l-6up
+
l-6up
+
l-3up (last)
+
+
H1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+H2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+H3: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+H4: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+H5: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+H6: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-lists.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-lists.html
new file mode 100644
index 0000000..e9f01f4
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-lists.html
@@ -0,0 +1,41 @@
+---
+layout: element
+section: element
+
+title: Lists
+description: This tracks the style for the basic lists available in a site via the WYSIWYG. This includes unordered lists, ordered lists, and definition lists.
+---
+
+ Unordered Lists
+
+ This is the first item in an unordered list.
+ This is the second item in an unordered list.
+ This is the third item in an unordered list.
+ This is the fourth item in an unordered list.
+
+ Ordered Lists
+
+ This is the first item in an ordered list.
+ This is the second item in an ordered list.
+ This is the third item in an ordered list.
+ This is the fourth item in an ordered list.
+
+ Nested Lists
+
+ This is the first item in an ordered list.
+
+ This is the first nested item within the first item.
+ This is the second nested item within the first item.
+ This is the third nested item within the first item.
+
+ This is the second item in an ordered list.
+ This is the third item in an ordered list.
+ This is the fourth item in an ordered list.
+
+ Definition Lists
+
+ This is the first item in an ordered list.
+ This is the second item in an ordered list.
+ This is the third item in an ordered list.
+ This is the fourth item in an ordered list.
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-paragraph.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-paragraph.html
new file mode 100644
index 0000000..2b6035a
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-paragraph.html
@@ -0,0 +1,12 @@
+---
+layout: element
+section: element
+
+title: Paragraphs
+description: Basic paragraph and text style for site. This is how text looks by default if you do not add in a class.
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida gravida dui nec porta. Curabitur id metus in augue lacinia porttitor eget id lectus. Praesent vitae cursus magna. Morbi non tempor massa. Nunc euismod suscipit tellus vitae rhoncus. Mauris varius arcu ut feugiat aliquet. Morbi non ultrices turpis. Pellentesque convallis aliquet enim, a bibendum velit cursus sit amet. Donec molestie aliquam iaculis. Donec convallis mi non ex imperdiet, aliquam mattis ante accumsan. Quisque auctor est non posuere aliquam. Duis sit amet elit in nisl rutrum congue. Sed ullamcorper elit ut condimentum tempor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis feugiat molestie massa, et viverra erat.
+Sed tristique efficitur odio fringilla faucibus. Etiam cursus tempor ipsum, nec ornare odio lobortis in. Maecenas tincidunt ut orci eget convallis. Sed tempor vitae sapien non tincidunt. Ut et mi cursus, convallis ex id, aliquam eros. Nam ac felis vel sapien feugiat consectetur. Nulla tempor mollis nunc eget scelerisque. Nunc a odio non mi pulvinar gravida sed iaculis sapien.
+Nullam sit amet massa ornare, dapibus est at, suscipit purus. Vestibulum hendrerit venenatis vulputate. In eu ipsum ligula. Phasellus facilisis leo non turpis tincidunt, quis dapibus ante euismod. Nunc tortor lacus, fringilla sed enim ac, lobortis mattis erat. Nunc facilisis sed arcu ultrices molestie. Sed fermentum eget mauris eget scelerisque. Duis commodo orci at imperdiet suscipit. Ut nec pharetra sapien, sit amet gravida libero. Vestibulum vel massa at justo vestibulum lobortis. Pellentesque eleifend turpis ac odio faucibus bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi non diam id felis laoreet blandit. Vivamus purus lorem, volutpat eget euismod a, iaculis quis odio.
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-text-attributes.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-text-attributes.html
new file mode 100644
index 0000000..2da0d0b
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-text-attributes.html
@@ -0,0 +1,64 @@
+---
+layout: element
+section: element
+
+title: Text Attributes
+description: This tracks the style for the basic text attributes available in a site via the WYSIWYG. This includes the items below.
+---
+ Link
+ This is a text link
+
+ Strong Text
+ The strong element is stylistically different text from normal text, without any special importance
+
+ Emphasized Text
+ The em element is text that is set off from the normal text
+
+ Underlined Text
+ The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
+
+ Deleted Text
+ This text is deleted
+
+ Inserted Text
+ This text is inserted
+
+ Strikethrough
+ This text has a strikethrough
+
+ Superscript
+ Superscript1
+
+ Subscript
+ Subscript for things like H2 O
+
+ Small Text
+ This small text is small for for fine print, etc.
+
+ Abbreviation
+ HTML
+
+ Keyboard Input
+ Cmd
+
+ Quoted Text
+ This text is a short inline quotation
+
+ Citation
+ This is a citation
+
+ Definition Text
+ The dfn element indicates a definition.
+
+ Mark Text
+ The mark element indicates a highlight
+
+ Code
+ This is what inline code looks like.
+
+ Sample Text
+ This is sample output from a computer program
+
+ Variable Text
+ The variable element , such as x = y
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/index.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/index.html
new file mode 100644
index 0000000..452e6dd
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/index.html
@@ -0,0 +1,26 @@
+---
+layout: styleguide-default
+title: Styleguide
+---
+
+{% block content %}
+
+
+
+
+
+
+
+ Living Styleguide
+ This website acts as a living reference for the styles that exist on the live website for {{ site.title }}. The two sites share some design elements and components and deviate when necessary.
+
+ The styleguide is broken up into three sections. 'Design Elements' which are the very basic building blocks for the website; 'Components' which combine design elements into working pieces of code that serves a defined purpose; and 'Page Templates'Â which combine the elements and components into page templates that are used to display the content at destination URLs.
+
+
+
+
+
+
+
{{ page.title }}
+
{{ page.description }}
+
+
+ Landing Pages
+
+ {% for template in site.templates %}
+ {% if template.type == 'landing' %}
+ {{ template.title }}
+
+
+ Detail Pages
+
+ {% for template in site.templates %}
+ {% if template.type == 'detail' %}
+ {{ template.title }}
+
+
+ Listing Pages
+
+ {% for template in site.templates %}
+ {% if template.type == 'list' %}
+ {{ template.title }}
+
+
+
+
+
{{ label }}
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig b/STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig
new file mode 100644
index 0000000..6d50668
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig
@@ -0,0 +1,9 @@
+
+ {% block title %}{{ page.title }}{% endblock %} | {{ site.title }}
+ {# Favicon, replace as needed #}
+
+
+ {{ caption }}
+
+ {% endif %}
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/inline-video.twig b/STLYEGUIDE_SPRESS_UPDATE/src/includes/inline-video.twig
new file mode 100644
index 0000000..a318fa4
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/inline-video.twig
@@ -0,0 +1,16 @@
+{#
+ name: inline video
+ usage: The inline video component is used to add inline video to the WYSIWYG. It includes an embedded video (YouTube or Vimeo).
+#}
+
+
+
+
+
+ {% if caption %}
+
+ {{ caption }}
+
+ {% endif %}
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/radio.twig b/STLYEGUIDE_SPRESS_UPDATE/src/includes/radio.twig
new file mode 100644
index 0000000..718268c
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/radio.twig
@@ -0,0 +1,8 @@
+{#
+ name: Radio
+ usage: The radio element is a basic form element that appears in a fieldset
+#}
+
+{{ label }}
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/scripts.html b/STLYEGUIDE_SPRESS_UPDATE/src/includes/scripts.html
new file mode 100644
index 0000000..929fda9
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/scripts.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-description.html b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-description.html
new file mode 100644
index 0000000..7e10eff
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-description.html
@@ -0,0 +1,10 @@
+
+
+
+
+ {{ page.title }}
+ {{ page.description }}
+
+
+
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-facebook.svg b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-facebook.svg
new file mode 100644
index 0000000..55cb2ac
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-facebook.svg
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-linkedin.svg b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-linkedin.svg
new file mode 100644
index 0000000..09fff20
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-linkedin.svg
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-twitter.svg b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-twitter.svg
new file mode 100644
index 0000000..296cb95
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-twitter.svg
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-youtube.svg b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-youtube.svg
new file mode 100644
index 0000000..4233238
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-youtube.svg
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/layouts/comp.html b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/comp.html
new file mode 100644
index 0000000..ebad997
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/comp.html
@@ -0,0 +1,3 @@
+---
+layout: "default"
+---
\ No newline at end of file
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/layouts/component.html b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/component.html
new file mode 100644
index 0000000..ddf8d23
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/component.html
@@ -0,0 +1,149 @@
+---
+layout: styleguide-landing
+title: Components
+---
+
+{% block content %}
+
+
+
+
+
Components
+
Components are grouped Elements that create a distinct section of an interface. They can be reordered and reused throughout the site.
+
+
+
+ Components menu
+ {% include 'styleguide/svg/arrow.svg' %}
+
+
+
+
+ Global Components
+ {% include 'styleguide/svg/arrow.svg' %}
+
+
+ {% for component in site.components %}
+ {% if component.type == 'global' %}
+ {{ component.title }}
+
+
+
+ Hero Components
+ {% include 'styleguide/svg/arrow.svg' %}
+
+
+ {% for component in site.components %}
+ {% if component.type == 'hero' %}
+ {{ component.title }}
+
+
+
+ inline Components
+ {% include 'styleguide/svg/arrow.svg' %}
+
+
+ {% for component in site.components %}
+ {% if component.type == 'inline' %}
+ {{ component.title }}
+
+
+
+ Rail Components
+ {% include 'styleguide/svg/arrow.svg' %}
+
+
+ {% for component in site.components %}
+ {% if component.type == 'rail' %}
+ {{ component.title }}
+
+
+
+ Teaser Components
+ {% include 'styleguide/svg/arrow.svg' %}
+
+
+ {% for component in site.components %}
+ {% if component.type == 'teaser' %}
+ {{ component.title }}
+
+
+
+ General Components
+ {% include 'styleguide/svg/arrow.svg' %}
+
+
+ {% for component in site.components %}
+ {% if component.type == 'general' %}
+ {{ component.title }}
+
+
+
+
+ {% if page.title %}
+
+ {% endif %}
+
+ {% block pageContent %}
+ {{ page.content }}
+ {% endblock %}
+
+ {% if page.drupal_theme_paths or page.dev_notes or page.changelog %}
+
+ Developer Notes
+
+
+ {% if page.dev_notes %}
+
Notes
+ {% for dev_note in page.dev_notes %}
+
+ {{ dev_note }}
+
+ {% endfor %}
+ {% endif %}
+ {% if page.drupal_theme_paths %}
+
Drupal Theme Paths
+
+ {% for drupal_theme_path in page.drupal_theme_paths %}
+ {{drupal_theme_path}}
+ {% endfor %}
+
+ {% endif %}
+ {% if page.changelog %}
+
Changelog
+ {% for change_log_entry in page.changelog %}
+
+ {{ change_log_entry.date }} - {{ change_log_entry.log }}
+
+ {% endfor %}
+ {% endif %}
+
+ {% endif %}
+
+
+
+
+
+ {% block content_wrapper %}
+ {% block content %}
+ {{ page.content }}
+ {% endblock %}
+ {% endblock %}
+
+
+
+
Copyright (c) 2017 Palantir.net
+
+
+
+
+
Elements
+
Elements are the foundation of the system. Simply using typography and color, well designed Elements can begin to express the site's personality.
+
+ {% if page.title %}
+
+ {% endif %}
+
+ {% block pageContent %}
+ {{ page.content }}
+ {% endblock %}
+
+
+
+
+
Copyright (c) {{ "now"|date("Y") }} Palantir.net
+
+
Skip to Main Content
+
+ {% include 'site-header.twig' %}
+
+
+
+ {% block content_wrapper %}
+ {% block content %}
+ {{ page.content }}
+ {% endblock %}
+ {% endblock %}
+
+
+ {{ include('footer.twig') }}
+
+ {{ include("scripts.html") }}
+
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/_init.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_init.scss
new file mode 100644
index 0000000..c272f0a
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_init.scss
@@ -0,0 +1,127 @@
+//
+// Initialization partial
+//
+// To make it easier to use all variables and mixins in any Sass file in this
+// theme, each .scss file has a @import "init" declaration. And this _init.scss
+// file is in charge of importing all the other partials needed for the theme.
+//
+// This initialization partial is organized in this way:
+// - First we set any shared Sass variables.
+// - Next we import Compass plug-ins (Sass mixin libraries).
+// - Last we define our custom mixins for this theme.
+//
+
+
+// =============================================================================
+// Variables
+// =============================================================================
+
+// Support the same browsers as normalize.css v3.
+$support-for: (
+ ie: 9,
+ '*': -4,
+);
+
+// Compass' vertical_rhythm extension is a powerful tool to set up a vertical
+// rhythm for your entire page. You can see some of its mixins and functions in
+// use in the normalize.scss file.
+// @see http://compass-style.org/reference/compass/typography/vertical_rhythm/
+
+$base-font-size: 16px; // The font size set on the root html element.
+$base-line-height: 24px; // This line-height determines the basic unit of vertical rhythm.
+
+// Modular Scale
+// Major Third: 16px @ 1:1.25
+$xxl-heading: 2.44 * $base-font-size;
+$xl-heading: 2 * $base-font-size;
+$lg-heading: 1.85 * $base-font-size;
+$md-heading: 1.5 * $base-font-size;
+$sm-heading: 1.25 * $base-font-size;
+$xs-heading: 1.15 * $base-font-size;
+$text: 1 * $base-font-size;
+$sm-text: .9 * $base-font-size;
+$label: .8 * $base-font-size;
+$xs-text: .7 * $base-font-size;
+$crumb: .6 * $base-font-size;
+
+$h1-font-size: $xl-heading;
+$h2-font-size: $lg-heading;
+$h3-font-size: $md-heading;
+$h4-font-size: $sm-heading;
+$h5-font-size: $text;
+$h6-font-size: $label;
+
+// The following font family declarations are based on the Microsoft core web
+// fonts which are common fonts available on most computer systems. The DejaVu
+// and Nimbus Sans fonts are commonly available on Linux systems where the MS
+// fonts are less common. Tahoma and Helvetica are also widely available.
+//
+// A user's web browser will look at the comma-separated list and will
+// attempt to use each font in turn until it finds one that is available
+// on the user's computer. The final "generic" font (sans-serif, serif or
+// monospace) hints at what type of font to use if the web browser doesn't
+// find any of the fonts in the list.
+
+// First, let's create some font stacks.
+$times-new-roman: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
+$times: Times, "Times New Roman", Georgia, "DejaVu Serif", serif;
+$georgia: Georgia, "Times New Roman", "DejaVu Serif", serif;
+$verdana: Verdana, Tahoma, "DejaVu Sans", sans-serif;
+$tahoma: Tahoma, Verdana, "DejaVu Sans", sans-serif;
+$helvetica: Helvetica, Arial, "Nimbus Sans L", sans-serif;
+$arial: Arial, Helvetica, "Nimbus Sans L", sans-serif;
+
+// For an explanation of why "sans-serif" is at the end of this list, see
+// http://meyerweb.com/eric/thoughts/2510/02/12/fixed-monospace-sizing/
+$courier: "Courier New", "DejaVu Sans Mono", monospace, sans-serif;
+
+// Now create some variables for the font stacks we want to use on this site.
+$base-font-family: $helvetica; // The font family set on the html element.
+$font-monospace: $courier;
+
+// Sass color variables, etc.
+$black: #222222;
+$gray-dark: #4c4c4b;
+$gray-medium: #999898;
+$gray-light: #d8d8d8;
+$off-white: #f2f2f2;
+$white: #ffffff;
+$white-60: rgba($white, .6);
+$white-30: rgba($white, .3);
+$yellow: #ff0;
+
+// Use above sass variables to define defaults in normalize.scss
+/* body */
+$text-color: $black;
+$background-color: $white;
+/* Link (a:) */
+$link-color: $gray-dark;
+$link-hover: $gray-dark;
+
+///////////////////////////////////////////////////////////
+
+// Breakpoint Variables
+$bp0: 400px;
+$bp1: 600px;
+$bp2: 900px;
+$bp3: 1100px;
+$bp4: 1400px;
+
+// Vertical spacing unit
+$slug: rhythm(8);
+
+// The amount lists, blockquotes and comments are indented.
+$indent-amount: 1em;
+
+
+// =============================================================================
+// Partials to be shared with all .scss files.
+// =============================================================================
+
+// Add the Singularity Grids responsive layout mixins.
+@import "../../node_modules/butler/node_modules/singularitygs/stylesheets/singularitygs";
+// Add the Breakpoint mixin.
+@import "../../node_modules/butler/node_modules/breakpoint-sass/stylesheets/breakpoint";
+
+// Now we add our custom helper mixins.
+@import "mixins";
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/_mixins.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_mixins.scss
new file mode 100644
index 0000000..41cf067
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_mixins.scss
@@ -0,0 +1,107 @@
+/**
+ * @file
+ * Define your custom Sass mixins and extends here.
+ * @see http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#defining_a_mixin
+ */
+
+/* ==========================================================================
+ Typography grooming extends
+ ========================================================================== */
+
+/* Tight tracking */
+%track-in {
+ letter-spacing: -.0125em;
+}
+
+/* Open tracking */
+%track-out {
+ letter-spacing: .1em;
+}
+
+/* Style larger text with a tighter tracking, change weight, etc. */
+%display-type {
+ @extend %track-in;
+ font-weight: 700;
+}
+
+/* Style all caps with a slightly open tracking. */
+%allcaps {
+ @extend %track-out;
+ text-transform: uppercase;
+}
+
+/* Unstyle a list */
+%list--simple {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+
+/* ==========================================================================
+ Clearfix extend
+ ========================================================================== */
+
+/**
+ * Applies a clearfix ruleset using a placeholder selector. Placeholder selectors
+ * do not get compiled uless they are called - removing the nesting issues that
+ * can otherwise occur with extends.
+ */
+
+.clearfix,
+%clearfix {
+ &:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+}
+
+
+/* ==============================================================
+ Visually hidden extend
+ ============================================================== */
+
+/**
+ * Element-invisible as defined by snook.ca
+ * @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ */
+
+.element-invisible,
+%element-invisible {
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ @if support-legacy-browser(ie, '7') {
+ clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
+ }
+ clip: rect(1px, 1px, 1px, 1px);
+}
+
+/* Turns off the element-invisible effect. */
+%element-invisible-off {
+ position: static !important;
+ clip: auto;
+ height: auto;
+ width: auto;
+ overflow: auto;
+}
+
+.element-focusable,
+%element-focusable {
+ @extend %element-invisible;
+
+ &:active,
+ &:focus {
+ @extend %element-invisible-off;
+ }
+}
+
+/* ==============================================================
+ CSS3 transition mixin
+ ============================================================== */
+
+@mixin trans($property: all, $timing: .3s, $easing: ease) {
+ transition: $property $timing $easing;
+}
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/_normalize.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_normalize.scss
new file mode 100644
index 0000000..ca8f6f9
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_normalize.scss
@@ -0,0 +1,631 @@
+/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ */
+
+ *,
+ *:before,
+ *:after {
+ box-sizing: border-box;
+ }
+
+html {
+ // Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ // `em` units.
+ background: $background-color;
+ color: $text-color;
+ font-size: ($base-font-size / 16px) * 100%;
+ line-height: ($base-line-height / $base-font-size) * 1em;
+ font-family: $base-font-family; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ // Adjust font-size globally per breakpoint.
+ // As you adjust the percentage growth of font-size, translate
+ // to the value to the mixin adjust-font-size-to in the mixins
+ // file as a point value to maintain font-size across breakpoints.
+ @include breakpoint($bp2) {
+ font-size: ($base-font-size / 16px) * 110%;
+ }
+ @include breakpoint($bp3) {
+ font-size: ($base-font-size / 16px) * 120%;
+ }
+}
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+ margin: 0;
+}
+
+/* HTML5 display definitions
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE <10.
+ * Add the correct display in Edge, IE, and Firefox for `details` or `summary`.
+ * Add the correct display in IE for `main`.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/**
+ * Add the correct display in IE <10.
+ */
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+ @if support-for(ie, 7) {
+ *display: inline;
+ *zoom: 1;
+ }
+}
+
+/**
+ * Add the correct display and remove excess height in iOS 4-7.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Add the correct display in IE <11, Safari <8, and Firefox <22.
+ * 1. Add the correct display in IE.
+ */
+
+template, /* 1 */
+[hidden] {
+ display: none;
+}
+
+/* Links
+ ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+ @include trans();
+ background-color: transparent; /* 1 */
+ -webkit-text-decoration-skip: objects; /* 2 */
+ color: $link-color;
+ text-decoration: none;
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+ outline-width: 0;
+ color: $link-hover;
+ text-decoration: underline;
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Firefox <40.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+ font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+%monospace,
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ @if support-for(ie, 6) {
+ _font-family: 'courier new', monospace;
+ }
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android <4.4.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ // Set the font-size and line-height while keeping a proper vertical rhythm.
+ @include adjust-font-size-to($h1-font-size, 1.5);
+ // Set 1 unit of vertical rhythm on the top and bottom margins.
+ @include leader(1.25, $h1-font-size);
+ @include trailer(.5, $h1-font-size);
+}
+
+h2 {
+ @extend %display-type;
+ @include adjust-font-size-to($h2-font-size, 1.35);
+ @include leader(1.25, $h2-font-size);
+ @include trailer(.5, $h2-font-size);
+}
+
+h3 {
+ @extend %display-type;
+ @include adjust-font-size-to($h3-font-size, 1.15);
+ @include leader(1, $h3-font-size);
+ @include trailer(.5, $h3-font-size);
+}
+
+h4 {
+ @include adjust-font-size-to($h4-font-size, 1.05);
+ @include leader(1, $h4-font-size);
+ @include trailer(.5, $h4-font-size);
+}
+
+h5 {
+ @include adjust-font-size-to($h5-font-size, .85);
+ @include leader(.75, $h5-font-size);
+ @include trailer(.25, $h5-font-size);
+}
+
+h6 {
+ @extend %allcaps;
+ @include adjust-font-size-to($h6-font-size, .65);
+ @include leader(.75, $h6-font-size);
+ @include trailer(.25, $h6-font-size);
+}
+
+
+/**
+ * Add the correct background and color in IE <10.
+ */
+
+mark {
+ background-color: $yellow;
+ color: $black;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 70%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE <11.
+ */
+
+img {
+ // Responsive images
+ max-width: 100%;
+ // Remove border when inside `a` element in IE 8/9.
+ border: 0;
+ @if support-for(ie, 7) {
+ /* Improve image quality when scaled in IE 7. */
+ -ms-interpolation-mode: bicubic;
+ }
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+
+/**
+ * Set 1 unit of vertical rhythm on the top and bottom margin.
+ */
+
+blockquote {
+ margin: rhythm(1);
+}
+
+/**
+ * Address margins set differently in IE 6/7.
+ */
+
+dl,
+menu,
+ol,
+ul {
+ margin: rhythm(.25) 0;
+}
+
+/**
+ * Turn off margins on nested lists.
+ */
+
+ol,
+ul {
+ ol,
+ ul {
+ margin: 0;
+ }
+}
+
+
+dd {
+ margin: 0 0 0 $indent-amount;
+}
+
+/**
+ * Address paddings set differently in IE 6/7.
+ */
+
+menu,
+ol,
+ul {
+ padding: 0 0 0 $indent-amount;
+}
+
+
+@if support-for(ie, 7) {
+ /**
+ * Correct list images handled incorrectly in IE 7.
+ */
+
+ nav ul,
+ nav ol {
+ list-style: none;
+ list-style-image: none;
+ }
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+ margin: rhythm(1);
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * Set 1 unit of vertical rhythm on the top and bottom margin.
+ */
+
+p,
+pre {
+ margin: 0 0 rhythm(.7);
+}
+
+
+pre {
+ @extend %monospace;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * Known issues:
+ * - By default, Chrome on OS X and Safari on OS X allow very limited styling of
+ * select, unless a border property is set. The default font weight on
+ * optgroup elements cannot safely be changed in Chrome on OSX and Safari on
+ * OS X.
+ * - It is recommended that you do not style checkbox and radio inputs as
+ * Firefox's implementation does not respect box-sizing, padding, or width.
+ * - Certain font size values applied to number inputs cause the cursor style of
+ * the decrement button to change from default to text.
+ * - The search input is not fully stylable by default. In Chrome and Safari on
+ * OSX/iOS you can't control font, padding, border, or background. In Chrome
+ * and Safari on Windows you can't control border properly. It will apply
+ * border-width but will only show a border color (which cannot be controlled)
+ * for the outer 1px of that border. Applying -webkit-appearance: textfield
+ * addresses these issues without removing the benefits of search inputs (e.g.
+ * showing past searches). Safari (but not Chrome) will clip the cancel button
+ * on when it has padding (and textfield appearance).
+ */
+
+@if support-for(ie, 7) {
+ /**
+ * Correct margin displayed oddly in IE 6/7.
+ */
+
+ form {
+ margin: 0;
+ }
+}
+
+/**
+ * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7
+ * 4. Improve appearance and consistency with IE 6/7.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font: inherit; /* 1 */
+ margin: 0; /* 2 */
+ @if support-for(ie, 7) {
+ *font-family: $base-font-family; /* 3 */
+ *vertical-align: middle; /* 4 */
+ }
+}
+
+/**
+ * Show the overflow in IE.
+ */
+
+button {
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ * controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+
+ /**
+ * Remove the inner border and padding in Firefox.
+ */
+
+ &::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+ }
+
+ /**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+ &:-moz-focusring {
+ outline: 1px dotted ButtonText;
+ }
+}
+
+/**
+ * Show the overflow in Edge.
+ */
+
+input {
+ overflow: visible;
+ @if support-for(firefox, 29) {
+ // Firefox sets `line-height` using `!important` in the UA stylesheet.
+ line-height: normal;
+ }
+}
+
+/**
+ * 1. Add the correct box sizing in IE <11.
+ * 2. Remove the padding in IE <11.
+ * 3. Remove excess padding in IE 7.
+ * Known issue: excess padding remains in IE 6.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+ @if support-for(ie, 7) {
+ *height: 13px; /* 3 */
+ *width: 13px; /* 3 */
+ }
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+
+ /**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+ */
+
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-decoration {
+ -webkit-appearance: none;
+ }
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+ color: inherit;
+ opacity: 0.54;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+ border: 1px solid $white-60;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ * 4. Correct alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ white-space: normal; /* 1 */
+ color: inherit; /* 2 */
+ padding: 0; /* 3 */
+ @if support-for(ie, 7) {
+ *margin-left: -7px; /* 4 */
+ }
+}
+
+/**
+ * Restore the font weight unset by a previous rule.
+ */
+
+optgroup {
+ font-weight: bold;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+ overflow: auto;
+}
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss
new file mode 100644
index 0000000..847d7f6
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss
@@ -0,0 +1,39 @@
+/**
+ * @file
+ * Define print styles here.
+ */
+@media print {
+ body, .container {
+ width: 100%;
+ margin: 0;
+ float: none;
+ background: #fff url(none);
+ }
+
+ // Hide things you don't want to print
+ .header, .footer, .rail {
+ display: none;
+ }
+
+ // adjust fonts
+ body {
+ font: 1em $georgia;
+ color: #000;
+ }
+
+ h1,h2,h3,h4,h5,h6 {
+ font-family: $helvetica;
+ color: #000;
+ }
+
+ // Links
+ a:link, a:visited {
+ color: #00c;
+ font-weight: bold;
+ text-decoration: underline;
+ }
+
+ a:link:after, a:visited:after {
+ content: " (" attr(href) ") ";
+ }
+}
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/_support-for.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_support-for.scss
new file mode 100644
index 0000000..6275f0d
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_support-for.scss
@@ -0,0 +1,64 @@
+// Support the last 4 versions of all browsers except IE.
+$support-for: (
+ chrome: -4,
+ edge: -4,
+ firefox: -4,
+ ie: 9,
+ opera: -4,
+ safari: -4,
+ '*': -4,
+) !default;
+
+// Set the current version number for all browsers. As of: 2016-04-30
+$support-for-current-browser-version: (
+ chrome: 50, // https://en.wikipedia.org/wiki/Google_Chrome_release_history
+ edge: 25, // https://en.wikipedia.org/wiki/Microsoft_Edge
+ firefox: 46, // https://en.wikipedia.org/wiki/Firefox_release_history
+ ie: 11, // https://en.wikipedia.org/wiki/Internet_Explorer_versions
+ opera: 36, // https://en.wikipedia.org/wiki/Opera_(web_browser)
+ safari: 9, // https://en.wikipedia.org/wiki/Safari_version_history
+) !default;
+
+
+// support-for()
+//
+// Determines if the project has declared a minimum supported version number for
+// the specified browser.
+//
+// If configured, this is a wrapper function that uses Compass'
+// support-legacy-browser().
+// @see http://compass-style.org/reference/compass/support/#function-support-legacy-browser
+//
+@function support-for($browser, $version) {
+ // Ensure $version is an integer (or null).
+ @if not (type-of($version) == "null" or type-of($version) == "number" and round($version) == $version) {
+ @error "The $version parameter of support-for() must be an integer; #{type-of($version)} given.";
+ }
+
+ // Check against declared minimums.
+ $min-version: null;
+ @if map-has-key($support-for, $browser) {
+ $min-version: map-get($support-for, $browser);
+ }
+ @else if map-has-key($support-for, '*') {
+ $min-version: map-get($support-for, '*');
+ }
+
+ // Ensure $min-version is an integer (or null).
+ @if type-of($min-version) != "null" and type-of($min-version) != "number" {
+ @error "$support-for: (#{$browser}: #{$min-version}) must be set to an integer (or null); #{$min-version} is a #{type-of($min-version)}.";
+ }
+ @elseif type-of($min-version) == "number" and round($min-version) != $min-version {
+ @error "$support-for: (#{$browser}: #{$min-version}) must be set to an integer (or null); #{$min-version} is not an integer.";
+ }
+
+ // Negative $min-version means "X most recent versions".
+ @if type-of($min-version) == "number" and $min-version < 0 {
+ @if not map-has-key($support-for-current-browser-version, $browser) {
+ @error "#{$browser} not found in $support-for-current-browser-version map; it must be set to an integer.";
+ }
+ $min-version: map-get($support-for-current-browser-version, $browser) + $min-version + 1;
+ }
+
+ @return if(($min-version and ($version >= $min-version)), true, false);
+}
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/README.md b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/README.md
new file mode 100644
index 0000000..2b1883b
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/README.md
@@ -0,0 +1,4 @@
+components
+==========
+
+Put your component .scss files here.
\ No newline at end of file
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_buttons.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_buttons.scss
new file mode 100644
index 0000000..d2be7cf
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_buttons.scss
@@ -0,0 +1,51 @@
+/**
+ * @file
+ * Define the Button styles.
+ *
+ * @copyright Copyright (c) 2017 Palantir.net
+ */
+
+%button,
+.button,
+button,
+input[type='submit'],
+input[type='button'] {
+ @include adjust-font-size-to($label);
+ display: inline-block;
+ background-color: $gray-dark;
+ color: $white;
+ border: 0;
+ border-radius: 0;
+ padding: 6px 16px;
+
+ &:link,
+ &:visited {
+ color: $white;
+ }
+
+ &:active,
+ &:hover,
+ &:focus {
+ background-color: $gray-medium;
+ transition: background-color .5s ease;
+ text-decoration: none;
+ }
+}
+
+input[type='reset'],
+.button--reset,
+.button--gray,
+.button--gray[type="submit"],
+.button--gray[type="button"] {
+ @extend %button;
+ background-color: $gray-dark;
+
+ &:active,
+ &:hover,
+ &:focus {
+ background-color: $gray-medium;
+ }
+}
+
+
+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_forms.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_forms.scss
new file mode 100644
index 0000000..8fee643
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_forms.scss
@@ -0,0 +1,162 @@
+/**
+ * @file
+ * Define the forms styles.
+ *
+ * @copyright Copyright (c) 2017 Palantir.net
+ */
+
+.form-row {
+ @extend %clearfix;
+}
+
+.button--container {
+ margin: 24px 0;
+}
+
+.input-wrapper {
+ box-sizing: border-box;
+ width: 100%;
+ margin-bottom: 24px;
+}
+
+.input-wrapper--half {
+ box-sizing: border-box;
+ width: 100%;
+ margin-bottom: 24px;
+
+ @include breakpoint($bp1) {
+ width: 50%;
+ float: left;
+
+ &:first-child {
+ padding-right: 12px;
+ }
+
+ &:last-child {
+ padding-left: 12px;
+ }
+ }
+}
+
+label,
+legend {
+ @include adjust-font-size-to($label, 1);
+ color: $gray-dark;
+ margin-bottom: rhythm(.25);
+}
+
+::-webkit-input-placeholder { /* WebKit browsers */
+ color: $gray-dark;
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+ color: $gray-dark;
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+ color: $gray-dark;
+}
+:-ms-input-placeholder { /* Internet Explorer 10+ */
+ color: $gray-dark;
+}
+
+// input styles
+input[type="text"],
+input[type="email"],
+input[type="search"],
+input[type="url"],
+input[type="tel"],
+input[type="number"],
+input[type="date"],
+input[type="time"],
+input[type="month"],
+input[type="week"],
+input[type="range"],
+input[type="datetime"],
+input[type="datetime-local"] {
+ width: 100%;
+ outline: 0;
+ border: 1px solid $gray-light;
+ background-color: transparent;
+ box-sizing: border-box;
+ color: $black;
+ padding: 8px;
+
+ &:active,
+ &:hover,
+ &:focus {
+ border-color: $gray-dark;
+ transition: border-color .5s ease;
+ }
+}
+
+input[type="color"] {
+ display: block;
+ width: 100%;
+}
+
+select {
+ width: 100%;
+ outline: 0;
+ border-radius: 0;
+ border: 0;
+ border-bottom: 3px solid transparent;
+ box-sizing: border-box;
+ color: $black;
+ appearance: none;
+ background: url("data:image/svg+xml;utf8, or value to any another.
+//
+// @param $length
+// A css or value
+//
+// @param $to-unit
+// String matching a css unit keyword, e.g. 'em', '%', etc.
+//
+// @param $from-context
+// When converting from relative units, the absolute length (in px) to
+// which $length refers (e.g. for $lengths in em units, would normally be the
+// font-size of the current element).
+//
+// @param $to-context
+// For converting to relative units, the absolute length in px to which the
+// output value will refer. Defaults to the same as $from-context, since it is
+// rarely needed.
+@function convert-length(
+ $length,
+ $to-unit,
+ $from-context: $base-font-size,
+ $to-context: $from-context
+) {
+
+ $from-unit: unit($length);
+
+ // Optimize for cases where `from` and `to` units are accidentally the same.
+ @if $from-unit == $to-unit { @return $length; }
+
+ // Context values must be in px so we can determine a conversion ratio for
+ // relative units.
+ @if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; }
+ @if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; }
+
+ // Convert input length to pixels
+ $px-length: $length;
+
+ @if $from-unit != 'px' {
+ // Convert relative units using the from-context parameter.
+ @if $from-unit == 'em' { $px-length: $length * $from-context / 1em }
+ @else if $from-unit == 'rem' { $px-length: $length * $base-font-size / 1rem }
+ @else if $from-unit == '%' { $px-length: $length * $from-context / 100% }
+ @else if $from-unit == 'ex' { $px-length: $length * $from-context / 2ex }
+ // Convert absolute units using Sass' conversion table.
+ @else if $from-unit == 'in' or
+ $from-unit == 'mm' or
+ $from-unit == 'cm' or
+ $from-unit == 'pt' or
+ $from-unit == 'pc' { $px-length: 0px + $length }
+ // Certain units can't be converted.
+ @else if $from-unit == 'ch' or
+ $from-unit == 'vw' or
+ $from-unit == 'vh' or
+ $from-unit == 'vmin' {
+ @warn "#{$from-unit} units can't be reliably converted; Returning original value.";
+ @return $length;
+ }
+ @else {
+ @warn "#{$from-unit} is an unknown length unit. Returning original value.";
+ @return $length;
+ }
+ }
+
+ // Convert length in pixels to the output unit
+ $output-length: $px-length;
+ @if $to-unit != 'px' {
+ // Relative units
+ @if $to-unit == 'em' { $output-length: $px-length * 1em / $to-context }
+ @else if $to-unit == 'rem' { $output-length: $px-length * 1rem / $base-font-size }
+ @else if $to-unit == '%' { $output-length: $px-length * 100% / $to-context }
+ @else if $to-unit == 'ex' { $output-length: $px-length * 2ex / $to-context }
+ // Absolute units
+ @else if $to-unit == 'in' { $output-length: 0in + $px-length }
+ @else if $to-unit == 'mm' { $output-length: 0mm + $px-length }
+ @else if $to-unit == 'cm' { $output-length: 0cm + $px-length }
+ @else if $to-unit == 'pt' { $output-length: 0pt + $px-length }
+ @else if $to-unit == 'pc' { $output-length: 0pc + $px-length }
+ // Non-convertible units
+ @else if $to-unit == 'ch' or
+ $to-unit == 'vw' or
+ $to-unit == 'vh' or
+ $to-unit == 'vmin' {
+ @warn "#{$to-unit} units can't be reliably converted; Returning original value.";
+ @return $length;
+ }
+ @else {
+ @warn "#{$to-unit} is an unknown length unit. Returning original value.";
+ @return $length;
+ }
+ }
+
+ @return $output-length;
+}
+
+
+// @private Get the px/rem versions of a value.
+@function rem-fallback-values($value) {
+ $_return: (
+ px: $value,
+ rem: $value,
+ );
+
+ @if type-of($value) == number and not unitless($value) {
+ @if unit($value) == rem {
+ $_return: map-merge($_return, (
+ px: round(convert-length($value, px)),
+ ));
+ } @else if unit($value) == px {
+ $_return: map-merge($_return, (
+ px: round($value),
+ rem: convert-length($value, rem),
+ ));
+ }
+ }
+
+ @return $_return;
+}
+
+// @private Get the px/rem versions of a list (or nested lists).
+@function list-convert-rems($value) {
+ $_empty: (
+ px: (),
+ rem: (),
+ );
+ $_return: $_empty;
+ $_sep: null;
+
+ @if type-of($value) == list {
+ $_sep: list-separator($value);
+ @each $sub in $value {
+ $_this: list-convert-rems($sub);
+ $_return: (
+ px: append(map-get($_return, px), map-get($_this, px), $_sep),
+ rem: append(map-get($_return, rem), map-get($_this, rem), $_sep),
+ );
+ }
+ } @else {
+ $_this: rem-fallback-values($value);
+ $_return: map-merge($_return, $_this);
+ }
+
+ @return $_return;
+}
+
+
+// Output a given style rule containing rem values along with an (optional)
+// fallback rule for older browsers (with rem values converted to px).
+//
+// @param $property
+// The css property name.
+//
+// @param $values
+// The value or list of values for the property.
+//
+// @param $use-px-fallback
+// [ true | false ]
+//
+@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
+
+ // get converted values.
+ $values: list-convert-rems($values);
+ $px-values: map-get($values, px);
+ $values: map-get($values, rem);
+
+ // Use pixel fallback for browsers that don't understand rem units.
+ @if $use-px-fallback and $px-values != $values {
+ #{$property}: $px-values;
+ }
+
+ // Use rem values for everyone else (overrides pixel values).
+ #{$property}: $values;
+}
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_vertical_rhythm.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_vertical_rhythm.scss
new file mode 100755
index 0000000..bcd700a
--- /dev/null
+++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_vertical_rhythm.scss
@@ -0,0 +1,309 @@
+/**
+ * @file
+ * Libsass-compatible port of Compass' vertical-rhythm helpers
+ *
+ * @see https://github.com/neoeno/libsass-compass-vertical-rhythm
+ */
+
+@import "grid_background";
+@import "units";
+
+// The default font size for all text in pixels
+$base-font-size: 16px !default;
+
+// The distance between text baselines (vertical rhythm) in pixels.
+$base-line-height: 24px !default;
+
+// The length unit in which to output rhythm values.
+// Supported values: px, em, rem. Percent units can't be used since they
+// make calculating padding and margins impractical, and percentage borders are
+// not valid or supported in css.
+$rhythm-unit: 'em' !default;
+
+// Whether to output fallback values in px when using rem as the rhythm-unit.
+$rem-with-px-fallback: true !default;
+
+// Default values for rhythm borders properties.
+// Supports style alone eg. `solid` or list of style and color eg. `solid #aaa`;
+$default-rhythm-border-width: 1px !default;
+$default-rhythm-border-style: solid !default;
+
+// Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function
+// to round the line height to the nearest half line height instead of the
+// nearest integral line height to avoid large spacing between lines.
+$round-to-nearest-half-line: false !default;
+
+// Ensure there is at least this many pixels
+// of vertical padding above and below the text.
+$min-line-padding: 2px !default;
+
+// The leader is the amount of whitespace in a line.
+// It might be useful in your calculations.
+$base-leader: convert-length($base-line-height - $base-font-size, $rhythm-unit, $base-font-size);
+
+// The half-leader is the amount of whitespace above and below a line.
+// It might be useful in your calculations.
+$base-half-leader: $base-leader / 2;
+
+// @private Whether the rhythm output is in absolute units (px) or not (em, rem)
+$relative-font-sizing: if($rhythm-unit == px, false, true);
+
+// Should we support IE6 by setting base font size?
+$compass-rhythm-support-ie6: false;
+
+// Validate units
+@if unit($base-font-size) != 'px' { @warn "$base-font-size must resolve to a pixel unit."; }
+@if unit($base-line-height) != 'px' { @warn "$base-line-height must resolve to a pixel unit."; }
+@if $rhythm-unit != 'px' and $rhythm-unit != 'em' and $rhythm-unit != 'rem' {
+ @warn "$rhythm-unit must be `px`, `em` or `rem`.";
+}
+
+
+// Calculate rhythm units.
+@function rhythm($lines: 1, $font-size: $base-font-size, $offset: 0) {
+ $rhythm: convert-length($lines * $base-line-height - $offset, $rhythm-unit, $font-size);
+ @if unit($rhythm) == px {
+ $rhythm: floor($rhythm);
+ }
+ @return $rhythm;
+}
+
+// Calculate the minimum multiple of rhythm units needed to contain the font-size.
+@function lines-for-font-size($font-size) {
+ $lines: if($round-to-nearest-half-line,
+ ceil(2 * $font-size / $base-line-height) / 2,
+ ceil($font-size / $base-line-height));
+ // If lines are cramped include some extra lead.
+ @if ($lines * $base-line-height - $font-size) < ($min-line-padding * 2) {
+ $lines: $lines + if($round-to-nearest-half-line, 0.5, 1);
+ }
+ @return $lines;
+}
+
+
+// @private Outputs rhythm values. For rem units, outputs pixel fallbacks
+// by default.
+@mixin output-rhythm($property, $values) {
+ @if $rhythm-unit == rem and $rem-with-px-fallback {
+ @include rem($property, $values);
+ }
+ @else {
+ $output: ();
+ @each $value in $values {
+ @if unit($value) == px {
+ // Ensure all pixel values are rounded to the nearest pixel.
+ $output: join($output, round($value));
+ }
+ @else {
+ $output: join($output, $value);
+ }
+ }
+ #{$property}: $output;
+ }
+}
+
+// Establishes a font baseline for the given font-size.
+@mixin establish-baseline($font-size: $base-font-size) {
+ $relative-size: 100% * ($font-size / $browser-default-font-size);
+
+ @if $compass-rhythm-support-ie6 and (not $relative-font-sizing) {
+ // IE 6 refuses to resize fonts set in pixels and it weirdly resizes fonts
+ // whose root is set in ems. So we set the root font size in percentages of
+ // the default font size, even if we are using absolute sizes elsewhere.
+ * html { font-size: $relative-size; }
+ }
+ html {
+ font-size: if($relative-font-sizing, $relative-size, $font-size);
+
+ // Webkit has a bug that prevents line-height being set in rem on ;
+ // To work around this and simplify output, we can set initial line-height
+ // in ems for all relative rhythm units, even when $rhythm-unit is `rem`.
+ @if $relative-font-sizing {
+ line-height: convert-length($base-line-height, em);
+ }
+ @else {
+ line-height: round($base-line-height);
+ }
+ }
+}
+
+// Resets the baseline to 1 rhythm unit
+// Does not work on elements whose font-size is different from $base-font-size.
+//
+// @deprecated This mixin will be removed in the next release.
+// Please use `adjust-leading-to(1)` instead.
+@mixin reset-baseline($font-size: $base-font-size) {
+ @include adjust-leading-to(1, $font-size);
+}
+
+// Show a background image that can be used to debug your alignments.
+// As this is a development feature, this mixin never outputs pixel fallbacks
+// for rem output.
+// Include the $img argument if you would rather use your own image than the
+// Compass default gradient image.
+@mixin debug-vertical-alignment($img: false) {
+ @if $img {
+ background: image-url($img);
+ }
+ @else {
+ @include baseline-grid-background(if($round-to-nearest-half-line, rhythm(1/2), rhythm(1)));
+ }
+}
+
+// Adjust a block to have a different font size and line height to maintain the
+// rhythm. $lines specifies how many multiples of the baseline rhythm each line
+// of this font should use up. It does not have to be an integer, but it
+// defaults to the smallest integer that is large enough to fit the font.
+// Use $from-size to adjust from a font-size other than the base font-size.
+@mixin adjust-font-size-to($to-size, $lines: auto, $from-size: $base-font-size) {
+ $to-size: convert-length($to-size, px, $from-size);
+ @if $lines == auto {
+ $lines: lines-for-font-size($to-size);
+ }
+ @include output-rhythm(font-size, convert-length($to-size, $rhythm-unit, $from-size));
+ @include adjust-leading-to($lines, $to-size);
+}
+
+// Adjust a block to have different line height to maintain the rhythm.
+// $lines specifies how many multiples of the baseline rhythm each line of this
+// font should use up. It does not have to be an integer, but it defaults to the
+// smallest integer that is large enough to fit the font.
+@mixin adjust-leading-to($lines, $font-size: $base-font-size) {
+ @include output-rhythm(line-height, rhythm($lines, $font-size));
+}
+
+// Apply leading whitespace. The $property can be margin or padding.
+@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
+ @include output-rhythm(#{$property}-top, rhythm($lines, $font-size));
+}
+
+// Apply leading whitespace as padding.
+@mixin padding-leader($lines: 1, $font-size: $base-font-size) {
+ @include output-rhythm(padding-top, rhythm($lines, $font-size));
+}
+
+// Apply leading whitespace as margin.
+@mixin margin-leader($lines: 1, $font-size: $base-font-size) {
+ @include output-rhythm(margin-top, rhythm($lines, $font-size));
+}
+
+// Apply trailing whitespace. The $property can be margin or padding.
+@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
+ @include output-rhythm(#{$property}-bottom, rhythm($lines, $font-size));
+}
+
+// Apply trailing whitespace as padding.
+@mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
+ @include output-rhythm(padding-bottom, rhythm($lines, $font-size));
+}
+
+// Apply trailing whitespace as margin.
+@mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
+ @include output-rhythm(margin-bottom, rhythm($lines, $font-size));
+}
+
+// Shorthand mixin to apply whitespace for top and bottom margins and padding.
+@mixin rhythm(
+ $leader: 1,
+ $padding-leader: 0,
+ $padding-trailer: $padding-leader,
+ $trailer: $leader,
+ $font-size: $base-font-size
+) {
+ @include leader($leader, $font-size);
+ @include padding-leader($padding-leader, $font-size);
+ @include padding-trailer($padding-trailer, $font-size);
+ @include trailer($trailer, $font-size);
+}
+
+// Shorthand mixin to apply whitespace for top and bottom margins.
+@mixin rhythm-margins(
+ $leader: 1,
+ $trailer: $leader,
+ $font-size: $base-font-size
+) {
+ @include leader($leader, $font-size);
+ @include trailer($trailer, $font-size);
+}
+
+// Shorthand mixin to apply whitespace for top and bottom padding.
+@mixin rhythm-padding(
+ $padding-leader: 1,
+ $padding-trailer: $padding-leader,
+ $font-size: $base-font-size
+) {
+ @include padding-leader($padding-leader, $font-size);
+ @include padding-trailer($padding-trailer, $font-size);
+}
+
+// Apply a border and whitespace to any side without destroying the vertical
+// rhythm. The whitespace must be greater than the width of the border.
+@mixin apply-side-rhythm-border(
+ $side,
+ $width: $default-rhythm-border-width,
+ $lines: 1,
+ $font-size: $base-font-size,
+ $border-style: $default-rhythm-border-style
+) {
+ // If applying borders to all sides, use shorthand properties
+ $border-prop: if($side == all, border, border-#{$side});
+ @include output-rhythm(#{$border-prop}-width, convert-length($width, $rhythm-unit, $font-size));
+ #{$border-prop}-style: nth($border-style, 1);
+ @if type-of($border-style) == list and length($border-style) > 1 {
+ #{$border-prop}-color: nth($border-style, 2);
+ }
+ $padding-prop: if($side == all, padding, padding-#{$side});
+ @include output-rhythm(#{$padding-prop}, rhythm($lines, $font-size, $offset: $width));
+}
+
+// Apply a leading border.
+// $border-style and $width are deprecated and will be removed in a future version of Compass.
+@mixin leading-border(
+ $width: $default-rhythm-border-width,
+ $lines: 1,
+ $font-size: $base-font-size,
+ $border-style: $default-rhythm-border-style
+) {
+ @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
+}
+
+// Apply a trailing border.
+@mixin trailing-border(
+ $width: $default-rhythm-border-width,
+ $lines: 1,
+ $font-size: $base-font-size,
+ $border-style: $default-rhythm-border-style
+) {
+ @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
+}
+
+// Apply both leading and trailing borders.
+@mixin horizontal-borders(
+ $width: $default-rhythm-border-width,
+ $lines: 1,
+ $font-size: $base-font-size,
+ $border-style: $default-rhythm-border-style
+) {
+ @include leading-border($width, $lines, $font-size, $border-style);
+ @include trailing-border($width, $lines, $font-size, $border-style);
+}
+
+// Alias for `horizontal-borders` mixin.
+@mixin h-borders(
+ $width: $default-rhythm-border-width,
+ $lines: 1,
+ $font-size: $base-font-size,
+ $border-style: $default-rhythm-border-style
+) {
+ @include horizontal-borders($width, $lines, $font-size, $border-style);
+}
+
+// Apply borders and whitespace equally to all sides.
+@mixin rhythm-borders(
+ $width: $default-rhythm-border-width,
+ $lines: 1,
+ $font-size: $base-font-size,
+ $border-style: $default-rhythm-border-style
+) {
+ @include apply-side-rhythm-border(all, $width, $lines, $font-size, $border-style);
+}