kloeckner.com.ar

a backup of my entire webpage
Index Commits Files Refs README LICENSE
css/style.css (7548B)
   1 * {
   2     margin: 0;
   3     padding: 0;
   4     border: 0;
   5     overflow-x: visible;
   6     overflow-y: unset;
   7 }
   8 
   9 /* Avoid showing the background of the scrollbar when the content is small enough */
  10 html {
  11     margin-left: calc(100vw - 100%);
  12     margin-right: 0;
  13     overflow-y: scroll;
  14 }
  15 
  16 body {
  17     color: antiquewhite;
  18     background: #141414;
  19     margin-bottom: 15em;
  20     margin-left: .5em;
  21     margin-right: .5em;
  22     font-size: 16px;
  23     font-family: "inconsolata", monospace, "DejaVu Sans", sans, "Verdana", sans-serif, "Georgia", serif;
  24 }
  25 
  26 header {
  27     color: crimson;
  28 
  29     max-width: 39em;
  30 
  31     margin-left: auto;
  32     margin-right: auto;
  33     margin-top: .5em;
  34     margin-bottom: .25em;
  35 
  36     text-align: center;
  37 
  38     padding-top: .75em;
  39     padding-bottom: .25em;
  40 
  41     border-top: 1em;
  42 }
  43 
  44 .header_flex_div {
  45     display: flex;
  46     justify-content: center;
  47     flex-wrap: wrap;
  48     align-items: baseline;
  49 }
  50 
  51 .header_bottom_bar {
  52     border: 0;
  53     clear:both;
  54 
  55     display:block;
  56 
  57     width: 80%;
  58     max-width: 35em;
  59     height: 0px;
  60     margin-left: auto;
  61     margin-right: auto;
  62     margin-top: .5em;
  63     margin-bottom: .5em;
  64     padding-top: 0;
  65     padding-bottom: 0;
  66     border-top: 1px dashed peru;
  67 }
  68 
  69 #header_link, #header_link_short {
  70     text-decoration: none;
  71     color: inherit;
  72     transition: .75;
  73 
  74     font-family: "inconsolata", monospace, "DejaVu Sans", sans, sans-serif;
  75 }
  76 
  77 #header_link:hover {
  78     color: peru;
  79 }
  80 
  81 #header_title {
  82     margin-bottom: .150em;
  83     font-size: 2.25em;
  84     width: 100%;
  85 }
  86 
  87 article {
  88     color: antiquewhite;
  89 
  90     max-width: 39em;
  91 
  92     margin-left: auto;
  93     margin-right: auto;
  94     margin-bottom: .9em;
  95 
  96     text-align: left;
  97 
  98     padding-left: 0.5em;
  99     padding-right: 0.5em;
 100     padding-top: 1em;
 101     padding-bottom: 1em;
 102 
 103     border-radius: 1em;
 104 }
 105 
 106 .article_bottom_bar {
 107     border: 0;
 108     clear: both;
 109 
 110     display: block;
 111 
 112     width: 60%;
 113     max-width: 20em;
 114     height: 0px;
 115 
 116     margin-left: auto;
 117     margin-right: auto;
 118     margin-top: 1em;
 119     margin-bottom: 0;
 120 
 121     padding-top: 0;
 122     padding-bottom: 0;
 123     /*! border-bottom: dashed; */
 124     border-top: 1px dashed peru;
 125 }
 126 
 127 footer {
 128     text-align: center;
 129     font-size: 0.75em;
 130     a:hover {
 131         text-decoration: none;
 132     }
 133     br {
 134         margin-bottom: 3px;
 135     }
 136 }
 137 
 138 #footer-buttons {
 139     padding: 0;
 140     margin: 0;
 141     border-width: 0;
 142     width: 80px;
 143     opacity: 45%;
 144 }
 145 
 146 #footer-buttons:hover {
 147     opacity: 100%;
 148 }
 149 
 150 .footer-div {
 151     padding: 0em 2em 2.5em 2em;
 152     margin-left: auto;
 153     margin-right:auto;
 154 }
 155 
 156 #index-title, #blog-title {
 157     text-align: center;
 158     color: #DAA520;
 159     padding-top: 0em;
 160     padding-bottom: .5em;
 161     animation: zoom-in-zoom-out 5s ease-in-out infinite;
 162 }
 163 
 164 #blog-title {
 165     animation: none;
 166 }
 167 
 168 img {
 169     overflow: hidden;
 170 
 171     height: 100%;
 172     width: 100%;
 173 
 174     color: black;
 175     background: transparent;
 176 }
 177 
 178 a:visited, a:active, a:link {
 179     color: peru;
 180     text-decoration: none;
 181 }
 182 
 183 a:hover {
 184     color: crimson;
 185     text-decoration: underline;
 186 }
 187 
 188 ol {
 189     list-style-position: inside;
 190 }
 191 
 192 ul {
 193     list-style-type: none; /* Remove bullets */
 194     list-style-position: inside;
 195     list-style: inside;
 196     padding: 0;
 197     padding-bottom: .5em;
 198     margin: 0; /* Remove margins */
 199 }
 200 
 201 .header_buttons {
 202     margin: 0 0 .100em 0;
 203     padding-bottom: 0em;
 204     font-size: 1.5em;
 205     display: flex;
 206     flex-wrap: wrap;
 207     justify-content: center;
 208     list-style-type: none;
 209 }
 210 
 211 h1 { font-size: 1.75em; }
 212 
 213 h2 {
 214     font-size: 1.25em;
 215 
 216     padding-top: 1em;
 217     padding-bottom: .5em;
 218 }
 219 
 220 h3 {
 221     font-size: 1em;
 222     text-align: left;
 223 
 224     padding-top: .5em;
 225     padding-bottom: .5em;
 226 }
 227 
 228 h4 { padding-top: .5em; text-align: left; }
 229 
 230 h5 {
 231     padding-bottom: .25em;
 232     font-size: 1em;
 233 }
 234 
 235 p { padding-bottom: 1em; }
 236 
 237 code {
 238     font-size: 85%;
 239     font-family: "Ubuntu Mono", monospace;
 240     background-color: rgba(110,118,129,0.4);
 241     padding: .1em .4em;
 242     margin: 0;
 243     border-radius: 6px;
 244     white-space: nowrap;
 245 }
 246 
 247 pre {
 248     text-align: left;
 249 
 250     padding-top: .5em;
 251     padding-bottom: .5em;
 252     padding-left: .75em;
 253     padding-right: .75em;
 254     border-radius: .2em;
 255     background-color: #111111;
 256     width: auto;
 257     display: block;
 258     margin-left: auto;
 259     margin-right: auto;
 260     margin-top: .25em;
 261     margin-bottom: 1.25em;
 262     border-width: thin;
 263     border-color: antiquewhite;
 264     border-style: dashed;
 265     /* box-shadow: 5px 5px 7px black; */
 266     overflow: auto;
 267 }
 268 
 269 pre code {
 270     font-size: 1em;
 271     background-color: inherit;
 272     /* background: rgba(0,0,0,0.5); */
 273     padding: 0;
 274     margin: 0;
 275     border-radius: 0;
 276     white-space: inherit;
 277 }
 278 
 279 #command { color: #33ff11; }
 280 #command_sym { color: #ff1694; }
 281 #command_red { color: gold; }
 282 
 283 a.anchor{
 284     display:block;
 285     position: relative;
 286     top: 150px;
 287     visibility: hidden;
 288 }
 289 
 290 hr {
 291     border: 0;
 292     clear:both;
 293 
 294     display:block;
 295 
 296     width: 90%;
 297     height: .1em;
 298     margin-left: auto;
 299     margin-right: auto;
 300     margin-top: 0;
 301     margin-bottom: 0;
 302     padding-top: 0;
 303     padding-bottom: 0;
 304 }
 305 
 306 #go_top {
 307     text-decoration: none;
 308     color: peru;
 309 }
 310 
 311 #go_top:hover {
 312     color: crimson;
 313 }
 314 
 315 #blog_entries {
 316     list-style-type: none; /* Remove bullets */
 317     padding: 0;
 318     padding-bottom: .5em;
 319     text-align: left;
 320 }
 321 
 322 #latest-uploads {
 323     display: flex;
 324     align-items: center;
 325     padding-top: 0em;
 326     padding-bottom: .5em;
 327 }
 328 
 329 #urgent-announcement {
 330     color: antiquewhite;
 331     font-weight: bold;
 332     padding: 0.5em 0em 1em 0em;
 333 }
 334 
 335 #urgent-announcement a {
 336     color: orangered;
 337     text-decoration: underline;
 338 }
 339 
 340 b-time {
 341     font-family: "inconsolata", monospace;
 342 }
 343 
 344 @media (max-width: 800px) {
 345     body {
 346         margin-left: 0em;
 347         margin-right: 0em;
 348     }
 349     header {
 350         padding-top: .5em;
 351         padding-bottom: 0;
 352     }
 353     article {
 354         padding-top: .75em;
 355         padding-bottom: .5em;
 356         margin-bottom: .25em;
 357     }
 358     footer {
 359         padding-top: .5em;
 360     }
 361     .header_flex_div{
 362         flex-direction: column;
 363         align-items: center;
 364     }
 365     .header_buttons{
 366         margin-top: 0;
 367         font-size: 1.75em;
 368         align-self: center;
 369         padding-top: 0em;
 370         padding-bottom: .5em;
 371 
 372         a:hover {
 373             color: peru;
 374         }
 375     }
 376     .header_bottom_bar{
 377         width: 55%;
 378     }
 379     .article_bottom_bar {
 380         width: 40%;
 381         padding-top: .5em;
 382         margin-top: 1em;
 383     }
 384     #header_title {
 385         font-size: 2.50em;
 386         line-height: 1.10em;
 387         padding-bottom: .10em;
 388     }
 389     #index-title {
 390         padding-top: 0;
 391         padding-bottom: .5em;
 392     }
 393     #latest-uploads {
 394         padding-bottom: .25em;
 395     }
 396     #header_link {
 397         display: none;
 398     }
 399     #header_link_short {
 400         display: initial !important;
 401     }
 402 }
 403 
 404 @media (max-width: 400px) {
 405     body {
 406         font-size: 14px;
 407     }
 408     header {
 409         padding-top: 0em;
 410         padding-bottom: 0;
 411         margin-top: .25em;
 412     }
 413     article {
 414         margin-bottom: .25em;
 415     }
 416     p { padding-bottom: .75em; }
 417     #header_title {
 418         font-size: 2.25em;
 419         padding-bottom: 0;
 420     }
 421     .header_bottom_bar {
 422         margin-top: 0;
 423         margin-bottom: 0;
 424     }
 425     .header_buttons {
 426         padding-bottom: .25em;
 427     }
 428     #index-title {
 429         padding-top: .25em;
 430         padding-bottom: .5em;
 431         font-size: 1.5em;
 432     }
 433     #latest-uploads {
 434         padding-bottom: 0;
 435     }
 436     .article_bottom_bar {
 437         padding-top: .25em;
 438         margin-top: .5em;
 439     }
 440     .footer-div {
 441         padding: 0em 2em 1.75em 2em;
 442     }
 443 }
 444 
 445 @media (prefers-color-scheme: light) {
 446     body {
 447         background: white;
 448         color: #000000;
 449     }
 450     article {
 451         color: #000000;
 452     }
 453     #header_link {
 454         color: #CC2936;
 455     }
 456     #header_link:hover {
 457         color: #a04a00;
 458     }
 459     .header_bottom_bar {
 460         border-top: 1px dashed #141414;
 461     }
 462     .article_bottom_bar {
 463         border-top: 1px dashed #141414;
 464     }
 465     a:visited {
 466         color: #a04a00;
 467     }
 468     a:link {
 469         color: #a04a00;
 470     }
 471     a:hover {
 472         color: #CC2936;
 473     }
 474     #index-title {
 475         color: inherit;
 476     }
 477     pre {
 478         background-color: #eee;
 479         border: 3px solid #aaa;
 480         border-radius: 0px;
 481         margin-top: 0;
 482         box-shadow: 0px 0px 0px;
 483     }
 484     #command { color: inherit; }
 485     #command_sym { color: inherit; }
 486     #command_red { color: inherit; }
 487 
 488     #go_top:hover {
 489         color: #CC2936;
 490     }
 491     #go_top {
 492         color: #a04a00;
 493     }
 494     #urgent-announcement {
 495         color: #090909;
 496     }
 497 }
 498 
 499 @keyframes zoom-in-zoom-out {
 500     0% {
 501         transform: scale(1, 1);
 502     }
 503     50% {
 504         transform: scale(1.12, 1.12);
 505     }
 506     100% {
 507         transform: scale(1, 1);
 508     }
 509 }