From a3170ed08e4aa01c47aa9cd2842553d5437a9d0e Mon Sep 17 00:00:00 2001 From: Alex Bea Date: Tue, 20 Aug 2019 11:00:24 -0500 Subject: [PATCH 01/12] Pushes stylesheets instead of extraHead --- index.js | 2 ++ package.json | 2 +- views/extraHead.html | 4 +--- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index ef4208f..d3886ad 100644 --- a/index.js +++ b/index.js @@ -12,6 +12,8 @@ module.exports = { }, afterConstruct: function (self) { self.pushAsset('script', 'always', { when: 'always' }); + self.pushAsset('stylesheet', 'vendor/highlight', { when: 'always' }); + self.pushAsset('stylesheet', 'vendor/skeleton', { when: 'always' }); self.pushAsset('stylesheet', 'always', { when: 'always' }); } }; diff --git a/package.json b/package.json index 29c2c3b..d51ccbc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pk-pattern-library", - "version": "1.1.2", + "version": "1.1.3", "description": "A pattern library generator for ApostropheCMS.", "main": "index.js", "scripts": { diff --git a/views/extraHead.html b/views/extraHead.html index 70b9e0e..d8cddc9 100644 --- a/views/extraHead.html +++ b/views/extraHead.html @@ -1,3 +1 @@ - - - + \ No newline at end of file From e08cb0b283f7f75e05cf41cd371f74d5526fda7f Mon Sep 17 00:00:00 2001 From: Alex Bea Date: Wed, 21 Aug 2019 09:02:54 -0500 Subject: [PATCH 02/12] Moves used skeleton styles to the main stylesheet --- index.js | 2 - public/css/vendor/skeleton.css | 224 --------------------------------- src/scss/settings/_type.scss | 21 ++++ views/extraHead.html | 3 +- views/styleguide.html | 2 + 5 files changed, 25 insertions(+), 227 deletions(-) delete mode 100644 public/css/vendor/skeleton.css diff --git a/index.js b/index.js index d3886ad..ef4208f 100644 --- a/index.js +++ b/index.js @@ -12,8 +12,6 @@ module.exports = { }, afterConstruct: function (self) { self.pushAsset('script', 'always', { when: 'always' }); - self.pushAsset('stylesheet', 'vendor/highlight', { when: 'always' }); - self.pushAsset('stylesheet', 'vendor/skeleton', { when: 'always' }); self.pushAsset('stylesheet', 'always', { when: 'always' }); } }; diff --git a/public/css/vendor/skeleton.css b/public/css/vendor/skeleton.css deleted file mode 100644 index ae5beea..0000000 --- a/public/css/vendor/skeleton.css +++ /dev/null @@ -1,224 +0,0 @@ -/* -* Skeleton V2.0.4 -* Copyright 2014, Dave Gamache -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 12/29/2014 -*/ - -/* stylelint-disable */ - - -/* Table of contents -–––––––––––––––––––––––––––––––––––––––––––––––––– -- Grid -- Base Styles -- Typography -- Links -- Buttons -- Forms -- Lists -- Code -- Tables -- Spacing -- Utilities -- Clearing -- Media Queries -*/ - - -/* Grid -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.container { - position: relative; - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; } -.column, -.columns { - width: 100%; - float: left; - box-sizing: border-box; } - -/* For devices larger than 400px */ -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; } -} - -/* For devices larger than 550px */ -@media (min-width: 550px) { - .container { - width: 80%; } - .column, - .columns { - margin-left: 4%; } - .column:first-child, - .columns:first-child { - margin-left: 0; } - - .one.column, - .one.columns { width: 4.66666666667%; } - .two.columns { width: 13.3333333333%; } - .three.columns { width: 22%; } - .four.columns { width: 30.6666666667%; } - .five.columns { width: 39.3333333333%; } - .six.columns { width: 48%; } - .seven.columns { width: 56.6666666667%; } - .eight.columns { width: 65.3333333333%; } - .nine.columns { width: 74.0%; } - .ten.columns { width: 82.6666666667%; } - .eleven.columns { width: 91.3333333333%; } - .twelve.columns { width: 100%; margin-left: 0; } - - .one-third.column { width: 30.6666666667%; } - .two-thirds.column { width: 65.3333333333%; } - - .one-half.column { width: 48%; } - - /* Offsets */ - .offset-by-one.column, - .offset-by-one.columns { margin-left: 8.66666666667%; } - .offset-by-two.column, - .offset-by-two.columns { margin-left: 17.3333333333%; } - .offset-by-three.column, - .offset-by-three.columns { margin-left: 26%; } - .offset-by-four.column, - .offset-by-four.columns { margin-left: 34.6666666667%; } - .offset-by-five.column, - .offset-by-five.columns { margin-left: 43.3333333333%; } - .offset-by-six.column, - .offset-by-six.columns { margin-left: 52%; } - .offset-by-seven.column, - .offset-by-seven.columns { margin-left: 60.6666666667%; } - .offset-by-eight.column, - .offset-by-eight.columns { margin-left: 69.3333333333%; } - .offset-by-nine.column, - .offset-by-nine.columns { margin-left: 78.0%; } - .offset-by-ten.column, - .offset-by-ten.columns { margin-left: 86.6666666667%; } - .offset-by-eleven.column, - .offset-by-eleven.columns { margin-left: 95.3333333333%; } - - .offset-by-one-third.column, - .offset-by-one-third.columns { margin-left: 34.6666666667%; } - .offset-by-two-thirds.column, - .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } - - .offset-by-one-half.column, - .offset-by-one-half.columns { margin-left: 52%; } - -} - - -/* Base Styles -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* NOTE -html is set to 62.5% so that all the REM measurements throughout Skeleton -are based on 10px sizing. So basically 1.5rem = 15px :) */ -html { - font-size: 62.5%; } -body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ - line-height: 1.6; - font-weight: 400; - font-family: 'Nunito', sans-serif; - color: #222; -} -button { - font-family: 'Nunito', sans-serif; -} - - -/* Larger than phablet */ -@media (min-width: 550px) { - h1 { font-size: 5.0rem; } - h2 { font-size: 4.2rem; } - h3 { font-size: 3.6rem; } - h4 { font-size: 3.0rem; } - h5 { font-size: 2.4rem; } - h6 { font-size: 1.5rem; } -} - -/* Code -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - - -/* Tables -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -th, -td { - padding: 12px 15px; - text-align: left; - border-bottom: 1px solid #E1E1E1; } -th:first-child, -td:first-child { - padding-left: 0; } -th:last-child, -td:last-child { - padding-right: 0; } - - -/* Utilities -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.u-full-width { - width: 100%; - box-sizing: border-box; } -.u-max-full-width { - max-width: 100%; - box-sizing: border-box; } -.u-pull-right { - float: right; } -.u-pull-left { - float: left; } - - -/* Misc -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -hr { - margin-top: 3rem; - margin-bottom: 3.5rem; - border-width: 0; - border-top: 1px solid #E1E1E1; } - - -/* Clearing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -/* Self Clearing Goodness */ -.container:after, -.row:after, -.u-cf { - content: ""; - display: table; - clear: both; } - - -/* Media Queries -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* -Note: The best way to structure the use of media queries is to create the queries -near the relevant code. For example, if you wanted to change the styles for buttons -on small devices, paste the mobile query code up in the buttons section and style it -there. -*/ - - -/* Larger than mobile */ -@media (min-width: 400px) {} - -/* Larger than phablet (also point when grid becomes active) */ -@media (min-width: 550px) {} - -/* Larger than tablet */ -@media (min-width: 750px) {} - -/* Larger than desktop */ -@media (min-width: 1000px) {} - -/* Larger than Desktop HD */ -@media (min-width: 1200px) {} diff --git a/src/scss/settings/_type.scss b/src/scss/settings/_type.scss index b06a1b8..28ad307 100644 --- a/src/scss/settings/_type.scss +++ b/src/scss/settings/_type.scss @@ -4,3 +4,24 @@ $pkpl-font-size-1: 1.2rem; $pkpl-font-size-2: 1.4rem; $pkpl-font-size-3: 1.6rem; $pkpl-font-size-4: 1.8rem; + +$pkpl-color-text: #222; + +.pk-pattern-library { + body { + color: $pkpl-color-text; + font-family: $pkpl-font-family; + font-size: $pkpl-font-size-3; + line-height: 1.6; + } + + @media (min-width: 55rem) { + // stylelint-disable scale-unlimited/declaration-strict-value + h1 { font-size: 5rem; } + h2 { font-size: 4.2rem; } + h3 { font-size: 3.6rem; } + h4 { font-size: 3rem; } + h5 { font-size: 2.4rem; } + h6 { font-size: 1.5rem; } + } +} diff --git a/views/extraHead.html b/views/extraHead.html index d8cddc9..a16560e 100644 --- a/views/extraHead.html +++ b/views/extraHead.html @@ -1 +1,2 @@ - \ No newline at end of file + + diff --git a/views/styleguide.html b/views/styleguide.html index 9c56a77..bf2e7a9 100644 --- a/views/styleguide.html +++ b/views/styleguide.html @@ -1,4 +1,6 @@ {% extends 'layout.html' %} + +{% block bodyClass %}{{ super() }} pk-pattern-library{% endblock %} {% block beforeMain %}{% endblock %} {% block afterMain %}{% endblock %} {% set config = data.config %} From 0c9cd046cf43e4da27b2d3307b3e8cc23b0927c8 Mon Sep 17 00:00:00 2001 From: Alex Bea Date: Wed, 21 Aug 2019 09:03:45 -0500 Subject: [PATCH 03/12] Recompiled assets --- public/css/always.css | 329 +----------------------------------------- public/js/always.js | 183 +---------------------- 2 files changed, 2 insertions(+), 510 deletions(-) diff --git a/public/css/always.css b/public/css/always.css index 760bfda..19e4a1a 100644 --- a/public/css/always.css +++ b/public/css/always.css @@ -1,329 +1,2 @@ -.pkpl__group { - margin-bottom: 6rem; } - -.pkpl__content { - padding: 0 3rem; - -webkit-transition: padding 0.2s; - transition: padding 0.2s; } - -.pkpl__inner { - width: 100%; - padding: 3rem 0; } - -.pkpl__group-title { - font-weight: 100; - margin-bottom: 1rem; } - -.pkpl__description { - margin-bottom: 2rem; - color: #636363; - font-size: 1.8rem; - max-width: 85rem; } - -.pkpl__group-description { - margin-bottom: 1rem; } - -.pkpl__group-meta { - margin-bottom: 4rem; } - -.pkpl__component-title { - font-weight: 300; - margin-bottom: 1rem; } - -.pkpl__components { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -3rem; } - -.pkpl__component { - position: relative; - display: block; - overflow: hidden; - border-radius: 6px 6px 0 0; } - -.pkpl__component-externals { - padding: 1rem; - border: 0.1rem solid #ECECEC; - border-top: none; - border-radius: 0 0 0.6rem 0.6rem; } - .pkpl__component-externals span { - display: block; - color: #000000; - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: 1px; - font-weight: 700; } - .pkpl__component-externals span a { - text-transform: none; - letter-spacing: normal; - font-weight: 400; - margin-left: 0.5rem; - color: #000000; } - -.pkpl__component--border { - padding: 3.6rem; - border: 0.1rem solid #ECECEC; } - -.pkpl__component-hide-code-block { - border-radius: 6px; } - -.pkpl__component-section { - margin-bottom: 4rem; - padding-left: 3rem; } - -.pkpl__sr-only { - position: absolute; - left: -999rem; } - -.pkpl__navigation { - position: fixed; - top: 0; - bottom: 0; - left: 0; - display: none; - min-height: 100%; - overflow-y: scroll; - overflow-x: hidden; - width: 28rem; - border-right: 0.1rem solid #ECECEC; - -webkit-transition: -webkit-transform 0.2s; - transition: -webkit-transform 0.2s; - transition: transform 0.2s; - transition: transform 0.2s, -webkit-transform 0.2s; } - -.pkpl-toggle { - z-index: 9; - position: fixed; - top: 9rem; - left: 25.6rem; - display: none; - padding: 0.5rem 1rem; - border: 0.1rem solid #ECECEC; - border-radius: 6px; - background-color: #FFFFFF; - cursor: pointer; - -webkit-transition: all 0.2s; - transition: all 0.2s; } - -.pkpl-toggle:focus { - outline: 0; } - -.pkpl-toggle:hover img { - opacity: 1; } - -.pkpl-toggle img { - opacity: 0.5; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - -webkit-transition: all 0.2s; - transition: all 0.2s; } - -.pkpl__header-title { - font-weight: 600; - padding: 0 3rem; - font-size: 1.6rem; - text-transform: uppercase; - letter-spacing: 1px; } - -.pkpl__navigation-title { - font-weight: 400; - margin-bottom: 2rem; - padding: 2rem 3rem; - font-size: 1.6rem; } - -.pkpl__navigation-section { - margin-bottom: 6rem; } - -.pkpl__navigation-section-title { - display: block; - font-weight: 700; - margin-bottom: 2rem; - padding: 0 3rem; - color: #000000; - font-size: 1.2rem; - text-transform: uppercase; - text-decoration: none; - letter-spacing: 1px; } - -.pkpl__navigation-group-title { - display: block; - width: 100%; - padding: 2rem 3rem; - border-top: 1px solid #ECECEC; - color: #000000; - font-size: 1.6rem; - text-decoration: none; - text-align: left; - cursor: pointer; } - -.pkpl__navigation-group-title:focus { - outline: 0; } - -.pkpl__navigation-group-toggle.is-active { - border-bottom: 0.1rem solid #ECECEC; } - .pkpl__navigation-group-toggle.is-active::after { - content: '-'; } - -.pkpl__navigation-group-toggle:after { - content: '+'; - float: right; } - -.pkpl__navigation-component-title { - padding: 2rem 4.5rem; - border-top: none; - border-bottom: 0.1rem solid #ECECEC; - color: #636363; - background-color: #f8f8f8; } - -.pkpl__navigation-component-title:after { - display: none; } - -.pkpl__navigation-group-list { - display: none; } - -.pkpl__navigation-group-list.is-active { - display: block; } - -.pkpl__navigation-group-list li:last-of-type a { - border-bottom: none; } - -.pkpl__component-group:last-of-type .pkpl__navigation-group-title { - border-bottom: 1px solid #ECECEC; } - -.pkpl__logo { - width: 100%; - padding: 0 3rem; } - -.pkpl.nav-is-hidden .pkpl__navigation { - -webkit-transform: translate(-28rem); - transform: translate(-28rem); } - -.pkpl.nav-is-hidden .pkpl-toggle { - left: -12px; } - -.pkpl.nav-is-hidden .pkpl-toggle img { - -webkit-transform: none; - transform: none; } - -.pkpl.nav-is-hidden .pkpl-toggle:hover { - left: -5px; } - -.pkpl.nav-is-hidden .pkpl__content { - padding-left: 5rem; } - -.pkpl__markup-toggle { - display: block; - width: 100%; - padding: 0.8rem 0; - border: 0.1rem solid #ECECEC; - border-top-color: transparent; - border-radius: 0 0 0.6rem 0.6rem; - color: #000000; - font-family: "Nunito", sans-serif; - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: 1px; - text-align: center; - cursor: pointer; } - -.pkpl__markup-toggle.is-active { - border-top-color: #ECECEC; } - -.pkpl__markup-toggle:focus { - outline: 0; } - -.pkpl__markup-container { - display: none; - border: 0.1rem solid #ECECEC; - border-top-color: transparent; - border-bottom: none; } - -.pkpl__markup-container.is-active { - display: block; } - -code.hljs { - padding: 3rem; - background-color: #FFFFFF; - font-size: 1.4rem; } - -.pkpl__color-container { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - max-width: 80rem; - margin-left: -4rem; } - -.pkpl__color-section-wrapper { - width: 20%; - margin: 0 0 4rem 4rem; } - -.pkpl__color-section { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - height: 12rem; - border-radius: 0.6rem 0.6rem 0 0; } - -.pkpl__color-meta { - padding: 1rem; - border: 0.1rem solid #ECECEC; - border-top: none; - border-radius: 0 0 0.6rem 0.6rem; } - -.pkpl__color-name { - display: block; - font-weight: 700; - color: #000000; - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: 1px; } - -.pkpl__color-hex { - display: block; - font-size: 1.4rem; } - -.pkpl__color-cmyk { - display: block; - font-size: 1.4rem; } - -.pkpl__color-section span { - padding: 0.6rem; - border: 0.1rem solid #000000; - border-radius: 0.6rem; - color: #000000; - font-size: 1.2rem; } - -span.pkpl__color-inverse { - border-color: #FFFFFF; - color: #FFFFFF; } - -.pkpl__component-border-alt { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; } - -@media only screen and (min-width: 860px) { - .pkpl__navigation { - display: block; } - .pkpl-toggle { - display: block; } - .pkpl__content { - padding: 5rem 3rem 0 31rem; } - .pkpl__component--half { - display: inline-block; - width: 50%; } - .pkpl__component--full { - display: block; - width: 100%; } } +.pk-pattern-library body{color:#222;font-family:"Nunito",sans-serif;font-size:1.6rem;line-height:1.6}@media (min-width: 55rem){.pk-pattern-library h1{font-size:5rem}.pk-pattern-library h2{font-size:4.2rem}.pk-pattern-library h3{font-size:3.6rem}.pk-pattern-library h4{font-size:3rem}.pk-pattern-library h5{font-size:2.4rem}.pk-pattern-library h6{font-size:1.5rem}}.pkpl__group{margin-bottom:6rem}.pkpl__content{padding:0 3rem;transition:padding 0.2s}.pkpl__inner{width:100%;padding:3rem 0}.pkpl__group-title{font-weight:100;margin-bottom:1rem}.pkpl__description{margin-bottom:2rem;color:#636363;font-size:1.8rem;max-width:85rem}.pkpl__group-description{margin-bottom:1rem}.pkpl__group-meta{margin-bottom:4rem}.pkpl__component-title{font-weight:300;margin-bottom:1rem}.pkpl__components{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-3rem}.pkpl__component{position:relative;display:block;overflow:hidden;border-radius:6px 6px 0 0}.pkpl__component-externals{padding:1rem;border:0.1rem solid #ECECEC;border-top:none;border-radius:0 0 0.6rem 0.6rem}.pkpl__component-externals span{display:block;color:#000;font-size:1.2rem;text-transform:uppercase;letter-spacing:1px;font-weight:700}.pkpl__component-externals span a{text-transform:none;letter-spacing:normal;font-weight:400;margin-left:0.5rem;color:#000}.pkpl__component--border{padding:3.6rem;border:0.1rem solid #ECECEC}.pkpl__component-hide-code-block{border-radius:6px}.pkpl__component-section{margin-bottom:4rem;padding-left:3rem}.pkpl__sr-only{position:absolute;left:-999rem}.pkpl__navigation{position:fixed;top:0;bottom:0;left:0;display:none;min-height:100%;overflow-y:scroll;overflow-x:hidden;width:28rem;border-right:0.1rem solid #ECECEC;transition:transform 0.2s}.pkpl-toggle{z-index:9;position:fixed;top:9rem;left:25.6rem;display:none;padding:0.5rem 1rem;border:0.1rem solid #ECECEC;border-radius:6px;background-color:#fff;cursor:pointer;transition:all 0.2s}.pkpl-toggle:focus{outline:0}.pkpl-toggle:hover img{opacity:1}.pkpl-toggle img{opacity:0.5;transform:rotate(180deg);transition:all 0.2s}.pkpl__header-title{font-weight:600;padding:0 3rem;font-size:1.6rem;text-transform:uppercase;letter-spacing:1px}.pkpl__navigation-title{font-weight:400;margin-bottom:2rem;padding:2rem 3rem;font-size:1.6rem}.pkpl__navigation-section{margin-bottom:6rem}.pkpl__navigation-section-title{display:block;font-weight:700;margin-bottom:2rem;padding:0 3rem;color:#000;font-size:1.2rem;text-transform:uppercase;text-decoration:none;letter-spacing:1px}.pkpl__navigation-group-title{display:block;width:100%;padding:2rem 3rem;border-top:1px solid #ECECEC;color:#000;font-size:1.6rem;text-decoration:none;text-align:left;cursor:pointer}.pkpl__navigation-group-title:focus{outline:0}.pkpl__navigation-group-toggle.is-active{border-bottom:0.1rem solid #ECECEC}.pkpl__navigation-group-toggle.is-active::after{content:'-'}.pkpl__navigation-group-toggle:after{content:'+';float:right}.pkpl__navigation-component-title{padding:2rem 4.5rem;border-top:none;border-bottom:0.1rem solid #ECECEC;color:#636363;background-color:#f8f8f8}.pkpl__navigation-component-title:after{display:none}.pkpl__navigation-group-list{display:none}.pkpl__navigation-group-list.is-active{display:block}.pkpl__navigation-group-list li:last-of-type a{border-bottom:none}.pkpl__component-group:last-of-type .pkpl__navigation-group-title{border-bottom:1px solid #ECECEC}.pkpl__logo{width:100%;padding:0 3rem}.pkpl.nav-is-hidden .pkpl__navigation{transform:translate(-28rem)}.pkpl.nav-is-hidden .pkpl-toggle{left:-12px}.pkpl.nav-is-hidden .pkpl-toggle img{transform:none}.pkpl.nav-is-hidden .pkpl-toggle:hover{left:-5px}.pkpl.nav-is-hidden .pkpl__content{padding-left:5rem}.pkpl__markup-toggle{display:block;width:100%;padding:0.8rem 0;border:0.1rem solid #ECECEC;border-top-color:rgba(0,0,0,0);border-radius:0 0 0.6rem 0.6rem;color:#000;font-family:"Nunito",sans-serif;font-size:1.2rem;text-transform:uppercase;letter-spacing:1px;text-align:center;cursor:pointer}.pkpl__markup-toggle.is-active{border-top-color:#ECECEC}.pkpl__markup-toggle:focus{outline:0}.pkpl__markup-container{display:none;border:0.1rem solid #ECECEC;border-top-color:rgba(0,0,0,0);border-bottom:none}.pkpl__markup-container.is-active{display:block}code.hljs{padding:3rem;background-color:#fff;font-size:1.4rem}.pkpl__color-container{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:80rem;margin-left:-4rem}.pkpl__color-section-wrapper{width:20%;margin:0 0 4rem 4rem}.pkpl__color-section{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:12rem;border-radius:0.6rem 0.6rem 0 0}.pkpl__color-meta{padding:1rem;border:0.1rem solid #ECECEC;border-top:none;border-radius:0 0 0.6rem 0.6rem}.pkpl__color-name{display:block;font-weight:700;color:#000;font-size:1.2rem;text-transform:uppercase;letter-spacing:1px}.pkpl__color-hex{display:block;font-size:1.4rem}.pkpl__color-cmyk{display:block;font-size:1.4rem}.pkpl__color-section span{padding:0.6rem;border:0.1rem solid #000;border-radius:0.6rem;color:#000;font-size:1.2rem}span.pkpl__color-inverse{border-color:#fff;color:#fff}.pkpl__component-border-alt{border-bottom-right-radius:0;border-bottom-left-radius:0}@media only screen and (min-width: 860px){.pkpl__navigation{display:block}.pkpl-toggle{display:block}.pkpl__content{padding:5rem 3rem 0 31rem}.pkpl__component--half{display:inline-block;width:50%}.pkpl__component--full{display:block;width:100%}} diff --git a/public/js/always.js b/public/js/always.js index 29922d8..4836cf6 100644 --- a/public/js/always.js +++ b/public/js/always.js @@ -1,182 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); -/******/ } -/******/ }; -/******/ -/******/ // define __esModule on exports -/******/ __webpack_require__.r = function(exports) { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ -/******/ // create a fake namespace object -/******/ // mode & 1: value is a module id, require it -/******/ // mode & 2: merge all properties of value into the ns -/******/ // mode & 4: return value when already ns object -/******/ // mode & 8|1: behave like require -/******/ __webpack_require__.t = function(value, mode) { -/******/ if(mode & 1) value = __webpack_require__(value); -/******/ if(mode & 8) return value; -/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; -/******/ var ns = Object.create(null); -/******/ __webpack_require__.r(ns); -/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); -/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); -/******/ return ns; -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/index.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js!./src/scss/site.scss": -/*!***********************************************************************************************************************************************************************************************!*\ - !*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader!./node_modules/postcss-loader/src??ref--7!./node_modules/sass-loader/lib/loader.js!./src/scss/site.scss ***! - \***********************************************************************************************************************************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -eval("// extracted by mini-css-extract-plugin\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvc2Nzcy9zaXRlLnNjc3M/ZTBlMCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiIuL25vZGVfbW9kdWxlcy9taW5pLWNzcy1leHRyYWN0LXBsdWdpbi9kaXN0L2xvYWRlci5qcyEuL25vZGVfbW9kdWxlcy9jc3MtbG9hZGVyL2luZGV4LmpzIS4vbm9kZV9tb2R1bGVzL3Bvc3Rjc3MtbG9hZGVyL3NyYy9pbmRleC5qcz8hLi9ub2RlX21vZHVsZXMvc2Fzcy1sb2FkZXIvbGliL2xvYWRlci5qcyEuL3NyYy9zY3NzL3NpdGUuc2Nzcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8vIGV4dHJhY3RlZCBieSBtaW5pLWNzcy1leHRyYWN0LXBsdWdpbiJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/index.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js!./src/scss/site.scss\n"); - -/***/ }), - -/***/ "./node_modules/style-loader/lib/addStyles.js": -/*!****************************************************!*\ - !*** ./node_modules/style-loader/lib/addStyles.js ***! - \****************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -eval("/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n\nvar stylesInDom = {};\n\nvar\tmemoize = function (fn) {\n\tvar memo;\n\n\treturn function () {\n\t\tif (typeof memo === \"undefined\") memo = fn.apply(this, arguments);\n\t\treturn memo;\n\t};\n};\n\nvar isOldIE = memoize(function () {\n\t// Test for IE <= 9 as proposed by Browserhacks\n\t// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n\t// Tests for existence of standard globals is to allow style-loader\n\t// to operate correctly into non-standard environments\n\t// @see https://github.com/webpack-contrib/style-loader/issues/177\n\treturn window && document && document.all && !window.atob;\n});\n\nvar getTarget = function (target) {\n return document.querySelector(target);\n};\n\nvar getElement = (function (fn) {\n\tvar memo = {};\n\n\treturn function(target) {\n // If passing function in options, then use it for resolve \"head\" element.\n // Useful for Shadow Root style i.e\n // {\n // insertInto: function () { return document.querySelector(\"#foo\").shadowRoot }\n // }\n if (typeof target === 'function') {\n return target();\n }\n if (typeof memo[target] === \"undefined\") {\n\t\t\tvar styleTarget = getTarget.call(this, target);\n\t\t\t// Special case to return head of iframe instead of iframe itself\n\t\t\tif (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n\t\t\t\ttry {\n\t\t\t\t\t// This will throw an exception if access to iframe is blocked\n\t\t\t\t\t// due to cross-origin restrictions\n\t\t\t\t\tstyleTarget = styleTarget.contentDocument.head;\n\t\t\t\t} catch(e) {\n\t\t\t\t\tstyleTarget = null;\n\t\t\t\t}\n\t\t\t}\n\t\t\tmemo[target] = styleTarget;\n\t\t}\n\t\treturn memo[target]\n\t};\n})();\n\nvar singleton = null;\nvar\tsingletonCounter = 0;\nvar\tstylesInsertedAtTop = [];\n\nvar\tfixUrls = __webpack_require__(/*! ./urls */ \"./node_modules/style-loader/lib/urls.js\");\n\nmodule.exports = function(list, options) {\n\tif (typeof DEBUG !== \"undefined\" && DEBUG) {\n\t\tif (typeof document !== \"object\") throw new Error(\"The style-loader cannot be used in a non-browser environment\");\n\t}\n\n\toptions = options || {};\n\n\toptions.attrs = typeof options.attrs === \"object\" ? options.attrs : {};\n\n\t// Force single-tag solution on IE6-9, which has a hard limit on the # of