├── .github ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── config.yml │ ├── feature-request.md │ └── help-request.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── 404.md ├── CNAME ├── Gemfile ├── LICENSE ├── README.md ├── _config.yml ├── _includes ├── button.html ├── figure.html ├── icon.html ├── map.html ├── nav-categories.html ├── nav-default.html ├── nav-footer.html ├── nav-header.html ├── nav-share.html ├── nav-social.html ├── post-categories.html ├── post-comments.html ├── post-list.html ├── post-meta.html ├── post-pagination.html ├── post-related.html ├── site-analytics.html ├── site-aside.html ├── site-before-end.html ├── site-before-start.html ├── site-favicons.html ├── site-feature.html ├── site-fonts.html ├── site-footer.html ├── site-form.html ├── site-header.html ├── site-icons.svg ├── site-logo.html ├── site-search.html ├── site-styles.html ├── site-sw.html └── video.html ├── _layouts ├── blog.html ├── categories.html ├── default.html ├── page.html └── post.html ├── _posts ├── 2016-08-27-example-post-one.md ├── 2016-08-28-example-post-two.md └── 2016-08-29-example-post-three.md ├── _sass ├── _flex.scss ├── _normalize.scss ├── _sassline-base.scss ├── _settings.scss ├── _syntax.scss ├── _theme.scss ├── alembic.scss └── sassline-base │ ├── _mixins.scss │ ├── _modular-scale.scss │ ├── _reset.scss │ ├── _typography.scss │ └── _variables.scss ├── alembic-jekyll-theme.gemspec ├── assets ├── .gitignore ├── default-offline-image.png ├── default-social-image.png ├── logos │ ├── logo.svg │ ├── logo@1024px.png │ ├── logo@120px.png │ ├── logo@144px.png │ ├── logo@16px.png │ ├── logo@180px.png │ ├── logo@32px.png │ ├── logo@512px.png │ └── logo@96px.png ├── manifest.json ├── scripts │ ├── fetch.js │ └── sw.js ├── search.json └── styles.scss ├── blog └── index.html ├── categories.md ├── elements.md ├── index.md ├── offline.md ├── screenshot.png ├── search.md └── thanks.md /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | ## When Something Happens 4 | 5 | If you see a Code of Conduct violation, follow these steps: 6 | 7 | 1. Let the person know that what they did is not appropriate and ask them to stop and/or edit their message(s) or commits. 8 | 2. That person should immediately stop the behaviour and correct the issue. 9 | 3. If this doesn’t happen, or if you're uncomfortable speaking up, [contact the maintainers](#contacting-maintainers). 10 | 4. As soon as available, a maintainer will look into the issue, and take [further action (see below)](#further-enforcement), starting with a warning, then temporary block, then long-term repo or organisation ban. 11 | 12 | When reporting, please include any relevant details, links, screenshots, context, or other information that may be used to better understand and resolve the situation. 13 | 14 | **The maintainer team will prioritise the well-being and comfort of the recipients of the violation over the comfort of the violator.** See [some examples below](#enforcement-examples). 15 | 16 | ## Our Pledge 17 | 18 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers of this project pledge to making participation in our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, technical preferences, nationality, personal appearance, race, religion, or sexual identity and orientation. 19 | 20 | ## Our Standards 21 | 22 | Examples of behaviour that contributes to creating a positive environment include: 23 | 24 | * Using welcoming and inclusive language. 25 | * Being respectful of differing viewpoints and experiences. 26 | * Gracefully accepting constructive feedback. 27 | * Focusing on what is best for the community. 28 | * Showing empathy and kindness towards other community members. 29 | * Encouraging and raising up your peers in the project so you can all bask in hacks and glory. 30 | 31 | Examples of unacceptable behaviour by participants include: 32 | 33 | * The use of sexualised language or imagery and unwelcome sexual attention or advances, including when simulated online. The only exception to sexual topics is channels/spaces specifically for topics of sexual identity. 34 | * Trolling, insulting/derogatory comments, and personal or political attacks. 35 | * Public or private harassment, deliberate intimidation, or threats. 36 | * Publishing others' private information, such as a physical or electronic address, without explicit permission. This includes any sort of "outing" of any aspect of someone's identity without their consent. 37 | * Publishing private screenshots or quotes of interactions in the context of this project without all quoted users' *explicit* consent. 38 | * Publishing of private communication that doesn't have to do with reporting harassment. 39 | * Any of the above even when [presented as "ironic" or "joking"](https://en.wikipedia.org/wiki/Hipster_racism). 40 | * Any attempt to present "reverse-ism" versions of the above as violations. Examples of reverse-isms are "reverse racism", "reverse sexism", "heterophobia", and "cisphobia". 41 | * Unsolicited explanations under the assumption that someone doesn't already know it. Ask before you teach! Don't assume what people's knowledge gaps are. 42 | * [Feigning or exaggerating surprise](https://www.recurse.com/manual#no-feigned-surprise) when someone admits to not knowing something. 43 | * "[Well-actuallies](https://www.recurse.com/manual#no-well-actuallys)" 44 | * Other conduct which could reasonably be considered inappropriate in a professional or community setting. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within spaces involving this project and in other spaces involving community members. This includes the repository, its Pull Requests and Issue tracker, its Twitter community, private email communications in the context of the project, and any events where members of the project are participating, as well as adjacent communities and venues affecting the project's members. 49 | 50 | Depending on the violation, the maintainers may decide that violations of this code of conduct that have happened outside of the scope of the community may deem an individual unwelcome, and take appropriate action to maintain the comfort and safety of its members. 51 | 52 | ### Other Community Standards 53 | 54 | As a project on GitHub, this project is additionally covered by the [GitHub Community Guidelines](https://help.github.com/articles/github-community-guidelines/). 55 | 56 | Additionally, as a project hosted on npm, is is covered by [npm, Inc's Code of Conduct](https://www.npmjs.com/policies/conduct). 57 | 58 | Enforcement of those guidelines after violations overlapping with the above are the responsibility of the entities, and enforcement may happen in any or all of the services/communities. 59 | 60 | ## Maintainer Enforcement Process 61 | 62 | Once the maintainers get involved, they will follow a documented series of steps and do their best to preserve the well-being of project members. This section covers actual concrete steps. 63 | 64 | ### Contacting Maintainers 65 | 66 | You may get in touch with the maintainer team through any of the following methods: 67 | 68 | * Through email: 69 | * [me@daviddarnes.com](mailto:me@daviddarnes.com) (David Darnes) 70 | 71 | * Through Twitter: 72 | * [@DavidDarnes](https://twitter.com/DavidDarnes) (David Darnes) 73 | 74 | ### Further Enforcement 75 | 76 | If you've already followed the [initial enforcement steps](#enforcement), these are the steps maintainers will take for further enforcement, as needed: 77 | 78 | 1. Repeat the request to stop. 79 | 2. If the person doubles down, they will have offending messages removed or edited by a maintainers given an official warning. The PR or Issue may be locked. 80 | 3. If the behaviour continues or is repeated later, the person will be blocked from participating for 24 hours. 81 | 4. If the behaviour continues or is repeated after the temporary block, a long-term (6-12mo) ban will be used. 82 | 83 | On top of this, maintainers may remove any offending messages, images, contributions, etc, as they deem necessary. 84 | 85 | Maintainers reserve full rights to skip any of these steps, at their discretion, if the violation is considered to be a serious and/or immediate threat to the health and well-being of members of the community. These include any threats, serious physical or verbal attacks, and other such behaviour that would be completely unacceptable in any social setting that puts our members at risk. 86 | 87 | Members expelled from events or venues with any sort of paid attendance will not be refunded. 88 | 89 | ### Who Watches the Watchers? 90 | 91 | Maintainers and other leaders who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. These may include anything from removal from the maintainer team to a permanent ban from the community. 92 | 93 | Additionally, as a project hosted on both GitHub and npm, [their own Codes of Conducts may be applied against maintainers of this project](#other-community-standards), externally of this project's procedures. 94 | 95 | ### Enforcement Examples 96 | 97 | #### The Best Case 98 | 99 | The vast majority of situations work out like this. This interaction is common, and generally positive. 100 | 101 | > Alex: "Yeah I used X and it was really crazy!" 102 | 103 | > Patt (not a maintainer): "Hey, could you not use that word? What about 'ridiculous' instead?" 104 | 105 | > Alex: "oh sorry, sure." -> edits old comment to say "it was really confusing!" 106 | 107 | #### The Maintainer Case 108 | 109 | Sometimes, though, you need to get maintainers involved. Maintainers will do their best to resolve conflicts, but people who were harmed by something **will take priority**. 110 | 111 | > Patt: "Honestly, sometimes I just really hate using $library and anyone who uses it probably sucks at their job." 112 | 113 | > Alex: "Whoa there, could you dial it back a bit? There's a CoC thing about attacking folks' tech use like that." 114 | 115 | > Patt: "I'm not attacking anyone, what's your problem?" 116 | 117 | > Alex: "@maintainers hey uh. Can someone look at this issue? Patt is getting a bit aggro. I tried to nudge them about it, but nope." 118 | 119 | > KeeperOfCommitBits: (on issue) "Hey Patt, maintainer here. Could you tone it down? This sort of attack is really not okay in this space." 120 | 121 | > Patt: "Leave me alone I haven't said anything bad wtf is wrong with you." 122 | 123 | > KeeperOfCommitBits: (deletes user's comment), "@patt I mean it. Please refer to the CoC over at (URL to this CoC) if you have questions, but you can consider this an actual warning. I'd appreciate it if you reworded your messages in this thread, since they made folks there uncomfortable. Let's try and be kind, yeah?" 124 | 125 | > Patt: "@keeperofbits Okay sorry. I'm just frustrated and I'm kinda burnt out and I guess I got carried away. I'll DM Alex a note apologising and edit my messages. Sorry for the trouble." 126 | 127 | > KeeperOfCommitBits: "@patt Thanks for that. I hear you on the stress. Burnout sucks :/. Have a good one!" 128 | 129 | #### The Nope Case 130 | 131 | > PepeTheFrog🐸: "Hi, I am a literal actual nazi and I think white supremacists are quite fashionable." 132 | 133 | > Patt: "NOOOOPE. OH NOPE NOPE." 134 | 135 | > Alex: "JFC NO. NOPE. @keeperofbits NOPE NOPE LOOK HERE" 136 | 137 | > KeeperOfCommitBits: "👀 Nope. NOPE NOPE NOPE. 🔥" 138 | 139 | > PepeTheFrog🐸 has been banned from all organisation or user repositories belonging to KeeperOfCommitBits. 140 | 141 | ## Attribution 142 | 143 | This Code of Conduct was generated using [WeAllJS Code of Conduct Generator](https://npm.im/weallbehave), which is based on the [WeAllJS Code of 144 | Conduct](https://wealljs.org/code-of-conduct), which is itself based on 145 | [Contributor Covenant](http://contributor-covenant.org), version 1.4, available 146 | at 147 | [http://contributor-covenant.org/version/1/4](http://contributor-covenant.org/version/1/4), 148 | and the LGBTQ in Technology Slack [Code of 149 | Conduct](http://lgbtq.technology/coc.html). 150 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thank you so much for your interest in contributing! All types of contributions are encouraged and valued. See below for different ways to help, and details about how this project handles them! 4 | 5 | Please make sure to read the relevant section before making your contribution! It will make it a lot easier for us maintainers to make the most of it and smooth out the experience for all involved. 💚 6 | 7 | The [Project Team](#join-the-project-team) looks forward to your contributions.~ 8 | 9 | ## How do I... 10 | 11 | * Ask or Say Something 🤔🐛😱 12 | * [Request Support](#request-support) 13 | * [Report an Error or Bug](#report-an-error-or-bug) 14 | * [Request a Feature](#request-a-feature) 15 | * Make Something 🤓👩🏽‍💻📜🍳 16 | * [Project Setup](#project-setup) 17 | * [Contribute Documentation](#contribute-documentation) 18 | * [Contribute Code](#contribute-code) 19 | * Manage Something ✅🙆🏼💃👔 20 | * [Provide Support on Issues](#provide-support-on-issues) 21 | * [Label Issues](#label-issues) 22 | * [Clean Up Issues and PRs](#clean-up-issues-and-prs) 23 | * [Review Pull Requests](#review-pull-requests) 24 | * [Merge Pull Requests](#merge-pull-requests) 25 | * [Tag a Release](#tag-a-release) 26 | * [Join the Project Team](#join-the-project-team) 27 | * [Add a Guide Like This One To My Project](#attribution) 🤖😻👻 28 | 29 | ## Request Support 30 | 31 | If you have a question about this project, how to use it, or just need clarification about something: 32 | 33 | * Open an Issue at https://github.com/daviddarnes/alembic/issues 34 | * Provide as much context as you can about what you're running into. 35 | * Provide project and platform versions (jekyll, ruby, etc), depending on what seems relevant. If not, please be ready to provide that information if maintainers ask for it. 36 | 37 | Once it's filed: 38 | 39 | * The project team will [label the issue](#label-issues). 40 | * Someone will try to have a response soon. 41 | * If you or the maintainers don't respond to an issue for 30 days, the [issue will be closed](#clean-up-issues-and-prs). If you want to come back to it, reply (once, please), and we'll reopen the existing issue. Please avoid filing new issues as extensions of one you already made. 42 | 43 | ## Report an Error or Bug 44 | 45 | If you run into an error or bug with the project: 46 | 47 | * Open an Issue at https://github.com/daviddarnes/alembic/issues 48 | * Include *reproduction steps* that someone else can follow to recreate the bug or error on their own. 49 | * Provide project and platform versions (jekyll, ruby, etc), depending on what seems relevant. If not, please be ready to provide that information if maintainers ask for it. 50 | 51 | Once it's filed: 52 | 53 | * The project team will [label the issue](#label-issues). 54 | * A team member will try to reproduce the issue with your provided steps. If there are no repro steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced. 55 | * If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#contribute-code). 56 | * If you or the maintainers don't respond to an issue for 30 days, the [issue will be closed](#clean-up-issues-and-prs). If you want to come back to it, reply (once, please), and we'll reopen the existing issue. Please avoid filing new issues as extensions of one you already made. 57 | * `critical` issues may be left open, depending on perceived immediacy and severity, even past the 30 day deadline. 58 | 59 | ## Request a Feature 60 | 61 | If the project doesn't do something you need or want it to do: 62 | 63 | * Open an Issue at https://github.com/daviddarnes/alembic/issues 64 | * Provide as much context as you can about what you're running into. 65 | * Please try and be clear about why existing features and alternatives would not work for you. 66 | 67 | Once it's filed: 68 | 69 | * The project team will [label the issue](#label-issues). 70 | * The project team will evaluate the feature request, possibly asking you more questions to understand its purpose and any relevant requirements. If the issue is closed, the team will convey their reasoning and suggest an alternative path forward. 71 | * If the feature request is accepted, it will be marked for implementation with `feature-accepted`, which can then be done by either by a core team member or by anyone in the community who wants to [contribute code](#contribute-code). 72 | 73 | Note: The team is unlikely to be able to accept every single feature request that is filed. Please understand if they need to say no. 74 | 75 | ## Project Setup 76 | 77 | So you wanna contribute some code! That's great! This project uses GitHub Pull Requests to manage contributions, so [read up on how to fork a GitHub project and file a PR](https://guides.github.com/activities/forking) if you've never done it before. 78 | 79 | If this seems like a lot or you aren't able to do all this setup, you might also be able to [edit the files directly](https://help.github.com/articles/editing-files-in-another-user-s-repository/) without having to do any of this setup. Yes, [even code](#contribute-code). 80 | 81 | If you want to go the usual route and run the project locally, though: 82 | 83 | * [Install bundler](hhttp://bundler.io/#getting-started) 84 | * [Fork the project](https://guides.github.com/activities/forking/#fork) 85 | 86 | Then in your terminal: 87 | * `$ bundle install` 88 | * `$ bundle exec jekyll serve --watch` 89 | 90 | And you should be ready to go! 91 | 92 | ## Contribute Documentation 93 | 94 | Documentation is a super important, critical part of this project. Docs are how we keep track of what we're doing, how, and why. It's how we stay on the same page about our policies. And it's how we tell others everything they need in order to be able to use this project -- or contribute to it. So thank you in advance. 95 | 96 | Documentation contributions of any size are welcome! Feel free to file a PR even if you're just rewording a sentence to be more clear, or fixing a spelling mistake! 97 | 98 | To contribute documentation: 99 | 100 | * [Set up the project](#project-setup). 101 | * Edit or add any relevant documentation. 102 | * Make sure your changes are formatted correctly and consistently with the rest of the documentation. 103 | * Re-read what you wrote, and run a spellchecker on it to make sure you didn't miss anything. 104 | * In your commit message(s), begin the first line with `docs: `. For example: `docs: Adding a doc contrib section to CONTRIBUTING.md`. 105 | * Write clear, concise commit message(s) using [conventional-changelog format](https://github.com/conventional-changelog/conventional-changelog-angular/blob/master/convention.md). Documentation commits should use `docs(): `. 106 | * Go to https://github.com/daviddarnes/alembic/pulls and open a new pull request with your changes. 107 | * If your PR is connected to an open issue, add a line in your PR's description that says `Fixes: #123`, where `#123` is the number of the issue you're fixing. 108 | 109 | Once you've filed the PR: 110 | 111 | * One or more maintainers will use GitHub's review feature to review your PR. 112 | * If the maintainer asks for any changes, edit your changes, push, and ask for another review. 113 | * If the maintainer decides to pass on your PR, they will thank you for the contribution and explain why they won't be accepting the changes. That's ok! We still really appreciate you taking the time to do it, and we don't take that lightly. 💚 114 | * If your PR gets accepted, it will be marked as such, and merged into the `master` branch soon after. Your contribution will be distributed to the masses next time the maintainers [tag a release](#tag-a-release) 115 | 116 | ## Contribute Code 117 | 118 | We like code commits a lot! They're super handy, and they keep the project going and doing the work it needs to do to be useful to others. 119 | 120 | Code contributions of just about any size are acceptable! 121 | 122 | The main difference between code contributions and documentation contributions is that contributing code requires inclusion of relevant tests for the code being added or changed. Contributions without accompanying tests will be held off until a test is added, unless the maintainers consider the specific tests to be either impossible, or way too much of a burden for such a contribution. 123 | 124 | To contribute code: 125 | 126 | * [Set up the project](#project-setup). 127 | * Make any necessary changes to the source code. 128 | * Include any [additional documentation](#contribute-documentation) the changes might need. 129 | * Write clear, concise commit message(s) using [conventional-changelog format](https://github.com/conventional-changelog/conventional-changelog-angular/blob/master/convention.md). 130 | * Go to https://github.com/daviddarnes/alembic/pulls and open a new pull request with your changes. 131 | * If your PR is connected to an open issue, add a line in your PR's description that says `Fixes: #123`, where `#123` is the number of the issue you're fixing. 132 | 133 | Once you've filed the PR: 134 | 135 | * One or more maintainers will use GitHub's review feature to review your PR. 136 | * If the maintainer asks for any changes, edit your changes, push, and ask for another review. Additional tags (such as `needs tests`) will be added depending on the review. 137 | * If the maintainer decides to pass on your PR, they will thank you for the contribution and explain why they won't be accepting the changes. That's ok! We still really appreciate you taking the time to do it, and we don't take that lightly. 💚 138 | * If your PR gets accepted, it will be marked as such, and merged into the `master` branch soon after. Your contribution will be distributed to the masses next time the maintainers publish an update. 139 | 140 | ## Provide Support on Issues 141 | 142 | [Needs Collaborator](#join-the-project-team): none 143 | 144 | Helping out other users with their questions is a really awesome way of contributing to any community. It's not uncommon for most of the issues on an open source projects being support-related questions by users trying to understand something they ran into, or find their way around a known bug. 145 | 146 | Sometimes, the `support` label will be added to things that turn out to actually be other things, like bugs or feature requests. In that case, suss out the details with the person who filed the original issue, add a comment explaining what the bug is, and change the label from `support` to `bug` or `feature`. If you can't do this yourself, @mention a maintainer so they can do it. 147 | 148 | In order to help other folks out with their questions: 149 | 150 | * Go to the issue tracker and [filter open issues by the `support` label](https://github.com/daviddarnes/alembic/issues?q=is%3Aopen+is%3Aissue+label%3Asupport). 151 | * Read through the list until you find something that you're familiar enough with to give an answer to. 152 | * Respond to the issue with whatever details are needed to clarify the question, or get more details about what's going on. 153 | * Once the discussion wraps up and things are clarified, either close the issue, or ask the original issue filer (or a maintainer) to close it for you. 154 | 155 | Some notes on picking up support issues: 156 | 157 | * Avoid responding to issues you don't know you can answer accurately. 158 | * As much as possible, try to refer to past issues with accepted answers. Link to them from your replies with the `#123` format. 159 | * Be kind and patient with users -- often, folks who have run into confusing things might be upset or impatient. This is ok. Try to understand where they're coming from, and if you're too uncomfortable with the tone, feel free to stay away or withdraw from the issue. (note: if the user is outright hostile or is violating the CoC, [refer to the Code of Conduct](CODE_OF_CONDUCT.md) to resolve the conflict). 160 | 161 | ## Label Issues 162 | 163 | [Needs Collaborator](#join-the-project-team): Issue Tracker 164 | 165 | One of the most important tasks in handling issues is labelling them usefully and accurately. All other tasks involving issues ultimately rely on the issue being classified in such a way that relevant parties looking to do their own tasks can find them quickly and easily. 166 | 167 | In order to label issues, [open up the list of unlabelled issues](https://github.com/daviddarnes/alembic/issues?q=is%3Aopen+is%3Aissue+no%3Alabel) and, **from newest to oldest**, read through each one and apply issue labels according to the table below. If you're unsure about what label to apply, skip the issue and try the next one: don't feel obligated to label each and every issue yourself! 168 | 169 | Label | Apply When | Notes 170 | --- | --- | --- 171 | `bug` | Cases where the code (or documentation) is behaving in a way it wasn't intended to. | If something is happening that surprises the *user* but does not go against the way the code is designed, it should use the `enhancement` label. 172 | `critical` | Added to `bug` issues if the problem described makes the code completely unusable in a common situation. | 173 | `documentation` | Added to issues or pull requests that affect any of the documentation for the project. | Can be combined with other labels, such as `bug` or `enhancement`. 174 | `duplicate` | Added to issues or PRs that refer to the exact same issue as another one that's been previously labeled. | Duplicate issues should be marked and closed right away, with a message referencing the issue it's a duplicate of (with `#123`) 175 | `enhancement` | Added to [feature requests](#request-a-feature), PRs, or documentation issues that are purely additive: the code or docs currently work as expected, but a change is being requested or suggested. | 176 | `help wanted` | Applied by [Committers](#join-the-project-team) to issues and PRs that they would like to get outside help for. Generally, this means it's lower priority for the maintainer team to itself implement, but that the community is encouraged to pick up if they so desire | Never applied on first-pass labelling. 177 | `in progress` | Applied by [Committers](#join-the-project-team) to PRs that are pending some work before they're ready for review. | The original PR submitter should @mention the team member that applied the label once the PR is complete. 178 | `starter` | Applied by [Committers](#join-the-project-team) to issues that they consider good introductions to the project for people who have not contributed before. These are not necessarily "easy", but rather focused around how much context is necessary in order to understand what needs to be done for this project in particular. | Existing project members are expected to stay away from these unless they increase in priority. 179 | `support` | This issue is either asking a question about how to use the project, clarifying the reason for unexpected behaviour, or possibly reporting a `bug` but does not have enough detail yet to determine whether it would count as such. | The label should be switched to `bug` if reliable reproduction steps are provided. Issues primarily with unintended configurations of a user's environment are not considered bugs, even if they cause crashes. 180 | `wontfix` | Labellers may apply this label to issues that clearly have nothing at all to do with the project or are otherwise entirely outside of its scope/sphere of influence. [Committers](#join-the-project-team) may apply this label and close an issue or PR if they decide to pass on an otherwise relevant issue. | The issue or PR should be closed as soon as the label is applied, and a clear explanation provided of why the label was used. Contributors are free to contest the labelling, but the decision ultimately falls on committers as to whether to accept something or not. 181 | 182 | ## Clean Up Issues and PRs 183 | 184 | [Needs Collaborator](#join-the-project-team): Issue Tracker 185 | 186 | Issues and PRs can go stale after a while. Maybe they're abandoned. Maybe the team will just plain not have time to address them any time soon. 187 | 188 | In these cases, they should be closed until they're brought up again or the interaction starts over. 189 | 190 | To clean up issues and PRs: 191 | 192 | * Search the issue tracker for issues or PRs, and add the term `updated:<=YYYY-MM-DD`, where the date is 30 days before today. 193 | * Go through each issue *from oldest to newest*, and close them if **all of the following are true**: 194 | * not opened by a maintainer 195 | * not marked as `critical` 196 | * not marked as `starter` or `help wanted` (these might stick around for a while, in general, as they're intended to be available) 197 | * no explicit messages in the comments asking for it to be left open 198 | * does not belong to a milestone 199 | * Leave a message when closing saying "Cleaning up stale issue. Please reopen or ping us if and when you're ready to resume this. See https://github.com/daviddarnes/alembic/blob/latest/CONTRIBUTING.md#clean-up-issues-and-prs for more details." 200 | 201 | ## Review Pull Requests 202 | 203 | [Needs Collaborator](#join-the-project-team): Issue Tracker 204 | 205 | While anyone can comment on a PR, add feedback, etc, PRs are only *approved* by team members with Issue Tracker or higher permissions. 206 | 207 | PR reviews use [GitHub's own review feature](https://help.github.com/articles/about-pull-request-reviews/), which manages comments, approval, and review iteration. 208 | 209 | Some notes: 210 | 211 | * You may ask for minor changes ("nitpicks"), but consider whether they are really blockers to merging: try to err on the side of "approve, with comments". 212 | * *ALL PULL REQUESTS* should be covered by a test: either by a previously-failing test, an existing test that covers the entire functionality of the submitted code, or new tests to verify any new/changed behaviour. All tests must also pass and follow established conventions. Test coverage should not drop, unless the specific case is considered reasonable by maintainers. 213 | * Please make sure you're familiar with the code or documentation being updated, unless it's a minor change (spellchecking, minor formatting, etc). You may @mention another project member who you think is better suited for the review, but still provide a non-approving review of your own. 214 | * Be extra kind: people who submit code/doc contributions are putting themselves in a pretty vulnerable position, and have put time and care into what they've done (even if that's not obvious to you!) -- always respond with respect, be understanding, but don't feel like you need to sacrifice your standards for their sake, either. Just don't be a jerk about it? 215 | 216 | ## Join the Project Team 217 | 218 | ### Ways to Join 219 | 220 | There are many ways to contribute! Most of them don't require any official status unless otherwise noted. That said, there's a couple of positions that grant special repository abilities, and this section describes how they're granted and what they do. 221 | 222 | All of the below positions are granted based on the project team's needs, as well as their consensus opinion about whether they would like to work with the person and think that they would fit well into that position. The process is relatively informal, and it's likely that people who express interest in participating can just be granted the permissions they'd like. 223 | 224 | You can spot a collaborator on the repo by looking for the `[Collaborator]` or `[Owner]` tags next to their names. 225 | 226 | Permission | Description 227 | --- | --- 228 | Issue Tracker | Granted to contributors who express a strong interest in spending time on the project's issue tracker. These tasks are mainly [labelling issues](#label-issues), [cleaning up old ones](#clean-up-issues-and-prs), and [reviewing pull requests](#review-pull-requests), as well as all the usual things non-team-member contributors can do. Issue handlers should not merge pull requests, tag releases, or directly commit code themselves: that should still be done through the usual pull request process. Becoming an Issue Handler means the project team trusts you to understand enough of the team's process and context to implement it on the issue tracker. 229 | Committer | Granted to contributors who want to handle the actual pull request merges, tagging new versions, etc. Committers should have a good level of familiarity with the codebase, and enough context to understand the implications of various changes, as well as a good sense of the will and expectations of the project team. 230 | Admin/Owner | Granted to people ultimately responsible for the project, its community, etc. 231 | 232 | ## Attribution 233 | 234 | This guide was generated using the WeAllJS `CONTRIBUTING.md` generator. [Make your own](https://npm.im/weallcontribute)! 235 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | buy_me_a_coffee: daviddarnes 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Report a bug you've encountered 4 | title: "[Bug]: Please add a title" 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Summary 11 | A clear and concise description of what the bug is. 12 | 13 | ## To Reproduce 14 | Steps to reproduce the behaviour: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | ## Expected behaviour 21 | A clear and concise description of what you expected to happen. 22 | 23 | ## Screenshots 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | ## Environment 27 | - Ruby version: [e.g. 2.7.0] 28 | - Jekyll version: [e.g. 4.1.0] 29 | - Theme version: [e.g. 4.1.0] 30 | 31 | ## Browser(s) 32 | - OS: [e.g. iOS] 33 | - Browser [e.g. chrome, safari] 34 | - Version [e.g. 22] 35 | 36 | ## Additional context 37 | Add any other context about the problem here. 38 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Propose an idea or feature for this project 4 | title: "[Proposal]: Please add a title" 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Summary 11 | A clear and concise description of what the problem is. Is your feature request related to a problem? 12 | 13 | ## Proposed solution 14 | A clear and concise description of what you want to happen. 15 | 16 | ## Other considerations 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | ## Additional context 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/help-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Help request 3 | about: Ask for help or have a question 4 | title: "[Question]: Please add a title" 5 | labels: question 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Summary 11 | A clear and concise description of what your question is. 12 | 13 | ## Screenshots 14 | If applicable, add screenshots to help explain your problem. 15 | 16 | ## Additional context 17 | Add any other context about the problem here. 18 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | **Please read the [contributing guidelines](https://github.com/daviddarnes/alembic/blob/master/.github/CONTRIBUTING.md) and [code of conduct](https://github.com/daviddarnes/alembic/blob/master/.github/CODE_OF_CONDUCT.md) before creating a pull request.** 2 | 3 | Please prefix your pull request with one of the following: **[Feature]** **[Fix]** **[Enhancement]**. 4 | 5 | If the pull request is a **fix** please **link to the related issue**, all bugs must have an [an issue created](https://github.com/daviddarnes/alembic/issues/new) before a fix is provided. 6 | 7 | If the pull request is a **feature** please **provide a summary of how it works**, as well as documentation in the [readme](https://github.com/daviddarnes/alembic/blob/master/README.md). 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site/ 2 | .sass-cache/ 3 | .jekyll-cache/ 4 | .jekyll-metadata 5 | alembic-jekyll-theme-*.gem 6 | Gemfile.lock 7 | **/Gemfile.lock 8 | 9 | -------------------------------------------------------------------------------- /404.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "404" 3 | excerpt: "Page Not Found" 4 | permalink: 404.html 5 | indexing: false 6 | sitemap: false 7 | --- 8 | 9 | Sorry, but the page could not be found. 10 | 11 | Are you looking for: 12 | 13 | {% include nav-default.html %} 14 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | alembic.darn.es 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | gemspec 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 David Darnes 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Alembic](https://alembic.darn.es/) 2 | [![Gem Version](https://badge.fury.io/rb/alembic-jekyll-theme.svg)](https://badge.fury.io/rb/alembic-jekyll-theme) 3 | 4 | ⚗ A Jekyll boilerplate theme designed to be a starting point for any Jekyll website. 5 | 6 | ![Screenshot](https://raw.githubusercontent.com/daviddarnes/alembic/master/screenshot.png) 7 | 8 | [](https://buymeacoffee.com/daviddarnes#support) 9 | 10 | ## Contents 11 | - [About](#about) 12 | - [Features](#features) 13 | - [Examples](#examples) 14 | - [Installation](#installation) 15 | - [Customising](#customising) 16 | - [Configuration](#configuration) 17 | - [Gem dependency settings](#gem-dependency-settings) 18 | - [Site settings](#site-settings) 19 | - [Site performance settings](#site-performance-settings) 20 | - [Site navigation](#site-navigation) 21 | - [Custom fonts](#custom-fonts) 22 | - [Using includes](#using-includes) 23 | - [Page layouts](#page-layouts) 24 | - [Page and Post options](#page-and-post-options) 25 | - [Credits](#credits) 26 | 27 | ## About 28 | 29 | **Alembic is a starting point for [Jekyll](https://jekyllrb.com/) projects. Rather than starting from scratch, this boilerplate theme is designed to get rolling immediately. Install it, configure it, tweak it, push it.** 30 | 31 | ## Features 32 | 33 | - Available as a **theme gem** and **GitHub Pages** theme 34 | - Clear and elegant design that can be used out of the box or as solid starting point 35 | - Tested in all major browsers, including **IE and Edge** 36 | - Built in **Service Worker** so it can work offline and on slow connections 37 | - **Configurable colours** and typography in a single settings file 38 | - Extensive set of **shortcodes** to include various elements; such as buttons, icons, figure images and more 39 | - Solid **typographic framework** from [Sassline](https://sassline.com/) 40 | - Configurable navigation via a single file 41 | - Modular Jekyll components 42 | - Post category support in the form of a single post index page grouped by category 43 | - Built in live search using JavaScript 44 | - **Contact form** built in using [Formspree](https://formspree.io/) or [Netlify Forms](https://www.netlify.com/features/#forms) 45 | - Designed with **[Siteleaf](http://www.siteleaf.com/)** in mind 46 | - Has 9 of the most popular networks as performant sharing buttons 47 | - Has documentation 48 | 49 | ## Examples 50 | 51 | Here are a few examples of Alembic out in the wild being used in a variety of ways: 52 | 53 | - [billmei.net](https://billmei.net/) 54 | - [bawejakunal.github.io](https://bawejakunal.github.io/) 55 | - [case2111.github.io](https://case2111.github.io/) 56 | - [karateca.org](https://www.karateca.org/) 57 | 58 | ## Installation 59 | 60 | ### Quick setup 61 | 62 | To give you a running start I've put together some starter kits that you can download, fork or even deploy immediately: 63 | 64 | - Vanilla Jekyll starter kit: 65 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/daviddarnes/alembic-kit) 66 | - Forestry starter kit: 67 | [![Deploy to Forestry](https://assets.forestry.io/import-to-forestry.svg)](https://app.forestry.io/quick-start?repo=daviddarnes/alembic-forestry-kit&engine=jekyll) 68 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/daviddarnes/alembic-forestry-kit) 69 | - Netlify CMS starter kit: 70 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/daviddarnes/alembic-netlifycms-kit&stack=cms) 71 | 72 | - GitHub Pages with remote theme kit - **[Download kit](https://github.com/daviddarnes/alembic-kit/archive/remote-theme.zip)** 73 | - Stackbit starter kit: 74 | [![Create with Stackbit](https://assets.stackbit.com/badge/create-with-stackbit.svg)](https://app.stackbit.com/create?theme=https://github.com/daviddarnes/alembic-stackbit-kit) 75 | 76 | ### As a Jekyll theme 77 | 78 | 1. Add `gem "alembic-jekyll-theme"` to your `Gemfile` to add the theme as a dependancy 79 | 2. Run the command `bundle install` in the root of project to install the theme and its dependancies 80 | 3. Add `theme: alembic-jekyll-theme` to your `_config.yml` file to set the site theme 81 | 4. Run `bundle exec jekyll serve` to build and serve your site 82 | 5. Done! Use the [configuration](#configuration) documentation and the example [`_config.yml`](https://github.com/daviddarnes/alembic/blob/master/_config.yml) file to set things like the navigation, contact form and social sharing buttons 83 | 84 | ### As a GitHub Pages remote theme 85 | 86 | 1. Add `gem "jekyll-remote-theme"` to your `Gemfile` to add the theme as a dependancy 87 | 2. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy 88 | 3. Add `jekyll-remote-theme` to the list of `plugins` in your `_config.yml` file 89 | 4. Add `remote_theme: daviddarnes/alembic@main` to your `_config.yml` file to set the site theme 90 | 5. Run `bundle exec jekyll serve` to build and serve your site 91 | 6. Done! Use the [configuration](#configuration) documentation and the example [`_config.yml`](https://github.com/daviddarnes/alembic/blob/master/_config.yml) file to set things like the navigation, contact form and social sharing buttons 92 | 93 | ### As a Boilerplate / Fork 94 | 95 | _(deprecated, not recommended)_ 96 | 97 | 1. [Fork the repo](https://github.com/daviddarnes/alembic#fork-destination-box) 98 | 2. Replace the `Gemfile` with one stating all the gems used in your project 99 | 3. Delete the following unnecessary files/folders: `.github`, `LICENSE`, `screenshot.png`, `CNAME` and `alembic-jekyll-theme.gemspec` 100 | 4. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy 101 | 5. Run `bundle exec jekyll serve` to build and serve your site 102 | 6. Done! Use the [configuration](#configuration) documentation and the example [`_config.yml`](https://github.com/daviddarnes/alembic/blob/master/_config.yml) file to set things like the navigation, contact form and social sharing buttons 103 | 104 | ## Customising 105 | 106 | When using Alembic as a theme means you can take advantage of the file overriding method. This allows you to overwrite any file in this theme with your own custom file, by matching the file name and path. The most common example of this would be if you want to add your own styles or change the core style settings. 107 | 108 | To add your own styles copy the [`styles.scss`](https://github.com/daviddarnes/alembic/blob/master/assets/styles.scss) into your own project with the same file path (`assets/styles.scss`). From there you can add your own styles, you can even optionally ignore the theme styles by removing the `@import "alembic";` line. 109 | 110 | If you're looking to set your own colours and fonts you can overwrite them by matching the variable names from the [`_settings.scss`](https://github.com/daviddarnes/alembic/blob/master/_sass/_settings.scss) file in your own `styles.scss`, make sure to state them before the `@import "alembic";` line so they take effect. The settings are a mixture of custom variables and settings from [Sassline](https://medium.com/@jakegiltsoff/sassline-v2-0-e424b2881e7e) - follow the link to find out how to configure the typographic settings. 111 | 112 | ## Configuration 113 | 114 | There are a number of optional settings for you to configure. Use the example [`_config.yml`](https://github.com/daviddarnes/alembic/blob/master/_config.yml) file in the repo and use the documentation below to configure your site: 115 | 116 | ### Gem dependency settings 117 | 118 | `twitter`, `author` and `social` values will need to be changed to the projects' social information or removed. Look for the `Gem settings` comment within the `/_config.yml` file. These values are for the [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag) - follow the link to find out more. 119 | 120 | ### Site settings 121 | 122 | You'll need to change the `description`, `title` and `url` to match with the project. You'll also need to replace the logos, default social and default offline images in the `/assets/` directory with your own graphics. Setting the site language can be done with `lang`, the theme will default to `en-US`. The `email` needs to be changed to the email you want to receive contact form enquires with. The `disqus` value can be changed to your project username on [Disqus](https://disqus.com), remove this from the `/_config.yml` file if you don't want comments enabled. Look for the `Site settings` comment within the `/_config.yml` file. The `repo` setting is optional, for now, and can be removed entirely, if you wish. 123 | 124 | Google Analytics can be enabled via the site configuration too. Add your tracking ID to the `/_config.yml` file in the following method: `google_analytics: 'UA-XXXXXXXX-1'`. By default all IPs of site visitors are anonymous to maintain a level of privacy for the audience. If you wish to turn this off set the `google_analytics_anonymize_ip` key to `false`. 125 | 126 | Date format can be customised in the `/_config.yml` with the option `date_format` (please refer to Liquid date filters documentation for learning about formatting possibilities). Only placeholder formatting is supported, do not try to use ordinal dates introduced in Jekyll 3.8. 127 | 128 | The `short_name` option within `/_config.yml` is to add a custom name to the site's web application counterpart. When the website is added to a device this name will appear alonside the app icon. The short name will default to the site title if this isn't set. 129 | 130 | ### Site performance settings 131 | 132 | Alembic comes with a couple of options to enhance the speed and overall performance of the site you build upon it. 133 | 134 | By default the built in Service Worker is enabled, and will work on a 'network first' method. Meaning if there's no internet connection the content the Service Worker has cached will be used until the connection comes back. It will always look for a live version of the code first. To disable the Service Worker add an option called `service_worker` with a value of `false` in the `/_config.yml` file. 135 | 136 | Another option to speed up Alembic is to enable inline CSS, which is off by default. You can enable this by setting `css_inline: true` inside your `/_config.yml` file. By switching to inline styles you bypass the use `/assets/styles.scss`, any custom styles will need to be added in `/_includes/site-styles.html` or in a new custom file. 137 | 138 | Please note that these options aren't a "silver bullet" for making your site faster, make sure to audit and debug your site to get the best performance for your situation. 139 | 140 | ### Site navigation 141 | 142 | There are a total of 4 different navigation types: 143 | 144 | - `navigation_header`: The links shown in the header (it is also used on the 404 page) 145 | - `navigation_footer`: The links shown in the footer 146 | - `social_links`: The social icon links that are shown in the sidebar 147 | - `sharing_links`: The social sharing buttons that are shown at the bottom of blog posts 148 | 149 | All navigations can be edited using the `_config.yml` file. To see example usage either look for the `Site navigation` comment within the `/_config.yml` file or see [the nav-share.html include](#nav-sharehtml). 150 | 151 | If there are no items for the `navigation_header` or `navigation_footer`, they will fallback to a list of pages within the site. The `social_navigation` properties should either be one that is already in the list (so `Twitter` or `Facebook`) or a regular `link`, this is so an icon can be set for the link. 152 | 153 | ### Custom fonts 154 | 155 | Alembic comes with custom fonts served from Google fonts. By default it requests Merriweather but this can be any font from any provider assuming it supports requesting fonts in the same manner and does not require javascript. 156 | 157 | This can be configured under the `custom_fonts` key. 158 | 159 | - `urls`: The urls supplied to you from your font provider (eg https://fonts.googleapis.com/css2?family=Merriweather). For best performance try to use as few urls as possible 160 | - `preconnect`: (optional) If your font provider serves the font files from another domain it can be useful to make a connection to that domain in advance. For example google load the font files from fonts.gstatic.com. This can be omitted if not required 161 | 162 | If you want to customise this further you can find the include for custom fonts in `_includes/site-custom-fonts.html`. 163 | 164 | ## Using includes 165 | 166 | There are 2 main types of includes: ones designed for the site and ones that are designed as shortcodes. Here are a list of the shortcode includes: 167 | 168 | ### `button.html` 169 | A button that can link to a page of any kind. 170 | 171 | Example usage: `{% include button.html text="I'm a button" link="https://david.darn.es" %}` 172 | 173 | Available options: 174 | - `text`: The text of the button _required_ 175 | - `link`: The link that the button goes to _required_ 176 | - `icon`: The icon that is added to the end of the button text 177 | - `color`: The colour of the button 178 | 179 | ### `figure.html` 180 | An image with optional caption. 181 | 182 | Example usage: `{% include figure.html image="/uploads/feature-image.jpg" caption="Check out my photo" %}` 183 | 184 | Available options: 185 | - `image`: The image shown _required_ 186 | - `caption`: A caption to explain the image 187 | - `position`: The position of the image; `left`, `right` or `center` 188 | - `width` & `height`: Optional width and height attributes of the containing image 189 | 190 | ### `icon.html` 191 | An icon. 192 | 193 | Example usage: `{% include icon.html id="twitter" %}` 194 | 195 | Available options: 196 | - `id`: The reference for the icon _required_ 197 | - `title`: The accessible label for the icon 198 | - `color`: The desired colour of the icon 199 | - `width` & `height`: Width and height attributes for the icon, default is `16` 200 | 201 | ### `nav-share.html` 202 | A set of buttons that share the current page to various social networks, which is controlled within the `_config.yml` file under the `sharing_links` keyword. 203 | 204 | Example usage: `{% include nav-share.html %}` 205 | 206 | Available options: 207 | ``` yml 208 | Twitter: "#1DA1F2" 209 | facebook: "#3B5998" 210 | Pinterest: "#BD081C" 211 | LinkedIn: "#0077B5" 212 | tumblr: "#36465D" 213 | Reddit: "#FF4500" 214 | HackerNews: "#ff6600" 215 | DesignerNews: "#2D72D9" 216 | Email: true 217 | ``` 218 | 219 | _The first item is the name of the network (must be one of the ones stated above) and the second is the colour of the button. To remove a button remove the line of the same name._ 220 | 221 | ### `video.html` 222 | A YouTube video. 223 | 224 | Example usage: `{% include video.html id="zrkcGL5H3MU" %}` 225 | 226 | Available options: 227 | - `id`: The YouTube ID for the video _required_ 228 | 229 | ### `map.html` 230 | A Google map. _See Google [My Maps](https://www.google.com/mymaps)_ 231 | 232 | Example usage: `{% include map.html id="1UT-2Z-Vg_MG_TrS5X2p8SthsJhc" %}` 233 | 234 | Available options: 235 | - `id`: The map ID for the map _required_ 236 | 237 | ### `site-form.html` 238 | Adds a contact form to the page. This can be used with [Formspree](https://formspree.io/) or [Netlify Forms](https://www.netlify.com/docs/form-handling/) depending on your setup. 239 | 240 | Example usage: `{% include site-form.html %}` 241 | 242 | Available options: 243 | - `netlify_form=true`: Set whether you would like to use Netlify Forms, otherwise the form will default to Formspree 244 | - `name`: Give the form a name, by default the form is called "Contact". The name will be reflected when form submissions come through in Netlify or in your email client. The name is also used in the label and input elements for accessibility 245 | 246 | 247 | Use the `email` option in the `/_config.yml` to change to the desired email. 248 | 249 | ### `site-search.html` 250 | Adds a search form to the page. 251 | 252 | Example usage: `{% include site-search.html %}` 253 | 254 | This include has no options. This include will add a block of javascript to the page and javascript reference in order for the search field to work correctly. 255 | 256 | ### `site-before-start.html` & `site-before-end.html` 257 | Optional html includes for adding scripts, css, js or any embed code you wish to add to every page without the need to overwrite the entire `default.html` template. 258 | 259 | **Example usage:** These are different to other includes as they are designed to be overwritten. If you create a `site-before-start.html` file in the `_includes/` the contents of the file will be included immediately before the closing `` tag. If you create a `site-before-end.html` file the contents of the file will be included immediately before the closing `` tag. 260 | 261 | ## Page layouts 262 | 263 | As well as `page`, `post`, `blog`, there are a few alternative layouts that can be used on pages: 264 | 265 | - `categories`: Shows all posts grouped by category, with an index of categories in a left hand sidebar 266 | - `search`: Adds a search field to the page as well as a simplified version of the sidebar to allow more focus on the search results 267 | 268 | ## Page and Post options 269 | 270 | There are some more specific options you can apply when creating a page or a post: 271 | 272 | - `aside: true`: Adds a sidebar to the page or post, this is false by default and will not appear 273 | - `comments: false`: Turns off comments for that post 274 | - `feature_image: "/uploads/feature-image.jpg"`: Adds a full width feature image at the top of the page 275 | - `feature_text: "Example text"`: Adds text to the top of the page as a full width feature with solid colour; supports markdown. This can be used in conjunction with the `feature_image` option to create a feature image with text over it 276 | - `indexing: false`: Adds a `noindex` meta element to the `` to stop crawler bots from indexing the page, used on the 404 page 277 | 278 | > **Note:** The Post List Page options are actually in the collection data within the `_config.yml` file. 279 | 280 | ## Credits 281 | 282 | - Thanks to [Simple Icons](https://simpleicons.org/) for providing the brand icons, by [Dan Leech](https://twitter.com/bathtype) 283 | - Thanks to [Sassline](https://sassline.com/) for the typographic basis, by [Jake Giltsoff](https://twitter.com/jakegiltsoff) 284 | - Thanks to [Flexbox mixin](https://github.com/mastastealth/sass-flex-mixin) by [Brian Franco](https://twitter.com/brianfranco) 285 | - Thanks to [Normalize](https://necolas.github.io/normalize.css/) by [Nicolas Gallagher](https://twitter.com/necolas) and [Jonathan Neal](https://twitter.com/jon_neal). 286 | - Thanks to [pygments-css](http://richleland.github.io/pygments-css/) for the autumn syntax highlighting, by [Rich Leland](https://twitter.com/richleland) 287 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Site configuration 2 | # 1. Files excluded from Jekyll builds 3 | # 2. Installed Gems 4 | # 3. Gem settings 5 | # 4. Jekyll settings 6 | # 5. Collections 7 | # 6. Jekyll collections settings 8 | # 7. Site settings 9 | # 8. Site favicons & manifest icons 10 | # 9. Site navigation 11 | 12 | # 1. Files excluded from Jekyll builds 13 | exclude: 14 | - README.md 15 | - CODE_OF_CONDUCT.md 16 | - CONTRIBUTING.md 17 | - screenshot.png 18 | - LICENSE 19 | - CNAME 20 | - Gemfile 21 | - Gemfile.lock 22 | - alembic-jekyll-theme.gemspec 23 | - .jekyll-cache 24 | 25 | # 2. Installed Gems 26 | plugins: 27 | - jekyll-sitemap 28 | - jekyll-mentions 29 | - jekyll-paginate 30 | - jekyll-seo-tag 31 | - jekyll-redirect-from 32 | - jekyll-feed 33 | - jekyll-commonmark 34 | - jekyll-include-cache 35 | - jemoji 36 | 37 | # 3. Gem settings 38 | paginate: 2 # jekyll-paginate > items per page 39 | paginate_path: blog/page:num # jekyll-paginate > blog page 40 | jekyll-mentions: https://twitter.com # jekyll-mentions > service used when @replying 41 | twitter: 42 | username: DavidDarnes # jekyll-seo-tag > Owners twitter username 43 | author: DavidDarnes # jekyll-seo-tag > default author 44 | social: # jekyll-seo-tag > social overrides 45 | name: David Darnes # jekyll-seo-tag > real name 46 | links: # jekyll-seo-tag > social aliases (sameAs) 47 | - https://twitter.com/DavidDarnes 48 | - https://www.facebook.com/daviddarnes 49 | - https://www.linkedin.com/in/daviddarnes 50 | - https://github.com/daviddarnes 51 | # markdown: CommonMark # Markdown parse settings, CommonMark performs slightly better an others in build time 52 | # commonmark: 53 | # options: ["SMART", "FOOTNOTES"] 54 | # extensions: ["strikethrough", "autolink", "table"] 55 | 56 | # 4. Jekyll settings 57 | sass: 58 | style: compressed # Style compression 59 | permalink: pretty # Permalink style (/YYYY/MM/DD/page-name/) 60 | excerpt_separator: # Marks end of excerpt in posts 61 | timezone: Europe/London # Timezone for blog posts and alike 62 | 63 | # 5. Collections 64 | collections: 65 | posts: 66 | title: Posts # Needed for Siteleaf 67 | output: true 68 | description: "My thoughts and ideas" # The post list page content 69 | feature_text: | 70 | Welcome to the blog 71 | feature_image: "https://picsum.photos/2560/600?image=866" 72 | 73 | # 6. Jekyll collections settings 74 | defaults: 75 | - 76 | scope: 77 | path: "" 78 | values: 79 | image: "/assets/default-social-image.png" # Default image for sharing 80 | - 81 | scope: 82 | path: "" 83 | type: "posts" 84 | values: 85 | layout: post # Set the default layout for posts 86 | - 87 | scope: 88 | path: "" 89 | type: "pages" 90 | values: 91 | layout: page # Set the default layout for pages 92 | 93 | # 7. Site settings 94 | encoding: utf-8 # Make sure the encoding is right 95 | lang: en-GB # Set the site language 96 | title: "Alembic" # Site name or title, also used in jekyll-seo-tag 97 | logo: "/assets/logos/logo.svg" # Site logo, also used in jekyll-seo-tag 98 | description: "Alembic is a starting point for Jekyll projects. Rather than starting from scratch, this boilerplate is designed to get the ball rolling immediately" # Site description and default description, also used in jekyll-seo-tag 99 | url: "https://alembic.darn.es" # Site url, also used in jekyll-seo-tag 100 | baseurl: "" 101 | repo: "https://github.com/daviddarnes/alembic" 102 | email: "me@daviddarnes.com" 103 | # disqus: "alembic-1" # Blog post comments, uncomment the option and set the site ID from your Disqus account 104 | # date_format: "%-d %B %Y" # Blog post date formatting using placeholder formatting 105 | # google_analytics: "" 106 | # google_analytics_anonymize_ip: "" 107 | # service_worker: false # Will turn off the service worker if set to false 108 | # short_name: "Al" # The web application short name, defaults to the site title 109 | css_inline: true # Will insert all styles into a single 5 | -------------------------------------------------------------------------------- /_includes/site-sw.html: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /_includes/video.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /_layouts/blog.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | {% include site-header.html %} 6 | 7 |
8 | 9 |
10 | 11 |
12 | 13 | {% if paginator.posts %} 14 | {% assign collectiondata = site.collections | where: "label", page.collectionpage | first %} 15 |

{{ collectiondata.title }}

16 | {{ collectiondata.description | markdownify }} 17 | 18 | {% else %} 19 |

{{ page.title }}

20 | {{ content }} 21 | 22 | {% endif %} 23 | 24 |
25 | 26 | {% include post-list.html %} 27 | 28 |
29 | 30 | {% if page.aside == true %}{% include site-aside.html %}{% endif %} 31 | 32 |
33 | 34 | {% include site-footer.html %} 35 | -------------------------------------------------------------------------------- /_layouts/categories.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | {% include site-header.html %} 6 | 7 |
8 | 9 |
10 | 11 |
12 | 13 |

{{ page.title }}

14 | 15 | {{ content }} 16 | 17 |
18 | 19 | {% include post-categories.html %} 20 | 21 |
22 | 23 | {% if page.aside == true %}{% include site-aside.html align="left" %}{% endif %} 24 | 25 |
26 | 27 | {% include site-footer.html %} 28 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {% if page.indexing == false %} 10 | 11 | {% endif %} 12 | 13 | {% if page.collectionpage %} 14 | {% seo title=false %} 15 | 16 | {% assign collectiondata = site.collections | where: "label", page.collectionpage | first %} 17 | {{ collectiondata.title }} - {{ site.title }} 18 | 19 | 20 | 21 | {% else %} 22 | {% seo %} 23 | {% endif %} 24 | {% if site.fonts.preconnect_urls %} 25 | {% for url in site.fonts.preconnect_urls %} 26 | 27 | {% endfor %} 28 | {% endif %} 29 | 30 | 31 | 32 | 33 | {% if site.css_inline == true %} 34 | {% include site-styles.html %} 35 | {% else %} 36 | 37 | {% endif %} 38 | 39 | {% if site.favicons or site.avatarurl %}{% include site-favicons.html %}{% endif %} 40 | 41 | {% if site.google_analytics %}{% include site-analytics.html %}{% endif %} 42 | 43 | {% include site-fonts.html %} 44 | 45 | {% include site-before-start.html %} 46 | 47 | 48 | 49 | {% include site-icons.svg %} 50 | 51 | {{ content }} 52 | 53 | {% if site.service_worker != false %}{% include site-sw.html %}{% endif %} 54 | 55 | {% include site-before-end.html %} 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | {% include site-header.html %} 6 | 7 |
8 | 9 |
10 | 11 |

{{ page.title }}

12 | 13 | {{ content }} 14 | 15 |
16 | 17 | {% if page.aside == true %}{% include site-aside.html %}{% endif %} 18 | 19 |
20 | 21 | {% include site-footer.html %} 22 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | {% include site-header.html %} 6 | 7 |
8 | 9 |
10 | 11 |

{{ page.title }}

12 | {% include post-meta.html %} 13 | {{ content }} 14 | 15 | {% include nav-share.html %} 16 | 17 | {% include post-comments.html %} 18 | 19 |
20 | 21 | {% if page.aside == true %}{% include site-aside.html %}{% endif %} 22 | 23 |
24 | 25 | {% include site-footer.html %} 26 | -------------------------------------------------------------------------------- /_posts/2016-08-27-example-post-one.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Description of an Alembic 3 | categories: 4 | - General 5 | - External sources 6 | feature_image: "https://picsum.photos/2560/600?image=872" 7 | --- 8 | 9 | The complete distilling apparatus consists of three parts: the "cucurbit" (Arabic ḳarʿa, Greek βίκος), the still pot containing the liquid to be distilled, which is heated by a flame; the "head" or "cap" (Arabic anbiḳ, Greek ἄμβιξ) which fits over the mouth of the cucurbit to receive the vapors, with an attached downward-sloping "tube" (Greek σωλήν), leading to the "receiver" (Arabic ḳābila, Greek ἄγγος or φιάλη) container. 10 | 11 | 12 | 13 | Retorts have the "cap" and the "cucurbit" made into one. The anbik is also called the raʾs (head) of the cucurbit. The liquid in the cucurbit is heated or boiled; the vapour rises into the anbik, where it cools by contact with the walls and condenses, running down the spout into the receiver. A modern descendant of the alembic is the pot still, used to produce distilled beverages. 14 | 15 | _Originally from [Alembic - Wikipedia](https://en.wikipedia.org/wiki/Alembic)_ 16 | -------------------------------------------------------------------------------- /_posts/2016-08-28-example-post-two.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: History of the Alembic 3 | categories: 4 | - History 5 | - External sources 6 | feature_text: | 7 | The History of the Alembic tool 8 | --- 9 | 10 | Dioscorides' ambix (described in his De materia medica) is a helmet-shaped lid for gathering condensed mercury. For Athenaeus (~ 225 C.E.) it is a bottle or flask. For later chemists it denotes various parts of crude distillation devices. 11 | 12 | 13 | 14 | Alembic drawings appear in works of Cleopatra the Alchemist, Synesius, and Zosimos of Panopolis. There were alembics with two (dibikos) and three (tribikos) receivers.[4] According to Zosimos of Panopolis, the alembic was invented by Mary the Jewess.[5] 15 | 16 | The anbik is described by Ibn al-Awwam in his Kitab al-Filaha (Book of Agriculture), where he explains how rose-water is distilled. Amongst others, it is mentioned in the Mafatih al-Ulum (Key of Sciences) of Khwarizmi and the Kitab al-Asrar (Book of Secrets) of Al-Razi. Some illustrations occur in the Latin translations of works which are attributed to Geber.[2] 17 | 18 | _Originally from [Alembic - Wikipedia](https://en.wikipedia.org/wiki/Alembic)_ 19 | -------------------------------------------------------------------------------- /_posts/2016-08-29-example-post-three.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Description of a Pot Still 3 | categories: 4 | - General 5 | excerpt: | 6 | A pot still is a type of still used in distilling spirits such as whisky or brandy. Heat is applied directly to the pot containing the wash (for whisky) or wine (for brandy). 7 | feature_text: | 8 | ## The Pot Still 9 | The modern pot still is a descendant of the alembic, an earlier distillation device 10 | feature_image: "https://picsum.photos/2560/600?image=733" 11 | image: "https://picsum.photos/2560/600?image=733" 12 | --- 13 | 14 | A pot still is a type of still used in distilling spirits such as whisky or brandy. Heat is applied directly to the pot containing the wash (for whisky) or wine (for brandy). This is called a batch distillation (as opposed to a continuous distillation). 15 | 16 | At standard atmospheric pressure, alcohol boils at 78 °C (172 °F), while water boils at 100 °C (212 °F). During distillation, the vapour contains more alcohol than the liquid. When the vapours are condensed, the resulting liquid contains a higher concentration of alcohol. In the pot still, the alcohol and water vapour combine with esters and flow from the still through the condensing coil. There they condense into the first distillation liquid, the so-called "low wines". The low wines have a strength of about 25–35% alcohol by volume, and flow into a second still. It is then distilled a second time to produce the colourless spirit, collected at about 70% alcohol by volume. Colour is added through maturation in an oak aging barrel, and develops over time. 17 | 18 | The modern pot still is a descendant of the alembic, an earlier distillation device. 19 | -------------------------------------------------------------------------------- /_sass/_flex.scss: -------------------------------------------------------------------------------- 1 | // Flexbox Mixins 2 | // http://philipwalton.github.io/solved-by-flexbox/ 3 | // https://github.com/philipwalton/solved-by-flexbox 4 | // 5 | // Copyright (c) 2013 Brian Franco 6 | // 7 | // Permission is hereby granted, free of charge, to any person obtaining a 8 | // copy of this software and associated documentation files (the 9 | // "Software"), to deal in the Software without restriction, including 10 | // without limitation the rights to use, copy, modify, merge, publish, 11 | // distribute, sublicense, and/or sell copies of the Software, and to 12 | // permit persons to whom the Software is furnished to do so, subject to 13 | // the following conditions: 14 | // The above copyright notice and this permission notice shall be included 15 | // in all copies or substantial portions of the Software. 16 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 17 | // OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | // IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 20 | // CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 21 | // TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 22 | // SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | // 24 | // This is a set of mixins for those who want to mess around with flexbox 25 | // using the native support of current browsers. For full support table 26 | // check: http://caniuse.com/flexbox 27 | // 28 | // Basically this will use: 29 | // 30 | // * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping) 31 | // * Final standards syntax (FF, Safari, Chrome, IE11, Opera) 32 | // 33 | // This was inspired by: 34 | // 35 | // * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ 36 | // 37 | // With help from: 38 | // 39 | // * http://w3.org/tr/css3-flexbox/ 40 | // * http://the-echoplex.net/flexyboxes/ 41 | // * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx 42 | // * http://css-tricks.com/using-flexbox/ 43 | // * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ 44 | // * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes 45 | 46 | //---------------------------------------------------------------------- 47 | 48 | // Flexbox Containers 49 | // 50 | // The 'flex' value causes an element to generate a block-level flex 51 | // container box. 52 | // 53 | // The 'inline-flex' value causes an element to generate a inline-level 54 | // flex container box. 55 | // 56 | // display: flex | inline-flex 57 | // 58 | // http://w3.org/tr/css3-flexbox/#flex-containers 59 | // 60 | // (Placeholder selectors for each type, for those who rather @extend) 61 | 62 | @mixin flexbox { 63 | display: -webkit-box; 64 | display: -webkit-flex; 65 | display: -moz-flex; 66 | display: -ms-flexbox; 67 | display: flex; 68 | } 69 | 70 | %flexbox { @include flexbox; } 71 | 72 | //---------------------------------- 73 | 74 | @mixin inline-flex { 75 | display: -webkit-inline-box; 76 | display: -webkit-inline-flex; 77 | display: -moz-inline-flex; 78 | display: -ms-inline-flexbox; 79 | display: inline-flex; 80 | } 81 | 82 | %inline-flex { @include inline-flex; } 83 | 84 | //---------------------------------------------------------------------- 85 | 86 | // Flexbox Direction 87 | // 88 | // The 'flex-direction' property specifies how flex items are placed in 89 | // the flex container, by setting the direction of the flex container's 90 | // main axis. This determines the direction that flex items are laid out in. 91 | // 92 | // Values: row | row-reverse | column | column-reverse 93 | // Default: row 94 | // 95 | // http://w3.org/tr/css3-flexbox/#flex-direction-property 96 | 97 | @mixin flex-direction($value: row) { 98 | @if $value == row-reverse { 99 | -webkit-box-direction: reverse; 100 | -webkit-box-orient: horizontal; 101 | } @else if $value == column { 102 | -webkit-box-direction: normal; 103 | -webkit-box-orient: vertical; 104 | } @else if $value == column-reverse { 105 | -webkit-box-direction: reverse; 106 | -webkit-box-orient: vertical; 107 | } @else { 108 | -webkit-box-direction: normal; 109 | -webkit-box-orient: horizontal; 110 | } 111 | -webkit-flex-direction: $value; 112 | -moz-flex-direction: $value; 113 | -ms-flex-direction: $value; 114 | flex-direction: $value; 115 | } 116 | // Shorter version: 117 | @mixin flex-dir($args...) { @include flex-direction($args...); } 118 | 119 | //---------------------------------------------------------------------- 120 | 121 | // Flexbox Wrap 122 | // 123 | // The 'flex-wrap' property controls whether the flex container is single-line 124 | // or multi-line, and the direction of the cross-axis, which determines 125 | // the direction new lines are stacked in. 126 | // 127 | // Values: nowrap | wrap | wrap-reverse 128 | // Default: nowrap 129 | // 130 | // http://w3.org/tr/css3-flexbox/#flex-wrap-property 131 | 132 | @mixin flex-wrap($value: nowrap) { 133 | // No Webkit Box fallback. 134 | -webkit-flex-wrap: $value; 135 | -moz-flex-wrap: $value; 136 | @if $value == nowrap { 137 | -ms-flex-wrap: none; 138 | } @else { 139 | -ms-flex-wrap: $value; 140 | } 141 | flex-wrap: $value; 142 | } 143 | 144 | //---------------------------------------------------------------------- 145 | 146 | // Flexbox Flow (shorthand) 147 | // 148 | // The 'flex-flow' property is a shorthand for setting the 'flex-direction' 149 | // and 'flex-wrap' properties, which together define the flex container's 150 | // main and cross axes. 151 | // 152 | // Values: | 153 | // Default: row nowrap 154 | // 155 | // http://w3.org/tr/css3-flexbox/#flex-flow-property 156 | 157 | @mixin flex-flow($values: (row nowrap)) { 158 | // No Webkit Box fallback. 159 | -webkit-flex-flow: $values; 160 | -moz-flex-flow: $values; 161 | -ms-flex-flow: $values; 162 | flex-flow: $values; 163 | } 164 | 165 | //---------------------------------------------------------------------- 166 | 167 | // Flexbox Order 168 | // 169 | // The 'order' property controls the order in which flex items appear within 170 | // their flex container, by assigning them to ordinal groups. 171 | // 172 | // Default: 0 173 | // 174 | // http://w3.org/tr/css3-flexbox/#order-property 175 | 176 | @mixin order($int: 0) { 177 | -webkit-box-ordinal-group: $int + 1; 178 | -webkit-order: $int; 179 | -moz-order: $int; 180 | -ms-flex-order: $int; 181 | order: $int; 182 | } 183 | 184 | //---------------------------------------------------------------------- 185 | 186 | // Flexbox Grow 187 | // 188 | // The 'flex-grow' property sets the flex grow factor. Negative numbers 189 | // are invalid. 190 | // 191 | // Default: 0 192 | // 193 | // http://w3.org/tr/css3-flexbox/#flex-grow-property 194 | 195 | @mixin flex-grow($int: 0) { 196 | -webkit-box-flex: $int; 197 | -webkit-flex-grow: $int; 198 | -moz-flex-grow: $int; 199 | -ms-flex-positive: $int; 200 | flex-grow: $int; 201 | } 202 | 203 | //---------------------------------------------------------------------- 204 | 205 | // Flexbox Shrink 206 | // 207 | // The 'flex-shrink' property sets the flex shrink factor. Negative numbers 208 | // are invalid. 209 | // 210 | // Default: 1 211 | // 212 | // http://w3.org/tr/css3-flexbox/#flex-shrink-property 213 | 214 | @mixin flex-shrink($int: 1) { 215 | -webkit-flex-shrink: $int; 216 | -moz-flex-shrink: $int; 217 | -ms-flex-negative: $int; 218 | flex-shrink: $int; 219 | } 220 | 221 | //---------------------------------------------------------------------- 222 | 223 | // Flexbox Basis 224 | // 225 | // The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 226 | // 227 | // Values: Like "width" 228 | // Default: auto 229 | // 230 | // http://www.w3.org/TR/css3-flexbox/#flex-basis-property 231 | 232 | @mixin flex-basis($value: auto) { 233 | -webkit-flex-basis: $value; 234 | -moz-flex-basis: $value; 235 | -ms-flex-preferred-size: $value; 236 | flex-basis: $value; 237 | } 238 | 239 | //---------------------------------------------------------------------- 240 | 241 | // Flexbox "Flex" (shorthand) 242 | // 243 | // The 'flex' property specifies the components of a flexible length: the 244 | // flex grow factor and flex shrink factor, and the flex basis. When an 245 | // element is a flex item, 'flex' is consulted instead of the main size 246 | // property to determine the main size of the element. If an element is 247 | // not a flex item, 'flex' has no effect. 248 | // 249 | // Values: none | || 250 | // Default: See individual properties (1 1 0). 251 | // 252 | // http://w3.org/tr/css3-flexbox/#flex-property 253 | 254 | @mixin flex($fg: 1, $fs: null, $fb: null) { 255 | 256 | // Set a variable to be used by box-flex properties 257 | $fg-boxflex: $fg; 258 | 259 | // Box-Flex only supports a flex-grow value so let's grab the 260 | // first item in the list and just return that. 261 | @if type-of($fg) == 'list' { 262 | $fg-boxflex: nth($fg, 1); 263 | } 264 | 265 | -webkit-box-flex: $fg-boxflex; 266 | -webkit-flex: $fg $fs $fb; 267 | -moz-box-flex: $fg-boxflex; 268 | -moz-flex: $fg $fs $fb; 269 | -ms-flex: $fg $fs $fb; 270 | flex: $fg $fs $fb; 271 | } 272 | 273 | //---------------------------------------------------------------------- 274 | 275 | // Flexbox Justify Content 276 | // 277 | // The 'justify-content' property aligns flex items along the main axis 278 | // of the current line of the flex container. This is done after any flexible 279 | // lengths and any auto margins have been resolved. Typically it helps distribute 280 | // extra free space leftover when either all the flex items on a line are 281 | // inflexible, or are flexible but have reached their maximum size. It also 282 | // exerts some control over the alignment of items when they overflow the line. 283 | // 284 | // Note: 'space-*' values not supported in older syntaxes. 285 | // 286 | // Values: flex-start | flex-end | center | space-between | space-around 287 | // Default: flex-start 288 | // 289 | // http://w3.org/tr/css3-flexbox/#justify-content-property 290 | 291 | @mixin justify-content($value: flex-start) { 292 | @if $value == flex-start { 293 | -webkit-box-pack: start; 294 | -ms-flex-pack: start; 295 | } @else if $value == flex-end { 296 | -webkit-box-pack: end; 297 | -ms-flex-pack: end; 298 | } @else if $value == space-between { 299 | -webkit-box-pack: justify; 300 | -ms-flex-pack: justify; 301 | } @else if $value == space-around { 302 | -ms-flex-pack: distribute; 303 | } @else { 304 | -webkit-box-pack: $value; 305 | -ms-flex-pack: $value; 306 | } 307 | -webkit-justify-content: $value; 308 | -moz-justify-content: $value; 309 | justify-content: $value; 310 | } 311 | // Shorter version: 312 | @mixin flex-just($args...) { @include justify-content($args...); } 313 | 314 | //---------------------------------------------------------------------- 315 | 316 | // Flexbox Align Items 317 | // 318 | // Flex items can be aligned in the cross axis of the current line of the 319 | // flex container, similar to 'justify-content' but in the perpendicular 320 | // direction. 'align-items' sets the default alignment for all of the flex 321 | // container's items, including anonymous flex items. 'align-self' allows 322 | // this default alignment to be overridden for individual flex items. (For 323 | // anonymous flex items, 'align-self' always matches the value of 'align-items' 324 | // on their associated flex container.) 325 | // 326 | // Values: flex-start | flex-end | center | baseline | stretch 327 | // Default: stretch 328 | // 329 | // http://w3.org/tr/css3-flexbox/#align-items-property 330 | 331 | @mixin align-items($value: stretch) { 332 | @if $value == flex-start { 333 | -webkit-box-align: start; 334 | -ms-flex-align: start; 335 | } @else if $value == flex-end { 336 | -webkit-box-align: end; 337 | -ms-flex-align: end; 338 | } @else { 339 | -webkit-box-align: $value; 340 | -ms-flex-align: $value; 341 | } 342 | -webkit-align-items: $value; 343 | -moz-align-items: $value; 344 | align-items: $value; 345 | } 346 | 347 | //---------------------------------- 348 | 349 | // Flexbox Align Self 350 | // 351 | // Values: auto | flex-start | flex-end | center | baseline | stretch 352 | // Default: auto 353 | 354 | @mixin align-self($value: auto) { 355 | // No Webkit Box Fallback. 356 | -webkit-align-self: $value; 357 | -moz-align-self: $value; 358 | @if $value == flex-start { 359 | -ms-flex-item-align: start; 360 | } @else if $value == flex-end { 361 | -ms-flex-item-align: end; 362 | } @else { 363 | -ms-flex-item-align: $value; 364 | } 365 | align-self: $value; 366 | } 367 | 368 | //---------------------------------------------------------------------- 369 | 370 | // Flexbox Align Content 371 | // 372 | // The 'align-content' property aligns a flex container's lines within the 373 | // flex container when there is extra space in the cross-axis, similar to 374 | // how 'justify-content' aligns individual items within the main-axis. Note, 375 | // this property has no effect when the flexbox has only a single line. 376 | // 377 | // Values: flex-start | flex-end | center | space-between | space-around | stretch 378 | // Default: stretch 379 | // 380 | // http://w3.org/tr/css3-flexbox/#align-content-property 381 | 382 | @mixin align-content($value: stretch) { 383 | // No Webkit Box Fallback. 384 | -webkit-align-content: $value; 385 | -moz-align-content: $value; 386 | @if $value == flex-start { 387 | -ms-flex-line-pack: start; 388 | } @else if $value == flex-end { 389 | -ms-flex-line-pack: end; 390 | } @else { 391 | -ms-flex-line-pack: $value; 392 | } 393 | align-content: $value; 394 | } 395 | -------------------------------------------------------------------------------- /_sass/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Prevent adjustments of font size after orientation changes in IE and iOS. 6 | */ 7 | 8 | html { 9 | font-family: sans-serif; /* 1 */ 10 | -ms-text-size-adjust: 100%; /* 2 */ 11 | -webkit-text-size-adjust: 100%; /* 2 */ 12 | } 13 | 14 | /** 15 | * Remove the margin in all browsers (opinionated). 16 | */ 17 | 18 | body { 19 | margin: 0; 20 | } 21 | 22 | /* HTML5 display definitions 23 | ========================================================================== */ 24 | 25 | /** 26 | * Add the correct display in IE 9-. 27 | * 1. Add the correct display in Edge, IE, and Firefox. 28 | * 2. Add the correct display in IE. 29 | */ 30 | 31 | article, 32 | aside, 33 | details, /* 1 */ 34 | figcaption, 35 | figure, 36 | footer, 37 | header, 38 | main, /* 2 */ 39 | menu, 40 | nav, 41 | section, 42 | summary { /* 1 */ 43 | display: block; 44 | } 45 | 46 | /** 47 | * Add the correct display in IE 9-. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; 55 | } 56 | 57 | /** 58 | * Add the correct display in iOS 4-7. 59 | */ 60 | 61 | audio:not([controls]) { 62 | display: none; 63 | height: 0; 64 | } 65 | 66 | /** 67 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 68 | */ 69 | 70 | progress { 71 | vertical-align: baseline; 72 | } 73 | 74 | /** 75 | * Add the correct display in IE 10-. 76 | * 1. Add the correct display in IE. 77 | */ 78 | 79 | template, /* 1 */ 80 | [hidden] { 81 | display: none; 82 | } 83 | 84 | /* Links 85 | ========================================================================== */ 86 | 87 | /** 88 | * 1. Remove the gray background on active links in IE 10. 89 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 90 | */ 91 | 92 | a { 93 | background-color: transparent; /* 1 */ 94 | -webkit-text-decoration-skip: objects; /* 2 */ 95 | } 96 | 97 | /** 98 | * Remove the outline on focused links when they are also active or hovered 99 | * in all browsers (opinionated). 100 | */ 101 | 102 | a:active, 103 | a:hover { 104 | outline-width: 0; 105 | } 106 | 107 | /* Text-level semantics 108 | ========================================================================== */ 109 | 110 | /** 111 | * 1. Remove the bottom border in Firefox 39-. 112 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 113 | */ 114 | 115 | abbr[title] { 116 | border-bottom: none; /* 1 */ 117 | text-decoration: underline; /* 2 */ 118 | text-decoration: underline dotted; /* 2 */ 119 | } 120 | 121 | /** 122 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: inherit; 128 | } 129 | 130 | /** 131 | * Add the correct font weight in Chrome, Edge, and Safari. 132 | */ 133 | 134 | b, 135 | strong { 136 | font-weight: bolder; 137 | } 138 | 139 | /** 140 | * Add the correct font style in Android 4.3-. 141 | */ 142 | 143 | dfn { 144 | font-style: italic; 145 | } 146 | 147 | /** 148 | * Correct the font size and margin on `h1` elements within `section` and 149 | * `article` contexts in Chrome, Firefox, and Safari. 150 | */ 151 | 152 | h1 { 153 | font-size: 2em; 154 | margin: 0.67em 0; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size: 80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size: 75%; 182 | line-height: 0; 183 | position: relative; 184 | vertical-align: baseline; 185 | } 186 | 187 | sub { 188 | bottom: -0.25em; 189 | } 190 | 191 | sup { 192 | top: -0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Remove the border on images inside links in IE 10-. 200 | */ 201 | 202 | img { 203 | border-style: none; 204 | } 205 | 206 | /** 207 | * Hide the overflow in IE. 208 | */ 209 | 210 | svg:not(:root) { 211 | overflow: hidden; 212 | } 213 | 214 | /* Grouping content 215 | ========================================================================== */ 216 | 217 | /** 218 | * 1. Correct the inheritance and scaling of font size in all browsers. 219 | * 2. Correct the odd `em` font sizing in all browsers. 220 | */ 221 | 222 | code, 223 | kbd, 224 | pre, 225 | samp { 226 | font-family: monospace, monospace; /* 1 */ 227 | font-size: 1em; /* 2 */ 228 | } 229 | 230 | /** 231 | * Add the correct margin in IE 8. 232 | */ 233 | 234 | figure { 235 | margin: 1em 40px; 236 | } 237 | 238 | /** 239 | * 1. Add the correct box sizing in Firefox. 240 | * 2. Show the overflow in Edge and IE. 241 | */ 242 | 243 | hr { 244 | box-sizing: content-box; /* 1 */ 245 | height: 0; /* 1 */ 246 | overflow: visible; /* 2 */ 247 | } 248 | 249 | /* Forms 250 | ========================================================================== */ 251 | 252 | /** 253 | * 1. Change font properties to `inherit` in all browsers (opinionated). 254 | * 2. Remove the margin in Firefox and Safari. 255 | */ 256 | 257 | button, 258 | input, 259 | select, 260 | textarea { 261 | font: inherit; /* 1 */ 262 | margin: 0; /* 2 */ 263 | } 264 | 265 | /** 266 | * Restore the font weight unset by the previous rule. 267 | */ 268 | 269 | optgroup { 270 | font-weight: bold; 271 | } 272 | 273 | /** 274 | * Show the overflow in IE. 275 | * 1. Show the overflow in Edge. 276 | */ 277 | 278 | button, 279 | input { /* 1 */ 280 | overflow: visible; 281 | } 282 | 283 | /** 284 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 285 | * 1. Remove the inheritance of text transform in Firefox. 286 | */ 287 | 288 | button, 289 | select { /* 1 */ 290 | text-transform: none; 291 | } 292 | 293 | /** 294 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 295 | * controls in Android 4. 296 | * 2. Correct the inability to style clickable types in iOS and Safari. 297 | */ 298 | 299 | button, 300 | html [type="button"], /* 1 */ 301 | [type="reset"], 302 | [type="submit"] { 303 | -webkit-appearance: button; /* 2 */ 304 | } 305 | 306 | /** 307 | * Remove the inner border and padding in Firefox. 308 | */ 309 | 310 | button::-moz-focus-inner, 311 | [type="button"]::-moz-focus-inner, 312 | [type="reset"]::-moz-focus-inner, 313 | [type="submit"]::-moz-focus-inner { 314 | border-style: none; 315 | padding: 0; 316 | } 317 | 318 | /** 319 | * Restore the focus styles unset by the previous rule. 320 | */ 321 | 322 | button:-moz-focusring, 323 | [type="button"]:-moz-focusring, 324 | [type="reset"]:-moz-focusring, 325 | [type="submit"]:-moz-focusring { 326 | outline: 1px dotted ButtonText; 327 | } 328 | 329 | /** 330 | * Change the border, margin, and padding in all browsers (opinionated). 331 | */ 332 | 333 | fieldset { 334 | border: 1px solid #c0c0c0; 335 | margin: 0 2px; 336 | padding: 0.35em 0.625em 0.75em; 337 | } 338 | 339 | /** 340 | * 1. Correct the text wrapping in Edge and IE. 341 | * 2. Correct the color inheritance from `fieldset` elements in IE. 342 | * 3. Remove the padding so developers are not caught out when they zero out 343 | * `fieldset` elements in all browsers. 344 | */ 345 | 346 | legend { 347 | box-sizing: border-box; /* 1 */ 348 | color: inherit; /* 2 */ 349 | display: table; /* 1 */ 350 | max-width: 100%; /* 1 */ 351 | padding: 0; /* 3 */ 352 | white-space: normal; /* 1 */ 353 | } 354 | 355 | /** 356 | * Remove the default vertical scrollbar in IE. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; 361 | } 362 | 363 | /** 364 | * 1. Add the correct box sizing in IE 10-. 365 | * 2. Remove the padding in IE 10-. 366 | */ 367 | 368 | [type="checkbox"], 369 | [type="radio"] { 370 | box-sizing: border-box; /* 1 */ 371 | padding: 0; /* 2 */ 372 | } 373 | 374 | /** 375 | * Correct the cursor style of increment and decrement buttons in Chrome. 376 | */ 377 | 378 | [type="number"]::-webkit-inner-spin-button, 379 | [type="number"]::-webkit-outer-spin-button { 380 | height: auto; 381 | } 382 | 383 | /** 384 | * 1. Correct the odd appearance in Chrome and Safari. 385 | * 2. Correct the outline style in Safari. 386 | */ 387 | 388 | [type="search"] { 389 | -webkit-appearance: textfield; /* 1 */ 390 | outline-offset: -2px; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. 395 | */ 396 | 397 | [type="search"]::-webkit-search-cancel-button, 398 | [type="search"]::-webkit-search-decoration { 399 | -webkit-appearance: none; 400 | } 401 | 402 | /** 403 | * Correct the text style of placeholders in Chrome, Edge, and Safari. 404 | */ 405 | 406 | ::-webkit-input-placeholder { 407 | color: inherit; 408 | opacity: 0.54; 409 | } 410 | 411 | /** 412 | * 1. Correct the inability to style clickable types in iOS and Safari. 413 | * 2. Change font properties to `inherit` in Safari. 414 | */ 415 | 416 | ::-webkit-file-upload-button { 417 | -webkit-appearance: button; /* 1 */ 418 | font: inherit; /* 2 */ 419 | } 420 | -------------------------------------------------------------------------------- /_sass/_sassline-base.scss: -------------------------------------------------------------------------------- 1 | // Import Sassline base SCSS files in order so variables are read correctly. 2 | @import "sassline-base/reset"; 3 | @import "sassline-base/variables"; 4 | @import "sassline-base/modular-scale"; 5 | @import "sassline-base/mixins"; 6 | @import "sassline-base/typography"; 7 | -------------------------------------------------------------------------------- /_sass/_settings.scss: -------------------------------------------------------------------------------- 1 | // Background colours 2 | $backgroundColour: #ffffff !default; 3 | $codeBackgroundColour: #fafafa !default; 4 | $featureBackgroundColour: #f9fafa !default; 5 | $accentColour: #05bf85 !default; 6 | 7 | // Text colours 8 | $headingColour: #242e2b !default; 9 | $bodyColour: #384743 !default; 10 | $linkColour: #05bf85 !default; 11 | $hoverColour: #008000 !default; 12 | $focusColour: #fa407a !default; 13 | $captionColour: #a8adac !default; 14 | $white: #ffffff !default; 15 | 16 | // Typography 17 | $bodytype: ( 18 | font-family: "Georgia, serif", 19 | regular: 400, 20 | bold: 700, 21 | italic: italic, 22 | cap-height: 0.75 23 | ) !default; 24 | 25 | $headingtype: ( 26 | font-family: '"Merriweather", serif', 27 | regular: 400, 28 | bold: 700, 29 | cap-height: 0.75 30 | ) !default; 31 | 32 | $monospacetype: ( 33 | font-family: "Menlo, monospace", 34 | regular: 400, 35 | cap-height: 0.68 36 | ) !default; 37 | 38 | // TIP: Load custom fonts in _config.yaml 39 | -------------------------------------------------------------------------------- /_sass/_syntax.scss: -------------------------------------------------------------------------------- 1 | .hll { background-color: #ffffcc } 2 | .c { color: #999988; font-style: italic } /* Comment */ 3 | .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 4 | .k { color: #000000; font-weight: bold } /* Keyword */ 5 | .o { color: #000000; font-weight: bold } /* Operator */ 6 | .cm { color: #999988; font-style: italic } /* Comment.Multiline */ 7 | .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ 8 | .c1 { color: #999988; font-style: italic } /* Comment.Single */ 9 | .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ 10 | .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 11 | .ge { color: #000000; font-style: italic } /* Generic.Emph */ 12 | .gr { color: #aa0000 } /* Generic.Error */ 13 | .gh { color: #999999 } /* Generic.Heading */ 14 | .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 15 | .go { color: #888888 } /* Generic.Output */ 16 | .gp { color: #555555 } /* Generic.Prompt */ 17 | .gs { font-weight: bold } /* Generic.Strong */ 18 | .gu { color: #aaaaaa } /* Generic.Subheading */ 19 | .gt { color: #aa0000 } /* Generic.Traceback */ 20 | .kc { color: #000000; font-weight: bold } /* Keyword.Constant */ 21 | .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ 22 | .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ 23 | .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ 24 | .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ 25 | .kt { color: #445588; font-weight: bold } /* Keyword.Type */ 26 | .m { color: #009999 } /* Literal.Number */ 27 | .s { color: #d01040 } /* Literal.String */ 28 | .na { color: #008080 } /* Name.Attribute */ 29 | .nb { color: #0086B3 } /* Name.Builtin */ 30 | .nc { color: #445588; font-weight: bold } /* Name.Class */ 31 | .no { color: #008080 } /* Name.Constant */ 32 | .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ 33 | .ni { color: #800080 } /* Name.Entity */ 34 | .ne { color: #990000; font-weight: bold } /* Name.Exception */ 35 | .nf { color: #990000; font-weight: bold } /* Name.Function */ 36 | .nl { color: #990000; font-weight: bold } /* Name.Label */ 37 | .nn { color: #555555 } /* Name.Namespace */ 38 | .nt { color: #000080 } /* Name.Tag */ 39 | .nv { color: #008080 } /* Name.Variable */ 40 | .ow { color: #000000; font-weight: bold } /* Operator.Word */ 41 | .w { color: #bbbbbb } /* Text.Whitespace */ 42 | .mf { color: #009999 } /* Literal.Number.Float */ 43 | .mh { color: #009999 } /* Literal.Number.Hex */ 44 | .mi { color: #009999 } /* Literal.Number.Integer */ 45 | .mo { color: #009999 } /* Literal.Number.Oct */ 46 | .sb { color: #d01040 } /* Literal.String.Backtick */ 47 | .sc { color: #d01040 } /* Literal.String.Char */ 48 | .sd { color: #d01040 } /* Literal.String.Doc */ 49 | .s2 { color: #d01040 } /* Literal.String.Double */ 50 | .se { color: #d01040 } /* Literal.String.Escape */ 51 | .sh { color: #d01040 } /* Literal.String.Heredoc */ 52 | .si { color: #d01040 } /* Literal.String.Interpol */ 53 | .sx { color: #d01040 } /* Literal.String.Other */ 54 | .sr { color: #009926 } /* Literal.String.Regex */ 55 | .s1 { color: #d01040 } /* Literal.String.Single */ 56 | .ss { color: #990073 } /* Literal.String.Symbol */ 57 | .bp { color: #999999 } /* Name.Builtin.Pseudo */ 58 | .vc { color: #008080 } /* Name.Variable.Class */ 59 | .vg { color: #008080 } /* Name.Variable.Global */ 60 | .vi { color: #008080 } /* Name.Variable.Instance */ 61 | .il { color: #009999 } /* Literal.Number.Integer.Long */ 62 | -------------------------------------------------------------------------------- /_sass/_theme.scss: -------------------------------------------------------------------------------- 1 | // Structural elements 2 | body { 3 | background: $backgroundColour; 4 | color: $bodyColour; 5 | height: 100%; 6 | display: flex; 7 | @include flex-direction(column); 8 | overflow-x: hidden; 9 | } 10 | 11 | .container { 12 | width: 90%; 13 | max-width: 1200px; 14 | margin: 0 auto; 15 | } 16 | 17 | 18 | // Header, feature and footer 19 | .header, 20 | .footer { 21 | .nav { 22 | text-align: right; 23 | } 24 | .logo { 25 | @include flex(0 0 auto); 26 | } 27 | .container { 28 | @include flexbox; 29 | @include flex-direction(row); 30 | @include justify-content(space-between); 31 | padding: 1rem 0; 32 | @include breakpoint(break-1) { 33 | @include align-items(center); 34 | } 35 | } 36 | } 37 | 38 | .header .nav { 39 | display: flex; 40 | flex-direction: column-reverse; 41 | align-items: flex-end; 42 | justify-content: flex-end; 43 | overflow: hidden; 44 | } 45 | 46 | .feature { 47 | padding-bottom: .4rem; 48 | margin-bottom: 1.6rem; 49 | text-align: center; 50 | background: $featureBackgroundColour; 51 | background-size: cover; 52 | background-position: center; 53 | .container { 54 | min-height: 35vh; 55 | max-width: 60%; 56 | @include flex-direction(column); 57 | @include justify-content(center); 58 | } 59 | } 60 | 61 | .logo { 62 | display: inline-block; 63 | line-height: 0; 64 | max-height: 4rem; 65 | @include flexbox; 66 | @include align-items(center); 67 | img { 68 | max-height: 5rem; 69 | } 70 | } 71 | 72 | .nav { 73 | a { 74 | padding: .2rem; 75 | } 76 | &--social a { 77 | display: inline-block; 78 | line-height: 1; 79 | } 80 | } 81 | 82 | .small { 83 | padding-top: .8rem; 84 | color: $captionColour; 85 | display: inline-block; 86 | } 87 | 88 | .footer { 89 | background: $headingColour; 90 | color: $captionColour; 91 | a { 92 | color: $captionColour; 93 | &:hover { 94 | color: $backgroundColour; 95 | } 96 | } 97 | .container { 98 | @include flex-wrap(wrap); 99 | } 100 | .small { 101 | padding-top: 0; 102 | } 103 | } 104 | 105 | 106 | // Pagination nav 107 | .nav--paginator { 108 | @include flexbox; 109 | @include justify-content(space-between); 110 | color: $captionColour; 111 | text-align: center; 112 | } 113 | 114 | .pagination { 115 | min-width: 20%; 116 | } 117 | 118 | 119 | // Main content 120 | .main { 121 | @include flexbox; 122 | @include flex-direction(column); 123 | @include flex(1, 0, auto); 124 | @include justify-content(flex-start); 125 | margin-bottom: 1.6rem; 126 | @include breakpoint(break-1) { 127 | @include justify-content(center); 128 | @include flex-direction(row); 129 | } 130 | } 131 | 132 | .header, 133 | .feature, 134 | .footer { 135 | @include flex(0, 0, auto); 136 | } 137 | 138 | .content { 139 | @include breakpoint(break-1) { 140 | width: 62%; 141 | } 142 | } 143 | 144 | .share .button { 145 | margin-right: .3rem; 146 | } 147 | 148 | .aside { 149 | @include breakpoint(break-1) { 150 | max-width: 34%; 151 | margin-left: 4%; 152 | @include flex(1, 0, auto); 153 | opacity: 0.5; 154 | transition: opacity .1s; 155 | .section { 156 | position: sticky; 157 | top: 0; 158 | } 159 | &--left { 160 | margin-left: 0; 161 | margin-right: 4%; 162 | order: -1; 163 | } 164 | &:hover { 165 | opacity: 1; 166 | } 167 | } 168 | } 169 | 170 | .section { 171 | margin: 0; 172 | } 173 | 174 | 175 | // Lists 176 | .list { 177 | list-style: none; 178 | &--nav { 179 | overflow: hidden; 180 | margin-bottom: var(--listHeight, 0); 181 | } 182 | .item--post, 183 | .item--result, 184 | .item--category { 185 | margin-left: 0; 186 | } 187 | } 188 | 189 | .item { 190 | &--nav { 191 | @include breakpoint(break-1) { 192 | margin-left: .4rem; 193 | display: inline-block; 194 | } 195 | &:first-of-type { 196 | margin-left: 0; 197 | } 198 | } 199 | &--current { 200 | a { 201 | color: $captionColour; 202 | } 203 | } 204 | } 205 | 206 | 207 | // Links, icons and images 208 | a .icon { 209 | transition: fill .1s; 210 | &:hover { 211 | fill: currentColor; 212 | } 213 | } 214 | 215 | .icon { 216 | vertical-align: middle; 217 | width: 1.1em; 218 | height: 1.1em; 219 | fill: CurrentColor; 220 | } 221 | 222 | // Media content 223 | img { 224 | max-width: 100%; 225 | height: auto; 226 | } 227 | 228 | .figure { 229 | line-height: 0; 230 | &--left { 231 | float: left; 232 | padding-right: .8rem; 233 | } 234 | &--right { 235 | float: right; 236 | text-align: right; 237 | padding-left: .8rem; 238 | } 239 | &--center { 240 | text-align: center; 241 | clear: both; 242 | } 243 | } 244 | 245 | .video, 246 | .map { 247 | position: relative; 248 | padding-bottom: 56.25%; 249 | height: 0; 250 | iframe { 251 | position: absolute; 252 | top: 0; 253 | left: 0; 254 | width: 100%; 255 | height: 100%; 256 | } 257 | } 258 | 259 | .map { 260 | padding-bottom: 70%; 261 | } 262 | 263 | .figure, 264 | .video, 265 | .map, 266 | .form { 267 | margin-bottom: .8rem; 268 | } 269 | 270 | audio, 271 | video { 272 | width: 100%; 273 | } 274 | 275 | 276 | // Form elements and buttons 277 | .form { 278 | position: relative; 279 | &__legend { 280 | font-style: italic; 281 | color: $captionColour; 282 | position: absolute; 283 | overflow: hidden; 284 | right: 0; 285 | clip: rect(0 0 0 0); 286 | } 287 | } 288 | 289 | button, 290 | .button, 291 | input[type="text"], 292 | input[type="email"], 293 | input[type="search"], 294 | input[type="submit"], 295 | input[type="color"], 296 | textarea, 297 | select { 298 | padding: .6rem 1.2rem; 299 | margin-bottom: .6rem; 300 | transition: color .1s, background-color .1s, border .1s; 301 | line-height: inherit; 302 | border: none; 303 | box-shadow: none; 304 | border-radius: 0; 305 | -webkit-appearance: none; 306 | .icon { 307 | margin: 0 0 .35rem; 308 | } 309 | } 310 | 311 | input[type="submit"], 312 | button, 313 | .button { 314 | cursor: pointer; 315 | display: inline-block; 316 | color: $backgroundColour; 317 | background: $accentColour; 318 | transition: box-shadow .1s; 319 | will-change: box-shadow; 320 | box-shadow: inset 0 0 0 2rem transparent; 321 | &:hover { 322 | box-shadow: inset 0 0 0 2rem rgba(0,0,0,0.25); 323 | } 324 | &:active, 325 | &:focus { 326 | box-shadow: inset 0 0 0 2rem rgba(0,0,0,0.25); 327 | } 328 | } 329 | 330 | .button--nav { 331 | @include breakpoint(break-1) { 332 | display: none; 333 | } 334 | background: none; 335 | color: $linkColour; 336 | margin-bottom: 0; 337 | min-height: 4rem; 338 | min-width: 4rem; 339 | &:hover, 340 | &:focus { 341 | box-shadow: none; 342 | color: $hoverColour; 343 | } 344 | } 345 | 346 | a, 347 | button, 348 | .button, 349 | input, 350 | textarea, 351 | select { 352 | &:focus, 353 | &:hover:focus { 354 | outline: solid .12rem $focusColour; 355 | outline-offset: -.12rem; 356 | } 357 | } 358 | 359 | a:hover:focus { 360 | outline: none; 361 | } 362 | 363 | input[type="text"], 364 | input[type="email"], 365 | input[type="search"], 366 | input[type="color"], 367 | textarea, 368 | select { 369 | width: 100%; 370 | border: 1px solid $captionColour; 371 | &:hover { 372 | border-color: $bodyColour; 373 | } 374 | } 375 | 376 | select { 377 | background: $codeBackgroundColour; 378 | } 379 | 380 | textarea { 381 | resize: vertical; 382 | } 383 | 384 | label { 385 | @include baseline($fontsize: zeta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: all); 386 | } 387 | 388 | code { 389 | padding: .12rem .2rem; 390 | color: $headingColour; 391 | } 392 | 393 | pre code { 394 | padding: 0; 395 | } 396 | 397 | .required { 398 | color: red; 399 | } 400 | 401 | ::-webkit-input-placeholder { 402 | opacity: 0.5; 403 | } 404 | ::-moz-placeholder { 405 | opacity: 0.5; 406 | } 407 | :-ms-input-placeholder { 408 | opacity: 0.5; 409 | } 410 | :-moz-placeholder { 411 | opacity: 0.5; 412 | } 413 | 414 | ::selection { 415 | background: $headingColour; 416 | color: $backgroundColour; 417 | text-shadow: none; 418 | } 419 | 420 | 421 | // Sassline overrides 422 | .typeset { 423 | a > code { 424 | text-shadow: none; 425 | } 426 | .button, 427 | button { 428 | background-image: none; 429 | text-shadow: none; 430 | color: $backgroundColour; 431 | &:hover, 432 | &:active, 433 | &:focus { 434 | background-image: none; 435 | color: $backgroundColour; 436 | } 437 | } 438 | hr { 439 | width: 100%; 440 | } 441 | li { 442 | > p { 443 | padding: 0; 444 | margin: 0; 445 | } 446 | } 447 | .nav a { 448 | padding-left: 0; 449 | padding-right: 0; 450 | margin-left: .2rem; 451 | margin-right: .2rem; 452 | } 453 | pre { 454 | white-space: pre; 455 | overflow-x: scroll; 456 | } 457 | } 458 | -------------------------------------------------------------------------------- /_sass/alembic.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // Import frameworks & theme styles 4 | @import 5 | "normalize", 6 | "settings", 7 | "sassline-base", 8 | "syntax", 9 | "flex", 10 | "theme" 11 | ; 12 | -------------------------------------------------------------------------------- /_sass/sassline-base/_mixins.scss: -------------------------------------------------------------------------------- 1 | // SCSS mixins 2 | // --------------------------------------- 3 | 4 | // Global variables used in mixins. 5 | 6 | // Number of breakpoints. 7 | $breakpoints-limit: length($breakpoints); 8 | 9 | // List of rootsizes, breakpoints, and max-widths. 10 | $sizes: map-values($rootsizes); 11 | $points: map-values($breakpoints); 12 | $line-widths: map-values($measures); 13 | $max-widths: map-values($maxwidths); 14 | 15 | 16 | // Breakpoints. Either set one to one of the breakpoint variables, or use a custom value for minor breakpoints. 17 | // Defaults to min-width, but both min->max and max-width are available too. 18 | // Parts based on https://gist.github.com/timknight/03e6335b8816aa534cf7 19 | @mixin breakpoint($break: 0, $max: 0) { 20 | // Type of break variable 21 | $value: type-of($break); 22 | 23 | // If it is a string (i.e. a breakpoint variable). 24 | @if $value == string { 25 | // If using 'break-1', 'break-2' etc output the correct breakpoints from map. 26 | @if map-has-key($breakpoints, $break) { 27 | @media screen and (min-width: #{map-get($breakpoints, $break) / 16 * 1em} ) { @content; } 28 | } @else { 29 | @warn "#{$break} is not a set breakpoint variable"; 30 | } 31 | 32 | // If it is a number, use this for the breakpoint. 33 | } @else if $value == number { 34 | // If using other numbers output value in ems either for min, min & max or max width breakpoints. 35 | $query: "all" !default; 36 | @if $break != 0 and $max != 0 { $query: "(min-width: #{$break / 16 * 1em}) and (max-width: #{$max / 16 * 1em})"; } 37 | @else if $break != 0 and $max == 0 { $query: "(min-width: #{$break / 16 * 1em})"; } 38 | @else if $break == 0 and $max != 0 { $query: "(max-width: #{$max / 16 * 1em})"; } 39 | @media #{$query} { @content; } 40 | 41 | } @else { 42 | @warn "#{$break} is not valid to use as a breakpoint"; 43 | } 44 | } 45 | 46 | // Root font-size in %, outputted in correct breakpoints. 47 | @mixin rootsize { 48 | font-size: nth($sizes, 1) / 16 * 100%; 49 | 50 | // Loop through breakpoints. 51 | @for $i from 2 through $breakpoints-limit { 52 | @media screen and (min-width: nth($points, $i) / 16 * 1em ) { 53 | font-size: nth($sizes, $i) / 16 * 100%; 54 | } 55 | } 56 | } 57 | 58 | // Max-widths for typeset containers, outputted in correct breakpoints. 59 | @mixin maxwidth($breakpoint: 0) { 60 | // Type of chosen variables. 61 | $break-value: type-of($breakpoint); 62 | 63 | // If specifying a breakpoint to use (and breakpoint exists). 64 | @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 { 65 | 66 | max-width: #{nth($max-widths, ($breakpoint + 1)) / nth($sizes, ($breakpoint + 1))}rem; 67 | 68 | } @else if $breakpoint == all { 69 | max-width: #{nth($max-widths, 1) / nth($sizes, 1)}rem; 70 | 71 | // Loop through breakpoints. 72 | @for $i from 2 through $breakpoints-limit { 73 | @media screen and (min-width: nth($points, $i) / 16 * 1em ) { 74 | max-width: #{nth($max-widths, $i) / nth($sizes, $i)}rem; 75 | } 76 | } 77 | } 78 | } 79 | 80 | // Set the measure for single columns, outputted in correct breakpoints. 81 | @mixin measure($breakpoint: 0) { 82 | // Type of chosen variables. 83 | $break-value: type-of($breakpoint); 84 | 85 | // If specifying a breakpoint to use (and breakpoint exists). 86 | @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 { 87 | 88 | max-width: #{nth($line-widths, ($breakpoint + 1)) / nth($sizes, ($breakpoint + 1))}rem; 89 | 90 | } @else if $breakpoint == all { 91 | max-width: #{nth($line-widths, 1) / nth($sizes, 1)}rem; 92 | 93 | // Loop through breakpoints. 94 | @for $i from 2 through $breakpoints-limit { 95 | @media screen and (min-width: nth($points, $i) / 16 * 1em ) { 96 | max-width: #{nth($line-widths, $i) / nth($sizes, $i)}rem; 97 | } 98 | } 99 | } 100 | } 101 | 102 | // Calculate percentage width of container to get optimal measure for main text columns. 103 | // Defaults to all breakpoints. 104 | // Note: will not output for base breakpoint as this comes from the 'measure' mixin. 105 | @mixin ideal-measure($breakpoint: 0, $gutter: 0, $main: true, $output: max-width) { 106 | // Type of chosen variables. 107 | $break-value: type-of($breakpoint); 108 | 109 | // If specifying a breakpoint to use (and breakpoint exists and is larger than 0). 110 | @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint > 0 { 111 | 112 | @if $gutter == small { 113 | $gutter: map-get($gutterwidths, small) * 2 / 1rem; 114 | } @else if $gutter == medium { 115 | $gutter: map-get($gutterwidths, medium) * 2 / 1rem; 116 | } @else if $gutter == large { 117 | $gutter: map-get($gutterwidths, large) * 2 / 1rem; 118 | } @else { 119 | $gutter: 0; 120 | } 121 | 122 | $rootsize: map-get($rootsizes, rootsize-#{$breakpoint}); 123 | $ideal-measure: map-get($measures, measure-#{$breakpoint}); 124 | $gutter-size: ($gutter * $rootsize); 125 | $container-width: map-get($maxwidths, width-#{$breakpoint}); 126 | 127 | $percentage: percentage(($ideal-measure + $gutter-size) / $container-width); 128 | 129 | @if $percentage < 55 { 130 | $percentage: 55%; 131 | } @else if $percentage > 65 { 132 | $percentage: 65%; 133 | } 134 | 135 | @if $main == false { 136 | $percentage: 100 - $percentage; 137 | } 138 | 139 | #{$output}: $percentage; 140 | } 141 | } 142 | 143 | // Value in scale in $modular-scale? 144 | // Used in following fontsize mixin. 145 | @function in-modular-scale($scale, $key) { 146 | $map: map-get($modular-scale, $scale); 147 | $output: map-has-key($map, $key); 148 | @return $output; 149 | } 150 | 151 | // Font-size in rems. Either set per breakpoint or for all. 152 | // Use values as you would for pixels i.e. 16 or use values from the modular scale. 153 | @mixin fontsize($fontsize, $breakpoint: 0) { 154 | // Type of chosen variables. 155 | $font-value: type-of($fontsize); 156 | $break-value: type-of($breakpoint); 157 | 158 | // Check if value exists in scale. 159 | $in-scale: in-modular-scale(scale-0, $fontsize); 160 | 161 | // If specifying a breakpoint to use (and breakpoint exists). 162 | @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 { 163 | 164 | // If using a number for fontsize. 165 | @if $font-value == number { 166 | font-size: #{$fontsize / nth($sizes, ($breakpoint + 1))}rem; 167 | 168 | // If using a variable from the scale for fontsize. 169 | } @else if $in-scale == true { 170 | $get-scale: map-get($modular-scale, scale-#{$breakpoint}); 171 | $get-size: map-get($get-scale, $fontsize); 172 | 173 | font-size: #{$get-size / nth($sizes, ($breakpoint + 1))}rem; 174 | 175 | } @else { 176 | @warn "#{$fontsize} is not a valid scale variable"; 177 | } 178 | 179 | // If want to use value for all breakpoints. 180 | } @else if $breakpoint == all { 181 | 182 | // If using a number for fontsize. 183 | @if $font-value == number { 184 | font-size: #{$fontsize / nth($sizes, 1)}rem; 185 | 186 | // Loop through breakpoints. 187 | @for $i from 2 through $breakpoints-limit { 188 | @media screen and (min-width: nth($points, $i) / 16 * 1em ) { 189 | font-size: #{$fontsize / nth($sizes, $i)}rem; 190 | } 191 | } 192 | 193 | // If using a variable from the scale for fontsize. 194 | } @else if $in-scale == true { 195 | $get-scale: map-get($modular-scale, scale-0); 196 | $get-size: map-get($get-scale, $fontsize); 197 | font-size: #{$get-size / nth($sizes, 1)}rem; 198 | 199 | // Loop through breakpoints. 200 | @for $i from 2 through $breakpoints-limit { 201 | $get-scale: map-get($modular-scale, scale-#{$i - 1}); 202 | $get-size: map-get($get-scale, $fontsize); 203 | 204 | @media screen and (min-width: nth($points, $i) / 16 * 1em ) { 205 | font-size: #{$get-size / nth($sizes, $i)}rem; 206 | } 207 | } 208 | 209 | } @else { 210 | @warn "#{$fontsize} is not a valid scale variable"; 211 | } 212 | 213 | } @else { 214 | @warn "#{$breakpoint} is not valid to use as a breakpoint"; 215 | } 216 | } 217 | 218 | // Advanced baseline magic. 219 | // ! Read the README to help understand what is going on here. 220 | // Parts based on https://gist.github.com/razwan/10662500 221 | @mixin baseline($fontsize, $font, $lineheight: 2, $below: 2, $breakpoint: 0) { 222 | // Type of chosen variables. 223 | $font-value: type-of($fontsize); 224 | $break-value: type-of($breakpoint); 225 | 226 | // Cap height 227 | $cap-height: map-get($font, cap-height); 228 | 229 | // Check if value exists in scale. 230 | $in-scale: in-modular-scale(scale-0, $fontsize); 231 | 232 | // Set the line-height (if it isn't set at 0). 233 | @if $lineheight != 0 { 234 | line-height: #{$lineheight}rem; 235 | } 236 | 237 | // If specifying a breakpoint to use (and breakpoint exists). 238 | @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 { 239 | 240 | // If using a number for fontsize. 241 | @if $font-value == number { 242 | $rootsize: nth($sizes, ($breakpoint + 1)); 243 | $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; 244 | $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; 245 | 246 | margin-bottom: #{$baseline-push}rem; 247 | padding-top: #{$baseline-shift}rem; 248 | 249 | // If using a variable from the scale for fontsize. 250 | } @else if $in-scale == true { 251 | $get-scale: map-get($modular-scale, scale-#{$breakpoint}); 252 | $get-size: map-get($get-scale, $fontsize); 253 | $rootsize: nth($sizes, ($breakpoint + 1)); 254 | 255 | $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; 256 | $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; 257 | 258 | margin-bottom: #{$baseline-push}rem; 259 | padding-top: #{$baseline-shift}rem; 260 | 261 | } @else { 262 | @warn "#{$fontsize} is not a valid scale variable"; 263 | } 264 | 265 | // If want to use value for all breakpoints. 266 | } @else if $breakpoint == all { 267 | 268 | // If using a number for fontsize. 269 | @if $font-value == number { 270 | $rootsize: nth($sizes, 1); 271 | $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; 272 | $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; 273 | 274 | margin-bottom: #{$baseline-push}rem; 275 | padding-top: #{$baseline-shift}rem; 276 | 277 | // Loop through breakpoints. 278 | @for $i from 2 through $breakpoints-limit { 279 | $rootsize: nth($sizes, $i); 280 | $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; 281 | $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; 282 | 283 | @media screen and (min-width: nth($points, $i) / 16 * 1em ) { 284 | margin-bottom: #{$baseline-push}rem; 285 | padding-top: #{$baseline-shift}rem; 286 | } 287 | } 288 | 289 | // If using a variable from the scale for fontsize. 290 | } @else if $in-scale == true { 291 | $get-scale: map-get($modular-scale, scale-0); 292 | $get-size: map-get($get-scale, $fontsize); 293 | $rootsize: nth($sizes, 1); 294 | 295 | $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; 296 | $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; 297 | 298 | margin-bottom: #{$baseline-push}rem; 299 | padding-top: #{$baseline-shift}rem; 300 | 301 | // Loop through breakpoints. 302 | @for $i from 2 through $breakpoints-limit { 303 | $get-scale: map-get($modular-scale, scale-#{$i - 1}); 304 | $get-size: map-get($get-scale, $fontsize); 305 | $rootsize: nth($sizes, $i); 306 | 307 | $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; 308 | $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; 309 | 310 | @media screen and (min-width: nth($points, $i) / 16 * 1em ) { 311 | margin-bottom: #{$baseline-push}rem; 312 | padding-top: #{$baseline-shift}rem; 313 | } 314 | } 315 | 316 | } @else { 317 | @warn "#{$fontsize} is not a valid scale variable"; 318 | } 319 | 320 | } @else { 321 | @warn "#{$breakpoint} is not valid to use as a breakpoint"; 322 | } 323 | } 324 | 325 | // Set fontsize and baseline at once. Mix of fontsize and baseline mixin. 326 | @mixin sassline($fontsize, $font, $lineheight: 2, $below: 2, $breakpoint: 0) { 327 | $font-value: type-of($fontsize); 328 | $break-value: type-of($breakpoint); 329 | $cap-height: map-get($font, cap-height); 330 | $in-scale: in-modular-scale(scale-0, $fontsize); 331 | 332 | line-height: #{$lineheight}rem; 333 | 334 | @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 { 335 | 336 | @if $font-value == number { 337 | $rootsize: nth($sizes, ($breakpoint + 1)); 338 | $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; 339 | $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; 340 | font-size: #{$fontsize / nth($sizes, ($breakpoint + 1))}rem; 341 | margin-bottom: #{$baseline-push}rem; 342 | padding-top: #{$baseline-shift}rem; 343 | 344 | } @else if $in-scale == true { 345 | $get-scale: map-get($modular-scale, scale-#{$breakpoint}); 346 | $get-size: map-get($get-scale, $fontsize); 347 | $rootsize: nth($sizes, ($breakpoint + 1)); 348 | $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; 349 | $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; 350 | font-size: #{$get-size / nth($sizes, ($breakpoint + 1))}rem; 351 | margin-bottom: #{$baseline-push}rem; 352 | padding-top: #{$baseline-shift}rem; 353 | 354 | } @else { 355 | @warn "#{$fontsize} is not a valid scale variable"; 356 | } 357 | 358 | } @else if $breakpoint == all { 359 | 360 | @if $font-value == number { 361 | $rootsize: nth($sizes, 1); 362 | $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; 363 | $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; 364 | font-size: #{$fontsize / nth($sizes, 1)}rem; 365 | margin-bottom: #{$baseline-push}rem; 366 | padding-top: #{$baseline-shift}rem; 367 | 368 | @for $i from 2 through $breakpoints-limit { 369 | $rootsize: nth($sizes, $i); 370 | $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; 371 | $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; 372 | @media screen and (min-width: nth($points, $i) / 16 * 1em ) { 373 | font-size: #{$fontsize / nth($sizes, $i)}rem; 374 | margin-bottom: #{$baseline-push}rem; 375 | padding-top: #{$baseline-shift}rem; 376 | } 377 | } 378 | 379 | } @else if $in-scale == true { 380 | $get-scale: map-get($modular-scale, scale-0); 381 | $get-size: map-get($get-scale, $fontsize); 382 | $rootsize: nth($sizes, 1); 383 | $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; 384 | $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; 385 | font-size: #{$get-size / nth($sizes, 1)}rem; 386 | margin-bottom: #{$baseline-push}rem; 387 | padding-top: #{$baseline-shift}rem; 388 | 389 | @for $i from 2 through $breakpoints-limit { 390 | $get-scale: map-get($modular-scale, scale-#{$i - 1}); 391 | $get-size: map-get($get-scale, $fontsize); 392 | $rootsize: nth($sizes, $i); 393 | $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; 394 | $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; 395 | @media screen and (min-width: nth($points, $i) / 16 * 1em ) { 396 | font-size: #{$get-size / nth($sizes, $i)}rem; 397 | margin-bottom: #{$baseline-push}rem; 398 | padding-top: #{$baseline-shift}rem; 399 | } 400 | } 401 | 402 | } @else { 403 | @warn "#{$fontsize} is not a valid scale variable"; 404 | } 405 | 406 | } @else { 407 | @warn "#{$breakpoint} is not valid to use as a breakpoint"; 408 | } 409 | } 410 | 411 | // Clearfix. 412 | @mixin clearfix { 413 | &:before, &:after{ 414 | display: table; 415 | content: ""; 416 | } 417 | &:after{ 418 | clear: both; 419 | } 420 | } 421 | -------------------------------------------------------------------------------- /_sass/sassline-base/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | // Modular scale 2 | // --------------------------------------- 3 | 4 | // Setting responsive modular-scales. Use appropriate scales for viewport sizes. 5 | $modular-scale: ( 6 | // Major Third http://www.modularscale.com/?16,28&px&1.25&web&text 7 | scale-0: ( 8 | alpha: 28.0, 9 | beta: 25.0, 10 | gamma: 22.4, 11 | delta: 20.0, 12 | epsilon: 17.9, 13 | zeta: 16.0, 14 | eta: 14.3, 15 | theta: 12.8, 16 | iota: 11.5 17 | ), 18 | // Major Third http://www.modularscale.com/?17,30&px&1.25&web&text 19 | scale-1: ( 20 | alpha: 30.0, 21 | beta: 26.6, 22 | gamma: 24.0, 23 | delta: 21.3, 24 | epsilon: 19.2, 25 | zeta: 17.0, 26 | eta: 15.3, 27 | theta: 13.6, 28 | iota: 12.8 29 | ), 30 | // Major Third http://www.modularscale.com/?18,32&px&1.25&web&text 31 | scale-2: ( 32 | alpha: 32.0, 33 | beta: 28.1, 34 | gamma: 25.6, 35 | delta: 22.5, 36 | epsilon: 20.5, 37 | zeta: 18.0, 38 | eta: 16.3, 39 | theta: 14.4, 40 | iota: 13.1 41 | ), 42 | // Perfect Fourth http://www.modularscale.com/?20,40&px&1.333&web&text 43 | scale-3: ( 44 | alpha: 40.0, 45 | beta: 35.5, 46 | gamma: 30.0, 47 | delta: 26.7, 48 | epsilon: 22.5, 49 | zeta: 20.0, 50 | eta: 16.9, 51 | theta: 15.0, 52 | iota: 12.7 53 | ), 54 | // Aug. Fourth http://www.modularscale.com/?22,50&px&1.414&web&text 55 | scale-4: ( 56 | alpha: 50.0, 57 | beta: 43.9, 58 | gamma: 35.3, 59 | delta: 31.1, 60 | epsilon: 25.0, 61 | zeta: 22.0, 62 | eta: 17.6, 63 | theta: 15.6, 64 | iota: 12.5 65 | ) 66 | ); 67 | -------------------------------------------------------------------------------- /_sass/sassline-base/_reset.scss: -------------------------------------------------------------------------------- 1 | // Reset 2 | // --------------------------------------- 3 | 4 | // Reset all the things 5 | * { box-sizing: border-box; } 6 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } 7 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 8 | html, body { height: 100%; } 9 | a img { border: none; } 10 | blockquote { quotes: none; } 11 | blockquote:before, blockquote:after { content: ''; content: none; } 12 | table { border-collapse: collapse; border-spacing: 0; } 13 | caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } 14 | -------------------------------------------------------------------------------- /_sass/sassline-base/_typography.scss: -------------------------------------------------------------------------------- 1 | // Typography 2 | // --------------------------------------- 3 | 4 | // Setting root sizes and base styles. 5 | html { 6 | @include rootsize; 7 | 8 | -webkit-text-size-adjust: 100%; 9 | -ms-text-size-adjust: 100%; 10 | } 11 | 12 | // Site-wide base styles. 13 | body { 14 | @include fontsize(zeta, all); 15 | 16 | font-family: unquote(map-get($bodytype, font-family)); 17 | font-style: normal; 18 | font-weight: map-get($bodytype, regular); 19 | line-height: 2rem; 20 | } 21 | 22 | // Links. 23 | a { 24 | color: $linkColour; 25 | text-decoration: none; 26 | transition: color .1s, background-color .1s; 27 | 28 | &:hover, &:active, &:focus { 29 | color: $hoverColour; 30 | text-decoration: none; 31 | } 32 | } 33 | 34 | // Styles for typeset text. 35 | .typeset { 36 | 37 | // Nice underlines for text links. 38 | p a, li a { 39 | background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$linkColour 50%); 40 | background-position: 0 93%; 41 | background-repeat: repeat-x; 42 | background-size: 100% 0.15rem; 43 | text-shadow: 0.1rem 0 $backgroundColour, 44 | 0.15rem 0 $backgroundColour, 45 | -0.1rem 0 $backgroundColour, 46 | -0.15rem 0 $backgroundColour; 47 | 48 | &:hover, &:active, &:focus { 49 | background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$hoverColour 50%); 50 | } 51 | } 52 | 53 | // Paragraphs. OpenType ligatures and oldstyle figures enabled if available. 54 | p { 55 | @include baseline($fontsize: zeta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: all); 56 | 57 | font-feature-settings: 'kern', 'onum', 'liga'; 58 | } 59 | 60 | // Headings. OpenType ligatures, discretionary ligatures and lining figures enabled if available. 61 | h1, h2, h3, h4, h5, h6 { 62 | color: $headingColour; 63 | font-family: unquote(map-get($headingtype, font-family)); 64 | font-feature-settings: 'dlig', 'liga', 'lnum', 'kern'; 65 | font-style: normal; 66 | font-weight: map-get($headingtype, bold); 67 | } 68 | 69 | // Heading level 1. 70 | h1, .alpha { 71 | @include sassline($fontsize: alpha, $font: $headingtype, $lineheight: 3, $below: 1, $breakpoint: all); 72 | } 73 | 74 | // Heading level 2. 75 | h2, .beta { 76 | @include sassline(beta, $headingtype, 3, 1, all); 77 | } 78 | 79 | // Heading level 3. 80 | h3, .gamma { 81 | @include sassline(gamma, $headingtype, 3, 1, all); 82 | } 83 | 84 | // Heading level 4. 85 | h4, .delta { 86 | @include sassline(delta, $headingtype, 2, 0, all); 87 | } 88 | 89 | // Heading level 5. 90 | h5, .epsilon { 91 | @include sassline(epsilon, $headingtype, 2, 0, all); 92 | } 93 | 94 | // Heading level 6. 95 | h6, .zeta { 96 | @include sassline(zeta, $headingtype, 2, 0, all); 97 | } 98 | 99 | // Lists. 100 | ul, ol { 101 | @include baseline(zeta, $bodytype, 2, 2, all); 102 | 103 | li { 104 | font-feature-settings: 'kern', 'onum', 'liga'; 105 | margin-left: 2rem; 106 | 107 | @include breakpoint(break-1) { 108 | margin-left: 0; 109 | } 110 | 111 | ol, ul { 112 | padding-top: 1rem; 113 | margin-bottom: 1rem; 114 | margin-left: 2rem; 115 | } 116 | } 117 | } 118 | 119 | // Ordered lists. 120 | ol { 121 | list-style-type: none; 122 | 123 | li { 124 | counter-increment: top-level; 125 | 126 | &:before { 127 | content: counter(top-level) '.'; 128 | font-feature-settings: 'lnum', 'tnum'; 129 | margin-left: -3rem; 130 | position: absolute; 131 | text-align: right; 132 | width: 2em; 133 | } 134 | 135 | ul { 136 | 137 | li { 138 | 139 | &:before { 140 | content: ''; 141 | } 142 | 143 | ol { 144 | 145 | li { 146 | counter-increment: alt-level; 147 | 148 | &:before { 149 | content: counter(alt-level) '.'; 150 | } 151 | } 152 | } 153 | } 154 | } 155 | 156 | ol { 157 | 158 | li { 159 | counter-increment: sub-level; 160 | 161 | &:before { 162 | content: counter(top-level) '.' counter(sub-level); 163 | } 164 | 165 | ul { 166 | 167 | li { 168 | 169 | &:before { 170 | content: ''; 171 | } 172 | } 173 | } 174 | 175 | ol { 176 | 177 | li { 178 | counter-increment: sub-sub-level; 179 | 180 | &:before { 181 | content: counter(top-level) '.' counter(sub-level) '.' counter(sub-sub-level); 182 | } 183 | } 184 | } 185 | } 186 | } 187 | } 188 | } 189 | 190 | // Definition lists. 191 | dl { 192 | @include baseline(zeta, $bodytype, 2, 2, all); 193 | 194 | dt, dd { 195 | font-feature-settings: 'kern', 'onum', 'liga'; 196 | margin-left: 2rem; 197 | 198 | @include breakpoint(break-1) { 199 | margin-left: 0; 200 | } 201 | } 202 | 203 | dt { 204 | font-weight: map-get($bodytype, bold); 205 | } 206 | 207 | dd + dt { 208 | padding-top: 1rem; 209 | } 210 | } 211 | 212 | // Tables. 213 | table { 214 | @include sassline(eta, $headingtype, 2, 0, all); 215 | 216 | font-family: unquote(map-get($headingtype, font-family)); 217 | font-feature-settings: 'liga', 'lnum', 'tnum', 'kern'; 218 | font-style: normal; 219 | font-weight: map-get($headingtype, regular); 220 | width: 100%; 221 | 222 | thead { 223 | 224 | th { 225 | @include sassline(zeta, $headingtype, 2, 0, all); 226 | padding-bottom: 1px; 227 | } 228 | } 229 | } 230 | 231 | // Bold. 232 | b, strong, .bold { 233 | font-weight: map-get($bodytype, bold); 234 | } 235 | 236 | // Italic. 237 | em, i, .italic { 238 | font-style: map-get($bodytype, italic); 239 | } 240 | 241 | // Caption and inline small text. 242 | small, .caption { 243 | @include fontsize(theta, all); 244 | 245 | font-family: unquote(map-get($headingtype, font-family)); 246 | font-style: normal; 247 | font-weight: map-get($headingtype, regular); 248 | } 249 | 250 | small { 251 | line-height: 1rem; 252 | } 253 | 254 | .caption { 255 | @include baseline(theta, $headingtype, 2, 2, all); 256 | 257 | color: $captionColour; 258 | } 259 | 260 | // Nice spacing for captions. 261 | h1 + .caption, .alpha + .caption, h2 + .caption, .beta + .caption, h3 + .caption, .gamma + .caption { 262 | margin-top: -1rem; 263 | } 264 | 265 | .delta + .caption, .epsilon + .caption, .zeta + .caption { 266 | margin-top: 0rem; 267 | } 268 | 269 | // Quotes. 270 | blockquote { 271 | 272 | p { 273 | border-left: 0.15rem solid $linkColour; 274 | font-style: map-get($bodytype, italic); 275 | padding-left: 1rem; 276 | 277 | // Add spacing below blockquote paragraphs to align to baseline grid. 278 | $get-scale: map-get($modular-scale, scale-0); 279 | $get-size: map-get($get-scale, zeta); 280 | $rootsize: nth($sizes, 1); 281 | $baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001}; 282 | $baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)}; 283 | 284 | margin-bottom: #{$baseline-push}rem; 285 | padding-bottom: #{$baseline-shift}rem; 286 | 287 | @for $i from 2 through $breakpoints-limit { 288 | $get-scale: map-get($modular-scale, scale-#{$i - 1}); 289 | $get-size: map-get($get-scale, zeta); 290 | $rootsize: nth($sizes, $i); 291 | $baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001}; 292 | $baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)}; 293 | 294 | @media screen and (min-width: nth($points, $i) / 16 * 1em ) { 295 | margin-bottom: #{$baseline-push}rem; 296 | padding-bottom: #{$baseline-shift}rem; 297 | } 298 | } 299 | } 300 | 301 | @include breakpoint(break-1) { 302 | margin-left: -1rem; 303 | } 304 | } 305 | 306 | // Horizontal rule. 307 | hr { 308 | background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$captionColour 50%); 309 | background-position: 0 50%; 310 | background-repeat: repeat-x; 311 | background-size: 100% 0.15rem; 312 | border: 0; 313 | margin: 0; 314 | padding-bottom: 3rem; 315 | padding-top: 3rem; 316 | } 317 | 318 | // Code block. 319 | code, pre { 320 | background-color: $codeBackgroundColour; 321 | font-family: unquote(map-get($monospacetype, font-family)); 322 | } 323 | 324 | pre { 325 | display: block; 326 | margin-bottom: 2rem; 327 | padding: 1rem; 328 | white-space: pre; 329 | white-space: pre-wrap; 330 | word-break: break-all; 331 | word-wrap: break-word; 332 | } 333 | 334 | code { 335 | @include fontsize(theta, all); 336 | 337 | line-height: 1rem; 338 | } 339 | 340 | // Letter space those capitals people, Jan Tschichold would be proud. 341 | .upper { 342 | font-kerning: normal; 343 | letter-spacing: 0.1rem; 344 | text-transform: uppercase; 345 | } 346 | 347 | // Real small caps. 348 | .small-caps { 349 | font-feature-settings: 'smcp', 'kern'; 350 | font-kerning: normal; 351 | letter-spacing: 0.1rem; 352 | } 353 | 354 | // Consistent height numbers with OpenType. 355 | .lining-numerals { 356 | font-feature-settings: 'lnum', 'kern'; 357 | } 358 | 359 | // Ascending and descending numbers with OpenType. 360 | .oldstyle-numerals { 361 | font-feature-settings: 'onum', 'kern'; 362 | } 363 | } 364 | -------------------------------------------------------------------------------- /_sass/sassline-base/_variables.scss: -------------------------------------------------------------------------------- 1 | // SCSS variables 2 | // --------------------------------------- 3 | 4 | // Note: For the following Sass maps enter values as if they would be px units. 5 | 6 | // Breakpoint sizes from px to ems. Add more values here to add more breakpoints. 7 | // Change names if you prefer, it wont break the mixin as long as they are strings not just numbers. 8 | $breakpoints: ( 9 | break-0: 0, // 0px Mobile first 10 | break-1: 640, // 640px ~ Small tablet up 11 | break-2: 800, // 800px ~ Large tablet up 12 | break-3: 1024, // 1024px ~ Desktop up 13 | break-4: 1600 // 1600px ~ Large desktop up 14 | ) !default; 15 | 16 | // Root font-sizes for each breakpoint. Set to half desired line-height of body text. 17 | // ! Make sure to have as many sizes as breakpoints above. 18 | $rootsizes: ( 19 | rootsize-0: 12, // 24px line-height body text 20 | rootsize-1: 14, // 28px line-height body text 21 | rootsize-2: 15, // 30px line-height body text 22 | rootsize-3: 17, // 34px line-height body text 23 | rootsize-4: 19 // 38px line-height body text 24 | ) !default; 25 | 26 | // Set the optimum line-length for your text (based on typeface). 27 | // Aim for 75-100 characters a line when possible, at smaller sizes type size is more important. 28 | // ! Make sure to have as many widths as breakpoints above. 29 | // Note: this was 'maxwidths' in previous versions. 30 | $measures: ( 31 | measure-0: 500, // 500px wide 32 | measure-1: 550, // 550px wide 33 | measure-2: 600, // 600px wide 34 | measure-3: 680, // 680px wide 35 | measure-4: 750 // 750px wide 36 | ) !default; 37 | 38 | // Set the max-widths for containers (based on design). 39 | // ! Make sure to have as many widths as breakpoints above. 40 | $maxwidths: ( 41 | width-0: 500, // 500px wide 42 | width-1: 600, // 600px wide 43 | width-2: 800, // 800px wide 44 | width-3: 1100, // 110px wide 45 | width-4: 1300 // 1300px wide 46 | ) !default; 47 | 48 | // Gutter widths 49 | $gutterwidths: ( 50 | small: 1rem, 51 | medium: 2rem, 52 | large: 4rem 53 | ) !default; 54 | 55 | // Add typefaces here. 56 | // Add weight and style details too. 57 | // ! Set cap height to set to the baseline. 58 | $bodytype: ( 59 | font-family: 'Georgia, serif', 60 | regular: 400, 61 | bold: 700, 62 | italic: italic, 63 | cap-height: 0.66 64 | ) !default; 65 | 66 | $headingtype: ( 67 | font-family: 'Helvetica, sans-serif', 68 | regular: 400, 69 | bold: 700, 70 | cap-height: 0.66 71 | ) !default; 72 | 73 | $monospacetype: ( 74 | font-family: 'Menlo, monospace', 75 | regular: 400, 76 | cap-height: 0.68 77 | ) !default; 78 | 79 | // Here are some local fonts cap-height sizes to get you started: 80 | // Georgia: 0.66, Times / Times New Roman: 0.65, Palatino: 0.52 81 | // Lucida Grande: 0.72, Helvetica: 0.66, Verdana: 0.76, Tahoma: 0.76 82 | 83 | // Selection of Typekit fonts cap-height sizes: 84 | // Proxima Nova: 0.57, Museo Slab: 0.66, JAF Facit: 0.7, Brandon Grotesque: 0.65, Clavo: 0.7, Adelle: 0.66, FF Tisa Pro: 0.82, Jubilat: 0.66, Futura PT: 0.66, Chaparral Pro: 0.5, Minion Pro: 0.66, Myriad Pro: 0.66, Adobe Caslon Pro: 0.36 85 | 86 | // Text colours. British English. 87 | $headingColour: #2E2E2E !default; 88 | $bodyColour: #494949 !default; 89 | $linkColour: #0E58F5 !default; 90 | $hoverColour: #0B348B !default; 91 | $captionColour: #BDC8CC !default; 92 | $white: #FFFFFF !default; 93 | 94 | // Background colours. 95 | $backgroundColour: #FCFCFC !default; 96 | $codeBackgroundColour: #F5F4F2 !default; 97 | -------------------------------------------------------------------------------- /alembic-jekyll-theme.gemspec: -------------------------------------------------------------------------------- 1 | # coding: utf-8 2 | 3 | Gem::Specification.new do |spec| 4 | spec.name = "alembic-jekyll-theme" 5 | spec.version = "4.1.0" 6 | spec.authors = ["David Darnes"] 7 | spec.email = ["me@daviddarnes.com"] 8 | 9 | spec.summary = %q{A Jekyll boilerplate theme designed to be a starting point for any Jekyll website.} 10 | spec.description = "A Jekyll boilerplate theme designed to be a starting point for any Jekyll website. Rather than starting from scratch, this boilerplate is designed to get the ball rolling immediately." 11 | spec.homepage = "https://alembic.darn.es" 12 | spec.license = "MIT" 13 | 14 | spec.metadata["plugin_type"] = "theme" 15 | 16 | spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|LICENSE|README|sw|manifest)}i) } 17 | 18 | spec.add_runtime_dependency "jekyll", "~> 4.1" 19 | spec.add_runtime_dependency "jekyll-sitemap", "~> 1.4.0" 20 | spec.add_runtime_dependency "jekyll-mentions", "~> 1.6.0" 21 | spec.add_runtime_dependency "jekyll-paginate", "~> 1.1.0" 22 | spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.7.1" 23 | spec.add_runtime_dependency "jekyll-redirect-from", "~> 0.16" 24 | spec.add_runtime_dependency "jekyll-feed", "~> 0.15" 25 | spec.add_runtime_dependency "jekyll-commonmark", "~> 1.3.1" 26 | spec.add_runtime_dependency "jekyll-include-cache", "~> 0.2" 27 | spec.add_runtime_dependency "jemoji", "~> 0.12" 28 | end 29 | -------------------------------------------------------------------------------- /assets/.gitignore: -------------------------------------------------------------------------------- 1 | .jekyll-cache/ -------------------------------------------------------------------------------- /assets/default-offline-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/alembic/4e6f906298c37e0d141312ecb045fac35ff11750/assets/default-offline-image.png -------------------------------------------------------------------------------- /assets/default-social-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/alembic/4e6f906298c37e0d141312ecb045fac35ff11750/assets/default-social-image.png -------------------------------------------------------------------------------- /assets/logos/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/logos/logo@1024px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/alembic/4e6f906298c37e0d141312ecb045fac35ff11750/assets/logos/logo@1024px.png -------------------------------------------------------------------------------- /assets/logos/logo@120px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/alembic/4e6f906298c37e0d141312ecb045fac35ff11750/assets/logos/logo@120px.png -------------------------------------------------------------------------------- /assets/logos/logo@144px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/alembic/4e6f906298c37e0d141312ecb045fac35ff11750/assets/logos/logo@144px.png -------------------------------------------------------------------------------- /assets/logos/logo@16px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/alembic/4e6f906298c37e0d141312ecb045fac35ff11750/assets/logos/logo@16px.png -------------------------------------------------------------------------------- /assets/logos/logo@180px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/alembic/4e6f906298c37e0d141312ecb045fac35ff11750/assets/logos/logo@180px.png -------------------------------------------------------------------------------- /assets/logos/logo@32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/alembic/4e6f906298c37e0d141312ecb045fac35ff11750/assets/logos/logo@32px.png -------------------------------------------------------------------------------- /assets/logos/logo@512px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/alembic/4e6f906298c37e0d141312ecb045fac35ff11750/assets/logos/logo@512px.png -------------------------------------------------------------------------------- /assets/logos/logo@96px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/alembic/4e6f906298c37e0d141312ecb045fac35ff11750/assets/logos/logo@96px.png -------------------------------------------------------------------------------- /assets/manifest.json: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: "manifest.json" 3 | layout: null 4 | sitemap: false 5 | --- 6 | { 7 | "lang": "{{ site.lang | default: "en-US" }}", 8 | "name": "{{ site.title }}", 9 | "short_name": "{{ site.short_name | default: site.title | replace: ' ', '' }}", 10 | "theme_color": "{{ site.manifest.theme_color | default: '#24292e' }}", 11 | "background_color": "{{ site.manifest.background_color | default: '#ffffff' }}", 12 | {% if site.favicons -%} 13 | "icons": [ 14 | {% for icon in site.favicons -%} 15 | { 16 | "src": "{{ icon[1] | relative_url }}", 17 | "sizes": "{{ icon[0] }}x{{ icon[0] }}" 18 | }{% if forloop.last != true %},{% endif %} 19 | {% endfor %} 20 | ], 21 | {% endif -%} 22 | "start_url": "/", 23 | "display": "standalone" 24 | } 25 | -------------------------------------------------------------------------------- /assets/scripts/fetch.js: -------------------------------------------------------------------------------- 1 | (function(self) { 2 | 'use strict'; 3 | 4 | if (self.fetch) { 5 | return 6 | } 7 | 8 | var support = { 9 | searchParams: 'URLSearchParams' in self, 10 | iterable: 'Symbol' in self && 'iterator' in Symbol, 11 | blob: 'FileReader' in self && 'Blob' in self && (function() { 12 | try { 13 | new Blob() 14 | return true 15 | } catch(e) { 16 | return false 17 | } 18 | })(), 19 | formData: 'FormData' in self, 20 | arrayBuffer: 'ArrayBuffer' in self 21 | } 22 | 23 | if (support.arrayBuffer) { 24 | var viewClasses = [ 25 | '[object Int8Array]', 26 | '[object Uint8Array]', 27 | '[object Uint8ClampedArray]', 28 | '[object Int16Array]', 29 | '[object Uint16Array]', 30 | '[object Int32Array]', 31 | '[object Uint32Array]', 32 | '[object Float32Array]', 33 | '[object Float64Array]' 34 | ] 35 | 36 | var isDataView = function(obj) { 37 | return obj && DataView.prototype.isPrototypeOf(obj) 38 | } 39 | 40 | var isArrayBufferView = ArrayBuffer.isView || function(obj) { 41 | return obj && viewClasses.indexOf(Object.prototype.toString.call(obj)) > -1 42 | } 43 | } 44 | 45 | function normalizeName(name) { 46 | if (typeof name !== 'string') { 47 | name = String(name) 48 | } 49 | if (/[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(name)) { 50 | throw new TypeError('Invalid character in header field name') 51 | } 52 | return name.toLowerCase() 53 | } 54 | 55 | function normalizeValue(value) { 56 | if (typeof value !== 'string') { 57 | value = String(value) 58 | } 59 | return value 60 | } 61 | 62 | // Build a destructive iterator for the value list 63 | function iteratorFor(items) { 64 | var iterator = { 65 | next: function() { 66 | var value = items.shift() 67 | return {done: value === undefined, value: value} 68 | } 69 | } 70 | 71 | if (support.iterable) { 72 | iterator[Symbol.iterator] = function() { 73 | return iterator 74 | } 75 | } 76 | 77 | return iterator 78 | } 79 | 80 | function Headers(headers) { 81 | this.map = {} 82 | 83 | if (headers instanceof Headers) { 84 | headers.forEach(function(value, name) { 85 | this.append(name, value) 86 | }, this) 87 | 88 | } else if (headers) { 89 | Object.getOwnPropertyNames(headers).forEach(function(name) { 90 | this.append(name, headers[name]) 91 | }, this) 92 | } 93 | } 94 | 95 | Headers.prototype.append = function(name, value) { 96 | name = normalizeName(name) 97 | value = normalizeValue(value) 98 | var oldValue = this.map[name] 99 | this.map[name] = oldValue ? oldValue+','+value : value 100 | } 101 | 102 | Headers.prototype['delete'] = function(name) { 103 | delete this.map[normalizeName(name)] 104 | } 105 | 106 | Headers.prototype.get = function(name) { 107 | name = normalizeName(name) 108 | return this.has(name) ? this.map[name] : null 109 | } 110 | 111 | Headers.prototype.has = function(name) { 112 | return this.map.hasOwnProperty(normalizeName(name)) 113 | } 114 | 115 | Headers.prototype.set = function(name, value) { 116 | this.map[normalizeName(name)] = normalizeValue(value) 117 | } 118 | 119 | Headers.prototype.forEach = function(callback, thisArg) { 120 | for (var name in this.map) { 121 | if (this.map.hasOwnProperty(name)) { 122 | callback.call(thisArg, this.map[name], name, this) 123 | } 124 | } 125 | } 126 | 127 | Headers.prototype.keys = function() { 128 | var items = [] 129 | this.forEach(function(value, name) { items.push(name) }) 130 | return iteratorFor(items) 131 | } 132 | 133 | Headers.prototype.values = function() { 134 | var items = [] 135 | this.forEach(function(value) { items.push(value) }) 136 | return iteratorFor(items) 137 | } 138 | 139 | Headers.prototype.entries = function() { 140 | var items = [] 141 | this.forEach(function(value, name) { items.push([name, value]) }) 142 | return iteratorFor(items) 143 | } 144 | 145 | if (support.iterable) { 146 | Headers.prototype[Symbol.iterator] = Headers.prototype.entries 147 | } 148 | 149 | function consumed(body) { 150 | if (body.bodyUsed) { 151 | return Promise.reject(new TypeError('Already read')) 152 | } 153 | body.bodyUsed = true 154 | } 155 | 156 | function fileReaderReady(reader) { 157 | return new Promise(function(resolve, reject) { 158 | reader.onload = function() { 159 | resolve(reader.result) 160 | } 161 | reader.onerror = function() { 162 | reject(reader.error) 163 | } 164 | }) 165 | } 166 | 167 | function readBlobAsArrayBuffer(blob) { 168 | var reader = new FileReader() 169 | var promise = fileReaderReady(reader) 170 | reader.readAsArrayBuffer(blob) 171 | return promise 172 | } 173 | 174 | function readBlobAsText(blob) { 175 | var reader = new FileReader() 176 | var promise = fileReaderReady(reader) 177 | reader.readAsText(blob) 178 | return promise 179 | } 180 | 181 | function readArrayBufferAsText(buf) { 182 | var view = new Uint8Array(buf) 183 | var chars = new Array(view.length) 184 | 185 | for (var i = 0; i < view.length; i++) { 186 | chars[i] = String.fromCharCode(view[i]) 187 | } 188 | return chars.join('') 189 | } 190 | 191 | function bufferClone(buf) { 192 | if (buf.slice) { 193 | return buf.slice(0) 194 | } else { 195 | var view = new Uint8Array(buf.byteLength) 196 | view.set(new Uint8Array(buf)) 197 | return view.buffer 198 | } 199 | } 200 | 201 | function Body() { 202 | this.bodyUsed = false 203 | 204 | this._initBody = function(body) { 205 | this._bodyInit = body 206 | if (!body) { 207 | this._bodyText = '' 208 | } else if (typeof body === 'string') { 209 | this._bodyText = body 210 | } else if (support.blob && Blob.prototype.isPrototypeOf(body)) { 211 | this._bodyBlob = body 212 | } else if (support.formData && FormData.prototype.isPrototypeOf(body)) { 213 | this._bodyFormData = body 214 | } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) { 215 | this._bodyText = body.toString() 216 | } else if (support.arrayBuffer && support.blob && isDataView(body)) { 217 | this._bodyArrayBuffer = bufferClone(body.buffer) 218 | // IE 10-11 can't handle a DataView body. 219 | this._bodyInit = new Blob([this._bodyArrayBuffer]) 220 | } else if (support.arrayBuffer && (ArrayBuffer.prototype.isPrototypeOf(body) || isArrayBufferView(body))) { 221 | this._bodyArrayBuffer = bufferClone(body) 222 | } else { 223 | throw new Error('unsupported BodyInit type') 224 | } 225 | 226 | if (!this.headers.get('content-type')) { 227 | if (typeof body === 'string') { 228 | this.headers.set('content-type', 'text/plain;charset=UTF-8') 229 | } else if (this._bodyBlob && this._bodyBlob.type) { 230 | this.headers.set('content-type', this._bodyBlob.type) 231 | } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) { 232 | this.headers.set('content-type', 'application/x-www-form-urlencoded;charset=UTF-8') 233 | } 234 | } 235 | } 236 | 237 | if (support.blob) { 238 | this.blob = function() { 239 | var rejected = consumed(this) 240 | if (rejected) { 241 | return rejected 242 | } 243 | 244 | if (this._bodyBlob) { 245 | return Promise.resolve(this._bodyBlob) 246 | } else if (this._bodyArrayBuffer) { 247 | return Promise.resolve(new Blob([this._bodyArrayBuffer])) 248 | } else if (this._bodyFormData) { 249 | throw new Error('could not read FormData body as blob') 250 | } else { 251 | return Promise.resolve(new Blob([this._bodyText])) 252 | } 253 | } 254 | 255 | this.arrayBuffer = function() { 256 | if (this._bodyArrayBuffer) { 257 | return consumed(this) || Promise.resolve(this._bodyArrayBuffer) 258 | } else { 259 | return this.blob().then(readBlobAsArrayBuffer) 260 | } 261 | } 262 | } 263 | 264 | this.text = function() { 265 | var rejected = consumed(this) 266 | if (rejected) { 267 | return rejected 268 | } 269 | 270 | if (this._bodyBlob) { 271 | return readBlobAsText(this._bodyBlob) 272 | } else if (this._bodyArrayBuffer) { 273 | return Promise.resolve(readArrayBufferAsText(this._bodyArrayBuffer)) 274 | } else if (this._bodyFormData) { 275 | throw new Error('could not read FormData body as text') 276 | } else { 277 | return Promise.resolve(this._bodyText) 278 | } 279 | } 280 | 281 | if (support.formData) { 282 | this.formData = function() { 283 | return this.text().then(decode) 284 | } 285 | } 286 | 287 | this.json = function() { 288 | return this.text().then(JSON.parse) 289 | } 290 | 291 | return this 292 | } 293 | 294 | // HTTP methods whose capitalization should be normalized 295 | var methods = ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'POST', 'PUT'] 296 | 297 | function normalizeMethod(method) { 298 | var upcased = method.toUpperCase() 299 | return (methods.indexOf(upcased) > -1) ? upcased : method 300 | } 301 | 302 | function Request(input, options) { 303 | options = options || {} 304 | var body = options.body 305 | 306 | if (input instanceof Request) { 307 | if (input.bodyUsed) { 308 | throw new TypeError('Already read') 309 | } 310 | this.url = input.url 311 | this.credentials = input.credentials 312 | if (!options.headers) { 313 | this.headers = new Headers(input.headers) 314 | } 315 | this.method = input.method 316 | this.mode = input.mode 317 | if (!body && input._bodyInit != null) { 318 | body = input._bodyInit 319 | input.bodyUsed = true 320 | } 321 | } else { 322 | this.url = String(input) 323 | } 324 | 325 | this.credentials = options.credentials || this.credentials || 'omit' 326 | if (options.headers || !this.headers) { 327 | this.headers = new Headers(options.headers) 328 | } 329 | this.method = normalizeMethod(options.method || this.method || 'GET') 330 | this.mode = options.mode || this.mode || null 331 | this.referrer = null 332 | 333 | if ((this.method === 'GET' || this.method === 'HEAD') && body) { 334 | throw new TypeError('Body not allowed for GET or HEAD requests') 335 | } 336 | this._initBody(body) 337 | } 338 | 339 | Request.prototype.clone = function() { 340 | return new Request(this, { body: this._bodyInit }) 341 | } 342 | 343 | function decode(body) { 344 | var form = new FormData() 345 | body.trim().split('&').forEach(function(bytes) { 346 | if (bytes) { 347 | var split = bytes.split('=') 348 | var name = split.shift().replace(/\+/g, ' ') 349 | var value = split.join('=').replace(/\+/g, ' ') 350 | form.append(decodeURIComponent(name), decodeURIComponent(value)) 351 | } 352 | }) 353 | return form 354 | } 355 | 356 | function parseHeaders(rawHeaders) { 357 | var headers = new Headers() 358 | rawHeaders.split(/\r?\n/).forEach(function(line) { 359 | var parts = line.split(':') 360 | var key = parts.shift().trim() 361 | if (key) { 362 | var value = parts.join(':').trim() 363 | headers.append(key, value) 364 | } 365 | }) 366 | return headers 367 | } 368 | 369 | Body.call(Request.prototype) 370 | 371 | function Response(bodyInit, options) { 372 | if (!options) { 373 | options = {} 374 | } 375 | 376 | this.type = 'default' 377 | this.status = 'status' in options ? options.status : 200 378 | this.ok = this.status >= 200 && this.status < 300 379 | this.statusText = 'statusText' in options ? options.statusText : 'OK' 380 | this.headers = new Headers(options.headers) 381 | this.url = options.url || '' 382 | this._initBody(bodyInit) 383 | } 384 | 385 | Body.call(Response.prototype) 386 | 387 | Response.prototype.clone = function() { 388 | return new Response(this._bodyInit, { 389 | status: this.status, 390 | statusText: this.statusText, 391 | headers: new Headers(this.headers), 392 | url: this.url 393 | }) 394 | } 395 | 396 | Response.error = function() { 397 | var response = new Response(null, {status: 0, statusText: ''}) 398 | response.type = 'error' 399 | return response 400 | } 401 | 402 | var redirectStatuses = [301, 302, 303, 307, 308] 403 | 404 | Response.redirect = function(url, status) { 405 | if (redirectStatuses.indexOf(status) === -1) { 406 | throw new RangeError('Invalid status code') 407 | } 408 | 409 | return new Response(null, {status: status, headers: {location: url}}) 410 | } 411 | 412 | self.Headers = Headers 413 | self.Request = Request 414 | self.Response = Response 415 | 416 | self.fetch = function(input, init) { 417 | return new Promise(function(resolve, reject) { 418 | var request = new Request(input, init) 419 | var xhr = new XMLHttpRequest() 420 | 421 | xhr.onload = function() { 422 | var options = { 423 | status: xhr.status, 424 | statusText: xhr.statusText, 425 | headers: parseHeaders(xhr.getAllResponseHeaders() || '') 426 | } 427 | options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL') 428 | var body = 'response' in xhr ? xhr.response : xhr.responseText 429 | resolve(new Response(body, options)) 430 | } 431 | 432 | xhr.onerror = function() { 433 | reject(new TypeError('Network request failed')) 434 | } 435 | 436 | xhr.ontimeout = function() { 437 | reject(new TypeError('Network request failed')) 438 | } 439 | 440 | xhr.open(request.method, request.url, true) 441 | 442 | if (request.credentials === 'include') { 443 | xhr.withCredentials = true 444 | } 445 | 446 | if ('responseType' in xhr && support.blob) { 447 | xhr.responseType = 'blob' 448 | } 449 | 450 | request.headers.forEach(function(value, name) { 451 | xhr.setRequestHeader(name, value) 452 | }) 453 | 454 | xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit) 455 | }) 456 | } 457 | self.fetch.polyfill = true 458 | })(typeof self !== 'undefined' ? self : this); 459 | -------------------------------------------------------------------------------- /assets/scripts/sw.js: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: "/sw.js" 3 | layout: null 4 | sitemap: false 5 | --- 6 | 7 | const version = '{{ site.time | date: '%Y%m%d%H%M%S' }}'; 8 | const cacheName = `static::${version}`; 9 | 10 | const buildContentBlob = () => { 11 | return [ 12 | {%- for post in site.posts limit: 10 -%} 13 | "{{ post.url | relative_url }}", 14 | {%- endfor -%} 15 | {%- for page in site.pages -%} 16 | {%- unless page.url contains 'sw.js' or page.url contains '404.html' -%} 17 | "{{ page.url | relative_url }}", 18 | {%- endunless -%} 19 | {%- endfor -%} 20 | "{{ site.logo | relative_url }}", "{{ site.baseurl }}/assets/default-offline-image.png", "{{ site.baseurl }}/assets/scripts/fetch.js" 21 | ] 22 | } 23 | 24 | const updateStaticCache = () => { 25 | return caches.open(cacheName).then(cache => { 26 | return cache.addAll(buildContentBlob()); 27 | }); 28 | }; 29 | 30 | const clearOldCache = () => { 31 | return caches.keys().then(keys => { 32 | // Remove caches whose name is no longer valid. 33 | return Promise.all( 34 | keys 35 | .filter(key => { 36 | return key !== cacheName; 37 | }) 38 | .map(key => { 39 | console.log(`Service Worker: removing cache ${key}`); 40 | return caches.delete(key); 41 | }) 42 | ); 43 | }); 44 | }; 45 | 46 | self.addEventListener("install", event => { 47 | event.waitUntil( 48 | updateStaticCache().then(() => { 49 | console.log(`Service Worker: cache updated to version: ${cacheName}`); 50 | }) 51 | ); 52 | }); 53 | 54 | self.addEventListener("activate", event => { 55 | event.waitUntil(clearOldCache()); 56 | }); 57 | 58 | self.addEventListener("fetch", event => { 59 | let request = event.request; 60 | let url = new URL(request.url); 61 | 62 | // Only deal with requests from the same domain. 63 | if (url.origin !== location.origin) { 64 | return; 65 | } 66 | 67 | // Always fetch non-GET requests from the network. 68 | if (request.method !== "GET") { 69 | event.respondWith(fetch(request)); 70 | return; 71 | } 72 | 73 | // Default url returned if page isn't cached 74 | let offlineAsset = "/offline/"; 75 | 76 | if (request.url.match(/\.(jpe?g|png|gif|svg)$/)) { 77 | // If url requested is an image and isn't cached, return default offline image 78 | offlineAsset = "{{ site.baseurl }}/assets/default-offline-image.png"; 79 | } 80 | 81 | // For all urls request image from network, then fallback to cache, then fallback to offline page 82 | event.respondWith( 83 | fetch(request).catch(async () => { 84 | return (await caches.match(request)) || caches.match(offlineAsset); 85 | }) 86 | ); 87 | return; 88 | }); 89 | -------------------------------------------------------------------------------- /assets/search.json: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | sitemap: false 4 | --- 5 | 6 | {% capture json %} 7 | [ 8 | {% assign collections = site.collections | where_exp:'collection','collection.output != false' %} 9 | {% for collection in collections %} 10 | {% assign docs = collection.docs | where_exp:'doc','doc.sitemap != false' %} 11 | {% for doc in docs %} 12 | { 13 | "title": {{ doc.title | jsonify }}, 14 | "excerpt": {{ doc.excerpt | markdownify | strip_html | jsonify }}, 15 | "content": {{ doc.content | markdownify | strip_html | jsonify }}, 16 | "url": {{ site.baseurl | append: doc.url | jsonify }} 17 | }, 18 | {% endfor %} 19 | {% endfor %} 20 | {% assign pages = site.html_pages | where_exp:'doc','doc.sitemap != false' | where_exp:'doc','doc.title != null' %} 21 | {% for page in pages %} 22 | { 23 | "title": {{ page.title | jsonify }}, 24 | "excerpt": {{ page.excerpt | markdownify | strip_html | jsonify }}, 25 | "content": {{ page.content | markdownify | strip_html | jsonify }}, 26 | "url": {{ site.baseurl | append: page.url | jsonify }} 27 | }{% unless forloop.last %},{% endunless %} 28 | {% endfor %} 29 | ] 30 | {% endcapture %} 31 | 32 | {{ json | lstrip }} 33 | -------------------------------------------------------------------------------- /assets/styles.scss: -------------------------------------------------------------------------------- 1 | --- 2 | title: false 3 | styles: true 4 | --- 5 | 6 | @import "alembic"; 7 | -------------------------------------------------------------------------------- /blog/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: blog 3 | collectionpage: posts 4 | --- 5 | -------------------------------------------------------------------------------- /categories.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Categories 3 | layout: categories 4 | excerpt: "Category index" 5 | aside: true 6 | --- 7 | -------------------------------------------------------------------------------- /elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Elements 3 | feature_text: | 4 | A demo of Markdown and HTML includes 5 | feature_image: "https://picsum.photos/2560/600?image=873" 6 | excerpt: "A demo of Markdown and HTML includes" 7 | aside: true 8 | --- 9 | 10 | # Heading 1 11 | 12 | ## Heading 2 13 | 14 | ### Heading 3 15 | 16 | #### Heading 4 17 | 18 | ##### Heading 5 19 | 20 | ###### Heading 6 21 | 22 | A small element 23 | 24 | [A link](https://david.darn.es "A link") 25 | 26 | Lorem ipsum dolor sit amet, consectetur adip* isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua. 27 | 28 | Duis aute irure dolor in [A link](https://david.darn.es "A link") reprehenderit in voluptate velit esse cillum **bold text** dolore eu fugiat nulla pariatur. Excepteur span element sint occaecat cupidatat non proident, sunt _italicised text_ in culpa qui officia deserunt mollit anim id `some code` est laborum. 29 | 30 | * An item 31 | * An item 32 | * An item 33 | * An item 34 | * An item 35 | 36 | 1. Item one 37 | 2. Item two 38 | 3. Item three 39 | 4. Item four 40 | 5. Item five 41 | 42 | > A simple blockquote 43 | 44 | Some HTML... 45 | 46 | ``` html 47 |
48 |

You planning a vacation, Mr. Sullivan?

49 | 52 |
53 | ``` 54 | 55 | ...CSS... 56 | 57 | ``` css 58 | blockquote { 59 | text-align: center; 60 | font-weight: bold; 61 | } 62 | blockquote footer { 63 | font-size: .8rem; 64 | } 65 | ``` 66 | 67 | ...and JavaScript 68 | 69 | ``` js 70 | const blockquote = document.querySelector("blockquote") 71 | const bolden = (keyString, string) => 72 | string.replace(new RegExp(keyString, 'g'), ''+keyString+'') 73 | 74 | blockquote.innerHTML = bolden("Mr. Sullivan", blockquote.innerHTML) 75 | ``` 76 | 77 | `Single line of code` 78 | 79 | ## HTML Includes 80 | 81 | ### Contact form 82 | 83 | {% include site-form.html %} 84 | 85 | ``` html 86 | {% raw %}{% include site-form.html %}{% endraw %} 87 | ``` 88 | 89 | ### Demo map embed 90 | 91 | {% include map.html id="1UT-2Z-Vg_MG_TrS5X2p8SthsJhc" title="Coffee shop map" %} 92 | 93 | ``` html 94 | {% raw %}{% include map.html id="XXXXXX" title="Coffee shop map" %}{% endraw %} 95 | ``` 96 | 97 | ### Button include 98 | 99 | {% include button.html text="A button" link="https://david.darn.es" %} 100 | 101 | {% include button.html text="A button with icon" link="https://twitter.com/daviddarnes" icon="twitter" %} 102 | 103 | ``` html 104 | {% raw %}{% include button.html text="A button" link="https://david.darn.es" %} 105 | {% include button.html text="A button with icon" link="https://twitter.com/daviddarnes" icon="twitter" %}{% endraw %} 106 | ``` 107 | 108 | ### Icon include 109 | 110 | {% include icon.html id="twitter" title="twitter" %} [{% include icon.html id="linkedin" title="twitter" %}](https://www.linkedin.com/in/daviddarnes) 111 | 112 | ``` html 113 | {% raw %}{% include icon.html id="twitter" title="twitter" %} 114 | [{% include icon.html id="linkedin" title="twitter" %}](https://www.linkedin.com/in/daviddarnes){% endraw %} 115 | ``` 116 | 117 | ### Video include 118 | 119 | {% include video.html id="zrkcGL5H3MU" title="Siteleaf tutorial video" %} 120 | 121 | ``` html 122 | {% raw %}{% include video.html id="zrkcGL5H3MU" title="Siteleaf tutorial video" %}{% endraw %} 123 | ``` 124 | 125 | 126 | ### Image includes 127 | 128 | {% include figure.html image="https://picsum.photos/600/800?image=894" caption="Image with caption" width="300" height="800" %} 129 | 130 | {% include figure.html image="https://picsum.photos/600/800?image=894" caption="Right aligned image" position="right" width="300" height="800" %} 131 | 132 | {% include figure.html image="https://picsum.photos/600/800?image=894" caption="Left aligned image" position="left" width="300" height="800" %} 133 | 134 | {% include figure.html image="https://picsum.photos/1600/800?image=894" alt="Image with just alt text" %} 135 | 136 | ``` html 137 | {% raw %}{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Image with caption" width="300" height="800" %} 138 | 139 | {% include figure.html image="https://picsum.photos/600/800?image=894" caption="Right aligned image" position="right" width="300" height="800" %} 140 | 141 | {% include figure.html image="https://picsum.photos/600/800?image=894" caption="Left aligned image" position="left" width="300" height="800" %} 142 | 143 | {% include figure.html image="https://picsum.photos/1600/800?image=894" alt="Image with just alt text" %}{% endraw %} 144 | ``` 145 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About Alembic 3 | feature_text: | 4 | ## Alembic 5 | A Jekyll boilerplate theme designed to be a starting point for any Jekyll website 6 | feature_image: "https://picsum.photos/1300/400?image=989" 7 | excerpt: "Alembic is a starting point for [Jekyll](https://jekyllrb.com/) projects. Rather than starting from scratch, this boilerplate is designed to get the ball rolling immediately. Install it, configure it, tweak it, push it." 8 | --- 9 | 10 | Alembic is a starting point for [Jekyll](https://jekyllrb.com/) projects. Rather than starting from scratch, this boilerplate is designed to get rolling immediately. Install it, configure it, tweak it, push it. 11 | 12 | {% include button.html text="Fork it" icon="github" link="https://github.com/daviddarnes/alembic" color="#0366d6" %} {% include button.html text="Buy me a coffee ☕️" link="https://buymeacoffee.com/daviddarnes#support" color="#f68140" %} {% include button.html text="Tweet it" icon="twitter" link="https://twitter.com/intent/tweet/?url=https://alembic.darn.es&text=Alembic%20-%20A%20Jekyll%20boilerplate%20theme&via=DavidDarnes" color="#0d94e7" %} {% include button.html text="Install Alembic ⚗️" link="https://github.com/daviddarnes/alembic#installation" %} 13 | 14 | ## Features 15 | 16 | - Available as a **theme gem** and **GitHub Pages** theme 17 | - Clear and elegant design that can be used out of the box or as solid starting point 18 | - Tested in all major browsers, including **IE and Edge** 19 | - Built in **Service Worker** so it can work offline and on slow connections 20 | - **Configurable colours** and typography in a single settings file 21 | - Extensive set of **shortcodes** to include various elements; such as buttons, icons, figure images and more 22 | - Solid **typographic framework** from [Sassline](https://sassline.com/) 23 | - Configurable navigation via a single file 24 | - Modular Jekyll components 25 | - Post category support in the form of a single post index page grouped by category 26 | - Built in live search using JavaScript 27 | - **Contact form** built in using [Formspree](https://formspree.io/) 28 | - Designed with **[Siteleaf](https://www.siteleaf.com/)** in mind 29 | - Has 9 of the most popular networks as performant sharing buttons 30 | - Has documentation 31 | 32 | ## Examples 33 | 34 | Here are a few examples of Alembic out in the wild being used in a variety of ways: 35 | 36 | - [bawejakunal.github.io](https://bawejakunal.github.io/) 37 | - [case2111.github.io](https://case2111.github.io/) 38 | - [karateca.org](https://www.karateca.org/) 39 | 40 | ## Installation 41 | 42 | ### Quick setup 43 | 44 | To give you a running start I've put together some starter kits that you can download, fork or even deploy immediately: 45 | 46 | - ⚗️🍨 Vanilla Jekyll starter kit 47 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/daviddarnes/alembic-kit){:style="background: none"} 48 | - ⚗️🌲 Forestry starter kit 49 | [![Deploy to Forestry](https://assets.forestry.io/import-to-forestry.svg)](https://app.forestry.io/quick-start?repo=daviddarnes/alembic-forestry-kit&engine=jekyll){:style="background: none"} 50 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/daviddarnes/alembic-forestry-kit){:style="background: none"} 51 | - ⚗️💠 Netlify CMS starter kit 52 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/daviddarnes/alembic-netlifycms-kit&stack=cms){:style="background: none"} 53 | 54 | - ⚗️:octocat: GitHub Pages with remote theme kit 55 | {% include button.html text="Download kit" link="https://github.com/daviddarnes/alembic-kit/archive/remote-theme.zip" color="#24292e" %} 56 | - ⚗️🚀 Stackbit starter kit 57 | [![Create with Stackbit](https://assets.stackbit.com/badge/create-with-stackbit.svg)](https://app.stackbit.com/create?theme=https://github.com/daviddarnes/alembic-stackbit-kit){:style="background: none"} 58 | 59 | ### As a Jekyll theme 60 | 61 | 1. Add `gem "alembic-jekyll-theme"` to your `Gemfile` to add the theme as a dependancy 62 | 2. Run the command `bundle install` in the root of project to install the theme and its dependancies 63 | 3. Add `theme: alembic-jekyll-theme` to your `_config.yml` file to set the site theme 64 | 4. Run `bundle exec jekyll serve` to build and serve your site 65 | 5. Done! Use the [configuration](#configuration) documentation and the example [`_config.yml`](https://github.com/daviddarnes/alembic/blob/master/_config.yml) file to set things like the navigation, contact form and social sharing buttons 66 | 67 | ### As a GitHub Pages remote theme 68 | 69 | 1. Add `gem "jekyll-remote-theme"` to your `Gemfile` to add the theme as a dependancy 70 | 2. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy 71 | 3. Add `jekyll-remote-theme` to the list of `plugins` in your `_config.yml` file 72 | 4. Add `remote_theme: daviddarnes/alembic@main` to your `_config.yml` file to set the site theme 73 | 5. Run `bundle exec jekyll serve` to build and serve your site 74 | 6. Done! Use the [configuration](#configuration) documentation and the example [`_config.yml`](https://github.com/daviddarnes/alembic/blob/master/_config.yml) file to set things like the navigation, contact form and social sharing buttons 75 | 76 | ### As a Boilerplate / Fork 77 | 78 | _(deprecated, not recommended)_ 79 | 80 | 1. [Fork the repo](https://github.com/daviddarnes/alembic#fork-destination-box) 81 | 2. Replace the `Gemfile` with one stating all the gems used in your project 82 | 3. Delete the following unnecessary files/folders: `.github`, `LICENSE`, `screenshot.png`, `CNAME` and `alembic-jekyll-theme.gemspec` 83 | 4. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy 84 | 5. Run `bundle exec jekyll serve` to build and serve your site 85 | 6. Done! Use the [configuration](#configuration) documentation and the example [`_config.yml`](https://github.com/daviddarnes/alembic/blob/master/_config.yml) file to set things like the navigation, contact form and social sharing buttons 86 | 87 | ## Customising 88 | 89 | When using Alembic as a theme means you can take advantage of the file overriding method. This allows you to overwrite any file in this theme with your own custom file, by matching the file name and path. The most common example of this would be if you want to add your own styles or change the core style settings. 90 | 91 | To add your own styles copy the [`styles.scss`](https://github.com/daviddarnes/alembic/blob/master/assets/styles.scss) into your own project with the same file path (`assets/styles.scss`). From there you can add your own styles, you can even optionally ignore the theme styles by removing the `@import "alembic";` line. 92 | 93 | If you're looking to set your own colours and fonts you can overwrite them by matching the variable names from the [`_settings.scss`](https://github.com/daviddarnes/alembic/blob/master/_sass/_settings.scss) file in your own `styles.scss`, make sure to state them before the `@import "alembic";` line so they take effect. The settings are a mixture of custom variables and settings from [Sassline](https://medium.com/@jakegiltsoff/sassline-v2-0-e424b2881e7e) - follow the link to find out how to configure the typographic settings. 94 | -------------------------------------------------------------------------------- /offline.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Looks like you're offline 3 | indexing: false 4 | sitemap: false 5 | --- 6 | 7 | It appears that you've lost your network connection and this document doesn't exist on your device. 8 | 9 | Try either returning to the previous page, using the navigation to find your way back, or restore your network connection. 10 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/alembic/4e6f906298c37e0d141312ecb045fac35ff11750/screenshot.png -------------------------------------------------------------------------------- /search.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Search 3 | excerpt: "Search for a page or post you're looking for" 4 | --- 5 | 6 | {% include site-search.html %} 7 | -------------------------------------------------------------------------------- /thanks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Thanks! 3 | indexing: false 4 | sitemap: false 5 | --- 6 | 7 | Thanks for getting in touch! We'll respond as soon as we can. 8 | --------------------------------------------------------------------------------