style.css
ASCII text
1@import url("willow.css"); 2@import url("redhatmono.css"); 3@import url("gully.css"); 4 5/* Colors */ 6 7:root { 8--primary: #101010; 9--secondary: #f9a911; 10--teriary: #efee00; 11 12--primary-text: #fff; 13 14--code-bg: #151515; 15--code-text: #fff; 16--code-element: #fc63ff; 17--code-attr: #ffc246; 18--code-str: #c0e36e; 19} 20 21/* Styles */ 22 23body { 24background-color: var(--primary); 25color: var(--primary-text); 26font-family: "Gully", sans-serif; 27width: min(896px, 100vw); 28margin: 0 auto; 29padding: 35px; 30min-height: calc(100% - 70px); 31box-shadow: 0px 0px 50px #000; 32} 33 34:root { 35font-family: "Gully", sans-serif; 36} 37 38html { 39background-image: url("./background.webp"); 40background-color: #FFF; 41height: 100%; 42} 43 44:is(h1, h2, h3, h4, h5, h6) { 45font-family: "Willow", sans-serif; 46font-weight: lighter; 47} 48 49:any-link { 50background: linear-gradient( 5190deg, 52rgb(255, 150, 150) 0%, 53rgb(255, 194, 102) 10%, 54rgb(244, 255, 107) 20%, 55rgb(176, 253, 173) 30%, 56rgb(155, 255, 254) 40%, 57rgb(192, 246, 255) 50%, 58rgb(96, 172, 255) 60%, 59rgb(138, 79, 255) 70%, 60rgb(217, 110, 255) 80%, 61rgb(255, 126, 237) 90%, 62rgb(255, 145, 145) 100% 63); 64background-clip: text; 65-webkit-text-fill-color: transparent; 66} 67 68th, 69td { 70text-align: center; 71} 72 73#ThemeList { 74padding: 0; 75margin: 0; 76} 77 78#ThemeList li { 79width: fit-content; 80display: inline-block; 81list-style: none; 82 83} 84 85code { 86background-color: var(--code-bg); 87color: var(--code-text); 88display: inline-block; 89font-family: "RH Mono", monospace; 90} 91 92code.preformatted-text { 93display: block; 94white-space: pre-wrap; 95padding: 5px; 96font-size: small; 97} 98 99[aria-label=breadcrumbs] ol { 100padding: 0; 101} 102 103[aria-label=breadcrumbs] li { 104list-style: none; 105display: inline-block; 106} 107 108[aria-label=breadcrumbs] li + li::before { 109content: " / "; 110} 111 112/* Syntax Highlighting */ 113 114.lang-element { 115font-style: italic; 116color: var(--code-element); 117} 118 119.lang-attribute { 120color: var(--code-attr); 121} 122 123.lang-string { 124color: var(--code-str); 125} 126