global.css (3106B)
1 :root { 2 --background-color: #1F1E1E; 3 --secondary-color: #214ED4; 4 --tertiary-color: #6082E6; 5 --text-color: #F5F5F5; 6 --link-color: #DCE4F9; 7 } 8 9 /* Main */ 10 body { 11 font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; 12 background-color: var(--background-color); 13 padding: 0 3rem 3rem 3rem; 14 color: var(--text-color); 15 margin-right: auto; 16 margin-left: auto; 17 line-height: 200%; 18 font-weight: 400; 19 max-width: 40rem; 20 } 21 22 video, picture, img { 23 width: 100%; 24 } 25 26 p { 27 margin-top: 0; 28 } 29 30 article > p { 31 line-height: 2; 32 margin-top: 0.5rem; 33 margin-bottom: 1rem; 34 } 35 36 a { 37 font-weight: 450; 38 color: var(--link-color); 39 text-decoration-color: var(--tertiary-color); 40 } 41 42 a:hover { 43 text-decoration-color: var(--secondary-color); 44 } 45 46 /* Headings */ 47 h1, 48 h2, 49 h3, 50 h4, 51 h5, 52 h6 { 53 margin: 0; 54 font-weight: 700; 55 position: relative; 56 } 57 58 h1 > a, 59 h2 > a, 60 h3 > a, 61 h4 > a, 62 h5 > a, 63 h6 > a { 64 text-decoration: none; 65 color: inherit; 66 } 67 68 .zola-anchor { 69 opacity: 0; 70 position: absolute; 71 right: 101%; 72 transition: opacity .1s linear; 73 color: var(--tertiary-color); 74 } 75 76 h1:hover > .zola-anchor, 77 h2:hover > .zola-anchor, 78 h3:hover > .zola-anchor, 79 h4:hover > .zola-anchor, 80 h5:hover > .zola-anchor, 81 h6:hover > .zola-anchor { 82 opacity: 100; 83 } 84 85 /* Nav */ 86 nav { 87 width: 100%; 88 display: flex; 89 font-weight: 600; 90 justify-content: space-around; 91 } 92 93 nav > a { 94 color: inherit; 95 text-decoration: none; 96 } 97 98 header { 99 padding-bottom: 0.5rem; 100 } 101 102 /* Code */ 103 pre { 104 padding: 1rem; 105 white-space: pre-wrap; 106 border: 1px solid #CCC; 107 } 108 109 pre > code { 110 border: none; 111 } 112 113 code { 114 font-size: 1rem; 115 padding: 0 4px; 116 border: 1px solid #CCC; 117 } 118 119 /* Quotes */ 120 blockquote { 121 border-left: 5px solid var(--secondary-color); 122 margin: 1.5rem 0; 123 padding: 0 1.5rem; 124 } 125 126 /* Tables */ 127 table { 128 border-collapse: collapse; 129 width: 100%; 130 } 131 132 thead { 133 background-color: var(--tertiary-color); 134 } 135 136 td, th { 137 border: 1px solid var(--text-color); 138 padding: 0.5rem; 139 text-align: left; 140 } 141 142 /* Abbreviations */ 143 abbr { 144 text-decoration-line: underline; 145 text-decoration-style: dotted; 146 text-decoration-color: var(--tertiary-color); 147 text-decoration-thickness: 2px; 148 } 149 150 /* Keyboard */ 151 kbd { 152 color: var(--background-color); 153 font-size: 1.25rem; 154 padding: 0.05rem 0.4rem; 155 text-shadow: 0 1px 0 #FFF; 156 background-color: #E4E6E8; 157 border: 1px solid #726E6E; 158 border-radius: 3px; 159 box-shadow: 0 1px 1px rgba(244,245,245,0.15), inset 0 1px 0 0 #FFF; 160 } 161 162 /* Highlights */ 163 mark { 164 padding: 0.15rem; 165 background-color: var(--tertiary-color); 166 } 167 168 /* Posts and Projects */ 169 .date-list { 170 padding: 0; 171 } 172 173 .date-list > li { 174 display: flex; 175 justify-content: space-between; 176 align-items: center; 177 line-height: 145%; 178 padding: 0 0 1rem 0; 179 } 180 181 .date-list > li > a { 182 flex-basis: 50%; 183 } 184 185 /* Error */ 186 .error { 187 display: grid; 188 place-items: center; 189 width: 100%; 190 height: 100%; 191 } 192 193 .error > svg { 194 max-width: 19rem; 195 } 196 197 .error > strong { 198 font-size: 5rem; 199 margin-bottom: 1.5rem; 200 } 201 202 .error > p { 203 font-size: 2rem; 204 margin: 0; 205 }