]>
Commit | Line | Data |
---|---|---|
da66ac19 | 1 | /* |
0576ec06 DS |
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 | */ | |
da66ac19 | 15 | |
16 | ||
17 | /* | |
18 | * Contents | |
19 | * | |
0576ec06 DS |
20 | * Global resets |
21 | * Sidebar | |
da66ac19 | 22 | * Container |
0576ec06 | 23 | * Reverse layout |
da66ac19 | 24 | * Themes |
25 | */ | |
26 | ||
27 | ||
28 | /* | |
0576ec06 | 29 | * Global resets |
da66ac19 | 30 | * |
31 | * Update the foundational and global aspects of the page. | |
32 | */ | |
33 | ||
0576ec06 DS |
34 | html { |
35 | font-family: "PT Sans", Helvetica, Arial, sans-serif; | |
da66ac19 | 36 | } |
6d654601 | 37 | @media (min-width: 48em) { |
0576ec06 DS |
38 | html { |
39 | font-size: 16px; | |
da66ac19 | 40 | } |
41 | } | |
6d654601 | 42 | @media (min-width: 58em) { |
0576ec06 DS |
43 | html { |
44 | font-size: 20px; | |
da66ac19 | 45 | } |
46 | } | |
47 | ||
48 | ||
49 | /* | |
0576ec06 | 50 | * Sidebar |
da66ac19 | 51 | * |
0576ec06 DS |
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. | |
da66ac19 | 54 | */ |
55 | ||
0576ec06 DS |
56 | .sidebar { |
57 | text-align: center; | |
58 | padding: 2rem 1rem; | |
59 | color: rgba(255,255,255,.5); | |
60 | background-color: #202020; | |
da66ac19 | 61 | } |
6d654601 | 62 | @media (min-width: 48em) { |
0576ec06 DS |
63 | .sidebar { |
64 | position: fixed; | |
65 | top: 0; | |
66 | left: 0; | |
67 | bottom: 0; | |
68 | width: 18rem; | |
69 | text-align: left; | |
70 | } | |
da66ac19 | 71 | } |
72 | ||
0576ec06 DS |
73 | /* Sidebar links */ |
74 | .sidebar a { | |
da66ac19 | 75 | color: #fff; |
da66ac19 | 76 | } |
77 | ||
0576ec06 DS |
78 | /* About section */ |
79 | .sidebar-about h1 { | |
da66ac19 | 80 | color: #fff; |
0576ec06 DS |
81 | margin-top: 0; |
82 | font-family: "Abril Fatface", serif; | |
83 | font-size: 3.25rem; | |
da66ac19 | 84 | } |
85 | ||
0576ec06 DS |
86 | /* Sidebar nav */ |
87 | .sidebar-nav { | |
da66ac19 | 88 | padding-left: 0; |
89 | list-style: none; | |
90 | } | |
0576ec06 DS |
91 | .sidebar-nav-item { |
92 | display: block; | |
da66ac19 | 93 | } |
0576ec06 DS |
94 | a.sidebar-nav-item:hover, |
95 | a.sidebar-nav-item:focus { | |
96 | text-decoration: underline; | |
da66ac19 | 97 | } |
0576ec06 DS |
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 | ||
6d654601 | 108 | @media (min-width: 48em) { |
0576ec06 | 109 | .sidebar-sticky { |
da66ac19 | 110 | position: absolute; |
0576ec06 DS |
111 | right: 1rem; |
112 | bottom: 1rem; | |
113 | left: 1rem; | |
da66ac19 | 114 | } |
115 | } | |
116 | ||
117 | ||
118 | /* Container | |
119 | * | |
120 | * Align the contents of the site above the proper threshold with some margin-fu | |
0576ec06 | 121 | * with a 25%-wide `.sidebar`. |
da66ac19 | 122 | */ |
123 | ||
124 | .content { | |
0576ec06 DS |
125 | padding-top: 4rem; |
126 | padding-bottom: 4rem; | |
da66ac19 | 127 | } |
128 | ||
6d654601 | 129 | @media (min-width: 48em) { |
da66ac19 | 130 | .content { |
0576ec06 DS |
131 | max-width: 38rem; |
132 | margin-left: 20rem; | |
133 | margin-right: 2rem; | |
da66ac19 | 134 | } |
135 | } | |
136 | ||
6d654601 | 137 | @media (min-width: 64em) { |
0576ec06 DS |
138 | .content { |
139 | margin-left: 22rem; | |
140 | margin-right: 4rem; | |
da66ac19 | 141 | } |
142 | } | |
143 | ||
da66ac19 | 144 | |
145 | /* | |
146 | * Reverse layout | |
147 | * | |
0576ec06 | 148 | * Flip the orientation of the page by placing the `.sidebar` on the right. |
da66ac19 | 149 | */ |
150 | ||
6d654601 | 151 | @media (min-width: 48em) { |
0576ec06 | 152 | .layout-reverse .sidebar { |
da66ac19 | 153 | left: auto; |
154 | right: 0; | |
155 | } | |
0576ec06 DS |
156 | .layout-reverse .content { |
157 | margin-left: 2rem; | |
158 | margin-right: 20rem; | |
da66ac19 | 159 | } |
160 | } | |
161 | ||
6d654601 | 162 | @media (min-width: 64em) { |
0576ec06 DS |
163 | .layout-reverse .content { |
164 | margin-left: 4rem; | |
165 | margin-right: 22rem; | |
166 | } | |
167 | } | |
168 | ||
169 | ||
da66ac19 | 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 */ | |
0576ec06 | 181 | .theme-base-08 .sidebar { |
da66ac19 | 182 | background-color: #ac4142; |
183 | } | |
0576ec06 | 184 | .theme-base-08 .content a, |
da66ac19 | 185 | .theme-base-08 .related-posts li a:hover { |
186 | color: #ac4142; | |
187 | } | |
188 | ||
189 | /* Orange */ | |
0576ec06 | 190 | .theme-base-09 .sidebar { |
da66ac19 | 191 | background-color: #d28445; |
192 | } | |
0576ec06 | 193 | .theme-base-09 .content a, |
da66ac19 | 194 | .theme-base-09 .related-posts li a:hover { |
195 | color: #d28445; | |
196 | } | |
197 | ||
198 | /* Yellow */ | |
0576ec06 | 199 | .theme-base-0a .sidebar { |
da66ac19 | 200 | background-color: #f4bf75; |
201 | } | |
0576ec06 | 202 | .theme-base-0a .content a, |
da66ac19 | 203 | .theme-base-0a .related-posts li a:hover { |
204 | color: #f4bf75; | |
205 | } | |
206 | ||
207 | /* Green */ | |
0576ec06 | 208 | .theme-base-0b .sidebar { |
da66ac19 | 209 | background-color: #90a959; |
210 | } | |
0576ec06 | 211 | .theme-base-0b .content a, |
da66ac19 | 212 | .theme-base-0b .related-posts li a:hover { |
213 | color: #90a959; | |
214 | } | |
215 | ||
216 | /* Cyan */ | |
0576ec06 | 217 | .theme-base-0c .sidebar { |
da66ac19 | 218 | background-color: #75b5aa; |
219 | } | |
0576ec06 | 220 | .theme-base-0c .content a, |
da66ac19 | 221 | .theme-base-0c .related-posts li a:hover { |
222 | color: #75b5aa; | |
223 | } | |
224 | ||
225 | /* Blue */ | |
0576ec06 | 226 | .theme-base-0d .sidebar { |
da66ac19 | 227 | background-color: #6a9fb5; |
228 | } | |
0576ec06 | 229 | .theme-base-0d .content a, |
da66ac19 | 230 | .theme-base-0d .related-posts li a:hover { |
231 | color: #6a9fb5; | |
232 | } | |
233 | ||
234 | /* Magenta */ | |
0576ec06 | 235 | .theme-base-0e .sidebar { |
da66ac19 | 236 | background-color: #aa759f; |
237 | } | |
0576ec06 | 238 | .theme-base-0e .content a, |
da66ac19 | 239 | .theme-base-0e .related-posts li a:hover { |
240 | color: #aa759f; | |
241 | } | |
242 | ||
243 | /* Brown */ | |
0576ec06 | 244 | .theme-base-0f .sidebar { |
da66ac19 | 245 | background-color: #8f5536; |
246 | } | |
0576ec06 | 247 | .theme-base-0f .content a, |
da66ac19 | 248 | .theme-base-0f .related-posts li a:hover { |
249 | color: #8f5536; | |
250 | } |