repos/kloeckner.com.ar

Backup of part of my webpage
Commits Files Refs README LICENSE
css/article_src.css (164 lines)
   1 #article-title {
   2     /* text-decoration: underline; */
   3     text-align: left;
   4     padding-top: .5em;
   5     padding-bottom: 10px;
   6     font-size: 26px;
   7 }
   8 
   9 ol {
  10     padding-bottom: 1em;
  11 }
  12 
  13 .article-date {
  14     font-size: 16px;
  15     padding-bottom: 2.5em;
  16     /* color: #588B8B; */
  17     color: var(--article-date);
  18     font-style: italic;
  19     font-family: "inconsolata", monospace;
  20 }
  21 
  22 img {
  23     padding-top: .75em;
  24     padding-bottom: .75em;
  25 }
  26 
  27 .centered-img {
  28     display: flex;
  29     justify-content: center; /* Horizontal centering */
  30     align-items: center;     /* Vertical centering */
  31     padding-bottom: .75em;
  32 }
  33 
  34 .side-by-side {
  35     display: flex;
  36     justify-content: space-between; /* Horizontal centering */
  37     align-items: center;     /* Vertical centering */
  38     gap: 4px;
  39     padding-bottom: .75em;
  40 }
  41 
  42 .side-by-side img {
  43   /* width: 49.6%; */
  44 }
  45 
  46 #article-screenshot {
  47     text-align: center;
  48 }
  49 
  50 #article-icon {
  51     /* text-align: center; */
  52     /* float: center; */
  53     /* max-width: 5em; */
  54     /* flex-basis: 40% */
  55     width: 3em;
  56     min-width: 2em;
  57     padding-right: .75em;
  58     display: inline;
  59 }
  60 
  61 #article-icon img {
  62     max-width: 3em;
  63     vertical-align: middle;
  64     padding-top: 0em;
  65 }
  66 
  67 #article-title-with-icon {
  68     /* display: flex; */
  69     align-items: center;
  70     padding-bottom: 1em;
  71     padding-top: 1em;
  72 }
  73 
  74 #article-title-with-icon #article-title {
  75     display: inline;
  76 }
  77 
  78 h2 {
  79     padding-bottom: .5em;
  80     font-size: 22px;
  81 }
  82 h3 { font-size: 1.25em; }
  83 h4 { padding-bottom: .5em; }
  84 em { font-weight: bold; }
  85 
  86 ul {
  87     padding-bottom: 1em;
  88     list-style-position: inside;
  89 }
  90 
  91 blockquote {
  92     border-left: 4px solid var(--grey1);
  93     padding-left: .50em;
  94     font-style: italic;
  95     pre {
  96         font-style: normal;
  97     }
  98 }
  99 
 100 @media (max-width: 800px) {
 101     .article_bottom_bar {
 102         /* width: 45%; */
 103         margin-top: 1em;
 104     }
 105     #article-title {
 106         padding-top: .25em;
 107         /* padding-bottom: .25em; */
 108         font-size: 26px;
 109 
 110     }
 111     #article-title-with-icon {
 112         padding-bottom: .75em;
 113         padding-top: .75em;
 114     }
 115     #article-icon img {
 116         max-width: 2.5em;
 117     }
 118 
 119     #article-icon {
 120         padding-right: .5em
 121     }
 122 
 123     /* .side-by-side { */
 124         /* display: flex; */
 125         /* flex-direction: column; */
 126         /* justify-content: center; */
 127         /* align-items: center; */
 128     /* } */
 129 
 130     /*
 131     .side-by-side img {
 132         width: 100%;
 133     }
 134     */
 135 
 136     img {
 137         width: 100%;
 138     }
 139 
 140 }
 141 
 142 @media (max-width: 400px) {
 143     .article_bottom_bar {
 144         margin-top: .5em;
 145     }
 146     #article-title {
 147         padding-top: .25em;
 148         /* padding-bottom: .5em; */
 149         font-size: 26px;
 150     }
 151     #article-title-with-icon {
 152         padding-bottom: .5em;
 153         padding-top: .5em;
 154     }
 155 
 156     #article-icon img {
 157         max-width: 2em;
 158     }
 159 
 160     #article-icon {
 161         padding-right: .25em
 162     }
 163     h2 { padding-bottom: .5em; }
 164 }