static/css/hyde.css

   1 /*
   2  *  __                  __
   3  * /\ \                /\ \
   4  * \ \ \___   __  __   \_\ \     __
   5  *  \ \  _ `\/\ \/\ \  /'_` \  /'__`\
   6  *   \ \ \ \ \ \ \_\ \/\ \_\ \/\  __/
   7  *    \ \_\ \_\/`____ \ \___,_\ \____\
   8  *     \/_/\/_/`/___/> \/__,_ /\/____/
   9  *                /\___/
  10  *                \/__/
  11  *
  12  * Designed, built, and released under MIT license by @mdo. Learn more at
  13  * https://github.com/poole/hyde.
  14  */
  15
  16
  17 /*
  18  * Contents
  19  *
  20  * Global resets
  21  * Sidebar
  22  * Container
  23  * Reverse layout
  24  * Themes
  25  */
  26
  27
  28 /*
  29  * Global resets
  30  *
  31  * Update the foundational and global aspects of the page.
  32  */
  33
  34 html {
  35   font-family: "PT Sans", Helvetica, Arial, sans-serif;
  36 }
  37 @media (min-width: 48em) {
  38   html {
  39     font-size: 16px;
  40   }
  41 }
  42 @media (min-width: 58em) {
  43   html {
  44     font-size: 20px;
  45   }
  46 }
  47
  48
  49 /*
  50  * Sidebar
  51  *
  52  * Flexible banner for housing site name, intro, and "footer" content. Starts
  53  * out above content in mobile and later moves to the side with wider viewports.
  54  */
  55
  56 .sidebar {
  57   text-align: center;
  58   padding: 2rem 1rem;
  59   color: rgba(255,255,255,.5);
  60   background-color: #202020;
  61 }
  62 @media (min-width: 48em) {
  63   .sidebar {
  64     position: fixed;
  65     top: 0;
  66     left: 0;
  67     bottom: 0;
  68     width: 18rem;
  69     text-align: left;
  70   }
  71 }
  72
  73 /* Sidebar links */
  74 .sidebar a {
  75   color: #fff;
  76 }
  77
  78 /* About section */
  79 .sidebar-about h1 {
  80   color: #fff;
  81   margin-top: 0;
  82   font-family: "Abril Fatface", serif;
  83   font-size: 3.25rem;
  84 }
  85
  86 /* Sidebar nav */
  87 .sidebar-nav {
  88   padding-left: 0;
  89   list-style: none;
  90 }
  91 .sidebar-nav-item {
  92   display: block;
  93 }
  94 a.sidebar-nav-item:hover,
  95 a.sidebar-nav-item:focus {
  96   text-decoration: underline;
  97 }
  98 .sidebar-nav-item.active {
  99   font-weight: bold;
 100 }
 101
 102 /* Sticky sidebar
 103  *
 104  * Add the `sidebar-sticky` class to the sidebar's container to affix it the
 105  * contents to the bottom of the sidebar in tablets and up.
 106  */
 107
 108 @media (min-width: 48em) {
 109   .sidebar-sticky {
 110     position: absolute;
 111     right:  1rem;
 112     bottom: 1rem;
 113     left:   1rem;
 114   }
 115 }
 116
 117
 118 /* Container
 119  *
 120  * Align the contents of the site above the proper threshold with some margin-fu
 121  * with a 25%-wide `.sidebar`.
 122  */
 123
 124 .content {
 125   padding-top:    4rem;
 126   padding-bottom: 4rem;
 127 }
 128
 129 @media (min-width: 48em) {
 130   .content {
 131     max-width: 38rem;
 132     margin-left: 20rem;
 133     margin-right: 2rem;
 134   }
 135 }
 136
 137 @media (min-width: 64em) {
 138   .content {
 139     margin-left: 22rem;
 140     margin-right: 4rem;
 141   }
 142 }
 143
 144
 145 /*
 146  * Reverse layout
 147  *
 148  * Flip the orientation of the page by placing the `.sidebar` on the right.
 149  */
 150
 151 @media (min-width: 48em) {
 152   .layout-reverse .sidebar {
 153     left: auto;
 154     right: 0;
 155   }
 156   .layout-reverse .content {
 157     margin-left: 2rem;
 158     margin-right: 20rem;
 159   }
 160 }
 161
 162 @media (min-width: 64em) {
 163   .layout-reverse .content {
 164     margin-left: 4rem;
 165     margin-right: 22rem;
 166   }
 167 }
 168
 169
 170
 171 /*
 172  * Themes
 173  *
 174  * As of v1.1, Hyde includes optional themes to color the sidebar and links
 175  * within blog posts. To use, add the class of your choosing to the `body`.
 176  */
 177
 178 /* Base16 (http://chriskempson.github.io/base16/#default) */
 179
 180 /* Red */
 181 .theme-base-08 .sidebar {
 182   background-color: #ac4142;
 183 }
 184 .theme-base-08 .content a,
 185 .theme-base-08 .related-posts li a:hover {
 186   color: #ac4142;
 187 }
 188
 189 /* Orange */
 190 .theme-base-09 .sidebar {
 191   background-color: #d28445;
 192 }
 193 .theme-base-09 .content a,
 194 .theme-base-09 .related-posts li a:hover {
 195   color: #d28445;
 196 }
 197
 198 /* Yellow */
 199 .theme-base-0a .sidebar {
 200   background-color: #f4bf75;
 201 }
 202 .theme-base-0a .content a,
 203 .theme-base-0a .related-posts li a:hover {
 204   color: #f4bf75;
 205 }
 206
 207 /* Green */
 208 .theme-base-0b .sidebar {
 209   background-color: #90a959;
 210 }
 211 .theme-base-0b .content a,
 212 .theme-base-0b .related-posts li a:hover {
 213   color: #90a959;
 214 }
 215
 216 /* Cyan */
 217 .theme-base-0c .sidebar {
 218   background-color: #75b5aa;
 219 }
 220 .theme-base-0c .content a,
 221 .theme-base-0c .related-posts li a:hover {
 222   color: #75b5aa;
 223 }
 224
 225 /* Blue */
 226 .theme-base-0d .sidebar {
 227   background-color: #6a9fb5;
 228 }
 229 .theme-base-0d .content a,
 230 .theme-base-0d .related-posts li a:hover {
 231   color: #6a9fb5;
 232 }
 233
 234 /* Magenta */
 235 .theme-base-0e .sidebar {
 236   background-color: #aa759f;
 237 }
 238 .theme-base-0e .content a,
 239 .theme-base-0e .related-posts li a:hover {
 240   color: #aa759f;
 241 }
 242
 243 /* Brown */
 244 .theme-base-0f .sidebar {
 245   background-color: #8f5536;
 246 }
 247 .theme-base-0f .content a,
 248 .theme-base-0f .related-posts li a:hover {
 249   color: #8f5536;
 250 }