:root{--white:#efefef;--black:#250f03;--orange:#cc7448;--orange-dark:#f0790a;--red:#e34f05;--base-margin:1rem;--base-padding:1rem;--border-radius:0.5rem;--base-font-size:1rem;--font-size-sm:calc(var(--base-font-size)*0.8);--font-size-lg:calc(var(--base-font-size)*1.618);--font-size-xl:calc(var(--base-font-size)*2.618);--font-size-xxl:calc(var(--base-font-size)*4.618);--screen-sm:360px;--screen-md:768px;--screen-lg:1024px;--screen-xl:1200px;--link-hover-time:0.2s}*{box-sizing:border-box}html{scroll-behavior:smooth;margin:0;padding:0;text-shadow:1px 0 0 rgba(255,113,47,.1),-1px 0 1px #ff712f,1px 0 5px rgba(214,107,0,.4),-1px 0 2px rgba(162,8,0,.5),0 1px 10px var(--red)}@media(min-width:768px){:root{body { } nav ul { grid-template-columns: 1fr 1fr; } section#categories-tags { & h2 { padding-left: var(--base-padding); padding-right: var(--base-padding); } }}}@media(min-width:1024px){:root{body { } nav ul { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } section#categories-tags { grid-template-columns: 1fr 1fr 1fr; }}}@media(min-width:1200px){:root{body { }}}body{color:var(--white);background-color:var(--black);font-family:monospace;line-height:1.5;margin:0;max-width:100%;width:100%;display:flex;flex-direction:column;align-items:center;margin:0 auto}header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:100%;min-width:100%;height:2rem;padding:0;margin:0;margin-bottom:var(--base-margin);background-color:var(--orange);border:2px solid var(--orange-dark);& p { font-size: var(--base-font-size); color: var(--black); padding: calc(var(--base-padding) / 4); margin: 0; border-radius: var(--border-radius); text-align: center; } nav { } nav ul { display: flex; align-items:flex-end; justify-content: space-between; & li { list-style-type: none; text-align: center; & a { color: var(--black); } & a:hover { -webkit-animation: hoverTextLink var(--link-hover-time) ease; -moz-animation: hoverTextLink var(--link-hover-time) ease; animation: hoverTextLink var(--link-hover-time) ease; } } }}main,section,#articles article *{display:flex;flex-direction:column;align-items:center;padding:var(--base-padding);width:100%}footer{border-top:1px solid var(--black);margin-top:var(--base-margin)}h1,h2,h3{border-radius:var(--border-radius);width:fit-content}h1{font-size:var(--font-size-xl);text-transform:uppercase;background-color:var(--black);color:var(--white);padding:var(--base-padding)}h2{font-size:var(--font-size-xl);text-transform:uppercase}@media(min-width:1024px){h1{font-size:var(--font-size-xxl)}h2{font-size:var(--font-size-xxl)}}a{color:var(--orange);text-decoration:none;&:hover { color:var(--orange-dark); -webkit-animation:hoverTextLink var(--link-hover-time) ease; -moz-animation:hoverTextLink var(--link-hover-time) ease; animation:hoverTextLink var(--link-hover-time) ease; }}ol li::marker,ul li::marker{font-weight:700}li{color:var(--white)}pre{background-color:var(--black);color:var(--white);border-radius:var(--border-radius);text-align:left;font-style:italic;width:fit-content;margin:0;white-space:pre-wrap;overflow-wrap:break-word}code{display:inline-block;max-width:100%;padding:var(--base-padding);white-space:pre-wrap;overflow-wrap:break-word}figure{background-color:var(--black);color:var(--white);padding:calc(var(--base-padding)*2);border-radius:var(--border-radius);text-align:center;font-style:italic;width:fit-content;margin:0}blockquote::before{content:open-quote}blockquote::after{content:close-quote}blockquote{quotes:"“" "”" "‘" "’";text-align:center;font-style:italic}figcaption{text-align:center;font-style:italic;padding-bottom:var(--base-padding)}.btn{justify-self:flex-start;padding:calc(var(--base-padding)/4);background-color:var(--orange);color:var(--white);border:none;border-radius:var(--border-radius);cursor:pointer;&:hover { background-color:var(--orange-dark); color:var(--white); -webkit-animation:hoverBGLink var(--link-hover-time) ease; -moz-animation:hoverBGLink var(--link-hover-time) ease; animation:hoverBGLink var(--link-hover-time) ease; }}section#articles{display:grid;grid-template-columns:1fr;& article { display: flex; flex-direction: column; align-items: center; padding: var(--base-padding); margin-bottom: calc(var(--base-margin)*5); height: 100%; width: 100%; & .article-text { } & .article-media { background-color: #e34f05; width: 50%; max-width: 50%; min-width: 50%; } & h2 { padding: 0 calc(var(--base-padding)/2); margin-bottom: 0; line-height: 1; text-align: center; } & h2 a { padding: var(--base-padding); border-radius: var(--border-radius); &:hover { color: var(--orange-dark); -webkit-animation: hoveTextLink var(--link-hover-time) ease; -moz-animation: hoverTextLink var(--link-hover-time) ease; animation: hoverTextLink var(--link-hover-time) ease; } } .post-meta { display: grid; grid-template-columns: 1fr; gap: var(--base-padding); & p { padding: calc(var(--base-padding)/2); margin: 0; & span { font-size: var(--font-size-sm); padding: 0 calc(var(--base-padding)/2); } & span:nth-last-child(2) { font-style: italic; padding-top: calc(var(--base-padding) / 2); } & span:nth-last-child(1) { font-weight: 600; } & svg { padding: 0; } } } & .article-summary { & h1, h2, h3, h4, h5, h6, a, img { display: none; } & * { padding: 0; margin: 0; background-color: var(--black); } } @media (min-width: 768px) { .post-meta { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } @media (min-width: 1024px) { .post-meta { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } } @media (min-width: 768px) { & article { flex-direction: row; text-align: left; } & article:nth-child(even) { flex-direction: row-reverse; align-items: flex-start; } } .article-text * { display: block; text-align: left; } & a { width: auto; }}article{padding:var(--base-padding);margin-bottom:calc(var(--base-margin)*5);height:100%;width:100%;& h1 { padding: 0 calc(var(--base-padding)/2); line-height: 1; text-align: center; color: var(--orange); } & .post-meta { display: grid; grid-template-columns: 1fr; gap: var(--base-padding); & p { padding: calc(var(--base-padding)/2); margin: 0; & span { font-size: var(--font-size-sm); padding: 0 calc(var(--base-padding)/2); } & span:nth-last-child(2) { font-style: italic; padding-top: calc(var(--base-padding) / 2); } & span:nth-last-child(1) { font-weight: 600; } & svg { padding: 0; } } }}section#pagination{display:flex;justify-self:center;font-size:var(--base-font-size)}ul.pagination{display:flex;justify-self:center;padding:calc(var(--base-padding)/4);& li.page-item { list-style-type: none; padding: var(--base-padding); font-size: var(--font-size-lg); &.active a { background-color: var(--black); color: var(--orange-dark); cursor: not-allowed; border-bottom: 2px solid var(--orange-dark); } &:hover a { background-color: var(--black); color: var(--orange-dark); } &:hover { background-color: var(--black); color: var(--orange-dark); } &.disabled a { background-color: var(--black); color: var(--white); } &.disabled a { cursor: not-allowed; } }}#categories-tags{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-evenly;padding:0}article{align-items:flex-start}img{border-radius:var(--border-radius);width:100%;max-width:100%;border:2px solid var(--black)}.categories-tags-label{display:flex;justify-content:center;align-items:flex-start}.categories-tags{display:flex;flex-wrap:wrap;flex-direction:row;align-items:flex-start;padding:0;& li { display: flex; justify-content: center; list-style-type: none; background-color: var(--orange); margin: calc(var(--base-margin)/2); margin-left: 0; border-radius: var(--border-radius); width: auto; font-size: var(--font-size-sm); & a { padding: calc(var(--base-padding)/2); } }}.fader{animation-duration:300ms;animation-timing-function:ease-in-out}@keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-in{from{opacity:0}to{opacity:1}}.fader.fade-out{opacity:0;animation-name:fade-out}.fader.fade-in{opacity:1;animation-name:fade-in}@-webkit-keyframes hoverTextLink{0%{color:var(--orange)}100%{color:var(--orange-dark)}}@-moz-keyframes hoverTextLink{0%{color:var(--orange)}100%{color:var(--orange-dark)}}@keyframes hoverTextLink{0%{color:var(--orange)}100%{color:var(--orange-dark)}}@-webkit-keyframes hoverBGLink{0%{background-color:var(--orange);color:var(--white)}100%{background-color:var(--orange-dark);color:var(--white)}}@-moz-keyframes hoverBGLink{0%{background-color:var(--orange);color:var(--white)}100%{background-color:var(--orange-dark);color:var(--white)}}@keyframes hoverBGLink{0%{background-color:var(--orange);color:var(--white)}100%{background-color:var(--orange-dark);color:var(--white)}}footer{padding:var(--base-padding);font-size:var(--font-size-sm);& a:hover { -webkit-animation: hoverTextLink var(--link-hover-time) ease; -moz-animation: hoverTextLink var(--link-hover-time) ease; animation: hoverTextLink var(--link-hover-time) ease; }}