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   font-family: "PT Sans";
  37 }
  38 @media (min-width: 48em) {
  39   html {
  40     font-size: 16px;
  41   }
  42 }
  43 @media (min-width: 58em) {
  44   html {
  45     font-size: 20px;
  46   }
  47 }
  48
  49
  50 /*
  51  * Sidebar
  52  *
  53  * Flexible banner for housing site name, intro, and "footer" content. Starts
  54  * out above content in mobile and later moves to the side with wider viewports.
  55  */
  56
  57 .sidebar {
  58   text-align: center;
  59   padding: 2rem 1rem;
  60   color: rgba(255,255,255,.5);
  61   background-color: #202020;
  62 }
  63 @media (min-width: 48em) {
  64   .sidebar {
  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   padding-left: 0;
  90   list-style: none;
  91 }
  92 .sidebar-nav-item {
  93   display: block;
  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   }
 116 }
 117
 118
 119 /* Container
 120  *
 121  * Align the contents of the site above the proper threshold with some margin-fu
 122  * with a 25%-wide `.sidebar`.
 123  */
 124
 125 .content {
 126   padding-top:    4rem;
 127   padding-bottom: 4rem;
 128 }
 129
 130 @media (min-width: 48em) {
 131   .content {
 132     max-width: 38rem;
 133     margin-left: 20rem;
 134     margin-right: 2rem;
 135   }
 136 }
 137
 138 @media (min-width: 64em) {
 139   .content {
 140     margin-left: 22rem;
 141     margin-right: 4rem;
 142   }
 143 }
 144
 145
 146 /*
 147  * Reverse layout
 148  *
 149  * Flip the orientation of the page by placing the `.sidebar` on the right.
 150  */
 151
 152 @media (min-width: 48em) {
 153   .layout-reverse .sidebar {
 154     left: auto;
 155     right: 0;
 156   }
 157   .layout-reverse .content {
 158     margin-left: 2rem;
 159     margin-right: 20rem;
 160   }
 161 }
 162
 163 @media (min-width: 64em) {
 164   .layout-reverse .content {
 165     margin-left: 4rem;
 166     margin-right: 22rem;
 167   }
 168 }
 169
 170
 171
 172 /*
 173  * Themes
 174  *
 175  * As of v1.1, Hyde includes optional themes to color the sidebar and links
 176  * within blog posts. To use, add the class of your choosing to the `body`.
 177  */
 178
 179 /* Base16 (http://chriskempson.github.io/base16/#default) */
 180
 181 /* Red */
 182 .theme-base-08 .sidebar {
 183   background-color: #ac4142;
 184 }
 185 .theme-base-08 .content a,
 186 .theme-base-08 .related-posts li a:hover {
 187   color: #ac4142;
 188 }
 189
 190 /* Orange */
 191 .theme-base-09 .sidebar {
 192   background-color: #d28445;
 193 }
 194 .theme-base-09 .content a,
 195 .theme-base-09 .related-posts li a:hover {
 196   color: #d28445;
 197 }
 198
 199 /* Yellow */
 200 .theme-base-0a .sidebar {
 201   background-color: #f4bf75;
 202 }
 203 .theme-base-0a .content a,
 204 .theme-base-0a .related-posts li a:hover {
 205   color: #f4bf75;
 206 }
 207
 208 /* Green */
 209 .theme-base-0b .sidebar {
 210   background-color: #90a959;
 211 }
 212 .theme-base-0b .content a,
 213 .theme-base-0b .related-posts li a:hover {
 214   color: #90a959;
 215 }
 216
 217 /* Cyan */
 218 .theme-base-0c .sidebar {
 219   background-color: #75b5aa;
 220 }
 221 .theme-base-0c .content a,
 222 .theme-base-0c .related-posts li a:hover {
 223   color: #75b5aa;
 224 }
 225
 226 /* Blue */
 227 .theme-base-0d .sidebar {
 228   background-color: #6a9fb5;
 229 }
 230 .theme-base-0d .content a,
 231 .theme-base-0d .related-posts li a:hover {
 232   color: #6a9fb5;
 233 }
 234
 235 /* Magenta */
 236 .theme-base-0e .sidebar {
 237   background-color: #aa759f;
 238 }
 239 .theme-base-0e .content a,
 240 .theme-base-0e .related-posts li a:hover {
 241   color: #aa759f;
 242 }
 243
 244 /* Brown */
 245 .theme-base-0f .sidebar {
 246   background-color: #8f5536;
 247 }
 248 .theme-base-0f .content a,
 249 .theme-base-0f .related-posts li a:hover {
 250   color: #8f5536;
 251 }