From 582c98bd8804bdfef1a49847c296ffb656af127e Mon Sep 17 00:00:00 2001 From: jimafisk Date: Fri, 24 May 2019 13:45:00 -0400 Subject: [PATCH] Add responsive styles. --- ...s_d11fe7b62c27961c87ecd0f2490357b9.content | 2 +- ....css_d11fe7b62c27961c87ecd0f2490357b9.json | 2 +- .../assets/css/components/footer.css | 16 +++++++++++ .../plentiform/assets/css/components/grid.css | 5 ++++ .../plentiform/assets/css/components/list.css | 16 +++++++++++ themes/plentiform/assets/css/main.css | 28 +++++++++++++++++-- 6 files changed, 65 insertions(+), 4 deletions(-) diff --git a/resources/_gen/assets/css/all.css_d11fe7b62c27961c87ecd0f2490357b9.content b/resources/_gen/assets/css/all.css_d11fe7b62c27961c87ecd0f2490357b9.content index b767ed5..7bec6b0 100644 --- a/resources/_gen/assets/css/all.css_d11fe7b62c27961c87ecd0f2490357b9.content +++ b/resources/_gen/assets/css/all.css_d11fe7b62c27961c87ecd0f2490357b9.content @@ -1 +1 @@ -nav{box-shadow:0 2px 2px -2px rgba(0,0,0,.2);position:fixed;top:0;left:0;width:100%;background-color:var(--color-base-lightest);height:65px;z-index:1}#content{margin-top:65px}nav .container{display:grid;grid-template-columns:1fr auto auto;align-items:center;align-self:center;height:100%}nav li{display:inline-block;list-style:none}nav ul a{text-decoration:none;margin-left:20px;color:var(--color-base-dark)}nav ul a:hover{color:var(--color-primary-dark)}#hamburger{display:none;width:35px;height:30px;position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer}#hamburger span{display:block;position:absolute;height:5px;width:100%;background-image:linear-gradient(to right,var(--color-accent-dark),var(--color-accent));opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}#hamburger span:nth-child(1){top:0}#hamburger span:nth-child(2),#hamburger span:nth-child(3){top:12px}#hamburger span:nth-child(4){top:24px}#toggle:checked~#hamburger span:nth-child(1){top:18px;width:0%;left:50%}#toggle:checked~#hamburger span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}#toggle:checked~#hamburger span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}#toggle:checked~#hamburger span:nth-child(4){top:18px;width:0%;left:50%}#toggle:checked~#main-menu{display:block;position:absolute;top:100%;right:0;background:var(--color-base-lightest);width:100%;text-align:center;border-top:1px solid var(--color-base-lighter);box-shadow:0 2px 2px -2px rgba(0,0,0,.2);padding:10px}#toggle:checked~#main-menu li{display:block;padding:10px}#toggle:checked~#main-menu li .button{padding:0;background-image:none}#toggle:checked~#main-menu li .button:hover{color:var(--color-primary-dark);box-shadow:none}@media(max-width:600px){#main-menu{display:none}#hamburger{display:block}}#list .inner{box-shadow:2px 2px 4px rgba(0,0,0,.2);border-radius:5px;padding:100px 0;display:grid;grid-template-columns:1fr 1fr;justify-items:center;background-color:var(--color-base-lightest)}#list .title{grid-column-start:1;grid-column-end:3;text-align:center}#list ul{grid-row:2}#list .container{position:relative}#list .container:before{content:"";display:block;width:500px;height:500px;position:absolute;z-index:-1;top:-20px;left:75px;transform:rotate(5deg);background:var(--color-accent)}#list .container:after{content:"";display:block;width:500px;height:500px;position:absolute;z-index:-1;bottom:-20px;right:75px;transform:rotate(5deg);background:var(--color-primary)}#how-to{display:flex;align-items:center;padding:8vw 0}#how-to li{color:var(--color-base-dark)}#hero{background-image:linear-gradient(to right,var(--color-primary),var(--color-secondary));color:var(--color-base-lightest);height:35vw;display:flex;align-items:center}#hero .container{flex:1;font-weight:900;font-size:2rem;margin-top:-100px}#hero a{color:var(--color-accent)}@media(max-width:950px){#hero .container{margin-top:0;font-size:1.5rem}}@media(max-width:450px){#hero .container{font-size:1rem}}#grid{padding:100px 0}#grid .container{display:grid;grid-template-columns:1fr 1fr 1fr}#grid h2,#grid .description{grid-column-start:1;grid-column-end:4;text-align:center}#grid .description{color:var(--color-base-dark);margin-bottom:20px}#grid a{align-self:center;margin:4vw}#grid img{max-width:100%}footer{background-color:var(--color-base-dark);padding:100px 0}footer .container{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;align-items:center}footer ul{border-left:1px solid #505050;padding-left:20px}footer li{list-style:none;margin-bottom:20px}footer li:last-of-type{margin-bottom:0}footer a{color:var(--color-base-lightest);text-decoration:none}footer .brand svg text{fill:var(--color-base-lightest)}footer .slogan{color:var(--color-base-light)}#footer-bottom{background-color:var(--color-base-darker);color:var(--color-base-lightest);padding:10px 0;text-align:center}#diagram{text-align:center;margin-top:-115px;margin-bottom:-40px}#diagram svg{max-width:80%}@media(max-width:950px){#diagram{margin-top:40px}#diagram svg g#api-text{fill:#ababab}#diagram svg{max-width:100%}}@media(max-width:450px){#diagram{margin-top:-40px;margin-bottom:-80px}}:root{--color-primary: #9741eb;--color-primary-dark: #5e14a7;--color-secondary: #ce35e7;--color-accent: #ff9358;--color-accent-dark: #ff6c1b;--color-base-lightest: #ffffff;--color-base-lighter: #f6f6f6;--color-base-light: #c5c5c5;--color-base-dark: #3c3c3c;--color-base-darker: #343434;--color-base-darkest: #000000}:root{--font-main: 'Lato', sans-serif}:root{--container-width: 1200px;--inner-width: 925px}html,body{font-family:var(--font-main);margin:0;height:100%}.container{max-width:var(--container-width);margin:0 auto;padding:0 20px}.inner{max-width:var(--inner-width);margin:0 auto}ul,ol{margin:0;padding:0}pre{font-size:1.15em;background-color:var(--color-base-dark);background-color:var(--color-primary);color:var(--color-base-lightest);display:inline-block;padding:3px 5px}ol.counter{list-style:none;counter-reset:plentiform-counter}ol.counter li{counter-increment:plentiform-counter;margin-bottom:4vw}ol.counter li::before{content:counter(plentiform-counter) ". ";color:var(--color-base-lightest);background-color:var(--color-primary);padding:11px 6px 10px 15px;margin-right:10px;border-radius:50%;font-weight:700;font-size:1.5rem}ul.checkmark{list-style-image:url(/images/checkmark.svg);list-style-position:inside}ul.checkmark li{margin-bottom:20px}.button{padding:8px 15px;background-image:linear-gradient(to right,var(--color-accent-dark),var(--color-accent))}.button:hover{box-shadow:.5rem .5rem 0 0 rgba(113,91,210,.1);background-image:linear-gradient(to right,var(--color-primary-dark),var(--color-primary));color:var(--color-base-lightest)}.title{text-align:center;margin-bottom:2.5vw}.title h2{display:inline-block;border-bottom:4px solid var(--color-accent)}.rainbow-text:hover{background:linear-gradient(to right,var(--color-accent-dark),var(--color-accent),var(--color-secondary),var(--color-primary),var(--color-primary-dark),var(--color-accent),var(--color-accent-dark));background-clip:border-box;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hidden{display:none} \ No newline at end of file +nav{box-shadow:0 2px 2px -2px rgba(0,0,0,.2);position:fixed;top:0;left:0;width:100%;background-color:var(--color-base-lightest);height:65px;z-index:1}#content{margin-top:65px}nav .container{display:grid;grid-template-columns:1fr auto auto;align-items:center;align-self:center;height:100%}nav li{display:inline-block;list-style:none}nav ul a{text-decoration:none;margin-left:20px;color:var(--color-base-dark)}nav ul a:hover{color:var(--color-primary-dark)}#hamburger{display:none;width:35px;height:30px;position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer}#hamburger span{display:block;position:absolute;height:5px;width:100%;background-image:linear-gradient(to right,var(--color-accent-dark),var(--color-accent));opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}#hamburger span:nth-child(1){top:0}#hamburger span:nth-child(2),#hamburger span:nth-child(3){top:12px}#hamburger span:nth-child(4){top:24px}#toggle:checked~#hamburger span:nth-child(1){top:18px;width:0%;left:50%}#toggle:checked~#hamburger span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}#toggle:checked~#hamburger span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}#toggle:checked~#hamburger span:nth-child(4){top:18px;width:0%;left:50%}#toggle:checked~#main-menu{display:block;position:absolute;top:100%;right:0;background:var(--color-base-lightest);width:100%;text-align:center;border-top:1px solid var(--color-base-lighter);box-shadow:0 2px 2px -2px rgba(0,0,0,.2);padding:10px}#toggle:checked~#main-menu li{display:block;padding:10px}#toggle:checked~#main-menu li .button{padding:0;background-image:none}#toggle:checked~#main-menu li .button:hover{color:var(--color-primary-dark);box-shadow:none}@media(max-width:600px){#main-menu{display:none}#hamburger{display:block}}#list .inner{box-shadow:2px 2px 4px rgba(0,0,0,.2);border-radius:5px;padding:100px 0;display:grid;grid-template-columns:1fr 1fr;justify-items:center;background-color:var(--color-base-lightest)}#list .title{grid-column-start:1;grid-column-end:3;text-align:center}#list ul{grid-row:2}#list .container{position:relative}#list .container:before{content:"";display:block;width:500px;height:500px;position:absolute;z-index:-1;top:-20px;left:75px;transform:rotate(5deg);background:var(--color-accent)}#list .container:after{content:"";display:block;width:500px;height:500px;position:absolute;z-index:-1;bottom:-20px;right:75px;transform:rotate(5deg);background:var(--color-primary)}@media(max-width:600px){#list .container:before,#list .container:after{display:none}#list .inner{padding:20px}}@media(max-width:500px){#list .inner{display:block;text-align:center}}#how-to{display:flex;align-items:center;padding:8vw 0}#how-to li{color:var(--color-base-dark)}#hero{background-image:linear-gradient(to right,var(--color-primary),var(--color-secondary));color:var(--color-base-lightest);height:35vw;display:flex;align-items:center}#hero .container{flex:1;font-weight:900;font-size:2rem;margin-top:-100px}#hero a{color:var(--color-accent)}@media(max-width:950px){#hero .container{margin-top:0;font-size:1.5rem}}@media(max-width:450px){#hero .container{font-size:1rem}}#grid{padding:100px 0}#grid .container{display:grid;grid-template-columns:1fr 1fr 1fr}#grid h2,#grid .description{grid-column-start:1;grid-column-end:4;text-align:center}#grid .description{color:var(--color-base-dark);margin-bottom:20px}#grid a{align-self:center;margin:4vw}#grid img{max-width:100%}@media(max-width:600px){#grid{padding:40px 0}}footer{background-color:var(--color-base-dark);padding:100px 0}footer .container{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;align-items:center}footer ul{border-left:1px solid #505050;padding-left:20px}footer li{list-style:none;margin-bottom:20px}footer li:last-of-type{margin-bottom:0}footer a{color:var(--color-base-lightest);text-decoration:none}footer .brand svg text{fill:var(--color-base-lightest)}footer .slogan{color:var(--color-base-light)}#footer-bottom{background-color:var(--color-base-darker);color:var(--color-base-lightest);padding:10px 0;text-align:center}@media(max-width:500px){footer{padding:40px 0}footer .container{display:block;text-align:center}footer ul{border:none;padding:none}footer li:last-of-type{margin-bottom:20px}}#diagram{text-align:center;margin-top:-115px;margin-bottom:-40px}#diagram svg{max-width:80%}@media(max-width:950px){#diagram{margin-top:40px}#diagram svg g#api-text{fill:#ababab}#diagram svg{max-width:100%}}@media(max-width:450px){#diagram{margin-top:-40px;margin-bottom:-80px}}:root{--color-primary: #9741eb;--color-primary-dark: #5e14a7;--color-secondary: #ce35e7;--color-accent: #ff9358;--color-accent-dark: #ff6c1b;--color-base-lightest: #ffffff;--color-base-lighter: #f6f6f6;--color-base-light: #c5c5c5;--color-base-dark: #3c3c3c;--color-base-darker: #343434;--color-base-darkest: #000000}:root{--font-main: 'Lato', sans-serif}:root{--container-width: 1200px;--inner-width: 925px}html,body{font-family:var(--font-main);margin:0;height:100%}#content{font-size:1.25rem;font-weight:300}.container{max-width:var(--container-width);margin:0 auto;padding:0 20px}.inner{max-width:var(--inner-width);margin:0 auto}ul,ol{margin:0;padding:0}pre{background-color:var(--color-base-dark);background-color:var(--color-primary);color:var(--color-base-lightest);display:inline-block;padding:3px 5px;margin:0;white-space:normal}ol.counter{list-style:none;counter-reset:plentiform-counter}ol.counter li{counter-increment:plentiform-counter;line-height:2rem;margin-bottom:5vw}ol.counter li::before{content:counter(plentiform-counter) ". ";color:var(--color-base-lightest);background-color:var(--color-primary);padding:11px 6px 10px 15px;margin-right:10px;border-radius:50%;font-weight:700;font-size:1.5rem}ul.checkmark{list-style-image:url(/images/checkmark.svg);list-style-position:inside}ul.checkmark li{margin-bottom:20px}.button{padding:8px 15px;background-image:linear-gradient(to right,var(--color-accent-dark),var(--color-accent))}.button:hover{box-shadow:.5rem .5rem 0 0 rgba(113,91,210,.1);background-image:linear-gradient(to right,var(--color-primary-dark),var(--color-primary));color:var(--color-base-lightest)}.title{text-align:center;margin-bottom:2.5vw}.title h2{display:inline-block;border-bottom:4px solid var(--color-accent)}.rainbow-text:hover{background:linear-gradient(to right,var(--color-accent-dark),var(--color-accent),var(--color-secondary),var(--color-primary),var(--color-primary-dark),var(--color-accent),var(--color-accent-dark));background-clip:border-box;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hidden{display:none}@media(max-width:950px){#content{font-size:1rem}}@media(max-width:600px){ol.counter li::before{padding:11px 6px 10px 13px;font-size:1rem}pre{padding:0;background-color:inherit;color:var(--color-primary-dark)}} \ No newline at end of file diff --git a/resources/_gen/assets/css/all.css_d11fe7b62c27961c87ecd0f2490357b9.json b/resources/_gen/assets/css/all.css_d11fe7b62c27961c87ecd0f2490357b9.json index 253d23f..ab099c8 100644 --- a/resources/_gen/assets/css/all.css_d11fe7b62c27961c87ecd0f2490357b9.json +++ b/resources/_gen/assets/css/all.css_d11fe7b62c27961c87ecd0f2490357b9.json @@ -1 +1 @@ -{"Target":"all.min.47d31fe869ce01589f626292fd4cfafbc2c4e5960d6be8fd3162f65d18ba818f.css","MediaType":"text/css","Data":{"Integrity":"sha256-R9Mf6GnOAVifYmKS/Uz6+8LE5ZYNa+j9MWL2XRi6gY8="}} \ No newline at end of file +{"Target":"all.min.203ed7c0a3e0a93ccfa1f7289e8c3470111612c845af56d29aec631d72c1359a.css","MediaType":"text/css","Data":{"Integrity":"sha256-ID7XwKPgqTzPofconow0cBEWEshFr1bSmuxjHXLBNZo="}} \ No newline at end of file diff --git a/themes/plentiform/assets/css/components/footer.css b/themes/plentiform/assets/css/components/footer.css index 98f4b59..9b88c84 100644 --- a/themes/plentiform/assets/css/components/footer.css +++ b/themes/plentiform/assets/css/components/footer.css @@ -34,3 +34,19 @@ footer .slogan { padding: 10px 0; text-align: center; } +@media (max-width: 500px) { + footer { + padding: 40px 0; + } + footer .container { + display: block; + text-align: center; + } + footer ul { + border: none; + padding: none; + } + footer li:last-of-type { + margin-bottom: 20px; + } +} diff --git a/themes/plentiform/assets/css/components/grid.css b/themes/plentiform/assets/css/components/grid.css index af8a330..19db246 100644 --- a/themes/plentiform/assets/css/components/grid.css +++ b/themes/plentiform/assets/css/components/grid.css @@ -22,3 +22,8 @@ #grid img { max-width: 100%; } +@media (max-width: 600px) { + #grid { + padding: 40px 0; + } +} diff --git a/themes/plentiform/assets/css/components/list.css b/themes/plentiform/assets/css/components/list.css index c58e898..866b0a0 100644 --- a/themes/plentiform/assets/css/components/list.css +++ b/themes/plentiform/assets/css/components/list.css @@ -43,3 +43,19 @@ transform: rotate(5deg); background: var(--color-primary); } + +@media (max-width: 600px) { + #list .container:before, + #list .container:after { + display: none; + } + #list .inner { + padding: 20px; + } +} +@media (max-width: 500px) { + #list .inner { + display: block; + text-align: center; + } +} diff --git a/themes/plentiform/assets/css/main.css b/themes/plentiform/assets/css/main.css index 6866171..6faf640 100644 --- a/themes/plentiform/assets/css/main.css +++ b/themes/plentiform/assets/css/main.css @@ -30,6 +30,10 @@ html, body { margin: 0; height: 100%; } +#content { + font-size: 1.25rem; + font-weight: 300; +} .container { max-width: var(--container-width); margin: 0 auto; @@ -44,12 +48,13 @@ ul,ol { padding: 0; } pre { - font-size: 1.15em; background-color: var(--color-base-dark); background-color: var(--color-primary); color: var(--color-base-lightest); display: inline-block; padding: 3px 5px; + margin: 0; + white-space: normal; } /* Elements */ @@ -59,7 +64,8 @@ ol.counter { } ol.counter li { counter-increment: plentiform-counter; - margin-bottom: 4vw; + line-height: 2rem; + margin-bottom: 5vw; } ol.counter li::before { content: counter(plentiform-counter) ". "; @@ -104,3 +110,21 @@ ul.checkmark li { .hidden { display: none; } + +/* Responsive */ +@media (max-width: 950px) { + #content { + font-size: 1rem; + } +} +@media (max-width: 600px) { + ol.counter li::before { + padding: 11px 6px 10px 13px; + font-size: 1rem; + } + pre { + padding: 0; + background-color: inherit; + color: var(--color-primary-dark); + } +}