Skip to content

Commit

Permalink
Add responsive styles.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimafisk
jimafisk committed May 24, 2019
1 parent 2856966 commit 582c98b
Show file tree
Hide file tree
Showing 6 changed files with 65 additions and 4 deletions.
2 changes: 1 addition & 1 deletion resources/_gen/assets/css/all.css_d11fe7b62c27961c87ecd0f2490357b9.content
View file
Original file line number Diff line number Diff line change
@@ -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}
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)}}
2 changes: 1 addition & 1 deletion resources/_gen/assets/css/all.css_d11fe7b62c27961c87ecd0f2490357b9.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"Target":"all.min.47d31fe869ce01589f626292fd4cfafbc2c4e5960d6be8fd3162f65d18ba818f.css","MediaType":"text/css","Data":{"Integrity":"sha256-R9Mf6GnOAVifYmKS/Uz6+8LE5ZYNa+j9MWL2XRi6gY8="}}
{"Target":"all.min.203ed7c0a3e0a93ccfa1f7289e8c3470111612c845af56d29aec631d72c1359a.css","MediaType":"text/css","Data":{"Integrity":"sha256-ID7XwKPgqTzPofconow0cBEWEshFr1bSmuxjHXLBNZo="}}
16 changes: 16 additions & 0 deletions themes/plentiform/assets/css/components/footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
5 changes: 5 additions & 0 deletions themes/plentiform/assets/css/components/grid.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,8 @@
#grid img {
max-width: 100%;
}
@media (max-width: 600px) {
#grid {
padding: 40px 0;
}
}
16 changes: 16 additions & 0 deletions themes/plentiform/assets/css/components/list.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
28 changes: 26 additions & 2 deletions themes/plentiform/assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 */
Expand All @@ -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) ". ";
Expand Down Expand Up @@ -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);
}
}

0 comments on commit 582c98b

Please sign in to comment.