├── .github ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md └── FUNDING.yml ├── .gitignore ├── 404.md ├── CNAME ├── Gemfile ├── LICENSE ├── README.md ├── _config.yml ├── _includes ├── post-list.html ├── post-meta.html ├── post-pagination.html ├── site-footer.html ├── site-header.html ├── site-logo.html └── site-nav.html ├── _layouts ├── default.html ├── home.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 ├── _colors.scss ├── _flex.scss ├── _normalize.scss ├── _sassline-base.scss ├── _syntax.scss ├── _theme.scss ├── garth.scss └── sassline-base │ ├── _mixins.scss │ ├── _modular-scale.scss │ ├── _reset.scss │ ├── _typography.scss │ └── _variables.scss ├── about.md ├── assets ├── logo.svg └── styles.scss ├── garth-jekyll-theme.gemspec ├── index.html └── screenshot.png /.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 need clarification about something: 32 | 33 | * Open an Issue at https://github.com/daviddarnes/garth/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/garth/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 clear 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/garth/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 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/garth/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 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/garth/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/garth/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 without difficulty. 166 | 167 | In order to label issues, [open up the list of unlabelled issues](https://github.com/daviddarnes/garth/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 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/garth/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 it's not clear to you!) -- always respond with respect, be understanding, but don't feel like you need to sacrifice your standards for their sake, either. Don't be a jerk about it, OK? 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 higher 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 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 | custom: https://buymeacoffee.com/daviddarnes#support 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site/ 2 | .sass-cache/ 3 | .jekyll-metadata 4 | garth-jekyll-theme-*.gem 5 | Gemfile.lock 6 | **/Gemfile.lock 7 | -------------------------------------------------------------------------------- /404.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "404" 3 | excerpt: "Page Not Found" 4 | permalink: 404.html 5 | --- 6 | 7 | Sorry, but the page could not be found. 8 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | garth.darn.es 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | gemspec 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 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 | # [Garth](https://garth.darn.es/) 2 | [![Gem Version](https://badge.fury.io/rb/garth-jekyll-theme.svg)](https://badge.fury.io/rb/garth-jekyll-theme) 3 | 4 | 🥁 A really basic theme for Jekyll, using the official Jekyll theme implementation. 5 | 6 | [](https://buymeacoffee.com/daviddarnes#support) 7 | 8 | ![Screenshot](https://raw.githubusercontent.com/daviddarnes/garth/master/screenshot.png) 9 | 10 | ## Contents 11 | - [Installation](#installation) 12 | - [Customising](#customising) 13 | - [Site settings](#site-settings) 14 | - [Page layouts](#page-layouts) 15 | - [Credits](#credits) 16 | 17 | ## Installation 18 | 19 | ### Quick setup 20 | 21 | To give you a running start I've put together some starter kits that you can download, fork or even deploy immediately: 22 | 23 | - Vanilla Jekyll starter kit: 24 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/daviddarnes/garth-kit) 25 | - Stackbit starter kit: 26 | [![Create with Stackbit](https://assets.stackbit.com/badge/create-with-stackbit.svg)](https://app.stackbit.com/create?theme=https://github.com/daviddarnes/garth-stackbit-kit) 27 | - GitHub Pages with remote theme kit - **[Download kit](https://github.com/daviddarnes/garth-kit/archive/remote-theme.zip)** 28 | 29 | ### As a Jekyll theme 30 | 31 | 1. Add `gem "garth-jekyll-theme"` to your `Gemfile` to add the theme as a dependancy 32 | 2. Run the command `bundle install` in the root of project to install the theme and its dependancies 33 | 3. Add `theme: garth-jekyll-theme` to your `_config.yml` file to set the site theme 34 | 4. Run `bundle exec jekyll serve` to build and serve your site 35 | 5. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options 36 | 37 | ### As a GitHub Pages remote theme 38 | 39 | 1. Add `gem "jekyll-remote-theme"` to your `Gemfile` to add the theme as a dependancy 40 | 2. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy 41 | 3. Add `jekyll-remote-theme` to the list of `plugins` in your `_config.yml` file 42 | 4. Add `remote_theme: daviddarnes/garth` to your `_config.yml` file to set the site theme 43 | 5. Run `bundle exec jekyll serve` to build and serve your site 44 | 6. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options 45 | 46 | ### As a Boilerplate / Fork 47 | 48 | _(deprecated, not recommended)_ 49 | 50 | 1. [Fork the repo](https://github.com/daviddarnes/garth#fork-destination-box) 51 | 2. Replace the `Gemfile` with one stating all the gems used in your project 52 | 3. Delete the following unnecessary files/folders: `CODE_OF_CONDUCT.md`, `CONTRIBUTING.md`, `LICENSE`, `screenshot.png`, `CNAME` and `garth-jekyll-theme.gemspec` 53 | 4. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy 54 | 5. Run `bundle exec jekyll serve` to build and serve your site 55 | 6. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options 56 | 57 | ## Customising 58 | 59 | When using Garth 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. 60 | 61 | To add your own styles copy the [`styles.scss`](https://github.com/daviddarnes/garth/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 "garth";` line. 62 | 63 | If you're looking to set your own colours copy the [`_colors.scss`](https://github.com/daviddarnes/garth/blob/master/_sass/_colors.scss) and main theme styles file [`garth.scss`](https://github.com/daviddarnes/garth/blob/master/_sass/garth.scss) into your project at the same file path (`_sass/`) and change variables however you wish. 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. 64 | 65 | ## Site settings 66 | 67 | You'll need to change the `description`, `title` and `url` to match with the project. 68 | 69 | ## Page layouts 70 | 71 | There are 3 layouts; `page`, `post` and `home` (home acts as the font page blog). 72 | 73 | > **Note:** The Post List Page options are actually in the collection data within the `_config.yml` file, this is so they can be edited with CMSs such as [Siteleaf](https://siteleaf.com) 74 | 75 | ## Credits 76 | 77 | - Thanks to [Sassline](https://sassline.com/) for the typographic basis, by [Jake Giltsoff](https://twitter.com/jakegiltsoff) 78 | - Thanks to [Flexbox mixin](https://github.com/mastastealth/sass-flex-mixin) by [Brian Franco](https://twitter.com/brianfranco) 79 | - Thanks to [Normalize](https://necolas.github.io/normalize.css/) by [Nicolas Gallagher](https://twitter.com/necolas) and [Jonathan Neal](https://twitter.com/jon_neal). 80 | - Thanks to [pygments-css](http://richleland.github.io/pygments-css/) for the autumn syntax highlighting, by [Rich Leland](https://twitter.com/richleland) 81 | -------------------------------------------------------------------------------- /_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 | 10 | # 1. Files excluded from Jekyll builds 11 | exclude: 12 | - README.md 13 | - CODE_OF_CONDUCT.md 14 | - CONTRIBUTING.md 15 | - screenshot.png 16 | - LICENSE 17 | - CNAME 18 | - Gemfile 19 | - Gemfile.lock 20 | - garth-jekyll-theme.gemspec 21 | 22 | # 2. Installed Gems 23 | plugins: 24 | - jekyll-paginate 25 | 26 | # 3. Gem settings 27 | paginate: 2 # jekyll-paginate > items per page 28 | paginate_path: page:num # jekyll-paginate > blog page 29 | 30 | # 4. Jekyll settings 31 | sass: 32 | style: compressed # Style compression 33 | permalink: pretty # Permalink style (/YYYY/MM/DD/page-name/) 34 | excerpt_separator: # Marks end of excerpt in posts 35 | timezone: Europe/London # Timezone for blog posts and alike 36 | 37 | # 5. Collections 38 | collections: 39 | posts: 40 | title: Blog # Needed for Siteleaf 41 | output: true 42 | description: "This is merely a demo, find out more [about Garth](about)" # The post list page content 43 | 44 | # 6. Jekyll collections settings 45 | defaults: 46 | - 47 | scope: 48 | path: "" 49 | type: pages 50 | values: 51 | layout: page # Default layout 52 | - 53 | scope: 54 | path: "" 55 | type: posts 56 | values: 57 | layout: post # Default layout 58 | 59 | # 7. Site settings 60 | encoding: utf-8 # Make sure the encoding is right 61 | title: "Garth" # Site name or title 62 | logo: "/assets/logo.svg" # Site logo 63 | # favicon: "/favicon.ico" # Uncomment to add custom favicon, or leave as is to use site logo 64 | description: "A really basic theme for Jekyll, using the official Jekyll theme implementation" # Site description and default description 65 | url: "https://garth.darn.es" # Site url 66 | baseurl: "" 67 | lang: en-GB 68 | -------------------------------------------------------------------------------- /_includes/post-list.html: -------------------------------------------------------------------------------- 1 | {% if paginator.posts %} 2 | 3 | 16 | {% include post-pagination.html %} 17 | 18 | {% else %} 19 | 20 | 33 | 34 | {% endif %} 35 | -------------------------------------------------------------------------------- /_includes/post-meta.html: -------------------------------------------------------------------------------- 1 | {% if page.categories %} 2 | {% capture categories %} 3 | {% for category in page.categories %} 4 | {{ category }}{% if forloop.last == false %},{% endif %} 5 | {% endfor %} 6 | {% endcapture %} 7 | {% elsif page.category %} 8 | {% capture categories %} 9 | {{ page.category }} 10 | {% endcapture %} 11 | {% endif %} 12 | 13 | 14 | {{ categories | append: " · " }} 15 | 16 | -------------------------------------------------------------------------------- /_includes/post-pagination.html: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /_includes/site-footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | © {{ site.title }} {{ site.time | date: '%Y' }} 5 |
6 |
7 |
8 | -------------------------------------------------------------------------------- /_includes/site-header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {% if site.logo %}{% include site-logo.html %}{% endif %} 4 | {% include site-nav.html %} 5 |
6 |
7 | -------------------------------------------------------------------------------- /_includes/site-logo.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /_includes/site-nav.html: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {% if page.collectionpage %} 6 | {% assign collectiondata = site.collections | where: "label", page.collectionpage | first %} 7 | {{ collectiondata.title }} - {{ site.title }} 8 | {% elsif page.title %} 9 | {{ page.title }} - {{ site.title }} 10 | {% else %} 11 | {{ site.title }} 12 | {% endif %} 13 | 14 | 15 | 16 | {% if site.favicon %} 17 | 18 | {% else %} 19 | 20 | {% endif %} 21 | 22 | 23 | 24 | 25 | {{ content }} 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /_layouts/home.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | {% include site-header.html %} 6 | 7 |
8 | 9 |
10 | 11 |
12 | 13 | {% assign collectiondata = site.collections | where: "label", page.collectionpage | first %} 14 |

{{ collectiondata.title }}

15 | 16 | {{ collectiondata.description | markdownify }} 17 | 18 |
19 | 20 | {% include post-list.html %} 21 | 22 |
23 | 24 |
25 | 26 | {% include site-footer.html %} 27 | -------------------------------------------------------------------------------- /_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 |
18 | 19 | {% include site-footer.html %} 20 | -------------------------------------------------------------------------------- /_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 |
16 | 17 |
18 | 19 | {% include site-footer.html %} 20 | -------------------------------------------------------------------------------- /_posts/2016-08-27-example-post-one.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: What was Wayne's World? 3 | category: General 4 | --- 5 | 6 | Wayne's World is a 1992 comedy film directed by Penelope Spheeris and starring Mike Myers as Wayne Campbell and Dana Carvey as Garth Algar. The film was adapted from a sketch of the same name on NBC's Saturday Night Live. 7 | 8 | 9 | 10 | The film grossed US$121.6 million in its theatrical run, placing it as the tenth highest-grossing film of 1992 and the highest-grossing of the 11 films based on Saturday Night Live skits. It was filmed in 34 days. 11 | 12 | Wayne's World was Myers' feature film debut. It also features Rob Lowe, Tia Carrere, Lara Flynn Boyle, Brian Doyle-Murray, Robert Patrick (spoofing their role in Terminator 2: Judgment Day), Chris Farley, Ed O'Neill, Ione Skye, Meat Loaf, and Alice Cooper. Wayne's World was released on February 14, 1992, and was a critical and commercial success. A sequel, Wayne's World 2, was released on December 10, 1993. In 2000, readers of Total Film magazine voted Wayne's World the 41st-greatest comedy film of all time. 13 | 14 | _Originally from [Wayne's World (film) - Wikipedia](https://en.wikipedia.org/wiki/Wayne%27s_World_(film))_ 15 | -------------------------------------------------------------------------------- /_posts/2016-08-28-example-post-two.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Who is Mike Myers? 3 | category: People 4 | --- 5 | 6 | Michael John "Mike" Myers (born May 25, 1963) is a Canadian-born performer, comedian, screenwriter, and film producer, who also holds UK and US citizenship.[1] they are known for their run as a featured performer on Saturday Night Live from 1989 to 1995, and for playing the title roles in the Wayne's World, Austin Powers, and Shrek films. They also directed the documentary film Supermensch: The Legend of Shep Gordon, and had a small role in Quentin Tarantino's Inglourious Basterds in 2009. 7 | 8 | 9 | 10 | Myers was born on May 25, 1963 in Scarborough, Ontario, the child of English-born parents Eric Myers (1922–1991), an insurance agent, and their spouse, Alice E. (née Hind; born 1926), an office supervisor and a veteran of the Royal Air Force. 11 | 12 | Both their parents were from Liverpool and they have two older siblings, Paul, an indie rock singer-songwriter, broadcaster and author, and Peter, a Sears Canada employee. 13 | 14 | Myers reportedly holds Canadian, U.S. and British citizenship. 15 | 16 | Myers grew up in North York and then Scarborough, where they attended Sir John A. MacDonald Collegiate Institute and then graduated from Stephen Leacock Collegiate Institute in 1982. 17 | 18 | _Originally from [Mike Myers - Wikipedia](https://en.wikipedia.org/wiki/Mike_Myers)_ 19 | -------------------------------------------------------------------------------- /_posts/2016-08-29-example-post-three.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Who is Dana Carvey? 3 | category: People 4 | --- 5 | 6 | Dana Thomas Carvey (born June 2, 1955) is a performer and stand-up comedian known for their work as a cast member on Saturday Night Live and for playing the role of Garth Algar in the Wayne's World films. 7 | 8 | 9 | 10 | Carvey was born in Missoula, Montana, the child of Billie Dahl, a schoolteacher, and Bud Carvey, a high-school business teacher. Carvey is the sibling of Brad Carvey, the engineer/designer of the Video Toaster. The character Garth Algar is loosely based on Brad. Carvey has English, German, Irish, Norwegian, and Swedish ancestry, and was raised Lutheran. When they were three years old, their family moved to San Carlos, California, in the San Francisco Bay Area. They received their first drum kit at an early age. They attended Tierra Linda Junior High in San Carlos, Carlmont High School in Belmont, California (where they were a member of the Central Coast Section champion cross country team), College of San Mateo in San Mateo, California, and received their bachelor's degree in broadcast communications from San Francisco State University. 11 | 12 | They had a minor role in Halloween II, and co-starred on One of the Boys in 1982, a short-lived television sitcom that also starred Mickey Rooney, Nathan Lane, and Meg Ryan. In 1984, Carvey had a small role in Rob Reiner's film This Is Spinal Tap, in which they played a mime, with comedian Billy Crystal (who tells them "Mime is money!"). They also appeared in the short-lived film-based action television series Blue Thunder. 13 | 14 | _Originally from [Dana Carvey - Wikipedia](https://en.wikipedia.org/wiki/Dana_Carvey)_ 15 | -------------------------------------------------------------------------------- /_sass/_colors.scss: -------------------------------------------------------------------------------- 1 | // Colours 2 | $bodyColour: #46412A; 3 | $headingColour: darken($bodyColour, 5%); 4 | $linkColour: #5B5BFF; 5 | $hoverColour: darken($linkColour, 10%); 6 | $captionColour: lighten($headingColour, 40%); 7 | $white: #fff; 8 | 9 | $backgroundColour: #ffefc8; 10 | $codeBackgroundColour: darken($backgroundColour, 5%); 11 | -------------------------------------------------------------------------------- /_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/_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: 900px; 14 | margin: 0 auto; 15 | } 16 | 17 | 18 | // Header, feature and footer 19 | .header, 20 | .footer { 21 | .container { 22 | padding: 1rem 0; 23 | @include flexbox; 24 | @include flex-direction(column); 25 | @include align-items(center); 26 | text-align: center; 27 | } 28 | @include breakpoint(break-1) { 29 | .container { 30 | @include flex-direction(row); 31 | @include justify-content(space-between); 32 | text-align: inherit; 33 | } 34 | } 35 | } 36 | 37 | .header { 38 | @include flex(0, 0, auto); 39 | background: darken($backgroundColour, 10%); 40 | } 41 | 42 | .logo { 43 | display: inline-block; 44 | line-height: 0; 45 | border-radius: 100%; 46 | overflow: hidden; 47 | img { 48 | width: 4rem; 49 | height: 4rem; 50 | } 51 | } 52 | 53 | .small { 54 | padding-top: .6rem; 55 | color: $captionColour; 56 | display: inline-block; 57 | } 58 | 59 | .footer { 60 | border-top: 1px solid darken($backgroundColour, 15%); 61 | } 62 | 63 | 64 | // Nav and copyright 65 | .nav { 66 | &--paginator { 67 | @include flexbox; 68 | @include justify-content(center); 69 | color: $captionColour; 70 | text-align: center; 71 | } 72 | } 73 | 74 | .pagination { 75 | margin: 0 1rem; 76 | } 77 | 78 | 79 | // Main content 80 | .main { 81 | @include flexbox; 82 | @include flex-direction(column); 83 | @include flex(1, 0, auto); 84 | margin-bottom: 1.6rem; 85 | @include breakpoint(break-1) { 86 | @include flex-direction(row); 87 | } 88 | } 89 | 90 | 91 | // Lists 92 | .list { 93 | &--posts { 94 | list-style: none; 95 | } 96 | &--nav { 97 | list-style: none; 98 | } 99 | .item--post { 100 | margin-left: 0; 101 | } 102 | } 103 | 104 | .item { 105 | &--nav { 106 | display: inline-block; 107 | margin-left: 1rem; 108 | &:first-of-type { 109 | margin-left: 0; 110 | } 111 | } 112 | &--current { 113 | a { 114 | color: desaturate($linkColour, 100%); 115 | } 116 | } 117 | } 118 | 119 | 120 | // Images and media elements 121 | img { 122 | max-width: 100%; 123 | height: auto; 124 | } 125 | 126 | audio, 127 | video { 128 | width: 100%; 129 | } 130 | 131 | 132 | // Text selection 133 | ::selection { 134 | background: $headingColour; 135 | color: $white; 136 | text-shadow: none; 137 | } 138 | 139 | 140 | // Sassline overrides 141 | .typeset { 142 | a > code { 143 | text-shadow: none; 144 | } 145 | .button, 146 | button { 147 | background-image: none; 148 | text-shadow: none; 149 | color: $backgroundColour; 150 | &:hover, 151 | &:active, 152 | &:focus { 153 | background-image: none; 154 | color: $backgroundColour; 155 | } 156 | } 157 | hr { 158 | width: 100%; 159 | } 160 | li { 161 | > p { 162 | padding: 0; 163 | margin: 0; 164 | } 165 | } 166 | .nav a { 167 | padding-left: 0; 168 | padding-right: 0; 169 | margin-left: .2rem; 170 | margin-right: .2rem; 171 | } 172 | pre { 173 | white-space: pre; 174 | overflow-x: scroll; 175 | } 176 | } 177 | -------------------------------------------------------------------------------- /_sass/garth.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // Import frameworks & theme styles 4 | @import 5 | "normalize", 6 | "colors", 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%,lighten($linkColour,20%) 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%,lighten($hoverColour,20%) 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: '"Alegreya Sans", sans-serif', 60 | regular: 400, 61 | bold: 700, 62 | italic: italic, 63 | cap-height: 0.66 64 | ) !default; 65 | 66 | $headingtype: ( 67 | font-family: '"Neuton", 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 | -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About Garth 3 | --- 4 | 5 | A really basic theme for Jekyll, using the official Jekyll theme implementation. 6 | 7 | - [Fork on GitHub](https://github.com/daviddarnes/garth) 8 | - [Install Garth](https://github.com/daviddarnes/garth#installation) 9 | 10 | [](https://buymeacoffee.com/daviddarnes#support) 11 | 12 | ## Installation 13 | 14 | ### As a Jekyll theme 15 | 16 | 1. Add `gem "garth-jekyll-theme"` to your `Gemfile` to add the theme as a dependancy 17 | 2. Run the command `bundle install` in the root of project to install the theme and its dependancies 18 | 3. Add `theme: garth-jekyll-theme` to your `_config.yml` file to set the site theme 19 | 4. Run `bundle exec jekyll serve` to build and serve your site 20 | 5. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options 21 | 22 | ### As a GitHub Pages remote theme 23 | 24 | 1. Add `gem "jekyll-remote-theme"` to your `Gemfile` to add the theme as a dependancy 25 | 2. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy 26 | 3. Add `jekyll-remote-theme` to the list of `plugins` in your `_config.yml` file 27 | 4. Add `remote_theme: daviddarnes/garth` to your `_config.yml` file to set the site theme 28 | 5. Run `bundle exec jekyll serve` to build and serve your site 29 | 6. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options 30 | 31 | ### As a Boilerplate / Fork 32 | 33 | _(deprecated, not recommended)_ 34 | 35 | 1. [Fork the repo](https://github.com/daviddarnes/garth#fork-destination-box) 36 | 2. Replace the `Gemfile` with one stating all the gems used in your project 37 | 3. Delete the following unnecessary files/folders: `CODE_OF_CONDUCT.md`, `CONTRIBUTING.md`, `LICENSE`, `screenshot.png`, `CNAME` and `garth-jekyll-theme.gemspec` 38 | 4. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy 39 | 5. Run `bundle exec jekyll serve` to build and serve your site 40 | 6. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options 41 | -------------------------------------------------------------------------------- /assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/styles.scss: -------------------------------------------------------------------------------- 1 | --- 2 | title: false 3 | --- 4 | 5 | @import "garth"; 6 | -------------------------------------------------------------------------------- /garth-jekyll-theme.gemspec: -------------------------------------------------------------------------------- 1 | # coding: utf-8 2 | 3 | Gem::Specification.new do |spec| 4 | spec.name = "garth-jekyll-theme" 5 | spec.version = "1.0.5" 6 | spec.authors = ["David Darnes"] 7 | spec.email = ["me@daviddarnes.com"] 8 | 9 | spec.summary = %q{A really basic theme for Jekyll.} 10 | spec.description = "A really basic theme for Jekyll, using the official Jekyll theme implementation." 11 | spec.homepage = "https://garth.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)}i) } 17 | 18 | spec.add_runtime_dependency "jekyll", ">= 3.6", "< 5.0" 19 | spec.add_runtime_dependency "jekyll-paginate", "~> 1.1" 20 | 21 | spec.add_development_dependency "bundler", ">= 1.14", "< 3.0" 22 | end 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | collectionpage: posts 4 | --- 5 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daviddarnes/garth/32fa37c45112a2d3952d0813e10e57cd65a19af6/screenshot.png --------------------------------------------------------------------------------