assets/style.css

   1 /*
   2  * pages list
   3  */
   4
   5 .pages-list {
   6   font-size: 0.9em;
   7   max-width: 800px;
   8   margin: 60px auto;
   9   overflow: hidden;
  10 }
  11
  12 .pages-list a {
  13   display: block;
  14   padding: 6px 0;
  15   text-align: left;
  16   float: left;
  17   width: 44%;
  18   margin: 0 3%;
  19   box-shadow: none;
  20   transition: all 100ms linear;
  21 }
  22
  23 .pages-list a .title,
  24 .pages-list a .date {
  25   display: block;
  26 }
  27
  28 .pages-list a .title {
  29   font-weight: bold;
  30   color: #111;
  31   float: left;
  32 }
  33
  34 .pages-list a .date {
  35   color: #aaa;
  36   font-size: 0.9em;
  37   float: right;
  38 }
  39
  40 .pages-list a:hover .title,
  41 .pages-list a:focus .title {
  42   color: dodgerblue;
  43 }
  44
  45 /*
  46  * post headline
  47  */
  48
  49 .post-headline.-cheatsheet .prelude {
  50   color: #111;
  51   font-size: 0.85em;
  52   text-transform: uppercase;
  53   letter-spacing: 2px;
  54   margin-bottom: 0;
  55   font-weight: bold;
  56 }
  57
  58 .post-headline.-cheatsheet .prelude span:before {
  59   content: 'Cheatsheet for';
  60 }
  61
  62 @media (min-width: 769px) {
  63   .post-headline.-cheatsheet .prelude {
  64     max-width: 230px;
  65     margin-left: auto;
  66     margin-right: auto;
  67   }
  68   .post-headline.-cheatsheet .prelude span {
  69     display: inline-block;
  70   }
  71 }
  72
  73 .post-headline.-cheatsheet h1 {
  74   color: #111;
  75   font-size: 3.5em;
  76   text-shadow: 2px 2px 0 white, 3px 3px 0 #ddd;
  77   margin-top: 20px;
  78 }
  79
  80 /*
  81  * about the site
  82  */
  83
  84 .about-the-site {
  85   margin-top: 8em;
  86 }
  87
  88 .about-the-site .back {
  89   margin-right: 0;
  90 }
  91
  92 /*
  93  * markdown
  94  */
  95
  96 @media (min-width: 768px) {
  97   h2 {
  98     margin-top: 3em;
  99   }
 100 }
 101
 102 /*
 103  * grey code
 104  */
 105
 106 .greycode td:first-child code,
 107 .greycode th:first-child code {
 108   background: white;
 109   padding: 6px 8px 5px 8px;
 110   border-radius: 3px;
 111 }
 112
 113 .greycode td:first-child code + em,
 114 .greycode th:first-child code + em {
 115   color: #808890;
 116   font-size: 0.9em;
 117   margin: 0 5px;
 118 }
 119
 120 .greycode a {
 121   margin: 0 5px;
 122 }
 123
 124 @media (min-width: 768px) {
 125   table.greycode {
 126     background: #fcfcfc;
 127     border-radius: 4px;
 128     border-top: 0;
 129     border-bottom: solid 1px #c7d7ee;
 130   }
 131
 132   table.greycode:not(.wide) {
 133     width: calc(620px + 100px);
 134     margin-left: -50px;
 135   }
 136
 137   table.greycode thead:first-child > tr:first-child > th,
 138   table.greycode thead:first-child > tr:first-child > td,
 139   table.greycode tbody:first-child > tr:first-child > th,
 140   table.greycode tbody:first-child > tr:first-child > td,
 141   table.greycode.no-head thead:nth-child(2) > tr:first-child > th,
 142   table.greycode.no-head thead:nth-child(2) > tr:first-child > td,
 143   table.greycode.no-head tbody:nth-child(2) > tr:first-child > th,
 144   table.greycode.no-head tbody:nth-child(2) > tr:first-child > td {
 145     border-top: 0;
 146   }
 147
 148   table.greycode thead > tr:first-child > th,
 149   table.greycode thead > tr:first-child > td,
 150   table.greycode tbody > tr:first-child > th,
 151   table.greycode tbody > tr:first-child > td {
 152     border-top: solid 1px #c7d7ee;
 153   }
 154
 155   table.greycode td:first-child,
 156   table.greycode th:first-child {
 157     padding-left: 50px;
 158   }
 159
 160   table.greycode td:last-child,
 161   table.greycode th:last-child {
 162     padding-right: 50px;
 163   }
 164 }
 165
 166 .hljs-comment {
 167   font-style: normal;
 168 }
 169
 170 .key-codes code {
 171   background: #fdfdff;
 172   padding: 3px 8px 3px 8px;
 173   border-radius: 3px;
 174   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 175   margin: 0 5px;
 176 }
 177
 178 .key-codes code + code {
 179   margin-left: 0;
 180 }
 181
 182 .key-codes pre code {
 183   background: transparent;
 184   padding: 0;
 185   box-shadow: none;
 186   margin: 0;
 187 }
 188
 189 .social-list.-collapse {
 190   margin-top: 0;
 191   position: absolute;
 192   top: 40vh;
 193   left: 30px;
 194   width: 32px;
 195 }
 196
 197 @media (max-width: 480px) {
 198   .social-list.-collapse {
 199     display: none;
 200   }
 201 }