diff options
| author | cssandstuff <github@cssandstuff.com> | 2018-07-06 05:39:23 +0300 |
|---|---|---|
| committer | cssandstuff <github@cssandstuff.com> | 2018-07-06 05:39:23 +0300 |
| commit | c6248b32f0f806f543bd485a4086e5b22bfb7584 (patch) | |
| tree | 6336bddd792fb1fda3833f5ea7c3da6e5f9d37ac | |
first commit
55 files changed, 8284 insertions, 0 deletions
diff --git a/config.toml b/config.toml new file mode 100644 index 0000000..ed77eb0 --- /dev/null +++ b/config.toml @@ -0,0 +1,7 @@ +disableKinds = ["RSS"] +defaultContentLanguage = "en" +enableRobotsTXT = true +languageCode = "en-us" +theme = "winning" +title = "CV Tim Clulow" +[taxonomies] diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..715f773 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,72 @@ +--- +title: CV +--- +# Your name here +Bacon ipsum dolor amet bacon filet mignon bresaola, pork burgdoggen shankle doner. Tenderloin short loin bresaola landjaeger porchetta. Swine venison salami brisket ground round biltong chuck short ribs ribeye shoulder leberkas sausage shankle. Pork chop ground round ball tip picanha. Pig salami biltong buffalo sausage rump ball tip. Pork loin shoulder biltong, meatloaf leberkas cupim chuck. + +{{% grid %}} + +{{% column -span-cols-6 -m-right-2 %}} +## Professional Experience +###### *May 2015 - Present* +### Company A — UI/UX Lead + +Bacon ipsum dolor amet bacon filet mignon bresaola, pork burgdoggen shankle doner. Tenderloin short loin bresaola landjaeger porchetta. Swine venison salami brisket ground round biltong chuck short ribs ribeye shoulder leberkas sausage shankle. Pork chop ground round ball tip picanha. Pig salami biltong buffalo sausage rump ball tip. Pork loin shoulder biltong, meatloaf leberkas cupim chuck. + +* Leberkas sausage shankle. Pork chop ground round ball tip picanha. +* Gamet bacon filet mignon bresaola, pork burgdoggen shankle doner. Tenderloin +* Pig salami biltong buffalo sausage rump ball tip. Pork loin shoulder biltong + + +###### *September 2010 - April 2015* +### Company B — Managing Director/Owner + +Swine venison salami brisket ground round biltong chuck short ribs ribeye + +* Leberkas sausage shankle. Pork chop ground round ball tip picanha. +* Pig salami biltong buffalo sausage rump ball tip. Pork loin shoulder biltong + + +{{% /column %}} + +{{% column -span-cols-4 -p-left-3 %}} +#### Fluent with + * Sketch + * Adobe Illustrator + * Photoshop + * Fireworks + * HTML5 + * CSS3, grid and flexbox + * SVG animation & GSAP + * PostCSS & Sass + +#### Familiar with + * Node.js + * Riot.Js + * Hugo.io (Static site generator) + +#### Interested in + * Web components + * Svelte + Sapper + * WebVR / A-Frame + + +#### Other Info +{{% dd %}} +- **Language:** + 1. I can speak English +- **Napoleon:** + 1. I have numchuck skills too +{{% /dd %}} + + +## Hobbies/Interests +I have interests... + +{{% printonly %}} +## References +Please contact me at [youremail@email.com](mailto:youremail@email.com) for references. +{{% /printonly %}} + +{{% /column %}} +{{% /grid %}} diff --git a/docs/assets/tim-clulow-cv.pdf b/docs/assets/tim-clulow-cv.pdf Binary files differnew file mode 100644 index 0000000..76420ce --- /dev/null +++ b/docs/assets/tim-clulow-cv.pdf diff --git a/docs/css/belmu.css b/docs/css/belmu.css new file mode 100644 index 0000000..47479b5 --- /dev/null +++ b/docs/css/belmu.css @@ -0,0 +1,2656 @@ + +/* To learn how to use BELMU refer to the guide at ----- */ + +/* BASE + –––– */ + +/* + * Fix + * Version 0.1.1 + * https://github.com/jaydenseric/Fix +*/ + +*{ + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: transparent; +} + +body { + margin: 0; + line-height: 1; + font-family: sans-serif; +} + +iframe { + border: 0; +} + +main { + display: block; +} + +ul, +ol { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; +} + +li { + display: block; +} + +dl { + margin-top: 0; + margin-bottom: 0; +} + +dd { + margin-left: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 1.6em; + margin-bottom: 0.1em; + font-size: inherit; +} + +blockquote { + margin: 0; + padding: 0; +} + +p { + margin-top: 0; + margin-bottom: 0; +} + +sup { + position: relative; + top: -.5em; + vertical-align: baseline; + font-size: 75%; + line-height: 0; +} + +strong { + font-weight: bold; +} + +figure { + margin: 0; +} + +img { + border: 0; + max-width: 100%; + height: auto; + vertical-align: middle; +} + +a { + text-decoration: none; + color: inherit; +} + +button { + border: 0; + margin: 0; + padding: 0; + text-align: inherit; + text-transform: inherit; + font: inherit; + -webkit-font-smoothing: inherit; + letter-spacing: inherit; + background: none; + cursor: pointer; + overflow: visible; +} + +::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* -- Colours (HSL Colours are good) + ––––––––––––––––––––––––––––––––– */ + +:root{ + --core-white: 0, 100%; + --core-black: 0, 0%; + --core-grey: 220, 30%; + --white: hsl( var(--core-white), 100% ); + --black: hsl( var(--core-black), 0% ); + + --grey: hsl( var(--core-grey), 60%); + --grey-900: hsl( var(--core-grey), 30% ); + --grey-800: hsl( var(--core-grey), 40% ); + --grey-700: hsl( var(--core-grey), 50% ); + --grey-600: hsl( var(--core-grey), 60% ); + --grey-500: hsl( var(--core-grey), 70% ); + --grey-400: hsl( var(--core-grey), 80% ); + --grey-300: hsl( var(--core-grey), 94% ); + --grey-200: hsl( var(--core-grey), 96% ); + --grey-100: hsl( var(--core-grey), 98% ); + + --black: hsl( var(--core-black), 0% ); + --black-900: hsl( var(--core-black), 10% ); + --black-800: hsl( var(--core-black), 20% ); + --black-700: hsl( var(--core-black), 30% ); + --black-600: hsl( var(--core-black), 40% ); + --black-500: hsl( var(--core-black), 50% ); + --black-400: hsl( var(--core-black), 60% ); + --black-300: hsl( var(--core-black), 70% ); + --black-200: hsl( var(--core-black), 80% ); + --black-100: hsl( var(--core-black), 90% ); + + --black-900a: hsla( var(--core-black), 0%, 0.9 ); + --black-800a: hsla( var(--core-black), 0%, 0.8 ); + --black-700a: hsla( var(--core-black), 0%, 0.7 ); + --black-600a: hsla( var(--core-black), 0%, 0.6 ); + --black-500a: hsla( var(--core-black), 0%, 0.5 ); + --black-400a: hsla( var(--core-black), 0%, 0.4 ); + --black-300a: hsla( var(--core-black), 0%, 0.3 ); + --black-200a: hsla( var(--core-black), 0%, 0.2 ); + --black-100a: hsla( var(--core-black), 0%, 0.1 ); + + --white-900a: hsla( var(--core-white), 100%, 0.9 ); + --white-800a: hsla( var(--core-white), 100%, 0.8 ); + --white-700a: hsla( var(--core-white), 100%, 0.7 ); + --white-600a: hsla( var(--core-white), 100%, 0.6 ); + --white-500a: hsla( var(--core-white), 100%, 0.5 ); + --white-400a: hsla( var(--core-white), 100%, 0.4 ); + --white-300a: hsla( var(--core-white), 100%, 0.3 ); + --white-200a: hsla( var(--core-white), 100%, 0.2 ); + --white-100a: hsla( var(--core-white), 100%, 0.1 ); + + --borders-dark: hsla(var(--black), 0.1); + --borders-light: hsla(var(--white), 0.1); + + /* FILTERS (Experimental) */ + --filterwhite: grayscale(100%) brightness(10); +} + +/* -- Fonts + –––––––– */ + +/* do some font-face calls in here if you need to +@font-face { + font-family: "Futura W01"; + src: url("/fonts/FuturaStd-Heavy-subset.woff"); + font-style: normal; + font-weight: 600; + text-rendering: optimizeLegibility; +} +*/ + +/* -- Inputs + ––––––––– */ + +.input{ + font-family: var(--bookweight); + font-size: var(--rem-1); + font-size: var(--rem-1); + + color: var(--grey-100); + background: var(--grey-300); + + border-radius: var(--border-radius); + border: 0; + padding: calc(var(--spacing) * 0.66667) var(--spacing); + + -webkit-transition: var(--transition-all); + + transition: var(--transition-all); +} + +.input:focus{ + outline: none; +} + +.input:hover{ + background: var(--grey-100); +} + +.disabled .input{ + pointer-events: none; + opacity: 0.3; +} + +/* -- Typography + ––––––––––––– */ + +:root{ + --sans: sans-serif; + --bookweight: 500; + --heavyweight: 600; + --boldweight: 700; + --extraboldweight: 800; + + /* Font size helpers */ + --rem-2: 32px; + --rem-2: 2rem; + --rem-1: 16px; + --rem-1: 1rem; + --rem-1-2: 19.2px; + --rem-1-2: 1.2rem; + --rem-09: 14.4px; + --rem-09: 0.9rem; + --rem-085: 13.6px; + --rem-085: 0.85rem; + --rem-08: 12.8px; + --rem-08: 0.8rem; + --rem-075: 11.2px; + --rem-075: 0.7rem; + --rem-07: 11.2px; + --rem-07: 0.7rem; + --rem-06: 9.6px; + --rem-06: 0.6rem; +} + +body{ + font-family: var(--sans); + font-weight: var(--bookweight); +} + +h1, h2, h3, h4, h5, h6{ + font-weight: var(--boldweight); + color: var(--black); + margin-bottom: var(--spacing); +} + +p{ + margin: var(--spacing) 0; +} + +h1{ + font-size: var(--rem-2); + font-size: var(--rem-2); +} + +h2{ + font-size: var(--rem-1-2); + font-size: var(--rem-1-2); +} + +h3{ + font-size: var(--rem-1); + font-size: var(--rem-1); +} + +h4{ + font-size: var(--rem-08); + font-size: var(--rem-08); +} + +h5{ + font-size: var(--rem-07); + font-size: var(--rem-07); +} + +h6{ + font-size: var(--rem-07); + font-size: var(--rem-07); +} + +p{ + font-family: var(--sans); + font-weight: var(--bookweight); +} + +label{ + display: block; + font-family: var(--sans); + font-weight: var(--heavyweight); + font-size: var(--rem-08); + font-size: var(--rem-08); + color: var(--black); + margin-bottom: calc(var(--spacing) * 0.5); +} + +a:link, a:active, a:link { + color: var(--primary); +} + +/* -- Vars + ––––––– */ + +:root{ + --spacing: 15px; + --spacing: 0.9375rem; + --border-radius: 4.8px; + --border-radius: 0.3rem; + --transition-all: 0.36s all; +} + +/* +@styleguide + +@title Base +<h1 class="-upcase -lightweight"> +Base +</h1> +<p>Base contains a normalize in the form of fix (https://github.com/jaydenseric/Fix). Base typography, forms and variables declared here.</p> +*/ + +/* ENGINE + –––––– */ + +/* -- Icons + –––––––– */ + +/* +@styleguide + +@title Engine +<h1 class="-upcase -lightweight"> +Engine +</h1> +<p>The ideal is to have no Engine and just go completely vanila. But when you need things like svg icons, or other useful mixins you can define them here and build with postcss.</p> +*/ + +/* -- Triangles + –––––––––––– */ + +/* todo: make this work +@define-mixin tirangle, $direction, $colour: var(--black){ + border-radius: 2rem; + &:before { + content: ""; + position: absolute; + top: 7px; + left: -10px; + display: block; + border: 5px solid $colour; + border-color: transparent $colour transparent transparent; + } +}*/ + +/* LAYOUT + –––––– */ + +/* -- Grid + ––––––– */ + +.grid{ + display: block; + clear: both; +} + +.grid .col{ + float: left; + border: 0.5em solid #fff; +} + +@supports (display: grid){ + .grid{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(calc(10% - 1em), 1fr)); + grid-gap: 1em 1em; + grid-auto-flow: dense; + } + .grid .col{ + float: none; + border: 0; + } + .grid.gutterless{ + grid-template-columns: repeat(auto-fit, minmax(10%, 1fr)); + grid-gap: 0; + } + + .grid-12{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(calc(8.3333% - 1em), 1fr)); + grid-gap: 1em 1em; + grid-auto-flow: dense; + } + .grid-12s.gutterless{ + grid-template-columns: repeat(auto-fit, minmax(8.3333%, 1fr)); + grid-gap: 0; + } + + .grid-16{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(calc(6.25% - 1em), 1fr)); + grid-gap: 1em 1em; + grid-auto-flow: dense; + } + .grid-16.gutterless{ + grid-template-columns: repeat(auto-fit, minmax(6.25%, 1fr)); + grid-gap: 0; + } + + .grid-auto{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + grid-gap: 1em 1em; + grid-auto-flow: dense; + } + + /* experimental features */ + @media (max-width: 34em) { + .grid.mq-small-full > .col, + .grid-12.mq-small-full > .col, + .grid-16.mq-small-full > .col{ + grid-column: 1 / -1 !important; + width: auto !important; + margin: 0 !important; + } + + .grid.mq-small-half > .col{ + grid-column: span 5 !important; + } + .grid-12.mq-small-half > .col{ + grid-column: span 6 !important; + } + .grid-16.mq-small-half > .col{ + grid-column: span 8 !important; + } + .grid.mq-small-full > .col, + .grid-12.mq-small-full > .col, + .grid-16.mq-small-full > .col{ + width: auto !important; + margin: 0 !important; + } + } +} + +/* +@styleguide + +@title Layout Grid +<h1 class="-upcase -lightweight"> +Layout +</h1> +<div class="grid mq-small-half"> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div> + </div> +</div> +<div class="grid -m-top-3 mq-small-full"> + <div class="col -span-cols-8"> + <div class="-bg-grey-300 -h-100 -p-all-1">Hi I'm an 80% column!</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">Hi I'm a 20% column!</div> + </div> + <div class="col -w-100 m-top-1"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a 100% column!</div> + </div> + <div class="col -w-80 -offset-left-20 m-top-1"> + <div class="-bg-grey-300 -p-all-1">Hi I'm an offset colum</div> + </div> +</div> + +<strong>12 column grid</strong> +<div class="grid-12 mq-small-full"> + <div class="col -span-cols-9"> + <div class="-bg-grey-300 -h-100 -p-all-1">9 cols</div> + </div> + <div class="col -span-cols-3"> + <div class="-bg-grey-300 -h-100 -p-all-1">3 cols!</div> + </div> +</div> + +<strong>16 column grid</strong> +<div class="grid-16 mq-small-full"> + <div class="col -span-cols-4"> + <div class="-bg-grey-300 -h-100 -p-all-1">4 cols</div> + </div> + <div class="col -span-cols-4"> + <div class="-bg-grey-300 -h-100 -p-all-1">4 cols</div> + </div> + <div class="col -span-cols-4"> + <div class="-bg-grey-300 -h-100 -p-all-1">4 cols</div> + </div> + <div class="col -span-cols-1"> + <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div> + </div> + <div class="col -span-cols-1"> + <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div> + </div> + <div class="col -span-cols-1"> + <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div> + </div> + <div class="col -span-cols-1"> + <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> +</div> + +<strong>Fixed Width</strong> +<div class="grid"> + <div class="col -w-100"> + <div class="-bg-grey-300 -p-all-1 grid mq-small-full"> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">1</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">2</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">3</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">4</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">5</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">6</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">7</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">8</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">9</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">10</div> + </div> + </div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">1</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">2</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">3</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">4</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">5</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">6</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">7</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">8</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">9</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">10</div> + </div> +</div> + +<strong>Auto Width</strong> +<div class="grid-auto"> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">1</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">2</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">3</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">4</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">5</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">6</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">7</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">8</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">9</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">10</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">11</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">12</div> + </div> +</div> + +<strong>Gutterless Grid</strong> +<div class="grid gutterless"> + <div class="col -w-80"> + <div class="-bg-grey-300 -p-all-1">Hi I'm an 80% column!</div> + </div> + <div class="col -w-20"> + <div class="-bg-grey-100 -p-all-1">Hi I'm a 20% column!</div> + </div> + <div class="col -w-100"> + <div class="-bg-grey-500 -p-all-1">Hi I'm a 100% column!</div> + </div> +</div> +*/ + +/* -- Flex + ––––––– */ + +.flex{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap + /*padding-top: 1px;*/ +} + +.flex.gutterless .item{ + padding: 0; +} + +.flex .item{ + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-item-align: stretch; + align-self: stretch; + padding: calc(var(--spacing) * 0.5); +} + +.flex .item.gutterless{ + padding: 0; +} + +/* +@styleguide + +@title Flex +<div class="flex"> + <div class="item"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div> + </div> + <div class="item"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div> + </div> + <div class="item"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div> + </div> + <div class="item"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div> + </div> +</div> + +<strong>Gutterless Flex</strong> +<div class="flex gutterless"> + <div class="item -w-80"> + <div class="-bg-grey-300 -p-all-1">Hi I'm an 80% item!</div> + </div> + <div class="item -w-20"> + <div class="-bg-grey-100 -p-all-1">Hi I'm a 20% item!</div> + </div> + <div class="item -w-100"> + <div class="-bg-grey-500 -p-all-1">Hi I'm a 100% item!</div> + </div> +</div> +*/ + +/* MODULE + –––––– */ + +/* +@styleguide + +@title Module +<h1 class="-upcase -lightweight"> +Module +</h1> +<p>CSS for your Modules/Molecules live here, What is a molecule in css? - check out Brad Frost's pattern lab (http://patternlab.io/)</p> +*/ + +/* UTILITY + ––––––– */ + +/* -- Display + –––––––––– */ + +.-d-block{ + display: block; +} + +.-d-inline-block{ + display: inline-block; +} + +.-d-flex{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + -ms-flex-direction: row; + flex-direction: row; +} + +/* -- Colours + –––––––––– */ + +.-white { color: var(--white); } + +.-bg-white { background: var(--white); } + +.-bg-grey { background: var(--grey); } + +.-bg-grey-100 { background: var(--grey-100); } + +.-bg-grey-200 { background: var(--grey-200); } + +.-bg-grey-300 { background: var(--grey-300); } + +.-bg-grey-500 { background: var(--grey-500); } + +.-bg-grey-900 { background: var(--grey-900); } + +/* +@styleguide + +@title Utility +<h1 class="-upcase -lightweight"> +Utility +</h1> +All Utility classes go here. +<p>Where are my Utilities? </p> +*/ + +/* -- Floats + ––––––––– */ + +.-float-right{ + float: right; +} + +.-float-left{ + float: left; +} + +/* -- Percentages + –––––––––––––– */ + +/* WIDTHS, HEIGHTS & OFFSETS */ + +.-w-10 { + width: 10%; + } + +@supports (display: grid){ + .-w-10 { + width: 10% !important + } + .-w-10.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 1; + } + + .-h-10 { + height: 10% !important + } + + .-h-10.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 1; + } + + .-vw-10 { + width: 10% !important; + } + .-vh-10 { + height: 10% !important; + } + .-offset-top-10 { + grid-column-start: 1; + } + .-m-offset-top-10 { + margin-top: 10%; + } + .-offset-right-10 { + grid-column-start: 1; + } + .-m-offset-right-10 { + margin-right: 10%; + } + .-offset-bottom-10 { + grid-column-start: 1; + } + .-m-offset-bottom-10 { + margin-bottom: 10%; + } + .-offset-left-10 { + grid-column-start: 1; + } + .-m-offset-left-10 { + margin-left: 10%; + } + } + +.-w-12 { + width: 12%; + } + +@supports (display: grid){ + .-w-12 { + width: 12% !important + } + .-w-12.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 1.2000000000000002; + } + + .-h-12 { + height: 12% !important + } + + .-h-12.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 1.2000000000000002; + } + + .-vw-12 { + width: 12% !important; + } + .-vh-12 { + height: 12% !important; + } + .-offset-top-12 { + grid-column-start: 1.2000000000000002; + } + .-m-offset-top-12 { + margin-top: 12%; + } + .-offset-right-12 { + grid-column-start: 1.2000000000000002; + } + .-m-offset-right-12 { + margin-right: 12%; + } + .-offset-bottom-12 { + grid-column-start: 1.2000000000000002; + } + .-m-offset-bottom-12 { + margin-bottom: 12%; + } + .-offset-left-12 { + grid-column-start: 1.2000000000000002; + } + .-m-offset-left-12 { + margin-left: 12%; + } + } + +.-w-14 { + width: 14%; + } + +@supports (display: grid){ + .-w-14 { + width: 14% !important + } + .-w-14.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 1.4000000000000001; + } + + .-h-14 { + height: 14% !important + } + + .-h-14.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 1.4000000000000001; + } + + .-vw-14 { + width: 14% !important; + } + .-vh-14 { + height: 14% !important; + } + .-offset-top-14 { + grid-column-start: 1.4000000000000001; + } + .-m-offset-top-14 { + margin-top: 14%; + } + .-offset-right-14 { + grid-column-start: 1.4000000000000001; + } + .-m-offset-right-14 { + margin-right: 14%; + } + .-offset-bottom-14 { + grid-column-start: 1.4000000000000001; + } + .-m-offset-bottom-14 { + margin-bottom: 14%; + } + .-offset-left-14 { + grid-column-start: 1.4000000000000001; + } + .-m-offset-left-14 { + margin-left: 14%; + } + } + +.-w-15 { + width: 15%; + } + +@supports (display: grid){ + .-w-15 { + width: 15% !important + } + .-w-15.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 1.5; + } + + .-h-15 { + height: 15% !important + } + + .-h-15.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 1.5; + } + + .-vw-15 { + width: 15% !important; + } + .-vh-15 { + height: 15% !important; + } + .-offset-top-15 { + grid-column-start: 1.5; + } + .-m-offset-top-15 { + margin-top: 15%; + } + .-offset-right-15 { + grid-column-start: 1.5; + } + .-m-offset-right-15 { + margin-right: 15%; + } + .-offset-bottom-15 { + grid-column-start: 1.5; + } + .-m-offset-bottom-15 { + margin-bottom: 15%; + } + .-offset-left-15 { + grid-column-start: 1.5; + } + .-m-offset-left-15 { + margin-left: 15%; + } + } + +.-w-18 { + width: 18%; + } + +@supports (display: grid){ + .-w-18 { + width: 18% !important + } + .-w-18.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 1.8; + } + + .-h-18 { + height: 18% !important + } + + .-h-18.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 1.8; + } + + .-vw-18 { + width: 18% !important; + } + .-vh-18 { + height: 18% !important; + } + .-offset-top-18 { + grid-column-start: 1.8; + } + .-m-offset-top-18 { + margin-top: 18%; + } + .-offset-right-18 { + grid-column-start: 1.8; + } + .-m-offset-right-18 { + margin-right: 18%; + } + .-offset-bottom-18 { + grid-column-start: 1.8; + } + .-m-offset-bottom-18 { + margin-bottom: 18%; + } + .-offset-left-18 { + grid-column-start: 1.8; + } + .-m-offset-left-18 { + margin-left: 18%; + } + } + +.-w-20 { + width: 20%; + } + +@supports (display: grid){ + .-w-20 { + width: 20% !important + } + .-w-20.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 2; + } + + .-h-20 { + height: 20% !important + } + + .-h-20.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 2; + } + + .-vw-20 { + width: 20% !important; + } + .-vh-20 { + height: 20% !important; + } + .-offset-top-20 { + grid-column-start: 2; + } + .-m-offset-top-20 { + margin-top: 20%; + } + .-offset-right-20 { + grid-column-start: 2; + } + .-m-offset-right-20 { + margin-right: 20%; + } + .-offset-bottom-20 { + grid-column-start: 2; + } + .-m-offset-bottom-20 { + margin-bottom: 20%; + } + .-offset-left-20 { + grid-column-start: 2; + } + .-m-offset-left-20 { + margin-left: 20%; + } + } + +.-w-22 { + width: 22%; + } + +@supports (display: grid){ + .-w-22 { + width: 22% !important + } + .-w-22.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 2.2; + } + + .-h-22 { + height: 22% !important + } + + .-h-22.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 2.2; + } + + .-vw-22 { + width: 22% !important; + } + .-vh-22 { + height: 22% !important; + } + .-offset-top-22 { + grid-column-start: 2.2; + } + .-m-offset-top-22 { + margin-top: 22%; + } + .-offset-right-22 { + grid-column-start: 2.2; + } + .-m-offset-right-22 { + margin-right: 22%; + } + .-offset-bottom-22 { + grid-column-start: 2.2; + } + .-m-offset-bottom-22 { + margin-bottom: 22%; + } + .-offset-left-22 { + grid-column-start: 2.2; + } + .-m-offset-left-22 { + margin-left: 22%; + } + } + +.-w-24 { + width: 24%; + } + +@supports (display: grid){ + .-w-24 { + width: 24% !important + } + .-w-24.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 2.4000000000000004; + } + + .-h-24 { + height: 24% !important + } + + .-h-24.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 2.4000000000000004; + } + + .-vw-24 { + width: 24% !important; + } + .-vh-24 { + height: 24% !important; + } + .-offset-top-24 { + grid-column-start: 2.4000000000000004; + } + .-m-offset-top-24 { + margin-top: 24%; + } + .-offset-right-24 { + grid-column-start: 2.4000000000000004; + } + .-m-offset-right-24 { + margin-right: 24%; + } + .-offset-bottom-24 { + grid-column-start: 2.4000000000000004; + } + .-m-offset-bottom-24 { + margin-bottom: 24%; + } + .-offset-left-24 { + grid-column-start: 2.4000000000000004; + } + .-m-offset-left-24 { + margin-left: 24%; + } + } + +.-w-25 { + width: 25%; + } + +@supports (display: grid){ + .-w-25 { + width: 25% !important + } + .-w-25.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 2.5; + } + + .-h-25 { + height: 25% !important + } + + .-h-25.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 2.5; + } + + .-vw-25 { + width: 25% !important; + } + .-vh-25 { + height: 25% !important; + } + .-offset-top-25 { + grid-column-start: 2.5; + } + .-m-offset-top-25 { + margin-top: 25%; + } + .-offset-right-25 { + grid-column-start: 2.5; + } + .-m-offset-right-25 { + margin-right: 25%; + } + .-offset-bottom-25 { + grid-column-start: 2.5; + } + .-m-offset-bottom-25 { + margin-bottom: 25%; + } + .-offset-left-25 { + grid-column-start: 2.5; + } + .-m-offset-left-25 { + margin-left: 25%; + } + } + +.-w-30 { + width: 30%; + } + +@supports (display: grid){ + .-w-30 { + width: 30% !important + } + .-w-30.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 3; + } + + .-h-30 { + height: 30% !important + } + + .-h-30.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 3; + } + + .-vw-30 { + width: 30% !important; + } + .-vh-30 { + height: 30% !important; + } + .-offset-top-30 { + grid-column-start: 3; + } + .-m-offset-top-30 { + margin-top: 30%; + } + .-offset-right-30 { + grid-column-start: 3; + } + .-m-offset-right-30 { + margin-right: 30%; + } + .-offset-bottom-30 { + grid-column-start: 3; + } + .-m-offset-bottom-30 { + margin-bottom: 30%; + } + .-offset-left-30 { + grid-column-start: 3; + } + .-m-offset-left-30 { + margin-left: 30%; + } + } + +.-w-40 { + width: 40%; + } + +@supports (display: grid){ + .-w-40 { + width: 40% !important + } + .-w-40.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 4; + } + + .-h-40 { + height: 40% !important + } + + .-h-40.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 4; + } + + .-vw-40 { + width: 40% !important; + } + .-vh-40 { + height: 40% !important; + } + .-offset-top-40 { + grid-column-start: 4; + } + .-m-offset-top-40 { + margin-top: 40%; + } + .-offset-right-40 { + grid-column-start: 4; + } + .-m-offset-right-40 { + margin-right: 40%; + } + .-offset-bottom-40 { + grid-column-start: 4; + } + .-m-offset-bottom-40 { + margin-bottom: 40%; + } + .-offset-left-40 { + grid-column-start: 4; + } + .-m-offset-left-40 { + margin-left: 40%; + } + } + +.-w-50 { + width: 50%; + } + +@supports (display: grid){ + .-w-50 { + width: 50% !important + } + .-w-50.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 5; + } + + .-h-50 { + height: 50% !important + } + + .-h-50.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 5; + } + + .-vw-50 { + width: 50% !important; + } + .-vh-50 { + height: 50% !important; + } + .-offset-top-50 { + grid-column-start: 5; + } + .-m-offset-top-50 { + margin-top: 50%; + } + .-offset-right-50 { + grid-column-start: 5; + } + .-m-offset-right-50 { + margin-right: 50%; + } + .-offset-bottom-50 { + grid-column-start: 5; + } + .-m-offset-bottom-50 { + margin-bottom: 50%; + } + .-offset-left-50 { + grid-column-start: 5; + } + .-m-offset-left-50 { + margin-left: 50%; + } + } + +.-w-58 { + width: 58%; + } + +@supports (display: grid){ + .-w-58 { + width: 58% !important + } + .-w-58.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 5.800000000000001; + } + + .-h-58 { + height: 58% !important + } + + .-h-58.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 5.800000000000001; + } + + .-vw-58 { + width: 58% !important; + } + .-vh-58 { + height: 58% !important; + } + .-offset-top-58 { + grid-column-start: 5.800000000000001; + } + .-m-offset-top-58 { + margin-top: 58%; + } + .-offset-right-58 { + grid-column-start: 5.800000000000001; + } + .-m-offset-right-58 { + margin-right: 58%; + } + .-offset-bottom-58 { + grid-column-start: 5.800000000000001; + } + .-m-offset-bottom-58 { + margin-bottom: 58%; + } + .-offset-left-58 { + grid-column-start: 5.800000000000001; + } + .-m-offset-left-58 { + margin-left: 58%; + } + } + +.-w-60 { + width: 60%; + } + +@supports (display: grid){ + .-w-60 { + width: 60% !important + } + .-w-60.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 6; + } + + .-h-60 { + height: 60% !important + } + + .-h-60.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 6; + } + + .-vw-60 { + width: 60% !important; + } + .-vh-60 { + height: 60% !important; + } + .-offset-top-60 { + grid-column-start: 6; + } + .-m-offset-top-60 { + margin-top: 60%; + } + .-offset-right-60 { + grid-column-start: 6; + } + .-m-offset-right-60 { + margin-right: 60%; + } + .-offset-bottom-60 { + grid-column-start: 6; + } + .-m-offset-bottom-60 { + margin-bottom: 60%; + } + .-offset-left-60 { + grid-column-start: 6; + } + .-m-offset-left-60 { + margin-left: 60%; + } + } + +.-w-70 { + width: 70%; + } + +@supports (display: grid){ + .-w-70 { + width: 70% !important + } + .-w-70.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 7; + } + + .-h-70 { + height: 70% !important + } + + .-h-70.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 7; + } + + .-vw-70 { + width: 70% !important; + } + .-vh-70 { + height: 70% !important; + } + .-offset-top-70 { + grid-column-start: 7; + } + .-m-offset-top-70 { + margin-top: 70%; + } + .-offset-right-70 { + grid-column-start: 7; + } + .-m-offset-right-70 { + margin-right: 70%; + } + .-offset-bottom-70 { + grid-column-start: 7; + } + .-m-offset-bottom-70 { + margin-bottom: 70%; + } + .-offset-left-70 { + grid-column-start: 7; + } + .-m-offset-left-70 { + margin-left: 70%; + } + } + +.-w-75 { + width: 75%; + } + +@supports (display: grid){ + .-w-75 { + width: 75% !important + } + .-w-75.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 7.5; + } + + .-h-75 { + height: 75% !important + } + + .-h-75.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 7.5; + } + + .-vw-75 { + width: 75% !important; + } + .-vh-75 { + height: 75% !important; + } + .-offset-top-75 { + grid-column-start: 7.5; + } + .-m-offset-top-75 { + margin-top: 75%; + } + .-offset-right-75 { + grid-column-start: 7.5; + } + .-m-offset-right-75 { + margin-right: 75%; + } + .-offset-bottom-75 { + grid-column-start: 7.5; + } + .-m-offset-bottom-75 { + margin-bottom: 75%; + } + .-offset-left-75 { + grid-column-start: 7.5; + } + .-m-offset-left-75 { + margin-left: 75%; + } + } + +.-w-80 { + width: 80%; + } + +@supports (display: grid){ + .-w-80 { + width: 80% !important + } + .-w-80.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 8; + } + + .-h-80 { + height: 80% !important + } + + .-h-80.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 8; + } + + .-vw-80 { + width: 80% !important; + } + .-vh-80 { + height: 80% !important; + } + .-offset-top-80 { + grid-column-start: 8; + } + .-m-offset-top-80 { + margin-top: 80%; + } + .-offset-right-80 { + grid-column-start: 8; + } + .-m-offset-right-80 { + margin-right: 80%; + } + .-offset-bottom-80 { + grid-column-start: 8; + } + .-m-offset-bottom-80 { + margin-bottom: 80%; + } + .-offset-left-80 { + grid-column-start: 8; + } + .-m-offset-left-80 { + margin-left: 80%; + } + } + +.-w-90 { + width: 90%; + } + +@supports (display: grid){ + .-w-90 { + width: 90% !important + } + .-w-90.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 9; + } + + .-h-90 { + height: 90% !important + } + + .-h-90.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 9; + } + + .-vw-90 { + width: 90% !important; + } + .-vh-90 { + height: 90% !important; + } + .-offset-top-90 { + grid-column-start: 9; + } + .-m-offset-top-90 { + margin-top: 90%; + } + .-offset-right-90 { + grid-column-start: 9; + } + .-m-offset-right-90 { + margin-right: 90%; + } + .-offset-bottom-90 { + grid-column-start: 9; + } + .-m-offset-bottom-90 { + margin-bottom: 90%; + } + .-offset-left-90 { + grid-column-start: 9; + } + .-m-offset-left-90 { + margin-left: 90%; + } + } + +.-w-100 { + width: 100%; + } + +@supports (display: grid){ + .-w-100 { + width: 100% !important + } + .-w-100.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 10; + } + + .-h-100 { + height: 100% !important + } + + .-h-100.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 10; + } + + .-vw-100 { + width: 100% !important; + } + .-vh-100 { + height: 100% !important; + } + .-offset-top-100 { + grid-column-start: 10; + } + .-m-offset-top-100 { + margin-top: 100%; + } + .-offset-right-100 { + grid-column-start: 10; + } + .-m-offset-right-100 { + margin-right: 100%; + } + .-offset-bottom-100 { + grid-column-start: 10; + } + .-m-offset-bottom-100 { + margin-bottom: 100%; + } + .-offset-left-100 { + grid-column-start: 10; + } + .-m-offset-left-100 { + margin-left: 100%; + } + } + +@supports (display: grid){ + .-w-100{ + grid-column: 1 / -1 !important; + } +} + +.-span-cols-1{ + width: 10%; + } + +@supports (display: grid){ + .-span-cols-1{ + width: auto; + grid-column-end: span 1; + } + .-span-rows-1{ + grid-row-end: span span 1; + } + } + +.-span-cols-2{ + width: 20%; + } + +@supports (display: grid){ + .-span-cols-2{ + width: auto; + grid-column-end: span 2; + } + .-span-rows-2{ + grid-row-end: span span 2; + } + } + +.-span-cols-3{ + width: 30%; + } + +@supports (display: grid){ + .-span-cols-3{ + width: auto; + grid-column-end: span 3; + } + .-span-rows-3{ + grid-row-end: span span 3; + } + } + +.-span-cols-4{ + width: 40%; + } + +@supports (display: grid){ + .-span-cols-4{ + width: auto; + grid-column-end: span 4; + } + .-span-rows-4{ + grid-row-end: span span 4; + } + } + +.-span-cols-5{ + width: 50%; + } + +@supports (display: grid){ + .-span-cols-5{ + width: auto; + grid-column-end: span 5; + } + .-span-rows-5{ + grid-row-end: span span 5; + } + } + +.-span-cols-6{ + width: 60%; + } + +@supports (display: grid){ + .-span-cols-6{ + width: auto; + grid-column-end: span 6; + } + .-span-rows-6{ + grid-row-end: span span 6; + } + } + +.-span-cols-7{ + width: 70%; + } + +@supports (display: grid){ + .-span-cols-7{ + width: auto; + grid-column-end: span 7; + } + .-span-rows-7{ + grid-row-end: span span 7; + } + } + +.-span-cols-8{ + width: 80%; + } + +@supports (display: grid){ + .-span-cols-8{ + width: auto; + grid-column-end: span 8; + } + .-span-rows-8{ + grid-row-end: span span 8; + } + } + +.-span-cols-9{ + width: 90%; + } + +@supports (display: grid){ + .-span-cols-9{ + width: auto; + grid-column-end: span 9; + } + .-span-rows-9{ + grid-row-end: span span 9; + } + } + +.-span-cols-10{ + width: 100%; + } + +@supports (display: grid){ + .-span-cols-10{ + width: auto; + grid-column-end: span 10; + } + .-span-rows-10{ + grid-row-end: span span 10; + } + } + +.-span-cols-11{ + width: 110%; + } + +@supports (display: grid){ + .-span-cols-11{ + width: auto; + grid-column-end: span 11; + } + .-span-rows-11{ + grid-row-end: span span 11; + } + } + +.-span-cols-12{ + width: 120%; + } + +@supports (display: grid){ + .-span-cols-12{ + width: auto; + grid-column-end: span 12; + } + .-span-rows-12{ + grid-row-end: span span 12; + } + } + +.-span-cols-13{ + width: 130%; + } + +@supports (display: grid){ + .-span-cols-13{ + width: auto; + grid-column-end: span 13; + } + .-span-rows-13{ + grid-row-end: span span 13; + } + } + +.-span-cols-14{ + width: 140%; + } + +@supports (display: grid){ + .-span-cols-14{ + width: auto; + grid-column-end: span 14; + } + .-span-rows-14{ + grid-row-end: span span 14; + } + } + +.-span-cols-15{ + width: 150%; + } + +@supports (display: grid){ + .-span-cols-15{ + width: auto; + grid-column-end: span 15; + } + .-span-rows-15{ + grid-row-end: span span 15; + } + } + +.-span-cols-16{ + width: 160%; + } + +@supports (display: grid){ + .-span-cols-16{ + width: auto; + grid-column-end: span 16; + } + .-span-rows-16{ + grid-row-end: span span 16; + } + } + +/* -- Positioning + –––––––––––––– */ + +.-pos-fixed, .-fixed{ + position: fixed; +} + +.-pos-absolute{ + position: absolute; +} + +.-pos-relative{ + position: relative; +} + +/* POSITIONING HELPERS */ + +.-t-0, .-top-0{ + top: 0; +} + +.-r-0, .-right-0{ + right: 0; +} + +.-b-0, .-bottom-0{ + bottom: 0; +} + +.-l-0, .-left-0{ + left: 0; +} + +.-top-half: calc(var(--spacing) * 0.5); + +.-top-1: calc(var(--spacing) * 1); + +.-top-2: calc(var(--spacing) * 2); + +.-top-3: calc(var(--spacing) * 3); + +.-top-4: calc(var(--spacing) * 4); + +.-top-5: calc(var(--spacing) * 5); + +.-right-half: calc(var(--spacing) * 0.5); + +.-right-1: calc(var(--spacing) * 1); + +.-right-2: calc(var(--spacing) * 2); + +.-right-3: calc(var(--spacing) * 3); + +.-right-4: calc(var(--spacing) * 4); + +.-right-5: calc(var(--spacing) * 5); + +.-bottom-half: calc(var(--spacing) * 0.5); + +.-bottom-1: calc(var(--spacing) * 1); + +.-bottom-2: calc(var(--spacing) * 2); + +.-bottom-3: calc(var(--spacing) * 3); + +.-bottom-4: calc(var(--spacing) * 4); + +.-bottom-5: calc(var(--spacing) * 5); + +.-left-half: calc(var(--spacing) * 0.5); + +.-left-1: calc(var(--spacing) * 1); + +.-left-2: calc(var(--spacing) * 2); + +.-left-3: calc(var(--spacing) * 3); + +.-left-4: calc(var(--spacing) * 4); + +.-left-5: calc(var(--spacing) * 5); + +/* -- Spacing + –––––––––– */ + +.-m-all{ + margin: var(--spacing); +} + +.-p-all{ + padding: var(--spacing); +} + +.-m-0, .-m-all-0{ + margin: 0 !important; +} + +.-p-0, .-p-all-0{ + padding: 0 !important; +} + +.-m-auto { + margin: auto; +} + +.-p-top-half {padding-top: calc(var(--spacing) * 0.5);} + +.-m-top-half {margin-top: calc(var(--spacing) * 0.5);} + +.-p-top-1 {padding-top: calc(var(--spacing) * 1);} + +.-m-top-1 {margin-top: calc(var(--spacing) * 1);} + +.-p-top-2 {padding-top: calc(var(--spacing) * 2);} + +.-m-top-2 {margin-top: calc(var(--spacing) * 2);} + +.-p-top-3 {padding-top: calc(var(--spacing) * 3);} + +.-m-top-3 {margin-top: calc(var(--spacing) * 3);} + +.-p-top-4 {padding-top: calc(var(--spacing) * 4);} + +.-m-top-4 {margin-top: calc(var(--spacing) * 4);} + +.-p-top-5 {padding-top: calc(var(--spacing) * 5);} + +.-m-top-5 {margin-top: calc(var(--spacing) * 5);} + +.-p-right-half {padding-right: calc(var(--spacing) * 0.5);} + +.-m-right-half {margin-right: calc(var(--spacing) * 0.5);} + +.-p-right-1 {padding-right: calc(var(--spacing) * 1);} + +.-m-right-1 {margin-right: calc(var(--spacing) * 1);} + +.-p-right-2 {padding-right: calc(var(--spacing) * 2);} + +.-m-right-2 {margin-right: calc(var(--spacing) * 2);} + +.-p-right-3 {padding-right: calc(var(--spacing) * 3);} + +.-m-right-3 {margin-right: calc(var(--spacing) * 3);} + +.-p-right-4 {padding-right: calc(var(--spacing) * 4);} + +.-m-right-4 {margin-right: calc(var(--spacing) * 4);} + +.-p-right-5 {padding-right: calc(var(--spacing) * 5);} + +.-m-right-5 {margin-right: calc(var(--spacing) * 5);} + +.-p-bottom-half {padding-bottom: calc(var(--spacing) * 0.5);} + +.-m-bottom-half {margin-bottom: calc(var(--spacing) * 0.5);} + +.-p-bottom-1 {padding-bottom: calc(var(--spacing) * 1);} + +.-m-bottom-1 {margin-bottom: calc(var(--spacing) * 1);} + +.-p-bottom-2 {padding-bottom: calc(var(--spacing) * 2);} + +.-m-bottom-2 {margin-bottom: calc(var(--spacing) * 2);} + +.-p-bottom-3 {padding-bottom: calc(var(--spacing) * 3);} + +.-m-bottom-3 {margin-bottom: calc(var(--spacing) * 3);} + +.-p-bottom-4 {padding-bottom: calc(var(--spacing) * 4);} + +.-m-bottom-4 {margin-bottom: calc(var(--spacing) * 4);} + +.-p-bottom-5 {padding-bottom: calc(var(--spacing) * 5);} + +.-m-bottom-5 {margin-bottom: calc(var(--spacing) * 5);} + +.-p-left-half {padding-left: calc(var(--spacing) * 0.5);} + +.-m-left-half {margin-left: calc(var(--spacing) * 0.5);} + +.-p-left-1 {padding-left: calc(var(--spacing) * 1);} + +.-m-left-1 {margin-left: calc(var(--spacing) * 1);} + +.-p-left-2 {padding-left: calc(var(--spacing) * 2);} + +.-m-left-2 {margin-left: calc(var(--spacing) * 2);} + +.-p-left-3 {padding-left: calc(var(--spacing) * 3);} + +.-m-left-3 {margin-left: calc(var(--spacing) * 3);} + +.-p-left-4 {padding-left: calc(var(--spacing) * 4);} + +.-m-left-4 {margin-left: calc(var(--spacing) * 4);} + +.-p-left-5 {padding-left: calc(var(--spacing) * 5);} + +.-m-left-5 {margin-left: calc(var(--spacing) * 5);} + +/* padding */ + +.-p-all-half{ + padding: calc(var(--spacing) * 0.5); +} + +.-p-all-1{ + padding: var(--spacing); +} + +.-p-all-2{ + padding: calc(var(--spacing) * 2); +} + +.-p-all-3{ + padding: calc(var(--spacing) * 3); +} + +.-p-all-4{ + padding: calc(var(--spacing) * 4); +} + +.-p-all-5{ + padding: calc(var(--spacing) * 5); +} + +.-p-x-half{ + padding-left: calc(var(--spacing) * 0.5); + padding-right: calc(var(--spacing) * 0.5); +} + +.-p-x-1{ + padding-left: calc(var(--spacing) * 1); + padding-right: calc(var(--spacing) * 1); +} + +.-p-x-2{ + padding-left: calc(var(--spacing) * 2); + padding-right: calc(var(--spacing) * 2); +} + +.-p-x-3{ + padding-left: calc(var(--spacing) * 3); + padding-right: calc(var(--spacing) * 3); +} + +.-p-x-4{ + padding-left: calc(var(--spacing) * 4); + padding-right: calc(var(--spacing) * 4); +} + +.-p-y-half{ + padding-top: calc(var(--spacing) * 0.5); + padding-bottom: calc(var(--spacing) * 0.5); +} + +.-p-y-1{ + padding-top: calc(var(--spacing) * 1); + padding-bottom: calc(var(--spacing) * 1); +} + +.-p-y-2{ + padding-top: calc(var(--spacing) * 2); + padding-bottom: calc(var(--spacing) * 2); +} + +.-p-y-3{ + padding-top: calc(var(--spacing) * 3); + padding-bottom: calc(var(--spacing) * 3); +} + +.-p-y-4{ + padding-top: calc(var(--spacing) * 4); + padding-bottom: calc(var(--spacing) * 4); +} + +/* margin */ + +.-m-all-half{ + margin: calc(var(--spacing) * 0.5); +} + +.-m-all-1{ + margin: var(--spacing); +} + +.-m-all-2{ + margin: calc(var(--spacing) * 2); +} + +.-m-all-3{ + margin: calc(var(--spacing) * 3); +} + +.-m-all-4{ + margin: calc(var(--spacing) * 4); +} + +.-m-all-5{ + margin: calc(var(--spacing) * 5); +} + +.-m-x-half{ + margin-left: calc(var(--spacing) * 0.5); + margin-right: calc(var(--spacing) * 0.5); +} + +.-m-x-1{ + margin-left: calc(var(--spacing) * 1); + margin-right: calc(var(--spacing) * 1); +} + +.-m-x-2{ + margin-left: calc(var(--spacing) * 2); + margin-right: calc(var(--spacing) * 2); +} + +.-m-x-3{ + margin-left: calc(var(--spacing) * 3); + margin-right: calc(var(--spacing) * 3); +} + +.-m-x-4{ + margin-left: calc(var(--spacing) * 4); + margin-right: calc(var(--spacing) * 4); +} + +.-m-y-half{ + margin-top: calc(var(--spacing) * 0.5); + margin-bottom: calc(var(--spacing) * 0.5); +} + +.-m-y-1{ + margin-top: calc(var(--spacing) * 1); + margin-bottom: calc(var(--spacing) * 1); +} + +.-m-y-2{ + margin-top: calc(var(--spacing) * 2); + margin-bottom: calc(var(--spacing) * 2); +} + +.-m-y-3{ + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 3); +} + +.-m-y-4{ + margin-top: calc(var(--spacing) * 4); + margin-bottom: calc(var(--spacing) * 4); +} + +/* Text classes + –––––––––––– */ + +/* FONT WEIGHTS */ + +.-lightweight{ + font-weight: 300; +} + +.-bookweight{ + font-weight: 500; +} + +.-heavyweight{ + font-weight: 600; +} + +.-boldweight{ + font-weight: 700; +} + +.-extraboldweight{ + font-weight: 800; +} + +.-upcase{ + text-transform: uppercase; +} + +.-nocase{ + text-transform: none; +} + +.-lineheight-1{ + line-height: 1em; +} + +.-lineheight-1-2{ + line-height: 1.2em; +} + +.-lineheight-1-3{ + line-height: 1.3em; +} + +.-lineheight-1-4{ + line-height: 1.4em; +} + +.-lineheight-1-5{ + line-height: 24px; + line-height: 1.5rem; +} + +.-text-left{ + text-align: left; +} + +.-text-center{ + text-align: center; +} + +.-text-right{ + text-align: right; +} + +/* -- Typesizes + –––––––––––– */ + +.-rem-3 { + font-size: 48px; + font-size: 3rem; +} + +.-rem-2 { + font-size: 32px; + font-size: 2rem; +} + +.-rem-1-75 { + font-size: 28px; + font-size: 1.75rem; +} + +.-rem-1-5 { + font-size: 24px; + font-size: 1.5rem; +} + +.-rem-1-2 { + font-size: 19.2px; + font-size: 1.2rem; +} + +.-rem-1 { + font-size: 16px; + font-size: 1rem; +} + +.-rem-09 { + font-size: 14.4px; + font-size: 0.9rem; +} + +.-rem-085 { + font-size: 13.6px; + font-size: 0.85rem; +} + +.-rem-08 { + font-size: 12.8px; + font-size: 0.8rem; +} + +.-rem-075 { + font-size: 11.2px; + font-size: 0.7rem; +} + +.-rem-07 { + font-size: 11.2px; + font-size: 0.7rem; +} + +.-rem-06 { + font-size: 9.6px; + font-size: 0.6rem; +} + +/* Ems */ + +.-em-3 { + font-size: 3em; +} + +.-em-2 { + font-size: 2em; +} + +.-em-1-75 { + font-size: 1.75em; +} + +.-em-1-5 { + font-size: 1.5em; +} + +.-em-1-2 { + font-size: 1.2em; +} + +.-em-1 { + font-size: 1em; +} + +.-em-09 { + font-size: 0.9em; +} + +.-em-085 { + font-size: 0.85em; +} + +.-em-08 { + font-size: 0.8em; +} + +.-em-075 { + font-size: 0.7em; +} + +.-em-07 { + font-size: 0.7em; +} + +.-em-06 { + font-size: 0.6em; +} + +.unsupported, .ie11, .ie10, .ie678{ + display: none; +} + +@supports not (display: grid) { + .unsupported{ + display: block; + } +} + +@media all and (-ms-high-contrast:none){ + .ie10 {display: block;} /* IE10 */ + *::-ms-backdrop, .ie11 {display: block;} /* IE11 */ +} + +@media \0screen\,screen\9 { + .ie678 {display: block;} +} + +/* override/set vars here */ + +:root{ + /* sans typeface */ + --sans: 'Lato', sans-serif; + + /* colours (main HSL values) */ + --core-secondary: 148, 40%; + --core-primary: 192, 56%; + --core-highlight: 350, 98%; +} + +/* END of css */
\ No newline at end of file diff --git a/docs/css/belmu.min.css b/docs/css/belmu.min.css new file mode 100644 index 0000000..9352e1c --- /dev/null +++ b/docs/css/belmu.min.css @@ -0,0 +1 @@ +*{box-sizing:border-box}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:1;font-family:sans-serif}iframe{border:0}main{display:block}ol,ul{margin-top:0;margin-bottom:0;padding-left:0}li{display:block}dl{margin-top:0;margin-bottom:0}dd{margin-left:0}h1,h2,h3,h4,h5,h6{margin-top:1.6em;margin-bottom:.1em;font-size:inherit}blockquote{margin:0;padding:0}p{margin-top:0;margin-bottom:0}sup{position:relative;top:-.5em;vertical-align:baseline;font-size:75%;line-height:0}strong{font-weight:700}figure{margin:0}img{border:0;max-width:100%;height:auto;vertical-align:middle}a{text-decoration:none;color:inherit}button{border:0;margin:0;padding:0;text-align:inherit;text-transform:inherit;font:inherit;-webkit-font-smoothing:inherit;letter-spacing:inherit;background:none;cursor:pointer;overflow:visible}::-moz-focus-inner{border:0;padding:0}:root{--core-white:0,100%;--core-black:0,0%;--core-grey:220,30%;--white:hsl(var(--core-white),100%);--grey:hsl(var(--core-grey),60%);--grey-900:hsl(var(--core-grey),30%);--grey-800:hsl(var(--core-grey),40%);--grey-700:hsl(var(--core-grey),50%);--grey-600:hsl(var(--core-grey),60%);--grey-500:hsl(var(--core-grey),70%);--grey-400:hsl(var(--core-grey),80%);--grey-300:hsl(var(--core-grey),94%);--grey-200:hsl(var(--core-grey),96%);--grey-100:hsl(var(--core-grey),98%);--black:hsl(var(--core-black),0%);--black-900:hsl(var(--core-black),10%);--black-800:hsl(var(--core-black),20%);--black-700:hsl(var(--core-black),30%);--black-600:hsl(var(--core-black),40%);--black-500:hsl(var(--core-black),50%);--black-400:hsl(var(--core-black),60%);--black-300:hsl(var(--core-black),70%);--black-200:hsl(var(--core-black),80%);--black-100:hsl(var(--core-black),90%);--black-900a:hsla(var(--core-black),0%,0.9);--black-800a:hsla(var(--core-black),0%,0.8);--black-700a:hsla(var(--core-black),0%,0.7);--black-600a:hsla(var(--core-black),0%,0.6);--black-500a:hsla(var(--core-black),0%,0.5);--black-400a:hsla(var(--core-black),0%,0.4);--black-300a:hsla(var(--core-black),0%,0.3);--black-200a:hsla(var(--core-black),0%,0.2);--black-100a:hsla(var(--core-black),0%,0.1);--white-900a:hsla(var(--core-white),100%,0.9);--white-800a:hsla(var(--core-white),100%,0.8);--white-700a:hsla(var(--core-white),100%,0.7);--white-600a:hsla(var(--core-white),100%,0.6);--white-500a:hsla(var(--core-white),100%,0.5);--white-400a:hsla(var(--core-white),100%,0.4);--white-300a:hsla(var(--core-white),100%,0.3);--white-200a:hsla(var(--core-white),100%,0.2);--white-100a:hsla(var(--core-white),100%,0.1);--borders-dark:hsla(var(--black),0.1);--borders-light:hsla(var(--white),0.1);--filterwhite:grayscale(100%) brightness(10)}.input{font-family:var(--bookweight);font-size:var(--rem-1);color:var(--grey-100);background:var(--grey-300);border-radius:var(--border-radius);border:0;padding:calc(var(--spacing) * .66667) var(--spacing);transition:var(--transition-all)}.input:focus{outline:none}.input:hover{background:var(--grey-100)}.disabled .input{pointer-events:none;opacity:.3}:root{--sans:sans-serif;--bookweight:500;--heavyweight:600;--boldweight:700;--extraboldweight:800;--rem-2:32px;--rem-2:2rem;--rem-1:16px;--rem-1:1rem;--rem-1-2:19.2px;--rem-1-2:1.2rem;--rem-09:14.4px;--rem-09:0.9rem;--rem-085:13.6px;--rem-085:0.85rem;--rem-08:12.8px;--rem-08:0.8rem;--rem-075:11.2px;--rem-075:0.7rem;--rem-07:11.2px;--rem-07:0.7rem;--rem-06:9.6px;--rem-06:0.6rem}body{font-family:var(--sans);font-weight:var(--bookweight)}h1,h2,h3,h4,h5,h6{font-weight:var(--boldweight);color:var(--black);margin-bottom:var(--spacing)}p{margin:var(--spacing) 0}h1{font-size:var(--rem-2)}h2{font-size:var(--rem-1-2)}h3{font-size:var(--rem-1)}h4{font-size:var(--rem-08)}h5,h6{font-size:var(--rem-07)}p{font-weight:var(--bookweight)}label,p{font-family:var(--sans)}label{display:block;font-weight:var(--heavyweight);font-size:var(--rem-08);color:var(--black);margin-bottom:calc(var(--spacing) * .5)}a:active,a:link{color:var(--primary)}:root{--spacing:15px;--spacing:0.9375rem;--border-radius:4.8px;--border-radius:0.3rem;--transition-all:0.36s all}.grid{display:block;clear:both}.grid .col{float:left;border:.5em solid #fff}@supports (display:grid){.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(10% - 1em),1fr));grid-gap:1em 1em;grid-auto-flow:dense}.grid .col{float:none;border:0}.grid.gutterless{grid-template-columns:repeat(auto-fit,minmax(10%,1fr));grid-gap:0}.grid-12{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(8.3333% - 1em),1fr));grid-gap:1em 1em;grid-auto-flow:dense}.grid-12s.gutterless{grid-template-columns:repeat(auto-fit,minmax(8.3333%,1fr));grid-gap:0}.grid-16{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(6.25% - 1em),1fr));grid-gap:1em 1em;grid-auto-flow:dense}.grid-16.gutterless{grid-template-columns:repeat(auto-fit,minmax(6.25%,1fr));grid-gap:0}.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:1em 1em;grid-auto-flow:dense}@media (max-width:34em){.grid-12.mq-small-full>.col,.grid-16.mq-small-full>.col,.grid.mq-small-full>.col{grid-column:1/-1!important}.grid.mq-small-half>.col{grid-column:span 5!important}.grid-12.mq-small-half>.col{grid-column:span 6!important}.grid-16.mq-small-half>.col{grid-column:span 8!important}.grid-12.mq-small-full>.col,.grid-16.mq-small-full>.col,.grid.mq-small-full>.col{width:auto!important;margin:0!important}}}.flex{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex.gutterless .item{padding:0}.flex .item{-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:stretch;align-self:stretch;padding:calc(var(--spacing) * .5)}.flex .item.gutterless{padding:0}.-d-block{display:block}.-d-inline-block{display:inline-block}.-d-flex{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:baseline;align-items:baseline;-ms-flex-direction:row;flex-direction:row}.-white{color:var(--white)}.-bg-white{background:var(--white)}.-bg-grey{background:var(--grey)}.-bg-grey-100{background:var(--grey-100)}.-bg-grey-200{background:var(--grey-200)}.-bg-grey-300{background:var(--grey-300)}.-bg-grey-500{background:var(--grey-500)}.-bg-grey-900{background:var(--grey-900)}.-float-right{float:right}.-float-left{float:left}.-w-10{width:10%}@supports (display:grid){.-w-10{width:10%!important}.-w-10.col:not(.-fixed){width:auto!important;grid-column-end:span 1}.-h-10{height:10%!important}.-h-10.col:not(.-fixed){height:auto!important;grid-row-end:span 1}.-vw-10{width:10%!important}.-vh-10{height:10%!important}.-offset-top-10{grid-column-start:1}.-m-offset-top-10{margin-top:10%}.-offset-right-10{grid-column-start:1}.-m-offset-right-10{margin-right:10%}.-offset-bottom-10{grid-column-start:1}.-m-offset-bottom-10{margin-bottom:10%}.-offset-left-10{grid-column-start:1}.-m-offset-left-10{margin-left:10%}}.-w-12{width:12%}@supports (display:grid){.-w-12{width:12%!important}.-w-12.col:not(.-fixed){width:auto!important;grid-column-end:span 1.2000000000000002}.-h-12{height:12%!important}.-h-12.col:not(.-fixed){height:auto!important;grid-row-end:span 1.2000000000000002}.-vw-12{width:12%!important}.-vh-12{height:12%!important}.-offset-top-12{grid-column-start:1.2000000000000002}.-m-offset-top-12{margin-top:12%}.-offset-right-12{grid-column-start:1.2000000000000002}.-m-offset-right-12{margin-right:12%}.-offset-bottom-12{grid-column-start:1.2000000000000002}.-m-offset-bottom-12{margin-bottom:12%}.-offset-left-12{grid-column-start:1.2000000000000002}.-m-offset-left-12{margin-left:12%}}.-w-14{width:14%}@supports (display:grid){.-w-14{width:14%!important}.-w-14.col:not(.-fixed){width:auto!important;grid-column-end:span 1.4000000000000001}.-h-14{height:14%!important}.-h-14.col:not(.-fixed){height:auto!important;grid-row-end:span 1.4000000000000001}.-vw-14{width:14%!important}.-vh-14{height:14%!important}.-offset-top-14{grid-column-start:1.4000000000000001}.-m-offset-top-14{margin-top:14%}.-offset-right-14{grid-column-start:1.4000000000000001}.-m-offset-right-14{margin-right:14%}.-offset-bottom-14{grid-column-start:1.4000000000000001}.-m-offset-bottom-14{margin-bottom:14%}.-offset-left-14{grid-column-start:1.4000000000000001}.-m-offset-left-14{margin-left:14%}}.-w-15{width:15%}@supports (display:grid){.-w-15{width:15%!important}.-w-15.col:not(.-fixed){width:auto!important;grid-column-end:span 1.5}.-h-15{height:15%!important}.-h-15.col:not(.-fixed){height:auto!important;grid-row-end:span 1.5}.-vw-15{width:15%!important}.-vh-15{height:15%!important}.-offset-top-15{grid-column-start:1.5}.-m-offset-top-15{margin-top:15%}.-offset-right-15{grid-column-start:1.5}.-m-offset-right-15{margin-right:15%}.-offset-bottom-15{grid-column-start:1.5}.-m-offset-bottom-15{margin-bottom:15%}.-offset-left-15{grid-column-start:1.5}.-m-offset-left-15{margin-left:15%}}.-w-18{width:18%}@supports (display:grid){.-w-18{width:18%!important}.-w-18.col:not(.-fixed){width:auto!important;grid-column-end:span 1.8}.-h-18{height:18%!important}.-h-18.col:not(.-fixed){height:auto!important;grid-row-end:span 1.8}.-vw-18{width:18%!important}.-vh-18{height:18%!important}.-offset-top-18{grid-column-start:1.8}.-m-offset-top-18{margin-top:18%}.-offset-right-18{grid-column-start:1.8}.-m-offset-right-18{margin-right:18%}.-offset-bottom-18{grid-column-start:1.8}.-m-offset-bottom-18{margin-bottom:18%}.-offset-left-18{grid-column-start:1.8}.-m-offset-left-18{margin-left:18%}}.-w-20{width:20%}@supports (display:grid){.-w-20{width:20%!important}.-w-20.col:not(.-fixed){width:auto!important;grid-column-end:span 2}.-h-20{height:20%!important}.-h-20.col:not(.-fixed){height:auto!important;grid-row-end:span 2}.-vw-20{width:20%!important}.-vh-20{height:20%!important}.-offset-top-20{grid-column-start:2}.-m-offset-top-20{margin-top:20%}.-offset-right-20{grid-column-start:2}.-m-offset-right-20{margin-right:20%}.-offset-bottom-20{grid-column-start:2}.-m-offset-bottom-20{margin-bottom:20%}.-offset-left-20{grid-column-start:2}.-m-offset-left-20{margin-left:20%}}.-w-22{width:22%}@supports (display:grid){.-w-22{width:22%!important}.-w-22.col:not(.-fixed){width:auto!important;grid-column-end:span 2.2}.-h-22{height:22%!important}.-h-22.col:not(.-fixed){height:auto!important;grid-row-end:span 2.2}.-vw-22{width:22%!important}.-vh-22{height:22%!important}.-offset-top-22{grid-column-start:2.2}.-m-offset-top-22{margin-top:22%}.-offset-right-22{grid-column-start:2.2}.-m-offset-right-22{margin-right:22%}.-offset-bottom-22{grid-column-start:2.2}.-m-offset-bottom-22{margin-bottom:22%}.-offset-left-22{grid-column-start:2.2}.-m-offset-left-22{margin-left:22%}}.-w-24{width:24%}@supports (display:grid){.-w-24{width:24%!important}.-w-24.col:not(.-fixed){width:auto!important;grid-column-end:span 2.4000000000000004}.-h-24{height:24%!important}.-h-24.col:not(.-fixed){height:auto!important;grid-row-end:span 2.4000000000000004}.-vw-24{width:24%!important}.-vh-24{height:24%!important}.-offset-top-24{grid-column-start:2.4000000000000004}.-m-offset-top-24{margin-top:24%}.-offset-right-24{grid-column-start:2.4000000000000004}.-m-offset-right-24{margin-right:24%}.-offset-bottom-24{grid-column-start:2.4000000000000004}.-m-offset-bottom-24{margin-bottom:24%}.-offset-left-24{grid-column-start:2.4000000000000004}.-m-offset-left-24{margin-left:24%}}.-w-25{width:25%}@supports (display:grid){.-w-25{width:25%!important}.-w-25.col:not(.-fixed){width:auto!important;grid-column-end:span 2.5}.-h-25{height:25%!important}.-h-25.col:not(.-fixed){height:auto!important;grid-row-end:span 2.5}.-vw-25{width:25%!important}.-vh-25{height:25%!important}.-offset-top-25{grid-column-start:2.5}.-m-offset-top-25{margin-top:25%}.-offset-right-25{grid-column-start:2.5}.-m-offset-right-25{margin-right:25%}.-offset-bottom-25{grid-column-start:2.5}.-m-offset-bottom-25{margin-bottom:25%}.-offset-left-25{grid-column-start:2.5}.-m-offset-left-25{margin-left:25%}}.-w-30{width:30%}@supports (display:grid){.-w-30{width:30%!important}.-w-30.col:not(.-fixed){width:auto!important;grid-column-end:span 3}.-h-30{height:30%!important}.-h-30.col:not(.-fixed){height:auto!important;grid-row-end:span 3}.-vw-30{width:30%!important}.-vh-30{height:30%!important}.-offset-top-30{grid-column-start:3}.-m-offset-top-30{margin-top:30%}.-offset-right-30{grid-column-start:3}.-m-offset-right-30{margin-right:30%}.-offset-bottom-30{grid-column-start:3}.-m-offset-bottom-30{margin-bottom:30%}.-offset-left-30{grid-column-start:3}.-m-offset-left-30{margin-left:30%}}.-w-40{width:40%}@supports (display:grid){.-w-40{width:40%!important}.-w-40.col:not(.-fixed){width:auto!important;grid-column-end:span 4}.-h-40{height:40%!important}.-h-40.col:not(.-fixed){height:auto!important;grid-row-end:span 4}.-vw-40{width:40%!important}.-vh-40{height:40%!important}.-offset-top-40{grid-column-start:4}.-m-offset-top-40{margin-top:40%}.-offset-right-40{grid-column-start:4}.-m-offset-right-40{margin-right:40%}.-offset-bottom-40{grid-column-start:4}.-m-offset-bottom-40{margin-bottom:40%}.-offset-left-40{grid-column-start:4}.-m-offset-left-40{margin-left:40%}}.-w-50{width:50%}@supports (display:grid){.-w-50{width:50%!important}.-w-50.col:not(.-fixed){width:auto!important;grid-column-end:span 5}.-h-50{height:50%!important}.-h-50.col:not(.-fixed){height:auto!important;grid-row-end:span 5}.-vw-50{width:50%!important}.-vh-50{height:50%!important}.-offset-top-50{grid-column-start:5}.-m-offset-top-50{margin-top:50%}.-offset-right-50{grid-column-start:5}.-m-offset-right-50{margin-right:50%}.-offset-bottom-50{grid-column-start:5}.-m-offset-bottom-50{margin-bottom:50%}.-offset-left-50{grid-column-start:5}.-m-offset-left-50{margin-left:50%}}.-w-58{width:58%}@supports (display:grid){.-w-58{width:58%!important}.-w-58.col:not(.-fixed){width:auto!important;grid-column-end:span 5.800000000000001}.-h-58{height:58%!important}.-h-58.col:not(.-fixed){height:auto!important;grid-row-end:span 5.800000000000001}.-vw-58{width:58%!important}.-vh-58{height:58%!important}.-offset-top-58{grid-column-start:5.800000000000001}.-m-offset-top-58{margin-top:58%}.-offset-right-58{grid-column-start:5.800000000000001}.-m-offset-right-58{margin-right:58%}.-offset-bottom-58{grid-column-start:5.800000000000001}.-m-offset-bottom-58{margin-bottom:58%}.-offset-left-58{grid-column-start:5.800000000000001}.-m-offset-left-58{margin-left:58%}}.-w-60{width:60%}@supports (display:grid){.-w-60{width:60%!important}.-w-60.col:not(.-fixed){width:auto!important;grid-column-end:span 6}.-h-60{height:60%!important}.-h-60.col:not(.-fixed){height:auto!important;grid-row-end:span 6}.-vw-60{width:60%!important}.-vh-60{height:60%!important}.-offset-top-60{grid-column-start:6}.-m-offset-top-60{margin-top:60%}.-offset-right-60{grid-column-start:6}.-m-offset-right-60{margin-right:60%}.-offset-bottom-60{grid-column-start:6}.-m-offset-bottom-60{margin-bottom:60%}.-offset-left-60{grid-column-start:6}.-m-offset-left-60{margin-left:60%}}.-w-70{width:70%}@supports (display:grid){.-w-70{width:70%!important}.-w-70.col:not(.-fixed){width:auto!important;grid-column-end:span 7}.-h-70{height:70%!important}.-h-70.col:not(.-fixed){height:auto!important;grid-row-end:span 7}.-vw-70{width:70%!important}.-vh-70{height:70%!important}.-offset-top-70{grid-column-start:7}.-m-offset-top-70{margin-top:70%}.-offset-right-70{grid-column-start:7}.-m-offset-right-70{margin-right:70%}.-offset-bottom-70{grid-column-start:7}.-m-offset-bottom-70{margin-bottom:70%}.-offset-left-70{grid-column-start:7}.-m-offset-left-70{margin-left:70%}}.-w-75{width:75%}@supports (display:grid){.-w-75{width:75%!important}.-w-75.col:not(.-fixed){width:auto!important;grid-column-end:span 7.5}.-h-75{height:75%!important}.-h-75.col:not(.-fixed){height:auto!important;grid-row-end:span 7.5}.-vw-75{width:75%!important}.-vh-75{height:75%!important}.-offset-top-75{grid-column-start:7.5}.-m-offset-top-75{margin-top:75%}.-offset-right-75{grid-column-start:7.5}.-m-offset-right-75{margin-right:75%}.-offset-bottom-75{grid-column-start:7.5}.-m-offset-bottom-75{margin-bottom:75%}.-offset-left-75{grid-column-start:7.5}.-m-offset-left-75{margin-left:75%}}.-w-80{width:80%}@supports (display:grid){.-w-80{width:80%!important}.-w-80.col:not(.-fixed){width:auto!important;grid-column-end:span 8}.-h-80{height:80%!important}.-h-80.col:not(.-fixed){height:auto!important;grid-row-end:span 8}.-vw-80{width:80%!important}.-vh-80{height:80%!important}.-offset-top-80{grid-column-start:8}.-m-offset-top-80{margin-top:80%}.-offset-right-80{grid-column-start:8}.-m-offset-right-80{margin-right:80%}.-offset-bottom-80{grid-column-start:8}.-m-offset-bottom-80{margin-bottom:80%}.-offset-left-80{grid-column-start:8}.-m-offset-left-80{margin-left:80%}}.-w-90{width:90%}@supports (display:grid){.-w-90{width:90%!important}.-w-90.col:not(.-fixed){width:auto!important;grid-column-end:span 9}.-h-90{height:90%!important}.-h-90.col:not(.-fixed){height:auto!important;grid-row-end:span 9}.-vw-90{width:90%!important}.-vh-90{height:90%!important}.-offset-top-90{grid-column-start:9}.-m-offset-top-90{margin-top:90%}.-offset-right-90{grid-column-start:9}.-m-offset-right-90{margin-right:90%}.-offset-bottom-90{grid-column-start:9}.-m-offset-bottom-90{margin-bottom:90%}.-offset-left-90{grid-column-start:9}.-m-offset-left-90{margin-left:90%}}.-w-100{width:100%}@supports (display:grid){.-w-100{width:100%!important}.-w-100.col:not(.-fixed){width:auto!important;grid-column-end:span 10}.-h-100{height:100%!important}.-h-100.col:not(.-fixed){height:auto!important;grid-row-end:span 10}.-vw-100{width:100%!important}.-vh-100{height:100%!important}.-offset-top-100{grid-column-start:10}.-m-offset-top-100{margin-top:100%}.-offset-right-100{grid-column-start:10}.-m-offset-right-100{margin-right:100%}.-offset-bottom-100{grid-column-start:10}.-m-offset-bottom-100{margin-bottom:100%}.-offset-left-100{grid-column-start:10}.-m-offset-left-100{margin-left:100%}}@supports (display:grid){.-w-100{grid-column:1/-1!important}}.-span-cols-1{width:10%}@supports (display:grid){.-span-cols-1{width:auto;grid-column-end:span 1}.-span-rows-1{grid-row-end:span span 1}}.-span-cols-2{width:20%}@supports (display:grid){.-span-cols-2{width:auto;grid-column-end:span 2}.-span-rows-2{grid-row-end:span span 2}}.-span-cols-3{width:30%}@supports (display:grid){.-span-cols-3{width:auto;grid-column-end:span 3}.-span-rows-3{grid-row-end:span span 3}}.-span-cols-4{width:40%}@supports (display:grid){.-span-cols-4{width:auto;grid-column-end:span 4}.-span-rows-4{grid-row-end:span span 4}}.-span-cols-5{width:50%}@supports (display:grid){.-span-cols-5{width:auto;grid-column-end:span 5}.-span-rows-5{grid-row-end:span span 5}}.-span-cols-6{width:60%}@supports (display:grid){.-span-cols-6{width:auto;grid-column-end:span 6}.-span-rows-6{grid-row-end:span span 6}}.-span-cols-7{width:70%}@supports (display:grid){.-span-cols-7{width:auto;grid-column-end:span 7}.-span-rows-7{grid-row-end:span span 7}}.-span-cols-8{width:80%}@supports (display:grid){.-span-cols-8{width:auto;grid-column-end:span 8}.-span-rows-8{grid-row-end:span span 8}}.-span-cols-9{width:90%}@supports (display:grid){.-span-cols-9{width:auto;grid-column-end:span 9}.-span-rows-9{grid-row-end:span span 9}}.-span-cols-10{width:100%}@supports (display:grid){.-span-cols-10{width:auto;grid-column-end:span 10}.-span-rows-10{grid-row-end:span span 10}}.-span-cols-11{width:110%}@supports (display:grid){.-span-cols-11{width:auto;grid-column-end:span 11}.-span-rows-11{grid-row-end:span span 11}}.-span-cols-12{width:120%}@supports (display:grid){.-span-cols-12{width:auto;grid-column-end:span 12}.-span-rows-12{grid-row-end:span span 12}}.-span-cols-13{width:130%}@supports (display:grid){.-span-cols-13{width:auto;grid-column-end:span 13}.-span-rows-13{grid-row-end:span span 13}}.-span-cols-14{width:140%}@supports (display:grid){.-span-cols-14{width:auto;grid-column-end:span 14}.-span-rows-14{grid-row-end:span span 14}}.-span-cols-15{width:150%}@supports (display:grid){.-span-cols-15{width:auto;grid-column-end:span 15}.-span-rows-15{grid-row-end:span span 15}}.-span-cols-16{width:160%}@supports (display:grid){.-span-cols-16{width:auto;grid-column-end:span 16}.-span-rows-16{grid-row-end:span span 16}}.-fixed,.-pos-fixed{position:fixed}.-pos-absolute{position:absolute}.-pos-relative{position:relative}.-t-0,.-top-0{top:0}.-r-0,.-right-0{right:0}.-b-0,.-bottom-0{bottom:0}.-l-0,.-left-0{left:0}.-top-half:calc(var(--spacing) * .5);.-top-1:calc(var(--spacing) * 1);.-top-2:calc(var(--spacing) * 2);.-top-3:calc(var(--spacing) * 3);.-top-4:calc(var(--spacing) * 4);.-top-5:calc(var(--spacing) * 5);.-right-half:calc(var(--spacing) * .5);.-right-1:calc(var(--spacing) * 1);.-right-2:calc(var(--spacing) * 2);.-right-3:calc(var(--spacing) * 3);.-right-4:calc(var(--spacing) * 4);.-right-5:calc(var(--spacing) * 5);.-bottom-half:calc(var(--spacing) * .5);.-bottom-1:calc(var(--spacing) * 1);.-bottom-2:calc(var(--spacing) * 2);.-bottom-3:calc(var(--spacing) * 3);.-bottom-4:calc(var(--spacing) * 4);.-bottom-5:calc(var(--spacing) * 5);.-left-half:calc(var(--spacing) * .5);.-left-1:calc(var(--spacing) * 1);.-left-2:calc(var(--spacing) * 2);.-left-3:calc(var(--spacing) * 3);.-left-4:calc(var(--spacing) * 4);.-left-5:calc(var(--spacing) * 5);.-m-all{margin:var(--spacing)}.-p-all{padding:var(--spacing)}.-m-0,.-m-all-0{margin:0!important}.-p-0,.-p-all-0{padding:0!important}.-m-auto{margin:auto}.-p-top-half{padding-top:calc(var(--spacing) * .5)}.-m-top-half{margin-top:calc(var(--spacing) * .5)}.-p-top-1{padding-top:calc(var(--spacing) * 1)}.-m-top-1{margin-top:calc(var(--spacing) * 1)}.-p-top-2{padding-top:calc(var(--spacing) * 2)}.-m-top-2{margin-top:calc(var(--spacing) * 2)}.-p-top-3{padding-top:calc(var(--spacing) * 3)}.-m-top-3{margin-top:calc(var(--spacing) * 3)}.-p-top-4{padding-top:calc(var(--spacing) * 4)}.-m-top-4{margin-top:calc(var(--spacing) * 4)}.-p-top-5{padding-top:calc(var(--spacing) * 5)}.-m-top-5{margin-top:calc(var(--spacing) * 5)}.-p-right-half{padding-right:calc(var(--spacing) * .5)}.-m-right-half{margin-right:calc(var(--spacing) * .5)}.-p-right-1{padding-right:calc(var(--spacing) * 1)}.-m-right-1{margin-right:calc(var(--spacing) * 1)}.-p-right-2{padding-right:calc(var(--spacing) * 2)}.-m-right-2{margin-right:calc(var(--spacing) * 2)}.-p-right-3{padding-right:calc(var(--spacing) * 3)}.-m-right-3{margin-right:calc(var(--spacing) * 3)}.-p-right-4{padding-right:calc(var(--spacing) * 4)}.-m-right-4{margin-right:calc(var(--spacing) * 4)}.-p-right-5{padding-right:calc(var(--spacing) * 5)}.-m-right-5{margin-right:calc(var(--spacing) * 5)}.-p-bottom-half{padding-bottom:calc(var(--spacing) * .5)}.-m-bottom-half{margin-bottom:calc(var(--spacing) * .5)}.-p-bottom-1{padding-bottom:calc(var(--spacing) * 1)}.-m-bottom-1{margin-bottom:calc(var(--spacing) * 1)}.-p-bottom-2{padding-bottom:calc(var(--spacing) * 2)}.-m-bottom-2{margin-bottom:calc(var(--spacing) * 2)}.-p-bottom-3{padding-bottom:calc(var(--spacing) * 3)}.-m-bottom-3{margin-bottom:calc(var(--spacing) * 3)}.-p-bottom-4{padding-bottom:calc(var(--spacing) * 4)}.-m-bottom-4{margin-bottom:calc(var(--spacing) * 4)}.-p-bottom-5{padding-bottom:calc(var(--spacing) * 5)}.-m-bottom-5{margin-bottom:calc(var(--spacing) * 5)}.-p-left-half{padding-left:calc(var(--spacing) * .5)}.-m-left-half{margin-left:calc(var(--spacing) * .5)}.-p-left-1{padding-left:calc(var(--spacing) * 1)}.-m-left-1{margin-left:calc(var(--spacing) * 1)}.-p-left-2{padding-left:calc(var(--spacing) * 2)}.-m-left-2{margin-left:calc(var(--spacing) * 2)}.-p-left-3{padding-left:calc(var(--spacing) * 3)}.-m-left-3{margin-left:calc(var(--spacing) * 3)}.-p-left-4{padding-left:calc(var(--spacing) * 4)}.-m-left-4{margin-left:calc(var(--spacing) * 4)}.-p-left-5{padding-left:calc(var(--spacing) * 5)}.-m-left-5{margin-left:calc(var(--spacing) * 5)}.-p-all-half{padding:calc(var(--spacing) * .5)}.-p-all-1{padding:var(--spacing)}.-p-all-2{padding:calc(var(--spacing) * 2)}.-p-all-3{padding:calc(var(--spacing) * 3)}.-p-all-4{padding:calc(var(--spacing) * 4)}.-p-all-5{padding:calc(var(--spacing) * 5)}.-p-x-half{padding-left:calc(var(--spacing) * .5);padding-right:calc(var(--spacing) * .5)}.-p-x-1{padding-left:calc(var(--spacing) * 1);padding-right:calc(var(--spacing) * 1)}.-p-x-2{padding-left:calc(var(--spacing) * 2);padding-right:calc(var(--spacing) * 2)}.-p-x-3{padding-left:calc(var(--spacing) * 3);padding-right:calc(var(--spacing) * 3)}.-p-x-4{padding-left:calc(var(--spacing) * 4);padding-right:calc(var(--spacing) * 4)}.-p-y-half{padding-top:calc(var(--spacing) * .5);padding-bottom:calc(var(--spacing) * .5)}.-p-y-1{padding-top:calc(var(--spacing) * 1);padding-bottom:calc(var(--spacing) * 1)}.-p-y-2{padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 2)}.-p-y-3{padding-top:calc(var(--spacing) * 3);padding-bottom:calc(var(--spacing) * 3)}.-p-y-4{padding-top:calc(var(--spacing) * 4);padding-bottom:calc(var(--spacing) * 4)}.-m-all-half{margin:calc(var(--spacing) * .5)}.-m-all-1{margin:var(--spacing)}.-m-all-2{margin:calc(var(--spacing) * 2)}.-m-all-3{margin:calc(var(--spacing) * 3)}.-m-all-4{margin:calc(var(--spacing) * 4)}.-m-all-5{margin:calc(var(--spacing) * 5)}.-m-x-half{margin-left:calc(var(--spacing) * .5);margin-right:calc(var(--spacing) * .5)}.-m-x-1{margin-left:calc(var(--spacing) * 1);margin-right:calc(var(--spacing) * 1)}.-m-x-2{margin-left:calc(var(--spacing) * 2);margin-right:calc(var(--spacing) * 2)}.-m-x-3{margin-left:calc(var(--spacing) * 3);margin-right:calc(var(--spacing) * 3)}.-m-x-4{margin-left:calc(var(--spacing) * 4);margin-right:calc(var(--spacing) * 4)}.-m-y-half{margin-top:calc(var(--spacing) * .5);margin-bottom:calc(var(--spacing) * .5)}.-m-y-1{margin-top:calc(var(--spacing) * 1);margin-bottom:calc(var(--spacing) * 1)}.-m-y-2{margin-top:calc(var(--spacing) * 2);margin-bottom:calc(var(--spacing) * 2)}.-m-y-3{margin-top:calc(var(--spacing) * 3);margin-bottom:calc(var(--spacing) * 3)}.-m-y-4{margin-top:calc(var(--spacing) * 4);margin-bottom:calc(var(--spacing) * 4)}.-lightweight{font-weight:300}.-bookweight{font-weight:500}.-heavyweight{font-weight:600}.-boldweight{font-weight:700}.-extraboldweight{font-weight:800}.-upcase{text-transform:uppercase}.-nocase{text-transform:none}.-lineheight-1{line-height:1em}.-lineheight-1-2{line-height:1.2em}.-lineheight-1-3{line-height:1.3em}.-lineheight-1-4{line-height:1.4em}.-lineheight-1-5{line-height:24px;line-height:1.5rem}.-text-left{text-align:left}.-text-center{text-align:center}.-text-right{text-align:right}.-rem-3{font-size:48px;font-size:3rem}.-rem-2{font-size:32px;font-size:2rem}.-rem-1-75{font-size:28px;font-size:1.75rem}.-rem-1-5{font-size:24px;font-size:1.5rem}.-rem-1-2{font-size:19.2px;font-size:1.2rem}.-rem-1{font-size:16px;font-size:1rem}.-rem-09{font-size:14.4px;font-size:.9rem}.-rem-085{font-size:13.6px;font-size:.85rem}.-rem-08{font-size:12.8px;font-size:.8rem}.-rem-07,.-rem-075{font-size:11.2px;font-size:.7rem}.-rem-06{font-size:9.6px;font-size:.6rem}.-em-3{font-size:3em}.-em-2{font-size:2em}.-em-1-75{font-size:1.75em}.-em-1-5{font-size:1.5em}.-em-1-2{font-size:1.2em}.-em-1{font-size:1em}.-em-09{font-size:.9em}.-em-085{font-size:.85em}.-em-08{font-size:.8em}.-em-07,.-em-075{font-size:.7em}.-em-06{font-size:.6em}.ie10,.ie11,.ie678,.unsupported{display:none}@supports not (display:grid){.unsupported{display:block}}@media (-ms-high-contrast:none){.ie10{display:block}.ie11,::-ms-backdrop{display:block}}@media \0screen\,screen\9 {.ie678{display:block}}:root{--sans:"Lato",sans-serif;--core-secondary:148,40%;--core-primary:192,56%;--core-highlight:350,98%}
\ No newline at end of file diff --git a/docs/css/main.css b/docs/css/main.css new file mode 100644 index 0000000..1d3e329 --- /dev/null +++ b/docs/css/main.css @@ -0,0 +1,553 @@ +html, body{ + font-family: 'Fira sans', sans-serif; + background: url('../img/noisyly.png') repeat fixed, linear-gradient(to bottom, rgba(28,20,20,0.26) 0%,rgba(155,155,155,0) 0.2em) fixed; + font-size: 1em; + overflow-x: hidden; +} + +html{ + background: rgb(76, 76, 76) url('../img/noisyly.png'); + border-bottom: 10px solid #000; +} + +footer a:hover{ + color: rgb(252, 76, 122); + border-color: rgb(252, 76, 122); +} + +.hi-message{ + text-align: center; + width: 14em; + left: 50%; + top: 8.4em; + font-size: 0.9rem; + background: #000; + color: #fff; + position: absolute; + padding: 21px; + margin-top: 8px; + border-radius: 8px; + box-shadow: 1px 0px 12px rgba(0,0,0,0.2); + margin-left: -7em; + transform: translateY(-7px); + opacity: 0; +} + .hi-message.transitions{ + transition: 0.9s all; + } + .hi-message.on{ + transform: translateY(0); + opacity: 1; + } + .hi-message p{ + margin: 0; + text-align: center; + line-height: 1.3; + font-weight: 500; + } + .hi-message:before{ + content: ''; + border: 7px solid #000; + border-color: transparent transparent #000 transparent ; + display: block; + top: -14px; + left: 50%; + margin-left: -10px; + position: absolute; + } + .skewed-bg{ + min-width: 242px; + width: 11em; + margin: auto; + display: block; + height: 90px; + background: none; + mix-blend-mode: multiply; + padding: 0; + margin-top: 0; + border-radius: 10em; + position: relative; + overflow: hidden; + z-index: 9; + } + + .skewed-bg.on:before{ + background: rgba(0,0,0,0.1); + } + + .skewed-bg:after{ + content: ''; + border: 1px solid #ccc; + width: calc(100% - 4px); + height: calc(100% - 4px); + display: block; + padding: 1px; + overflow: hidden; + transition: 0.8s all; + border-radius: 10em; + position: absolute; top: 0; left: 0; + } + + .skewed-bg:before{ + content: ''; + background: #fff; + border: 10px solid #efefef; + width: calc(100% - 22px); + height: calc(100% - 22px); + display: block; + padding: 1px; + overflow: hidden; + transition: 0.8s all; + border-radius: 10em; + /* mix-blend-mode: multiply; */ + } + .progress{ + height: 110%; + width: 120%; + background: rgba(255,255,255,0.69); + opacity: 0; + transition: 2s opacity; + transform: skewX(-24deg); + position: absolute; + top: -5%; left: -10%; + pointer-events: none; + } + .progress.on{ + opacity: 1; + animation: 13s loader 1; + } +@keyframes loader{ + 0%{ + width: 0; + } + 100%{ + width: 120%; + } +} + +#timclulow-word{ + width: 219px; + margin: auto; + position: absolute; + top: 2.1em; + left: 50%; + margin-left: -109px; + height: 86px; + padding: 10px 30px; + margin-top: 0; + border-radius: 0 0 6px 6px; + filter: drop-shadow( -1px -1px 0px rgba(55, 32, 66,0.12)); + z-index: 10; + pointer-events: none; +} +#T, #I, #M, #C, #L1, #U, #L2, #O, #W{ + opacity: 0.99; +} +.grid-layout-1{ + display: grid; + grid-gap: 1em; + grid-template-areas: "header" "main" "footer"; + grid-template-rows: 0fr auto 1fr; +} +@media only screen and (min-width: 1240px) { + .grid-layout-1{ + margin: auto; + width: 50em; + box-shadow: 0px 2px 52px rgba(0,0,0,0.2); + } +} + +.header{ + grid-area: header; + padding-top: 2em; +} +.main{ + grid-area: main; + margin: 0 auto 40px; + line-height: 1.2em; + text-align: left; + width: 70%; + max-width: 35em; +} + .main h1 + p{ + margin-right: 10px; + } + .main a, footer a{ + transition: 0.3s all cubic-bezier(0.42, 0, 0.57, 1.96) + } + .main a:link{ + box-shadow: inset 0 -1px 0 #ccc; + transition: 0.4s all ease-in-out; + } + .main a:hover{ + color: #000; + box-shadow: inset 0 -1.3em 0 rgba(100,100,100,.1); + } + .main .grid{ + margin-top: 3em; + } + .main > h2:first-child{ + margin-top: 1em; + } + .main .-span-cols-4{ + border-left: 1px solid #ccc; + font-size: 0.85em; + line-height: 1.4; + } + .main .-span-cols-4 ul{ + padding-left: 0; + } + .main .-span-cols-4 ul li{ + padding-left: 0; + padding-bottom: 0.7em; + padding-right: 1em; + font-size: 0.75em; + list-style-type: none; + font-style: italic; + color: #999; + } + .main .-span-cols-4 ul li:before{ + content: '— '; + } + .main h4{ + text-transform: uppercase; + font-size: 0.9em; + font-weight: 800; + letter-spacing: 1px; + margin-bottom: 1em; + } + .main h3{ + margin-top: -13px; + font-weight: 400; + font-size: 0.9em; + } + .main h6{ + margin: 0 0 0.5em 0; + padding: 0; + font-size: 0.8em; + } + .main h6 em{ + margin-top: 1em; + display: block; + font-size: 0.8em; + font-weight: 400; + color: rgb(70, 122, 163); + } + .main h2 + p em{ + margin-top: 0; + } + .main ul{ + margin-bottom: 2em; + } + +.col > h2:first-child{ + margin-top: 0; +} + +.col h4{ + margin-top: 5px; +} + +.footer{ + grid-area: footer; + padding-bottom: 5em; + width: 80%; + display: block; +} + + +h1, h2, h3, h4, h5, h6{ + text-align: left; +} + +h1{ + text-align: center; + font-size: 3em; + margin-top: 0.5em; + margin-bottom: 0.8em; +} + +h2{ + text-align: left; + font-weight: 600; + font-size: 1.15em; + padding-bottom: 5px; + letter-spacing: -0.04em; + margin-top: 2.5em; +} + +p{ + text-align: left; + font-family: 'Fira sans', sans-serif; + font-weight: 200; + font-size: 0.85em; +} + +dl{ + text-align: left; + font-size: 0.85em; +} + +dl dt, dl dd{ + line-height: 1.4; + padding-bottom: 2px; +} + +dl dt:first-child, dt:first-child + dd{ + border: 0; + margin-top: 0; +} + +dl dt{ + font-size: 0.7em; + text-transform: uppercase; + border-top: 1px solid #cecece54; + padding-top: 11px; +} + +dl dt strong{ + font-weight: 600; + background: #f3f3f3; + color: #2b2b2b; + padding: 0 7px; + letter-spacing: 0.02em; + border-radius: 10px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + margin-bottom: 3px; + display: inline-block; +} + +dl dd{ + font-weight: 300; + font-size: 0.9em; + padding-bottom: 13px; + padding-left: 7px; +} + +ul{ + padding-left: 1em; +} + +ul li{ + text-align: left; + list-style-type: none; + padding-left: 0.2em; + display: list-item; + font-weight: 200; + font-size: 0.85em; + counter-increment: item; + padding-bottom: 1em; +} + +.-span-cols-6 ul li{ + padding-left: 0.6em; +} + +.-span-cols-6 ul li:before{ + content: "0" counter(item) ". "; + font-weight: 800; + margin-left: -1.65em; + margin-right: 2px; + font-size: 0.85em; + position: relative; + left: -8px; + top: -1px; +} + +#angle1{ + transform-origin: 10px 10px; +} + +.-clearfix{ + display: block; + clear: both; +} + +.download, .download .download-icon, .download .download-icon:before, +.download .download-icon:after{ + transition: 0.7s all cubic-bezier(0.42, 0, 0.57, 1.96); +} + +.download:hover{ + color: rgb(252, 76, 122); +} + +.download:hover .download-icon{ + transform: scale(1); + border-color: rgb(252, 76, 122); +} +.download:hover .download-icon:before, +.download:hover .download-icon:after{ + background: rgb(252, 76, 122); +} +.download-icon{ + width: 29px; + height: 29px; + border: 2px solid #333; + border-radius: 5em; + display: inline-block; + position: relative; + margin-left: -36px; + top: 8px; left: 0px; + transform: scale(0.8); +} +.download-icon:before{ + position: absolute; + left: 9px; + top: 8px; + transform: rotate(45deg); + content: ''; + display: block; + height: 2px; + width: 10px; + background: #333; +} +.download-icon:after{ + position: absolute; + left: 9px; + bottom: 9px; + transform: rotate(-45deg); + content: ''; + display: block; + height: 2px; + width: 10px; + background: #333; +} +.-print-only{ display: none} +.-print-only p{ + margin-bottom: 0; + margin-top: 0; +} +.-print-only h6{ + margin: 20px 0 0 0; +} + +.lastpublished{ + color: #999; + padding-top: 2em; +} + +@media print{ + .header{ + padding-top: 0; + } + + #timclulow-word{ + top: 0.1em; + } + + #timclulow-word, .skewed-bg{ + transform: scale(0.55); + -webkit-transform: scale(0.55); + } + + .skewed-bg{ + width: 25em; + } + + .main h1 + p{ + margin-right: 2em; + } + + .-p-left-3{ + padding-left: 3em; + } + + .-m-right-2{ + padding-right: 2em; + } + + .-print-only{ + display: block; + } + .-print-hidden, .download-icon{ + display: none; + } + + html, body{ + background: none; + overflow-x: hidden; + } + + body{ + font-size: 0.7em; + width: 100%; + height: 100%; + margin-top: 0; + } + + .main h2{ + margin: 2em 0 1em; + } + + .main h3{ + margin: 0 0 1em; + } + + .main h6{ + margin-bottom: 0; + } + + .main, .footer{ + width: 100%; + max-width: none; + } + + .main ul{ + margin-top: 10px; + margin-left: 0.5em; + } + + dl dd{ + padding-bottom: 0 + } + + #pageHeader-1{ + display: none; + } + .-float-right{ + float: none; + width: 100%; + } + .-float-right .-print-only{ + display: inline; + } + .footer{ + padding-bottom: 0; + } + html{ + border-bottom: none; + } + @page { + size: A4; + margin: 2cm 3cm; + } +} + +/* responsiveness */ +@media only screen and (max-width: 800px) { + .-float-left, .-float-right{ + float: none; + } + .grid{ + display: block; + } + .-span-cols-4{ + margin-top: 3em; + } + .footer{ + width: 60%; + } +} + +@media only screen and (min-width: 500px) { + html, body{ + font-size: 1.1em; + } +} + +@media only screen and (min-width: 1140px) { + html, body{ + font-size: 1.25em; + } +}
\ No newline at end of file diff --git a/docs/css/main.min.css b/docs/css/main.min.css new file mode 100644 index 0000000..9a24727 --- /dev/null +++ b/docs/css/main.min.css @@ -0,0 +1 @@ +body,html{font-family:Fira sans,sans-serif;background:url(../img/noisyly.png) repeat fixed,linear-gradient(180deg,rgba(28,20,20,.26) 0,hsla(0,0%,61%,0) .2em) fixed;font-size:1em;overflow-x:hidden}html{background:#4c4c4c url(../img/noisyly.png);border-bottom:10px solid #000}footer a:hover{color:#fc4c7a;border-color:#fc4c7a}.hi-message{text-align:center;width:14em;left:50%;top:8.4em;font-size:.9rem;background:#000;color:#fff;position:absolute;padding:21px;margin-top:8px;border-radius:8px;box-shadow:1px 0 12px rgba(0,0,0,.2);margin-left:-7em;transform:translateY(-7px);opacity:0}.hi-message.transitions{transition:all .9s}.hi-message.on{transform:translateY(0);opacity:1}.hi-message p{margin:0;text-align:center;line-height:1.3;font-weight:500}.hi-message:before{content:"";border:7px solid #000;border-color:transparent transparent #000;display:block;top:-14px;left:50%;margin-left:-10px;position:absolute}.skewed-bg{min-width:242px;width:11em;margin:auto;display:block;height:90px;background:none;mix-blend-mode:multiply;padding:0;margin-top:0;border-radius:10em;position:relative;overflow:hidden;z-index:1}.skewed-bg.on:before{background:rgba(0,0,0,.1)}.skewed-bg:after{border:1px solid #ccc;width:calc(100% - 4px);height:calc(100% - 4px);border-radius:10em;position:absolute;top:0;left:0}.skewed-bg:after,.skewed-bg:before{content:"";display:block;padding:1px;overflow:hidden;transition:all .8s}.skewed-bg:before{background:#fff;border:10px solid #efefef;width:calc(100% - 22px);height:calc(100% - 22px);border-radius:10em}.progress{height:110%;width:120%;background:hsla(0,0%,100%,.69);opacity:0;transition:opacity 2s;transform:skewX(-24deg);position:absolute;top:-5%;left:-10%;pointer-events:none}.progress.on{opacity:1;animation:13s a 1}@keyframes a{0%{width:0}to{width:120%}}#timclulow-word{width:219px;margin:auto;position:absolute;top:2.1em;left:50%;margin-left:-109px;height:86px;padding:10px 30px;margin-top:0;border-radius:0 0 6px 6px;filter:drop-shadow(-1px -1px 0 rgba(55,32,66,.12));z-index:2;pointer-events:none}#C,#I,#L1,#L2,#M,#O,#T,#U,#W{opacity:.99}.grid-layout-1{display:grid;grid-gap:1em;grid-template-areas:"a" "b" "c";grid-template-rows:0fr auto 1fr}@media only screen and (min-width:1240px){.grid-layout-1{margin:auto;width:50em;box-shadow:0 2px 52px rgba(0,0,0,.2)}}.header{grid-area:a;padding-top:2em}.main{grid-area:b;margin:0 auto 40px;line-height:1.2em;text-align:left;width:70%;max-width:35em}.main h1+p{margin-right:10px}.main a,footer a{transition:all .3s cubic-bezier(.42,0,.57,1.96)}.main a:link{box-shadow:inset 0 -1px 0 #ccc;transition:all .4s ease-in-out}.main a:hover{color:#000;box-shadow:inset 0 -1.3em 0 hsla(0,0%,39%,.1)}.main .grid{margin-top:3em}.main>h2:first-child{margin-top:1em}.main .-span-cols-4{border-left:1px solid #ccc;font-size:.85em;line-height:1.4}.main .-span-cols-4 ul{padding-left:0}.main .-span-cols-4 ul li{padding-left:0;padding-bottom:.7em;padding-right:1em;font-size:.75em;list-style-type:none;font-style:italic;color:#999}.main .-span-cols-4 ul li:before{content:"— "}.main h4{text-transform:uppercase;font-size:.9em;font-weight:800;letter-spacing:1px;margin-bottom:1em}.main h3{margin-top:-13px;font-weight:400;font-size:.9em}.main h6{margin:0 0 .5em;padding:0;font-size:.8em}.main h6 em{margin-top:1em;display:block;font-size:.8em;font-weight:400;color:#467aa3}.main h2+p em{margin-top:0}.main ul{margin-bottom:2em}.col>h2:first-child{margin-top:0}.col h4{margin-top:5px}.footer{grid-area:c;padding-bottom:5em;width:80%;display:block}h1,h2,h3,h4,h5,h6{text-align:left}h1{text-align:center;font-size:3em;margin-top:.5em;margin-bottom:.8em}h2{text-align:left;font-weight:600;font-size:1.15em;padding-bottom:5px;letter-spacing:-.04em;margin-top:2.5em}p{font-family:Fira sans,sans-serif;font-weight:200}dl,p{text-align:left;font-size:.85em}dl dd,dl dt{line-height:1.4;padding-bottom:2px}dl dt:first-child,dt:first-child+dd{border:0;margin-top:0}dl dt{font-size:.7em;text-transform:uppercase;border-top:1px solid #cecece54;padding-top:11px}dl dt strong{font-weight:600;background:#f3f3f3;color:#2b2b2b;padding:0 7px;letter-spacing:.02em;border-radius:10px;border-bottom:1px solid rgba(0,0,0,.1);margin-bottom:3px;display:inline-block}dl dd{font-weight:300;font-size:.9em;padding-bottom:13px;padding-left:7px}ul{padding-left:1em}ul li{text-align:left;list-style-type:none;padding-left:.2em;display:list-item;font-weight:200;font-size:.85em;counter-increment:a;padding-bottom:1em}.-span-cols-6 ul li{padding-left:.6em}.-span-cols-6 ul li:before{content:"0" counter(a) ". ";font-weight:800;margin-left:-1.65em;margin-right:2px;font-size:.85em;position:relative;left:-8px;top:-1px}#angle1{transform-origin:10px 10px}.-clearfix{display:block;clear:both}.download,.download .download-icon,.download .download-icon:after,.download .download-icon:before{transition:all .7s cubic-bezier(.42,0,.57,1.96)}.download:hover{color:#fc4c7a}.download:hover .download-icon{transform:scale(1);border-color:#fc4c7a}.download:hover .download-icon:after,.download:hover .download-icon:before{background:#fc4c7a}.download-icon{width:29px;height:29px;border:2px solid #333;border-radius:5em;display:inline-block;position:relative;margin-left:-36px;top:8px;left:0;transform:scale(.8)}.download-icon:before{top:8px;transform:rotate(45deg)}.download-icon:after,.download-icon:before{position:absolute;left:9px;content:"";display:block;height:2px;width:10px;background:#333}.download-icon:after{bottom:9px;transform:rotate(-45deg)}.-print-only{display:none}.-print-only p{margin-bottom:0;margin-top:0}.-print-only h6{margin:20px 0 0}.lastpublished{color:#999;padding-top:2em}@media print{.header{padding-top:0}#timclulow-word{top:.1em}#timclulow-word,.skewed-bg{transform:scale(.55);-webkit-transform:scale(.55)}.skewed-bg{width:25em}.main h1+p{margin-right:2em}.-p-left-3{padding-left:3em}.-m-right-2{padding-right:2em}.-print-only{display:block}.-print-hidden,.download-icon{display:none}body,html{background:none;overflow-x:hidden}body{font-size:.7em;width:100%;height:100%;margin-top:0}.main h2{margin:2em 0 1em}.main h3{margin:0 0 1em}.main h6{margin-bottom:0}.footer,.main{width:100%;max-width:none}.main ul{margin-top:10px;margin-left:.5em}dl dd{padding-bottom:0}#pageHeader-1{display:none}.-float-right{float:none;width:100%}.-float-right .-print-only{display:inline}.footer{padding-bottom:0}html{border-bottom:none}@page{size:A4;margin:2cm 3cm}}@media only screen and (max-width:800px){.-float-left,.-float-right{float:none}.grid{display:block}.-span-cols-4{margin-top:3em}.footer{width:60%}}@media only screen and (min-width:500px){body,html{font-size:1.1em}}@media only screen and (min-width:1140px){body,html{font-size:1.25em}}
\ No newline at end of file diff --git a/docs/home/index.html b/docs/home/index.html new file mode 100644 index 0000000..bdbf3e3 --- /dev/null +++ b/docs/home/index.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + + <title>CV Tim Clulow</title> + + <meta name="HandheldFriendly" content="True"> + <meta name="MobileOptimized" content="320"> + <meta name="viewport" content="initial-scale=1, maximum-scale=1"> + <meta name="generator" content="Hugo 0.32.4" /> + + + <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> + + <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400i,500,800" rel="stylesheet"> + <link href='https://cssandstuff.github.io/cv/css/belmu.css?1523876425808338105' rel='stylesheet' type="text/css" /> + <link href='https://cssandstuff.github.io/cv/css/main.css?1523876425808393115' rel='stylesheet' type="text/css" /> + + <link rel="shortcut icon" href="/favicon.png" type="image/x-icon" /> + + + + + + <link href="https://fonts.googleapis.com/css?family=Fira+Sans:200,400,400i,600,900" rel="stylesheet"> + </head> + + <body class="ma0 "> + <div class="grid-layout-1"> + <div class="header"> +<div class="skewed-bg" id="skew"> + <div id="progress" class="progress"></div> +</div> +<img id="timclulow-word" class="-print-only" src="https://cssandstuff.github.io/cv/img/timclulow.svg" /> +<svg id="timclulow-word" class="-print-hidden" width="659px" height="179px" viewBox="0 0 659 179" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<defs> + + + <g id="timclulow" fill="transparent"> + <g transform="translate(22.000000, 22.000000)"> + <g id="Clulow" transform="translate(0.000000, 85.000000)"> + <path d="M271.949997,0.755876251 L271.949997,20.7964747 C271.698614,33.6035156 263.066791,42.8370732 241.756306,42.8370732 L227.714346,42.8370732 C202.244608,42.8370732 195,34.7304688 195,21.7964747 L195,1.38788821" id="U" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M359.838094,43.449185 L324,43.449185 C324,43.449185 314,43.449185 314,33.1308425 L314,1" id="L2" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M165.838094,43.449185 L130,43.449185 C130,43.449185 120,43.449185 120,33.1308425 L120,1" id="L1" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M615.960938,1.75587625 C615.960938,1.75587625 598.868859,36.8938274 598.607202,37.3205587 C594.999023,43.2050612 590.347747,38.6420127 590.347747,38.6420127 L567.601562,19.3789063 C560.59082,13.7299805 556.395996,13.5683594 549.293945,19.3789063 L525.962891,39.9160156 C525.962891,39.9160156 520.952148,43.7421875 517.778584,36.6316259 L501,1.75587625" id="W" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="O" x="388" y="1" width="86" height="42" rx="16"></rect> + <path d="M83.9446745,1 L10.0566406,1 C10.0566406,1 0.71875,0.75587625 1,11.109375 L1,34.6230469 C1,34.6230469 1,42.6354117 11.4355469,42.6354117 L83.9446745,42.6354117" id="C" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + <g id="TIM" stroke-linecap="round" stroke-linejoin="round" transform="translate(154.000000, 0.000000)"> + <g id="T"> + <path d="M22.65835,22 L65.674984,22" id="t-vert" transform="translate(44.166667, 24.000000) rotate(-90.000000) translate(-44.166667, -24.000000) "></path> + <path d="M0,0 L83.3147146,0" id="t-horiz"></path> + </g> + <g id="M" transform="translate(159.000000, 0.000000)"> + <path d="M1,45 L1,1" id="vert1"></path> + + <g id="armandhand"> + <path d="M47,32.5634036 C48.6414657,32.5774994 50.3050711,32.0213126 51.9823326,30.9062702 L95.9086456,0" id="angle2"></path> + <path d="M95.960937,0 L95.960937,44" id="vert2"></path> + </g> + <path d="M1,0 L42.351562,30.9062702 C43.9144452,32.0163861 45.506638,32.5652366 47.1200928,32.5636616" id="angle1"></path> + + </g> + <path d="M96.1318533,24 L139.868147,24" id="I" transform="translate(118.000000, 24.000000) rotate(-90.000000) translate(-118.000000, -24.000000) "></path> + </g> + </g> + </g> + +</defs> +<g> + + <use xlink:href="#timclulow" stroke="#222" stroke-width="4" /> + +</g> +</svg> +<div id="hi-message" class="hi-message -print-hidden"> + <p>I’m currently looking for a permanent position from mid-August 2018.</p> +</div> +</div> + <main class="main" role="main" id="mainContent"> + + MOre moosppp + + <div id="drawing"></div> + </main> + <footer class="-m-auto -border-top -em-08 -lineheight-1-3 footer -text-left"> + + <div class="-text-center -print-hidden"><a href="assets/cv.pdf" class="download"><span class="download-icon"></span> Download this as a pdf <span class="-em-07 ">(generated using node-html-pdf)</span></a> + </div> + + + <em class="-clearfix -text-center lastpublished -em-07">Last Published Monday, Apr 16, 2018, Portfolio upon request (I'm still working on it)</em> +</footer> + + +<script async src="https://www.googletagmanager.com/gtag/js?id=UA-7167547-14"></script> +<script> + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + gtag('config', 'UA-7167547-14'); +</script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script> +<script src="https://cssandstuff.github.io/cv/js/main.js?1523876425808894262"></script> + + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/docs/img/noisey.png b/docs/img/noisey.png Binary files differnew file mode 100644 index 0000000..96f0950 --- /dev/null +++ b/docs/img/noisey.png diff --git a/docs/img/noisy.png b/docs/img/noisy.png Binary files differnew file mode 100644 index 0000000..ce1fba5 --- /dev/null +++ b/docs/img/noisy.png diff --git a/docs/img/noisyish.png b/docs/img/noisyish.png Binary files differnew file mode 100644 index 0000000..39f9952 --- /dev/null +++ b/docs/img/noisyish.png diff --git a/docs/img/noisyly.png b/docs/img/noisyly.png Binary files differnew file mode 100644 index 0000000..ed037af --- /dev/null +++ b/docs/img/noisyly.png diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..dfb0adc --- /dev/null +++ b/docs/index.html @@ -0,0 +1,243 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + + <title>CV Tim Clulow</title> + + <meta name="HandheldFriendly" content="True"> + <meta name="MobileOptimized" content="320"> + <meta name="viewport" content="initial-scale=1, maximum-scale=1"> + <meta name="generator" content="Hugo 0.32.4" /> + + + <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> + + <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400i,500,800" rel="stylesheet"> + + <link href='https://cssandstuff.github.io/cv/css/belmu.css?1526943999126330668' rel='stylesheet' type="text/css" /> + <link href='https://cssandstuff.github.io/cv/css/main.css?1526943999126396886' rel='stylesheet' type="text/css" /> + + + + <link rel="shortcut icon" href="/favicon.png" type="image/x-icon" /> + + + + <link href="https://cssandstuff.github.io/cv/index.xml" rel="alternate" type="application/rss+xml" title="CV Tim Clulow" /> + <link href="https://cssandstuff.github.io/cv/index.xml" rel="feed" type="application/rss+xml" title="CV Tim Clulow" /> + + + + <link href="https://fonts.googleapis.com/css?family=Fira+Sans:200,400,400i,600,900" rel="stylesheet"> + </head> + + <body class="ma0 "> + <div class="grid-layout-1"> + <div class="header"> +<div class="skewed-bg" id="skew"> + <div id="progress" class="progress"></div> +</div> +<img id="timclulow-word" class="-print-only" src="https://cssandstuff.github.io/cv/img/timclulow.svg" /> +<svg id="timclulow-word" class="-print-hidden" width="659px" height="179px" viewBox="0 0 659 179" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<defs> + + + <g id="timclulow" fill="transparent"> + <g transform="translate(22.000000, 22.000000)"> + <g id="Clulow" transform="translate(0.000000, 85.000000)"> + <path d="M271.949997,0.755876251 L271.949997,20.7964747 C271.698614,33.6035156 263.066791,42.8370732 241.756306,42.8370732 L227.714346,42.8370732 C202.244608,42.8370732 195,34.7304688 195,21.7964747 L195,1.38788821" id="U" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M359.838094,43.449185 L324,43.449185 C324,43.449185 314,43.449185 314,33.1308425 L314,1" id="L2" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M165.838094,43.449185 L130,43.449185 C130,43.449185 120,43.449185 120,33.1308425 L120,1" id="L1" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M615.960938,1.75587625 C615.960938,1.75587625 598.868859,36.8938274 598.607202,37.3205587 C594.999023,43.2050612 590.347747,38.6420127 590.347747,38.6420127 L567.601562,19.3789063 C560.59082,13.7299805 556.395996,13.5683594 549.293945,19.3789063 L525.962891,39.9160156 C525.962891,39.9160156 520.952148,43.7421875 517.778584,36.6316259 L501,1.75587625" id="W" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="O" x="388" y="1" width="86" height="42" rx="16"></rect> + <path d="M83.9446745,1 L10.0566406,1 C10.0566406,1 0.71875,0.75587625 1,11.109375 L1,34.6230469 C1,34.6230469 1,42.6354117 11.4355469,42.6354117 L83.9446745,42.6354117" id="C" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + <g id="TIM" stroke-linecap="round" stroke-linejoin="round" transform="translate(154.000000, 0.000000)"> + <g id="T"> + <path d="M22.65835,22 L65.674984,22" id="t-vert" transform="translate(44.166667, 24.000000) rotate(-90.000000) translate(-44.166667, -24.000000) "></path> + <path d="M0,0 L83.3147146,0" id="t-horiz"></path> + </g> + <g id="M" transform="translate(159.000000, 0.000000)"> + <path d="M1,45 L1,1" id="vert1"></path> + + <g id="armandhand"> + <path d="M47,32.5634036 C48.6414657,32.5774994 50.3050711,32.0213126 51.9823326,30.9062702 L95.9086456,0" id="angle2"></path> + <path d="M95.960937,0 L95.960937,44" id="vert2"></path> + </g> + <path d="M1,0 L42.351562,30.9062702 C43.9144452,32.0163861 45.506638,32.5652366 47.1200928,32.5636616" id="angle1"></path> + + </g> + <path d="M96.1318533,24 L139.868147,24" id="I" transform="translate(118.000000, 24.000000) rotate(-90.000000) translate(-118.000000, -24.000000) "></path> + </g> + </g> + </g> + +</defs> +<g> + + <use xlink:href="#timclulow" stroke="#222" stroke-width="4" /> + +</g> +</svg> +<div id="hi-message" class="hi-message -print-hidden"> + <p>I’m currently looking for a permanent position from mid-August 2018.</p> +</div> +</div> + <main class="main" role="main" id="mainContent"> + + + +<h1 id="hello">Hello,</h1> + +<p>I’m a self motivated Front-End UI/UX Developer & Interaction Designer who loves to create. I have 15+ years of experience and feel I would be a great asset to any development or design team. I strive to deliver quality work through focused research and endeavour to be at the edge of emerging technology.</p> + +<div class="grid"> + <div class="col -span-cols-6 -m-right-2"> + <h2 id="professional-experience">Professional Experience</h2> + +<h6 id="may-2015-present"><em>May 2015 - Present</em></h6> + +<h3 id="vocus-communications-ui-ux-lead">Vocus Communications — UI/UX Lead</h3> + +<p>Working within an Agile development environment as UI/UX lead for the main application development team at Vocus. Role established UI and component guidelines to ensure the clear direction & alignment of a consistent UI for both marketing and app teams. Worked closely with other dev-team leaders and stakeholders to bring a consistent vision for the applications delivered and used by the wider business.</p> + +<ul> +<li>Produced a front-end redesign of Vocus One (Vocus’ premier customer portal)</li> +<li>Guided other Front End developers and managed UI guidelines within the Application Development team.</li> +<li>Designed & Implemented a web-based mobile experience, for managing fibre enclosures across the Vocus Network.</li> +<li>Introduced the use of Interactive prototypes in presentations and storyboarding of ideas to aid in the UX decision making process.</li> +</ul> + +<h6 id="september-2010-april-2015"><em>September 2010 - April 2015</em></h6> + +<h3 id="creative-feijoa-ltd-managing-director-owner">Creative Feijoa Ltd — Managing Director/Owner</h3> + +<p>Successfully ran my own business for 4 years across three different countries. The staple of work was providing front end development for Graphic Design Agencies and other Freelancers.</p> + +<ul> +<li>Built & Maintained a large number of user-friendly, content-managed websites using the Umbraco CMS.</li> +<li>Produced work for high end fashion & travel clients.</li> +</ul> + +<h6 id="september-2009-september-2010"><em>September 2009 - September 2010</em></h6> + +<h3 id="bview-geocast-ltd-front-end-developer-designer">Bview/Geocast Ltd — Front-end Developer / Designer</h3> + +<p>Worked at bView - a London startup focused on creating a geo-centric platform for delivering discount vouchers. Was part of a small development team, responsible for all front-facing aspects of bView’s sites and applications. +Worked on iPhone application “Local Sale Finder” I was responsible for Design and User Experience.</p> + +<ul> +<li>Logo development for a new Voucher distribution network. Worked with company directors to answer a brief based on brand requirements.</li> +<li>Became more focused on online booking forms across different mobile devices, and how to enrich small screen web experiences.</li> +</ul> + +<h6 id="march-2006-august-2009"><em>March 2006 - August 2009</em></h6> + +<h3 id="alpine-interactive-web-developer-designer">Alpine Interactive — Web Developer / Designer</h3> + +<ul> +<li>Worked with Press and media clients, such as the Spectator, the Independent, Editorial Intelligence and Full Circle Films.</li> +<li>Delivered Football World Cup 2006 website for the telegraph.co.uk</li> +</ul> + +<h6 id="march-2002-march-2006"><em>March 2002 - March 2006</em></h6> + +<h3 id="infocube-net-senior-interface-designer">Infocube.net — Senior Interface Designer</h3> + +<ul> +<li>Designed the UI for a 3D cube based navigation and information discovery tool that ran on PC, Web, and Mobile devices</li> +<li>Our team successfully delivered the Infocube interface to the UK mobile company three.</li> +</ul> + +</div> + +<div class="col -span-cols-4 -p-left-3"> + <h4 id="fluent-with">Fluent with</h4> + +<ul> +<li>Sketch</li> +<li>Adobe Illustrator</li> +<li>Photoshop</li> +<li>Fireworks</li> +<li>HTML5</li> +<li>CSS3, grid and flexbox</li> +<li>SVG animation & GSAP</li> +<li>PostCSS & Sass</li> +</ul> + +<h4 id="familiar-with">Familiar with</h4> + +<ul> +<li>Node.js</li> +<li>Ractive.js</li> +<li>Riot.Js</li> +<li>Hugo.io (Static site generator)</li> +</ul> + +<h4 id="interested-in">Interested in</h4> + +<ul> +<li>Web components</li> +<li>Svelte + Sapper</li> +<li>WebVR / A-Frame</li> +<li>Three.js</li> +<li>Matter.js +<br /></li> +</ul> + +<h4 id="other-info">Other Info</h4> + +<dl> +<dt><strong>Language:</strong> + +<dd>Native English speaker with Japanese JLPT-N3 Language proficiency</dd></dt> +</dl> + +<h2 id="hobbies-interests">Hobbies/Interests</h2> + +<p>I am interested in music production and help run a <a href="https://www.meetup.com/Music-Production-Geeks/">small meetup group</a>. I also play field Hockey.</p> + +<div class="-print-only"> + <h2 id="references">References</h2> + +<p>Please contact me at <a href="mailto:tim@cssandstuff.com">tim@cssandstuff.com</a> for references.</p> + +</div> + +<p></div></p> + +</div> + + + <div id="drawing"></div> + </main> + <footer class="-m-auto -border-top -em-08 -lineheight-1-3 footer -text-left"> + + <div class="-text-center -print-hidden"><a href="assets/tim-clulow-cv.pdf" class="download"><span class="download-icon"></span> Download this as a pdf <span class="-em-07 ">(generated using node-html-pdf)</span></a> + </div> + + + <div class="-clearfix -text-center -print-only"> + <em>This was generated using node-html-pdf, and is rather static. <br/>Please check out the online version where possible. <a href="https://cssandstuff.github.io/cv/">https://cssandstuff.github.io/cv/</a> + </em> + </div> + <em class="-clearfix -text-center lastpublished -em-07">Last Published Tuesday, May 22, 2018, Portfolio upon request (I'm still working on it)</em> +</footer> + + +<script async src="https://www.googletagmanager.com/gtag/js?id=UA-7167547-14"></script> +<script> + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + gtag('config', 'UA-7167547-14'); +</script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script> +<script src="https://cssandstuff.github.io/cv/js/main.js?1526943999127107021"></script> + + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/docs/js/main.js b/docs/js/main.js new file mode 100644 index 0000000..8f15eee --- /dev/null +++ b/docs/js/main.js @@ -0,0 +1,97 @@ +var firstPlay = true; +var hiMessage = document.getElementById("hi-message"); +var timclulow = document.getElementById("timclulow-word"); +var skew = document.getElementById("skew"); +var hand1 = document.getElementById("t-horiz"); +var c = document.getElementById("C"); +var l1 = document.getElementById("L1"); +var l2 = document.getElementById("L2"); +var o = document.getElementById("O"); +var w = document.getElementById("W"); +var eye1 = document.getElementById("t-vert"); +var eye2 = document.getElementById("I"); +var smile = document.getElementById("U"); +var hand2 = document.getElementById("vert2"); +var armandhand = document.getElementById("armandhand"); +var bit = document.getElementById("vert1"); +var shoulder = document.getElementById("angle1"); +var m = document.getElementById("M"); +var progressBar = document.getElementById("progress"); + +var tl = new TimelineMax({onComplete:complete, onUpdate: Progress}); +var firstPlay = true; +tl.pause(); +tl.addLabel("start"); +tl.add(TweenMax.to(bit, 0.3, {ease: Power2.easeIn, repeat:0, opacity:0}), 0); +tl.add(TweenMax.to(hand1, 1, {ease: Power2.easeOut, repeat:0, rotation: -50, x: -69, y: 54, transformOrigin:"top right"}), 0); +tl.add(TweenMax.to(c, 1, {ease: Power2.easeIn, repeat:0, opacity:0, y: 100,}), 0); +tl.add(TweenMax.to(l1, 1, {ease: Power2.easeOut, repeat:0, y: 25, x:53, rotation: 5}), 0); +tl.add(TweenMax.to(l2, 1, {ease: Power2.easeOut, repeat:0, y: 26, x: -15, rotation: -5}), 0); +tl.add(TweenMax.to(o, 1, {ease: Power2.easeIn, repeat:0, opacity:0, y: 100}), 0); +tl.add(TweenMax.to(w, 1, {ease: Power2.easeIn, repeat:0, opacity:0, y: 100}), 0); +tl.add(TweenMax.to(eye1, 2, {ease: Power2.easeOut, repeat:0, x:39, scaleX:0.66}), 0); +tl.add(TweenMax.to(eye2, 2, {ease: Power2.easeOut, repeat:0, x:9, scaleX:0.66}), 0); +tl.add(TweenMax.to(smile, 2, {ease: Power2.easeOut, repeat:0, scaleY:0.7, scaleX: 1.1, x: -3, y: -10}), 0); +tl.add(TweenMax.to(hand2, 2, {ease: Power2.easeInOut, repeat:0, scaleY:0.4, rotation:-200}), 0); +tl.add(TweenMax.to(m, 0.6, {ease: Power2.easeOut, repeat:0, y: 40, x: 140, rotation: -45}), 0); + +var arm1Wave; +var arm2Wave; +var handWave; +function complete() { + hiMessage.classList.add('on'); + tl.addLabel("midpoint"); + tl.add(TweenMax.to(hand2, 0.45, {ease: Power4.easeInOut, rotation:-40, yoyo: true, repeat: 5}), "midpoint"); + tl.add(TweenMax.to(m, 1.8, {ease: Sine.easeInOut, rotation:-80, yoyo: true, repeat: 1, onComplete:backtoStart}), "midpoint"); + tl.add(TweenMax.to(armandhand, 0.45, {transformOrigin:"bottom left", ease: Sine.easeInOut, rotation:32, yoyo: true, repeat: 5}), "midpoint"); + tl.add(TweenMax.to(hand1, 1.8, {transformOrigin:"bottom right", ease: Power1.easeInOut, rotation: -15, yoyo: true}), "midpoint"); + +} + +function repeat(){ + tl.reverse(); +} + +function onLogoHover(){ + if(!tl.isActive()){ + progressBar.classList.add('on'); + skew.classList.add('on'); + tl.timeScale(1).play(); + } +} + +function onLogoOut(){ + // any other actions? +} + +function backtoStart(){ + tl.reverse().timeScale(1.5); + firstPlay = false; +} + +function Progress (){ + var rounded = Math.round( tl.progress() * 10 ) / 10; + if(!firstPlay && !tl.reversed() && (0.2 == rounded)){ + hiMessage.classList.add('on'); + } + if(tl.reversed() && 0.2 == rounded ){ + hiMessage.classList.remove('on'); + } + if(tl.progress() == 0){ + progressBar.classList.remove('on'); + skew.classList.remove('on'); + } +} +document.addEventListener("DOMContentLoaded", function() { + hiMessage.classList.add('transitions'); + skew.addEventListener("mouseenter", onLogoHover); + skew.addEventListener("touchstart", onLogoHover); + skew.addEventListener("mouseleave", onLogoOut); + skew.addEventListener("touchcancel", onLogoOut); + + setTimeout(function(){ + onLogoHover(); + },6000); + +}); + diff --git a/docs/robots.txt b/docs/robots.txt new file mode 100644 index 0000000..6d28488 --- /dev/null +++ b/docs/robots.txt @@ -0,0 +1,5 @@ +User-agent: * +# robotstxt.org - if ENV production variable is false robots will be disallowed. + + Disallow: / + diff --git a/docs/sitemap.xml b/docs/sitemap.xml new file mode 100644 index 0000000..87a2956 --- /dev/null +++ b/docs/sitemap.xml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8" standalone="yes" ?> +<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" + xmlns:xhtml="http://www.w3.org/1999/xhtml"> + + <url> + <loc>https://cssandstuff.github.io/cv/coverletter-nzpost/</loc> + </url> + + <url> + <loc>https://cssandstuff.github.io/cv/coverletter-serato/</loc> + </url> + + <url> + <loc>https://cssandstuff.github.io/cv/</loc> + </url> + +</urlset>
\ No newline at end of file diff --git a/generatepdf.js b/generatepdf.js new file mode 100644 index 0000000..e85e6e3 --- /dev/null +++ b/generatepdf.js @@ -0,0 +1,17 @@ +var fs = require('fs'); +var pdf = require('html-pdf'); +var html = fs.readFileSync('./docs/index.html', 'utf8'); +var options = { + "format": 'A4', + "border": { + "top": "1cm", // default is 0, units: mm, cm, in, px + "right": "3cm", + "bottom": "2cm", + "left": "3cm" + } + }; + +pdf.create(html, options).toFile('./themes/winning/static/assets/cv.pdf', function(err, res) { + if (err) return console.log(err); + console.log(res); // { filename: '/app/businesscard.pdf' } +});
\ No newline at end of file diff --git a/images/screenshot.png b/images/screenshot.png Binary files differnew file mode 100644 index 0000000..fee3033 --- /dev/null +++ b/images/screenshot.png diff --git a/images/tn.png b/images/tn.png Binary files differnew file mode 100644 index 0000000..a8fb42a --- /dev/null +++ b/images/tn.png diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..51b6eee --- /dev/null +++ b/package-lock.json @@ -0,0 +1,857 @@ +{ + "name": "cv", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "alphanum-sort": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", + "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", + "dev": true + }, + "ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "dev": true + }, + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, + "argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dev": true, + "requires": { + "sprintf-js": "1.0.3" + } + }, + "autoprefixer": { + "version": "6.7.7", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz", + "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=", + "dev": true, + "requires": { + "browserslist": "1.7.7", + "caniuse-db": "1.0.30000836", + "normalize-range": "0.1.2", + "num2fraction": "1.2.2", + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0" + } + }, + "balanced-match": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz", + "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=", + "dev": true + }, + "browserslist": { + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", + "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", + "dev": true, + "requires": { + "caniuse-db": "1.0.30000836", + "electron-to-chromium": "1.3.45" + } + }, + "caniuse-api": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz", + "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=", + "dev": true, + "requires": { + "browserslist": "1.7.7", + "caniuse-db": "1.0.30000836", + "lodash.memoize": "4.1.2", + "lodash.uniq": "4.5.0" + } + }, + "caniuse-db": { + "version": "1.0.30000836", + "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000836.tgz", + "integrity": "sha1-eItsj28CmRdDsYzbvVT5bQW0uVo=", + "dev": true + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "2.2.1", + "escape-string-regexp": "1.0.5", + "has-ansi": "2.0.0", + "strip-ansi": "3.0.1", + "supports-color": "2.0.0" + }, + "dependencies": { + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + } + } + }, + "clap": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz", + "integrity": "sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==", + "dev": true, + "requires": { + "chalk": "1.1.3" + } + }, + "clone": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", + "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=", + "dev": true + }, + "coa": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz", + "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=", + "dev": true, + "requires": { + "q": "1.5.1" + } + }, + "color": { + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/color/-/color-0.11.4.tgz", + "integrity": "sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=", + "dev": true, + "requires": { + "clone": "1.0.4", + "color-convert": "1.9.1", + "color-string": "0.3.0" + } + }, + "color-convert": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz", + "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, + "color-string": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz", + "integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "colormin": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/colormin/-/colormin-1.1.2.tgz", + "integrity": "sha1-6i90IKcrlogaOKrlnsEkpvcpgTM=", + "dev": true, + "requires": { + "color": "0.11.4", + "css-color-names": "0.0.4", + "has": "1.0.1" + } + }, + "colors": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz", + "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=", + "dev": true + }, + "css-color-names": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", + "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=", + "dev": true + }, + "cssnano": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-3.10.0.tgz", + "integrity": "sha1-Tzj2zqK5sX+gFJDyPx3GjqZcHDg=", + "dev": true, + "requires": { + "autoprefixer": "6.7.7", + "decamelize": "1.2.0", + "defined": "1.0.0", + "has": "1.0.1", + "object-assign": "4.1.1", + "postcss": "5.2.18", + "postcss-calc": "5.3.1", + "postcss-colormin": "2.2.2", + "postcss-convert-values": "2.6.1", + "postcss-discard-comments": "2.0.4", + "postcss-discard-duplicates": "2.1.0", + "postcss-discard-empty": "2.1.0", + "postcss-discard-overridden": "0.1.1", + "postcss-discard-unused": "2.2.3", + "postcss-filter-plugins": "2.0.2", + "postcss-merge-idents": "2.1.7", + "postcss-merge-longhand": "2.0.2", + "postcss-merge-rules": "2.1.2", + "postcss-minify-font-values": "1.0.5", + "postcss-minify-gradients": "1.0.5", + "postcss-minify-params": "1.2.2", + "postcss-minify-selectors": "2.1.1", + "postcss-normalize-charset": "1.1.1", + "postcss-normalize-url": "3.0.8", + "postcss-ordered-values": "2.2.3", + "postcss-reduce-idents": "2.4.0", + "postcss-reduce-initial": "1.0.1", + "postcss-reduce-transforms": "1.0.4", + "postcss-svgo": "2.1.6", + "postcss-unique-selectors": "2.0.2", + "postcss-value-parser": "3.3.0", + "postcss-zindex": "2.2.0" + } + }, + "csso": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz", + "integrity": "sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=", + "dev": true, + "requires": { + "clap": "1.2.3", + "source-map": "0.5.7" + } + }, + "decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", + "dev": true + }, + "defined": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz", + "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=", + "dev": true + }, + "electron-to-chromium": { + "version": "1.3.45", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.45.tgz", + "integrity": "sha1-RYrBscXHYM6IEaFtK/vZfsMLr7g=", + "dev": true + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + }, + "esprima": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", + "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=", + "dev": true + }, + "flatten": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz", + "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=", + "dev": true + }, + "function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true + }, + "has": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.1.tgz", + "integrity": "sha1-hGFzP1OLCDfJNh45qauelwTcLyg=", + "dev": true, + "requires": { + "function-bind": "1.1.1" + } + }, + "has-ansi": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", + "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", + "dev": true, + "requires": { + "ansi-regex": "2.1.1" + } + }, + "has-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", + "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", + "dev": true + }, + "html-comment-regex": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.1.tgz", + "integrity": "sha1-ZouTd26q5V696POtRkswekljYl4=", + "dev": true + }, + "indexes-of": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", + "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=", + "dev": true + }, + "is-absolute-url": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz", + "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=", + "dev": true + }, + "is-plain-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", + "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=", + "dev": true + }, + "is-svg": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-2.1.0.tgz", + "integrity": "sha1-z2EJDaDZ77yrhyLeum8DIgjbsOk=", + "dev": true, + "requires": { + "html-comment-regex": "1.1.1" + } + }, + "js-base64": { + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz", + "integrity": "sha512-H7ErYLM34CvDMto3GbD6xD0JLUGYXR3QTcH6B/tr4Hi/QpSThnCsIp+Sy5FRTw3B0d6py4HcNkW7nO/wdtGWEw==", + "dev": true + }, + "js-yaml": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz", + "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=", + "dev": true, + "requires": { + "argparse": "1.0.10", + "esprima": "2.7.3" + } + }, + "lodash.memoize": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", + "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", + "dev": true + }, + "lodash.uniq": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", + "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=", + "dev": true + }, + "macaddress": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/macaddress/-/macaddress-0.2.8.tgz", + "integrity": "sha1-WQTcU3w57G2+/q6QIycTX6hRHxI=", + "dev": true + }, + "math-expression-evaluator": { + "version": "1.2.17", + "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", + "integrity": "sha1-3oGf282E3M2PrlnGrreWFbnSZqw=", + "dev": true + }, + "minimist": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "dev": true + }, + "mkdirp": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "dev": true, + "requires": { + "minimist": "0.0.8" + } + }, + "normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", + "dev": true + }, + "normalize-url": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz", + "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=", + "dev": true, + "requires": { + "object-assign": "4.1.1", + "prepend-http": "1.0.4", + "query-string": "4.3.4", + "sort-keys": "1.1.2" + } + }, + "num2fraction": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", + "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=", + "dev": true + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + }, + "postcss": { + "version": "5.2.18", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz", + "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==", + "dev": true, + "requires": { + "chalk": "1.1.3", + "js-base64": "2.4.3", + "source-map": "0.5.7", + "supports-color": "3.2.3" + } + }, + "postcss-calc": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-5.3.1.tgz", + "integrity": "sha1-d7rnypKK2FcW4v2kLyYb98HWW14=", + "dev": true, + "requires": { + "postcss": "5.2.18", + "postcss-message-helpers": "2.0.0", + "reduce-css-calc": "1.3.0" + } + }, + "postcss-colormin": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-2.2.2.tgz", + "integrity": "sha1-ZjFBfV8OkJo9fsJrJMio0eT5bks=", + "dev": true, + "requires": { + "colormin": "1.1.2", + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-convert-values": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz", + "integrity": "sha1-u9hZPFwf0uPRwyK7kl3K6Nrk1i0=", + "dev": true, + "requires": { + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-discard-comments": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz", + "integrity": "sha1-vv6J+v1bPazlzM5Rt2uBUUvgDj0=", + "dev": true, + "requires": { + "postcss": "5.2.18" + } + }, + "postcss-discard-duplicates": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz", + "integrity": "sha1-uavye4isGIFYpesSq8riAmO5GTI=", + "dev": true, + "requires": { + "postcss": "5.2.18" + } + }, + "postcss-discard-empty": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz", + "integrity": "sha1-0rS9nVztXr2Nyt52QMfXzX9PkrU=", + "dev": true, + "requires": { + "postcss": "5.2.18" + } + }, + "postcss-discard-overridden": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz", + "integrity": "sha1-ix6vVU9ob7KIzYdMVWZ7CqNmjVg=", + "dev": true, + "requires": { + "postcss": "5.2.18" + } + }, + "postcss-discard-unused": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz", + "integrity": "sha1-vOMLLMWR/8Y0Mitfs0ZLbZNPRDM=", + "dev": true, + "requires": { + "postcss": "5.2.18", + "uniqs": "2.0.0" + } + }, + "postcss-filter-plugins": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz", + "integrity": "sha1-bYWGJTTXNaxCDkqFgG4fXUKG2Ew=", + "dev": true, + "requires": { + "postcss": "5.2.18", + "uniqid": "4.1.1" + } + }, + "postcss-merge-idents": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz", + "integrity": "sha1-TFUwMTwI4dWzu/PSu8dH4njuonA=", + "dev": true, + "requires": { + "has": "1.0.1", + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-merge-longhand": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz", + "integrity": "sha1-I9kM0Sewp3mUkVMyc5A0oaTz1lg=", + "dev": true, + "requires": { + "postcss": "5.2.18" + } + }, + "postcss-merge-rules": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz", + "integrity": "sha1-0d9d+qexrMO+VT8OnhDofGG19yE=", + "dev": true, + "requires": { + "browserslist": "1.7.7", + "caniuse-api": "1.6.1", + "postcss": "5.2.18", + "postcss-selector-parser": "2.2.3", + "vendors": "1.0.2" + } + }, + "postcss-message-helpers": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz", + "integrity": "sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4=", + "dev": true + }, + "postcss-minify-font-values": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz", + "integrity": "sha1-S1jttWZB66fIR0qzUmyv17vey2k=", + "dev": true, + "requires": { + "object-assign": "4.1.1", + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-minify-gradients": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz", + "integrity": "sha1-Xb2hE3NwP4PPtKPqOIHY11/15uE=", + "dev": true, + "requires": { + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-minify-params": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz", + "integrity": "sha1-rSzgcTc7lDs9kwo/pZo1jCjW8fM=", + "dev": true, + "requires": { + "alphanum-sort": "1.0.2", + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0", + "uniqs": "2.0.0" + } + }, + "postcss-minify-selectors": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz", + "integrity": "sha1-ssapjAByz5G5MtGkllCBFDEXNb8=", + "dev": true, + "requires": { + "alphanum-sort": "1.0.2", + "has": "1.0.1", + "postcss": "5.2.18", + "postcss-selector-parser": "2.2.3" + } + }, + "postcss-normalize-charset": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz", + "integrity": "sha1-757nEhLX/nWceO0WL2HtYrXLk/E=", + "dev": true, + "requires": { + "postcss": "5.2.18" + } + }, + "postcss-normalize-url": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz", + "integrity": "sha1-EI90s/L82viRov+j6kWSJ5/HgiI=", + "dev": true, + "requires": { + "is-absolute-url": "2.1.0", + "normalize-url": "1.9.1", + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-ordered-values": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz", + "integrity": "sha1-7sbCpntsQSqNsgQud/6NpD+VwR0=", + "dev": true, + "requires": { + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-reduce-idents": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz", + "integrity": "sha1-wsbSDMlYKE9qv75j92Cb9AkFmtM=", + "dev": true, + "requires": { + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-reduce-initial": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz", + "integrity": "sha1-aPgGlfBF0IJjqHmtJA343WT2ROo=", + "dev": true, + "requires": { + "postcss": "5.2.18" + } + }, + "postcss-reduce-transforms": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz", + "integrity": "sha1-/3b02CEkN7McKYpC0uFEQCV3GuE=", + "dev": true, + "requires": { + "has": "1.0.1", + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-selector-parser": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz", + "integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=", + "dev": true, + "requires": { + "flatten": "1.0.2", + "indexes-of": "1.0.1", + "uniq": "1.0.1" + } + }, + "postcss-svgo": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz", + "integrity": "sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0=", + "dev": true, + "requires": { + "is-svg": "2.1.0", + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0", + "svgo": "0.7.2" + } + }, + "postcss-unique-selectors": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz", + "integrity": "sha1-mB1X0p3csz57Hf4f1DuGSfkzyh0=", + "dev": true, + "requires": { + "alphanum-sort": "1.0.2", + "postcss": "5.2.18", + "uniqs": "2.0.0" + } + }, + "postcss-value-parser": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", + "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=", + "dev": true + }, + "postcss-zindex": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-2.2.0.tgz", + "integrity": "sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=", + "dev": true, + "requires": { + "has": "1.0.1", + "postcss": "5.2.18", + "uniqs": "2.0.0" + } + }, + "prepend-http": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", + "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=", + "dev": true + }, + "q": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", + "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=", + "dev": true + }, + "query-string": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz", + "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=", + "dev": true, + "requires": { + "object-assign": "4.1.1", + "strict-uri-encode": "1.1.0" + } + }, + "reduce-css-calc": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz", + "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=", + "dev": true, + "requires": { + "balanced-match": "0.4.2", + "math-expression-evaluator": "1.2.17", + "reduce-function-call": "1.0.2" + } + }, + "reduce-function-call": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.2.tgz", + "integrity": "sha1-WiAL+S4ON3UXUv5FsKszD9S2vpk=", + "dev": true, + "requires": { + "balanced-match": "0.4.2" + } + }, + "sax": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", + "dev": true + }, + "sort-keys": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", + "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=", + "dev": true, + "requires": { + "is-plain-obj": "1.1.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + }, + "sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", + "dev": true + }, + "strict-uri-encode": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", + "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", + "dev": true + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "dev": true, + "requires": { + "ansi-regex": "2.1.1" + } + }, + "supports-color": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", + "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", + "dev": true, + "requires": { + "has-flag": "1.0.0" + } + }, + "svgo": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz", + "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=", + "dev": true, + "requires": { + "coa": "1.0.4", + "colors": "1.1.2", + "csso": "2.3.2", + "js-yaml": "3.7.0", + "mkdirp": "0.5.1", + "sax": "1.2.4", + "whet.extend": "0.9.9" + } + }, + "uniq": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", + "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", + "dev": true + }, + "uniqid": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-4.1.1.tgz", + "integrity": "sha1-iSIN32t1GuUrX3JISGNShZa7hME=", + "dev": true, + "requires": { + "macaddress": "0.2.8" + } + }, + "uniqs": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz", + "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=", + "dev": true + }, + "vendors": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.2.tgz", + "integrity": "sha512-w/hry/368nO21AN9QljsaIhb9ZiZtZARoVH5f3CsFbawdLdayCgKRPup7CggujvySMxx0I91NOyxdVENohprLQ==", + "dev": true + }, + "whet.extend": { + "version": "0.9.9", + "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz", + "integrity": "sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=", + "dev": true + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..5079fd5 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "cv", + "version": "1.0.0", + "description": "", + "main": "generatepdf.js", + "directories": { + "doc": "docs" + }, + "scripts": { + "start": "hugo serve -d docs", + "minifycss": "postcss ./themes/winning/static/css/main.css > ./docs/css/main.min.css && postcss ./themes/winning/static/css/belmu.css > ./docs/css/belmu.min.css", + "stage": "HUGO_ENV=production npm start | npm run minifycss", + "build": "HUGO_ENV=production hugo -d docs && npm run minifycss" + }, + "repository": { + "type": "git", + "url": "git+https://cssandstuff@github.com/cssandstuff/cv.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/cssandstuff/cv/issues" + }, + "homepage": "https://github.com/cssandstuff/cv#readme", + "devDependencies": { + "cssnano": "^3.10.0" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..ffb2269 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: [ + require('cssnano')({ + preset: 'default', + }), + ], +}; diff --git a/themes/winning/.gitignore b/themes/winning/.gitignore new file mode 100644 index 0000000..7b8601f --- /dev/null +++ b/themes/winning/.gitignore @@ -0,0 +1,30 @@ +# OS +.DS_Store +Thumbs.db + +# IDEs +.buildpath +.project +.settings/ +.build/ +.idea/ +public/ +nbproject/ + +# Vagrant +.vagrant/ + +# FE Setup +.bin/node_modules/ +/node_modules/ +src/node_modules/ +src/npm-debug.log.* +npm-debug.log +/npm-debug.log* +/dist/ +/src/client.config.json +/styleguide/ +/docs/ + +/junit.xml +partials/structure/stylesheet.html
\ No newline at end of file diff --git a/themes/winning/LICENSE.md b/themes/winning/LICENSE.md new file mode 100755 index 0000000..b405302 --- /dev/null +++ b/themes/winning/LICENSE.md @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2018 Tim Clulow + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/themes/winning/README.md b/themes/winning/README.md new file mode 100644 index 0000000..698179b --- /dev/null +++ b/themes/winning/README.md @@ -0,0 +1,4 @@ +# Winning, A theme for [Hugo](http://gohugo.io/), a framework for building websites. + +This is a Simple 1 page site that will also generate a pdf version of the same thing. you need to run node ./generatepdf.js + diff --git a/themes/winning/archetypes/default.md b/themes/winning/archetypes/default.md new file mode 100644 index 0000000..ac36e06 --- /dev/null +++ b/themes/winning/archetypes/default.md @@ -0,0 +1,2 @@ ++++ ++++ diff --git a/themes/winning/layouts/404.html b/themes/winning/layouts/404.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/themes/winning/layouts/404.html diff --git a/themes/winning/layouts/_default/baseof.html b/themes/winning/layouts/_default/baseof.html new file mode 100755 index 0000000..bde0cfc --- /dev/null +++ b/themes/winning/layouts/_default/baseof.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + {{/* NOTE: the Site's title, and if there is a page title, that is set too */}} + <title>{{ block "title" . }}{{ .Site.Title }}{{end}}</title> + + <meta name="HandheldFriendly" content="True"> + <meta name="MobileOptimized" content="320"> + <meta name="viewport" content="initial-scale=1, maximum-scale=1"> + {{ .Hugo.Generator }} + {{/* NOTE: For Production make sure you add `HUGO_ENV="production"` before your build command */}} + {{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production") }} + <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW"> + {{ else }} + <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> + {{ end }} + <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400i,500,800" rel="stylesheet"> + {{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production") }} + <link href='{{ "css/belmu.min.css" | absURL }}?{{ now.UnixNano }}' rel='stylesheet' type="text/css" /> + <link href='{{ "css/main.min.css" | absURL }}?{{ now.UnixNano }}' rel='stylesheet' type="text/css" /> + {{ else }} + <link href='{{ "css/belmu.css" | absURL }}?{{ now.UnixNano }}' rel='stylesheet' type="text/css" /> + <link href='{{ "css/main.css" | absURL }}?{{ now.UnixNano }}' rel='stylesheet' type="text/css" /> + {{ end }} + + {{ block "favicon" . }} + {{ partial "site-favicon.html" . }} + {{ end }} + + {{ if .RSSLink }} + <link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" /> + <link href="{{ .RSSLink }}" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" /> + {{ end }} + + {{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production") }} + {{ template "_internal/google_analytics_async.html" . }} + {{ end }} + <link href="https://fonts.googleapis.com/css?family=Fira+Sans:200,400,400i,600,900" rel="stylesheet"> + </head> + + <body class="ma0 {{ $.Param "body_classes"}}{{ with getenv "HUGO_ENV" }} {{ . }}{{ end }}"> + <div class="grid-layout-1"> + {{ block "header" . }}{{ partial "site-header.html" .}}{{ end }} + <main class="main" role="main" id="mainContent"> + {{ block "main" . }}{{ end }} + <div id="drawing"></div> + </main> + {{ block "footer" . }}{{ partial "site-footer.html" . }}{{ end }} + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/themes/winning/layouts/_default/list.html b/themes/winning/layouts/_default/list.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/themes/winning/layouts/_default/list.html diff --git a/themes/winning/layouts/_default/single.html b/themes/winning/layouts/_default/single.html new file mode 100644 index 0000000..c0ddd83 --- /dev/null +++ b/themes/winning/layouts/_default/single.html @@ -0,0 +1,6 @@ +{{ define "main" }} + {{ .Content }} + <style> + .header, .footer{display: none !important;} + </style> +{{ end }} diff --git a/themes/winning/layouts/index.html b/themes/winning/layouts/index.html new file mode 100644 index 0000000..9ce1091 --- /dev/null +++ b/themes/winning/layouts/index.html @@ -0,0 +1,3 @@ +{{ define "main" }} + {{ .Content }} +{{ end }}
\ No newline at end of file diff --git a/themes/winning/layouts/partials/site-favicon.html b/themes/winning/layouts/partials/site-favicon.html new file mode 100644 index 0000000..3a059ec --- /dev/null +++ b/themes/winning/layouts/partials/site-favicon.html @@ -0,0 +1 @@ +<link rel="shortcut icon" href="/favicon.png" type="image/x-icon" />
\ No newline at end of file diff --git a/themes/winning/layouts/partials/site-footer.html b/themes/winning/layouts/partials/site-footer.html new file mode 100755 index 0000000..3399972 --- /dev/null +++ b/themes/winning/layouts/partials/site-footer.html @@ -0,0 +1,11 @@ +<footer class="-m-auto -border-top -em-08 -lineheight-1-3 footer -text-left"> + + <div class="-text-center -print-hidden"><a href="assets/tim-clulow-cv.pdf" class="download"><span class="download-icon"></span> Download this as a pdf <span class="-em-07 ">(generated using node-html-pdf)</span></a> + </div> + + <div class="-clearfix -text-center -print-only"> + <em>This was generated using node-html-pdf, and is rather static. <br/>Please check out the online version where possible. <a href="/urlhere">Url here.</a> + </em> + </div> + <em class="-clearfix -text-center lastpublished -em-07">Last Published {{ dateFormat "Monday, Jan 2, 2006" now }}, Portfolio upon request.</em> +</footer>
\ No newline at end of file diff --git a/themes/winning/layouts/partials/site-header.html b/themes/winning/layouts/partials/site-header.html new file mode 100755 index 0000000..ccc44c4 --- /dev/null +++ b/themes/winning/layouts/partials/site-header.html @@ -0,0 +1,2 @@ +<div class="header"> +</div>
\ No newline at end of file diff --git a/themes/winning/layouts/partials/site-navigation.html b/themes/winning/layouts/partials/site-navigation.html new file mode 100644 index 0000000..e37e6d6 --- /dev/null +++ b/themes/winning/layouts/partials/site-navigation.html @@ -0,0 +1,14 @@ +<nav role="navigation"> + {{ if .Site.Menus.main }} + <ul> + {{ $currentPage := . }} + {{ range .Site.Menus.main }} + <li class="{{if $currentPage.IsMenuCurrent "main" . }} selected{{end}}"> + <a href="{{ .URL }}" title="{{ .Name }}"> + {{ .Name }} + </a> + </li> + {{ end }} + </ul> + {{ end }} +</nav>
\ No newline at end of file diff --git a/themes/winning/layouts/robots.txt b/themes/winning/layouts/robots.txt new file mode 100644 index 0000000..b18c6e9 --- /dev/null +++ b/themes/winning/layouts/robots.txt @@ -0,0 +1,7 @@ +User-agent: * +# robotstxt.org - if ENV production variable is false robots will be disallowed. +{{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production") }} + Disallow: +{{ else }} + Disallow: / +{{ end }} diff --git a/themes/winning/layouts/shortcodes/br.html b/themes/winning/layouts/shortcodes/br.html new file mode 100644 index 0000000..4bbea23 --- /dev/null +++ b/themes/winning/layouts/shortcodes/br.html @@ -0,0 +1 @@ +<br/>
\ No newline at end of file diff --git a/themes/winning/layouts/shortcodes/column.html b/themes/winning/layouts/shortcodes/column.html new file mode 100644 index 0000000..6128a22 --- /dev/null +++ b/themes/winning/layouts/shortcodes/column.html @@ -0,0 +1,3 @@ +<div class="col {{ .Get 0 }} {{ .Get 1 }}"> + {{.Inner}} +</div>
\ No newline at end of file diff --git a/themes/winning/layouts/shortcodes/dd.html b/themes/winning/layouts/shortcodes/dd.html new file mode 100644 index 0000000..cbf5228 --- /dev/null +++ b/themes/winning/layouts/shortcodes/dd.html @@ -0,0 +1,8 @@ +{{ $str := print .Inner }} +{{ $str := replace $str "<ul>" "<dl>"}} +{{ $str := replace $str "</ul>" "</dl>"}} +{{ $str := replace $str "<ol>\n<li>" "<dd>" }} +{{ $str := replace $str "</li>\n</ol>" "</dd>" }} +{{ $str := replace $str "<li>" "<dt>" }} +{{ $str := replace $str "</li>" "</dt>" }} +{{ markdownify $str }}
\ No newline at end of file diff --git a/themes/winning/layouts/shortcodes/grid.html b/themes/winning/layouts/shortcodes/grid.html new file mode 100644 index 0000000..ff1cca2 --- /dev/null +++ b/themes/winning/layouts/shortcodes/grid.html @@ -0,0 +1,3 @@ +<div class="grid"> + {{.Inner}} +</div>
\ No newline at end of file diff --git a/themes/winning/layouts/shortcodes/printonly.html b/themes/winning/layouts/shortcodes/printonly.html new file mode 100644 index 0000000..03e3cf8 --- /dev/null +++ b/themes/winning/layouts/shortcodes/printonly.html @@ -0,0 +1,3 @@ +<div class="-print-only"> + {{.Inner}} +</div>
\ No newline at end of file diff --git a/themes/winning/static/assets/tim-clulow-cv.pdf b/themes/winning/static/assets/tim-clulow-cv.pdf Binary files differnew file mode 100644 index 0000000..76420ce --- /dev/null +++ b/themes/winning/static/assets/tim-clulow-cv.pdf diff --git a/themes/winning/static/css/belmu.css b/themes/winning/static/css/belmu.css new file mode 100644 index 0000000..47479b5 --- /dev/null +++ b/themes/winning/static/css/belmu.css @@ -0,0 +1,2656 @@ + +/* To learn how to use BELMU refer to the guide at ----- */ + +/* BASE + –––– */ + +/* + * Fix + * Version 0.1.1 + * https://github.com/jaydenseric/Fix +*/ + +*{ + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: transparent; +} + +body { + margin: 0; + line-height: 1; + font-family: sans-serif; +} + +iframe { + border: 0; +} + +main { + display: block; +} + +ul, +ol { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; +} + +li { + display: block; +} + +dl { + margin-top: 0; + margin-bottom: 0; +} + +dd { + margin-left: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 1.6em; + margin-bottom: 0.1em; + font-size: inherit; +} + +blockquote { + margin: 0; + padding: 0; +} + +p { + margin-top: 0; + margin-bottom: 0; +} + +sup { + position: relative; + top: -.5em; + vertical-align: baseline; + font-size: 75%; + line-height: 0; +} + +strong { + font-weight: bold; +} + +figure { + margin: 0; +} + +img { + border: 0; + max-width: 100%; + height: auto; + vertical-align: middle; +} + +a { + text-decoration: none; + color: inherit; +} + +button { + border: 0; + margin: 0; + padding: 0; + text-align: inherit; + text-transform: inherit; + font: inherit; + -webkit-font-smoothing: inherit; + letter-spacing: inherit; + background: none; + cursor: pointer; + overflow: visible; +} + +::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* -- Colours (HSL Colours are good) + ––––––––––––––––––––––––––––––––– */ + +:root{ + --core-white: 0, 100%; + --core-black: 0, 0%; + --core-grey: 220, 30%; + --white: hsl( var(--core-white), 100% ); + --black: hsl( var(--core-black), 0% ); + + --grey: hsl( var(--core-grey), 60%); + --grey-900: hsl( var(--core-grey), 30% ); + --grey-800: hsl( var(--core-grey), 40% ); + --grey-700: hsl( var(--core-grey), 50% ); + --grey-600: hsl( var(--core-grey), 60% ); + --grey-500: hsl( var(--core-grey), 70% ); + --grey-400: hsl( var(--core-grey), 80% ); + --grey-300: hsl( var(--core-grey), 94% ); + --grey-200: hsl( var(--core-grey), 96% ); + --grey-100: hsl( var(--core-grey), 98% ); + + --black: hsl( var(--core-black), 0% ); + --black-900: hsl( var(--core-black), 10% ); + --black-800: hsl( var(--core-black), 20% ); + --black-700: hsl( var(--core-black), 30% ); + --black-600: hsl( var(--core-black), 40% ); + --black-500: hsl( var(--core-black), 50% ); + --black-400: hsl( var(--core-black), 60% ); + --black-300: hsl( var(--core-black), 70% ); + --black-200: hsl( var(--core-black), 80% ); + --black-100: hsl( var(--core-black), 90% ); + + --black-900a: hsla( var(--core-black), 0%, 0.9 ); + --black-800a: hsla( var(--core-black), 0%, 0.8 ); + --black-700a: hsla( var(--core-black), 0%, 0.7 ); + --black-600a: hsla( var(--core-black), 0%, 0.6 ); + --black-500a: hsla( var(--core-black), 0%, 0.5 ); + --black-400a: hsla( var(--core-black), 0%, 0.4 ); + --black-300a: hsla( var(--core-black), 0%, 0.3 ); + --black-200a: hsla( var(--core-black), 0%, 0.2 ); + --black-100a: hsla( var(--core-black), 0%, 0.1 ); + + --white-900a: hsla( var(--core-white), 100%, 0.9 ); + --white-800a: hsla( var(--core-white), 100%, 0.8 ); + --white-700a: hsla( var(--core-white), 100%, 0.7 ); + --white-600a: hsla( var(--core-white), 100%, 0.6 ); + --white-500a: hsla( var(--core-white), 100%, 0.5 ); + --white-400a: hsla( var(--core-white), 100%, 0.4 ); + --white-300a: hsla( var(--core-white), 100%, 0.3 ); + --white-200a: hsla( var(--core-white), 100%, 0.2 ); + --white-100a: hsla( var(--core-white), 100%, 0.1 ); + + --borders-dark: hsla(var(--black), 0.1); + --borders-light: hsla(var(--white), 0.1); + + /* FILTERS (Experimental) */ + --filterwhite: grayscale(100%) brightness(10); +} + +/* -- Fonts + –––––––– */ + +/* do some font-face calls in here if you need to +@font-face { + font-family: "Futura W01"; + src: url("/fonts/FuturaStd-Heavy-subset.woff"); + font-style: normal; + font-weight: 600; + text-rendering: optimizeLegibility; +} +*/ + +/* -- Inputs + ––––––––– */ + +.input{ + font-family: var(--bookweight); + font-size: var(--rem-1); + font-size: var(--rem-1); + + color: var(--grey-100); + background: var(--grey-300); + + border-radius: var(--border-radius); + border: 0; + padding: calc(var(--spacing) * 0.66667) var(--spacing); + + -webkit-transition: var(--transition-all); + + transition: var(--transition-all); +} + +.input:focus{ + outline: none; +} + +.input:hover{ + background: var(--grey-100); +} + +.disabled .input{ + pointer-events: none; + opacity: 0.3; +} + +/* -- Typography + ––––––––––––– */ + +:root{ + --sans: sans-serif; + --bookweight: 500; + --heavyweight: 600; + --boldweight: 700; + --extraboldweight: 800; + + /* Font size helpers */ + --rem-2: 32px; + --rem-2: 2rem; + --rem-1: 16px; + --rem-1: 1rem; + --rem-1-2: 19.2px; + --rem-1-2: 1.2rem; + --rem-09: 14.4px; + --rem-09: 0.9rem; + --rem-085: 13.6px; + --rem-085: 0.85rem; + --rem-08: 12.8px; + --rem-08: 0.8rem; + --rem-075: 11.2px; + --rem-075: 0.7rem; + --rem-07: 11.2px; + --rem-07: 0.7rem; + --rem-06: 9.6px; + --rem-06: 0.6rem; +} + +body{ + font-family: var(--sans); + font-weight: var(--bookweight); +} + +h1, h2, h3, h4, h5, h6{ + font-weight: var(--boldweight); + color: var(--black); + margin-bottom: var(--spacing); +} + +p{ + margin: var(--spacing) 0; +} + +h1{ + font-size: var(--rem-2); + font-size: var(--rem-2); +} + +h2{ + font-size: var(--rem-1-2); + font-size: var(--rem-1-2); +} + +h3{ + font-size: var(--rem-1); + font-size: var(--rem-1); +} + +h4{ + font-size: var(--rem-08); + font-size: var(--rem-08); +} + +h5{ + font-size: var(--rem-07); + font-size: var(--rem-07); +} + +h6{ + font-size: var(--rem-07); + font-size: var(--rem-07); +} + +p{ + font-family: var(--sans); + font-weight: var(--bookweight); +} + +label{ + display: block; + font-family: var(--sans); + font-weight: var(--heavyweight); + font-size: var(--rem-08); + font-size: var(--rem-08); + color: var(--black); + margin-bottom: calc(var(--spacing) * 0.5); +} + +a:link, a:active, a:link { + color: var(--primary); +} + +/* -- Vars + ––––––– */ + +:root{ + --spacing: 15px; + --spacing: 0.9375rem; + --border-radius: 4.8px; + --border-radius: 0.3rem; + --transition-all: 0.36s all; +} + +/* +@styleguide + +@title Base +<h1 class="-upcase -lightweight"> +Base +</h1> +<p>Base contains a normalize in the form of fix (https://github.com/jaydenseric/Fix). Base typography, forms and variables declared here.</p> +*/ + +/* ENGINE + –––––– */ + +/* -- Icons + –––––––– */ + +/* +@styleguide + +@title Engine +<h1 class="-upcase -lightweight"> +Engine +</h1> +<p>The ideal is to have no Engine and just go completely vanila. But when you need things like svg icons, or other useful mixins you can define them here and build with postcss.</p> +*/ + +/* -- Triangles + –––––––––––– */ + +/* todo: make this work +@define-mixin tirangle, $direction, $colour: var(--black){ + border-radius: 2rem; + &:before { + content: ""; + position: absolute; + top: 7px; + left: -10px; + display: block; + border: 5px solid $colour; + border-color: transparent $colour transparent transparent; + } +}*/ + +/* LAYOUT + –––––– */ + +/* -- Grid + ––––––– */ + +.grid{ + display: block; + clear: both; +} + +.grid .col{ + float: left; + border: 0.5em solid #fff; +} + +@supports (display: grid){ + .grid{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(calc(10% - 1em), 1fr)); + grid-gap: 1em 1em; + grid-auto-flow: dense; + } + .grid .col{ + float: none; + border: 0; + } + .grid.gutterless{ + grid-template-columns: repeat(auto-fit, minmax(10%, 1fr)); + grid-gap: 0; + } + + .grid-12{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(calc(8.3333% - 1em), 1fr)); + grid-gap: 1em 1em; + grid-auto-flow: dense; + } + .grid-12s.gutterless{ + grid-template-columns: repeat(auto-fit, minmax(8.3333%, 1fr)); + grid-gap: 0; + } + + .grid-16{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(calc(6.25% - 1em), 1fr)); + grid-gap: 1em 1em; + grid-auto-flow: dense; + } + .grid-16.gutterless{ + grid-template-columns: repeat(auto-fit, minmax(6.25%, 1fr)); + grid-gap: 0; + } + + .grid-auto{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + grid-gap: 1em 1em; + grid-auto-flow: dense; + } + + /* experimental features */ + @media (max-width: 34em) { + .grid.mq-small-full > .col, + .grid-12.mq-small-full > .col, + .grid-16.mq-small-full > .col{ + grid-column: 1 / -1 !important; + width: auto !important; + margin: 0 !important; + } + + .grid.mq-small-half > .col{ + grid-column: span 5 !important; + } + .grid-12.mq-small-half > .col{ + grid-column: span 6 !important; + } + .grid-16.mq-small-half > .col{ + grid-column: span 8 !important; + } + .grid.mq-small-full > .col, + .grid-12.mq-small-full > .col, + .grid-16.mq-small-full > .col{ + width: auto !important; + margin: 0 !important; + } + } +} + +/* +@styleguide + +@title Layout Grid +<h1 class="-upcase -lightweight"> +Layout +</h1> +<div class="grid mq-small-half"> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div> + </div> +</div> +<div class="grid -m-top-3 mq-small-full"> + <div class="col -span-cols-8"> + <div class="-bg-grey-300 -h-100 -p-all-1">Hi I'm an 80% column!</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">Hi I'm a 20% column!</div> + </div> + <div class="col -w-100 m-top-1"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a 100% column!</div> + </div> + <div class="col -w-80 -offset-left-20 m-top-1"> + <div class="-bg-grey-300 -p-all-1">Hi I'm an offset colum</div> + </div> +</div> + +<strong>12 column grid</strong> +<div class="grid-12 mq-small-full"> + <div class="col -span-cols-9"> + <div class="-bg-grey-300 -h-100 -p-all-1">9 cols</div> + </div> + <div class="col -span-cols-3"> + <div class="-bg-grey-300 -h-100 -p-all-1">3 cols!</div> + </div> +</div> + +<strong>16 column grid</strong> +<div class="grid-16 mq-small-full"> + <div class="col -span-cols-4"> + <div class="-bg-grey-300 -h-100 -p-all-1">4 cols</div> + </div> + <div class="col -span-cols-4"> + <div class="-bg-grey-300 -h-100 -p-all-1">4 cols</div> + </div> + <div class="col -span-cols-4"> + <div class="-bg-grey-300 -h-100 -p-all-1">4 cols</div> + </div> + <div class="col -span-cols-1"> + <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div> + </div> + <div class="col -span-cols-1"> + <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div> + </div> + <div class="col -span-cols-1"> + <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div> + </div> + <div class="col -span-cols-1"> + <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> + <div class="col -span-cols-2"> + <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div> + </div> +</div> + +<strong>Fixed Width</strong> +<div class="grid"> + <div class="col -w-100"> + <div class="-bg-grey-300 -p-all-1 grid mq-small-full"> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">1</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">2</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">3</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">4</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">5</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">6</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">7</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">8</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">9</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-100 -p-all-1">10</div> + </div> + </div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">1</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">2</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">3</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">4</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">5</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">6</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">7</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">8</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">9</div> + </div> + <div class="col -w-10"> + <div class="-bg-grey-300 -p-all-1">10</div> + </div> +</div> + +<strong>Auto Width</strong> +<div class="grid-auto"> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">1</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">2</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">3</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">4</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">5</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">6</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">7</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">8</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">9</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">10</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">11</div> + </div> + <div class="col"> + <div class="-bg-grey-300 -p-all-1">12</div> + </div> +</div> + +<strong>Gutterless Grid</strong> +<div class="grid gutterless"> + <div class="col -w-80"> + <div class="-bg-grey-300 -p-all-1">Hi I'm an 80% column!</div> + </div> + <div class="col -w-20"> + <div class="-bg-grey-100 -p-all-1">Hi I'm a 20% column!</div> + </div> + <div class="col -w-100"> + <div class="-bg-grey-500 -p-all-1">Hi I'm a 100% column!</div> + </div> +</div> +*/ + +/* -- Flex + ––––––– */ + +.flex{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap + /*padding-top: 1px;*/ +} + +.flex.gutterless .item{ + padding: 0; +} + +.flex .item{ + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-item-align: stretch; + align-self: stretch; + padding: calc(var(--spacing) * 0.5); +} + +.flex .item.gutterless{ + padding: 0; +} + +/* +@styleguide + +@title Flex +<div class="flex"> + <div class="item"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div> + </div> + <div class="item"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div> + </div> + <div class="item"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div> + </div> + <div class="item"> + <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div> + </div> +</div> + +<strong>Gutterless Flex</strong> +<div class="flex gutterless"> + <div class="item -w-80"> + <div class="-bg-grey-300 -p-all-1">Hi I'm an 80% item!</div> + </div> + <div class="item -w-20"> + <div class="-bg-grey-100 -p-all-1">Hi I'm a 20% item!</div> + </div> + <div class="item -w-100"> + <div class="-bg-grey-500 -p-all-1">Hi I'm a 100% item!</div> + </div> +</div> +*/ + +/* MODULE + –––––– */ + +/* +@styleguide + +@title Module +<h1 class="-upcase -lightweight"> +Module +</h1> +<p>CSS for your Modules/Molecules live here, What is a molecule in css? - check out Brad Frost's pattern lab (http://patternlab.io/)</p> +*/ + +/* UTILITY + ––––––– */ + +/* -- Display + –––––––––– */ + +.-d-block{ + display: block; +} + +.-d-inline-block{ + display: inline-block; +} + +.-d-flex{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + -ms-flex-direction: row; + flex-direction: row; +} + +/* -- Colours + –––––––––– */ + +.-white { color: var(--white); } + +.-bg-white { background: var(--white); } + +.-bg-grey { background: var(--grey); } + +.-bg-grey-100 { background: var(--grey-100); } + +.-bg-grey-200 { background: var(--grey-200); } + +.-bg-grey-300 { background: var(--grey-300); } + +.-bg-grey-500 { background: var(--grey-500); } + +.-bg-grey-900 { background: var(--grey-900); } + +/* +@styleguide + +@title Utility +<h1 class="-upcase -lightweight"> +Utility +</h1> +All Utility classes go here. +<p>Where are my Utilities? </p> +*/ + +/* -- Floats + ––––––––– */ + +.-float-right{ + float: right; +} + +.-float-left{ + float: left; +} + +/* -- Percentages + –––––––––––––– */ + +/* WIDTHS, HEIGHTS & OFFSETS */ + +.-w-10 { + width: 10%; + } + +@supports (display: grid){ + .-w-10 { + width: 10% !important + } + .-w-10.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 1; + } + + .-h-10 { + height: 10% !important + } + + .-h-10.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 1; + } + + .-vw-10 { + width: 10% !important; + } + .-vh-10 { + height: 10% !important; + } + .-offset-top-10 { + grid-column-start: 1; + } + .-m-offset-top-10 { + margin-top: 10%; + } + .-offset-right-10 { + grid-column-start: 1; + } + .-m-offset-right-10 { + margin-right: 10%; + } + .-offset-bottom-10 { + grid-column-start: 1; + } + .-m-offset-bottom-10 { + margin-bottom: 10%; + } + .-offset-left-10 { + grid-column-start: 1; + } + .-m-offset-left-10 { + margin-left: 10%; + } + } + +.-w-12 { + width: 12%; + } + +@supports (display: grid){ + .-w-12 { + width: 12% !important + } + .-w-12.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 1.2000000000000002; + } + + .-h-12 { + height: 12% !important + } + + .-h-12.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 1.2000000000000002; + } + + .-vw-12 { + width: 12% !important; + } + .-vh-12 { + height: 12% !important; + } + .-offset-top-12 { + grid-column-start: 1.2000000000000002; + } + .-m-offset-top-12 { + margin-top: 12%; + } + .-offset-right-12 { + grid-column-start: 1.2000000000000002; + } + .-m-offset-right-12 { + margin-right: 12%; + } + .-offset-bottom-12 { + grid-column-start: 1.2000000000000002; + } + .-m-offset-bottom-12 { + margin-bottom: 12%; + } + .-offset-left-12 { + grid-column-start: 1.2000000000000002; + } + .-m-offset-left-12 { + margin-left: 12%; + } + } + +.-w-14 { + width: 14%; + } + +@supports (display: grid){ + .-w-14 { + width: 14% !important + } + .-w-14.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 1.4000000000000001; + } + + .-h-14 { + height: 14% !important + } + + .-h-14.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 1.4000000000000001; + } + + .-vw-14 { + width: 14% !important; + } + .-vh-14 { + height: 14% !important; + } + .-offset-top-14 { + grid-column-start: 1.4000000000000001; + } + .-m-offset-top-14 { + margin-top: 14%; + } + .-offset-right-14 { + grid-column-start: 1.4000000000000001; + } + .-m-offset-right-14 { + margin-right: 14%; + } + .-offset-bottom-14 { + grid-column-start: 1.4000000000000001; + } + .-m-offset-bottom-14 { + margin-bottom: 14%; + } + .-offset-left-14 { + grid-column-start: 1.4000000000000001; + } + .-m-offset-left-14 { + margin-left: 14%; + } + } + +.-w-15 { + width: 15%; + } + +@supports (display: grid){ + .-w-15 { + width: 15% !important + } + .-w-15.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 1.5; + } + + .-h-15 { + height: 15% !important + } + + .-h-15.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 1.5; + } + + .-vw-15 { + width: 15% !important; + } + .-vh-15 { + height: 15% !important; + } + .-offset-top-15 { + grid-column-start: 1.5; + } + .-m-offset-top-15 { + margin-top: 15%; + } + .-offset-right-15 { + grid-column-start: 1.5; + } + .-m-offset-right-15 { + margin-right: 15%; + } + .-offset-bottom-15 { + grid-column-start: 1.5; + } + .-m-offset-bottom-15 { + margin-bottom: 15%; + } + .-offset-left-15 { + grid-column-start: 1.5; + } + .-m-offset-left-15 { + margin-left: 15%; + } + } + +.-w-18 { + width: 18%; + } + +@supports (display: grid){ + .-w-18 { + width: 18% !important + } + .-w-18.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 1.8; + } + + .-h-18 { + height: 18% !important + } + + .-h-18.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 1.8; + } + + .-vw-18 { + width: 18% !important; + } + .-vh-18 { + height: 18% !important; + } + .-offset-top-18 { + grid-column-start: 1.8; + } + .-m-offset-top-18 { + margin-top: 18%; + } + .-offset-right-18 { + grid-column-start: 1.8; + } + .-m-offset-right-18 { + margin-right: 18%; + } + .-offset-bottom-18 { + grid-column-start: 1.8; + } + .-m-offset-bottom-18 { + margin-bottom: 18%; + } + .-offset-left-18 { + grid-column-start: 1.8; + } + .-m-offset-left-18 { + margin-left: 18%; + } + } + +.-w-20 { + width: 20%; + } + +@supports (display: grid){ + .-w-20 { + width: 20% !important + } + .-w-20.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 2; + } + + .-h-20 { + height: 20% !important + } + + .-h-20.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 2; + } + + .-vw-20 { + width: 20% !important; + } + .-vh-20 { + height: 20% !important; + } + .-offset-top-20 { + grid-column-start: 2; + } + .-m-offset-top-20 { + margin-top: 20%; + } + .-offset-right-20 { + grid-column-start: 2; + } + .-m-offset-right-20 { + margin-right: 20%; + } + .-offset-bottom-20 { + grid-column-start: 2; + } + .-m-offset-bottom-20 { + margin-bottom: 20%; + } + .-offset-left-20 { + grid-column-start: 2; + } + .-m-offset-left-20 { + margin-left: 20%; + } + } + +.-w-22 { + width: 22%; + } + +@supports (display: grid){ + .-w-22 { + width: 22% !important + } + .-w-22.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 2.2; + } + + .-h-22 { + height: 22% !important + } + + .-h-22.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 2.2; + } + + .-vw-22 { + width: 22% !important; + } + .-vh-22 { + height: 22% !important; + } + .-offset-top-22 { + grid-column-start: 2.2; + } + .-m-offset-top-22 { + margin-top: 22%; + } + .-offset-right-22 { + grid-column-start: 2.2; + } + .-m-offset-right-22 { + margin-right: 22%; + } + .-offset-bottom-22 { + grid-column-start: 2.2; + } + .-m-offset-bottom-22 { + margin-bottom: 22%; + } + .-offset-left-22 { + grid-column-start: 2.2; + } + .-m-offset-left-22 { + margin-left: 22%; + } + } + +.-w-24 { + width: 24%; + } + +@supports (display: grid){ + .-w-24 { + width: 24% !important + } + .-w-24.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 2.4000000000000004; + } + + .-h-24 { + height: 24% !important + } + + .-h-24.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 2.4000000000000004; + } + + .-vw-24 { + width: 24% !important; + } + .-vh-24 { + height: 24% !important; + } + .-offset-top-24 { + grid-column-start: 2.4000000000000004; + } + .-m-offset-top-24 { + margin-top: 24%; + } + .-offset-right-24 { + grid-column-start: 2.4000000000000004; + } + .-m-offset-right-24 { + margin-right: 24%; + } + .-offset-bottom-24 { + grid-column-start: 2.4000000000000004; + } + .-m-offset-bottom-24 { + margin-bottom: 24%; + } + .-offset-left-24 { + grid-column-start: 2.4000000000000004; + } + .-m-offset-left-24 { + margin-left: 24%; + } + } + +.-w-25 { + width: 25%; + } + +@supports (display: grid){ + .-w-25 { + width: 25% !important + } + .-w-25.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 2.5; + } + + .-h-25 { + height: 25% !important + } + + .-h-25.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 2.5; + } + + .-vw-25 { + width: 25% !important; + } + .-vh-25 { + height: 25% !important; + } + .-offset-top-25 { + grid-column-start: 2.5; + } + .-m-offset-top-25 { + margin-top: 25%; + } + .-offset-right-25 { + grid-column-start: 2.5; + } + .-m-offset-right-25 { + margin-right: 25%; + } + .-offset-bottom-25 { + grid-column-start: 2.5; + } + .-m-offset-bottom-25 { + margin-bottom: 25%; + } + .-offset-left-25 { + grid-column-start: 2.5; + } + .-m-offset-left-25 { + margin-left: 25%; + } + } + +.-w-30 { + width: 30%; + } + +@supports (display: grid){ + .-w-30 { + width: 30% !important + } + .-w-30.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 3; + } + + .-h-30 { + height: 30% !important + } + + .-h-30.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 3; + } + + .-vw-30 { + width: 30% !important; + } + .-vh-30 { + height: 30% !important; + } + .-offset-top-30 { + grid-column-start: 3; + } + .-m-offset-top-30 { + margin-top: 30%; + } + .-offset-right-30 { + grid-column-start: 3; + } + .-m-offset-right-30 { + margin-right: 30%; + } + .-offset-bottom-30 { + grid-column-start: 3; + } + .-m-offset-bottom-30 { + margin-bottom: 30%; + } + .-offset-left-30 { + grid-column-start: 3; + } + .-m-offset-left-30 { + margin-left: 30%; + } + } + +.-w-40 { + width: 40%; + } + +@supports (display: grid){ + .-w-40 { + width: 40% !important + } + .-w-40.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 4; + } + + .-h-40 { + height: 40% !important + } + + .-h-40.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 4; + } + + .-vw-40 { + width: 40% !important; + } + .-vh-40 { + height: 40% !important; + } + .-offset-top-40 { + grid-column-start: 4; + } + .-m-offset-top-40 { + margin-top: 40%; + } + .-offset-right-40 { + grid-column-start: 4; + } + .-m-offset-right-40 { + margin-right: 40%; + } + .-offset-bottom-40 { + grid-column-start: 4; + } + .-m-offset-bottom-40 { + margin-bottom: 40%; + } + .-offset-left-40 { + grid-column-start: 4; + } + .-m-offset-left-40 { + margin-left: 40%; + } + } + +.-w-50 { + width: 50%; + } + +@supports (display: grid){ + .-w-50 { + width: 50% !important + } + .-w-50.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 5; + } + + .-h-50 { + height: 50% !important + } + + .-h-50.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 5; + } + + .-vw-50 { + width: 50% !important; + } + .-vh-50 { + height: 50% !important; + } + .-offset-top-50 { + grid-column-start: 5; + } + .-m-offset-top-50 { + margin-top: 50%; + } + .-offset-right-50 { + grid-column-start: 5; + } + .-m-offset-right-50 { + margin-right: 50%; + } + .-offset-bottom-50 { + grid-column-start: 5; + } + .-m-offset-bottom-50 { + margin-bottom: 50%; + } + .-offset-left-50 { + grid-column-start: 5; + } + .-m-offset-left-50 { + margin-left: 50%; + } + } + +.-w-58 { + width: 58%; + } + +@supports (display: grid){ + .-w-58 { + width: 58% !important + } + .-w-58.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 5.800000000000001; + } + + .-h-58 { + height: 58% !important + } + + .-h-58.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 5.800000000000001; + } + + .-vw-58 { + width: 58% !important; + } + .-vh-58 { + height: 58% !important; + } + .-offset-top-58 { + grid-column-start: 5.800000000000001; + } + .-m-offset-top-58 { + margin-top: 58%; + } + .-offset-right-58 { + grid-column-start: 5.800000000000001; + } + .-m-offset-right-58 { + margin-right: 58%; + } + .-offset-bottom-58 { + grid-column-start: 5.800000000000001; + } + .-m-offset-bottom-58 { + margin-bottom: 58%; + } + .-offset-left-58 { + grid-column-start: 5.800000000000001; + } + .-m-offset-left-58 { + margin-left: 58%; + } + } + +.-w-60 { + width: 60%; + } + +@supports (display: grid){ + .-w-60 { + width: 60% !important + } + .-w-60.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 6; + } + + .-h-60 { + height: 60% !important + } + + .-h-60.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 6; + } + + .-vw-60 { + width: 60% !important; + } + .-vh-60 { + height: 60% !important; + } + .-offset-top-60 { + grid-column-start: 6; + } + .-m-offset-top-60 { + margin-top: 60%; + } + .-offset-right-60 { + grid-column-start: 6; + } + .-m-offset-right-60 { + margin-right: 60%; + } + .-offset-bottom-60 { + grid-column-start: 6; + } + .-m-offset-bottom-60 { + margin-bottom: 60%; + } + .-offset-left-60 { + grid-column-start: 6; + } + .-m-offset-left-60 { + margin-left: 60%; + } + } + +.-w-70 { + width: 70%; + } + +@supports (display: grid){ + .-w-70 { + width: 70% !important + } + .-w-70.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 7; + } + + .-h-70 { + height: 70% !important + } + + .-h-70.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 7; + } + + .-vw-70 { + width: 70% !important; + } + .-vh-70 { + height: 70% !important; + } + .-offset-top-70 { + grid-column-start: 7; + } + .-m-offset-top-70 { + margin-top: 70%; + } + .-offset-right-70 { + grid-column-start: 7; + } + .-m-offset-right-70 { + margin-right: 70%; + } + .-offset-bottom-70 { + grid-column-start: 7; + } + .-m-offset-bottom-70 { + margin-bottom: 70%; + } + .-offset-left-70 { + grid-column-start: 7; + } + .-m-offset-left-70 { + margin-left: 70%; + } + } + +.-w-75 { + width: 75%; + } + +@supports (display: grid){ + .-w-75 { + width: 75% !important + } + .-w-75.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 7.5; + } + + .-h-75 { + height: 75% !important + } + + .-h-75.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 7.5; + } + + .-vw-75 { + width: 75% !important; + } + .-vh-75 { + height: 75% !important; + } + .-offset-top-75 { + grid-column-start: 7.5; + } + .-m-offset-top-75 { + margin-top: 75%; + } + .-offset-right-75 { + grid-column-start: 7.5; + } + .-m-offset-right-75 { + margin-right: 75%; + } + .-offset-bottom-75 { + grid-column-start: 7.5; + } + .-m-offset-bottom-75 { + margin-bottom: 75%; + } + .-offset-left-75 { + grid-column-start: 7.5; + } + .-m-offset-left-75 { + margin-left: 75%; + } + } + +.-w-80 { + width: 80%; + } + +@supports (display: grid){ + .-w-80 { + width: 80% !important + } + .-w-80.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 8; + } + + .-h-80 { + height: 80% !important + } + + .-h-80.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 8; + } + + .-vw-80 { + width: 80% !important; + } + .-vh-80 { + height: 80% !important; + } + .-offset-top-80 { + grid-column-start: 8; + } + .-m-offset-top-80 { + margin-top: 80%; + } + .-offset-right-80 { + grid-column-start: 8; + } + .-m-offset-right-80 { + margin-right: 80%; + } + .-offset-bottom-80 { + grid-column-start: 8; + } + .-m-offset-bottom-80 { + margin-bottom: 80%; + } + .-offset-left-80 { + grid-column-start: 8; + } + .-m-offset-left-80 { + margin-left: 80%; + } + } + +.-w-90 { + width: 90%; + } + +@supports (display: grid){ + .-w-90 { + width: 90% !important + } + .-w-90.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 9; + } + + .-h-90 { + height: 90% !important + } + + .-h-90.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 9; + } + + .-vw-90 { + width: 90% !important; + } + .-vh-90 { + height: 90% !important; + } + .-offset-top-90 { + grid-column-start: 9; + } + .-m-offset-top-90 { + margin-top: 90%; + } + .-offset-right-90 { + grid-column-start: 9; + } + .-m-offset-right-90 { + margin-right: 90%; + } + .-offset-bottom-90 { + grid-column-start: 9; + } + .-m-offset-bottom-90 { + margin-bottom: 90%; + } + .-offset-left-90 { + grid-column-start: 9; + } + .-m-offset-left-90 { + margin-left: 90%; + } + } + +.-w-100 { + width: 100%; + } + +@supports (display: grid){ + .-w-100 { + width: 100% !important + } + .-w-100.col:not(.-fixed){ + width: auto !important; + grid-column-end: span 10; + } + + .-h-100 { + height: 100% !important + } + + .-h-100.col:not(.-fixed){ + height: auto !important; + grid-row-end: span 10; + } + + .-vw-100 { + width: 100% !important; + } + .-vh-100 { + height: 100% !important; + } + .-offset-top-100 { + grid-column-start: 10; + } + .-m-offset-top-100 { + margin-top: 100%; + } + .-offset-right-100 { + grid-column-start: 10; + } + .-m-offset-right-100 { + margin-right: 100%; + } + .-offset-bottom-100 { + grid-column-start: 10; + } + .-m-offset-bottom-100 { + margin-bottom: 100%; + } + .-offset-left-100 { + grid-column-start: 10; + } + .-m-offset-left-100 { + margin-left: 100%; + } + } + +@supports (display: grid){ + .-w-100{ + grid-column: 1 / -1 !important; + } +} + +.-span-cols-1{ + width: 10%; + } + +@supports (display: grid){ + .-span-cols-1{ + width: auto; + grid-column-end: span 1; + } + .-span-rows-1{ + grid-row-end: span span 1; + } + } + +.-span-cols-2{ + width: 20%; + } + +@supports (display: grid){ + .-span-cols-2{ + width: auto; + grid-column-end: span 2; + } + .-span-rows-2{ + grid-row-end: span span 2; + } + } + +.-span-cols-3{ + width: 30%; + } + +@supports (display: grid){ + .-span-cols-3{ + width: auto; + grid-column-end: span 3; + } + .-span-rows-3{ + grid-row-end: span span 3; + } + } + +.-span-cols-4{ + width: 40%; + } + +@supports (display: grid){ + .-span-cols-4{ + width: auto; + grid-column-end: span 4; + } + .-span-rows-4{ + grid-row-end: span span 4; + } + } + +.-span-cols-5{ + width: 50%; + } + +@supports (display: grid){ + .-span-cols-5{ + width: auto; + grid-column-end: span 5; + } + .-span-rows-5{ + grid-row-end: span span 5; + } + } + +.-span-cols-6{ + width: 60%; + } + +@supports (display: grid){ + .-span-cols-6{ + width: auto; + grid-column-end: span 6; + } + .-span-rows-6{ + grid-row-end: span span 6; + } + } + +.-span-cols-7{ + width: 70%; + } + +@supports (display: grid){ + .-span-cols-7{ + width: auto; + grid-column-end: span 7; + } + .-span-rows-7{ + grid-row-end: span span 7; + } + } + +.-span-cols-8{ + width: 80%; + } + +@supports (display: grid){ + .-span-cols-8{ + width: auto; + grid-column-end: span 8; + } + .-span-rows-8{ + grid-row-end: span span 8; + } + } + +.-span-cols-9{ + width: 90%; + } + +@supports (display: grid){ + .-span-cols-9{ + width: auto; + grid-column-end: span 9; + } + .-span-rows-9{ + grid-row-end: span span 9; + } + } + +.-span-cols-10{ + width: 100%; + } + +@supports (display: grid){ + .-span-cols-10{ + width: auto; + grid-column-end: span 10; + } + .-span-rows-10{ + grid-row-end: span span 10; + } + } + +.-span-cols-11{ + width: 110%; + } + +@supports (display: grid){ + .-span-cols-11{ + width: auto; + grid-column-end: span 11; + } + .-span-rows-11{ + grid-row-end: span span 11; + } + } + +.-span-cols-12{ + width: 120%; + } + +@supports (display: grid){ + .-span-cols-12{ + width: auto; + grid-column-end: span 12; + } + .-span-rows-12{ + grid-row-end: span span 12; + } + } + +.-span-cols-13{ + width: 130%; + } + +@supports (display: grid){ + .-span-cols-13{ + width: auto; + grid-column-end: span 13; + } + .-span-rows-13{ + grid-row-end: span span 13; + } + } + +.-span-cols-14{ + width: 140%; + } + +@supports (display: grid){ + .-span-cols-14{ + width: auto; + grid-column-end: span 14; + } + .-span-rows-14{ + grid-row-end: span span 14; + } + } + +.-span-cols-15{ + width: 150%; + } + +@supports (display: grid){ + .-span-cols-15{ + width: auto; + grid-column-end: span 15; + } + .-span-rows-15{ + grid-row-end: span span 15; + } + } + +.-span-cols-16{ + width: 160%; + } + +@supports (display: grid){ + .-span-cols-16{ + width: auto; + grid-column-end: span 16; + } + .-span-rows-16{ + grid-row-end: span span 16; + } + } + +/* -- Positioning + –––––––––––––– */ + +.-pos-fixed, .-fixed{ + position: fixed; +} + +.-pos-absolute{ + position: absolute; +} + +.-pos-relative{ + position: relative; +} + +/* POSITIONING HELPERS */ + +.-t-0, .-top-0{ + top: 0; +} + +.-r-0, .-right-0{ + right: 0; +} + +.-b-0, .-bottom-0{ + bottom: 0; +} + +.-l-0, .-left-0{ + left: 0; +} + +.-top-half: calc(var(--spacing) * 0.5); + +.-top-1: calc(var(--spacing) * 1); + +.-top-2: calc(var(--spacing) * 2); + +.-top-3: calc(var(--spacing) * 3); + +.-top-4: calc(var(--spacing) * 4); + +.-top-5: calc(var(--spacing) * 5); + +.-right-half: calc(var(--spacing) * 0.5); + +.-right-1: calc(var(--spacing) * 1); + +.-right-2: calc(var(--spacing) * 2); + +.-right-3: calc(var(--spacing) * 3); + +.-right-4: calc(var(--spacing) * 4); + +.-right-5: calc(var(--spacing) * 5); + +.-bottom-half: calc(var(--spacing) * 0.5); + +.-bottom-1: calc(var(--spacing) * 1); + +.-bottom-2: calc(var(--spacing) * 2); + +.-bottom-3: calc(var(--spacing) * 3); + +.-bottom-4: calc(var(--spacing) * 4); + +.-bottom-5: calc(var(--spacing) * 5); + +.-left-half: calc(var(--spacing) * 0.5); + +.-left-1: calc(var(--spacing) * 1); + +.-left-2: calc(var(--spacing) * 2); + +.-left-3: calc(var(--spacing) * 3); + +.-left-4: calc(var(--spacing) * 4); + +.-left-5: calc(var(--spacing) * 5); + +/* -- Spacing + –––––––––– */ + +.-m-all{ + margin: var(--spacing); +} + +.-p-all{ + padding: var(--spacing); +} + +.-m-0, .-m-all-0{ + margin: 0 !important; +} + +.-p-0, .-p-all-0{ + padding: 0 !important; +} + +.-m-auto { + margin: auto; +} + +.-p-top-half {padding-top: calc(var(--spacing) * 0.5);} + +.-m-top-half {margin-top: calc(var(--spacing) * 0.5);} + +.-p-top-1 {padding-top: calc(var(--spacing) * 1);} + +.-m-top-1 {margin-top: calc(var(--spacing) * 1);} + +.-p-top-2 {padding-top: calc(var(--spacing) * 2);} + +.-m-top-2 {margin-top: calc(var(--spacing) * 2);} + +.-p-top-3 {padding-top: calc(var(--spacing) * 3);} + +.-m-top-3 {margin-top: calc(var(--spacing) * 3);} + +.-p-top-4 {padding-top: calc(var(--spacing) * 4);} + +.-m-top-4 {margin-top: calc(var(--spacing) * 4);} + +.-p-top-5 {padding-top: calc(var(--spacing) * 5);} + +.-m-top-5 {margin-top: calc(var(--spacing) * 5);} + +.-p-right-half {padding-right: calc(var(--spacing) * 0.5);} + +.-m-right-half {margin-right: calc(var(--spacing) * 0.5);} + +.-p-right-1 {padding-right: calc(var(--spacing) * 1);} + +.-m-right-1 {margin-right: calc(var(--spacing) * 1);} + +.-p-right-2 {padding-right: calc(var(--spacing) * 2);} + +.-m-right-2 {margin-right: calc(var(--spacing) * 2);} + +.-p-right-3 {padding-right: calc(var(--spacing) * 3);} + +.-m-right-3 {margin-right: calc(var(--spacing) * 3);} + +.-p-right-4 {padding-right: calc(var(--spacing) * 4);} + +.-m-right-4 {margin-right: calc(var(--spacing) * 4);} + +.-p-right-5 {padding-right: calc(var(--spacing) * 5);} + +.-m-right-5 {margin-right: calc(var(--spacing) * 5);} + +.-p-bottom-half {padding-bottom: calc(var(--spacing) * 0.5);} + +.-m-bottom-half {margin-bottom: calc(var(--spacing) * 0.5);} + +.-p-bottom-1 {padding-bottom: calc(var(--spacing) * 1);} + +.-m-bottom-1 {margin-bottom: calc(var(--spacing) * 1);} + +.-p-bottom-2 {padding-bottom: calc(var(--spacing) * 2);} + +.-m-bottom-2 {margin-bottom: calc(var(--spacing) * 2);} + +.-p-bottom-3 {padding-bottom: calc(var(--spacing) * 3);} + +.-m-bottom-3 {margin-bottom: calc(var(--spacing) * 3);} + +.-p-bottom-4 {padding-bottom: calc(var(--spacing) * 4);} + +.-m-bottom-4 {margin-bottom: calc(var(--spacing) * 4);} + +.-p-bottom-5 {padding-bottom: calc(var(--spacing) * 5);} + +.-m-bottom-5 {margin-bottom: calc(var(--spacing) * 5);} + +.-p-left-half {padding-left: calc(var(--spacing) * 0.5);} + +.-m-left-half {margin-left: calc(var(--spacing) * 0.5);} + +.-p-left-1 {padding-left: calc(var(--spacing) * 1);} + +.-m-left-1 {margin-left: calc(var(--spacing) * 1);} + +.-p-left-2 {padding-left: calc(var(--spacing) * 2);} + +.-m-left-2 {margin-left: calc(var(--spacing) * 2);} + +.-p-left-3 {padding-left: calc(var(--spacing) * 3);} + +.-m-left-3 {margin-left: calc(var(--spacing) * 3);} + +.-p-left-4 {padding-left: calc(var(--spacing) * 4);} + +.-m-left-4 {margin-left: calc(var(--spacing) * 4);} + +.-p-left-5 {padding-left: calc(var(--spacing) * 5);} + +.-m-left-5 {margin-left: calc(var(--spacing) * 5);} + +/* padding */ + +.-p-all-half{ + padding: calc(var(--spacing) * 0.5); +} + +.-p-all-1{ + padding: var(--spacing); +} + +.-p-all-2{ + padding: calc(var(--spacing) * 2); +} + +.-p-all-3{ + padding: calc(var(--spacing) * 3); +} + +.-p-all-4{ + padding: calc(var(--spacing) * 4); +} + +.-p-all-5{ + padding: calc(var(--spacing) * 5); +} + +.-p-x-half{ + padding-left: calc(var(--spacing) * 0.5); + padding-right: calc(var(--spacing) * 0.5); +} + +.-p-x-1{ + padding-left: calc(var(--spacing) * 1); + padding-right: calc(var(--spacing) * 1); +} + +.-p-x-2{ + padding-left: calc(var(--spacing) * 2); + padding-right: calc(var(--spacing) * 2); +} + +.-p-x-3{ + padding-left: calc(var(--spacing) * 3); + padding-right: calc(var(--spacing) * 3); +} + +.-p-x-4{ + padding-left: calc(var(--spacing) * 4); + padding-right: calc(var(--spacing) * 4); +} + +.-p-y-half{ + padding-top: calc(var(--spacing) * 0.5); + padding-bottom: calc(var(--spacing) * 0.5); +} + +.-p-y-1{ + padding-top: calc(var(--spacing) * 1); + padding-bottom: calc(var(--spacing) * 1); +} + +.-p-y-2{ + padding-top: calc(var(--spacing) * 2); + padding-bottom: calc(var(--spacing) * 2); +} + +.-p-y-3{ + padding-top: calc(var(--spacing) * 3); + padding-bottom: calc(var(--spacing) * 3); +} + +.-p-y-4{ + padding-top: calc(var(--spacing) * 4); + padding-bottom: calc(var(--spacing) * 4); +} + +/* margin */ + +.-m-all-half{ + margin: calc(var(--spacing) * 0.5); +} + +.-m-all-1{ + margin: var(--spacing); +} + +.-m-all-2{ + margin: calc(var(--spacing) * 2); +} + +.-m-all-3{ + margin: calc(var(--spacing) * 3); +} + +.-m-all-4{ + margin: calc(var(--spacing) * 4); +} + +.-m-all-5{ + margin: calc(var(--spacing) * 5); +} + +.-m-x-half{ + margin-left: calc(var(--spacing) * 0.5); + margin-right: calc(var(--spacing) * 0.5); +} + +.-m-x-1{ + margin-left: calc(var(--spacing) * 1); + margin-right: calc(var(--spacing) * 1); +} + +.-m-x-2{ + margin-left: calc(var(--spacing) * 2); + margin-right: calc(var(--spacing) * 2); +} + +.-m-x-3{ + margin-left: calc(var(--spacing) * 3); + margin-right: calc(var(--spacing) * 3); +} + +.-m-x-4{ + margin-left: calc(var(--spacing) * 4); + margin-right: calc(var(--spacing) * 4); +} + +.-m-y-half{ + margin-top: calc(var(--spacing) * 0.5); + margin-bottom: calc(var(--spacing) * 0.5); +} + +.-m-y-1{ + margin-top: calc(var(--spacing) * 1); + margin-bottom: calc(var(--spacing) * 1); +} + +.-m-y-2{ + margin-top: calc(var(--spacing) * 2); + margin-bottom: calc(var(--spacing) * 2); +} + +.-m-y-3{ + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 3); +} + +.-m-y-4{ + margin-top: calc(var(--spacing) * 4); + margin-bottom: calc(var(--spacing) * 4); +} + +/* Text classes + –––––––––––– */ + +/* FONT WEIGHTS */ + +.-lightweight{ + font-weight: 300; +} + +.-bookweight{ + font-weight: 500; +} + +.-heavyweight{ + font-weight: 600; +} + +.-boldweight{ + font-weight: 700; +} + +.-extraboldweight{ + font-weight: 800; +} + +.-upcase{ + text-transform: uppercase; +} + +.-nocase{ + text-transform: none; +} + +.-lineheight-1{ + line-height: 1em; +} + +.-lineheight-1-2{ + line-height: 1.2em; +} + +.-lineheight-1-3{ + line-height: 1.3em; +} + +.-lineheight-1-4{ + line-height: 1.4em; +} + +.-lineheight-1-5{ + line-height: 24px; + line-height: 1.5rem; +} + +.-text-left{ + text-align: left; +} + +.-text-center{ + text-align: center; +} + +.-text-right{ + text-align: right; +} + +/* -- Typesizes + –––––––––––– */ + +.-rem-3 { + font-size: 48px; + font-size: 3rem; +} + +.-rem-2 { + font-size: 32px; + font-size: 2rem; +} + +.-rem-1-75 { + font-size: 28px; + font-size: 1.75rem; +} + +.-rem-1-5 { + font-size: 24px; + font-size: 1.5rem; +} + +.-rem-1-2 { + font-size: 19.2px; + font-size: 1.2rem; +} + +.-rem-1 { + font-size: 16px; + font-size: 1rem; +} + +.-rem-09 { + font-size: 14.4px; + font-size: 0.9rem; +} + +.-rem-085 { + font-size: 13.6px; + font-size: 0.85rem; +} + +.-rem-08 { + font-size: 12.8px; + font-size: 0.8rem; +} + +.-rem-075 { + font-size: 11.2px; + font-size: 0.7rem; +} + +.-rem-07 { + font-size: 11.2px; + font-size: 0.7rem; +} + +.-rem-06 { + font-size: 9.6px; + font-size: 0.6rem; +} + +/* Ems */ + +.-em-3 { + font-size: 3em; +} + +.-em-2 { + font-size: 2em; +} + +.-em-1-75 { + font-size: 1.75em; +} + +.-em-1-5 { + font-size: 1.5em; +} + +.-em-1-2 { + font-size: 1.2em; +} + +.-em-1 { + font-size: 1em; +} + +.-em-09 { + font-size: 0.9em; +} + +.-em-085 { + font-size: 0.85em; +} + +.-em-08 { + font-size: 0.8em; +} + +.-em-075 { + font-size: 0.7em; +} + +.-em-07 { + font-size: 0.7em; +} + +.-em-06 { + font-size: 0.6em; +} + +.unsupported, .ie11, .ie10, .ie678{ + display: none; +} + +@supports not (display: grid) { + .unsupported{ + display: block; + } +} + +@media all and (-ms-high-contrast:none){ + .ie10 {display: block;} /* IE10 */ + *::-ms-backdrop, .ie11 {display: block;} /* IE11 */ +} + +@media \0screen\,screen\9 { + .ie678 {display: block;} +} + +/* override/set vars here */ + +:root{ + /* sans typeface */ + --sans: 'Lato', sans-serif; + + /* colours (main HSL values) */ + --core-secondary: 148, 40%; + --core-primary: 192, 56%; + --core-highlight: 350, 98%; +} + +/* END of css */
\ No newline at end of file diff --git a/themes/winning/static/css/main.css b/themes/winning/static/css/main.css new file mode 100644 index 0000000..1d3e329 --- /dev/null +++ b/themes/winning/static/css/main.css @@ -0,0 +1,553 @@ +html, body{ + font-family: 'Fira sans', sans-serif; + background: url('../img/noisyly.png') repeat fixed, linear-gradient(to bottom, rgba(28,20,20,0.26) 0%,rgba(155,155,155,0) 0.2em) fixed; + font-size: 1em; + overflow-x: hidden; +} + +html{ + background: rgb(76, 76, 76) url('../img/noisyly.png'); + border-bottom: 10px solid #000; +} + +footer a:hover{ + color: rgb(252, 76, 122); + border-color: rgb(252, 76, 122); +} + +.hi-message{ + text-align: center; + width: 14em; + left: 50%; + top: 8.4em; + font-size: 0.9rem; + background: #000; + color: #fff; + position: absolute; + padding: 21px; + margin-top: 8px; + border-radius: 8px; + box-shadow: 1px 0px 12px rgba(0,0,0,0.2); + margin-left: -7em; + transform: translateY(-7px); + opacity: 0; +} + .hi-message.transitions{ + transition: 0.9s all; + } + .hi-message.on{ + transform: translateY(0); + opacity: 1; + } + .hi-message p{ + margin: 0; + text-align: center; + line-height: 1.3; + font-weight: 500; + } + .hi-message:before{ + content: ''; + border: 7px solid #000; + border-color: transparent transparent #000 transparent ; + display: block; + top: -14px; + left: 50%; + margin-left: -10px; + position: absolute; + } + .skewed-bg{ + min-width: 242px; + width: 11em; + margin: auto; + display: block; + height: 90px; + background: none; + mix-blend-mode: multiply; + padding: 0; + margin-top: 0; + border-radius: 10em; + position: relative; + overflow: hidden; + z-index: 9; + } + + .skewed-bg.on:before{ + background: rgba(0,0,0,0.1); + } + + .skewed-bg:after{ + content: ''; + border: 1px solid #ccc; + width: calc(100% - 4px); + height: calc(100% - 4px); + display: block; + padding: 1px; + overflow: hidden; + transition: 0.8s all; + border-radius: 10em; + position: absolute; top: 0; left: 0; + } + + .skewed-bg:before{ + content: ''; + background: #fff; + border: 10px solid #efefef; + width: calc(100% - 22px); + height: calc(100% - 22px); + display: block; + padding: 1px; + overflow: hidden; + transition: 0.8s all; + border-radius: 10em; + /* mix-blend-mode: multiply; */ + } + .progress{ + height: 110%; + width: 120%; + background: rgba(255,255,255,0.69); + opacity: 0; + transition: 2s opacity; + transform: skewX(-24deg); + position: absolute; + top: -5%; left: -10%; + pointer-events: none; + } + .progress.on{ + opacity: 1; + animation: 13s loader 1; + } +@keyframes loader{ + 0%{ + width: 0; + } + 100%{ + width: 120%; + } +} + +#timclulow-word{ + width: 219px; + margin: auto; + position: absolute; + top: 2.1em; + left: 50%; + margin-left: -109px; + height: 86px; + padding: 10px 30px; + margin-top: 0; + border-radius: 0 0 6px 6px; + filter: drop-shadow( -1px -1px 0px rgba(55, 32, 66,0.12)); + z-index: 10; + pointer-events: none; +} +#T, #I, #M, #C, #L1, #U, #L2, #O, #W{ + opacity: 0.99; +} +.grid-layout-1{ + display: grid; + grid-gap: 1em; + grid-template-areas: "header" "main" "footer"; + grid-template-rows: 0fr auto 1fr; +} +@media only screen and (min-width: 1240px) { + .grid-layout-1{ + margin: auto; + width: 50em; + box-shadow: 0px 2px 52px rgba(0,0,0,0.2); + } +} + +.header{ + grid-area: header; + padding-top: 2em; +} +.main{ + grid-area: main; + margin: 0 auto 40px; + line-height: 1.2em; + text-align: left; + width: 70%; + max-width: 35em; +} + .main h1 + p{ + margin-right: 10px; + } + .main a, footer a{ + transition: 0.3s all cubic-bezier(0.42, 0, 0.57, 1.96) + } + .main a:link{ + box-shadow: inset 0 -1px 0 #ccc; + transition: 0.4s all ease-in-out; + } + .main a:hover{ + color: #000; + box-shadow: inset 0 -1.3em 0 rgba(100,100,100,.1); + } + .main .grid{ + margin-top: 3em; + } + .main > h2:first-child{ + margin-top: 1em; + } + .main .-span-cols-4{ + border-left: 1px solid #ccc; + font-size: 0.85em; + line-height: 1.4; + } + .main .-span-cols-4 ul{ + padding-left: 0; + } + .main .-span-cols-4 ul li{ + padding-left: 0; + padding-bottom: 0.7em; + padding-right: 1em; + font-size: 0.75em; + list-style-type: none; + font-style: italic; + color: #999; + } + .main .-span-cols-4 ul li:before{ + content: '— '; + } + .main h4{ + text-transform: uppercase; + font-size: 0.9em; + font-weight: 800; + letter-spacing: 1px; + margin-bottom: 1em; + } + .main h3{ + margin-top: -13px; + font-weight: 400; + font-size: 0.9em; + } + .main h6{ + margin: 0 0 0.5em 0; + padding: 0; + font-size: 0.8em; + } + .main h6 em{ + margin-top: 1em; + display: block; + font-size: 0.8em; + font-weight: 400; + color: rgb(70, 122, 163); + } + .main h2 + p em{ + margin-top: 0; + } + .main ul{ + margin-bottom: 2em; + } + +.col > h2:first-child{ + margin-top: 0; +} + +.col h4{ + margin-top: 5px; +} + +.footer{ + grid-area: footer; + padding-bottom: 5em; + width: 80%; + display: block; +} + + +h1, h2, h3, h4, h5, h6{ + text-align: left; +} + +h1{ + text-align: center; + font-size: 3em; + margin-top: 0.5em; + margin-bottom: 0.8em; +} + +h2{ + text-align: left; + font-weight: 600; + font-size: 1.15em; + padding-bottom: 5px; + letter-spacing: -0.04em; + margin-top: 2.5em; +} + +p{ + text-align: left; + font-family: 'Fira sans', sans-serif; + font-weight: 200; + font-size: 0.85em; +} + +dl{ + text-align: left; + font-size: 0.85em; +} + +dl dt, dl dd{ + line-height: 1.4; + padding-bottom: 2px; +} + +dl dt:first-child, dt:first-child + dd{ + border: 0; + margin-top: 0; +} + +dl dt{ + font-size: 0.7em; + text-transform: uppercase; + border-top: 1px solid #cecece54; + padding-top: 11px; +} + +dl dt strong{ + font-weight: 600; + background: #f3f3f3; + color: #2b2b2b; + padding: 0 7px; + letter-spacing: 0.02em; + border-radius: 10px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + margin-bottom: 3px; + display: inline-block; +} + +dl dd{ + font-weight: 300; + font-size: 0.9em; + padding-bottom: 13px; + padding-left: 7px; +} + +ul{ + padding-left: 1em; +} + +ul li{ + text-align: left; + list-style-type: none; + padding-left: 0.2em; + display: list-item; + font-weight: 200; + font-size: 0.85em; + counter-increment: item; + padding-bottom: 1em; +} + +.-span-cols-6 ul li{ + padding-left: 0.6em; +} + +.-span-cols-6 ul li:before{ + content: "0" counter(item) ". "; + font-weight: 800; + margin-left: -1.65em; + margin-right: 2px; + font-size: 0.85em; + position: relative; + left: -8px; + top: -1px; +} + +#angle1{ + transform-origin: 10px 10px; +} + +.-clearfix{ + display: block; + clear: both; +} + +.download, .download .download-icon, .download .download-icon:before, +.download .download-icon:after{ + transition: 0.7s all cubic-bezier(0.42, 0, 0.57, 1.96); +} + +.download:hover{ + color: rgb(252, 76, 122); +} + +.download:hover .download-icon{ + transform: scale(1); + border-color: rgb(252, 76, 122); +} +.download:hover .download-icon:before, +.download:hover .download-icon:after{ + background: rgb(252, 76, 122); +} +.download-icon{ + width: 29px; + height: 29px; + border: 2px solid #333; + border-radius: 5em; + display: inline-block; + position: relative; + margin-left: -36px; + top: 8px; left: 0px; + transform: scale(0.8); +} +.download-icon:before{ + position: absolute; + left: 9px; + top: 8px; + transform: rotate(45deg); + content: ''; + display: block; + height: 2px; + width: 10px; + background: #333; +} +.download-icon:after{ + position: absolute; + left: 9px; + bottom: 9px; + transform: rotate(-45deg); + content: ''; + display: block; + height: 2px; + width: 10px; + background: #333; +} +.-print-only{ display: none} +.-print-only p{ + margin-bottom: 0; + margin-top: 0; +} +.-print-only h6{ + margin: 20px 0 0 0; +} + +.lastpublished{ + color: #999; + padding-top: 2em; +} + +@media print{ + .header{ + padding-top: 0; + } + + #timclulow-word{ + top: 0.1em; + } + + #timclulow-word, .skewed-bg{ + transform: scale(0.55); + -webkit-transform: scale(0.55); + } + + .skewed-bg{ + width: 25em; + } + + .main h1 + p{ + margin-right: 2em; + } + + .-p-left-3{ + padding-left: 3em; + } + + .-m-right-2{ + padding-right: 2em; + } + + .-print-only{ + display: block; + } + .-print-hidden, .download-icon{ + display: none; + } + + html, body{ + background: none; + overflow-x: hidden; + } + + body{ + font-size: 0.7em; + width: 100%; + height: 100%; + margin-top: 0; + } + + .main h2{ + margin: 2em 0 1em; + } + + .main h3{ + margin: 0 0 1em; + } + + .main h6{ + margin-bottom: 0; + } + + .main, .footer{ + width: 100%; + max-width: none; + } + + .main ul{ + margin-top: 10px; + margin-left: 0.5em; + } + + dl dd{ + padding-bottom: 0 + } + + #pageHeader-1{ + display: none; + } + .-float-right{ + float: none; + width: 100%; + } + .-float-right .-print-only{ + display: inline; + } + .footer{ + padding-bottom: 0; + } + html{ + border-bottom: none; + } + @page { + size: A4; + margin: 2cm 3cm; + } +} + +/* responsiveness */ +@media only screen and (max-width: 800px) { + .-float-left, .-float-right{ + float: none; + } + .grid{ + display: block; + } + .-span-cols-4{ + margin-top: 3em; + } + .footer{ + width: 60%; + } +} + +@media only screen and (min-width: 500px) { + html, body{ + font-size: 1.1em; + } +} + +@media only screen and (min-width: 1140px) { + html, body{ + font-size: 1.25em; + } +}
\ No newline at end of file diff --git a/themes/winning/static/img/noisey.png b/themes/winning/static/img/noisey.png Binary files differnew file mode 100644 index 0000000..96f0950 --- /dev/null +++ b/themes/winning/static/img/noisey.png diff --git a/themes/winning/static/img/noisy.png b/themes/winning/static/img/noisy.png Binary files differnew file mode 100644 index 0000000..ce1fba5 --- /dev/null +++ b/themes/winning/static/img/noisy.png diff --git a/themes/winning/static/img/noisyish.png b/themes/winning/static/img/noisyish.png Binary files differnew file mode 100644 index 0000000..39f9952 --- /dev/null +++ b/themes/winning/static/img/noisyish.png diff --git a/themes/winning/static/img/noisyly.png b/themes/winning/static/img/noisyly.png Binary files differnew file mode 100644 index 0000000..ed037af --- /dev/null +++ b/themes/winning/static/img/noisyly.png diff --git a/themes/winning/static/img/timclulow--.png b/themes/winning/static/img/timclulow--.png Binary files differnew file mode 100644 index 0000000..7788a4c --- /dev/null +++ b/themes/winning/static/img/timclulow--.png diff --git a/themes/winning/static/img/timclulow--.svg b/themes/winning/static/img/timclulow--.svg new file mode 100644 index 0000000..89189a8 --- /dev/null +++ b/themes/winning/static/img/timclulow--.svg @@ -0,0 +1,34 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="619px" height="133px" viewBox="0 0 619 133" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch --> + <title>timclulow</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="timclulow" transform="translate(-21.000000, -20.000000)" stroke="#000000" stroke-width="4"> + <g transform="translate(22.000000, 21.000000)"> + <g id="Clulow" transform="translate(0.000000, 86.000000)"> + <path d="M271.949997,0.755876251 L271.949997,20.7964747 C271.698614,33.6035156 263.066791,42.8370732 241.756306,42.8370732 L227.714346,42.8370732 C202.244608,42.8370732 195,34.7304688 195,21.7964747 L195,1.38788821" id="U" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M359.838094,43.449185 L324,43.449185 C324,43.449185 314,43.449185 314,33.1308425 L314,1" id="L2" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M165.838094,43.449185 L130,43.449185 C130,43.449185 120,43.449185 120,33.1308425 L120,1" id="L1" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M615.960938,1.75587625 C615.960938,1.75587625 598.868859,36.8938274 598.607202,37.3205587 C594.999023,43.2050612 590.347747,38.6420127 590.347747,38.6420127 L567.601562,19.3789063 C560.59082,13.7299805 556.395996,13.5683594 549.293945,19.3789063 L525.962891,39.9160156 C525.962891,39.9160156 520.952148,43.7421875 517.778584,36.6316259 L501,1.75587625" id="W" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="O" x="388" y="1" width="86" height="42" rx="16"></rect> + <path d="M83.9446745,1 L10.0566406,1 C10.0566406,1 0.71875,0.75587625 1,11.109375 L1,34.6230469 C1,34.6230469 1,42.6354117 11.4355469,42.6354117 L83.9446745,42.6354117" id="C" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + <g id="TIM" stroke-linecap="round" stroke-linejoin="round" transform="translate(154.000000, 0.000000)"> + <g id="T"> + <path d="M22.65835,23 L65.674984,23" id="t-vert" transform="translate(44.166667, 25.000000) rotate(-90.000000) translate(-44.166667, -25.000000) "></path> + <path d="M83.31,1 L0,1" id="t-horiz"></path> + </g> + <g id="M" transform="translate(159.000000, 1.000000)"> + <path d="M95.960937,0 L95.960937,44" id="vert2"></path> + <path d="M47,32.5634036 C48.6414657,32.5774994 50.3050711,32.0213126 51.9823326,30.9062702 L95.9086456,0" id="angle2"></path> + <path d="M1,0 L42.351562,30.9062702 C43.9144452,32.0163861 45.506638,32.5652366 47.1200928,32.5636616" id="angle1"></path> + <path d="M1,45 L1,1" id="vert1"></path> + </g> + <path d="M96.1318533,25 L139.868147,25" id="I" transform="translate(118.000000, 25.000000) rotate(-90.000000) translate(-118.000000, -25.000000) "></path> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/themes/winning/static/img/timclulow-print.svg b/themes/winning/static/img/timclulow-print.svg new file mode 100644 index 0000000..fbbca75 --- /dev/null +++ b/themes/winning/static/img/timclulow-print.svg @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="1003px" height="310px" viewBox="0 0 1003 310" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch --> + <title>timclulow</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="timclulow"> + <path d="M132.964844,0.6640625 L1002.95031,0.6640625 L875.515625,282.574219 C875.515625,282.574219 865.273437,309.0625 842.800781,309.0625 L13.9838407,309.0625 C13.9838407,309.0625 -4.7890625,305.855469 1.7421875,285.15625 C8.2734375,264.457031 132.964844,0.6640625 132.964844,0.6640625 Z" id="Path" fill="#FC507E"></path> + <g id="Group" opacity="0.207710598" transform="translate(179.000000, 96.000000)" stroke="#000000" stroke-width="6"> + <g id="Clulow" transform="translate(0.000000, 86.000000)"> + <path d="M271.949997,0.755876251 L271.949997,20.7964747 C271.698614,33.6035156 263.066791,42.8370732 241.756306,42.8370732 L227.714346,42.8370732 C202.244608,42.8370732 195,34.7304688 195,21.7964747 L195,1.38788821" id="U" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M359.838094,43.449185 L324,43.449185 C324,43.449185 314,43.449185 314,33.1308425 L314,1" id="L2" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M165.838094,43.449185 L130,43.449185 C130,43.449185 120,43.449185 120,33.1308425 L120,1" id="L1" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M615.960938,1.75587625 C615.960938,1.75587625 598.868859,36.8938274 598.607202,37.3205587 C594.999023,43.2050612 590.347747,38.6420127 590.347747,38.6420127 L567.601562,19.3789063 C560.59082,13.7299805 556.395996,13.5683594 549.293945,19.3789063 L525.962891,39.9160156 C525.962891,39.9160156 520.952148,43.7421875 517.778584,36.6316259 L501,1.75587625" id="W" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="O" x="388" y="1" width="86" height="42" rx="16"></rect> + <path d="M83.9446745,1 L10.0566406,1 C10.0566406,1 0.71875,0.75587625 1,11.109375 L1,34.6230469 C1,34.6230469 1,42.6354117 11.4355469,42.6354117 L83.9446745,42.6354117" id="C" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + <g id="TIM" stroke-linecap="round" stroke-linejoin="round" transform="translate(154.000000, 0.000000)"> + <g id="T"> + <path d="M22.65835,23 L65.674984,23" id="t-vert" transform="translate(44.166667, 26.000000) rotate(-90.000000) translate(-44.166667, -26.000000) "></path> + <path d="M83.31,3 L0,3" id="t-horiz"></path> + </g> + <g id="M" transform="translate(157.000000, 1.000000)"> + <path d="M99,0 L99,46.1212497" id="vert2"></path> + <path d="M49,32.5634036 C50.6414657,32.5774994 52.3050711,32.0213126 53.9823326,30.9062702 L97.9086456,0" id="angle2"></path> + <path d="M3,0 L44.351562,30.9062702 C45.9144452,32.0163861 47.506638,32.5652366 49.1200928,32.5636616" id="angle1"></path> + <path d="M3,47.1694599 L3,1.04821022" id="vert1"></path> + </g> + <path d="M118,47.8930399 L118,2.04821022" id="I"></path> + </g> + </g> + <g id="Group" transform="translate(175.000000, 91.000000)" stroke="#FFFFFF" stroke-width="7"> + <g id="Clulow" transform="translate(0.000000, 86.000000)"> + <path d="M271.949997,0.755876251 L271.949997,20.7964747 C271.698614,33.6035156 263.066791,42.8370732 241.756306,42.8370732 L227.714346,42.8370732 C202.244608,42.8370732 195,34.7304688 195,21.7964747 L195,1.38788821" id="U" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M359.838094,43.449185 L324,43.449185 C324,43.449185 314,43.449185 314,33.1308425 L314,1" id="L2" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M165.838094,43.449185 L130,43.449185 C130,43.449185 120,43.449185 120,33.1308425 L120,1" id="L1" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M615.960938,1.75587625 C615.960938,1.75587625 598.868859,36.8938274 598.607202,37.3205587 C594.999023,43.2050612 590.347747,38.6420127 590.347747,38.6420127 L567.601562,19.3789063 C560.59082,13.7299805 556.395996,13.5683594 549.293945,19.3789063 L525.962891,39.9160156 C525.962891,39.9160156 520.952148,43.7421875 517.778584,36.6316259 L501,1.75587625" id="W" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="O" x="388" y="1" width="86" height="42" rx="16"></rect> + <path d="M83.9446745,1 L10.0566406,1 C10.0566406,1 0.71875,0.75587625 1,11.109375 L1,34.6230469 C1,34.6230469 1,42.6354117 11.4355469,42.6354117 L83.9446745,42.6354117" id="C" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + <g id="TIM" stroke-linecap="round" stroke-linejoin="round" transform="translate(154.000000, 0.000000)"> + <g id="T"> + <path d="M22.65835,23 L65.674984,23" id="t-vert" transform="translate(44.166667, 26.500000) rotate(-90.000000) translate(-44.166667, -26.500000) "></path> + <path d="M83.31,3.5 L0,3.5" id="t-horiz"></path> + </g> + <g id="M" transform="translate(157.000000, 1.000000)"> + <path d="M99.5,0 L99.5,46.1212497" id="vert2"></path> + <path d="M49,32.5634036 C50.6414657,32.5774994 52.3050711,32.0213126 53.9823326,30.9062702 L97.9086456,0" id="angle2"></path> + <path d="M3,0 L44.351562,30.9062702 C45.9144452,32.0163861 47.506638,32.5652366 49.1200928,32.5636616" id="angle1"></path> + <path d="M3.5,47.1694599 L3.5,1.04821022" id="vert1"></path> + </g> + <path d="M118,47.8930399 L118,2.04821022" id="I"></path> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/themes/winning/static/img/timclulow.png b/themes/winning/static/img/timclulow.png Binary files differnew file mode 100644 index 0000000..a4b3d14 --- /dev/null +++ b/themes/winning/static/img/timclulow.png diff --git a/themes/winning/static/img/timclulow.svg b/themes/winning/static/img/timclulow.svg new file mode 100644 index 0000000..2e89837 --- /dev/null +++ b/themes/winning/static/img/timclulow.svg @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg id="timclulow-word" width="619px" height="133px" viewBox="0 0 619 133" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch --> + <title>timclulow</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="timclulow" transform="translate(1.000000, 2.000000)" stroke="#000000" stroke-width="4"> + <g id="Clulow" transform="translate(0.000000, 85.000000)"> + <path d="M271.949997,0.755876251 L271.949997,20.7964747 C271.698614,33.6035156 263.066791,42.8370732 241.756306,42.8370732 L227.714346,42.8370732 C202.244608,42.8370732 195,34.7304688 195,21.7964747 L195,1.38788821" id="U" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M357.838094,43.449185 L322,43.449185 C322,43.449185 312,43.449185 312,33.1308425 L312,1" id="L2" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M165.838094,43.449185 L130,43.449185 C130,43.449185 120,43.449185 120,33.1308425 L120,1" id="L2-Copy" stroke-linecap="round" stroke-linejoin="round"></path> + <path d="M615.960938,1.75587625 C615.960938,1.75587625 598.868859,36.8938274 598.607202,37.3205587 C594.999023,43.2050612 590.347747,38.6420127 590.347747,38.6420127 L567.601562,19.3789063 C560.59082,13.7299805 556.395996,13.5683594 549.293945,19.3789063 L525.962891,39.9160156 C525.962891,39.9160156 520.952148,43.7421875 517.778584,36.6316259 L501,1.75587625" id="W" stroke-linecap="round" stroke-linejoin="round"></path> + <rect id="Rectangle-Copy-6" x="388" y="1" width="86" height="42" rx="16"></rect> + <path d="M83.9446745,1.75587625 L10.0566406,1.75587625 C10.0566406,1.75587625 0.71875,1.75587625 1,12.109375 L1,34.6230469 C1,34.6230469 1,42.6354117 11.4355469,42.6354117 L83.9446745,42.6354117" id="C" stroke-linecap="round" stroke-linejoin="round"></path> + </g> + <g id="TIM" stroke-linecap="round" stroke-linejoin="round" transform="translate(152.000000, 0.000000)"> + <g id="T"> + <path d="M22.1583497,23 L65.1749837,23" id="Path-9" transform="translate(43.666667, 23.000000) rotate(-90.000000) translate(-43.666667, -23.000000) "></path> + <path d="M0,0 L83.3147146,0" id="Path-9-Copy-2"></path> + </g> + <path d="M162,44 L162,0 L203.351562,30.9062702 C206.483154,33.13064 209.732422,33.1015719 213.034624,30.9062702 L256.960937,0 L256.960937,44" id="M"></path> + <path d="M97.1318536,23 L140.868147,23" id="I" transform="translate(119.000000, 23.000000) rotate(-90.000000) translate(-119.000000, -23.000000) "></path> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/themes/winning/static/js/main.js b/themes/winning/static/js/main.js new file mode 100644 index 0000000..8f15eee --- /dev/null +++ b/themes/winning/static/js/main.js @@ -0,0 +1,97 @@ +var firstPlay = true; +var hiMessage = document.getElementById("hi-message"); +var timclulow = document.getElementById("timclulow-word"); +var skew = document.getElementById("skew"); +var hand1 = document.getElementById("t-horiz"); +var c = document.getElementById("C"); +var l1 = document.getElementById("L1"); +var l2 = document.getElementById("L2"); +var o = document.getElementById("O"); +var w = document.getElementById("W"); +var eye1 = document.getElementById("t-vert"); +var eye2 = document.getElementById("I"); +var smile = document.getElementById("U"); +var hand2 = document.getElementById("vert2"); +var armandhand = document.getElementById("armandhand"); +var bit = document.getElementById("vert1"); +var shoulder = document.getElementById("angle1"); +var m = document.getElementById("M"); +var progressBar = document.getElementById("progress"); + +var tl = new TimelineMax({onComplete:complete, onUpdate: Progress}); +var firstPlay = true; +tl.pause(); +tl.addLabel("start"); +tl.add(TweenMax.to(bit, 0.3, {ease: Power2.easeIn, repeat:0, opacity:0}), 0); +tl.add(TweenMax.to(hand1, 1, {ease: Power2.easeOut, repeat:0, rotation: -50, x: -69, y: 54, transformOrigin:"top right"}), 0); +tl.add(TweenMax.to(c, 1, {ease: Power2.easeIn, repeat:0, opacity:0, y: 100,}), 0); +tl.add(TweenMax.to(l1, 1, {ease: Power2.easeOut, repeat:0, y: 25, x:53, rotation: 5}), 0); +tl.add(TweenMax.to(l2, 1, {ease: Power2.easeOut, repeat:0, y: 26, x: -15, rotation: -5}), 0); +tl.add(TweenMax.to(o, 1, {ease: Power2.easeIn, repeat:0, opacity:0, y: 100}), 0); +tl.add(TweenMax.to(w, 1, {ease: Power2.easeIn, repeat:0, opacity:0, y: 100}), 0); +tl.add(TweenMax.to(eye1, 2, {ease: Power2.easeOut, repeat:0, x:39, scaleX:0.66}), 0); +tl.add(TweenMax.to(eye2, 2, {ease: Power2.easeOut, repeat:0, x:9, scaleX:0.66}), 0); +tl.add(TweenMax.to(smile, 2, {ease: Power2.easeOut, repeat:0, scaleY:0.7, scaleX: 1.1, x: -3, y: -10}), 0); +tl.add(TweenMax.to(hand2, 2, {ease: Power2.easeInOut, repeat:0, scaleY:0.4, rotation:-200}), 0); +tl.add(TweenMax.to(m, 0.6, {ease: Power2.easeOut, repeat:0, y: 40, x: 140, rotation: -45}), 0); + +var arm1Wave; +var arm2Wave; +var handWave; +function complete() { + hiMessage.classList.add('on'); + tl.addLabel("midpoint"); + tl.add(TweenMax.to(hand2, 0.45, {ease: Power4.easeInOut, rotation:-40, yoyo: true, repeat: 5}), "midpoint"); + tl.add(TweenMax.to(m, 1.8, {ease: Sine.easeInOut, rotation:-80, yoyo: true, repeat: 1, onComplete:backtoStart}), "midpoint"); + tl.add(TweenMax.to(armandhand, 0.45, {transformOrigin:"bottom left", ease: Sine.easeInOut, rotation:32, yoyo: true, repeat: 5}), "midpoint"); + tl.add(TweenMax.to(hand1, 1.8, {transformOrigin:"bottom right", ease: Power1.easeInOut, rotation: -15, yoyo: true}), "midpoint"); + +} + +function repeat(){ + tl.reverse(); +} + +function onLogoHover(){ + if(!tl.isActive()){ + progressBar.classList.add('on'); + skew.classList.add('on'); + tl.timeScale(1).play(); + } +} + +function onLogoOut(){ + // any other actions? +} + +function backtoStart(){ + tl.reverse().timeScale(1.5); + firstPlay = false; +} + +function Progress (){ + var rounded = Math.round( tl.progress() * 10 ) / 10; + if(!firstPlay && !tl.reversed() && (0.2 == rounded)){ + hiMessage.classList.add('on'); + } + if(tl.reversed() && 0.2 == rounded ){ + hiMessage.classList.remove('on'); + } + if(tl.progress() == 0){ + progressBar.classList.remove('on'); + skew.classList.remove('on'); + } +} +document.addEventListener("DOMContentLoaded", function() { + hiMessage.classList.add('transitions'); + skew.addEventListener("mouseenter", onLogoHover); + skew.addEventListener("touchstart", onLogoHover); + skew.addEventListener("mouseleave", onLogoOut); + skew.addEventListener("touchcancel", onLogoOut); + + setTimeout(function(){ + onLogoHover(); + },6000); + +}); + diff --git a/themes/winning/theme.toml b/themes/winning/theme.toml new file mode 100755 index 0000000..bcf7bf2 --- /dev/null +++ b/themes/winning/theme.toml @@ -0,0 +1,15 @@ +# theme.toml template for a Hugo theme +# See https://github.com/gohugoio/hugoThemes#themetoml for an example + +name = "Winning" +license = "MIT" +licenselink = "https://github.com/cssandstuff/winning/blob/master/LICENSE.md" +description = "A theme for creating a simple CV with pdf generation through node-html-pdf" +homepage = "http://cssandstuff.com/" +tags = [] +features = [] +min_version = "0.32.4" + +[author] + name = "Tim Clulow" + homepage = "http://cssandstuff.com/"
\ No newline at end of file |
