From 70bf0c7221626d0b75b945705b82d384da82fb07 Mon Sep 17 00:00:00 2001 From: Ashley Cyborski Date: Mon, 6 Nov 2017 16:46:27 -0600 Subject: [PATCH 1/2] create new spress template --- STLYEGUIDE_SPRESS_UPDATE/composer.json | 14 + STLYEGUIDE_SPRESS_UPDATE/config.yml | 35 + STLYEGUIDE_SPRESS_UPDATE/config_dev.yml | 4 + STLYEGUIDE_SPRESS_UPDATE/config_github.yml | 3 + STLYEGUIDE_SPRESS_UPDATE/gitignore | 8 + .../src/content/assets/favicon.ico | Bin 0 -> 370070 bytes .../src/content/assets/imgs/fpo-16x9.jpg | Bin 0 -> 8953 bytes .../src/content/assets/imgs/fpo-1x1.jpg | Bin 0 -> 32180 bytes .../src/content/assets/js/site.js | 20 + .../assets/js/styleguide/styleguide-nav.js | 52 ++ .../content/assets/libraries/styleguide.js | 31 + .../src/content/components.html | 11 + .../inline/component-inline-image.html | 92 +++ .../inline/component-inline-video.html | 60 ++ .../src/content/elements.html | 10 + .../src/content/elements/element-buttons.html | 15 + .../elements/element-color-palette.html | 60 ++ .../src/content/elements/element-forms.html | 138 ++++ .../src/content/elements/element-grid.html | 163 +++++ .../content/elements/element-headings.html | 15 + .../src/content/elements/element-lists.html | 41 ++ .../content/elements/element-paragraph.html | 12 + .../elements/element-text-attributes.html | 64 ++ .../src/content/index.html | 26 + .../src/content/templates.html | 53 ++ .../src/includes/.gitkeep | 0 .../src/includes/checkbox.twig | 8 + .../src/includes/head.twig | 11 + .../src/includes/inline-image.twig | 14 + .../src/includes/inline-video.twig | 16 + .../src/includes/radio.twig | 8 + .../src/includes/scripts.html | 6 + .../styleguide/styleguide-description.html | 10 + .../styleguide/styleguide-heading.html | 7 + .../styleguide/styleguide-navigation.html | 18 + .../src/includes/styleguide/svg/arrow.svg | 7 + .../styleguide/svg/square-facebook.svg | 8 + .../styleguide/svg/square-linkedin.svg | 10 + .../styleguide/svg/square-twitter.svg | 11 + .../styleguide/svg/square-youtube.svg | 11 + .../src/layouts/comp.html | 3 + .../src/layouts/component.html | 88 +++ .../src/layouts/default.html | 28 + .../src/layouts/element.html | 53 ++ .../src/layouts/styleguide-default.html | 27 + .../src/layouts/styleguide-landing.html | 14 + .../src/layouts/template.html | 25 + STLYEGUIDE_SPRESS_UPDATE/src/sass/_init.scss | 127 ++++ .../src/sass/_mixins.scss | 107 +++ .../src/sass/_normalize.scss | 637 ++++++++++++++++++ STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss | 38 ++ .../src/sass/_support-for.scss | 64 ++ .../src/sass/components/README.md | 4 + .../src/sass/components/_buttons.scss | 65 ++ .../src/sass/components/_forms.scss | 163 +++++ .../src/sass/components/_inline.scss | 125 ++++ .../src/sass/grid-layouts/_l-1up.scss | 14 + .../src/sass/grid-layouts/_l-2up.scss | 49 ++ .../src/sass/grid-layouts/_l-33-66.scss | 24 + .../src/sass/grid-layouts/_l-3up.scss | 97 +++ .../src/sass/grid-layouts/_l-4up.scss | 65 ++ .../src/sass/grid-layouts/_l-66-33.scss | 24 + .../src/sass/grid-layouts/_l-6up.scss | 81 +++ .../src/sass/grid-layouts/_l-singularity.scss | 47 ++ .../src/sass/styleguide/_styleguide.scss | 410 +++++++++++ STLYEGUIDE_SPRESS_UPDATE/src/sass/styles.scss | 48 ++ .../vertical-rhythm/_grid_background.scss | 29 + .../src/sass/vertical-rhythm/_units.scss | 183 +++++ .../vertical-rhythm/_vertical_rhythm.scss | 309 +++++++++ 69 files changed, 4020 insertions(+) create mode 100644 STLYEGUIDE_SPRESS_UPDATE/composer.json create mode 100644 STLYEGUIDE_SPRESS_UPDATE/config.yml create mode 100644 STLYEGUIDE_SPRESS_UPDATE/config_dev.yml create mode 100644 STLYEGUIDE_SPRESS_UPDATE/config_github.yml create mode 100644 STLYEGUIDE_SPRESS_UPDATE/gitignore create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/assets/favicon.ico create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/assets/imgs/fpo-16x9.jpg create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/assets/imgs/fpo-1x1.jpg create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/assets/js/site.js create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/assets/js/styleguide/styleguide-nav.js create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/assets/libraries/styleguide.js create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/components.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-image.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-video.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/elements.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-buttons.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-color-palette.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-forms.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-grid.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-headings.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-lists.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-paragraph.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-text-attributes.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/index.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/templates.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/.gitkeep create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/checkbox.twig create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/inline-image.twig create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/inline-video.twig create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/radio.twig create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/scripts.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-description.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-heading.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-navigation.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/arrow.svg create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-facebook.svg create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-linkedin.svg create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-twitter.svg create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/square-youtube.svg create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/layouts/comp.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/layouts/component.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/layouts/default.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/layouts/element.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/layouts/styleguide-default.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/layouts/styleguide-landing.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/layouts/template.html create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/_init.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/_mixins.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/_normalize.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/_support-for.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/components/README.md create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_buttons.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_forms.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_inline.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-1up.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-2up.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-33-66.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-3up.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-4up.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-66-33.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-6up.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-singularity.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/styleguide/_styleguide.scss create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/sass/styles.scss create mode 100755 STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_grid_background.scss create mode 100755 STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_units.scss create mode 100755 STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_vertical_rhythm.scss 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/favicon.ico b/STLYEGUIDE_SPRESS_UPDATE/src/content/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..b20a05335f333d32ea46dd70e5253134c50e4c7c GIT binary patch literal 370070 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�l6YwvBCMTiIqE7bt5zPz3x7MqdK9WX?|7J^=KFdKbqtG)Bd@$cyb~ z83PIb>$`&XuQoElvA@j*AVY_7q$9WhJW=>_cOvJTQFwh?i{&8LNyeheM3Q;ivx zaa^DX_$NLEtIqdBGgueoZ;Xuj)oJ`oY{B9`%P}qb`zj{3vSITvzkXvKV&|PYu2*)r zck2-90k)NGKK9PPe2n>pn>pW@G_m7}`HLJ+}Xqn|etD_yg^v3FZ@bD*S3%c@4{%)Tc=JCl)0R zaEXKe)Z>77*NOcFs~)lV@0*j83I82=cKZ4p3qSU^uYXM6mza<~aXfqsgzG{B(&P)E z4Qa%ffL?1@^8P>(@h>)ep~C-zd!!Tttk?5~{een;%WJ#Ff8Kq6mQ$AYpK(5}qkX}@ z>Bw9ExgK(^#>EB#w$o`N^gtN%n0t==`CF}6%ecv*S?R|Fiim%~Y#ZhQjZ!)wg*^g+ zL-GBu)7Te1lC^)Y^NX8Lx#3^M__2;2$MuK)=$%&fcL%b+pG+T+Hl)#E|GRcQ?EePt zK|mU2?00z}mQY0e6K8_mYcl8qWb_U1WEf9$znt(d*vI;~*3aJje(R`9f&GCL<3s-@ z8Qx>vCyhue(ro;5v)7lp4)6&6AJzCz*ayJ(#MC;!V)*{l3uS|U<@3XKt!!9NImWtK znY)`2CSu{FoUd`7GigTJL60gwpj6`lMaF-m58w|~*62P!Tpa)mitm4gw$tK2#P!(| z+4FSol?DDehULVsHXeEle141ljC3A#0M`&4_M>;u7w~V=G%dM!V3F}}_5m(W)(5EX z`=(D`*ZIfO3uS?S^f|H4W&7uDeXB+H_cN0Ja<=cOwoT#zpe5H4w&^%PNyP&^gnzX! zKwX?~g~|K?eAjCa;B%eEsQ3@o{-+R2g0IT`xZ1HF2IutIIDdvQ08>9O9#C^hd+)Ko zd3_!B6X+m~ODP`c0sISwKf+x8;ql@Cz`Lv!IJ+3wXPKpJ|0$PP+tz)Of5iuw5{3o_Gy=o2H^RqS{c*DAl+=mbLYQWCv&6mz2O*vN>YX>)SpFtH5 zEP-#7cm)4~<&`GZsSEfgdxXpiR@LDC4vl~5H(2~9!awW~`}{}$>aXnc+cEwe^!elI z5Y-O=jgP+Ljdk2#uoPke9>Kq0d3!^s@-q(R`@RG6xESR21{0rtCT~IB3 z|KDo-OMk)QKfdi(e*gGqXKy<2`j$=mU5{4a4}HI)%yn=ctgu3(%$R+01x3` zFny=Oe<%{~i_8ZC_Mg-E7hPfT9|!-+_Tw8I$NuKeT+ipM;U6d%EOI-!Ujk{4^@1Pq zJ1Ac62Y3koGMDce;-7!OdWApaeACaJ zFOJ{C@c@2nfV{x`U{Ce|JcNJ2^u~rz^`69kL$JC+_6W!ED;oR6ygY019|QlCHO%qb zarjUEjdeZF9=+D@FRTt=EReM4zQVvizf)@Qj~JSPVfT3-rUO+c6aU!bcd$QDHB_Ak ztG=(_m41Tz{k;D!h4`QH`!Uvk`hq1NV^3Qf^DAawfI0wsi=V#WQH%%h8zbJ+0Uomd z#IIocdm8gYaZO_Xbr%0A?DeB;|IF=JqrL&M$9?3k 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 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/inline/component-inline-image.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-image.html new file mode 100644 index 0000000..77c8bf4 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-image.html @@ -0,0 +1,92 @@ +--- +layout: component +section: component +theme: default + +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/inline/component-inline-video.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-video.html new file mode 100644 index 0000000..007bbb2 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-video.html @@ -0,0 +1,60 @@ +--- +layout: component +section: component +theme: default + +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 + + + + + diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-color-palette.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-color-palette.html new file mode 100644 index 0000000..452efb8 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-color-palette.html @@ -0,0 +1,60 @@ +--- +layout: element +section: element + +title: Color Palette +description: The Palette outlines the colors used throughout the site. +primary_colors: + - name: '$primary-dark' + hex: '000000' + + +gray_colors: + - name: '$black' + hex: '000000' + - name: '$gray-dark' + hex: '4c4c4b' + - name: '$gray-medium' + hex: '999898' + - name: '$gray-light' + hex: 'd8d8d8' + - name: '$off-white' + hex: 'f2f2f2' + - name: '$white' + hex: 'ffffff' + +--- +
+

Primary Palette

+
+
+ {% for primary_color in page.primary_colors %} +
+
+ + Variable + {{ primary_color.name }} + Hex + #{{ primary_color.hex }} + +
+ {% endfor %} +
+ +
+

Grayscale Palette

+
+
+ {% for gray_color in page.gray_colors %} +
+
+ + Variable + {{ gray_color.name }} + Hex + #{{ gray_color.hex }} + +
+ {% endfor %} +
+ 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..73979b4 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-forms.html @@ -0,0 +1,138 @@ +--- +layout: element +section: element +theme: parent + +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. + +--- + +
+ +
+
+ + +
+
+ +
+
+ Select an option + {% include 'radio.twig' with { 'label' : 'radio 1'} %} + {% include 'radio.twig' with { 'label' : 'radio 2'} %} + {% include 'radio.twig' with { 'label' : 'radio 3'} %} + {% include 'radio.twig' with { 'label' : 'radio 4'} %} +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ Select options + {% include 'checkbox.twig' with { 'label' : 'Checkbox 1'} %} + {% include 'checkbox.twig' with { 'label' : 'Checkbox 2'} %} + {% include 'checkbox.twig' with { 'label' : 'Checkbox 3'} %} + {% include 'checkbox.twig' with { 'label' : 'Checkbox 4'} %} +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ +
+ 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..9ce5ccf --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-grid.html @@ -0,0 +1,163 @@ +--- +layout: element +section: element +theme: parent + +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

+
+ +
+

l-1up

+
+ +
+

l-2up--1

+
+
+

l-2up--2

+
+ +
+

l-3up--1

+
+
+

l-3up--2

+
+
+

l-3up--3

+
+ +
+

l-4up--1

+
+
+

l-4up--2

+
+
+

l-4up--3

+
+
+

l-4up--4

+
+ +
+

l-6up--1

+
+
+

l-6up--2

+
+
+

l-6up--3

+
+
+

l-6up--4

+
+
+

l-6up--5

+
+
+

l-6up--6

+
+ +
+

l-33-66--1

+
+
+

l-33-66--2

+
+ +
+

l-66-33--1

+
+
+

l-66-33--2

+
+ +
+

12 Column "Float" grid layout classes

+

Perfect for multi-row layouts

+
+ +
+

l-1up

+
+ +
+
+

l-2up

+
+
+

l-2up

+
+
+ +
+
+

l-3up

+
+
+

l-3up

+
+
+

l-3up

+
+
+ +
+
+

l-4up

+
+
+

l-4up

+
+
+

l-4up

+
+
+

l-4up

+
+
+ +
+
+

l-6up

+
+
+

l-6up

+
+
+

l-6up

+
+
+

l-6up

+
+
+

l-6up

+
+
+

l-6up

+
+
+ + +
+

Nested grid example

+

If need be you can nest items inside each other

+
+ +
+
+

l-6up

+

l-6up

+

l-3up (last)

+
+
+ +
+

l-3up--2

+
diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-headings.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-headings.html new file mode 100644 index 0000000..1b368a8 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-headings.html @@ -0,0 +1,15 @@ +--- +layout: element +section: element + +title: Headings +description: The headings section outlines how the default headings for the site will look. This is for elements h1-h6. +--- + +

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
+
    +
  1. This is the first item in an ordered list.
    2. +
  2. This is the second item in an ordered list.
    3. +
  3. This is the third item in an ordered list.
    4. +
  4. This is the fourth item in an ordered list.
    5. +
+
Nested Lists
+
    +
  1. 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.
      • +
    +
  2. This is the second item in an ordered list.
    3. +
  3. This is the third item in an ordered list.
    4. +
  4. This is the fourth item in an ordered list.
    5. +
+
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 H2O

    + +
    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 %} + +
    +
    + +
    +

    + {{ site.title }} +

    +
    + +
    +

    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.

    +
    +
    +
    + +{% endblock %} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/templates.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/templates.html new file mode 100644 index 0000000..c2ed284 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/templates.html @@ -0,0 +1,53 @@ +--- +layout: styleguide-landing +title: Templates +description: Based on the needs of the content, components are arranged into specific layouts to create Templates. +--- + +{% block content %} + +
    +
    + +
    +

    {{ page.title }}

    +

    {{ page.description }}

    +
    + +
      +
    • + Landing Pages +
        + {% for template in site.templates %} + {% if template.type == 'landing' %} +
      • {{ template.title }}
        • + {% endif %} + {% endfor %} +
      +
      • +
    • + Detail Pages +
        + {% for template in site.templates %} + {% if template.type == 'detail' %} +
      • {{ template.title }}
        • + {% endif %} + {% endfor %} +
      +
      • +
    • + Listing Pages +
        + {% for template in site.templates %} + {% if template.type == 'list' %} +
      • {{ template.title }}
        • + {% endif %} + {% endfor %} +
      +
      • +
    + +
    +
    + +{% endblock %} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/.gitkeep b/STLYEGUIDE_SPRESS_UPDATE/src/includes/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/checkbox.twig b/STLYEGUIDE_SPRESS_UPDATE/src/includes/checkbox.twig new file mode 100644 index 0000000..2bff7d9 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/checkbox.twig @@ -0,0 +1,8 @@ +{# + name: checkbox + usage: The checkbox is a basic form element that appears in a fieldset +#} + + + + diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig b/STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig new file mode 100644 index 0000000..d7fa471 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig @@ -0,0 +1,11 @@ + + + + {% block title %}{{ page.title }}{% endblock %} | {{ site.title }} + + + {# Favicon, replace as needed #} + + + + diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/inline-image.twig b/STLYEGUIDE_SPRESS_UPDATE/src/includes/inline-image.twig new file mode 100644 index 0000000..eddf0b7 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/inline-image.twig @@ -0,0 +1,14 @@ +{# + name: inline image + usage: 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. +#} + +
    + {{alt}} + {% if caption %} +
    + {{ 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 +#} + + + + 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 }}

    +
    +
    +
    +
    \ No newline at end of file diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-heading.html b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-heading.html new file mode 100644 index 0000000..e4d2dd7 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-heading.html @@ -0,0 +1,7 @@ +
    +
    +
    +

    Living Styleguide: {{site.title}}

    +
    +
    +
    diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-navigation.html b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-navigation.html new file mode 100644 index 0000000..d539e6b --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/styleguide-navigation.html @@ -0,0 +1,18 @@ +
    +
    + Menu + +
    +
    diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/arrow.svg b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/arrow.svg new file mode 100644 index 0000000..18b14c9 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/styleguide/svg/arrow.svg @@ -0,0 +1,7 @@ + + + + + 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..c395c66 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/component.html @@ -0,0 +1,88 @@ +--- +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.

    +
    +
    + +
    +
    + {% if page.title %} +
    +

    {{page.title}}

    +

    {{page.description}}

    +
    + {% endif %} +
    + {% block pageContent %} + {{ page.content }} + {% endblock %} +
    + {% if page.drupal_theme_paths or page.dev_notes or page.changelog %} +
    + +
    +
    + {% 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 %} +
    +
    +
    + +{% endblock %} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/layouts/default.html b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/default.html new file mode 100644 index 0000000..0d75215 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/default.html @@ -0,0 +1,28 @@ + + + + {{ include("head.twig") }} + + +
    +
    +
    Living Styleguide
    +

    {{site.title}}

    +
    +
    + + {% block content_wrapper %} + {% block content %} + {{ page.content }} + {% endblock %} + {% endblock %} + +
    +
    +

    Copyright (c) 2017 Palantir.net

    +
    +
    + + {{ include("scripts.html") }} + + diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/layouts/element.html b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/element.html new file mode 100644 index 0000000..0c66655 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/element.html @@ -0,0 +1,53 @@ +--- +layout: styleguide-landing +title: Elements +--- + +{% block content %} + +
    +
    +
    +

    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 %} +
    +

    {{page.title}}

    +

    {{page.description}}

    +
    + {% endif %} +
    + {% block pageContent %} + {{ page.content }} + {% endblock %} +
    +
    +
    +
    + +{% endblock %} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/layouts/styleguide-default.html b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/styleguide-default.html new file mode 100644 index 0000000..82e3592 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/styleguide-default.html @@ -0,0 +1,27 @@ + + + + {{ include("head.twig") }} + + + + {% include 'styleguide/styleguide-navigation.html' %} + + {% block content_wrapper %} + {% block content %} + {% block pageContent %} + {{ page.content }} + {% endblock %} + {% endblock %} + {% endblock %} + +
    +
    +

    Copyright (c) {{ "now"|date("Y") }} Palantir.net

    +
    +
    + + {{ include("scripts.html") }} + + + diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/layouts/styleguide-landing.html b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/styleguide-landing.html new file mode 100644 index 0000000..8a1c9ee --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/styleguide-landing.html @@ -0,0 +1,14 @@ +--- +layout: "styleguide-default" +--- + +{% block content_wrapper %} + {% include 'styleguide/styleguide-heading.html' %} + + {% block content %} + {% block pageContent %} + {{ page.content }} + {% endblock %} + {% endblock %} + +{% endblock %} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/layouts/template.html b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/template.html new file mode 100644 index 0000000..924e6f8 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/template.html @@ -0,0 +1,25 @@ + + + + {{ include("head.twig") }} + + + 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..b1cdb02 --- /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: $secondary; + +/////////////////////////////////////////////////////////// + +// 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..51ac278 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_normalize.scss @@ -0,0 +1,637 @@ +/*! 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); + font-family: $sans; +} + +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); + font-family: $sans; +} + +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); + font-family: $sans; +} + +h4 { + @include adjust-font-size-to($h4-font-size, 1.05); + @include leader(1, $h4-font-size); + @include trailer(.5, $h4-font-size); + font-family: $sans; +} + +h5 { + @include adjust-font-size-to($h5-font-size, .85); + @include leader(.75, $h5-font-size); + @include trailer(.25, $h5-font-size); + font-family: $sans; +} + +h6 { + @extend %allcaps; + @include adjust-font-size-to($h6-font-size, .65); + @include leader(.75, $h6-font-size); + @include trailer(.25, $h6-font-size); + font-family: $sans; +} + + +/** + * 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..9e4b851 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss @@ -0,0 +1,38 @@ +/** + * @file + * Define print styles here. + */ + +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..2262d7a --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_buttons.scss @@ -0,0 +1,65 @@ +/** + * @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: $secondary; + color: $white; + font-family: $sans; + font-weight: 700; + border: 0; + border-radius: 0; + padding: 6px 16px; + + &:link, + &:visited { + color: $white; + } + + &:active, + &:hover, + &:focus { + background-color: $secondary-dark; + 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; + } +} + +.button--primary, +.button--primary[type="submit"], +.button--primary[type="button"] { + @extend %button; + background-color: $primary-dark; + + &:active, + &:hover, + &:focus { + background-color: $primary; + } +} + + 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..a77e24f --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_forms.scss @@ -0,0 +1,163 @@ +/** + * @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: 0; + border-bottom: 3px solid transparent; + background-color: $off-white; + box-sizing: border-box; + color: $black; + padding: 8px; + + &:active, + &:hover, + &:focus { + border-color: $primary; + 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,"); + background-position: 98% 50%; + background-repeat: no-repeat; + background-color: $off-white; + padding: 8px; + + &:active, + &:hover, + &:focus { + border-color: $primary; + transition: border-color .5s ease; + } +} + +// radio and checkbox styles +input[type='checkbox'], +input[type='radio'] { + display: inline-block; + + & + label { + @include adjust-font-size-to($text, 1); + position: relative; + top: 2px; + display: inline-block; + margin-bottom: 0; + color: $gray-dark; + text-transform: none; + margin: 0 rhythm(1.25) 0 rhythm(.25); + } +} + +textarea { + padding: 8px; + width: 100%; + outline: 0; + background-color: $off-white; + border-radius: 0; + border: 0; + border-bottom: 3px solid transparent; + box-sizing: border-box; + color: $black; + appearance: none; + border-radius: 0px; + + &:active, + &:hover, + &:focus { + border-color: $primary; + transition: border-color .5s ease; + } +} + +fieldset { + margin: 24px 0; + padding: 0; +} + + diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_inline.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_inline.scss new file mode 100644 index 0000000..87b4c3e --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_inline.scss @@ -0,0 +1,125 @@ +/** + * @file + * Define the inline (wysiwyg) styles. + * + * @copyright Copyright (c) 2017 Palantir.net + */ + +%inline { + @extend %clearfix; + margin: rhythm(1) 0; +} + +.inline-caption { + @include adjust-font-size-to($label, .75); + font-style: italic; + margin-top: rhythm(.25); + padding-bottom: rhythm(.5); + border-bottom: 1px solid $gray-light; +} + +.inline-image { + @extend %inline; + opacity: 0; + + img { + width: 100%; + } + + // modernizer fallback + .no-cssanimations & { + opacity: 1; + } + + &.js-scroll-animation.in-view { + animation: fadein 1.25s ease-out .25s forwards; + } +} + +.inline-video { + @extend %inline; + + .inline-caption { + margin-top: rhythm(.5); + } +} + +.inline-video-container { + @extend %clearfix; + position: relative; + padding-bottom: 56.25%; /* 16:9 */ + height: 0; + + iframe, + object{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +.inline-blockquote { + @include adjust-font-size-to($sm-heading, 1.25); + background-color: $off-white; + background: linear-gradient(-45deg, rgba($off-white, .2), rgba($off-white, .8)); + margin: rhythm(1) 0; + padding: rhythm(1); + font-family: $decorative; + opacity: 0; + + // modernizer fallback + .no-cssanimations & { + opacity: 1; + } + + &.js-scroll-animation.in-view { + animation: fadein 1.25s ease-out .25s forwards; + } +} + + +.inline--left { + + &.js-scroll-animation.in-view { + animation: fadein-left 1.25s ease-out .25s forwards; + } + + @include breakpoint($bp1) { + width: 50%; + float: left; + margin: rhythm(.25) rhythm(1) rhythm(.5) 0; + } +} + +.inline--right { + + &.js-scroll-animation.in-view { + animation: fadein-right 1.25s ease-out .25s forwards; + } + + @include breakpoint($bp1) { + width: 50%; + float: right; + margin: rhythm(.25) 0 rhythm(.5) rhythm(1); + } +} + +.inline--portrait { + width: 50%; + float: left; + margin: rhythm(.25) rhythm(1) rhythm(.5) 0; + + &.js-scroll-animation.in-view { + animation: fadein-left 1.25s ease-out .25s forwards; + } + + @include breakpoint($bp1) { + width: 30%; + } + + @include breakpoint($bp2) { + width: 25%; + } +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-1up.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-1up.scss new file mode 100644 index 0000000..272b90c --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-1up.scss @@ -0,0 +1,14 @@ +/** + * @file + * Layout rules for full-width content + */ + + // ============================================================================= + // Basic 1-up layout + // ============================================================================= + +.l-1up { + // Uncomment to display grid overlay for 1-up + // @include background-grid($color: rgba(blue, .2)); + @include isolation-span(12, 1, 'both'); +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-2up.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-2up.scss new file mode 100644 index 0000000..abc987c --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-2up.scss @@ -0,0 +1,49 @@ +/** + * @file + * Layout rules for 2-up content + */ + +// ============================================================================= +// Basic 2-up Float layout +// ============================================================================= + +.l-2up { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include float-span(6); + } + + &:nth-of-type(2n+1) { + @include breakpoint($bp1) { + @include float-span(6, 'first'); + } + } + + &:nth-of-type(2n) { + @include breakpoint($bp1) { + @include float-span(6, 'last'); + } + } +} + + +// ============================================================================= +// Basic 2-up Isolation layout +// ============================================================================= + +.l-2up--1 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(6, 1, 'both'); + } +} + +.l-2up--2 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(6, 7, 'none'); + } +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-33-66.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-33-66.scss new file mode 100644 index 0000000..d917854 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-33-66.scss @@ -0,0 +1,24 @@ +/** + * @file + * Layout rules for one third / two thirds (33/66) content + */ + +// ============================================================================= +// Basic 33-66 Isolation layout +// ============================================================================= + +.l-33-66--1 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(4, 1, 'both'); + } +} + +.l-33-66--2 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(8, 5, 'none'); + } +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-3up.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-3up.scss new file mode 100644 index 0000000..66bcfcb --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-3up.scss @@ -0,0 +1,97 @@ +/** + * @file + * Layout rules for 3-up content + */ + +// ============================================================================= +// Basic 3-up Float layout +// ============================================================================= + +.l-3up { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include float-span(4); + } + + &:nth-of-type(3n+1) { + @include breakpoint($bp1) { + @include float-span(4, 'first'); + } + } + + &:nth-of-type(3n) { + @include breakpoint($bp1) { + @include float-span(4, 'last'); + } + } +} + + +// ============================================================================= +// Basic 3-up Isolation layout +// ============================================================================= + +.l-3up--1 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(4, 1, 'both'); + } +} + +.l-3up--2 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(4, 5, 'none'); + } +} + +.l-3up--3 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(4, 9, 'none'); + } +} + +// ============================================================================= +// 3-up Isolation layout for Footer +// ============================================================================= + +.fl-3up--1 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(6,1); + } + + @include breakpoint($bp3) { + @include isolation-span(4, 1, 'both'); + } +} + +.fl-3up--2 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(6,7); + } + + @include breakpoint($bp3) { + @include isolation-span(6, 5, 'none'); + } +} + +.fl-3up--3 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(12, 1, 'both'); + } + + @include breakpoint($bp3) { + @include isolation-span(2, 11, 'none'); + } +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-4up.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-4up.scss new file mode 100644 index 0000000..efbf08a --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-4up.scss @@ -0,0 +1,65 @@ +/** + * @file + * Layout rules for 4-up content + */ + +// ============================================================================= +// Basic 4-up Float layout +// ============================================================================= + +.l-4up { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include float-span(3); + } + + &:nth-of-type(4n+1) { + @include breakpoint($bp1) { + @include float-span(3, 'first'); + } + } + + &:nth-of-type(4n) { + @include breakpoint($bp1) { + @include float-span(3, 'last'); + } + } +} + + +// ============================================================================= +// Basic 4-up Isolation layout +// ============================================================================= + +.l-4up--1 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(3, 1, 'both'); + } +} + +.l-4up--2 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(3, 4, 'none'); + } +} + +.l-4up--3 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(3, 7, 'none'); + } +} + +.l-4up--4 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(3, 10, 'none'); + } +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-66-33.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-66-33.scss new file mode 100644 index 0000000..77791a1 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-66-33.scss @@ -0,0 +1,24 @@ +/** + * @file + * Layout rules for two thirds / one third (66/33) content + */ + +// ============================================================================= +// Basic 66-33 Isolation layout +// ============================================================================= + +.l-66-33--1 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(8, 1, 'both'); + } +} + +.l-66-33--2 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(4, 9, 'none'); + } +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-6up.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-6up.scss new file mode 100644 index 0000000..586cfa2 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-6up.scss @@ -0,0 +1,81 @@ +/** + * @file + * Layout rules for 6-up content + */ + +// ============================================================================= +// Basic 6-up Float layout +// ============================================================================= + +.l-6up { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include float-span(2); + } + + &:nth-of-type(6n+1) { + @include breakpoint($bp1) { + @include float-span(2, 'first'); + } + } + + &:nth-of-type(6n) { + @include breakpoint($bp1) { + @include float-span(2, 'last'); + } + } +} + + +// ============================================================================= +// Basic 6-up Isolation layout +// ============================================================================= + +.l-6up--1 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(2, 1, 'both'); + } +} + +.l-6up--2 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(2, 3, 'none'); + } +} + +.l-6up--3 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(2, 5, 'none'); + } +} + +.l-6up--4 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(2, 7, 'none'); + } +} + +.l-6up--5 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(2, 9, 'none'); + } +} + +.l-6up--6 { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(2, 11, 'none'); + } +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-singularity.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-singularity.scss new file mode 100644 index 0000000..d4628ef --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/grid-layouts/_l-singularity.scss @@ -0,0 +1,47 @@ +/** + * @file + * Define singularity gs base settings here. + * @see https://github.com/at-import/Singularity + */ + +////////////////////////////////////////// +// Singularity: Setup +////////////////////////////////////////// + +// Debug mode: Set to true for background grid overlay. +@include sgs-change('debug', true); + +// If you want/need to use fixed width gutters, you must add +// split and fixed gutter styles so that singularity uses the +// right maths. +// @include add-gutter-style('split' 'fixed'); + +// Set default grid for each breakpoint. +@include add-grid(12); +// +// Set default gutter. +@include add-gutter(1/2); + + + +////////////////////////////////////////// +// Singularity: Centered container +////////////////////////////////////////// + +.container { + // @include background-grid($color: rgba(blue, .2)); + @extend %clearfix; + width: 100%; + min-width: 260px; /* enforces a min-width in FF. */ + padding: 0 rhythm(1); + margin: 0 auto; + + @include breakpoint($bp2) { + width: 90%; + padding: 0; + } + + @include breakpoint($bp3) { + max-width: 1600px; + } +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/styleguide/_styleguide.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/styleguide/_styleguide.scss new file mode 100644 index 0000000..2de8906 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/styleguide/_styleguide.scss @@ -0,0 +1,410 @@ +/** + * @file + * Define the styles for the styleguide. This is not css for the site. + * + * @copyright Copyright (c) 2014 Palantir.net + */ + +.l-styleguide-column { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp1) { + @include isolation-span(8, 1, 'none'); + } + + @include breakpoint($bp2) { + @include isolation-span(7, 1, 'none'); + } +} + +.l-styleguide-rail { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp2) { + @include isolation-span(2, 1, 'both'); + } +} + +.l-styleguide-body { + @include isolation-span(12, 1, 'both'); + + @include breakpoint($bp2) { + @include isolation-span(10, 3, 'none'); + } +} + +// Styleguide Navigation +.sg-nav-container { + background-color: $white; + border-bottom: 1px solid $gray-light; + + @include breakpoint($bp1) { + position: relative; + } +} + +.sg-nav { + display: none; + + &.is-active { + display: block; + } + + > ul { + list-style: none; + margin: 0; + padding: 0; + } + + @include breakpoint($bp1) { + display: block; + } +} + +.sg-trigger { + font-weight: bold; + display: block; + padding: 10px 0; + + @include breakpoint($bp1) { + display: none; + } +} + +.sg-nav__item { + @include adjust-font-size-to($label); + display: block; + padding: 7px 0; + border-bottom: 1px solid $gray-light; + font-weight: 700; + font-family: $sans; + + &:last-child { + border-bottom: 0; + } + + @include breakpoint($bp1) { + // position: relative; + float: left; + padding: 7px 10px; + border-left: 1px solid $gray-light; + border-right: 1px solid $gray-light; + border-bottom: 0; + + span { + float: none; + } + } +} + +.sg-header { + margin-top: rhythm(1); + margin-bottom: rhythm(1.5); +} + +.sg-logo { + margin-top: 0; + margin-bottom:0; + + svg { + height: 100px; + width: 250px; + } +} + +// index page wrapper +.sg-intro { + margin-top: rhythm(.75); +} + +// Update this class as needed to differentiate styleguide header from the header component +.sg-heading { + background-color: $primary-dark; + padding: 10px 0; + margin-bottom: 25px; +} + +.sg-title { + @include adjust-font-size-to($text, 1); + text-transform: uppercase; + margin: 0; + + a:link, + a:visited { + color: $white; + } + + a:active, + a:hover, + a:focus { + color: $white; + text-decoration: underline; + } +} + +// Secondary Navigation +.sg-secondary-nav-container { + border: 1px solid $gray-light; +} + +.sg-secondary-nav-trigger { + display: block; + position: relative; + padding: 10px 25px 10px 10px; + background-color: $off-white; + text-transform: uppercase; + font-weight: bold; + font-family: $sans; + + &:link, + &:visited { + color: $black; + } + + svg { + position: absolute; + top: 12px; + right: 10px; + height: 15px; + width: 15px; + fill: $black; + } + + &.is-active { + svg { + transform: rotate(90deg); + } + } + + @include breakpoint($bp2) { + display: none; + } +} + +.sg-secondary-nav { + list-style: none; + margin: 0; + padding: 0; + display: none; + + &.is-active { + display: block; + } + + @include breakpoint($bp2) { + display: block; + } +} + +.sg-secondary-nav__section { + @include adjust-font-size-to($label, .75); + display: block; + text-transform: uppercase; + font-weight: bold; + padding: 10px 20px 10px 10px; + position: relative; + cursor: pointer; + font-family: $sans; + + svg { + position: absolute; + right: 5px; + top: 14px; + height: 10px; + width: 10px; + } + + &.is-active { + svg { + transform: rotate(90deg); + } + } + + @include breakpoint($bp2) { + cursor: auto; + padding: 10px; + border-bottom: 1px solid $gray-light; + + svg { + display: none; + } + } +} + +.sg-secondary-subnav { + @include adjust-font-size-to($label, .75); + list-style: none; + margin: 0; + padding: 0 0 20px; + border-bottom: 1px solid $gray-light; + display: none; + + &.is-active { + display: block; + } + + a:link, + a:visited { + display: block; + padding: 5px 10px; + } + + @include breakpoint($bp2) { + display: block; + } +} + +.sg-component-header { + background-color: $off-white; + padding: 10px; + margin-bottom: 25px; + margin-top: 10px; + + h3 { + margin-top: 10px; + margin-bottom: 0; + } + + p { + margin-bottom: 10px; + } + + @include breakpoint($bp1) { + margin-top: 0; + } +} + +.sg-component { + @extend %clearfix; + position: relative; + border: 1px solid $off-white; +} + +.sg-list { + list-style: none; + margin: 0; + padding: 0; + + > li { + font-weight: bold; + text-transform: uppercase; + + > ul { + list-style: none; + margin: 0; + padding: 0; + + li { + text-transform: none; + font-weight: regular; + } + } + } +} + +.styleguide-copyright { + @include adjust-font-size-to($label, 1.5); + color: $gray-medium; + padding: rhythm(2) 0; + margin-top: rhythm(2); + border-top: 1px solid $gray-light; +} + +.styleguide-label { + color: $gray-dark; +} + +.styleguide-swatch { + padding: 35px; + border: 1px solid $off-white; +} + +.styleguide-swatch__code { + display: block; + margin-top: rhythm(.25); + margin-bottom: rhythm(1); + + span { + @include adjust-font-size-to($label, .75); + text-transform: uppercase; + display: block; + font-weight: bold; + } +} + +.sg-dev-drawer-trigger-wrapper { + text-align: right; +} + +.sg-dev-drawer-trigger { + @include adjust-font-size-to($crumb, .65); + background-color: transparent; + text-transform: none; + padding: 0; + margin: rhythm(.5) 0; + font-weight: 400; + color: $link-color; + + &:active, + &:hover, + &:focus { + background-color: transparent; + color: $link-hover; + } +} + +.sg-dev-drawer { + display: none; + background-color: $off-white; + padding: rhythm(.5); + + &.is-active { + display: block; + } +} + +.sg-dev-drawer__label { + @include leader(.25); + @include trailer(0); +} + +.sg-dev-drawer__text { + @include adjust-font-size-to($label, .75); +} + +.sg-dev-drawer__list { + @extend %list--simple; + @include adjust-font-size-to($label, .75); +} + + +// Grid demo styles +.demo { + background-color: $gray-light; + padding: rhythm(1); +} + +// Set example nest wrap styles +.nest-wrap { + @extend %clearfix; + background-color: $gray-light; + padding: 0; +} + +// Set the column count for nested example +@include layout(8) { + .nest-item { + @include isolation-span(8, 1, 'both'); + background-color: darken($gray-light, 4%); + padding: rhythm(1); + + @include breakpoint($bp1) { + @include float-span(2); + margin-bottom: 0; + + &:last-child { + @include float-span(4, "last"); + } + } + } +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/styles.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/styles.scss new file mode 100644 index 0000000..fbd0880 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/styles.scss @@ -0,0 +1,48 @@ +/** + * @file + * Centralize your imports here. + * Styles are organized using the SMACSS technique. + * @see http://smacss.com/book/ + */ + +/* Import Sass mixins, variables, Compass modules, etc. */ +@import "init"; + +/* Set browser support */ +@import "support-for"; + +/* Set the vertical rhythm */ +@import "vertical-rhythm/vertical_rhythm"; + +/* HTML element (SMACSS base) rules */ +@import "normalize"; + +/* Layout rules */ +@import "grid-layouts/_l-singularity"; +@import "grid-layouts/_l-1up"; +@import "grid-layouts/_l-2up"; +@import "grid-layouts/_l-3up"; +@import "grid-layouts/_l-4up"; +@import "grid-layouts/_l-6up"; +@import "grid-layouts/_l-33-66"; +@import "grid-layouts/_l-66-33"; + +/* Component (SMACSS module) rules */ +@import "components/buttons"; +@import "components/forms"; + +// inline styles +@import "components/inline"; + +/* Styleguide Specific rules */ +@import "styleguide/styleguide"; + +/* print rules */ +@import "print"; + +/** @define component **/ +// This component will fail +// keeping for testing purposes +.Best-Class-Ever { + background:red; +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_grid_background.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_grid_background.scss new file mode 100755 index 0000000..1deedd2 --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_grid_background.scss @@ -0,0 +1,29 @@ +// Set the color of your baseline +$grid-background-baseline-color : rgba(0, 0, 0, 0.5) !default; +// Set the height of your baseline grid +$grid-background-baseline-height : 1.5em !default; + +// toggle your vertical grids on and off +$show-baseline-grid-backgrounds : true !default; +// toggle all your grids on and off +$show-grid-backgrounds : true !default; + +// Add just the baseline grid to an element's background +@mixin baseline-grid-background( + $baseline : $grid-background-baseline-height, + $color : $grid-background-baseline-color +) { + @if $show-grid-backgrounds and $show-baseline-grid-backgrounds { + background-image: get-baseline-gradient($color); + background-size: 100% $baseline; + background-position: left top; + } +} + +// Create the gradient needed for baseline grids +@function get-baseline-gradient( + $color : $grid-background-baseline-color +) { + $gradient: linear-gradient(to top, $color 5%, rgba($color,0) 5%); + @return $gradient; +} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_units.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_units.scss new file mode 100755 index 0000000..0bb4a1b --- /dev/null +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/vertical-rhythm/_units.scss @@ -0,0 +1,183 @@ +// @private Default font-size for all browsers +$browser-default-font-size: 16px; + +// Base font size in pixels, if not already defined. +// Should be the same as the font-size of the html element. +$base-font-size: 16px !default; + +// Whether to output fallback values in px when outputting rems. +$rem-with-px-fallback: true !default; + + +// Convert any CSS 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); +} From 2e961b8cb994da1930eab401a1613e56abc59424 Mon Sep 17 00:00:00 2001 From: Ashley Cyborski Date: Tue, 7 Nov 2017 13:27:57 -0600 Subject: [PATCH 2/2] update to work --- .../src/content/assets/css/styles.css | 2 + .../{inline => }/component-inline-image.html | 2 +- .../{inline => }/component-inline-video.html | 2 +- .../src/content/elements/element-forms.html | 1 - .../src/content/elements/element-grid.html | 1 - .../src/includes/head.twig | 2 - .../src/layouts/component.html | 75 +++++++++++++++++-- STLYEGUIDE_SPRESS_UPDATE/src/sass/_init.scss | 2 +- .../src/sass/_normalize.scss | 6 -- STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss | 57 +++++++------- .../src/sass/components/_buttons.scss | 18 +---- .../src/sass/components/_forms.scss | 11 ++- .../src/sass/components/_inline.scss | 39 ---------- .../src/sass/styleguide/_styleguide.scss | 5 +- 14 files changed, 110 insertions(+), 113 deletions(-) create mode 100644 STLYEGUIDE_SPRESS_UPDATE/src/content/assets/css/styles.css rename STLYEGUIDE_SPRESS_UPDATE/src/content/components/{inline => }/component-inline-image.html (99%) rename STLYEGUIDE_SPRESS_UPDATE/src/content/components/{inline => }/component-inline-video.html (99%) 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,");background-position:98% 50%;background-repeat:no-repeat;background-color:#f2f2f2;padding:8px}select:active,select:focus,select:hover{border-color:#4c4c4b;-webkit-transition:border-color .5s ease;transition:border-color .5s ease}input[type=checkbox],input[type=radio]{display:inline-block}input[type=checkbox]+label,input[type=radio]+label{font-size:1em;line-height:1.5em;position:relative;top:2px;display:inline-block;margin-bottom:0;color:#4c4c4b;text-transform:none;margin:0 1.875em 0 .375em}textarea{padding:8px;width:100%;outline:0;background-color:#f2f2f2;border:0;border-bottom:3px solid transparent;box-sizing:border-box;color:#222;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}textarea:active,textarea:focus,textarea:hover{border-color:#4c4c4b;-webkit-transition:border-color .5s ease;transition:border-color .5s ease}fieldset{margin:24px 0;padding:0}.inline-image,.inline-video{margin:1.5em 0}.inline-caption{font-size:.8em;line-height:1.40625em;margin-top:.375em}.inline-image img{width:100%}.inline-video .inline-caption{margin-top:.75em}.inline-video-container{position:relative;padding-bottom:56.25%;height:0}.inline-video-container iframe,.inline-video-container object{position:absolute;top:0;left:0;width:100%;height:100%}.inline-blockquote{margin:1.5em 0;padding:1.5em}@media (min-width:600px){.inline--left{width:50%;float:left;margin:.375em 1.5em .75em 0}}@media (min-width:600px){.inline--right{width:50%;float:right;margin:.375em 0 .75em 1.5em}}.inline--portrait{width:50%;float:left;margin:.375em 1.5em .75em 0}@media (min-width:600px){.inline--portrait{width:30%}}@media (min-width:900px){.inline--portrait{width:25%}}.l-styleguide-column{-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-styleguide-column{-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":none));width:65.71429%;float:left;margin-right:-100%;margin-left:0;clear:none}}@media (min-width:900px){.l-styleguide-column{-sgs-span-settings:("span":7,"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":none));width:57.14286%;float:left;margin-right:-100%;margin-left:0;clear:none}}.l-styleguide-rail{-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:900px){.l-styleguide-rail{-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-styleguide-body{-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:900px){.l-styleguide-body{-sgs-span-settings:("span":10,"location":3,"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:82.85714%;float:right;margin-left:0;margin-right:0;clear:none}}.sg-nav-container{background-color:#fff;border-bottom:1px solid #d8d8d8}@media (min-width:600px){.sg-nav-container{position:relative}}.sg-nav{display:none}.sg-nav.is-active{display:block}.sg-nav>ul{list-style:none;margin:0;padding:0}@media (min-width:600px){.sg-nav{display:block}}.sg-trigger{font-weight:700;display:block;padding:10px 0}@media (min-width:600px){.sg-trigger{display:none}}.sg-nav__item{font-size:.8em;line-height:1.875em;display:block;padding:7px 0;border-bottom:1px solid #d8d8d8;font-weight:700}.sg-nav__item:last-child{border-bottom:0}@media (min-width:600px){.sg-nav__item{float:left;padding:7px 10px;border-left:1px solid #d8d8d8;border-right:1px solid #d8d8d8;border-bottom:0}.sg-nav__item span{float:none}}.sg-header{margin-top:1.5em;margin-bottom:2.25em}.sg-logo{margin-top:0;margin-bottom:0}.sg-logo svg{height:100px;width:250px}.sg-intro{margin-top:1.125em}.sg-heading{background-color:#4c4c4b;padding:10px 0;margin-bottom:25px}.sg-title{font-size:1em;line-height:1.5em;text-transform:uppercase;margin:0}.sg-title a:link,.sg-title a:visited{color:#fff}.sg-title a:active,.sg-title a:focus,.sg-title a:hover{color:#fff;text-decoration:underline}.sg-secondary-nav-container{border:1px solid #d8d8d8}.sg-secondary-nav-trigger{display:block;position:relative;padding:10px 25px 10px 10px;background-color:#f2f2f2;text-transform:uppercase;font-weight:700}.sg-secondary-nav-trigger:link,.sg-secondary-nav-trigger:visited{color:#222}.sg-secondary-nav-trigger svg{position:absolute;top:12px;right:10px;height:15px;width:15px;fill:#222}.sg-secondary-nav-trigger.is-active svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@media (min-width:900px){.sg-secondary-nav-trigger{display:none}}.sg-secondary-nav{list-style:none;margin:0;padding:0;display:none}.sg-secondary-nav.is-active{display:block}@media (min-width:900px){.sg-secondary-nav{display:block}}.sg-secondary-nav__section{font-size:.8em;line-height:1.40625em;display:block;text-transform:uppercase;font-weight:700;padding:10px 20px 10px 10px;position:relative;cursor:pointer}.sg-secondary-nav__section svg{position:absolute;right:5px;top:14px;height:10px;width:10px}.sg-secondary-nav__section.is-active svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@media (min-width:900px){.sg-secondary-nav__section{cursor:auto;padding:10px;border-bottom:1px solid #d8d8d8}.sg-secondary-nav__section svg{display:none}}.sg-secondary-subnav{font-size:.8em;line-height:1.40625em;list-style:none;margin:0;padding:0 0 20px;border-bottom:1px solid #d8d8d8;display:none}.sg-secondary-subnav.is-active{display:block}.sg-secondary-subnav a:link,.sg-secondary-subnav a:visited{display:block;padding:5px 10px}@media (min-width:900px){.sg-secondary-subnav{display:block}}.sg-component-header{background-color:#f2f2f2;padding:10px;margin-bottom:25px;margin-top:10px}.sg-component-header h3{margin-top:10px;margin-bottom:0}.sg-component-header p{margin-bottom:10px}@media (min-width:600px){.sg-component-header{margin-top:0}}.sg-component{position:relative;border:1px solid #f2f2f2}.sg-list{list-style:none;margin:0;padding:0}.sg-list>li{font-weight:700;text-transform:uppercase}.sg-list>li>ul{list-style:none;margin:0;padding:0}.sg-list>li>ul li{text-transform:none;font-weight:regular}.styleguide-copyright{font-size:.8em;line-height:2.8125em;color:#999898;padding:3em 0;margin-top:3em;border-top:1px solid #d8d8d8}.styleguide-label{color:#4c4c4b}.styleguide-swatch{padding:35px;border:1px solid #f2f2f2}.styleguide-swatch__code{display:block;margin-top:.375em;margin-bottom:1.5em}.styleguide-swatch__code span{font-size:.8em;line-height:1.40625em;text-transform:uppercase;display:block;font-weight:700}.sg-dev-drawer-trigger-wrapper{text-align:right}.sg-dev-drawer-trigger{font-size:.6em;line-height:1.625em;text-transform:none;padding:0;margin:.75em 0;font-weight:400}.sg-dev-drawer-trigger,.sg-dev-drawer-trigger:active,.sg-dev-drawer-trigger:focus,.sg-dev-drawer-trigger:hover{background-color:transparent;color:#4c4c4b}.sg-dev-drawer{display:none;background-color:#f2f2f2;padding:.75em}.sg-dev-drawer.is-active{display:block}.sg-dev-drawer__label{margin-top:.375em;margin-bottom:0}.sg-dev-drawer__list,.sg-dev-drawer__text{font-size:.8em;line-height:1.40625em}.demo{padding:1.5em}.demo,.nest-wrap{background-color:#d8d8d8}.nest-wrap{padding:0}.nest-item{-sgs-span-settings:("span":8,"location":1,"grid":8,"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;background-color:#cecece;padding:1.5em}@media (min-width:600px){.nest-item{-sgs-span-settings:("span":2,"location":1,"grid":8,"gutter":.5,"style":"opposite","start row":true,"end row":false,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:21.73913%;clear:right;float:left;margin-left:0;margin-right:4.34783%;margin-bottom:0}.nest-item:last-child{-sgs-span-settings:("span":4,"location":5,"grid":8,"gutter":.5,"style":"opposite","start row":false,"end row":true,"fixed gutter":false,"split gutter":null,"gutter property":"margin","options":(null:null));width:47.82609%;clear:right;float:right;margin-right:0}}@media print{.container,body{width:100%;margin:0;float:none;background:#fff url(none)}.footer,.header,.rail{display:none}body{font:1em Georgia,Times New Roman,DejaVu Serif,serif;color:#000}h1,h2,h3,h4,h5,h6{font-family:Helvetica,Arial,Nimbus Sans L,sans-serif;color:#000}a:link,a:visited{color:#00c;font-weight:700;text-decoration:underline}a:link:after,a:visited:after{content:" (" attr(href) ") "}}.Best-Class-Ever{background:red} \ No newline at end of file diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-image.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-image.html similarity index 99% rename from STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-image.html rename to STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-image.html index 77c8bf4..7cf2335 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-image.html +++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-image.html @@ -1,7 +1,7 @@ --- layout: component section: component -theme: default +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.' diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-video.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-video.html similarity index 99% rename from STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-video.html rename to STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-video.html index 007bbb2..95e1c0c 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/content/components/inline/component-inline-video.html +++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-video.html @@ -1,7 +1,7 @@ --- layout: component section: component -theme: default +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.' diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-forms.html b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-forms.html index 73979b4..f09dc51 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-forms.html +++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-forms.html @@ -1,7 +1,6 @@ --- layout: element section: element -theme: parent 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 index 9ce5ccf..8a84eb2 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-grid.html +++ b/STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-grid.html @@ -1,7 +1,6 @@ --- layout: element section: element -theme: parent title: Grid System description: This is the structural framework for the layout of the website. diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig b/STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig index d7fa471..6d50668 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig +++ b/STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig @@ -2,8 +2,6 @@ {% block title %}{{ page.title }}{% endblock %} | {{ site.title }} - - {# Favicon, replace as needed #} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/layouts/component.html b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/component.html index c395c66..ddf8d23 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/layouts/component.html +++ b/STLYEGUIDE_SPRESS_UPDATE/src/layouts/component.html @@ -18,23 +18,84 @@

    Components

    {% include 'styleguide/svg/arrow.svg' %}
      - {% set categoryList = [] %} - {% for category in site.categories %}
    • - {{ categoryName }} + Global Components {% include 'styleguide/svg/arrow.svg' %}
        - {% for categoryName, categoryUrl in item.terms_url.categories %} - {% if categoryName not in categoryList | keys %} - {% set categoryList = categoryList | merge({ (categoryName) : categoryUrl }) %} + {% for component in site.components %} + {% if component.type == 'global' %} +
      • {{ component.title }}
        • + {% endif %} + {% endfor %} +
      +
      • +
    • + + Hero Components + {% include 'styleguide/svg/arrow.svg' %} + +
        + {% for component in site.components %} + {% if component.type == 'hero' %} +
      • {{ component.title }}
        • + {% endif %} + {% endfor %} +
      +
      • +
    • + + inline Components + {% include 'styleguide/svg/arrow.svg' %} + +
        + {% for component in site.components %} + {% if component.type == 'inline' %} +
      • {{ component.title }}
        • + {% endif %} + {% endfor %} +
      +
      • +
    • + + Rail Components + {% include 'styleguide/svg/arrow.svg' %} + +
        + {% for component in site.components %} + {% if component.type == 'rail' %} +
      • {{ component.title }}
        • + {% endif %} + {% endfor %} +
      +
      • +
    • + + Teaser Components + {% include 'styleguide/svg/arrow.svg' %} + +
        + {% for component in site.components %} + {% if component.type == 'teaser' %} +
      • {{ component.title }}
        • + {% endif %} + {% endfor %} +
      +
      • +
    • + + General Components + {% include 'styleguide/svg/arrow.svg' %} + +
        + {% for component in site.components %} + {% if component.type == 'general' %}
      • {{ component.title }}
        • {% endif %} {% endfor %}
      • - {% endfor %}
    diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/_init.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_init.scss index b1cdb02..c272f0a 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/sass/_init.scss +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_init.scss @@ -96,7 +96,7 @@ $text-color: $black; $background-color: $white; /* Link (a:) */ $link-color: $gray-dark; -$link-hover: $secondary; +$link-hover: $gray-dark; /////////////////////////////////////////////////////////// diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/_normalize.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_normalize.scss index 51ac278..ca8f6f9 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/sass/_normalize.scss +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_normalize.scss @@ -205,7 +205,6 @@ h1 { // 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); - font-family: $sans; } h2 { @@ -213,7 +212,6 @@ h2 { @include adjust-font-size-to($h2-font-size, 1.35); @include leader(1.25, $h2-font-size); @include trailer(.5, $h2-font-size); - font-family: $sans; } h3 { @@ -221,21 +219,18 @@ h3 { @include adjust-font-size-to($h3-font-size, 1.15); @include leader(1, $h3-font-size); @include trailer(.5, $h3-font-size); - font-family: $sans; } h4 { @include adjust-font-size-to($h4-font-size, 1.05); @include leader(1, $h4-font-size); @include trailer(.5, $h4-font-size); - font-family: $sans; } h5 { @include adjust-font-size-to($h5-font-size, .85); @include leader(.75, $h5-font-size); @include trailer(.25, $h5-font-size); - font-family: $sans; } h6 { @@ -243,7 +238,6 @@ h6 { @include adjust-font-size-to($h6-font-size, .65); @include leader(.75, $h6-font-size); @include trailer(.25, $h6-font-size); - font-family: $sans; } diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss index 9e4b851..847d7f6 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss @@ -2,37 +2,38 @@ * @file * Define print styles here. */ +@media print { + body, .container { + width: 100%; + margin: 0; + float: none; + background: #fff url(none); + } -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; -} + // Hide things you don't want to print + .header, .footer, .rail { + display: none; + } -// adjust fonts -body { - font: 1em $georgia; - color: #000; -} + // adjust fonts + body { + font: 1em $georgia; + color: #000; + } -h1,h2,h3,h4,h5,h6 { - font-family: $helvetica; - 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; -} + // Links + a:link, a:visited { + color: #00c; + font-weight: bold; + text-decoration: underline; + } -a:link:after, a:visited:after { - content: " (" attr(href) ") "; + a:link:after, a:visited:after { + content: " (" attr(href) ") "; + } } diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_buttons.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_buttons.scss index 2262d7a..d2be7cf 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_buttons.scss +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_buttons.scss @@ -12,10 +12,8 @@ input[type='submit'], input[type='button'] { @include adjust-font-size-to($label); display: inline-block; - background-color: $secondary; + background-color: $gray-dark; color: $white; - font-family: $sans; - font-weight: 700; border: 0; border-radius: 0; padding: 6px 16px; @@ -28,7 +26,7 @@ input[type='button'] { &:active, &:hover, &:focus { - background-color: $secondary-dark; + background-color: $gray-medium; transition: background-color .5s ease; text-decoration: none; } @@ -49,17 +47,5 @@ input[type='reset'], } } -.button--primary, -.button--primary[type="submit"], -.button--primary[type="button"] { - @extend %button; - background-color: $primary-dark; - - &:active, - &:hover, - &:focus { - background-color: $primary; - } -} diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_forms.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_forms.scss index a77e24f..8fee643 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_forms.scss +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_forms.scss @@ -74,9 +74,8 @@ input[type="datetime"], input[type="datetime-local"] { width: 100%; outline: 0; - border: 0; - border-bottom: 3px solid transparent; - background-color: $off-white; + border: 1px solid $gray-light; + background-color: transparent; box-sizing: border-box; color: $black; padding: 8px; @@ -84,7 +83,7 @@ input[type="datetime-local"] { &:active, &:hover, &:focus { - border-color: $primary; + border-color: $gray-dark; transition: border-color .5s ease; } } @@ -112,7 +111,7 @@ select { &:active, &:hover, &:focus { - border-color: $primary; + border-color: $gray-dark; transition: border-color .5s ease; } } @@ -150,7 +149,7 @@ textarea { &:active, &:hover, &:focus { - border-color: $primary; + border-color: $gray-dark; transition: border-color .5s ease; } } diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_inline.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_inline.scss index 87b4c3e..fba4f5e 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_inline.scss +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_inline.scss @@ -12,28 +12,15 @@ .inline-caption { @include adjust-font-size-to($label, .75); - font-style: italic; margin-top: rhythm(.25); - padding-bottom: rhythm(.5); - border-bottom: 1px solid $gray-light; } .inline-image { @extend %inline; - opacity: 0; img { width: 100%; } - - // modernizer fallback - .no-cssanimations & { - opacity: 1; - } - - &.js-scroll-animation.in-view { - animation: fadein 1.25s ease-out .25s forwards; - } } .inline-video { @@ -61,31 +48,13 @@ } .inline-blockquote { - @include adjust-font-size-to($sm-heading, 1.25); - background-color: $off-white; - background: linear-gradient(-45deg, rgba($off-white, .2), rgba($off-white, .8)); margin: rhythm(1) 0; padding: rhythm(1); - font-family: $decorative; - opacity: 0; - - // modernizer fallback - .no-cssanimations & { - opacity: 1; - } - - &.js-scroll-animation.in-view { - animation: fadein 1.25s ease-out .25s forwards; - } } .inline--left { - &.js-scroll-animation.in-view { - animation: fadein-left 1.25s ease-out .25s forwards; - } - @include breakpoint($bp1) { width: 50%; float: left; @@ -95,10 +64,6 @@ .inline--right { - &.js-scroll-animation.in-view { - animation: fadein-right 1.25s ease-out .25s forwards; - } - @include breakpoint($bp1) { width: 50%; float: right; @@ -111,10 +76,6 @@ float: left; margin: rhythm(.25) rhythm(1) rhythm(.5) 0; - &.js-scroll-animation.in-view { - animation: fadein-left 1.25s ease-out .25s forwards; - } - @include breakpoint($bp1) { width: 30%; } diff --git a/STLYEGUIDE_SPRESS_UPDATE/src/sass/styleguide/_styleguide.scss b/STLYEGUIDE_SPRESS_UPDATE/src/sass/styleguide/_styleguide.scss index 2de8906..0c339d2 100644 --- a/STLYEGUIDE_SPRESS_UPDATE/src/sass/styleguide/_styleguide.scss +++ b/STLYEGUIDE_SPRESS_UPDATE/src/sass/styleguide/_styleguide.scss @@ -77,7 +77,6 @@ padding: 7px 0; border-bottom: 1px solid $gray-light; font-weight: 700; - font-family: $sans; &:last-child { border-bottom: 0; @@ -119,7 +118,7 @@ // Update this class as needed to differentiate styleguide header from the header component .sg-heading { - background-color: $primary-dark; + background-color: $gray-dark; padding: 10px 0; margin-bottom: 25px; } @@ -154,7 +153,6 @@ background-color: $off-white; text-transform: uppercase; font-weight: bold; - font-family: $sans; &:link, &:visited { @@ -204,7 +202,6 @@ padding: 10px 20px 10px 10px; position: relative; cursor: pointer; - font-family: $sans; svg { position: absolute;