1 line
11 KiB
CSS
1 line
11 KiB
CSS
html,body,h1,h2,h3,h4,h5,h6,a,p,span,em,small,strong,sub,sup,mark,del,ins,strike,abbr,dfn,blockquote,q,cite,code,pre,li,dl,dt,dd,div,section,article,main,aside,nav,header,hgroup,footer,img,figure,figcaption,address,time,audio,video,canvas,iframe,details,summary,fieldset,form,label,legend,table,caption,tbody,tfoot,thead{border:0;padding:0;margin:0}html{box-sizing:border-box;font-size:1em}*,*::before,*::after{box-sizing:inherit}a{text-decoration:none}body{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Ubuntu,Oxygen,Cantarell,open sans,helvetica neue,sans-serif;font-kerning:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialised;font-weight:400;height:100vh;hyphens:auto;line-height:1.62;overflow-wrap:break-word;text-rendering:optimizeLegibility}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:""}h1,h2,h3,h4{font-weight:inherit;line-height:1.2;margin:1.414rem 0 .5rem}hr{box-sizing:content-box;overflow:visible}img,video,figure{display:block;height:auto;max-width:100%}img{border-style:none}main,header,footer{display:block}ol,ul{list-style:none;margin-left:0;margin-right:0;padding:0}p{margin-bottom:1.1rem}pre,code,kbd{font-family:monospace;font-size:1em;white-space:pre-wrap}select{text-transform:none}table,td,tr,th{margin:auto;border-collapse:collapse;border:1px solid var(--primary-text);padding:10px}[hidden]{display:none}[disabled]{cursor:not-allowed}:focus:not(:focus-visible){outline:none}:root{--title: 3.998rem;--subtitle: 2.827rem;--header: 1.999rem;--subheader: 1.414rem;--primary: #ffc107;--primary-dark: #ffa000;--primary-light: #ffecb3;--primary-text: #212121;--secondary-text: #333333;--accent: #536dfe;--divider: #bdbdbd;--white: #fdfdfd;--sm: 576px;--md: 768px;--lg: 992px;--xl: 1200px}a{color:var(--accent)}a:hover{color:var(--primary-dark)}body{color:var(--primary-text)}figcaption{font-size:.9rem;text-align:center}hr{color:var(--divider);opacity:.3;width:25%}i{font-size:var(--subheader)}input,textarea{border:2px solid var(--divider)}input:focus,textarea:focus{border:2px solid var(--accent)}pre{border:1px solid var(--divider);overflow:auto;margin-bottom:1.75rem;padding:1rem 1.75rem;text-align:left;width:100%}textarea{resize:none}.header{background-color:var(--white);box-shadow:0 1px 5px var(--divider);display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr;position:fixed;top:0;width:100%;z-index:999}.header__title{align-items:center;display:flex;font-size:1.1rem;justify-content:flex-start;margin:1rem 4.5rem}.header__title__link{color:var(--primary-dark)}.header__title__logo{max-width:7rem;vertical-align:middle;width:100%}.menu{align-items:center;display:flex;hyphens:none;margin-right:4.5rem}.menu__items{display:flex;justify-content:space-evenly;width:100%}.menu__items__item{margin:0 1.5rem}.menu__items__item__link{color:var(--primary-text);padding:.5rem 0;position:relative}.menu__items__item__link:hover,.menu__items__item__link:focus{color:var(--primary-text)}.menu__items__item__link::before{bottom:0;content:"";display:block;height:3px;position:absolute;transition:all .25s ease-in-out;width:0%}.menu__items__item__link::before{background-color:var(--primary)}.menu__items__item__link:hover::before,.menu__items__item__link:focus::before{opacity:1;width:100%}.menu__items__item__link.active::before{opacity:1;width:100%}.hamburger-menu{display:none;visibility:hidden}.toggle,.hamburger__toggle{user-select:none}.toggle{align-self:center;position:absolute;right:4.5rem}.hamburger__toggle{height:32px;left:-5px;opacity:0;position:absolute;top:-7px;width:40px}.hamburger__items{background-color:var(--white);box-shadow:-1px 2px 5px var(--divider);height:100vh;position:absolute;transform:translate(100%,0);transform-origin:0% 0%;transition:transform .15s ease-in-out;visibility:hidden;width:50vw}.hamburger__items__item{margin:1.75rem 0 0 2.75rem}.hamburger__items__item__link{color:var(--primary-text)}.hamburger__items__item__link:hover{color:var(--primary-dark)}.toggle .hamburger__toggle:checked~.hamburger__items{transform:translate(-70%,0);visibility:visible}.hero{align-content:center;background-attachment:fixed;background-position:100% 20%;background-repeat:no-repeat;background-size:contain;display:flex;height:90vh;justify-content:flex-start;width:100%}.hero__caption{align-items:flex-start;animation:focus .95s cubic-bezier(0.39,0.575,0.565,1) both;display:flex;flex-direction:column;justify-content:center;margin-left:4.5rem}.hero__caption>h1{font-size:var(--title)}.hero__caption>h2{font-size:var(--subheader);margin-top:.45rem}.cta__btn{margin-top:4.5rem}.section{margin:2.75rem 24%;text-justify:distribute}.section__title{padding:0 20%;margin-bottom:1.75rem;text-align:center}.separator{align-items:center;display:flex;font-size:.45rem;justify-content:center}.content{align-items:center;display:flex;flex-direction:column;justify-items:center;min-height:90vh}.card{margin-bottom:1.75rem;max-width:900px;text-justify:distribute;width:70%}.card__header__link{color:var(--primary-text)}.card__header__link:hover{color:var(--primary)}.card__header__author{margin-bottom:.75rem;text-align:left}.post{min-height:90vh;text-justify:distribute}.post__header{display:grid;grid-template-areas:"title" "date" "subtitle" "author";grid-template-rows:auto;justify-content:center;padding:0 20%}.post__title{font-size:var(--header);grid-area:title}.post__subtitle{grid-area:subtitle;margin-top:.75rem;text-align:center}.post__author{grid-area:author;text-align:center}.post__date{grid-area:date;margin-bottom:1.75rem}.post__body{margin:1.75rem 24% .75rem}.post__body>figure{margin-bottom:1.75rem}.post__body>ol{list-style-type:decimal}.post__body>ul{list-style-type:disc}.post__body>blockquote>p{margin:.75rem 24%;text-align:center}.post__body>blockquote>p::before,.post__body>blockquote>p::after{background-color:var(--divider);content:"";display:block;height:1px;width:100%}.post__body>blockquote>p::before{margin-bottom:1rem}.post__body>blockquote>p::after{margin-top:1rem}.post__body>blockquote>p::after{margin-bottom:1.1rem}.post__body>ul,.post__body>ol{margin-left:3.75rem}.post__footer{display:flex;justify-content:center;margin:0 30% .75rem}.pagination{display:flex;justify-content:space-evenly;margin-bottom:2.75rem;margin-top:auto;width:20%}.page-item.disabled>.page-link{cursor:not-allowed;opacity:.7}.page-item.active>.page-link{color:var(--primary-dark)}.page-link{color:var(--primary-text)}.contact{align-items:center;display:flex;flex-direction:column;justify-content:flex-start;min-height:90vh}.contact__content{text-align:center}.contact__form{display:grid;grid-template-areas:"name email" "msg msg" "submit submit";grid-template-columns:1fr;grid-template-rows:repeat(3,auto);margin-top:1.75rem}.contact__field{display:flex;flex-direction:column;margin-bottom:.75rem}.contact__field>label{margin-bottom:.45rem}.contact__field>input{font-size:1rem;height:1.9rem;padding:1rem .75rem;width:20rem}.contact__field>textarea{font-family:sans-serif;font-size:1rem;height:12rem;padding:.75rem;width:100%}.contact__field--name{grid-area:name;margin-right:1rem}.contact__field--email{grid-area:email}.contact__field--msg{grid-area:msg;margin-top:1.75rem}.contact__field--submit{align-content:center;display:grid;grid-area:submit;justify-content:center;margin:1.75rem 0 2.75rem}.submit{font-size:1rem}.footer{background-color:var(--primary-dark);display:grid;grid-auto-flow:row;grid-template-areas:"social social social" "contact contact copy";grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,auto)}.footer__social{align-items:center;background-color:var(--white);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);display:flex;flex-wrap:wrap;grid-area:social;justify-content:space-evenly;padding:1rem 20%}.footer__social__link{background-color:var(--primary-text);border-radius:50%;color:var(--white);font-size:var(--subheader);height:35px;line-height:35px;position:relative;text-align:center;width:35px}.footer__social__link::after{background:0 0;border:1.5px solid var(--primary-text);border-radius:50%;bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0;transition:.3s all}.footer__social__link:hover,.footer__social__link:focus{background-color:transparent;color:var(--secondary-text)}.footer__social__link:hover::after,.footer__social__link:focus::after{border-color:var(--secondary-text);transform:scale(1.5)}.footer__contact{align-items:center;display:flex;grid-area:contact;justify-content:space-around;width:100%}.footer__contact__item{color:var(--white);margin:0}.footer__contact__item>span{color:var(--primary-text);margin-right:.25rem}.footer__contact__link,.footer__contact__link:hover{color:var(--white)}.notfound{align-items:center;display:flex;justify-content:center;min-height:90vh}.notfound__title{font-size:var(--title)}.copy{align-items:center;display:flex;font-size:.95rem;grid-area:copy;justify-content:flex-end;padding:1.75rem}.copy>p{margin:0}.author{font-size:.95rem;font-weight:400}.date{font-size:.95rem;font-weight:400;margin:0 0 .75rem}.tags{display:flex;flex-wrap:wrap;padding:0}.tags__tag{margin-right:.75rem}.ripple-btn{background-color:var(--primary-dark);border:none;color:var(--white);overflow:hidden;padding:1.15rem 4.5rem;position:relative;transform:translate3d(0,0,0);transition:all .25s}.ripple-btn:hover,.ripple-btn:focus{background-color:var(--primary);color:var(--white)}.ripple-btn::after{background-image:radial-gradient( circle,var(--primary-light) 10%,transparent 10.01% );background-position:50%;background-repeat:no-repeat;content:"";display:block;height:100%;left:0;opacity:0;position:absolute;pointer-events:none;top:0;transform:scale(10,10);transition:transform .5s,opacity 1s;width:100%}.ripple-btn:active::after{opacity:.7;transform:scale(0,0);transition:0s}@media only screen and (max-width:1024px){.hero{background-position:20% 0;background-size:cover}.section{margin:2.75rem 19%}.post__body{margin:0 19%}.pagination{width:40%}.footer__contact{align-items:start;flex-direction:column;padding:1.75rem 4.5rem}.footer__contact__item{padding-bottom:1.75rem}.footer__contact__item:last-of-type{padding-bottom:0}.copy{align-items:flex-end;padding-right:4.5rem}}@media only screen and (max-width:992px){.hero__caption>h1{font-size:var(--subtitle)}.hero__caption>h2{font-size:1.25rem}.pagination{width:50%}.footer__social{padding:1rem 0}}@media only screen and (max-width:768px){.header__title{font-size:1rem}.menu{display:none;visibility:hidden}.hamburger-menu{display:grid;visibility:visible}.hamburger__items__item{margin-right:1.75rem}.section{margin:2.75rem 9%}.card{width:85%}.contact__form{grid-template-areas:"name" "email" "msg" "submit"}.contact__field>input{width:25rem}.contact__field--name{margin-right:0}.contact__field--msg{margin-top:0}.contact__field--submit{margin:1.75rem 0}.post__header{padding:0 10%}.post__body{margin:0 9%}.post__body>blockquote>p{margin:0 5%}.post__footer{margin:0 10% .75rem}.pagination{width:70%}}@media only screen and (max-width:576px){.header__title{margin-left:1.75rem}.toggle{right:1.75rem}.hero{background-position:30% 0}.hero__caption{margin:0 1.75rem}.contact__field>input{width:20rem}.card{width:90%}.pagination{width:90%}.footer{grid-template-areas:"social" "contact" "copy";grid-template-columns:1fr}.footer__social__link{height:40px;line-height:40px;margin:.75rem;width:40px}.footer__contact{padding:1.75rem}.copy{justify-content:center;margin-bottom:1.75rem;margin-left:5%;margin-right:5%;padding:0}}@media only screen and (max-width:340px){.contact__field>input{width:17rem}}@keyframes focus{0%{filter:blur(14px);opacity:0}100%{filter:blur(0);opacity:1}} |