application.css (4537B)
1 :root { 2 /* Colors based off of manoj dark. */ 3 --meta-color: #FFC1C1; 4 --meta-color-alt: #6495ed; 5 --fg-color: #f5f5f5; 6 --fg-color1: #00FFFF; 7 --fg-color2: #FF6F24; 8 --fg-color3: #63b8ff; 9 --fg-color4: #f08080; 10 --header-color: #00fa9a; 11 --header-color2: #eedd82; 12 --header-color3: #98fb98; 13 --header-color4: #7fffd4; 14 --emph-color: #8470ff; 15 --special-color: #fa8072; 16 --bg-color: #000000; 17 --keyword-color: #b0c4de; 18 } 19 20 /* TODO fix nav bar width not jiving with window width. */ 21 main { 22 margin: auto; 23 width: 75%; 24 } 25 26 /* unvisited link */ 27 a:link { 28 color: var(--fg-color1); 29 text-shadow: 0 0 1px var(--fg-color1); 30 text-decoration: none; 31 } 32 33 /* visited link */ 34 a:visited { 35 color: var(--emph-color); 36 text-shadow: 0 0 1px var(--emph-color); 37 } 38 39 /* mouse over link */ 40 a:hover, a:active { 41 text-decoration: underline; 42 } 43 44 /* Mostly org titles. */ 45 h1 { 46 color: var(--header-color); 47 text-shadow: 0 0 1px var(--header-color); 48 } 49 50 /* Do not display figure number */ 51 .figure-number { 52 display: none; 53 } 54 55 h2 { 56 margin: 0 auto; 57 padding: 0; 58 color: var(--header-color2); 59 text-shadow: 0 0 1px var(--header-color2); 60 } 61 62 h3 { 63 margin: 0 auto; 64 padding: 0; 65 color: var(--fg-color1); 66 text-shadow: 0 0 1px var(--fg-color1); 67 } 68 69 h4 { 70 padding: 0; 71 margin: 0; 72 margin-top: 0; 73 color: var(--fg-color2); 74 text-shadow: 0 0 1px var(--fg-color2); 75 font-size: 0.8em; 76 } 77 78 h5 { 79 padding: 0; 80 margin: 0; 81 margin-top: 0; 82 color: var(--header-color3); 83 text-shadow: 0 0 1px var(--header-color3); 84 font-size: 0.8em; 85 } 86 87 h6 { 88 padding: 0; 89 margin: 0; 90 margin-top: 0; 91 color: var(--header-color4); 92 text-shadow: 0 0 1px var(--header-color4); 93 font-size: 0.8em; 94 } 95 96 nav { 97 text-align: center; 98 clear: both; 99 margin: auto; 100 max-width: 75%; 101 border: 0.1em solid white; 102 } 103 104 nav:hover { 105 box-shadow: 0 0 0.2em 0.2em #0ff; 106 } 107 108 nav li { 109 display: inline-block; 110 list-style: none; 111 padding: 0.5em; 112 font-size: 1em; 113 } 114 115 nav a { 116 display: inline-block; 117 } 118 nav a:hover { 119 transform: scale(1.5); 120 transition: transform 0.3s; 121 text-decoration: underline; 122 } 123 124 nav img { 125 width: 1em; 126 float: left; 127 } 128 129 nav ul { 130 padding: 0; 131 margin: 0.5em; 132 } 133 134 nav h4 { 135 display: inline-block; 136 font-size: 1em; 137 } 138 139 @media (min-width: 1200px) { 140 nav { 141 float: left; 142 width: 10%; 143 position: fixed; 144 text-align: left; 145 font-size: large; 146 } 147 nav:before { 148 content: "Navigation"; 149 text-align: center; 150 display: block; 151 font-size: 1vw; 152 color: violet; 153 text-decoration: underline; 154 margin: 0.5em; 155 } 156 nav li { 157 display: block; 158 margin: 0.5em auto; 159 } 160 nav h4 { 161 display: inline-block; 162 font-size: 1em; 163 } 164 /* Tree view with UL inside a nav. */ 165 nav ul, nav ul ul { 166 list-style: none; 167 margin: 0; 168 padding: 0; 169 } 170 nav ul ul { 171 margin-left: 10px; 172 } 173 nav ul li a { 174 margin-bottom: 0.5em; 175 } 176 nav ul li { 177 margin: 0; 178 padding: 0 7px; 179 line-height: 20px; 180 color: #369; 181 font-weight: bold; 182 border-left:0.1em solid var(--fg-color); 183 } 184 nav ul li:last-child { 185 border-left: none; 186 } 187 nav ul li:before { 188 position:relative; 189 top:-0.3em; 190 height:1em; 191 width:12px; 192 color:white; 193 border-bottom:1px solid var(--fg-color); 194 content:""; 195 display:inline-block; 196 left:-7px; 197 } 198 nav ul li:last-child:before { 199 border-left:1px solid var(--fg-color); 200 } 201 } 202 203 .ewin { 204 width: 100%; 205 } 206 207 p { 208 margin: 0 auto; 209 margin-top: 2em; 210 padding: 0; 211 color: var(--fg-color); 212 text-shadow: 0 0 1px var(--fg-color); 213 } 214 215 body { 216 font-size: 14pt; 217 border: 1.5em solid transparent; 218 border-image: url(/res/2008.webp) 19 12 round; 219 padding: 0; 220 /* positioning */ 221 margin: 0 auto; 222 background-repeat: no-repeat; /* Do not repeat the image */ 223 background-size: cover; /* Resize the background image to cover the entire container */ 224 font-family: monospace; 225 -webkit-font-smoothing: none; 226 -moz-font-smoothing: never; 227 color: var(--fg-color); 228 background-color: black; 229 } 230 231 html { 232 z-index: 10; 233 } 234 235 footer { 236 margin-top: auto; 237 margin: auto; 238 margin-top: 75px; 239 width: 75%; 240 } 241 242 /* Table stuff. */ 243 244 table { 245 width: 100%; 246 } 247 248 table, th, td { 249 border: 0.1em solid var(--emph-color); 250 border-style: dashed; 251 } 252 253 td { 254 text-align: left; 255 } 256 257 tr:first-child td { 258 vertical-align: center; 259 } 260 261 li { 262 color: var(--fg-color); 263 text-shadow: 0 0 1px var(--fg-color); 264 } 265 266 th, td { 267 margin: 0 auto; 268 padding: 0; 269 text-shadow: 0 0 1px var(--fg-color); 270 } 271 272 th { 273 color: var(--header-color2); 274 text-shadow: 0 0 1px var(--header-color2); 275 } 276