cabinSource code for personal website |
| git clone git://git.dimitrijedobrota.com/cabin.git |
| Log | Files | Refs | README | LICENSE | |
index.css (4593B)
1 input, textarea, button, select, a { 2 --webkit-tap-highlight-color: rgba(0,0,0,0); 3 } 4 5 html, body { 6 margin: 0; 7 padding: 0; 8 9 border: 0; 10 font: inherit; 11 vertical-align: baseline; 12 } 13 14 body { 15 font-family: monospace; 16 font-size: 1.2em; 17 } 18 19 #content { 20 background-color: var(--theme_bg0); 21 color: var(--theme_fg0); 22 23 min-width: 100vw; 24 min-height: 100vh; 25 26 padding-top: 2em; 27 padding-bottom: 2em; 28 29 position: relative; 30 display: table; 31 box-sizing: border-box; 32 33 padding-left: 5vw; 34 padding-right: 5vw; 35 } 36 37 hr { 38 color: var(--theme_fgt0_hard); 39 width: 100%; 40 margin-left: auto; 41 margin-right: auto; 42 } 43 44 header, footer { 45 width: 100%; 46 47 display: flex; 48 flex-direction: column; 49 justify-content: center; 50 align-items: center; 51 } 52 53 header nav, 54 footer nav { 55 display: flex; 56 justify-content: space-between; 57 58 width: 100%; 59 60 margin-left: auto; 61 margin-right: auto; 62 /* padding-right: 40px; */ 63 } 64 65 .back { 66 cursor:pointer; 67 } 68 69 main { 70 min-height: 100% ; 71 72 margin-bottom: auto; 73 74 position: relative; 75 display: flex; 76 flex-direction: column; 77 justify-content: center; 78 box-sizing: border-box; 79 } 80 81 p { 82 text-overflow: ellipsis; 83 overflow: hidden; 84 max-width: 80vw; 85 } 86 87 img { 88 width: 100%; 89 height: 100%; 90 } 91 92 pre, code 93 { 94 background-color: var(--theme_bg1); 95 color: var(--theme_fg1); 96 white-space: pre-wrap; 97 white-space: -moz-pre-wrap !important; 98 white-space: -pre-wrap; 99 white-space: -o-pre-wrap; 100 word-wrap: break-word; 101 } 102 103 pre 104 { 105 padding: 0.5em; 106 border-radius: 5px; 107 border: 1px solid var(--theme_fg4); 108 margin-left: 0.5em; 109 margin-right: 0.5em; 110 } 111 112 a { 113 color:var(--theme_blue); 114 text-decoration: none; 115 } 116 117 table 118 { 119 border-collapse: collapse; 120 border-spacing: 0; /* IE 6 */ 121 122 border-bottom: 2pt solid var(--theme_bg3); 123 border-top: 2pt solid var(--theme_bg3); /* The caption on top will not have a bottom-border */ 124 background-color: var(--theme_bg1); /* Does this BG print well? */ 125 126 /* Center */ 127 margin-left: auto; 128 margin-right: auto; 129 } 130 131 thead /* Entire table header */ 132 { 133 border-bottom: 1pt solid var(--theme_bg3); 134 background-color: var(--theme_bg2); /* Does this BG print well? */ 135 } 136 137 tr.header /* Each header row */ 138 { 139 } 140 141 tbody /* Entire table body */ 142 { 143 } 144 145 /* Table body rows */ 146 147 tr { 148 } 149 tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */ 150 { 151 background-color: var(--theme_bg0); 152 } 153 154 /* Odd and even rows */ 155 tr.odd {} 156 tr.even {} 157 158 td, th /* Table cells and table header cells */ 159 { 160 vertical-align: top; /* Word */ 161 vertical-align: baseline; /* Others */ 162 padding-left: 0.5em; 163 padding-right: 0.5em; 164 padding-top: 0.2em; 165 padding-bottom: 0.2em; 166 } 167 168 169 th /* Table header cells */ 170 { 171 font-weight: bold; 172 } 173 174 tfoot /* Table footer (what appears here if caption is on top?) */ 175 { 176 } 177 178 caption /* This is for a table caption tag, not the p.caption Pandoc uses in a div.figure */ 179 { 180 caption-side: top; 181 border: none; 182 font-size: 0.9em; 183 font-style: italic; 184 text-align: center; 185 margin-bottom: 0.3em; /* Good for when on top */ 186 padding-bottom: 0.2em; 187 } 188 189 190 191 pre,blockquote{ 192 page-break-inside:avoid; 193 } 194 195 blockquote{ 196 padding:10px 20px; 197 margin:0 0 1em; 198 font-size: 0.9em; 199 border-left:5px solid var(--theme_fg4); 200 } 201 202 blockquote p:last-child{ 203 margin-bottom:0; 204 } 205 206 blockquote:before, 207 blockquote:after { 208 content:""; 209 } 210 211 212 li 213 { 214 margin-top: 0.5em; /* IE: lack of space above a <li> when the item is inside a <p> */ 215 } 216 217 :not(blockquote) > p, 218 ol, 219 ul { 220 margin-left: 1em; 221 } 222 223 .categories{ 224 display: flex; 225 align-items: baseline; 226 } 227 228 .categories h3{ 229 display: inline-block; 230 } 231 232 .categories p { 233 flex: 1; 234 margin: 0.5em; 235 display: flex; 236 flex-direction: row; 237 flex-flow: wrap; 238 239 } 240 241 .categories a{ 242 color: var(--theme_orange); 243 background-color: var(--theme_bg1); 244 display: inline-block; 245 padding: 0.2em 0.5em 0.2em 0.5em; 246 border-radius: 5px; 247 min-width: 2em; 248 text-align: center; 249 margin: 0.15em; 250 } 251 252 .bottom { 253 margin-top: auto; 254 } 255 256 .index { 257 padding: 0; 258 } 259 260 .index li { 261 display: flex; 262 } 263 264 .index li div:first-child { 265 flex-shrink: 0; 266 margin-right: 0.5em; 267 } 268 269 .small { 270 display: flex; 271 align-items: center; 272 } 273 274 .small img { 275 width: 20px; 276 height: 20px; 277 margin: 5px; 278 } 279 280 img { 281 width: 10em; 282 height: 10em; 283 margin: 5px; 284 } 285 286 h1 { 287 margin-bottom: 0; 288 color: var(--theme_aqua); 289 } 290 291 h2 { 292 margin-bottom: 0; 293 color: var(--theme_purple); 294 } 295 296 h3 { 297 margin-bottom: 0; 298 color: var(--theme_orange); 299 } 300 301 h4 { 302 margin-bottom: 0; 303 color: var(--theme_yellow); 304 } 305 306 h5 { 307 margin-bottom: 0; 308 color: var(--theme_green); 309 } 310 311 h6 { 312 margin-bottom: 0; 313 color: var(--theme_gray); 314 }