From 1b795eae1a429f583bb76700de1de533c6839e8c Mon Sep 17 00:00:00 2001 From: Ben Brignell Date: Sat, 28 Apr 2018 22:28:30 +0100 Subject: [PATCH] removed dots and centralised grid background --- _includes/main.css | 2 +- _sass/_base.scss | 1 - _sass/_scratch.scss | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/_includes/main.css b/_includes/main.css index c51f479..53c8614 100644 --- a/_includes/main.css +++ b/_includes/main.css @@ -1 +1 @@ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:system-ui;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Segoe UI Light"),local("Ubuntu Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Segoe UI Bold"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Tahoma Bold")}html,.root{font-size:19px;line-height:29px}body,.article{font-size:1em;line-height:1.52631579em;color:#333;font-family:system-ui,Helvetica,"Helvetica Neue","Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:bold}h1,.h1{font-size:2.63157895em;line-height:1.16em;margin-top:0.58em;margin-bottom:0.58em}@media (min-width: 920px){h1,.h1{font-size:4.21052632em;line-height:1.0875em;margin-top:0.3625em;margin-bottom:0.725em}}h2,.h2{font-size:1.63157895em;margin-top:0.93548387em;margin-bottom:0em}@media (min-width: 920px){h2,.h2{font-size:2.63157895em;line-height:1.16em;margin-top:0.58em;margin-bottom:0.58em}}h3,.h3{font-size:1em;margin-top:1.52631579em;margin-bottom:0em}@media (min-width: 920px){h3,.h3{font-size:1.63157895em;line-height:1.87096774em;margin-top:0.93548387em;margin-bottom:0em}}h4,.h4{font-size:1em;margin-top:1.52631579em;margin-bottom:0em}@media (min-width: 920px){h4,.h4{font-size:1em;line-height:1.52631579em;margin-top:1.52631579em;margin-bottom:0em}}h1.intro{font-size:3em;line-height:1.0;display:block;float:left}@supports (display: grid){h1.intro{grid-column:auto / span 10}}@media (min-width: 700px){h1.intro{font-size:6em}}.wrap-string{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}p,ul,ol,pre,table,blockquote{margin-top:0em;margin-bottom:1.52631579em}p{max-width:40em}ul ul,ol ol,ul ol,ol ul{margin-top:0em;margin-bottom:0em}hr,.hr{border:1px solid;margin:-1px 0}a,b,i,strong,em,small,code{line-height:0}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{height:100%}.footer{background:#e4e1cd;background-image:url(/images/dot-pattern.svg)}a{color:#333;text-decoration:underline;text-decoration-skip:ink}a:hover{color:#0015dd;text-decoration:none}.tiles{grid-row-gap:0}.group:before,.group:after{content:"";display:table}.group:after{clear:both}.group{zoom:1}::-moz-selection{background:rgba(51,51,51,0.8);color:#fff;text-shadow:none}::selection{background:rgba(51,51,51,0.8);color:#fff;text-shadow:none}ul.filter-tags{padding:0}ul.filter-tags li{list-style:none;float:left}input[type="checkbox"]{position:absolute;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input[type="checkbox"]+label{display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all 0.3s ease-in-out;padding:.4em .8em;color:#333;background-color:#e6e6e6;border:solid #333;border-width:2px;margin-right:-2px;margin-bottom:-2px}input[type="checkbox"]+label:hover{background-color:#b3b3b3}input[type="checkbox"]+label:active,input[type="checkbox"]+label:focus{background-color:#f7d708}input[type="checkbox"]:checked+label{background-color:#f7d708;color:#333;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input[type="checkbox"]:checked+label:hover,input[type="checkbox"]:checked+label:focus{background-color:#f7d708;color:#333}input[type="checkbox"]:active{background-color:red}hr{display:block;height:1px;border:0;border-top:1px solid #333;margin:1em 0;padding:0}.site-logo:hover,.logo:hover,.view-toggle:hover,.view-toggle-list:hover{transform:scale(1.05);transition:all .2s ease-in-out}.site-nav,div.filters{grid-column:auto / span 12}div.filters span{display:block;width:100%}.full,.post-header{grid-column:auto / span 12}.tdn{text-decoration:none}.two-thirds{grid-column:auto / span 12}@media (min-width: 700px){.two-thirds{grid-column:auto / span 8}}.three-up{grid-column:auto / span 6;position:relative}@media (min-width: 700px){.three-up{grid-column:auto / span 3;margin-bottom:1.6em}}.info-block,.post-content,article{grid-column:auto / span 12;position:relative}@media (min-width: 700px){.info-block,.post-content,article{grid-column:auto / span 8}}aside{grid-column:auto / span 12}@media (min-width: 700px){aside{grid-column:auto / span 4}}p.source{display:block;border-bottom:solid 1px #333;font-weight:bold}.arrow:after{content:"❯";padding:1em 0.2em;font-size:120%;position:relative;top:0.1em}.arrow:hover:after{color:#0015dd}.info-block{padding-top:1em;padding-bottom:1.6em}.info-block:last-child{margin-bottom:0em}.info-block:after{content:"";background:#333;position:absolute;top:0;left:0;height:12px;width:8em}@media (min-width: 700px){.info-block:after{width:12em}}header.site-header{background:#f7d708;height:auto;margin-bottom:2em}div.page-content{background:#fff}ol.principles{padding-left:1em}ol.cards{position:relative;margin-left:-0.6em}ol.cards li{counter-increment:step-counter;margin:0 0 0.125em 0}.sort-label{display:block;float:left;margin-top:0;user-select:none}@media (min-width: 700px){.sort-label{margin-top:-1.6em;display:inline}}.sort{display:inline-block;float:left;cursor:pointer;user-select:none;transition:all 0.3s ease-in-out;margin-right:-2px;width:auto !important}.sort-arrow{height:0.8em;width:auto;display:none}.sort.asc .sort-arrow{transform:rotate(0deg);transition:all 0.3s ease;display:inline-block}.sort.desc .sort-arrow{transform:rotate(180deg);transition:all 0.3s ease;display:inline-block}img.circle{border-radius:50%}.bold{font-weight:bold}.tile{padding:0.6em 0.2em;border-top:solid 8px #333;grid-column:auto / span 12;overflow:hidden;transition:background-color 0.3s ease}@media (min-width: 700px){.tile{grid-column:auto / span 6}}@media (min-width: 920px){.tile{grid-column:auto / span 4}}a.view-toggle{width:48px;height:48px;float:right;background:url(/images/list-view.svg) no-repeat top left;float:right}a.view-toggle-list{width:48px;height:48px;float:right;background:url(/images/grid-view.svg) no-repeat top left}.tile-list{padding:0.6em 0.2em;border-top:solid 8px #333;grid-column:auto / span 12;overflow:hidden;transition:background-color 0.3s ease}input.search{height:2.6em;color:#333;font-weight:bold;border:solid 2px #333;padding-left:1em;width:100%}input.search{grid-column:auto / span 12}@media (min-width: 700px){input.search{grid-column:auto / span 6}}@media (min-width: 920px){input.search{grid-column:auto / span 8}}@supports (display: grid){div.toggle{display:none}@media (min-width: 700px){div.toggle{grid-column:auto / span 6;display:block}}@media (min-width: 920px){div.toggle{grid-column:auto / span 4}}}div.hide-large{display:inline-block}@media (min-width: 700px){div.hide-large{display:none}}input.search::placeholder{color:#333;font-weight:normal}.tile a,.tile-list a{text-decoration:none}.tile:last-child{background:transparent}input[type=text],.subscribe-input{padding:0.4em 1em;border:solid 2px #333;color:#333;height:48px !important}input[type=text]:focus{border-color:#333}.btn,input[type=submit]{padding:0.4em 0.6em;background:#f7d708;border:0 none;cursor:pointer;-webkit-user-select:none;user-select:none;border:solid 2px #333}.btn-secondary{background:#e6e6e6}input[type=submit]:hover,.btn:hover{background:#f9df39}.icon{width:120px;height:auto;margin-bottom:-2.8em}.site-footer{background:#fff}header.example-header{grid-column:1 / -1;border-bottom:solid 3px #333;margin-bottom:1.4em}.help-footer{grid-column:1 / -1;background:#fdf7ce;border-top:solid 12px #f7d708;border-bottom:solid 2px #f7d708;padding:1em;overflow:hidden}pre,code{display:block;background:#e6e6e6;padding:1em}ul.logos{list-style:none;padding-left:0}ul.logos li{float:left;width:48px;height:48px;margin-right:1em;margin-bottom:1em}ul.logos img{width:100%;height:auto}.onclick-menu{position:absolute;display:inline-block;width:44px;height:44px;right:0;font-weight:bold;text-align:center}.onclick-menu:before{content:"…"}.onclick-menu:focus{pointer-events:none}.onclick-menu:focus .onclick-menu-content{opacity:1;visibility:visible;pointer-events:auto}.onclick-menu-content{position:absolute;z-index:1;opacity:0;visibility:hidden;transition:visibility 0.5s;list-style:none;margin:0;padding:0;float:right;text-align:right;min-width:8em;position:absolute;right:0}.onclick-menu-content li{background:none;padding:0.4em;border-top:1px #e6e6e6 solid;background:#fff}.onclick-menu-content li:first-child{border-top:none}input,button,submit{border:none}.subscribe-input,.subscribe-btn{display:block;width:100%}@media (min-width: 700px){.subscribe-input,.subscribe-btn{display:inline-block}}@media (min-width: 700px){.subscribe-input{width:64%;border-right:0 !important}}.subscribe-btn{height:48px;margin-top:0.4em}@media (min-width: 700px){.subscribe-btn{width:auto;margin-top:0;margin-left:-0.4em}}header h1{margin-top:0.6em}.credit{border-bottom:solid 4px #333;padding-bottom:1em}.grid-background{background:url(/images/cross-grid.svg);padding:1em 0 0.6em 0}@media (min-width: 700px){.grid-background{height:158px;padding-bottom:none}}@media (min-width: 920px){.grid-background{height:236px}}a.site-logo img{float:left;width:100%;height:auto}a.site-logo{width:4em;height:4em;float:left}a.site-logo:hover{transform:scale(1.05);transition:all .2s ease-in-out}nav{grid-column:auto / span 12}ul.nav{width:auto;padding:0;list-style:none;font-weight:bold;margin:0.4em 0 0 4em;max-width:380px}@media (min-width: 1100px){ul.nav{float:right;margin-top:0;max-width:none}}li.nav__item{float:left;margin-right:0.8em;transition:background-color .3s ease-in-out;cursor:pointer}@media (min-width: 1100px){li.nav__item{height:4em;padding:0 0.4em 0 0.4em;margin-right:0}}li.nav__item:last-child{margin-right:0}li.nav__item:hover{background:#f9e146;transition:background-color .3s ease-in-out}@media (min-width: 1100px){li.nav__item:hover{border-bottom:solid #333 4px}}li.nav__item:hover a{color:#333}@media (min-width: 1100px){li.nav__item:hover a{margin-top:2px}}li.nav__item:last-child{margin-right:0}li.nav__item a{text-decoration:none}@media (min-width: 1100px){li.nav__item a{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.63157895em}}@media (min-width: 1100px){body.about li.about,body.create li.create,body.examples li.examples,body.contribute li.contribute,body.book li.book{border-bottom:solid #333 4px}}@media (min-width: 1100px){body.about li.about a,body.create li.create a,body.examples li.examples a,body.contribute li.contribute a,body.book li.book a{margin-top:2px}}.pbn{padding-bottom:0 !important}.wrapper{width:85%;max-width:1080px;margin:0 auto;padding-bottom:1em;zoom:1;display:grid;grid-template-columns:repeat(12, 1fr);grid-gap:1.4}@media (min-width: 700px){.wrapper{grid-column-gap:1.4em;grid-row-gap:0}}.two-up{grid-column:auto / span 12}@media (min-width: 920px){.two-up{grid-column:auto / span 6}}.tiles{grid-row-gap:0}.tile:hover{background:#f7d708}.tile a:hover,.tile-list a:hover{color:#333}body.examples .tile a:visited{color:gray}.ghost a:visited{color:#333 !important}body.examples .tile a:visited:hover{color:#333}a.full-link{display:inline-block;height:100%;width:100%;line-height:inherit}.ghost{border:dotted 8px #333;padding-left:1em;padding-right:1em}.tile h2{display:block;margin:0}div#carbonads a{text-decoration:none}.carbon-img{float:left;margin-right:1em;margin-bottom:0.6em}.carbon-poweredby{display:block;margin-top:1em;font-size:0.8em}.sponsor-image{width:100%;height:auto}@media (min-width: 700px){.sponsor-image{width:60%}}.mbm{margin-bottom:0.6em}.mbn{margin-bottom:0}.mtn{margin-top:0}.lhs{line-height:1.4}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0} +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:system-ui;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Segoe UI Light"),local("Ubuntu Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Segoe UI Bold"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Tahoma Bold")}html,.root{font-size:19px;line-height:29px}body,.article{font-size:1em;line-height:1.52631579em;color:#333;font-family:system-ui,Helvetica,"Helvetica Neue","Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:bold}h1,.h1{font-size:2.63157895em;line-height:1.16em;margin-top:0.58em;margin-bottom:0.58em}@media (min-width: 920px){h1,.h1{font-size:4.21052632em;line-height:1.0875em;margin-top:0.3625em;margin-bottom:0.725em}}h2,.h2{font-size:1.63157895em;margin-top:0.93548387em;margin-bottom:0em}@media (min-width: 920px){h2,.h2{font-size:2.63157895em;line-height:1.16em;margin-top:0.58em;margin-bottom:0.58em}}h3,.h3{font-size:1em;margin-top:1.52631579em;margin-bottom:0em}@media (min-width: 920px){h3,.h3{font-size:1.63157895em;line-height:1.87096774em;margin-top:0.93548387em;margin-bottom:0em}}h4,.h4{font-size:1em;margin-top:1.52631579em;margin-bottom:0em}@media (min-width: 920px){h4,.h4{font-size:1em;line-height:1.52631579em;margin-top:1.52631579em;margin-bottom:0em}}h1.intro{font-size:3em;line-height:1.0;display:block;float:left}@supports (display: grid){h1.intro{grid-column:auto / span 10}}@media (min-width: 700px){h1.intro{font-size:6em}}.wrap-string{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}p,ul,ol,pre,table,blockquote{margin-top:0em;margin-bottom:1.52631579em}p{max-width:40em}ul ul,ol ol,ul ol,ol ul{margin-top:0em;margin-bottom:0em}hr,.hr{border:1px solid;margin:-1px 0}a,b,i,strong,em,small,code{line-height:0}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{height:100%}.footer{background:#e4e1cd}a{color:#333;text-decoration:underline;text-decoration-skip:ink}a:hover{color:#0015dd;text-decoration:none}.tiles{grid-row-gap:0}.group:before,.group:after{content:"";display:table}.group:after{clear:both}.group{zoom:1}::-moz-selection{background:rgba(51,51,51,0.8);color:#fff;text-shadow:none}::selection{background:rgba(51,51,51,0.8);color:#fff;text-shadow:none}ul.filter-tags{padding:0}ul.filter-tags li{list-style:none;float:left}input[type="checkbox"]{position:absolute;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input[type="checkbox"]+label{display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all 0.3s ease-in-out;padding:.4em .8em;color:#333;background-color:#e6e6e6;border:solid #333;border-width:2px;margin-right:-2px;margin-bottom:-2px}input[type="checkbox"]+label:hover{background-color:#b3b3b3}input[type="checkbox"]+label:active,input[type="checkbox"]+label:focus{background-color:#f7d708}input[type="checkbox"]:checked+label{background-color:#f7d708;color:#333;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input[type="checkbox"]:checked+label:hover,input[type="checkbox"]:checked+label:focus{background-color:#f7d708;color:#333}input[type="checkbox"]:active{background-color:red}hr{display:block;height:1px;border:0;border-top:1px solid #333;margin:1em 0;padding:0}.site-logo:hover,.logo:hover,.view-toggle:hover,.view-toggle-list:hover{transform:scale(1.05);transition:all .2s ease-in-out}.site-nav,div.filters{grid-column:auto / span 12}div.filters span{display:block;width:100%}.full,.post-header{grid-column:auto / span 12}.tdn{text-decoration:none}.two-thirds{grid-column:auto / span 12}@media (min-width: 700px){.two-thirds{grid-column:auto / span 8}}.three-up{grid-column:auto / span 6;position:relative}@media (min-width: 700px){.three-up{grid-column:auto / span 3;margin-bottom:1.6em}}.info-block,.post-content,article{grid-column:auto / span 12;position:relative}@media (min-width: 700px){.info-block,.post-content,article{grid-column:auto / span 8}}aside{grid-column:auto / span 12}@media (min-width: 700px){aside{grid-column:auto / span 4}}p.source{display:block;border-bottom:solid 1px #333;font-weight:bold}.arrow:after{content:"❯";padding:1em 0.2em;font-size:120%;position:relative;top:0.1em}.arrow:hover:after{color:#0015dd}.info-block{padding-top:1em;padding-bottom:1.6em}.info-block:last-child{margin-bottom:0em}.info-block:after{content:"";background:#333;position:absolute;top:0;left:0;height:12px;width:8em}@media (min-width: 700px){.info-block:after{width:12em}}header.site-header{background:#f7d708;height:auto;margin-bottom:2em}div.page-content{background:#fff}ol.principles{padding-left:1em}ol.cards{position:relative;margin-left:-0.6em}ol.cards li{counter-increment:step-counter;margin:0 0 0.125em 0}.sort-label{display:block;float:left;margin-top:0;user-select:none}@media (min-width: 700px){.sort-label{margin-top:-1.6em;display:inline}}.sort{display:inline-block;float:left;cursor:pointer;user-select:none;transition:all 0.3s ease-in-out;margin-right:-2px;width:auto !important}.sort-arrow{height:0.8em;width:auto;display:none}.sort.asc .sort-arrow{transform:rotate(0deg);transition:all 0.3s ease;display:inline-block}.sort.desc .sort-arrow{transform:rotate(180deg);transition:all 0.3s ease;display:inline-block}img.circle{border-radius:50%}.bold{font-weight:bold}.tile{padding:0.6em 0.2em;border-top:solid 8px #333;grid-column:auto / span 12;overflow:hidden;transition:background-color 0.3s ease}@media (min-width: 700px){.tile{grid-column:auto / span 6}}@media (min-width: 920px){.tile{grid-column:auto / span 4}}a.view-toggle{width:48px;height:48px;float:right;background:url(/images/list-view.svg) no-repeat top left;float:right}a.view-toggle-list{width:48px;height:48px;float:right;background:url(/images/grid-view.svg) no-repeat top left}.tile-list{padding:0.6em 0.2em;border-top:solid 8px #333;grid-column:auto / span 12;overflow:hidden;transition:background-color 0.3s ease}input.search{height:2.6em;color:#333;font-weight:bold;border:solid 2px #333;padding-left:1em;width:100%}input.search{grid-column:auto / span 12}@media (min-width: 700px){input.search{grid-column:auto / span 6}}@media (min-width: 920px){input.search{grid-column:auto / span 8}}@supports (display: grid){div.toggle{display:none}@media (min-width: 700px){div.toggle{grid-column:auto / span 6;display:block}}@media (min-width: 920px){div.toggle{grid-column:auto / span 4}}}div.hide-large{display:inline-block}@media (min-width: 700px){div.hide-large{display:none}}input.search::placeholder{color:#333;font-weight:normal}.tile a,.tile-list a{text-decoration:none}.tile:last-child{background:transparent}input[type=text],.subscribe-input{padding:0.4em 1em;border:solid 2px #333;color:#333;height:48px !important}input[type=text]:focus{border-color:#333}.btn,input[type=submit]{padding:0.4em 0.6em;background:#f7d708;border:0 none;cursor:pointer;-webkit-user-select:none;user-select:none;border:solid 2px #333}.btn-secondary{background:#e6e6e6}input[type=submit]:hover,.btn:hover{background:#f9df39}.icon{width:120px;height:auto;margin-bottom:-2.8em}.site-footer{background:#fff}header.example-header{grid-column:1 / -1;border-bottom:solid 3px #333;margin-bottom:1.4em}.help-footer{grid-column:1 / -1;background:#fdf7ce;border-top:solid 12px #f7d708;border-bottom:solid 2px #f7d708;padding:1em;overflow:hidden}pre,code{display:block;background:#e6e6e6;padding:1em}ul.logos{list-style:none;padding-left:0}ul.logos li{float:left;width:48px;height:48px;margin-right:1em;margin-bottom:1em}ul.logos img{width:100%;height:auto}.onclick-menu{position:absolute;display:inline-block;width:44px;height:44px;right:0;font-weight:bold;text-align:center}.onclick-menu:before{content:"…"}.onclick-menu:focus{pointer-events:none}.onclick-menu:focus .onclick-menu-content{opacity:1;visibility:visible;pointer-events:auto}.onclick-menu-content{position:absolute;z-index:1;opacity:0;visibility:hidden;transition:visibility 0.5s;list-style:none;margin:0;padding:0;float:right;text-align:right;min-width:8em;position:absolute;right:0}.onclick-menu-content li{background:none;padding:0.4em;border-top:1px #e6e6e6 solid;background:#fff}.onclick-menu-content li:first-child{border-top:none}input,button,submit{border:none}.subscribe-input,.subscribe-btn{display:block;width:100%}@media (min-width: 700px){.subscribe-input,.subscribe-btn{display:inline-block}}@media (min-width: 700px){.subscribe-input{width:64%;border-right:0 !important}}.subscribe-btn{height:48px;margin-top:0.4em}@media (min-width: 700px){.subscribe-btn{width:auto;margin-top:0;margin-left:-0.4em}}header h1{margin-top:0.6em}.credit{border-bottom:solid 4px #333;padding-bottom:1em}.grid-background{background:url(/images/cross-grid.svg) center top;padding:1em 0 0.6em 0}@media (min-width: 700px){.grid-background{height:158px;padding-bottom:none}}@media (min-width: 920px){.grid-background{height:236px}}a.site-logo img{float:left;width:100%;height:auto}a.site-logo{width:4em;height:4em;float:left}a.site-logo:hover{transform:scale(1.05);transition:all .2s ease-in-out}nav{grid-column:auto / span 12}ul.nav{width:auto;padding:0;list-style:none;font-weight:bold;margin:0.4em 0 0 4em;max-width:380px}@media (min-width: 1100px){ul.nav{float:right;margin-top:0;max-width:none}}li.nav__item{float:left;margin-right:0.8em;transition:background-color .3s ease-in-out;cursor:pointer}@media (min-width: 1100px){li.nav__item{height:4em;padding:0 0.4em 0 0.4em;margin-right:0}}li.nav__item:last-child{margin-right:0}li.nav__item:hover{background:#f9e146;transition:background-color .3s ease-in-out}@media (min-width: 1100px){li.nav__item:hover{border-bottom:solid #333 4px}}li.nav__item:hover a{color:#333}@media (min-width: 1100px){li.nav__item:hover a{margin-top:2px}}li.nav__item:last-child{margin-right:0}li.nav__item a{text-decoration:none}@media (min-width: 1100px){li.nav__item a{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.63157895em}}@media (min-width: 1100px){body.about li.about,body.create li.create,body.examples li.examples,body.contribute li.contribute,body.book li.book{border-bottom:solid #333 4px}}@media (min-width: 1100px){body.about li.about a,body.create li.create a,body.examples li.examples a,body.contribute li.contribute a,body.book li.book a{margin-top:2px}}.pbn{padding-bottom:0 !important}.wrapper{width:85%;max-width:1080px;margin:0 auto;padding-bottom:1em;zoom:1;display:grid;grid-template-columns:repeat(12, 1fr);grid-gap:1.4}@media (min-width: 700px){.wrapper{grid-column-gap:1.4em;grid-row-gap:0}}.two-up{grid-column:auto / span 12}@media (min-width: 920px){.two-up{grid-column:auto / span 6}}.tiles{grid-row-gap:0}.tile:hover{background:#f7d708}.tile a:hover,.tile-list a:hover{color:#333}body.examples .tile a:visited{color:gray}.ghost a:visited{color:#333 !important}body.examples .tile a:visited:hover{color:#333}a.full-link{display:inline-block;height:100%;width:100%;line-height:inherit}.ghost{border:dotted 8px #333;padding-left:1em;padding-right:1em}.tile h2{display:block;margin:0}div#carbonads a{text-decoration:none}.carbon-img{float:left;margin-right:1em;margin-bottom:0.6em}.carbon-poweredby{display:block;margin-top:1em;font-size:0.8em}.sponsor-image{width:100%;height:auto}@media (min-width: 700px){.sponsor-image{width:60%}}.mbm{margin-bottom:0.6em}.mbn{margin-bottom:0}.mtn{margin-top:0}.lhs{line-height:1.4}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0} diff --git a/_sass/_base.scss b/_sass/_base.scss index 0b0e52e..459408c 100755 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -11,7 +11,6 @@ body, html { .footer { background: $linen; - background-image: url(/images/dot-pattern.svg); } diff --git a/_sass/_scratch.scss b/_sass/_scratch.scss index 6c0dd56..752e95b 100644 --- a/_sass/_scratch.scss +++ b/_sass/_scratch.scss @@ -496,7 +496,7 @@ header h1 { padding-bottom: 1em; } .grid-background { - background: url(/images/cross-grid.svg); + background: url(/images/cross-grid.svg) center top; padding: 1em 0 0.6em 0; @media (min-width: $bp-medium) { height: 158px;