1 line
6.1 KiB
CSS
1 line
6.1 KiB
CSS
:root{color-scheme:light dark}body{background-color:#383838;color:#fff}body.light{background-color:#fff;color:#000}@media (prefers-color-scheme: light){body{background-color:#fff;color:#000}body.dark{background-color:#383838;color:#fff}}*{box-sizing:border-box;word-break:break-word}html{scroll-behavior:smooth}header,footer{background-color:black;color:white}header{position:sticky;top:0;z-index:9}html,body{height:100%}body{margin:0;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-weight:400;font-style:normal}h1{margin:0rem;margin-bottom:0.5rem;margin-top:0.5rem}p{margin:0.5rem}a{text-decoration:none;color:#35A099}.col-3{flex:25%;width:25%;max-width:25%}.col-4{flex:33.33%;width:33.33%;max-width:33.33%}.col-5{flex:41.66%;width:41.66%;max-width:41.66%}.col-6{flex:50%;width:50%;max-width:50%}.col-7{flex:58.33%;width:58.33%;max-width:58.33%}.col-8{flex:66.66%;width:66.66%;max-width:66.66%}.col-9{flex:75%;width:75%;max-width:75%}.col-10{flex:83.33%;width:83.33%;max-width:83.33%}.col-11{flex:91.66%;width:91.66%;max-width:91.66%}.col-12{flex:100%;width:100%;max-width:100%}[class*="col-"]{float:left}.rotate-45{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.rotate-180{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.row{display:flex;flex-wrap:wrap;flex-flow:column}.header{display:flex;flex-direction:row;width:100%;max-width:680px;margin:auto;padding:10px;font-size:large}.header i{font-size:x-large}.header>.items{display:flex;flex-grow:1;justify-content:right}.header>.items>.item{align-self:center;padding-inline-end:16px}.progress{background:#A0353C;height:5px;width:0%;position:fixed;top:0;z-index:10}#theme-toggler{border:none;background:inherit;color:#35A099;cursor:pointer}.footer{display:flex;flex-direction:column;padding-block-start:16px;font-size:medium;text-align:center}.footer>.social{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.footer>.social i{font-size:x-large}.footer>.social a{padding-inline:6px;color:#A0353C}.footer>.links{display:flex;justify-content:center;flex-wrap:wrap;padding:0}.footer>.links .link{display:flex;padding-inline:16px}.footer>.links .link a{color:inherit}.footer>.links .link:before{content:none}.footer>.copyright{font-size:small}.totop{display:inline-flex;background-color:#A0353C;color:#f2f2f2;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;margin:20px;position:fixed;bottom:0px;right:0px;transition:background-color .3s;z-index:10;visibility:hidden;opacity:0}.totop:hover{filter:brightness(60%)}.totop.show{visibility:visible;opacity:1}.table-of-contents{position:fixed;left:0px;top:0px;height:100%;display:flex;flex-direction:row}.table-of-contents .extend{margin:auto;padding-block:1rem;padding-inline:0.4rem;border-radius:0rem 0.5rem 0.5rem 0rem;background-color:black;cursor:pointer}#TableOfContents{display:none;margin:auto;padding-inline:20px;border-radius:0rem 0.5rem 0.5rem 0rem;background-color:black;font-size:larger}#TableOfContents ul{counter-reset:toc1;list-style-type:none;padding-inline-start:0rem;padding-block:0.5rem}#TableOfContents li{list-style-type:none}#TableOfContents li ul{counter-reset:toc2}#TableOfContents li ul li{list-style-type:none}#TableOfContents li ul li ul{counter-reset:toc3}#TableOfContents li ul li ul li:before{counter-increment:toc3;content:counter(toc1) "." counter(toc2) "." counter(toc3) " "}#TableOfContents li ul li:before{counter-increment:toc2;content:counter(toc1) "." counter(toc2) " "}#TableOfContents li:before{counter-increment:toc1;content:counter(toc1) ". "}#TableOfContents.show{display:block}#content{flex-grow:1;display:flex;flex-direction:column}.title h1{font-size:xxx-large;padding-block-end:3rem}main>.content{padding-top:9rem;padding-bottom:2rem;padding-right:1.5rem;padding-left:1.5rem;width:100%;max-width:680px;margin:0;align-self:center;flex-grow:1}.section{padding-top:2rem;padding-bottom:2.5rem;padding-right:1.5rem;padding-left:1.5rem;width:100%;margin:0;align-self:center;flex:1 0 auto}.section.highlight{background-color:#A0353C}.section>.content{width:100%;max-width:680px;margin:auto;justify-content:center}.hero>.content{display:flex;justify-content:center}.hero>.content>.image{max-width:150px}.hero>.description{padding:10px;position:relative;margin-block-start:50px;border:none}.hero>.description::before,.hero>.description::after{position:absolute;width:33px;height:25px;content:""}.hero>.description::before{left:0;top:0;border-left:3px solid #A0353C;border-top:3px solid #A0353C}.hero>.description::after{right:0;bottom:0;border-right:3px solid #A0353C;border-bottom:3px solid #A0353C}.hero>.content>.heading{flex-grow:1;display:flex;flex-direction:column;justify-content:center;padding-inline-start:25px}.hero>.content .social{display:flex;flex-direction:row;flex-wrap:wrap}.hero>.content .social i{font-size:x-large}.hero>.content .social a{padding-inline:6px;color:#A0353C}.button{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;background-color:transparent;background-image:none;text-transform:none;padding:0}.button:hover{filter:brightness(60%)}.button.filled{background-color:#A0353C;color:white;border:2px solid #A0353C;border-radius:4px;padding:0.5rem 1.5rem;text-align:center;text-decoration:none;display:inline-block;font-size:1rem}.button.outlined{background-color:transparent;color:#A0353C;border:2px solid #A0353C;border-radius:4px;padding:0.5rem 1.5rem;text-align:center;text-decoration:none;display:inline-block;font-size:1rem}.button.outlined:hover{background-color:#A0353C;color:white}img{max-width:100%;height:auto;margin:auto;object-fit:contain;border-radius:6px}.avatar{border-radius:50%;border:3px solid #A0353C;object-fit:cover}.caption{text-align:center;color:gray;font-size:small;margin:0px}
|