public/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: none;
  59   color: rgba(255,255,255,.5);
  60   background-color: #202020;
  61 }
  62 @media (min-width: 48em) {
  63   .sidebar {
  64     overflow-y: scroll;
  65     position: fixed;
  66     top: 0;
  67     left: 0;
  68     bottom: 0;
  69     width: 18rem;
  70     text-align: left;
  71   }
  72 }
  73
  74 /* Sidebar links */
  75 .sidebar a {
  76   color: #fff;
  77 }
  78
  79 /* About section */
  80 .sidebar-about h1 {
  81   color: #fff;
  82   margin-top: 0;
  83   font-family: "Abril Fatface", serif;
  84   font-size: 3.25rem;
  85 }
  86
  87 /* Sidebar nav */
  88 .sidebar-nav {
  89   margin-bottom: 1rem;
  90 }
  91 .sidebar-nav-item {
  92   display: block;
  93   line-height: 1.75;
  94 }
  95 a.sidebar-nav-item:hover,
  96 a.sidebar-nav-item:focus {
  97   text-decoration: underline;
  98 }
  99 .sidebar-nav-item.active {
 100   font-weight: bold;
 101 }
 102
 103 /* Sticky sidebar
 104  *
 105  * Add the `sidebar-sticky` class to the sidebar's container to affix it the
 106  * contents to the bottom of the sidebar in tablets and up.
 107  */
 108
 109 @media (min-width: 48em) {
 110   .sidebar-sticky {
 111     position: absolute;
 112     right:  1rem;
 113     bottom: 1rem;
 114     left:   1rem;
 115     top:    0rem;
 116   }
 117 }
 118
 119
 120 /* Container
 121  *
 122  * Align the contents of the site above the proper threshold with some margin-fu
 123  * with a 25%-wide `.sidebar`.
 124  */
 125
 126 .content {
 127   padding-top:    4rem;
 128   padding-bottom: 4rem;
 129 }
 130
 131 @media (min-width: 48em) {
 132   .content {
 133     max-width: 38rem;
 134     margin-left: 20rem;
 135     margin-right: 2rem;
 136   }
 137 }
 138
 139 @media (min-width: 64em) {
 140   .content {
 141     margin-left: 22rem;
 142     margin-right: 4rem;
 143   }
 144 }
 145
 146
 147 /*
 148  * Reverse layout
 149  *
 150  * Flip the orientation of the page by placing the `.sidebar` on the right.
 151  */
 152
 153 @media (min-width: 48em) {
 154   .layout-reverse .sidebar {
 155     left: auto;
 156     right: 0;
 157   }
 158   .layout-reverse .content {
 159     margin-left: 2rem;
 160     margin-right: 20rem;
 161   }
 162 }
 163
 164 @media (min-width: 64em) {
 165   .layout-reverse .content {
 166     margin-left: 4rem;
 167     margin-right: 22rem;
 168   }
 169 }
 170
 171
 172
 173 /*
 174  * Themes
 175  *
 176  * As of v1.1, Hyde includes optional themes to color the sidebar and links
 177  * within blog posts. To use, add the class of your choosing to the `body`.
 178  */
 179
 180 /* Base16 (http://chriskempson.github.io/base16/#default) */
 181
 182 /* Red */
 183 .theme-base-08 .sidebar {
 184   background-color: #ac4142;
 185 }
 186 .theme-base-08 .content a,
 187 .theme-base-08 .related-posts li a:hover {
 188   color: #ac4142;
 189 }
 190
 191 /* Orange */
 192 .theme-base-09 .sidebar {
 193   background-color: #d28445;
 194 }
 195 .theme-base-09 .content a,
 196 .theme-base-09 .related-posts li a:hover {
 197   color: #d28445;
 198 }
 199
 200 /* Yellow */
 201 .theme-base-0a .sidebar {
 202   background-color: #f4bf75;
 203 }
 204 .theme-base-0a .content a,
 205 .theme-base-0a .related-posts li a:hover {
 206   color: #f4bf75;
 207 }
 208
 209 /* Green */
 210 .theme-base-0b .sidebar {
 211   background-color: #90a959;
 212 }
 213 .theme-base-0b .content a,
 214 .theme-base-0b .related-posts li a:hover {
 215   color: #90a959;
 216 }
 217
 218 /* Cyan */
 219 .theme-base-0c .sidebar {
 220   background-color: #75b5aa;
 221 }
 222 .theme-base-0c .content a,
 223 .theme-base-0c .related-posts li a:hover {
 224   color: #75b5aa;
 225 }
 226
 227 /* Blue */
 228 .theme-base-0d .sidebar {
 229   background-color: #6a9fb5;
 230 }
 231 .theme-base-0d .content a,
 232 .theme-base-0d .related-posts li a:hover {
 233   color: #6a9fb5;
 234 }
 235
 236 /* Magenta */
 237 .theme-base-0e .sidebar {
 238   background-color: #aa759f;
 239 }
 240 .theme-base-0e .content a,
 241 .theme-base-0e .related-posts li a:hover {
 242   color: #aa759f;
 243 }
 244
 245 /* Brown */
 246 .theme-base-0f .sidebar {
 247   background-color: #8f5536;
 248 }
 249 .theme-base-0f .content a,
 250 .theme-base-0f .related-posts li a:hover {
 251   color: #8f5536;
 252 }