Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Head back home to try finding it again.
10 |
8 | 
9 |
10 | ## ⚠️ IMPORTANT: Branch Information ⚠️
11 |
12 | ### 👉 For Jekyll 4.x Users (Recommended for New Projects)
13 |
14 | **Use the [jekyll-v4 branch](https://github.com/fongandrew/hydeout/tree/jekyll-v4) for all new projects.**
15 |
16 | The jekyll-v4 branch is actively maintained (well, at least more maintained than this branch) and includes full support for Jekyll 4.x with improvements and bug fixes.
17 |
18 | ```bash
19 | # Clone with jekyll-v4 branch (recommended)
20 | git clone -b jekyll-v4 https://github.com/fongandrew/hydeout.git
21 | ```
22 |
23 | ### Current Branch: Jekyll 3.x Support (master)
24 |
25 | **You're currently viewing the README for the legacy Jekyll 3.x version (master branch).**
26 |
27 | This master branch is maintained for legacy support and compatibility with older GitHub Pages deployments. It will remain on Jekyll 3.x for as long as [GitHub Pages continues to support this version](https://pages.github.com/versions/).
28 |
29 | The master branch exists primarily to avoid breaking existing GitHub Pages sites that use `remote_theme: fongandrew/hydeout` in their `_config.yml` files (see usage below). [See the GitHub instructions for more details.](https://help.github.com/articles/adding-a-jekyll-theme-to-your-github-pages-site/).
30 |
31 | ## Usage details
32 |
33 | Hydeout uses pagination, so if you have an `index.md`, you'll need to swap
34 | it with an `index.html` that uses the `index` layout:
35 |
36 | ```
37 | ---
38 | layout: index
39 | title: Home
40 | ---
41 | ```
42 |
43 | You'll also need to add a setting to `_config.yml` telling Jekyll how many posts
44 | to include per page (e.g. `paginate: 5`).
45 |
46 | ### Keep It Simple
47 |
48 | In keeping with the original Hyde theme, Hydeout aims to keep the overall
49 | design lightweight and plugin-free. JavaScript is currently limited only
50 | to Disqus and Google Analytics (and is only loaded if you provide configuration
51 | variables).
52 |
53 | Hydeout makes heavy use of Flexbox in its CSS. If Flexbox is not available,
54 | the CSS degrades into a single column layout.
55 |
56 | ### Customization
57 |
58 | Hydeout replaces Hyde's class-based theming with the use
59 | of the following SASS variables:
60 |
61 | ```scss
62 | $sidebar-bg-color: #202020 !default;
63 | $sidebar-fg-color: white !default;
64 | $sidebar-sticky: true !default;
65 | $layout-reverse: false !default;
66 | $link-color: #268bd2 !default;
67 | ```
68 |
69 | To override these variables, create your own `assets/css/main.scss` file.
70 | Define your own variables, then import in Hydeout's SCSS, like so:
71 |
72 | ```scss
73 | ---
74 | # Jekyll needs front matter for SCSS files
75 | ---
76 |
77 | $sidebar-bg-color: #ac4142;
78 | $link-color: #ac4142;
79 | $sidebar-sticky: false;
80 | @import "hydeout";
81 | ```
82 |
83 | See the [_variables](_sass/hydeout/_variables.scss) file for other variables
84 | you can override.
85 |
86 | You can see the full set of partials you can replace in the
87 | [`_includes`](_includes) folder, but there are a few worth noting:
88 |
89 | * `_includes/copyright.html` - Insert your own copyright here.
90 |
91 | * `_includes/custom-head.html` - Insert custom head tags (e.g. to load your
92 | own stylesheets)
93 |
94 | * `_includes/custom-foot.html` - Insert custom elements at the end of the
95 | body (e.g. for custom JS)
96 |
97 | * `_includes/custom-nav-links.html` - Additional nav links to insert at the
98 | end of the list of links in the sidebar.
99 |
100 | Pro-tip: The `nav`s in the sidebar are flexboxes. Use the `order` property
101 | to order your links.
102 |
103 | * `_includes/custom-icon-links.html`- Additional icon links to insert at the
104 | end of the icon links at the bottom of the sidebar. You can use the `order`
105 | property to re-order.
106 |
107 | * `_includes/favicons.html` - Replace references to `favicon.ico` and
108 | `favicon.png` with your own favicons references.
109 |
110 | * `_includes/font-includes.html` - The Abril Fatface font used for the site
111 | title is loaded here. If you're overriding that font in the CSS, be sure
112 | to also remove the font load reference here.
113 |
114 | ### New Features
115 |
116 | * Hydeout adds a new tags page (accessible in the sidebar). Just create a
117 | new page with the tags layout:
118 |
119 | ```
120 | ---
121 | layout: tags
122 | title: Tags
123 | ---
124 | ```
125 |
126 | * Hydeout adds a new "category" layout for dedicated category pages.
127 | Category pages are automatically added to the sidebar. All other pages
128 | must have `sidebar_link: true` in their front matter to show up in
129 | the sidebar. To create a category page, use the `category` layout"
130 |
131 | ```
132 | ---
133 | layout: category
134 | title: My Category
135 | ---
136 |
137 | Description of "My Category"
138 | ```
139 |
140 | * You can control how pages are sorted by using the `sidebar_sort_order`
141 | parameter in the front matter. This works for both category and non-category
142 | pages, although non-category pages will always come first. Take a look at
143 | [`_includes/sidebar-nav-links.html`](./_includes/sidebar-nav-links.html) if
144 | you want to customize this behavior.
145 |
146 | ```
147 | ---
148 | layout: page
149 | title: My page
150 | sidebar_sort_order: 123
151 | ---
152 |
153 | Some content.
154 | ```
155 |
156 | * A simple redirect-to-Google search is available. Just create a page with
157 | the `search` layout.
158 |
159 | ```
160 | ---
161 | layout: search
162 | title: Google Search
163 | ---
164 | ```
165 |
166 | * Disqus integration is ready out of the box. Just add the following to
167 | your config file:
168 |
169 | ```yaml
170 | disqus:
171 | shortname: my-disqus-shortname
172 | ```
173 |
174 | If you don't want Disqus or want to use something else, override
175 | `comments.html`.
176 |
177 | * For Google Analytics support, define a `google_analytics` variable with
178 | your property ID in your config file.
179 |
180 | There's also a bunch of minor tweaks and adjustments throughout the
181 | theme. Hope this works for you!
182 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | # Dependencies
2 | markdown: kramdown
3 | highlighter: rouge
4 |
5 | # Setup
6 | title: Hydeout
7 | tagline: 'A Jekyll theme'
8 | description: 'The Hyde theme for Jekyll, refreshed.'
9 | url: https://fongandrew.github.io
10 | baseurl: '/hydeout'
11 | # the optional subpath of your site, e.g. "/blog"
12 | # NB: This applies to all pages in your Jekyll site.
13 | # If you want to move just the blog index pages but keep
14 | # other pages at root, see the paginate_path and
15 | # sidebar_blog_link below.
16 |
17 | author:
18 | name: 'Andrew Fong'
19 | url: https://twitter.com/fongandrewc
20 |
21 | paginate: 5
22 | # paginate_path: '/page:num'
23 | # Or '/blog/page:num' if you want to move your index pages
24 |
25 | plugins:
26 | - jekyll-feed
27 | - jekyll-gist
28 | - jekyll-paginate
29 |
30 | # Sidebar link settings
31 | sidebar_home_link: true
32 | # sidebar_blog_link: '/blog' # By default, your home page is your blog
33 | # page. If you change your paginate_path,
34 | # set this to the root of the paginate_path
35 | # to enable a separate blog link.
36 |
--------------------------------------------------------------------------------
/_includes/back-link.html:
--------------------------------------------------------------------------------
1 | {% assign back_page = site.pages | find: "name", page.back_page %}
2 | {% if back_page != null %}
3 | 4 | {% include svg/back-arrow.svg %}{{ back_page.short_title | default: back_page.title }} 5 |
6 | {% endif %} 7 | -------------------------------------------------------------------------------- /_includes/category-links.html: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | Dynamically generate list of links to all category pages 3 | {% endcomment %} 4 | {% assign pages_list = site.pages|sort:"sidebar_sort_order" %} 5 | {% for node in pages_list %} 6 | {% if node.title != null %} 7 | {% if node.layout == "category" %} 8 | {{ node.title }} 10 | {% endif %} 11 | {% endif %} 12 | {% endfor %} -------------------------------------------------------------------------------- /_includes/comments.html: -------------------------------------------------------------------------------- 1 | {% if page.comments != false %} 2 |2 | © {{ site.time | date: '%Y' }}. 3 | MIT License. 4 |
5 | -------------------------------------------------------------------------------- /_includes/custom-foot.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_includes/custom-head.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/custom-icon-links.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/custom-nav-links.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/disqus.html: -------------------------------------------------------------------------------- 1 | {% if site.disqus.shortname %} 2 |
34 | You are seeing this because your Disqus shortname is not properly set. To
35 | configure Disqus, you should edit your _config.yml to include
36 | either a disqus.shortname variable.
37 |
40 | If you do not wish to use Disqus, override the
41 | comments.html partial for this theme.
42 |
15 | 16 | 17 | This post tests Twitter Embeds. -------------------------------------------------------------------------------- /_posts/2010-10-25-post-future-date.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Post: Future Date" 4 | date: 9999-12-31 5 | categories: 6 | - Post 7 | last_modified_at: 2017-03-09T12:45:25-05:00 8 | --- 9 | 10 | This post lives in the future and is dated {{ page.date | date: "%c" }}. It should only appear when Jekyll builds your project with the `--future` flag. 11 | 12 | ```bash 13 | jekyll build --future 14 | ``` -------------------------------------------------------------------------------- /_posts/2012-01-11-markup-html-elements-and-formatting.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Markup: HTML Elements and Formatting" 4 | sub_title: "The common elements" 5 | categories: 6 | - Markup 7 | elements: 8 | - content 9 | - css 10 | - formatting 11 | - html 12 | - markup 13 | last_modified_at: 2017-03-09T10:55:59-05:00 14 | --- 15 | 16 | A variety of common HTML elements to demonstrate the theme's stylesheet and verify they have been styled appropriately. 17 | 18 | # Header one 19 | 20 | ## Header two 21 | 22 | ### Header three 23 | 24 | #### Header four 25 | 26 | ##### Header five 27 | 28 | ###### Header six 29 | 30 | ## Blockquotes 31 | 32 | Single line blockquote: 33 | 34 | > Stay hungry. Stay foolish. 35 | 36 | Multi line blockquote with a cite reference: 37 | 38 | > People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things. 39 | 40 | Steve Jobs --- Apple Worldwide Developers' Conference, 1997 41 | {: .small} 42 | 43 | ## Tables 44 | 45 | | Employee | Salary | | 46 | | -------- | ------ | ------------------------------------------------------------ | 47 | | [John Doe](#) | $1 | Because that's all Steve Jobs needed for a salary. | 48 | | [Jane Doe](#) | $100K | For all the blogging she does. | 49 | | [Fred Bloggs](#) | $100M | Pictures are worth a thousand words, right? So Jane × 1,000. | 50 | | [Jane Bloggs](#) | $100B | With hair like that?! Enough said. | 51 | 52 | | Header1 | Header2 | Header3 | 53 | |:--------|:-------:|--------:| 54 | | cell1 | cell2 | cell3 | 55 | | cell4 | cell5 | cell6 | 56 | |-----------------------------| 57 | | cell1 | cell2 | cell3 | 58 | | cell4 | cell5 | cell6 | 59 | |=============================| 60 | | Foot1 | Foot2 | Foot3 | 61 | 62 | ## Definition Lists 63 | 64 | Definition List Title 65 | : Definition list division. 66 | 67 | Startup 68 | : A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model. 69 | 70 | #dowork 71 | : Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends. 72 | 73 | Do It Live 74 | : I'll let Bill O'Reilly [explain](https://www.youtube.com/watch?v=O_HyZ5aW76c "We'll Do It Live") this one. 75 | 76 | ## Unordered Lists (Nested) 77 | 78 | * List item one 79 | * List item one 80 | * List item one 81 | * List item two 82 | * List item three 83 | * List item four 84 | * List item two 85 | * List item three 86 | * List item four 87 | * List item two 88 | * List item three 89 | * List item four 90 | 91 | ## Ordered List (Nested) 92 | 93 | 1. List item one 94 | 1. List item one 95 | 1. List item one 96 | 2. List item two 97 | 3. List item three 98 | 4. List item four 99 | 2. List item two 100 | 3. List item three 101 | 4. List item four 102 | 2. List item two 103 | 3. List item three 104 | 4. List item four 105 | 106 | ## Address element 107 | 108 | 109 | 1 Infinite LoopOh I dunno. It's probably been over 15 years since I smudged out a face with a pencil and kneaded eraser. #WIP #Sktchy pic.twitter.com/PwqbMddyVK
— Michael Rose (@mmistakes) February 1, 2017
` element.
145 |
146 | ## Preformatted element
147 |
148 | This element styles large blocks of code.
149 |
150 |
151 | .post-title {
152 | margin: 0 0 5px;
153 | font-weight: bold;
154 | font-size: 38px;
155 | line-height: 1.2;
156 | and here's a line of some really, really, really, really long text, just to see how the PRE element handles it and to find out how it overflows;
157 | }
158 |
159 |
160 | ## Quote element
161 |
162 | Developers, developers, developers…
–Steve Ballmer
163 |
164 | ## Strong element
165 |
166 | This element shows **bold text**.
167 |
168 | ## Subscript element
169 |
170 | Getting our science styling on with H2O, which should push the "2" down.
171 |
172 | ## Superscript element
173 |
174 | Still sticking with science and Einstein's E = MC2, which should lift the 2 up.
175 |
176 | ## Variable element
177 |
178 | This allows you to denote variables.
179 |
--------------------------------------------------------------------------------
/_posts/2012-01-29-markup-text-readability.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Markup: Text Readability Test"
4 | excerpt: "A large amount of sample text to test readability of a text heavy page."
5 | categories:
6 | - Markup
7 | tags:
8 | - sample post
9 | - readability
10 | - test
11 | last_modified_at: 2012-01-29T12:26:59-05:00
12 | ---
13 |
14 | Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
15 |
16 | Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
17 |
18 | ## Cupidatat 90's lo-fi authentic try-hard
19 |
20 | In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90's.
21 |
22 | * Sartorial hoodie
23 | * Labore viral forage
24 | * Tote bag selvage
25 | * DIY exercitation et id ugh tumblr church-key
26 |
27 | Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr.
28 |
29 | Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven't heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney's Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis.
30 |
31 | ## Forage occaecat cardigan qui
32 |
33 | Fashion axe hella gastropub lo-fi kogi 90's aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole.
34 |
35 | > Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.
36 |
37 | Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney's next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney's sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard.
38 |
39 | ## Hoodie Duis
40 |
41 | Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90's pop-up est culpa farm-to-table. Selfies 8-bit do pug odio.
42 |
43 | ### Thundercats Ho!
44 |
45 | Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney's seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress.
46 |
47 | Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney's selfies. Odd Future Banksy non authentic.
48 |
49 | Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam.
50 |
--------------------------------------------------------------------------------
/_posts/2012-01-30-markup-title-with-markup.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Markup: Title *with* **Markdown**"
4 | categories:
5 | - Markup
6 | tags:
7 | - css
8 | - html
9 | - title
10 | last_modified_at: 2012-01-30T12:25:10-05:00
11 | ---
12 |
13 | Using Markdown in the title should have no adverse effect on the layout or functionality.
14 |
15 | **`page.title` example:**
16 |
17 | ```yaml
18 | title: "Markup: Title *with* **Markdown**""
19 | ```
--------------------------------------------------------------------------------
/_posts/2012-01-31-markup-title-with-special-characters.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Markup: Title with Special --- Characters"
4 | categories:
5 | - Markup
6 | tags:
7 | - html
8 | - markup
9 | - post
10 | - title
11 | last_modified_at: 2012-01-31T12:23:27-05:00
12 | ---
13 |
14 | Putting special characters in the title should have no adverse effect on the layout or functionality.
15 |
16 | The title above has none-breaking spaces before and after the m-dash.
17 |
18 | ```markdown
19 | ---
20 | ```
21 |
22 | ## Latin Character Tests
23 |
24 | This is a test to see if the fonts used in this theme support basic Latin characters.
25 |
26 |
27 |
28 |
29 | !
30 |
31 |
32 |
33 | “
34 |
35 |
36 |
37 | #
38 |
39 |
40 |
41 | $
42 |
43 |
44 |
45 | %
46 |
47 |
48 |
49 | &
50 |
51 |
52 |
53 | ‘
54 |
55 |
56 |
57 | (
58 |
59 |
60 |
61 | )
62 |
63 |
64 |
65 | *
66 |
67 |
68 |
69 |
70 |
71 | +
72 |
73 |
74 |
75 | ,
76 |
77 |
78 |
79 | –
80 |
81 |
82 |
83 | .
84 |
85 |
86 |
87 | /
88 |
89 |
90 |
91 |
92 |
93 |
94 | 1
95 |
96 |
97 |
98 | 2
99 |
100 |
101 |
102 | 3
103 |
104 |
105 |
106 | 4
107 |
108 |
109 |
110 |
111 |
112 | 5
113 |
114 |
115 |
116 | 6
117 |
118 |
119 |
120 | 7
121 |
122 |
123 |
124 | 8
125 |
126 |
127 |
128 | 9
129 |
130 |
131 |
132 | :
133 |
134 |
135 |
136 | ;
137 |
138 |
139 |
140 | >
141 |
142 |
143 |
144 | =
145 |
146 |
147 |
148 | <
149 |
150 |
151 |
152 |
153 |
154 | ?
155 |
156 |
157 |
158 | @
159 |
160 |
161 |
162 | A
163 |
164 |
165 |
166 | B
167 |
168 |
169 |
170 | C
171 |
172 |
173 |
174 | D
175 |
176 |
177 |
178 | E
179 |
180 |
181 |
182 | F
183 |
184 |
185 |
186 | G
187 |
188 |
189 |
190 | H
191 |
192 |
193 |
194 |
195 |
196 | I
197 |
198 |
199 |
200 | J
201 |
202 |
203 |
204 | K
205 |
206 |
207 |
208 | L
209 |
210 |
211 |
212 | M
213 |
214 |
215 |
216 | N
217 |
218 |
219 |
220 | O
221 |
222 |
223 |
224 | P
225 |
226 |
227 |
228 | Q
229 |
230 |
231 |
232 | R
233 |
234 |
235 |
236 |
237 |
238 | S
239 |
240 |
241 |
242 | T
243 |
244 |
245 |
246 | U
247 |
248 |
249 |
250 | V
251 |
252 |
253 |
254 | W
255 |
256 |
257 |
258 | X
259 |
260 |
261 |
262 | Y
263 |
264 |
265 |
266 | Z
267 |
268 |
269 |
270 | [
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 | ]
280 |
281 |
282 |
283 | ^
284 |
285 |
286 |
287 | _
288 |
289 |
290 |
291 | `
292 |
293 |
294 |
295 | a
296 |
297 |
298 |
299 | b
300 |
301 |
302 |
303 | c
304 |
305 |
306 |
307 | d
308 |
309 |
310 |
311 | e
312 |
313 |
314 |
315 | f
316 |
317 |
318 |
319 |
320 |
321 | g
322 |
323 |
324 |
325 | h
326 |
327 |
328 |
329 | i
330 |
331 |
332 |
333 | j
334 |
335 |
336 |
337 | k
338 |
339 |
340 |
341 | l
342 |
343 |
344 |
345 | m
346 |
347 |
348 |
349 | n
350 |
351 |
352 |
353 | o
354 |
355 |
356 |
357 | p
358 |
359 |
360 |
361 |
362 |
363 | q
364 |
365 |
366 |
367 | r
368 |
369 |
370 |
371 | s
372 |
373 |
374 |
375 | t
376 |
377 |
378 |
379 | u
380 |
381 |
382 |
383 | v
384 |
385 |
386 |
387 | w
388 |
389 |
390 |
391 | x
392 |
393 |
394 |
395 | y
396 |
397 |
398 |
399 | z
400 |
401 |
402 |
403 |
404 |
405 | {
406 |
407 |
408 |
409 | |
410 |
411 |
412 |
413 | }
414 |
415 |
416 |
417 | ~
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 |
434 |
435 |
436 |
437 |
438 |
--------------------------------------------------------------------------------
/_posts/2012-02-03-layout-excerpt-generated.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Layout: Excerpt (Generated with Separator Tag)"
4 | excerpt_separator: ""
5 | categories:
6 | - Layout
7 | tags:
8 | - content
9 | - excerpt
10 | - layout
11 | last_modified_at: 2012-02-03T12:32:16-05:00
12 | ---
13 |
14 | This is the post content. Archive-index pages should display an [auto-generated excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) of all the content preceding the `excerpt_separator`, as defined in the YAML Front Matter or globally in `_config.yml`.
15 |
16 | Be sure to test the formatting of the auto-generated excerpt, to ensure that it doesn't create any layout problems.
17 |
18 |
19 |
20 | Lorem ipsum dolor sit amet, dicant nusquam corpora in usu, laudem putent fuisset ut eam. Justo accusam definitionem id cum, choro prodesset ex his. Noluisse constituto intellegebat ea mei. Timeam admodum omnesque pri ex, eos habemus suavitate aliquando cu. Dico nihil delectus quo cu. Ludus cetero cu eos, vidit invidunt dissentiet mea ne.
21 |
22 | Usu delenit vocibus elaboraret ex. Scripta sapientem adversarium ei pri, pri ex solet democritum. Nam te porro impedit, ei doctus albucius cotidieque pri, ea mutat causae lucilius has. Pri omnis errem labore ut. An aperiam tibique est, mei te dolore veritus, nam nulla feugait ut. In vis labitur eripuit contentiones.
--------------------------------------------------------------------------------
/_posts/2012-02-04-layout-excerpt-defined.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Layout: Excerpt (Defined)"
3 | layout: post
4 | excerpt: "This is a user-defined post excerpt. It should be displayed in place of the auto-generated excerpt or post content on index pages."
5 | categories:
6 | - Layout
7 | tags:
8 | - content
9 | - excerpt
10 | - layout
11 | last_modified_at: 2012-02-04T12:43:31-05:00
12 | ---
13 |
14 | This is the start of the post content.
15 |
16 | This paragraph should be absent from an index page where `post.excerpt` is shown.
--------------------------------------------------------------------------------
/_posts/2012-02-05-markup-syntax-highlighting.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Markup: Syntax Highlighting"
3 | layout: post
4 | excerpt: "Post displaying the various ways one can highlight code blocks with Jekyll. Some options include standard Markdown, GitHub Flavored Markdown, and Jekyll's `{% highlight %}` tag."
5 | last_modified_at: 2012-02-05T10:27:01-05:00
6 | tags:
7 | - code
8 | - syntax highlighting
9 | ---
10 |
11 | Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1]
12 |
13 | [^1]:
14 |
15 | ## GFM Code Blocks
16 |
17 | GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) are supported by default with Jekyll. You may need to update your `_config.yml` file to enable them if you're using an older version.
18 |
19 | ```yaml
20 | kramdown:
21 | input: GFM
22 | ```
23 |
24 | Here's an example of a CSS code snippet written in GFM:
25 |
26 | ```css
27 | #container {
28 | float: left;
29 | margin: 0 -240px 0 0;
30 | width: 100%;
31 | }
32 | ```
33 |
34 | Yet another code snippet for demonstration purposes:
35 |
36 | ```ruby
37 | module Jekyll
38 | class TagIndex < Page
39 | def initialize(site, base, dir, tag)
40 | @site = site
41 | @base = base
42 | @dir = dir
43 | @name = 'index.html'
44 | self.process(@name)
45 | self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
46 | self.data['tag'] = tag
47 | tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
48 | tag_title_suffix = site.config['tag_title_suffix'] || '–'
49 | self.data['title'] = "#{tag_title_prefix}#{tag}"
50 | self.data['description'] = "An archive of posts tagged #{tag}."
51 | end
52 | end
53 | end
54 | ```
55 |
56 | ## Jekyll Highlight Liquid Tag
57 |
58 | Jekyll also has built-in support for syntax highlighting of code snippets using either Rouge or Pygments, using a dedicated Liquid tag as follows:
59 |
60 | ```liquid
61 | {% raw %}{% highlight scss %}
62 | .highlight {
63 | margin: 0;
64 | padding: 1em;
65 | font-family: $monospace;
66 | font-size: $type-size-7;
67 | line-height: 1.8;
68 | }
69 | {% endhighlight %}{% endraw %}
70 | ```
71 |
72 | And the output will look like this:
73 |
74 | {% highlight scss %}
75 | .highlight {
76 | margin: 0;
77 | padding: 1em;
78 | font-family: $monospace;
79 | font-size: $type-size-7;
80 | line-height: 1.8;
81 | }
82 | {% endhighlight %}
83 |
84 | Here's an example of a code snippet using the Liquid tag and `linenos` enabled.
85 |
86 | {% highlight html linenos %}
87 | {% raw %}{% endraw %}
95 | {% endhighlight %}
96 |
97 | ## Code Blocks in Lists
98 |
99 | Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., `1.`). Usually this will mean indenting 3 spaces instead of 4.
100 |
101 | 1. Do step 1.
102 | 2. Now do this:
103 |
104 | ```ruby
105 | def print_hi(name)
106 | puts "Hi, #{name}"
107 | end
108 | print_hi('Tom')
109 | #=> prints 'Hi, Tom' to STDOUT.
110 | ```
111 |
112 | 3. Now you can do this.
113 |
114 | ## GitHub Gist Embed
115 |
116 | GitHub Gist embeds can also be used:
117 |
118 | ```html
119 |
120 | ```
121 |
122 | Which outputs as:
123 |
124 |
125 |
--------------------------------------------------------------------------------
/_posts/2012-02-06-whats-jekyll.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: What's Jekyll?
4 | ---
5 |
6 | [Jekyll](http://jekyllrb.com) is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. From [the project's readme](https://github.com/mojombo/jekyll/blob/master/README.markdown):
7 |
8 | > Jekyll is a simple, blog aware, static site generator. It takes a template directory [...] and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub.
9 |
10 | It's an immensely useful tool and one we encourage you to use here with Hyde.
11 |
12 | Find out more by [visiting the project on GitHub](https://github.com/mojombo/jekyll).
--------------------------------------------------------------------------------
/_posts/2012-02-07-example-content.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: Example content
4 | ---
5 |
6 |
7 |
10 |
11 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. *Aenean eu leo quam.* Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
12 |
13 | > Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
14 |
15 | Etiam porta **sem malesuada magna** mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
16 |
17 | ## Inline HTML elements
18 |
19 | HTML defines a long list of available inline tags, a complete list of which can be found on the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
20 |
21 | - **To bold text**, use ``.
22 | - *To italicize text*, use ``.
23 | - Abbreviations, like HTML should use ``, with an optional `title` attribute for the full phrase.
24 | - Citations, like — Mark otto, should use ``.
25 | - Deleted text should use `` and inserted text should use ``.
26 | - Superscript text uses `` and subscript text uses ``.
27 |
28 | Most of these elements are styled by browsers with few modifications on our part.
29 |
30 | ## Heading
31 |
32 | Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
33 |
34 | ### Code
35 |
36 | Cum sociis natoque penatibus et magnis dis `code element` montes, nascetur ridiculus mus.
37 |
38 | {% highlight js %}
39 | // Example can be run directly in your JavaScript console
40 |
41 | // Create a function that takes two arguments and returns the sum of those arguments
42 | var adder = new Function("a", "b", "return a + b");
43 |
44 | // Call the function
45 | adder(2, 6);
46 | // > 8
47 | {% endhighlight %}
48 |
49 | Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
50 |
51 | ### Gists via GitHub Pages
52 |
53 | Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui.
54 |
55 | {% gist 5555251 gist.md %}
56 |
57 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.
58 |
59 | ### Lists
60 |
61 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
62 |
63 | * Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
64 | * Donec id elit non mi porta gravida at eget metus.
65 | * Nulla vitae elit libero, a pharetra augue.
66 |
67 | Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
68 |
69 | 1. Vestibulum id ligula porta felis euismod semper.
70 | 2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
71 | 3. Maecenas sed diam eget risus varius blandit sit amet non magna.
72 |
73 | Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
74 |
75 |
76 | - HyperText Markup Language (HTML)
77 | - The language used to describe and define the content of a Web page
78 |
79 | - Cascading Style Sheets (CSS)
80 | - Used to describe the appearance of Web content
81 |
82 | - JavaScript (JS)
83 | - The programming language used to build advanced Web sites and applications
84 |
85 |
86 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
87 |
88 | ### Images
89 |
90 | Quisque consequat sapien eget quam rhoncus, sit amet laoreet diam tempus. Aliquam aliquam metus erat, a pulvinar turpis suscipit at.
91 |
92 | 
93 | 
94 | 
95 |
96 | ### Tables
97 |
98 | Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
99 |
100 |
101 |
102 |
103 | Name
104 | Upvotes
105 | Downvotes
106 |
107 |
108 |
109 |
110 | Totals
111 | 21
112 | 23
113 |
114 |
115 |
116 |
117 | Alice
118 | 10
119 | 11
120 |
121 |
122 | Bob
123 | 4
124 | 3
125 |
126 |
127 | Charlie
128 | 7
129 | 9
130 |
131 |
132 |
133 |
134 | Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo.
135 |
136 | -----
137 |
138 | Want to see something else added? Open an issue.
139 |
--------------------------------------------------------------------------------
/_posts/2013-12-28-introducing-hyde.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: Introducing Hyde
4 | ---
5 |
6 | Hyde is a brazen two-column [Jekyll](http://jekyllrb.com) theme that pairs a prominent sidebar with uncomplicated content. It's based on [Poole](http://getpoole.com), the Jekyll butler.
7 |
8 | ### Built on Poole
9 |
10 | Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by [@mdo](https://twitter.com/mdo). Poole, and every theme built on it (like Hyde here) includes the following:
11 |
12 | * Complete Jekyll setup included (layouts, config, [404]({{ "/404" | relative_url }}), [RSS feed]({{ "/feed.xml" | relative_url }}), posts, and [example page]({{ "/about" | relative_url }}))
13 | * Mobile friendly design and development
14 | * Easily scalable text and component sizing with `rem` units in the CSS
15 | * Support for a wide gamut of HTML elements
16 | * Related posts (time-based, because Jekyll) below each post
17 | * Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter)
18 |
19 | ### Hyde features
20 |
21 | In addition to the features of Poole, Hyde adds the following:
22 |
23 | * Sidebar includes support for textual modules and a dynamically generated navigation with active link support
24 | * Two orientations for content and sidebar, default (left sidebar) and [reverse](https://github.com/poole/hyde#reverse-layout) (right sidebar), available via `` classes
25 | * [Eight optional color schemes](https://github.com/poole/hyde#themes), available via `` classes
26 |
27 | [Head to the readme](https://github.com/poole/hyde#readme) to learn more.
28 |
29 | ### Browser support
30 |
31 | Hyde is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above.
32 |
33 | ### Download
34 |
35 | Hyde is developed on and hosted with GitHub. Head to the GitHub repository for downloads, bug reports, and features requests.
36 |
37 | Thanks!
38 |
--------------------------------------------------------------------------------
/_posts/2017-06-01-hello-hydeout.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: Hello Hydeout
4 | excerpt_separator:
5 | ---
6 |
7 | Hydeout updates the original [Hyde](https://github.com/poole/hyde)
8 | theme for [Jekyll](http://jekyllrb.com) 3.x and 4.x and adds new functionality.
9 |
10 | ### Keep It Simple
11 |
12 | In keeping with the original Hyde theme, Hydeout aims to keep the overall
13 | design lightweight and plugin-free. JavaScript is currently limited only
14 | to Disqus and Google Analytics (and is only loaded if you provide configuration
15 | variables).
16 |
17 | Hydeout makes heavy use of Flexbox in its CSS. If Flexbox is not available,
18 | the CSS degrades into a single column layout.
19 |
20 | ### Customization
21 |
22 | Hydeout replaces Hyde's class-based theming with the use
23 | of the following SASS variables:
24 |
25 | ```scss
26 | $sidebar-bg-color: #202020 !default;
27 | $sidebar-fg-color: white !default;
28 | $sidebar-sticky: true !default;
29 | $layout-reverse: false !default;
30 | $link-color: #268bd2 !default;
31 | ```
32 |
33 | To override these variables, create your own `assets/css/main.scss` file.
34 | Define your own variables, then import in Hydeout's SCSS, like so:
35 |
36 | ```
37 | ---
38 | # Jekyll needs front matter for SCSS files
39 | ---
40 |
41 | $sidebar-bg-color: #ac4142;
42 | $link-color: #ac4142;
43 | $sidebar-sticky: false;
44 | @import "hydeout";
45 | ```
46 |
47 | See the [_variables](https://github.com/fongandrew/hydeout/blob/master/_sass/hydeout/_variables.scss) file for other variables
48 | you can override.
49 |
50 | You can also insert custom head tags (e.g. to load your own stylesheets) by
51 | defining your own `_includes/custom-head.html` or insert tags at the end
52 | of the body (e.g. for custom JS) by defining your own
53 | `_includes/custom-foot.html`.
54 |
55 | ### New Features
56 |
57 | * Hydeout also adds a new tags page (accessible in the sidebar) and a new
58 | "category" layout for dedicated category pages.
59 |
60 | * Category pages are automatically added to the sidebar. All other pages
61 | must have `sidebar_link: true` in their front matter to show up in
62 | the sidebar.
63 |
64 | * A simple redirect-to-Google search is available. If you want to use
65 | Google Custom Search or Algolia or something with more involved,
66 | override the `search.html`.
67 |
68 | * Disqus integration is ready out of the box. Just add the following to
69 | your config file:
70 |
71 | ```yaml
72 | disqus:
73 | shortname: my-disqus-shortname
74 | ```
75 |
76 | If you don't want Disqus or want to use something else, override
77 | `comments.html`.
78 |
79 | * For Google Analytics support, define a `google_analytics` variable with
80 | your property ID in your config file.
81 |
82 | There's also a bunch of minor tweaks and adjustments throughout the
83 | theme. Hope this works for you!
84 |
--------------------------------------------------------------------------------
/_sass/hydeout.scss:
--------------------------------------------------------------------------------
1 | /*
2 | Most of these imports are derived from https://github.com/poole/poole.
3 | Designed, built, and released under MIT license by @mdo.
4 | */
5 |
6 | @import 'hydeout/variables';
7 | @import 'hydeout/base';
8 | @import 'hydeout/type';
9 | @import 'hydeout/syntax';
10 | @import 'hydeout/code';
11 | @import 'hydeout/layout';
12 | @import 'hydeout/masthead';
13 | @import 'hydeout/posts';
14 | @import 'hydeout/pagination';
15 | @import 'hydeout/message';
16 | @import 'hydeout/search';
17 | @import 'hydeout/tags';
18 | @import 'hydeout/back-link';
19 |
--------------------------------------------------------------------------------
/_sass/hydeout/_back-link.scss:
--------------------------------------------------------------------------------
1 | .back-link {
2 | font-size: 80%;
3 | a {
4 | color: currentColor;
5 | svg {
6 | fill: currentColor;
7 | }
8 | }
9 | }
10 |
11 |
--------------------------------------------------------------------------------
/_sass/hydeout/_base.scss:
--------------------------------------------------------------------------------
1 | // Body resets
2 | //
3 | // Update the foundational and global aspects of the page.
4 |
5 | * {
6 | box-sizing: border-box;
7 | }
8 |
9 | html,
10 | body {
11 | margin: 0;
12 | padding: 0;
13 | }
14 |
15 | html {
16 | font-family: $root-font-family;
17 | font-size: $root-font-size;
18 | line-height: $root-line-height;
19 |
20 | @media (min-width: $large-breakpoint) {
21 | font-size: $large-font-size;
22 | }
23 | }
24 |
25 | body {
26 | text-size-adjust: 100%;
27 | }
28 |
29 | main,
30 | article,
31 | section {
32 | display: block;
33 | }
34 |
35 | // No `:visited` state is required by default (browsers will use `a`)
36 | a {
37 | color: $link-color;
38 | text-decoration: none;
39 |
40 | // `:focus` is linked to `:hover` for basic accessibility
41 | &:hover,
42 | &:focus {
43 | text-decoration: underline;
44 | }
45 |
46 | strong {
47 | color: inherit;
48 | }
49 | }
50 |
51 | img {
52 | border-radius: 5px;
53 | display: block;
54 | height: auto; // prevent max-width from squishing images with defined height
55 | margin: 0 0 1rem;
56 | max-width: 100%;
57 | }
58 |
59 | table {
60 | border: 1px solid $border-color;
61 | border-collapse: collapse;
62 | font-size: 85%;
63 | margin-bottom: 1rem;
64 | width: 100%;
65 | }
66 |
67 | td,
68 | th {
69 | border: 1px solid $border-color;
70 | padding: 0.25rem 0.5rem;
71 | }
72 |
73 | th {
74 | text-align: left;
75 | }
76 |
77 | tbody tr:nth-child(odd) td,
78 | tbody tr:nth-child(odd) th {
79 | background-color: $gray-1;
80 | }
81 |
82 | button,
83 | input[type='text'],
84 | input[type='email'],
85 | input[type='search'],
86 | input[type='submit'] {
87 | border: 1px solid $border-color;
88 | border-radius: $border-radius;
89 | padding: $padding-v $padding-h;
90 | }
91 |
92 | button,
93 | input[type='submit'] {
94 | background: transparent;
95 | border-color: $border-color;
96 | color: $link-color;
97 | cursor: pointer;
98 | transition:
99 | color 0.6s ease-in-out,
100 | border-color 0.6s ease-in-out,
101 | background 0.6s ease-in-out;
102 |
103 | &:hover {
104 | background: $link-color;
105 | border-color: $link-color;
106 | box-shadow: $default-box-shadow;
107 | color: #fff;
108 | }
109 | }
110 |
111 | .video-container {
112 | overflow: hidden;
113 | position: relative;
114 | width:100%;
115 | }
116 |
117 | .video-container::after {
118 | padding-top: 56.25%;
119 | display: block;
120 | content: '';
121 | }
122 |
123 | .video-container iframe {
124 | position: absolute;
125 | top: 0;
126 | left: 0;
127 | width: 100%;
128 | height: 100%;
129 | }
--------------------------------------------------------------------------------
/_sass/hydeout/_code.scss:
--------------------------------------------------------------------------------
1 | // Code
2 | //
3 | // Inline and block-level code snippets. Includes tweaks to syntax highlighted
4 | // snippets from Pygments/Rouge and Gist embeds.
5 |
6 | code,
7 | pre {
8 | font-family: $code-font-family;
9 | }
10 |
11 | code {
12 | background-color: #f9f9f9;
13 | border-radius: 3px;
14 | color: $code-color;
15 | font-size: 85%;
16 | padding: 0.25em 0.5em;
17 | }
18 |
19 | pre {
20 | margin-bottom: 1rem;
21 | margin-top: 0;
22 | max-width: 100%;
23 | overflow-x: auto;
24 | }
25 |
26 | pre code {
27 | background-color: transparent;
28 | color: inherit;
29 | font-size: 100%;
30 | padding: 0;
31 | }
32 |
33 | // Pygments/Rouge via Jekyll
34 | .highlight {
35 | background-color: #f9f9f9;
36 | border-radius: 0.25rem;
37 | font-size: 0.8rem;
38 | line-height: 1.4;
39 | margin-bottom: 1rem;
40 | padding: 1rem;
41 |
42 | pre {
43 | margin-bottom: 0;
44 | overflow-x: auto;
45 | }
46 |
47 | .lineno {
48 | color: #999;
49 | display: inline-block; // Ensures the null space also isn't selectable
50 | padding-left: 0.25rem;
51 | padding-right: 0.75rem;
52 | user-select: none; // Make sure numbers aren't selectable
53 | }
54 | }
55 |
56 | // Gist via GitHub Pages
57 | // .gist .gist-file {
58 | // font-family: Menlo, Monaco, "Courier New", monospace !important;
59 | // }
60 | // .gist .markdown-body {
61 | // padding: 15px;
62 | // }
63 | // .gist pre {
64 | // padding: 0;
65 | // background-color: transparent;
66 | // }
67 | // .gist .gist-file .gist-data {
68 | // font-size: .8rem !important;
69 | // line-height: 1.4;
70 | // }
71 | // .gist code {
72 | // padding: 0;
73 | // color: inherit;
74 | // background-color: transparent;
75 | // border-radius: 0;
76 | // }
77 |
--------------------------------------------------------------------------------
/_sass/hydeout/_layout.scss:
--------------------------------------------------------------------------------
1 | /*
2 | Layout
3 |
4 | Styles for managing the structural hierarchy of the site.
5 | Hydeout features the large colored sidebar from Hyde that houses the
6 | site name, intro, and "footer" content. Sidebar is on top of content on
7 | mobile and expands into sidebar on larger width displays.
8 |
9 | Sidebar CSS assumes HTML looks like this for post pages:
10 |
11 | body
12 | > #sidebar
13 | > header (primary sidebar content -- i.e. title)
14 | > h1 (home page only, otherwise div or span)
15 | > secondary nav content we may want to hide on certain pages
16 | > .container
17 | > h1 (non-home page)
18 | > .content
19 |
20 | Basic approach is to color in body, make sidebar background transparent,
21 | and then fill in the .container or .content elements depending on how far
22 | we want the sidebar or header to stretch.
23 | */
24 |
25 | body {
26 | background-attachment: fixed;
27 | background-color: $sidebar-bg-color;
28 | background-image: linear-gradient(to bottom, lighten($sidebar-bg-color, 7%), darken($sidebar-bg-color, 7%));
29 | color: $sidebar-text-color;
30 | display: flex;
31 | flex-direction: column;
32 | min-height: 100vh;
33 | }
34 |
35 | #sidebar {
36 | flex: 0 0 auto;
37 | padding: $section-spacing;
38 |
39 | .site-title {
40 | font-family: 'Abril Fatface', serif;
41 | font-size: $large-font-size;
42 | font-weight: normal;
43 | margin-bottom: $heading-spacing;
44 | margin-top: 0;
45 | }
46 |
47 | .site-title .back-arrow { margin-right: 0.5rem; }
48 | }
49 |
50 | .content {
51 | background: $body-bg;
52 | color: $body-color;
53 | padding: $section-spacing;
54 | }
55 |
56 | // Container is flexbox as well -- we want content div to stretch and fill
57 | .container {
58 | display: flex;
59 | flex: 1 1 auto;
60 | flex-direction: column;
61 |
62 | > .content {
63 | flex-grow: 1;
64 | padding-bottom: $section-spacing * 2;
65 | }
66 | }
67 |
68 | /* -----------------------------------------------------------
69 | Mobile view
70 | ----------------------------------------------------------- */
71 |
72 | // Hide secondary nav content in sidebar
73 | // Hide lead paragraph in sidebar
74 | #sidebar {
75 | header ~ *,
76 | header ~ nav,
77 | p.lead {
78 | display: none;
79 | }
80 | }
81 |
82 | // Make header elements blend into sidebar / background
83 | .container > header {
84 | background: transparent;
85 | color: $sidebar-title-color;
86 | margin:
87 | ($heading-spacing - $section-spacing)
88 | $section-spacing
89 | $section-spacing;
90 |
91 | h1,
92 | h2 {
93 | color: inherit;
94 | }
95 |
96 | h1:last-child,
97 | h2:last-child {
98 | margin-bottom: 0;
99 | }
100 | }
101 |
102 | /* -----------------------------------------------------------
103 | Mobile view for home page)
104 | ----------------------------------------------------------- */
105 |
106 | .home #sidebar {
107 |
108 | // Center sidebar content
109 | text-align: center;
110 |
111 | // Bigger title
112 | .site-title {
113 | font-size: 3.25rem;
114 | }
115 |
116 | // Show secondary nav content + lead
117 | header ~ *,
118 | p.lead {
119 | display: block;
120 | }
121 |
122 | header ~ nav {
123 | display: flex;
124 | }
125 |
126 | // Slightly more bottom padding to compensate for heading not match 100% of
127 | // line-height on top
128 | > *:last-child {
129 | margin-bottom: 0.5rem;
130 | }
131 | }
132 |
133 | /* -----------------------------------------------------------
134 | Tablet / Desktop view
135 | ----------------------------------------------------------- */
136 |
137 | @media (min-width: $large-breakpoint) {
138 | body {
139 | flex-direction: row;
140 | min-height: 100vh;
141 | -webkit-overflow-scrolling: touch;
142 | overflow-y: auto;
143 |
144 | > * {
145 | -webkit-overflow-scrolling: touch;
146 | overflow-y: auto;
147 | }
148 | }
149 |
150 | /* Undo mobile CSS */
151 |
152 | #sidebar,
153 | .home #sidebar {
154 | text-align: left;
155 | width: $sidebar-width;
156 |
157 | > *:last-child {
158 | margin-bottom: 0;
159 | }
160 | }
161 |
162 | #sidebar {
163 | position: fixed;
164 |
165 | // Attach to bottom or top of window
166 | @if $sidebar-sticky {
167 | bottom: 0;
168 | }
169 |
170 | @else {
171 | top: 0;
172 | }
173 |
174 | // Attach to right or left of window
175 | @if $layout-reverse {
176 | right: 0;
177 | }
178 |
179 | @else {
180 | left: 0;
181 | }
182 |
183 | .site-title {
184 | font-size: 3.25rem;
185 | .back-arrow { display: none; }
186 | }
187 |
188 | p.lead,
189 | header ~ * {
190 | display: block;
191 | }
192 |
193 | header ~ nav {
194 | display: flex;
195 | }
196 | }
197 |
198 | .index #sidebar { margin-bottom: 0; }
199 |
200 | // Make entire container background white to contrast against sidebar
201 | .container {
202 | background: $body-bg;
203 | color: $body-color;
204 | min-height: 100vh;
205 | padding:
206 | $section-spacing * 2
207 | $section-spacing * 2
208 | 0;
209 |
210 | @if $layout-reverse {
211 | margin-right: $sidebar-width;
212 | }
213 |
214 | @else {
215 | margin-left: $sidebar-width;
216 | }
217 |
218 | > header {
219 | color: $heading-color;
220 | margin: 0;
221 |
222 | h1,
223 | h2 {
224 | color: inherit;
225 |
226 | &:last-child {
227 | margin-bottom: $heading-spacing;
228 | }
229 | }
230 | }
231 |
232 | > * {
233 | max-width: 38rem;
234 | padding: 0;
235 | }
236 | }
237 | }
238 |
239 | /* -----------------------------------------------------------
240 | Sidebar links + nav
241 | ----------------------------------------------------------- */
242 |
243 | #sidebar a {
244 | color: $sidebar-link-color;
245 |
246 | svg {
247 | fill: $sidebar-icon-color;
248 | }
249 | }
250 |
251 | #sidebar a:hover,
252 | #sidebar a:focus,
253 | #sidebar a.active {
254 | svg { fill: $sidebar-icon-color; }
255 | }
256 |
257 | #sidebar a:hover,
258 | #sidebar a:focus {
259 | text-decoration: underline;
260 |
261 | &.icon {
262 | text-decoration: none;
263 | }
264 | }
265 |
266 | #sidebar a.active {
267 | font-weight: bold;
268 | }
269 |
270 | #sidebar .site-title {
271 | color: $sidebar-title-color;
272 | a { color: inherit; }
273 | }
274 |
275 | #sidebar nav {
276 | display: flex;
277 | }
278 |
279 | #sidebar-nav-links {
280 | flex-flow: column nowrap;
281 | }
282 |
283 | #sidebar-icon-links {
284 | flex-flow: row wrap;
285 | justify-content: center;
286 | margin-top: 1rem;
287 | max-width: 100%;
288 |
289 | @media (min-width: $large-breakpoint) {
290 | justify-content: flex-start;
291 | margin-left: -0.25em;
292 | }
293 | }
294 |
295 | #sidebar nav > * {
296 | display: block;
297 | line-height: 1.75;
298 | }
299 |
300 | #sidebar nav > .icon {
301 | display: inline-block;
302 | font-size: 1.5rem;
303 | margin: 0 0.25em;
304 | }
305 |
306 | @media print {
307 | #sidebar {
308 | display: none;
309 | }
310 |
311 | body {
312 | display: block;
313 | }
314 |
315 | .container {
316 | display: block;
317 | margin-left: 0;
318 | margin-right: 0;
319 | padding: 0;
320 |
321 | > * {
322 | max-width: 100%;
323 | }
324 | }
325 |
326 | html {
327 | font-size: normal;
328 | }
329 | }
330 |
--------------------------------------------------------------------------------
/_sass/hydeout/_masthead.scss:
--------------------------------------------------------------------------------
1 | // Masthead
2 | //
3 | // Super small header above the content for site name and short description.
4 |
5 | .masthead {
6 | margin-bottom: 3rem;
7 | padding-bottom: 1rem;
8 | padding-top: 1rem;
9 | }
10 |
11 | .masthead-title {
12 | color: $gray-5;
13 | margin-bottom: 0;
14 | margin-top: 0;
15 |
16 | a {
17 | color: inherit;
18 | }
19 |
20 | small {
21 | font-size: 75%;
22 | font-weight: 400;
23 | opacity: 0.5;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/_sass/hydeout/_message.scss:
--------------------------------------------------------------------------------
1 | // Messages
2 | //
3 | // Show alert messages to users. You may add it to single elements like a ``,
4 | // or to a parent if there are multiple elements to show.
5 |
6 | .message {
7 | background-color: #f9f9f9;
8 | color: #717171;
9 | margin-bottom: 1rem;
10 | padding: 1rem;
11 | }
12 |
--------------------------------------------------------------------------------
/_sass/hydeout/_pagination.scss:
--------------------------------------------------------------------------------
1 | /*
2 | Pagination
3 |
4 | Super lightweight (HTML-wise) blog pagination. Should only be visible
5 | when there is navigation available -- single buttons at top or bottom
6 | of each page.
7 | */
8 |
9 | .pagination {
10 | color: $gray-3;
11 | margin-bottom: $section-spacing;
12 | text-align: center;
13 |
14 | > a {
15 | background: $body-bg;
16 | border: solid $border-color;
17 | border-radius: $border-radius;
18 | border-width: 1px;
19 | box-shadow: $default-box-shadow;
20 | display: inline-block;
21 | max-width: $sidebar-width;
22 | padding: $padding-v $padding-h;
23 | width: 60%;
24 | }
25 |
26 | > a:hover {
27 | background-color: $border-color;
28 | }
29 | }
30 |
31 | // Bottom -> margin-top;
32 | * + .pagination {
33 | margin-top: $section-spacing;
34 | }
35 |
36 | // Push above header if newer on mobile
37 | .content .pagination:first-child {
38 | margin-top: -$section-spacing * 2;
39 | }
40 |
41 | // Make room for larger header by extending margin below title
42 | .index #sidebar {
43 | padding-bottom: calc(#{$section-spacing} + #{$padding-v});
44 | }
45 |
46 | // But not on page1
47 | .home.index #sidebar {
48 | padding-bottom: $section-spacing;
49 | }
50 |
51 | // Undo for larger screens
52 | @media (min-width: $large-breakpoint) {
53 | .pagination > a {
54 | box-shadow: none;
55 |
56 | &:hover { box-shadow: $default-box-shadow; }
57 | }
58 |
59 | .content .pagination:first-child {
60 | margin-top: 0;
61 |
62 | + * {
63 | border-top: 1px solid $border-color;
64 | margin-top: $section-spacing;
65 | padding-top: $section-spacing;
66 | }
67 | }
68 |
69 | .index #sidebar {
70 | padding-bottom: $section-spacing;
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/_sass/hydeout/_posts.scss:
--------------------------------------------------------------------------------
1 | // Posts and pages
2 | //
3 | // Each post is wrapped in `.post` and is used on default and post layouts. Each
4 | // page is wrapped in `.page` and is only used on the page layout.
5 |
6 | .posts-by-tag h2 {
7 | text-transform: capitalize;
8 | }
9 |
10 | // Blog post or page title
11 | .page-title,
12 | .post-title {
13 | margin-top: 0;
14 | }
15 |
16 | .page-title,
17 | .post-title,
18 | .post-title a {
19 | color: $heading-color;
20 | }
21 |
22 | h2.post-title,
23 | h2.page-title {
24 | font-size: 2rem;
25 | }
26 |
27 | .post-tags a {
28 | font-size: 0.8em;
29 | margin-right: 0.5rem;
30 | opacity: 0.75;
31 | white-space: nowrap;
32 |
33 | .tag-name { text-transform: capitalize; }
34 |
35 | &:hover {
36 | opacity: 1;
37 | text-decoration: none;
38 | }
39 | }
40 |
41 | .posts-list {
42 | list-style: none;
43 | padding-left: 0;
44 |
45 | h3 {
46 | margin-top: 0;
47 | }
48 |
49 | li small {
50 | color: #999;
51 | font-size: 75%;
52 | white-space: nowrap;
53 | }
54 |
55 | li a:hover {
56 | color: $link-color;
57 | text-decoration: none;
58 | }
59 |
60 | li a:hover small {
61 | color: inherit;
62 | }
63 | }
64 |
65 | article + *,
66 | .post-body ~ section {
67 | border-top: 1px solid $border-color;
68 | margin-top: $section-spacing;
69 | padding-top: $section-spacing;
70 |
71 | > h2:first-child,
72 | > h3:first-child {
73 | margin-top: 0;
74 | }
75 | }
76 |
77 | // Meta data line below post title
78 | .post-meta {
79 | color: $body-muted;
80 | margin-bottom: 1rem;
81 | margin-top: -0.5rem;
82 | }
83 |
84 | .post,
85 | .page {
86 | .content li + li {
87 | margin-top: 0.25rem;
88 | }
89 | }
90 |
91 | button.disqus-load {
92 | margin-top: 1em;
93 | }
94 |
--------------------------------------------------------------------------------
/_sass/hydeout/_search.scss:
--------------------------------------------------------------------------------
1 | .search-row {
2 | border: 1px solid $border-color;
3 | border-radius: $border-radius;
4 | display: flex;
5 | padding: 2px;
6 |
7 | input {
8 | border: 0;
9 | }
10 |
11 | input + input { margin-left: 2px; }
12 |
13 | input[type='text'],
14 | input[type='search'] {
15 | flex-grow: 1;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/_sass/hydeout/_syntax.scss:
--------------------------------------------------------------------------------
1 | .highlight .hll { background-color: #ffc; }
2 | .highlight .c { color: #999; } /* Comment */
3 | .highlight .err { /* Error */
4 | background-color: #faa;
5 | color: #a00;
6 | }
7 | .highlight .k { color: #069; } /* Keyword */
8 | .highlight .o { color: #555; } /* Operator */
9 | .highlight .cm { /* Comment.Multiline */
10 | color: #09f;
11 | font-style: italic;
12 | }
13 | .highlight .cp { color: #099; } /* Comment.Preproc */
14 | .highlight .c1 { color: #999; } /* Comment.Single */
15 | .highlight .cs { color: #999; } /* Comment.Special */
16 | .highlight .gd { /* Generic.Deleted */
17 | background-color: #fcc;
18 | border: 1px solid #c00;
19 | }
20 | .highlight .ge { font-style: italic; } /* Generic.Emph */
21 | .highlight .gr { color: #f00; } /* Generic.Error */
22 | .highlight .gh { color: #030; } /* Generic.Heading */
23 | .highlight .gi { /* Generic.Inserted */
24 | background-color: #cfc;
25 | border: 1px solid #0c0;
26 | }
27 | .highlight .go { color: #aaa; } /* Generic.Output */
28 | .highlight .gp { color: #009; } /* Generic.Prompt */
29 | // .highlight .gs { } /* Generic.Strong */
30 | .highlight .gu { color: #030; } /* Generic.Subheading */
31 | .highlight .gt { color: #9c6; } /* Generic.Traceback */
32 | .highlight .kc { color: #069; } /* Keyword.Constant */
33 | .highlight .kd { color: #069; } /* Keyword.Declaration */
34 | .highlight .kn { color: #069; } /* Keyword.Namespace */
35 | .highlight .kp { color: #069; } /* Keyword.Pseudo */
36 | .highlight .kr { color: #069; } /* Keyword.Reserved */
37 | .highlight .kt { color: #078; } /* Keyword.Type */
38 | .highlight .m { color: #f60; } /* Literal.Number */
39 | .highlight .s { color: #d44950; } /* Literal.String */
40 | .highlight .na { color: #4f9fcf; } /* Name.Attribute */
41 | .highlight .nb { color: #366; } /* Name.Builtin */
42 | .highlight .nc { color: #0a8; } /* Name.Class */
43 | .highlight .no { color: #360; } /* Name.Constant */
44 | .highlight .nd { color: #99f; } /* Name.Decorator */
45 | .highlight .ni { color: #999; } /* Name.Entity */
46 | .highlight .ne { color: #c00; } /* Name.Exception */
47 | .highlight .nf { color: #c0f; } /* Name.Function */
48 | .highlight .nl { color: #99f; } /* Name.Label */
49 | .highlight .nn { color: #0cf; } /* Name.Namespace */
50 | .highlight .nt { color: #2f6f9f; } /* Name.Tag */
51 | .highlight .nv { color: #033; } /* Name.Variable */
52 | .highlight .ow { color: #000; } /* Operator.Word */
53 | .highlight .w { color: #bbb; } /* Text.Whitespace */
54 | .highlight .mf { color: #f60; } /* Literal.Number.Float */
55 | .highlight .mh { color: #f60; } /* Literal.Number.Hex */
56 | .highlight .mi { color: #f60; } /* Literal.Number.Integer */
57 | .highlight .mo { color: #f60; } /* Literal.Number.Oct */
58 | .highlight .sb { color: #c30; } /* Literal.String.Backtick */
59 | .highlight .sc { color: #c30; } /* Literal.String.Char */
60 | .highlight .sd { /* Literal.String.Doc */
61 | color: #c30;
62 | font-style: italic;
63 | }
64 | .highlight .s2 { color: #c30; } /* Literal.String.Double */
65 | .highlight .se { color: #c30; } /* Literal.String.Escape */
66 | .highlight .sh { color: #c30; } /* Literal.String.Heredoc */
67 | .highlight .si { color: #a00; } /* Literal.String.Interpol */
68 | .highlight .sx { color: #c30; } /* Literal.String.Other */
69 | .highlight .sr { color: #3aa; } /* Literal.String.Regex */
70 | .highlight .s1 { color: #c30; } /* Literal.String.Single */
71 | .highlight .ss { color: #fc3; } /* Literal.String.Symbol */
72 | .highlight .bp { color: #366; } /* Name.Builtin.Pseudo */
73 | .highlight .vc { color: #033; } /* Name.Variable.Class */
74 | .highlight .vg { color: #033; } /* Name.Variable.Global */
75 | .highlight .vi { color: #033; } /* Name.Variable.Instance */
76 | .highlight .il { color: #f60; } /* Literal.Number.Integer.Long */
77 |
78 | .css .o,
79 | .css .o + .nt,
80 | .css .nt + .nt { color: #999; }
81 |
--------------------------------------------------------------------------------
/_sass/hydeout/_tags.scss:
--------------------------------------------------------------------------------
1 | .tags-list a {
2 | margin-right: 0.5em;
3 | opacity: 0.75;
4 | white-space: nowrap;
5 | }
6 |
7 | .tags-list a .tag-count {
8 | background: $link-color;
9 | border-radius: 1000px;
10 | color: rgba(255, 255, 255, 0.8);
11 | font-size: 0.75em;
12 | margin-left: 0.25em;
13 | padding-left: 0.6em;
14 | padding-right: 0.6em;
15 | }
16 |
17 | .tags-list a:hover {
18 | opacity: 1;
19 | text-decoration: none;
20 | }
21 |
22 | @keyframes posts-for-tag-fade-in {
23 | from { opacity: 0; }
24 | to { opacity: 1; }
25 | }
26 |
27 | // Display only if targeted
28 | .posts-for-tag {
29 | display: none;
30 |
31 | &:target {
32 | animation: posts-for-tag-fade-in 0.6s ease-in-out;
33 | display: block;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/_sass/hydeout/_type.scss:
--------------------------------------------------------------------------------
1 | // Typography
2 | //
3 | // Headings, body text, lists, and other misc typographic elements.
4 |
5 | h1,
6 | h2,
7 | h3,
8 | h4,
9 | h5,
10 | h6,
11 | .site-title {
12 | color: $heading-color;
13 | font-weight: 600;
14 | line-height: 1.25;
15 | margin-bottom: $heading-spacing;
16 | text-rendering: optimizeLegibility;
17 | }
18 |
19 | h1 {
20 | font-size: 2rem;
21 | }
22 |
23 | h2 {
24 | font-size: 1.5rem;
25 | margin-top: 1rem;
26 | }
27 |
28 | h3 {
29 | font-size: 1.25rem;
30 | margin-top: 1.5rem;
31 | }
32 |
33 | h4,
34 | h5,
35 | h6 {
36 | font-size: 1rem;
37 | margin-top: 1rem;
38 | }
39 |
40 | p {
41 | margin-bottom: 1rem;
42 | margin-top: 0;
43 | }
44 |
45 | strong {
46 | color: #303030;
47 | }
48 |
49 | ul,
50 | ol,
51 | dl {
52 | margin-bottom: 1rem;
53 | margin-top: 0;
54 | }
55 |
56 | dt {
57 | font-weight: bold;
58 | }
59 |
60 | dd {
61 | margin-bottom: 0.5rem;
62 | }
63 |
64 | hr {
65 | border: 0;
66 | border-bottom: 1px solid #fff;
67 | border-top: 1px solid #eee;
68 | margin: 1.5rem 0;
69 | position: relative;
70 | }
71 |
72 | abbr {
73 | color: #555;
74 | font-size: 85%;
75 | font-weight: bold;
76 | text-transform: uppercase;
77 |
78 | &[title] {
79 | border-bottom: 1px dotted $border-color;
80 | cursor: help;
81 | }
82 | }
83 |
84 | blockquote {
85 | border-left: 0.25rem solid $border-color;
86 | color: #7a7a7a;
87 | margin: 0.8rem 0;
88 | padding: 0.5rem 1rem;
89 |
90 | p:last-child {
91 | margin-bottom: 0;
92 | }
93 |
94 | @media (min-width: 30em) {
95 | padding-left: 1.25rem;
96 | padding-right: 5rem;
97 | }
98 | }
99 |
100 | // Markdown footnotes
101 | //
102 | // See the example content post for an example.
103 |
104 | // Footnote number within body text
105 | a[href^='#fn:'],
106 | // Back to footnote link
107 | a[href^='#fnref:'] {
108 | display: inline-block;
109 | font-weight: bold;
110 | margin-left: 0.1rem;
111 | }
112 |
113 | // List of footnotes
114 | .footnotes {
115 | font-size: 85%;
116 | margin-top: 2rem;
117 | }
118 |
119 | // Custom type
120 | //
121 | // Extend paragraphs with `.lead` for larger introductory text.
122 |
123 | .lead {
124 | font-size: 1.25rem;
125 | font-weight: 300;
126 | }
127 |
128 | // SVG Icons
129 | a svg {
130 | fill: $link-color;
131 | }
132 |
133 | a svg,
134 | .icon svg {
135 | height: 1em;
136 | }
137 |
138 | .icon {
139 | vertical-align: middle;
140 | }
141 |
--------------------------------------------------------------------------------
/_sass/hydeout/_variables.scss:
--------------------------------------------------------------------------------
1 | $gray-1: #f9f9f9 !default;
2 | $gray-2: #e5e5e5 !default;
3 | $gray-3: #ccc !default;
4 | $gray-4: #767676 !default;
5 | $gray-5: #515151 !default;
6 | $gray-6: #313131 !default;
7 |
8 | $red: #ac4142 !default;
9 | $orange: #d28445 !default;
10 | $yellow: #f4bf75 !default;
11 | $green: #90a959 !default;
12 | $cyan: #75b5aa !default;
13 | $blue: #268bd2 !default;
14 | $brown: #8f5536 !default;
15 |
16 | $root-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif !default;
17 | $root-font-size: 1rem !default;
18 | $root-line-height: 1.5 !default;
19 |
20 | $body-color: $gray-5 !default;
21 | $body-muted: $gray-4 !default;
22 | $body-bg: #fff !default;
23 | $link-color: $blue !default;
24 | $heading-color: $gray-6 !default;
25 |
26 | $border-color: $gray-2 !default;
27 | $border-radius: 300px !default;
28 | $padding-v: 1em !default;
29 | $padding-h: 1.5em !default;
30 | $heading-spacing: 0.5rem !default;
31 | $section-spacing: 2rem !default;
32 | $sidebar-width: 18rem !default;
33 |
34 | $large-breakpoint: 49rem !default;
35 | $large-font-size: 1.25rem !default;
36 |
37 | $box-shadow-size: 1px !default;
38 | $box-shadow-opacity: 0.16 !default;
39 | $default-box-shadow: $box-shadow-size $box-shadow-size $box-shadow-size rgba(0, 0, 0, $box-shadow-opacity);
40 |
41 | $code-font-family: Menlo, Monaco, 'Courier New', monospace !default;
42 | $code-color: #bf616a !default;
43 |
44 | // Hyde theming
45 | $sidebar-bg-color: #202020 !default;
46 | $sidebar-fg-color: #fff !default;
47 | $sidebar-sticky: true !default;
48 | $layout-reverse: false !default;
49 |
50 | $sidebar-title-color: $sidebar-fg-color !default;
51 | $sidebar-link-color: $sidebar-fg-color !default;
52 | $sidebar-text-color: rgba($sidebar-fg-color, 0.75) !default;
53 | $sidebar-icon-color: rgba($sidebar-fg-color, 0.85) !default;
54 |
--------------------------------------------------------------------------------
/_screenshots/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fongandrew/hydeout/05ecba266e9c96d5a584c2a7b1b51472108f266d/_screenshots/1.png
--------------------------------------------------------------------------------
/_screenshots/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fongandrew/hydeout/05ecba266e9c96d5a584c2a7b1b51472108f266d/_screenshots/2.png
--------------------------------------------------------------------------------
/_screenshots/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fongandrew/hydeout/05ecba266e9c96d5a584c2a7b1b51472108f266d/_screenshots/3.png
--------------------------------------------------------------------------------
/about.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: About
4 | sidebar_link: true
5 | ---
6 |
7 |
11 |
12 | To make pages show up in the sidebar, add `sidebar_link: true` to the front
13 | matter.
--------------------------------------------------------------------------------
/assets/css/main.scss:
--------------------------------------------------------------------------------
1 | ---
2 | # Use a comment to ensure Jekyll reads the file to be transformed into CSS later
3 | # only main files contain this front matter, not partials.
4 | ---
5 |
6 | @import "hydeout";
--------------------------------------------------------------------------------
/category/edge-case.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: category
3 | title: Edge Case
4 | ---
5 |
6 | Sample category page. You need to create a page for each category.
7 | The category is inferred from the title of the page, but you can also
8 | specify it with the `category` attribute in the front matter.
9 |
10 | ```md
11 | ---
12 | layout: category
13 | title: My Category
14 | ---
15 | ```
16 |
17 | Or ...
18 |
19 | ```md
20 | ---
21 | layout: category
22 | title: Fancy Title
23 | category: My Category
24 | ---
25 | ```
26 |
27 | Posts get listed below here.
28 |
--------------------------------------------------------------------------------
/category/markup.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: category
3 | title: Markup
4 | ---
5 |
6 | Another sample category page.
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fongandrew/hydeout/05ecba266e9c96d5a584c2a7b1b51472108f266d/favicon.ico
--------------------------------------------------------------------------------
/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fongandrew/hydeout/05ecba266e9c96d5a584c2a7b1b51472108f266d/favicon.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: index
3 | title: Home
4 | ---
--------------------------------------------------------------------------------
/jekyll-theme-hydeout.gemspec:
--------------------------------------------------------------------------------
1 | # coding: utf-8
2 |
3 | Gem::Specification.new do |spec|
4 | spec.name = "jekyll-theme-hydeout"
5 | spec.version = "4.2.0"
6 | spec.authors = ["Andrew Fong"]
7 | spec.email = ["id@andrewfong.com"]
8 |
9 | spec.summary = %q{The Hyde theme for Jekyll, refreshed.}
10 | spec.homepage = "https://github.com/fongandrew/hydeout"
11 | spec.license = "MIT"
12 |
13 | spec.metadata["plugin_type"] = "theme"
14 |
15 | spec.files = `git ls-files -z`.split("\x0").select do |f|
16 | f.match(%r{^(assets|_(includes|layouts|sass)/|(LICENSE|README)((\.(txt|md|markdown)|$)))}i)
17 | end
18 |
19 | spec.bindir = "exe"
20 | spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
21 |
22 | spec.add_runtime_dependency "jekyll", ">= 3.6", "< 5.0"
23 | spec.add_runtime_dependency "jekyll-gist", "~> 1.4"
24 | spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
25 | spec.add_runtime_dependency "jekyll-feed", "~> 0.6"
26 | spec.add_development_dependency "bundler", "~> 2.1", ">= 2.1.4"
27 | spec.add_development_dependency "wdm", "~> 0.1" if Gem.win_platform?
28 | end
29 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "devDependencies": {
3 | "stylelint": "^13.0.0",
4 | "stylelint-config-sass-guidelines": "^6.2.0",
5 | "stylelint-config-standard-scss": "^1.1.0"
6 | },
7 | "scripts": {
8 | "stylelint": "stylelint '_sass/**/*.scss'"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/search.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: search
3 | title: Google Search
4 | ---
--------------------------------------------------------------------------------
/tags.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: tags
3 | title: Tags
4 | ---
--------------------------------------------------------------------------------
Comments
4 | {% include disqus.html %} 5 |