git.r.bdr.sh - rbdr/r.bdr.sh/blob - jekyll/css/application.css

   1 body {background-color: #fff}
   2 a.logo {display: block; margin: 1.538em auto 0; max-width: 60em; background-size: 100% 100%; height: 6.667em; background-image: url(/img/unlimited-pizza-animated-logo.gif)}
   3 a.logo span {display:none}
   4 em {color:#99a3a4}
   5
   6 nav ul{
   7   list-style: none;
   8   margin: 1.536em auto;
   9   max-width: 60em;
  10   justify-content: space-between;
  11   display: flex;
  12 }
  13
  14 nav ul li{
  15   display: inline;
  16   font-family: 'Oswald', sans-serif;
  17   text-transform: uppercase;
  18   font-weight: 400;
  19   font-size: 2.769em;
  20   margin: 0.555em 0;
  21 }
  22
  23 nav ul li a{
  24   color: #54575a;
  25   text-decoration: none;
  26 }
  27
  28 nav ul li a:hover,
  29 nav ul li a:active,
  30 nav ul li a:focus {
  31   color: #74777a;
  32   text-decoration: none;
  33 }
  34
  35 .main-container {
  36   margin: 3.077em 0;
  37 }
  38
  39 .postcontainer{
  40   margin: 2em 0;
  41   font-family: 'Signika', sans-serif;
  42   letter-spacing: 0.03em;
  43   font-weight: 300;
  44   color: #03090f;
  45 }
  46
  47 .postcontainer h1,
  48 .postcontainer h2,
  49 .postcontainer h3 {
  50   font-family: 'Oswald', sans-serif;
  51   text-transform: uppercase;
  52   font-weight: 300;
  53 }
  54
  55 .postcontainer h1{
  56   color: #d30058;
  57   margin: 0.666em 1.333em 0;
  58   font-size: 3.692em;
  59   line-height: 1.0833em;
  60 }
  61
  62 .postcontainer h2 {
  63   color:#99a3a4;
  64   font-size: 1.692em;
  65 }
  66
  67 .postcontainer h3{
  68   color:#99a3a4;
  69   font-size: 1.384em;
  70 }
  71
  72 .postcontainer.blue h1 {color: #0081cb}
  73 .postcontainer.green h1 {color: #43da30}
  74 .postcontainer.grey h1 {color: #9e978e}
  75 .postcontainer.yellow h1 {color: #ffda00}
  76 .postcontainer.orange h1 {color: #fd3839}
  77 .postcontainer.red h1 {color: #f32240}
  78 .postcontainer.cyan h1 {color: #74d0eb}
  79 .postcontainer.purple h1 {color: #400098}
  80
  81 .post-meta {
  82   margin: 0.714em 4.643em 4.285em;
  83   font-size: 1.077em;
  84 }
  85
  86 .post-meta > div {
  87   display: inline-block;
  88   font-size: 1.077em;
  89 }
  90
  91 .post-meta .post-date{width: 5.714em}
  92 .post-date a {color:#99a3a4}
  93 .post-tags a {color:#d30058; text-decoration: underline}
  94
  95 .postcontainer.blue .post-tags a {color: #0081cb}
  96 .postcontainer.green .post-tags a {color: #43da30}
  97 .postcontainer.grey .post-tags a {color: #9e978e}
  98 .postcontainer.yellow .post-tags a {color: #e4c50d}
  99 .postcontainer.orange .post-tags a {color: #fd3839}
 100 .postcontainer.red .post-tags a {color: #f32240}
 101 .postcontainer.cyan .post-tags a {color: #74d0eb}
 102 .postcontainer.purple .post-tags a {color: #400098}
 103
 104 .post-image {max-height: 36.923em; background-color: #d30058; margin-top: 3.077em; background-size: auto 100%; overflow: hidden}
 105
 106 .postcontainer.blue .post-image {background-color: #0081cb}
 107 .postcontainer.green .post-image {background-color: #43da30}
 108 .postcontainer.grey .post-image {background-color: #9e978e}
 109 .postcontainer.yellow .post-image {background-color: #ffda00}
 110 .postcontainer.orange .post-image {background-color: #fd3839}
 111 .postcontainer.red .post-image {background-color: #f32240}
 112 .postcontainer.cyan .post-image {background-color: #74d0eb}
 113 .postcontainer.purple .post-image {background-color: #400098}
 114
 115 .postcontent {margin: 1.538em 4.923em;
 116   max-width: 64.615em;
 117 }
 118
 119 .related p, .related li,
 120 .postcontent p, .postcontent li{
 121   font-size: 1.307em;
 122   line-height: 1.6em;
 123   padding: 5px 0;
 124   color: #54575a;
 125   font-family: "Lato", sans-serif;
 126 }
 127
 128 .related p, .postcontent p {
 129   padding: 10px 0;
 130 }
 131
 132 .postcontent a {color: #d30058}
 133 .blue .postcontent a {color: #0081cb}
 134 .green .postcontent a {color: #43da30}
 135 .grey .postcontent a {color: #9e978e}
 136 .yellow .postcontent a {color: #e4c50d}
 137 .orange .postcontent a {color: #fd3839}
 138 .red .postcontent a {color: #f32240}
 139 .cyan .postcontent a {color: #74d0eb}
 140 .purple .postcontent a {color: #400098}
 141
 142 .postcontent strong{
 143   font-weight: 400;
 144 }
 145
 146 .postcontent iframe{
 147   display: block;
 148 }
 149
 150 .go-to-top {color:#99a3a4; margin: 1.538em 3.077em; display: block}
 151
 152 .main-container section,
 153 .main-container aside{ text-align: left}
 154
 155 /* List pages */
 156
 157 .related  {margin: 0 3.077em}
 158 .related ul {margin: 0 1.538em}
 159 .related a {color: #d30058}
 160
 161 .related a.blue {color: #0081cb}
 162 .related a.python,
 163 .related a.green {color: #43da30}
 164 .related a.etc,
 165 .related a.grey {color: #9e978e}
 166 .related a.javascript,
 167 .related a.yellow {color: #e4c50d}
 168 .related a.orange {color: #fd3839}
 169 .related a.ruby,
 170 .related a.red {color: #f32240}
 171 .related a.cyan {color: #74d0eb}
 172 .related a.purple {color: #400098}
 173
 174 .related h1{
 175   font-family: 'Oswald', sans-serif;
 176   text-transform: uppercase;
 177   font-weight: 300;
 178   padding-bottom: 0.666em;
 179   color:#99a3a4;
 180 }
 181
 182 /* Paginator */
 183
 184 .paginator {font-size: 1.077em; margin: 2.857em; font-family: "Lato", sans-serif}
 185 .paginator a{color:#99a3a4}
 186
 187 .postcontent pre code {font-size: 1.333em; line-height: 1.5em}
 188 code {overflow-wrap: normal}
 189
 190 /* Guestbook */
 191 .guestbook-feed, .guestbook-form ul {
 192   list-style: none;
 193 }
 194
 195 .guestbook-form li {
 196   display: block;
 197 }
 198
 199 .guestbook-form .guestbook-label {
 200   width: 8.571em;
 201   float: left;
 202   text-align: right;
 203   padding: 0.5em  1.071em;
 204   text-transform: uppercase;
 205 }
 206
 207 .guestbook-form .guestbook-control {
 208   float: left;
 209 }
 210
 211 .guestbook-form .guestbook-control-group {
 212   clear: both;
 213 }
 214
 215 .guestbook-form .comment-control {
 216   width: 42.857em;
 217   height: 10em;
 218 }
 219
 220 .guestbook-content, .guestbook-form {
 221   clear: both;
 222   padding: 2.142em 0;
 223 }
 224
 225 .guestbook-feed .guestbook-post {
 226   display: block;
 227   border-bottom: 0.071em solid #99a3a4;
 228   padding: 1.071em;
 229 }
 230
 231 .guestbook-post .author {
 232   font-weight: bold;
 233 }
 234
 235 /*
 236  * The Recorder CSS
 237  */
 238 .pepperoni-widget {
 239   justify-content: space-between;
 240   display: flex;
 241 }
 242
 243 .pepperoni-widget .record-button {
 244   display: flex;
 245   font-size: 1.538461em;
 246   padding: 1em;
 247   margin: 1em;
 248   height: 1em;
 249   background-color: #f1f1f1;
 250   cursor: pointer;
 251   transition: background-color 0.2s ease, color 0.2s ease;
 252 }
 253
 254 .record-info {
 255   margin: 1em 0;
 256 }
 257
 258 .pepperoni-widget .record-button.recording {
 259   background-color: #00cc12;
 260   color: white;
 261   padding: 1em 1.1em 1em 0.68em;
 262 }
 263
 264 .pepperoni-widget .record-button:hover {
 265   text-decoration: none;
 266   background-color: #fafafa;
 267 }
 268
 269 .pepperoni-widget .record-button.recording:hover {
 270   background-color: #d30058;
 271   color: #f1f1f1;
 272 }
 273
 274 .pepperoni-widget .record-progress {
 275   justify-content: space-between;
 276   display: flex;
 277   margin: 0.5em 0.76em;
 278 }
 279
 280 .record-progress-bar-container {
 281   background-color: #f1f1f1;
 282   height: 2em;
 283   width: 15.385em;
 284   margin-right: 0.76em;
 285 }
 286
 287 .record-progress-bar {
 288   height: 2em;
 289   background-color: #d30058;
 290   width: 0;
 291 }
 292
 293 .record-clear {
 294   margin-top: 0.1em;
 295   text-transform: uppercase;
 296   font-size: 1em;
 297   width: 4em;
 298   cursor: pointer;
 299 }
 300
 301 .record-clear:hover {
 302   text-decoration: none;
 303 }
 304
 305 .record-preview {
 306   margin: 0.76em;
 307   width: 15.385em;
 308   height: 2em;
 309 }
 310
 311 .guestbook-submit {
 312   border-radius: 0;
 313   border: 0;
 314   background-color: #d30058;
 315   font-family: 'Oswald', sans-serif;
 316   color: #fff;
 317   padding: 1em;
 318   margin-left: 15em;
 319 }
 320
 321 .filter-switches label {
 322   display: inline;
 323   margin-right: 2em;
 324 }