Repository: pages-themes/primer
Branch: master
Commit: be021deb4cbc
Files: 80
Total size: 103.6 KB
Directory structure:
gitextract__yudom7l/
├── .github/
│ ├── CODEOWNERS
│ ├── config.yml
│ ├── dependabot.yml
│ ├── no-response.yml
│ ├── settings.yml
│ ├── stale.yml
│ └── workflows/
│ ├── ci.yaml
│ └── publish-gem.yml
├── .gitignore
├── .rubocop.yml
├── .travis.yml
├── Gemfile
├── LICENSE.md
├── README.md
├── _config.yml
├── _includes/
│ ├── .gitkeep
│ ├── head-custom-google-analytics.html
│ └── head-custom.html
├── _layouts/
│ ├── default.html
│ ├── home.html
│ ├── page.html
│ └── post.html
├── _sass/
│ ├── jekyll-theme-primer.scss
│ ├── primer-base/
│ │ ├── index.scss
│ │ └── lib/
│ │ ├── base.scss
│ │ ├── normalize.scss
│ │ └── typography-base.scss
│ ├── primer-layout/
│ │ ├── index.scss
│ │ └── lib/
│ │ ├── columns.scss
│ │ ├── container.scss
│ │ ├── grid-offset.scss
│ │ └── grid.scss
│ ├── primer-markdown/
│ │ ├── index.scss
│ │ └── lib/
│ │ ├── blob-csv.scss
│ │ ├── code.scss
│ │ ├── headings.scss
│ │ ├── images.scss
│ │ ├── lists.scss
│ │ ├── markdown-body.scss
│ │ └── tables.scss
│ ├── primer-support/
│ │ ├── index.scss
│ │ └── lib/
│ │ ├── mixins/
│ │ │ ├── buttons.scss
│ │ │ ├── layout.scss
│ │ │ ├── misc.scss
│ │ │ └── typography.scss
│ │ └── variables/
│ │ ├── color-system.scss
│ │ ├── colors.scss
│ │ ├── layout.scss
│ │ ├── misc.scss
│ │ └── typography.scss
│ ├── primer-utilities/
│ │ ├── index.scss
│ │ └── lib/
│ │ ├── animations.scss
│ │ ├── borders.scss
│ │ ├── box-shadow.scss
│ │ ├── colors.scss
│ │ ├── details.scss
│ │ ├── flexbox.scss
│ │ ├── layout.scss
│ │ ├── margin.scss
│ │ ├── padding.scss
│ │ ├── typography.scss
│ │ └── visibility-display.scss
│ ├── primer.scss
│ └── rouge.scss
├── another-page.md
├── assets/
│ └── css/
│ └── style.scss
├── docs/
│ ├── CODE_OF_CONDUCT.md
│ ├── CONTRIBUTING.md
│ └── SUPPORT.md
├── index.md
├── jekyll-theme-primer.gemspec
├── package.json
└── script/
├── bootstrap
├── build
├── cibuild
├── install
├── release
├── server
├── update
└── validate-html
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/CODEOWNERS
================================================
# Require maintainer's :+1: for changes to the .github/ repo-config files
# mainly due to https://github.com/probot/settings privilege escalation
.github/* @pages-themes/maintainers
================================================
FILE: .github/config.yml
================================================
# Behaviorbot config. See https://github.com/behaviorbot/ for more information.
# Note: Please Don't edit this file directly.
# Edit https://github.com/pages-themes/maintenance-scripts instead.
# Configuration for update-docs - https://github.com/behaviorbot/update-docs
updateDocsComment: "Thanks for the pull request! If you are making any changes to the user-facing functionality, please be sure to update the documentation in the `README` or `docs/` folder alongside your change. :heart:"
# Configuration for request-info - https://github.com/behaviorbot/request-info
requestInfoReplyComment: Thanks for this. Do you mind providing a bit more information about what problem you're trying to solve?
requestInfoLabelToAdd: more-information-needed
# Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome
#newIssueWelcomeComment: >
# Welcome!
# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
newPRWelcomeComment: Welcome! Congrats on your first pull request to the Primer theme. If you haven't already, please be sure to check out [the contributing guidelines](https://github.com/pages-themes/primer/blob/master/docs/CONTRIBUTING.md).
# Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
firstPRMergeComment: "Congrats on getting your first pull request to the Primer theme merged! Without amazing humans like you submitting pull requests, we couldn’t run this project. You rock! :tada:<br /><br />If you're interested in tackling another bug or feature, take a look at [the open issues](https://github.com/pages-themes/primer/issues), especially those [labeled `help wanted`](https://github.com/pages-themes/primer/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)."
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: npm
directory: "/"
schedule:
interval: daily
open-pull-requests-limit: 10
ignore:
- dependency-name: y18n
versions:
- 4.0.1
- 4.0.2
================================================
FILE: .github/no-response.yml
================================================
# Configuration for probot-no-response - https://github.com/probot/no-response
# Number of days of inactivity before an Issue is closed for lack of response
daysUntilClose: 14
# Label requiring a response
responseRequiredLabel: more-information-needed
# Comment to post when closing an Issue for lack of response. Set to `false` to disable
closeComment: >
This issue has been automatically closed because there has been no response
to our request for more information from the original author. With only the
information that is currently in the issue, we don't have enough information
to take action. Please reach out if you have or find the answers we need so
that we can investigate further.
================================================
FILE: .github/settings.yml
================================================
# Repository settings set via https://github.com/probot/settings
repository:
has_issues: true
has_wiki: false
has_projects: false
has_downloads: false
labels:
- name: help wanted
oldname: help-wanted
color: 0e8a16
- name: more-information-needed
color: d93f0b
- name: bug
color: b60205
- name: feature
color: 1d76db
- name: good first issue
color: "5319e7"
# Not currently implemented by probot/settings, but manually implemented in script/deploy
branch_protection:
restrictions: null
enforce_admins: false
required_status_checks:
strict: true
contexts:
- "script/cibuild" # GitHub Actions CI workflow
required_pull_request_reviews:
require_code_owner_reviews: true
================================================
FILE: .github/stale.yml
================================================
# Configuration for probot-stale - https://github.com/probot/stale
# Number of days of inactivity before an Issue or Pull Request becomes stale
daysUntilStale: 60
# Number of days of inactivity before a stale Issue or Pull Request is closed
daysUntilClose: 7
# Issues or Pull Requests with these labels will never be considered stale
exemptLabels:
- pinned
- security
# Label to use when marking as stale
staleLabel: wontfix
# Comment to post when marking as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.
# Comment to post when closing a stale Issue or Pull Request. Set to `false` to disable
closeComment: false
# Limit to only `issues` or `pulls`
# only: issues
================================================
FILE: .github/workflows/ci.yaml
================================================
on:
push:
pull_request:
types: [opened, synchronize]
jobs:
build:
runs-on: ubuntu-latest
name: script/cibuild
steps:
- uses: actions/checkout@v2
- uses: ruby/setup-ruby@v1
with:
ruby-version: 3.2
bundler-cache: true
- name: build
run: script/bootstrap
- name: test
run: script/cibuild
================================================
FILE: .github/workflows/publish-gem.yml
================================================
name: Publish Gem
on:
release:
types: [released]
jobs:
release:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: '3.2'
- name: Build gem
run: |
gem build github-pages.gemspec
- name: Publish
run: |
gem push github-pages.gem --key ${{ secrets.PAGES_GEM_PUBLISH }}
================================================
FILE: .gitignore
================================================
_site
node_modules
.sass-cache
*.gem
Gemfile.lock
*.gem
assets/**/*.html
assets/**/*.md
.jekyll-cache
================================================
FILE: .rubocop.yml
================================================
inherit_gem:
rubocop-github:
- config/default.yml
AllCops:
Exclude:
- _site/**/*
- vendor/**/*
Layout/LineLength:
Enabled: false
================================================
FILE: .travis.yml
================================================
language: ruby
cache: bundler
rvm: 2.6
install: script/bootstrap
script: script/cibuild
================================================
FILE: Gemfile
================================================
# frozen_string_literal: true
source "https://rubygems.org"
gemspec
================================================
FILE: LICENSE.md
================================================
The MIT License (MIT)
Copyright (c) 2016-2017 GitHub, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
# The Primer theme
[](https://github.com/pages-themes/primer/actions/workflows/ci.yaml) [](https://badge.fury.io/rb/jekyll-theme-primer)
*Primer is a Jekyll theme for GitHub Pages. You can [preview the theme to see what it looks like](http://pages-themes.github.io/primer), or even [use it today](#usage).*
## Usage
To use the Primer theme:
1. Add the following to your site's `_config.yml`:
```yml
remote_theme: pages-themes/primer@v0.6.0
plugins:
- jekyll-remote-theme # add this line to the plugins list if you already have one
```
2. Optionally, if you'd like to preview your site on your computer, add the following to your site's `Gemfile`:
```ruby
gem "github-pages", group: :jekyll_plugins
```
## Customizing
### Configuration variables
Primer will respect the following variables, if set in your site's `_config.yml`:
```yml
title: [The title of your site]
description: [A short description of your site's purpose]
```
Additionally, you may choose to set the following optional variables:
```yml
show_downloads: ["true" or "false" (unquoted) to indicate whether to provide a download URL]
google_analytics: [Your Google Analytics tracking ID]
```
### Stylesheet
If you'd like to add your own custom styles:
1. Create a file called `/assets/css/style.scss` in your site
2. Add the following content to the top of the file, exactly as shown:
```scss
---
---
@import "{{ site.theme }}";
```
3. Add any custom CSS (or Sass, including imports) you'd like immediately after the `@import` line
*Note: If you'd like to change the theme's Sass variables, you must set new values before the `@import` line in your stylesheet.*
### Layouts
If you'd like to change the theme's HTML layout:
1. For some changes such as a custom `favicon`, you can add custom files in your local `_includes` folder. The files [provided with the theme](https://github.com/pages-themes/primer/tree/master/_includes) provide a starting point and are included by the [original layout template](https://github.com/pages-themes/primer/blob/master/_layouts/default.html).
2. For more extensive changes, [copy the original template](https://github.com/pages-themes/primer/blob/master/_layouts/default.html) from the theme's repository<br />(*Pro-tip: click "raw" to make copying easier*)
3. Create a file called `/_layouts/default.html` in your site
4. Paste the default layout content copied in the first step
5. Customize the layout as you'd like
### Customizing Google Analytics code
Google has released several iterations to their Google Analytics code over the years since this theme was first created. If you would like to take advantage of the latest code, paste it into `_includes/head-custom-google-analytics.html` in your Jekyll site.
### Overriding GitHub-generated URLs
Templates often rely on URLs supplied by GitHub such as links to your repository or links to download your project. If you'd like to override one or more default URLs:
1. Look at [the template source](https://github.com/pages-themes/primer/blob/master/_layouts/default.html) to determine the name of the variable. It will be in the form of `{{ site.github.zip_url }}`.
2. Specify the URL that you'd like the template to use in your site's `_config.yml`. For example, if the variable was `site.github.url`, you'd add the following:
```yml
github:
zip_url: http://example.com/download.zip
another_url: another value
```
3. When your site is built, Jekyll will use the URL you specified, rather than the default one provided by GitHub.
*Note: You must remove the `site.` prefix, and each variable name (after the `github.`) should be indent with two space below `github:`.*
For more information, see [the Jekyll variables documentation](https://jekyllrb.com/docs/variables/).
## Roadmap
See the [open issues](https://github.com/pages-themes/primer/issues) for a list of proposed features (and known issues).
## Project philosophy
The Primer theme is intended to make it quick and easy for GitHub Pages users to create their first (or 100th) website. The theme should meet the vast majority of users' needs out of the box, erring on the side of simplicity rather than flexibility, and provide users the opportunity to opt-in to additional complexity if they have specific needs or wish to further customize their experience (such as adding custom CSS or modifying the default layout). It should also look great, but that goes without saying.
## Contributing
Interested in contributing to Primer? We'd love your help. Primer is an open source project, built one contribution at a time by users like you. See [the CONTRIBUTING file](docs/CONTRIBUTING.md) for instructions on how to contribute.
### Previewing the theme locally
If you'd like to preview the theme locally (for example, in the process of proposing a change):
1. Clone down the theme's repository (`git clone https://github.com/pages-themes/primer`)
2. `cd` into the theme's directory
3. Run `script/bootstrap` to install the necessary dependencies
4. Run `bundle exec jekyll serve` to start the preview server
5. Visit [`localhost:4000`](http://localhost:4000) in your browser to preview the theme
### Running tests
The theme contains a minimal test suite, to ensure a site with the theme would build successfully. To run the tests, simply run `script/cibuild`. You'll need to run `script/bootstrap` once before the test script will work.
================================================
FILE: _config.yml
================================================
exclude:
- node_modules
- script
sass:
style: :compressed
theme: jekyll-theme-primer
github:
private: false
license:
name: MIT
source:
branch: "master"
path: "/"
repository_url: "https://github.com/pages-themes/primer"
title: Jekyll Theme Primer
description: Primer is a Jekyll theme for GitHub Pages
================================================
FILE: _includes/.gitkeep
================================================
================================================
FILE: _includes/head-custom-google-analytics.html
================================================
{% if site.google_analytics %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{ site.google_analytics }}');
</script>
{% endif %}
================================================
FILE: _includes/head-custom.html
================================================
<!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
<!-- Setup Google Analytics -->
{% include head-custom-google-analytics.html %}
<!-- You can set your favicon here -->
<!-- link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}" -->
<!-- end custom head snippets -->
================================================
FILE: _layouts/default.html
================================================
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en-US" }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% seo %}
<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
{% include head-custom.html %}
</head>
<body>
<div class="container-lg px-3 my-5 markdown-body">
{% if site.title and site.title != page.title %}
<h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
{% endif %}
{{ content }}
{% if site.github.private != true and site.github.license %}
<div class="footer border-top border-gray-light mt-5 pt-3 text-right text-gray">
This site is open source. {% github_edit_link "Improve this page" %}.
</div>
{% endif %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
<script>anchors.add();</script>
</body>
</html>
================================================
FILE: _layouts/home.html
================================================
---
layout: default
---
{{ content }}
================================================
FILE: _layouts/page.html
================================================
---
layout: default
---
{{ content }}
================================================
FILE: _layouts/post.html
================================================
---
layout: default
---
{{ content }}
================================================
FILE: _sass/jekyll-theme-primer.scss
================================================
@import "primer-support/index.scss";
@import "primer-base/index.scss";
@import "primer-utilities/index.scss";
@import "primer-layout/index.scss";
@import "primer-markdown/index.scss";
@import "rouge";
================================================
FILE: _sass/primer-base/index.scss
================================================
@import "primer-support/index.scss";
@import "./lib/normalize.scss";
@import "./lib/base.scss";
@import "./lib/typography-base.scss";
================================================
FILE: _sass/primer-base/lib/base.scss
================================================
// stylelint-disable selector-max-type
* {
box-sizing: border-box;
}
input,
select,
textarea,
button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
body {
font-family: $body-font;
font-size: $body-font-size;
line-height: $body-line-height;
color: $text-gray-dark;
background-color: $bg-white;
}
a {
color: $text-blue;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
b,
strong {
font-weight: $font-weight-bold;
}
// Horizontal lines
//
// TODO-MDO: Remove `.rule` from everywhere and replace with `<hr>`s
hr,
.rule {
height: 0;
margin: 15px 0;
overflow: hidden;
background: transparent;
border: 0;
border-bottom: 1px solid lighten($gray-300, 5%);
@include clearfix();
}
//
// Remove most spacing between table cells.
//
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
button {
cursor: pointer;
// Remove border radius added by Chroma macOS
border-radius: 0;
}
// increase the selector specificity for [hidden]
// so that it always overrides utility classes (.d-block, etc.)
[hidden][hidden] {
display: none !important;
}
details {
summary { cursor: pointer; }
&:not([open]) {
// Set details content hidden by default for browsers that don't do this
> *:not(summary) { display: none !important; }
}
}
================================================
FILE: _sass/primer-base/lib/normalize.scss
================================================
// stylelint-disable
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section { /* 1 */
display: block;
}
summary {
display: list-item;
}
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template, /* 1 */
[hidden] {
display: none !important;
}
/* Links
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent; /* 1 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* Forms
========================================================================== */
/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
select,
textarea {
font: inherit; /* 1 */
margin: 0; /* 2 */
}
/**
* Restore the font weight unset by the previous rule.
*/
optgroup {
font-weight: bold;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
================================================
FILE: _sass/primer-base/lib/typography-base.scss
================================================
// Headings
// --------------------------------------------------
// stylelint-disable selector-max-type
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0;
}
h1 { @include h1; }
h2 { @include h2; }
h3 { @include h3; }
h4 { @include h4; }
h5 { @include h5; }
h6 { @include h6; }
// Body text
// --------------------------------------------------
p {
margin-top: 0;
margin-bottom: 10px;
}
small {
font-size: 90%;
}
blockquote {
margin: 0;
}
// Lists
// --------------------------------------------------
ul,
ol {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
ol ol,
ul ol {
list-style-type: lower-roman;
}
ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
list-style-type: lower-alpha;
}
dd {
margin-left: 0;
}
// Code
// --------------------------------------------------
tt,
code {
font-family: $mono-font;
font-size: $font-size-small;
}
pre {
margin-top: 0;
margin-bottom: 0;
font-family: $mono-font;
font-size: $font-size-small;
}
// Octicons
// --------------------------------------------------
// Move this over here as a temporary override to the octicons source repo
// instead of updating that upstream.
.octicon {
vertical-align: text-bottom;
}
================================================
FILE: _sass/primer-layout/index.scss
================================================
@import "primer-support/index.scss";
@import "./lib/container.scss";
@import "./lib/columns.scss";
@import "./lib/grid.scss";
@import "./lib/grid-offset.scss";
================================================
FILE: _sass/primer-layout/lib/columns.scss
================================================
// Grid system
//
// Create rows with `.columns` to clear the floated columns and outdent the
// padding on `.column`s with negative margin for alignment.
.columns {
margin-right: -$grid-gutter;
margin-left: -$grid-gutter;
@include clearfix;
}
// Base class for every column (requires a column width from below)
.column {
float: left;
padding-right: $grid-gutter;
padding-left: $grid-gutter;
}
// Column widths
.one-third {
width: 33.333333%;
}
.two-thirds {
width: 66.666667%;
}
.one-fourth {
width: 25%;
}
.one-half {
width: 50%;
}
.three-fourths {
width: 75%;
}
.one-fifth {
width: 20%;
}
.four-fifths {
width: 80%;
}
// Centers content horizontally. Can be used inside or outside the grid.
.centered {
display: block;
float: none;
margin-right: auto;
margin-left: auto;
}
================================================
FILE: _sass/primer-layout/lib/container.scss
================================================
// Fixed-width, centered column for site content.
// This will be deprecated and replaced with container-lg in future
.container {
width: $container-width;
margin-right: auto;
margin-left: auto;
@include clearfix;
}
// Handy container styles that match our breakpoints
// 768px
.container-md {
max-width: $container-md;
margin-right: auto;
margin-left: auto;
}
// 1004px - this matches the current fixed width: 980px + padding: px-3
.container-lg {
max-width: $container-lg;
margin-right: auto;
margin-left: auto;
}
// 1280px
.container-xl {
max-width: $container-xl;
margin-right: auto;
margin-left: auto;
}
================================================
FILE: _sass/primer-layout/lib/grid-offset.scss
================================================
// Optional offset options to work with grid.scss
// Offset Columns
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
.offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
.offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
.offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
.offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
.offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
.offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
.offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
.offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
.offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
.offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
.offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
}
}
================================================
FILE: _sass/primer-layout/lib/grid.scss
================================================
// GRID
// Columns
.col-1 { width: (1 / 12 * 100%); }
.col-2 { width: (2 / 12 * 100%); }
.col-3 { width: (3 / 12 * 100%); }
.col-4 { width: (4 / 12 * 100%); }
.col-5 { width: (5 / 12 * 100%); }
.col-6 { width: (6 / 12 * 100%); }
.col-7 { width: (7 / 12 * 100%); }
.col-8 { width: (8 / 12 * 100%); }
.col-9 { width: (9 / 12 * 100%); }
.col-10 { width: (10 / 12 * 100%); }
.col-11 { width: (11 / 12 * 100%); }
.col-12 { width: 100%; }
@each $breakpoint in map-keys($breakpoints) {
@include breakpoint($breakpoint) {
.col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); }
.col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); }
.col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); }
.col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); }
.col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); }
.col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); }
.col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); }
.col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); }
.col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); }
.col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); }
.col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); }
.col-#{$breakpoint}-12 { width: 100%; }
}
}
// Gutters
// Apply padding and a negative margin to the outside of the container
@mixin gutters ($gutter-width: $spacer-3) {
margin-right: -$gutter-width;
margin-left: -$gutter-width;
> [class*="col-"] {
padding-right: $gutter-width !important;
padding-left: $gutter-width !important;
}
}
.gutter {
@include gutters($spacer-3);
}
.gutter-condensed {
@include gutters($spacer-2);
}
.gutter-spacious {
@include gutters($spacer-4);
}
@each $breakpoint in map-keys($breakpoints) {
@include breakpoint($breakpoint) {
.gutter-#{$breakpoint} { @include gutters($spacer-3); }
.gutter-#{$breakpoint}-condensed { @include gutters($spacer-2); }
.gutter-#{$breakpoint}-spacious { @include gutters($spacer-4); }
}
}
================================================
FILE: _sass/primer-markdown/index.scss
================================================
@import "primer-support/index.scss";
@import "./lib/markdown-body.scss";
@import "./lib/headings.scss";
@import "./lib/lists.scss";
@import "./lib/tables.scss";
@import "./lib/images.scss";
@import "./lib/code.scss";
@import "./lib/blob-csv.scss";
================================================
FILE: _sass/primer-markdown/lib/blob-csv.scss
================================================
// stylelint-disable selector-max-type
.markdown-body .csv-data {
td,
th {
padding: 5px;
overflow: hidden;
font-size: $font-size-small;
line-height: $lh-condensed-ultra;
text-align: left;
white-space: nowrap;
}
.blob-num {
padding: 10px $spacer-2 9px;
text-align: right;
background: $bg-white;
border: 0;
}
tr { border-top: 0; }
th {
font-weight: $font-weight-bold;
background: $gray-100;
border-top: 0;
}
}
================================================
FILE: _sass/primer-markdown/lib/code.scss
================================================
// stylelint-disable selector-max-type
.markdown-body {
// Inline code snippets
code,
tt {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: rgba($black, 0.05);
border-radius: $border-radius;
br { display: none; }
}
del code { text-decoration: inherit; }
pre {
word-wrap: normal;
// Code tags within code blocks (<pre>s)
> code {
padding: 0;
margin: 0;
font-size: 100%;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
}
.highlight {
margin-bottom: $spacer-3;
pre {
margin-bottom: 0;
word-break: normal;
}
}
.highlight pre,
pre {
padding: $spacer-3;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: $gray-100;
border-radius: $border-radius;
}
pre code,
pre tt {
display: inline;
max-width: auto;
padding: 0;
margin: 0;
overflow: visible;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
}
================================================
FILE: _sass/primer-markdown/lib/headings.scss
================================================
// Needs refactoring
// stylelint-disable selector-max-compound-selectors, selector-max-specificity
// stylelint-disable selector-max-type
.markdown-body {
// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: $spacer-4;
margin-bottom: $spacer-3;
font-weight: $font-weight-bold;
line-height: $lh-condensed;
.octicon-link {
color: $black;
vertical-align: middle;
visibility: hidden;
}
&:hover .anchor {
text-decoration: none;
.octicon-link {
visibility: visible;
}
}
tt,
code {
font-size: inherit;
}
}
h1 {
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 1px solid lighten($gray-200, 3%);
}
h2 {
padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 1px solid lighten($gray-200, 3%);
}
h3 {
font-size: 1.25em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.875em;
}
h6 {
font-size: 0.85em;
color: $gray-500;
}
}
================================================
FILE: _sass/primer-markdown/lib/images.scss
================================================
// Need to target base styles
// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type, primer/selector-no-utility
// stylelint-disable selector-max-type
.markdown-body {
// Images & Stuff
img {
max-width: 100%;
// because we put padding on the images to hide header lines, and some people
// specify the width of their images in their markdown.
box-sizing: content-box;
background-color: $bg-white;
&[align=right] {
padding-left: 20px;
}
&[align=left] {
padding-right: 20px;
}
}
.emoji {
max-width: none;
vertical-align: text-top;
// Override `<img>` styles so Emjois don't clash with zebra striping in our tables
background-color: transparent;
}
// Gollum Image Tags
// Framed
span.frame {
display: block;
overflow: hidden;
> span {
display: block;
float: left;
width: auto;
padding: 7px;
margin: 13px 0 0;
overflow: hidden;
border: 1px solid lighten($gray-300, 5%);
}
span img {
display: block;
float: left;
}
span span {
display: block;
padding: 5px 0 0;
clear: both;
color: $text-gray-dark;
}
}
span.align-center {
display: block;
overflow: hidden;
clear: both;
> span {
display: block;
margin: 13px auto 0;
overflow: hidden;
text-align: center;
}
span img {
margin: 0 auto;
text-align: center;
}
}
span.align-right {
display: block;
overflow: hidden;
clear: both;
> span {
display: block;
margin: 13px 0 0;
overflow: hidden;
text-align: right;
}
span img {
margin: 0;
text-align: right;
}
}
span.float-left {
display: block;
float: left;
margin-right: 13px;
overflow: hidden;
span {
margin: 13px 0 0;
}
}
span.float-right {
display: block;
float: right;
margin-left: 13px;
overflow: hidden;
> span {
display: block;
margin: 13px auto 0;
overflow: hidden;
text-align: right;
}
}
}
================================================
FILE: _sass/primer-markdown/lib/lists.scss
================================================
// Base styles
// stylelint-disable selector-no-qualifying-type
// stylelint-disable selector-max-type
.markdown-body {
// Lists, Blockquotes & Such
ul,
ol {
padding-left: 2em;
&.no-list {
padding: 0;
list-style-type: none;
}
}
// Did someone complain about list spacing? Encourage them
// to create the spacing with their markdown formatting.
// List behavior should be controled by the markup, not the css.
//
// For lists with padding between items, use blank
// lines between items. This will generate paragraphs with
// padding to space things out.
//
// - item
//
// - item
//
// - item
//
// For list without padding, don't use blank lines.
//
// - item
// - item
// - item
//
// Modifying the css to emulate these behaviors merely brakes
// one case in the process of solving another. Don't change
// this unless it's really really a bug.
ul ul,
ul ol,
ol ol,
ol ul {
margin-top: 0;
margin-bottom: 0;
}
li {
word-wrap: break-all;
}
li > p {
margin-top: $spacer-3;
}
li + li {
margin-top: $em-spacer-3;
}
dl {
padding: 0;
dt {
padding: 0;
margin-top: $spacer-3;
font-size: 1em;
font-style: italic;
font-weight: $font-weight-bold;
}
dd {
padding: 0 $spacer-3;
margin-bottom: $spacer-3;
}
}
}
================================================
FILE: _sass/primer-markdown/lib/markdown-body.scss
================================================
// All of our block level items should have the same margin
// stylelint-disable selector-max-type
// This is styling for generic markdownized text. Anything you put in a
// container with .markdown-body on it should render generally well. It also
// includes some GitHub Flavored Markdown specific styling (like @mentions)
.markdown-body {
font-family: $body-font;
font-size: $h4-size;
line-height: $body-line-height;
word-wrap: break-word;
// Clearfix on the markdown body
&::before {
display: table;
content: "";
}
&::after {
display: table;
clear: both;
content: "";
}
> *:first-child {
margin-top: 0 !important;
}
> *:last-child {
margin-bottom: 0 !important;
}
// Anchors like <a name="examples">. These sometimes end up wrapped around
// text when users mistakenly forget to close the tag or use self-closing tag
// syntax. We don't want them to appear like links.
// FIXME: a:not(:link):not(:visited) would be a little clearer here (and
// possibly faster to match), but it breaks styling of <a href> elements due
// to https://bugs.webkit.org/show_bug.cgi?id=142737.
a:not([href]) {
color: inherit;
text-decoration: none;
}
// Link Colors
.absent {
color: $red-600;
}
.anchor {
float: left;
padding-right: $spacer-1;
margin-left: -20px;
line-height: $lh-condensed-ultra;
&:focus {
outline: none;
}
}
p,
blockquote,
ul,
ol,
dl,
table,
pre {
margin-top: 0;
margin-bottom: $spacer-3;
}
hr {
height: $em-spacer-3;
padding: 0;
margin: $spacer-4 0;
background-color: $gray-200;
border: 0;
}
blockquote {
padding: 0 1em;
color: $gray-500;
border-left: 0.25em solid lighten($gray-300, 5%);
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: $gray-700;
vertical-align: middle;
background-color: $gray-000;
border: solid 1px darken($gray-300, 4%);
border-bottom-color: $gray-400;
border-radius: 3px;
box-shadow: inset 0 -1px 0 $gray-400;
}
}
================================================
FILE: _sass/primer-markdown/lib/tables.scss
================================================
// Needs refactoring
// stylelint-disable selector-max-type
.markdown-body {
// Tables
table {
display: block;
width: 100%;
overflow: auto;
th {
font-weight: $font-weight-bold;
}
th,
td {
padding: 6px 13px;
border: 1px solid lighten($gray-300, 5%);
}
tr {
background-color: $bg-white;
border-top: 1px solid darken($gray-300, 4%);
&:nth-child(2n) {
background-color: $gray-100;
}
}
img {
background-color: transparent;
}
}
}
================================================
FILE: _sass/primer-support/index.scss
================================================
// variables
@import "./lib/variables/typography.scss";
@import "./lib/variables/colors.scss";
@import "./lib/variables/layout.scss";
@import "./lib/variables/misc.scss";
// mixins
@import "./lib/mixins/typography.scss";
@import "./lib/mixins/layout.scss";
@import "./lib/mixins/buttons.scss";
@import "./lib/mixins/misc.scss";
================================================
FILE: _sass/primer-support/lib/mixins/buttons.scss
================================================
// stylelint-disable block-closing-brace-newline-after
// Button color generator for primary and themed buttons
// New button hotness
@mixin btn-solid($color, $bg, $bg2) {
color: $color;
background-color: $bg2;
background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
@if $bg == $gray-000 {
&:focus,
&.focus {
box-shadow: $btn-input-focus-shadow;
}
&:hover,
&.hover {
background-color: darken($bg2, 3%);
background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
background-position: 0 -$em-spacer-5;
border-color: rgba($black, 0.35);
}
&:active,
&.selected,
[open] > & {
background-color: darken(desaturate($bg, 10%), 6%);
background-image: none;
border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
box-shadow: $btn-active-shadow;
}
&:disabled,
&.disabled {
color: rgba($color, 0.4);
background-color: $bg2;
background-image: none;
border-color: transparentize($black, 0.8); // back to default .btn
box-shadow: none;
}
} @else {
&:focus,
&.focus {
box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
}
&:hover,
&.hover {
background-color: darken($bg2, 2%);
background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
background-position: 0 -$em-spacer-5;
border-color: $black-fade-50;
}
&:active,
&.selected,
[open] > & {
background-color: darken(mix($bg, $bg2, 50%), 7%);
background-image: none;
border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
box-shadow: $btn-active-shadow;
}
&:disabled,
&.disabled {
color: rgba($color, 0.75);
background-color: mix($bg2, $white, 50%);
background-image: none;
border-color: transparentize($black, 0.8); // repeat .btn default to avoid shift on click-drag off of button
box-shadow: none;
}
.Counter {
color: darken($bg, 8%);
background-color: $white;
}
}
}
// Inverse button hover style
@mixin btn-inverse($color, $bg, $bg2) {
color: $color;
background-color: $bg;
background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
&:focus {
box-shadow: 0 0 0 0.2em rgba($color, 0.4);
}
&:hover {
color: $text-white;
background-color: $color;
background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
border-color: $black-fade-50;
.Counter {
color: $text-white;
}
}
&:active,
&.selected,
[open] > & {
color: $text-white;
background-color: darken($color, 5%);
background-image: none;
border-color: $black-fade-50;
box-shadow: $btn-active-shadow;
}
&:disabled,
&.disabled {
color: rgba($color, 0.4);
background-color: $bg2;
background-image: none;
border-color: transparentize($black, 0.8); // back to default .btn
box-shadow: none;
}
}
// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
color: $text-color;
background-color: $bg-color;
background-image: none;
.Counter {
background-color: rgba($black, 0.07);
}
&:hover,
&:active,
&.selected,
[open] > & {
color: $bg-color;
background-color: $text-color;
background-image: none;
border-color: $text-color;
.Counter {
color: $text-color;
background-color: $bg-color;
}
}
&:focus {
border-color: $text-color;
box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
}
&:disabled,
&.disabled {
color: $black-fade-30;
background-color: $bg-white;
border-color: $black-fade-15;
box-shadow: none;
}
}
================================================
FILE: _sass/primer-support/lib/mixins/layout.scss
================================================
// Responsive media queries
@mixin breakpoint($breakpoint) {
@if $breakpoint == "" {
@content;
}
@else {
// Retrieves the value from the key
$value: map-get($breakpoints, $breakpoint);
// If the key exists in the map
@if $value != null {
// Prints a media query based on the value
@media (min-width: $value) {
@content;
}
}
// If the key doesn't exist in the map
@else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Please make sure it is defined in `$breakpoints` map.";
}
}
}
// Retina media query
@mixin retina-media-query {
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
@content;
}
}
// Clearfix
//
// Clears floats via mixin.
@mixin clearfix {
&::before {
display: table;
content: "";
}
&::after {
display: table;
clear: both;
content: "";
}
}
================================================
FILE: _sass/primer-support/lib/mixins/misc.scss
================================================
// Generate a two-color caret for any element.
@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
&::after,
&::before {
position: absolute;
top: 11px;
right: 100%;
left: -16px;
display: block;
width: 0;
height: 0;
pointer-events: none;
content: " ";
border-color: transparent;
border-style: solid solid outset;
}
&::after {
margin-top: 1px;
margin-left: 2px;
border-width: 7px;
border-right-color: $foreground;
}
&::before {
border-width: 8px;
border-right-color: $background;
}
}
================================================
FILE: _sass/primer-support/lib/mixins/typography.scss
================================================
// Text hiding for image based text replacement.
// Higher performance than -9999px because it only renders
// the size of the actual text, not a full 9999px box.
@mixin hide-text() {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
// Heading mixins for use within components
// These match heading utilities in utilities/typography
@mixin h1 {
font-size: $h1-size;
font-weight: $font-weight-bold;
}
@mixin h2 {
font-size: $h2-size;
font-weight: $font-weight-bold;
}
@mixin h3 {
font-size: $h3-size;
font-weight: $font-weight-bold;
}
@mixin h4 {
font-size: $h4-size;
font-weight: $font-weight-bold;
}
@mixin h5 {
font-size: $h5-size;
font-weight: $font-weight-bold;
}
@mixin h6 {
font-size: $h6-size;
font-weight: $font-weight-bold;
}
// Responsive heading mixins
// There are no responsive mixins for h4—h6 because they are small
// and don't need to be smaller on mobile.
@mixin f1-responsive {
font-size: $h1-size-mobile;
// 32px on desktop
@include breakpoint(md) { font-size: $h1-size; }
}
@mixin f2-responsive {
font-size: $h2-size-mobile;
// 24px on desktop
@include breakpoint(md) { font-size: $h2-size; }
}
@mixin f3-responsive {
font-size: $h3-size-mobile;
// 20px on desktop
@include breakpoint(md) { font-size: $h3-size; }
}
// These use the mixins from above for responsive heading sizes.
// The following mixins can be used where it's convenient or necessary to
// couple the responsive font-size with the font-weight.
@mixin h1-responsive {
@include f1-responsive;
font-weight: $font-weight-bold;
}
@mixin h2-responsive {
@include f2-responsive;
font-weight: $font-weight-bold;
}
@mixin h3-responsive {
@include f3-responsive;
font-weight: $font-weight-bold;
}
================================================
FILE: _sass/primer-support/lib/variables/color-system.scss
================================================
//
//
// -------- Grays --------
$gray-000: #fafbfc !default;
$gray-100: #f6f8fa !default;
$gray-200: #e1e4e8 !default;
$gray-300: #d1d5da !default;
$gray-400: #959da5 !default;
$gray-500: #6a737d !default;
$gray-600: #586069 !default;
$gray-700: #444d56 !default;
$gray-800: #2f363d !default;
$gray-900: #24292e !default; // body font color
// -------- Blue --------
$blue-000: #f1f8ff !default;
$blue-100: #dbedff !default;
$blue-200: #c8e1ff !default;
$blue-300: #79b8ff !default;
$blue-400: #2188ff !default;
$blue-500: #0366d6 !default; // Default: Passes AA with #fff
$blue-600: #005cc5 !default;
$blue-700: #044289 !default;
$blue-800: #032f62 !default;
$blue-900: #05264c !default; // Passes with 1/2/300 blues
// -------- Green --------
$green-000: #f0fff4 !default;
$green-100: #dcffe4 !default;
$green-200: #bef5cb !default;
$green-300: #85e89d !default;
$green-400: #34d058 !default;
$green-500: #28a745 !default; // Default. passes AA Large
$green-600: #22863a !default; // Text green, passes AA on #fff
$green-700: #176f2c !default;
$green-800: #165c26 !default;
$green-900: #144620 !default;
// -------- Yellow --------
$yellow-000: #fffdef !default;
$yellow-100: #fffbdd !default;
$yellow-200: #fff5b1 !default;
$yellow-300: #ffea7f !default;
$yellow-400: #ffdf5d !default;
$yellow-500: #ffd33d !default;
$yellow-600: #f9c513 !default;
$yellow-700: #dbab09 !default;
$yellow-800: #b08800 !default;
$yellow-900: #735c0f !default;
// -------- Orange --------
$orange-000: #fff8f2 !default;
$orange-100: #ffebda !default;
$orange-200: #ffd1ac !default;
$orange-300: #ffab70 !default;
$orange-400: #fb8532 !default;
$orange-500: #f66a0a !default; // Default. passes AA Large with #fff
$orange-600: #e36209 !default;
$orange-700: #d15704 !default;
$orange-800: #c24e00 !default;
$orange-900: #a04100 !default;
// -------- Red --------
$red-000: #ffeef0 !default;
$red-100: #ffdce0 !default;
$red-200: #fdaeb7 !default;
$red-300: #f97583 !default;
$red-400: #ea4a5a !default;
$red-500: #d73a49 !default; // Default. passes AA
$red-600: #cb2431 !default;
$red-700: #b31d28 !default;
$red-800: #9e1c23 !default;
$red-900: #86181d !default;
// -------- Purple --------
$purple-000: #f5f0ff !default;
$purple-100: #e6dcfd !default;
$purple-200: #d1bcf9 !default;
$purple-300: #b392f0 !default;
$purple-400: #8a63d2 !default;
$purple-500: #6f42c1 !default; // passes AA with #fff
$purple-600: #5a32a3 !default;
$purple-700: #4c2889 !default;
$purple-800: #3a1d6e !default;
$purple-900: #29134e !default;
// -------- Fades --------
// Black based on same hue as $gray-900
$black: #1b1f23 !default;
$white: #fff !default;
$black-fade-15: rgba($black, 0.15) !default;
$black-fade-30: rgba($black, 0.3) !default;
$black-fade-50: rgba($black, 0.5) !default;
$black-fade-70: rgba($black, 0.7) !default;
$black-fade-85: rgba($black, 0.85) !default;
$white-fade-15: rgba($white, 0.15) !default;
$white-fade-30: rgba($white, 0.3) !default;
$white-fade-50: rgba($white, 0.5) !default;
$white-fade-70: rgba($white, 0.7) !default;
$white-fade-85: rgba($white, 0.85) !default;
// -------- Color defaults --------
$red: $red-500 !default;
$purple: $purple-500 !default;
$blue: $blue-500 !default;
$green: $green-500 !default;
$yellow: $yellow-500 !default;
$orange: $orange-500 !default;
$gray-dark: $gray-900 !default;
$gray-light: $gray-400 !default;
$gray: $gray-500 !default;
================================================
FILE: _sass/primer-support/lib/variables/colors.scss
================================================
@import "color-system.scss";
// Color variables
// stylelint-disable declaration-bang-space-before
// State indicators.
$status-pending: desaturate($yellow-700, 15%) !default;
// Repository type colors
// Should be able to deprecate these in future
$repo-private-text: $black-fade-70 !default;
$repo-private-bg: $yellow-000 !default;
$repo-private-icon: transparentize($yellow-900, 0.5) !default;
// Highlight used for things like search
$highlight-yellow: rgba(255, 247, 140, 0.5);
// Border colors
$border-black-fade: $black-fade-15 !default;
$border-blue: $blue-500 !default;
$border-blue-light: $blue-200 !default;
$border-green: $green-400 !default;
$border-green-light: desaturate($green-300, 40%) !default;
$border-purple: $purple !default;
$border-red: $red !default;
$border-red-light: desaturate($red-300, 60%) !default;
$border-purple: $purple !default;
$border-yellow: desaturate($yellow-300, 60%) !default;
$border-gray-dark: $gray-300 !default;
$border-gray-darker: $gray-700 !default;
$border-gray-light: lighten($gray-200, 3%) !default;
$border-gray: $gray-200 !default;
// Background colors
$bg-blue-light: $blue-000 !default;
$bg-blue: $blue-500 !default;
$bg-gray-dark: $gray-900 !default;
$bg-gray-light: $gray-000 !default;
$bg-gray: $gray-100 !default;
$bg-green: $green-500 !default;
$bg-green-light: $green-100 !default;
$bg-orange: $orange-700 !default;
$bg-purple: $purple-500 !default;
$bg-purple-light: $purple-000 !default;
$bg-red: $red-500 !default;
$bg-red-light: $red-100 !default;
$bg-white: $white !default;
$bg-yellow: $yellow-500 !default;
$bg-yellow-light: $yellow-200 !default;
// Text colors
$text-blue: $blue-500 !default;
$text-gray-dark: $gray-900 !default;
$text-gray-light: $gray-500 !default;
$text-gray: $gray-600 !default;
$text-green: $green-500 !default;
$text-orange: $orange-900 !default;
$text-orange-light: $orange-600 !default;
$text-purple: $purple !default;
$text-red: $red-600 !default;
$text-white: $white !default;
================================================
FILE: _sass/primer-support/lib/variables/layout.scss
================================================
// Layout variables
// stylelint-disable declaration-bang-space-before
// These are our margin and padding utility spacers. The default step size we
// use is 8px. This gives us a key of:
// 0 => 0px
// 1 => 4px
// 2 => 8px
// 3 => 16px
// 4 => 24px
// 5 => 32px
// 6 => 40px
$spacer: 8px !default;
$spacers: (
0,
round($spacer / 2),
$spacer,
$spacer * 2,
$spacer * 3,
$spacer * 4,
$spacer * 5
) !default;
// Aliases for easy use
$spacer-0: nth($spacers, 1) !default; // 0
$spacer-1: nth($spacers, 2) !default; // 4px
$spacer-2: nth($spacers, 3) !default; // 8px
$spacer-3: nth($spacers, 4) !default; // 16px
$spacer-4: nth($spacers, 5) !default; // 24px
$spacer-5: nth($spacers, 6) !default; // 32px
$spacer-6: nth($spacers, 7) !default; // 40px
// Em spacer variables
$em-spacer-1: 0.0625em !default; // 1/16
$em-spacer-2: 0.125em !default; // 1/8
$em-spacer-3: 0.25em !default; // 1/4
$em-spacer-4: 0.375em !default; // 3/8
$em-spacer-5: 0.5em !default; // 1/2
$em-spacer-6: 0.75em !default; // 3/4
// Fixed-width container variables
$container-width: 980px !default;
$grid-gutter: 10px !default;
// Breakpoint widths
$width-xs: 0;
$width-sm: 544px;
$width-md: 768px;
$width-lg: 1012px;
$width-xl: 1280px;
// Responsive container widths
$container-md: $width-md !default;
$container-lg: $width-lg !default;
$container-xl: $width-xl !default;
// Breakpoints
$breakpoints: (
// Small screen / phone
sm: $width-sm,
// Medium screen / tablet
md: $width-md,
// Large screen / desktop (980 + (16 * 2)) <= container + gutters
lg: $width-lg,
// Extra large screen / wide desktop
xl: $width-xl
) !default;
$responsive-variants: ("": "");
@each $key in map-keys($breakpoints) {
$responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
}
================================================
FILE: _sass/primer-support/lib/variables/misc.scss
================================================
// Miscellaneous variables
// stylelint-disable declaration-bang-space-before
// Border size
$border-width: 1px !default;
$border-color: $border-gray !default;
$border-style: solid !default;
$border: $border-width $border-color $border-style !default;
$border-radius: 3px !default;
// Custom explore grid border
$exploregrid-item-border-radius: 4px;
// Box shadow
$box-shadow: 0 1px 1px rgba($black, 0.1) !default;
$box-shadow-medium: 0 1px 5px $black-fade-15 !default;
$box-shadow-large: 0 1px 15px $black-fade-15 !default;
$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
// Tooltips
$tooltip-max-width: 250px !default;
$tooltip-background-color: $black;
$tooltip-text-color: $white !default;
$tooltip-delay: 0.4s !default;
$tooltip-duration: 0.1s !default;
// Should be moved into custom github css
$stats-switcher-py: 10px;
// Future proof this `height` value by finding the computed line-height, then
// adding the total value of the vertical padding. This var is used to toggle
// between the stats bar and language breakdown.
$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2);
$min_tab_size: 1;
$max_tab_size: 12;
// Button and form variables
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075);
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3);
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15;
================================================
FILE: _sass/primer-support/lib/variables/typography.scss
================================================
// Typography variables
// stylelint-disable declaration-bang-space-before
// Heading sizes - mobile
// h4—h6 remain the same size on both mobile & desktop
$h00-size-mobile: 40px !default;
$h0-size-mobile: 32px !default;
$h1-size-mobile: 26px !default;
$h2-size-mobile: 22px !default;
$h3-size-mobile: 18px !default;
// Heading sizes - desktop
$h00-size: 48px !default;
$h0-size: 40px !default;
$h1-size: 32px !default;
$h2-size: 24px !default;
$h3-size: 20px !default;
$h4-size: 16px !default;
$h5-size: 14px !default;
$h6-size: 12px !default;
$font-size-small: 12px !default;
// Font weights
$font-weight-bold: 600 !default;
$font-weight-semibold: 500 !default;
$font-weight-normal: 400 !default;
$font-weight-light: 300 !default;
// Line heights
$lh-condensed-ultra: 1 !default;
$lh-condensed: 1.25 !default;
$lh-default: 1.5 !default;
// Font stacks
$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
// Monospace font stack
$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
// The base body size
$body-font-size: 14px !default;
$body-line-height: $lh-default !default;
================================================
FILE: _sass/primer-utilities/index.scss
================================================
@import "primer-support/index.scss";
// utilities
@import "./lib/animations.scss";
@import "./lib/borders.scss";
@import "./lib/box-shadow.scss";
@import "./lib/colors.scss";
@import "./lib/details.scss";
@import "./lib/flexbox.scss";
@import "./lib/layout.scss";
@import "./lib/margin.scss";
@import "./lib/padding.scss";
@import "./lib/typography.scss";
// Visibility and display should always come last in the imports so that they override other utilities with !important
@import "./lib/visibility-display.scss";
================================================
FILE: _sass/primer-utilities/lib/animations.scss
================================================
// This file contains reusable animations for github.
// stylelint-disable primer/selector-no-utility
/* Fade in an element */
.anim-fade-in {
animation-name: fade-in;
animation-duration: 1s;
animation-timing-function: ease-in-out;
&.fast {
animation-duration: 300ms;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Fade out an element */
.anim-fade-out {
animation-name: fade-out;
animation-duration: 1s;
animation-timing-function: ease-out;
&.fast {
animation-duration: 0.3s;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Fade in and slide up an element */
.anim-fade-up {
opacity: 0;
animation-name: fade-up;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
animation-delay: 1s;
}
@keyframes fade-up {
0% {
opacity: 0.8;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Fade an element out and slide down */
.anim-fade-down {
animation-name: fade-down;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
}
@keyframes fade-down {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0.5;
transform: translateY(100%);
}
}
/* Grow an element width from 0 to 100% */
.anim-grow-x {
width: 0%;
animation-name: grow-x;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
animation-delay: 0.5s;
}
@keyframes grow-x {
to { width: 100%; }
}
/* Shrink an element from 100% to 0% */
.anim-shrink-x {
animation-name: shrink-x;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
}
@keyframes shrink-x {
to { width: 0%; }
}
/* Fade in an element and scale it fast */
.anim-scale-in {
animation-name: scale-in;
animation-duration: 0.15s;
animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
}
@keyframes scale-in {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Pulse an element's opacity */
.anim-pulse {
animation-name: pulse;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
opacity: 0.3;
}
10% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
/* Pulse in an element */
.anim-pulse-in {
animation-name: pulse-in;
animation-duration: 0.5s;
}
@keyframes pulse-in {
0% {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.1, 1.1, 1.1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
/* Increase scale of an element on hover */
.hover-grow {
transition: transform 0.3s;
backface-visibility: hidden;
&:hover {
transform: scale(1.025);
}
}
================================================
FILE: _sass/primer-utilities/lib/borders.scss
================================================
// Border utilities
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
/* Add a gray border on all sides */
.border { border: $border !important; }
/* Add a gray border to the left and right */
.border-y {
border-top: $border !important;
border-bottom: $border !important;
}
/* Remove borders from all sides */
.border-0 { border: 0 !important; }
.border-dashed { border-style: dashed !important; }
/* Use with .border to turn the border blue */
.border-blue { border-color: $border-blue !important; }
/* Use with .border to turn the border blue-light */
.border-blue-light { border-color: $border-blue-light !important; }
/* Use with .border to turn the border green */
.border-green { border-color: $border-green !important; }
/* Use with .border to turn the border green light */
.border-green-light { border-color: $border-green-light !important; }
/* Use with .border to turn the border red */
.border-red { border-color: $border-red !important; }
/* Use with .border to turn the border red-light */
.border-red-light { border-color: $border-red-light !important; }
/* Use with .border to turn the border purple */
.border-purple { border-color: $border-purple !important; }
/* Use with .border to turn the border yellow */
.border-yellow { border-color: $border-yellow !important; }
/* Use with .border to turn the border gray-light */
.border-gray-light { border-color: $border-gray-light !important; }
/* Use with .border to turn the border gray-dark */
.border-gray-dark { border-color: $border-gray-dark !important; }
/* Use with .border to turn the border rgba black 0.15 */
.border-black-fade { border-color: $border-black-fade !important; }
$edges: (
top: (top-left, top-right),
right: (top-right, bottom-right),
bottom: (bottom-right, bottom-left),
left: (bottom-left, top-left)
);
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
/* Add a gray border */
/* Add a gray border to the top */
.border#{$variant}-top { border-top: $border !important; }
/* Add a gray border to the right */
.border#{$variant}-right { border-right: $border !important; }
/* Add a gray border to the bottom */
.border#{$variant}-bottom { border-bottom: $border !important; }
/* Add a gray border to the left */
.border#{$variant}-left { border-left: $border !important; }
/* Remove the top border */
.border#{$variant}-top-0 { border-top: 0 !important; }
/* Remove the right border */
.border#{$variant}-right-0 { border-right: 0 !important; }
/* Remove the bottom border */
.border#{$variant}-bottom-0 { border-bottom: 0 !important; }
/* Remove the left border */
.border#{$variant}-left-0 { border-left: 0 !important; }
// Rounded corners
/* Remove the border-radius */
.rounded#{$variant}-0 { border-radius: 0 !important; }
/* Add a border-radius to all corners */
.rounded#{$variant}-1 { border-radius: $border-radius !important; }
/* Add a 2x border-radius to all corners */
.rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; }
@each $edge, $corners in $edges {
.rounded#{$variant}-#{$edge}-0 {
@each $corner in $corners {
border-#{$corner}-radius: 0 !important;
}
}
.rounded#{$variant}-#{$edge}-1 {
@each $corner in $corners {
border-#{$corner}-radius: $border-radius !important;
}
}
.rounded#{$variant}-#{$edge}-2 {
@each $corner in $corners {
border-#{$corner}-radius: $border-radius * 2 !important;
}
}
}
}
}
/* Add a 50% border-radius to make something into a circle */
.circle { border-radius: 50% !important; }
================================================
FILE: _sass/primer-utilities/lib/box-shadow.scss
================================================
// Box shadow utilities
// stylelint-disable primer/selector-no-utility
// Box shadows
.box-shadow {
box-shadow: $box-shadow !important;
}
.box-shadow-medium {
box-shadow: $box-shadow-medium !important;
}
.box-shadow-large {
box-shadow: $box-shadow-large !important;
}
.box-shadow-extra-large {
box-shadow: $box-shadow-extra-large !important;
}
// Turn off box shadow
.box-shadow-none {
box-shadow: none !important;
}
================================================
FILE: _sass/primer-utilities/lib/colors.scss
================================================
// Color utilities
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
// stylelint-disable comment-empty-line-before
// background colors
/* Set the background to $bg-white */
.bg-white { background-color: $bg-white !important; }
/* Set the background to $bg-blue */
.bg-blue { background-color: $bg-blue !important; }
/* Set the background to $bg-blue-light */
.bg-blue-light { background-color: $bg-blue-light !important; }
/* Set the background to $bg-gray-dark */
.bg-gray-dark { background-color: $bg-gray-dark !important; }
/* Set the background to $bg-gray */
.bg-gray { background-color: $bg-gray !important; }
/* Set the background to $bg-gray-light */
.bg-gray-light { background-color: $bg-gray-light !important; }
/* Set the background to $bg-green */
.bg-green { background-color: $bg-green !important; }
/* Set the background to $bg-green-light */
.bg-green-light { background-color: $bg-green-light !important; }
/* Set the background to $bg-red */
.bg-red { background-color: $bg-red !important; }
/* Set the background to $bg-red-light */
.bg-red-light { background-color: $bg-red-light !important; }
/* Set the background to $bg-yellow */
.bg-yellow { background-color: $bg-yellow !important; }
/* Set the background to $bg-yellow-light */
.bg-yellow-light { background-color: $bg-yellow-light !important; }
/* Set the background to $bg-purple */
.bg-purple { background-color: $bg-purple !important; }
/* Set the background to $bg-purple-light */
.bg-purple-light { background-color: $bg-purple-light !important; }
.bg-shade-gradient {
background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important;
background-repeat: no-repeat !important;
background-size: 100% 200px !important;
}
// text colors
/* Set the text color to $text-blue */
.text-blue { color: $text-blue !important; }
/* Set the text color to $text-red */
.text-red { color: $text-red !important; }
/* Set the text color to $text-gray-light */
.text-gray-light { color: $text-gray-light !important; }
/* Set the text color to $text-gray */
.text-gray { color: $text-gray !important; }
/* Set the text color to $text-gray-dark */
.text-gray-dark { color: $text-gray-dark !important; }
/* Set the text color to $text-green */
.text-green { color: $text-green !important; }
/* Set the text color to $text-orange */
.text-orange { color: $text-orange !important; }
/* Set the text color to $text-orange-light */
.text-orange-light { color: $text-orange-light !important; }
/* Set the text color to $text-purple */
.text-purple { color: $text-purple !important; }
/* Set the text color to $text-white */
.text-white { color: $text-white !important; }
/* Set the text color to inherit */
.text-inherit { color: inherit !important; }
// Text states
// These can probably all be regular utilities
.text-pending { color: $yellow-800 !important; }
// Separate text and background colors in future to improve a11y
.bg-pending { color: $yellow-700 !important; }
// Link colors
// Sets the links color to $text-gray and $text-blue on hover
.link-gray {
color: $text-gray !important;
&:hover {
color: $text-blue !important;
}
}
// Sets the links color to $text-gray-dark and $text-blue on hover
.link-gray-dark {
color: $text-gray-dark !important;
&:hover {
color: $text-blue !important;
}
}
/* Set the link color to $text-blue on hover
Useful when you want only part of a link to turn blue on hover */
.link-hover-blue {
&:hover {
color: $text-blue !important;
}
}
/* Make a link $text-gray, then $text-blue on hover and removes the underline */
.muted-link {
color: $text-gray !important;
&:hover {
color: $text-blue !important;
text-decoration: none;
}
}
================================================
FILE: _sass/primer-utilities/lib/details.scss
================================================
// stylelint-disable selector-max-type
.details-overlay[open] > summary::before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 80;
display: block;
cursor: default;
content: " ";
background: transparent;
}
.details-overlay-dark[open] > summary::before {
z-index: 99;
background: $black-fade-50;
}
================================================
FILE: _sass/primer-utilities/lib/flexbox.scss
================================================
// Flex utility classes
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
// stylelint-disable comment-empty-line-before
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
// Flexbox classes
// Container
.flex#{$variant}-row { flex-direction: row !important; }
.flex#{$variant}-row-reverse { flex-direction: row-reverse !important; }
.flex#{$variant}-column { flex-direction: column !important; }
.flex#{$variant}-wrap { flex-wrap: wrap !important; }
.flex#{$variant}-nowrap { flex-wrap: nowrap !important; }
.flex#{$variant}-justify-start { justify-content: flex-start !important; }
.flex#{$variant}-justify-end { justify-content: flex-end !important; }
.flex#{$variant}-justify-center { justify-content: center !important; }
.flex#{$variant}-justify-between { justify-content: space-between !important; }
.flex#{$variant}-justify-around { justify-content: space-around !important; }
.flex#{$variant}-items-start { align-items: flex-start !important; }
.flex#{$variant}-items-end { align-items: flex-end !important; }
.flex#{$variant}-items-center { align-items: center !important; }
.flex#{$variant}-items-baseline { align-items: baseline !important; }
.flex#{$variant}-items-stretch { align-items: stretch !important; }
.flex#{$variant}-content-start { align-content: flex-start !important; }
.flex#{$variant}-content-end { align-content: flex-end !important; }
.flex#{$variant}-content-center { align-content: center !important; }
.flex#{$variant}-content-between { align-content: space-between !important; }
.flex#{$variant}-content-around { align-content: space-around !important; }
.flex#{$variant}-content-stretch { align-content: stretch !important; }
// Item
.flex#{$variant}-auto { flex: 1 1 auto !important; }
.flex#{$variant}-shrink-0 { flex-shrink: 0 !important; }
.flex#{$variant}-self-auto { align-self: auto !important; }
.flex#{$variant}-self-start { align-self: flex-start !important; }
.flex#{$variant}-self-end { align-self: flex-end !important; }
.flex#{$variant}-self-center { align-self: center !important; }
.flex#{$variant}-self-baseline { align-self: baseline !important; }
.flex#{$variant}-self-stretch { align-self: stretch !important; }
// Shorthand for equal width and height cols
.flex#{$variant}-item-equal {
flex-grow: 1;
flex-basis: 0;
}
}
}
================================================
FILE: _sass/primer-utilities/lib/layout.scss
================================================
// Layout
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
// stylelint-disable comment-empty-line-before
/* Set position to static */
.position-static { position: static !important; }
/* Set position to relative */
.position-relative { position: relative !important; }
/* Set position to absolute */
.position-absolute { position: absolute !important; }
/* Set position to fixed */
.position-fixed { position: fixed !important; }
/* Set top 0 */
.top-0 { top: 0 !important; }
/* Set right 0 */
.right-0 { right: 0 !important; }
/* Set bottom 0 */
.bottom-0 { bottom: 0 !important; }
/* Set left 0 */
.left-0 { left: 0 !important; }
/* Vertical align middle */
.v-align-middle { vertical-align: middle !important; }
/* Vertical align top */
.v-align-top { vertical-align: top !important; }
/* Vertical align bottom */
.v-align-bottom { vertical-align: bottom !important; }
/* Vertical align to the top of the text */
.v-align-text-top { vertical-align: text-top !important; }
/* Vertical align to the bottom of the text */
.v-align-text-bottom { vertical-align: text-bottom !important; }
/* Vertical align to the parent's baseline */
.v-align-baseline { vertical-align: baseline !important; }
// Overflow utilities
// overflow-hidden can also be used to create a new
// block formatting context or clear floats.
/* Set the overflow hidden */
.overflow-hidden { overflow: hidden !important; }
/* Set the overflow scroll */
.overflow-scroll { overflow: scroll !important; }
/* Set the overflow auto */
.overflow-auto { overflow: auto !important; }
// Clear floats
/* Clear floats around the element */
.clearfix {
@include clearfix;
}
// Floats
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
/* Float to the left */
.float#{$variant}-left { float: left !important; }
/* Float to the right */
.float#{$variant}-right { float: right !important; }
/* No float */
.float#{$variant}-none { float: none !important; }
}
}
// Width and height utilities, helpful in combination
// with display-table utilities and images
/* Max width 100% */
.width-fit { max-width: 100% !important; }
/* Set the width to 100% */
.width-full { width: 100% !important; }
/* Max height 100% */
.height-fit { max-height: 100% !important; }
/* Set the height to 100% */
.height-full { height: 100% !important; }
/* Remove min-width from element */
.min-width-0 { min-width: 0 !important; }
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
/* Set the direction to rtl */
.direction#{$variant}-rtl { direction: rtl !important; }
/* Set the direction to ltr */
.direction#{$variant}-ltr { direction: ltr !important; }
}
}
================================================
FILE: _sass/primer-utilities/lib/margin.scss
================================================
// Margin spacer utilities
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
// Loop through the breakpoint values
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
// Loop through the spacer values
@for $i from 1 through length($spacers) {
$size: nth($spacers, $i); // sm, md, lg, xl
$scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
/* Set a $size margin to all sides at $breakpoint */
.m#{$variant}-#{$scale} { margin: $size !important; }
/* Set a $size margin on the top at $breakpoint */
.mt#{$variant}-#{$scale} { margin-top: $size !important; }
/* Set a $size margin on the right at $breakpoint */
.mr#{$variant}-#{$scale} { margin-right: $size !important; }
/* Set a $size margin on the bottom at $breakpoint */
.mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
/* Set a $size margin on the left at $breakpoint */
.ml#{$variant}-#{$scale} { margin-left: $size !important; }
@if ($size != 0) {
/* Set a negative $size margin on top at $breakpoint */
.mt#{$variant}-n#{$scale} { margin-top : -$size !important; }
/* Set a negative $size margin on the right at $breakpoint */
.mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
/* Set a negative $size margin on the bottom at $breakpoint */
.mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
/* Set a negative $size margin on the left at $breakpoint */
.ml#{$variant}-n#{$scale} { margin-left : -$size !important; }
}
/* Set a $size margin on the left & right at $breakpoint */
.mx#{$variant}-#{$scale} {
margin-right: $size !important;
margin-left: $size !important;
}
/* Set a $size margin on the top & bottom at $breakpoint */
.my#{$variant}-#{$scale} {
margin-top: $size !important;
margin-bottom: $size !important;
}
}
/* responsive horizontal auto margins */
.mx#{$variant}-auto {
margin-right: auto !important;
margin-left: auto !important;
}
}
}
================================================
FILE: _sass/primer-utilities/lib/padding.scss
================================================
// Padding spacer utilities
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
// stylelint-disable comment-empty-line-before
// Responsive padding spacer utilities
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
// Loop through the spacer values
@for $i from 1 through length($spacers) {
$size: nth($spacers, $i); // xs, sm, md, lg, xl
$scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
/* Set a $size padding to all sides at $breakpoint */
.p#{$variant}-#{$scale} { padding: $size !important; }
/* Set a $size padding to the top at $breakpoint */
.pt#{$variant}-#{$scale} { padding-top: $size !important; }
/* Set a $size padding to the right at $breakpoint */
.pr#{$variant}-#{$scale} { padding-right: $size !important; }
/* Set a $size padding to the bottom at $breakpoint */
.pb#{$variant}-#{$scale} { padding-bottom: $size !important; }
/* Set a $size padding to the left at $breakpoint */
.pl#{$variant}-#{$scale} { padding-left: $size !important; }
/* Set a $size padding to the left & right at $breakpoint */
.px#{$variant}-#{$scale} {
padding-right: $size !important;
padding-left: $size !important;
}
/* Set a $size padding to the top & bottom at $breakpoint */
.py#{$variant}-#{$scale} {
padding-top: $size !important;
padding-bottom: $size !important;
}
}
}
}
// responsive padding for containers
// stylelint-disable-next-line primer/selector-no-utility
.p-responsive {
padding-right: $spacer-3 !important;
padding-left: $spacer-3 !important;
@include breakpoint(sm) {
padding-right: $spacer-6 !important;
padding-left: $spacer-6 !important;
}
@include breakpoint(lg) {
padding-right: $spacer-3 !important;
padding-left: $spacer-3 !important;
}
}
================================================
FILE: _sass/primer-utilities/lib/typography.scss
================================================
// stylelint-disable block-closing-brace-space-before, primer/selector-no-utility, selector-list-comma-newline-after
// stylelint-disable comment-empty-line-before
// Type scale variables found in primer-support/lib/variables.scss
// $h00-size-mobile: 40px;
// $h0-size-mobile: 32px;
// $h1-size-mobile: 26px;
// $h2-size-mobile: 22px;
// $h3-size-mobile: 18px;
// $h00-size: 48px;
// $h0-size: 40px;
// $h1-size: 32px;
// $h2-size: 24px;
// $h3-size: 20px;
// $h4-size: 16px;
// $h5-size: 14px;
// $h6-size: 12px;
/* Set the font size to 26px */
.h1 {
font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
}
/* Set the font size to 22px */
.h2 {
font-size: $h2-size-mobile !important;
@include breakpoint(md) { font-size: $h2-size !important; }
}
/* Set the font size to 18px */
.h3 {
font-size: $h3-size-mobile !important;
@include breakpoint(md) { font-size: $h3-size !important; }
}
/* Set the font size to #{$h4-size} */
.h4 {
font-size: $h4-size !important;
}
/* Set the font size to #{$h5-size} */
.h5 { font-size: $h5-size !important; }
// Does not include color property like typography base
// styles, color should be applied with color utilities.
/* Set the font size to #{$h6-size} */
.h6 { font-size: $h6-size !important; }
// Heading utilities
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: $font-weight-bold !important; }
// Type utilities that match type sale
/* Set the font size to 26px */
.f1 {
font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
}
/* Set the font size to 22px */
.f2 {
font-size: $h2-size-mobile !important;
@include breakpoint(md) { font-size: $h2-size !important; }
}
/* Set the font size to 18px */
.f3 {
font-size: $h3-size-mobile !important;
@include breakpoint(md) { font-size: $h3-size !important; }
}
/* Set the font size to #{$h4-size} */
.f4 {
font-size: $h4-size !important;
@include breakpoint(md) { font-size: $h4-size !important; }
}
/* Set the font size to #{$h5-size} */
.f5 { font-size: $h5-size !important; }
/* Set the font size to #{$h6-size} */
.f6 { font-size: $h6-size !important; }
// Type utils with light weight that match type scale
/* Set the font size to 40px and weight to light */
.f00-light {
font-size: $h00-size-mobile !important;
font-weight: $font-weight-light !important;
@include breakpoint(md) { font-size: $h00-size !important; }
}
/* Set the font size to 32px and weight to light */
.f0-light {
font-size: $h0-size-mobile !important;
font-weight: $font-weight-light !important;
@include breakpoint(md) { font-size: $h0-size !important; }
}
/* Set the font size to 26px and weight to light */
.f1-light {
font-size: $h1-size-mobile !important;
font-weight: $font-weight-light !important;
@include breakpoint(md) { font-size: $h1-size !important; }
}
/* Set the font size to 22px and weight to light */
.f2-light {
font-size: $h2-size-mobile !important;
font-weight: $font-weight-light !important;
@include breakpoint(md) { font-size: $h2-size !important; }
}
// Same size and weight as .lead but without color property
/* Set the font size to 18px and weight to light */
.f3-light {
font-size: $h3-size-mobile !important;
font-weight: $font-weight-light !important;
@include breakpoint(md) { font-size: $h3-size !important; }
}
// Smallest text size
/* Set the font size to ${#h6-size} */
.text-small { font-size: $h6-size !important; } // 12px
/* Large leading paragraphs */
.lead {
margin-bottom: 30px;
font-size: $h3-size;
font-weight: $font-weight-light;
color: $gray-600;
}
// Line-height variations
// Close to commonly used line-heights. Most line-heights
// combined with type size equate to whole pixels.
// Will be improved with future typography scale updates.
/* Set the line height to ultra condensed */
.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; }
/* Set the line height to condensed */
.lh-condensed { line-height: $lh-condensed !important; }
/* Set the line height to default */
.lh-default { line-height: $lh-default !important; }
/* Set the line height to zero */
.lh-0 { line-height: 0 !important; }
// Text alignments
// Responsive text alignment
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
/* Text align to the right */
.text#{$variant}-right { text-align: right !important; }
/* Text align to the left */
.text#{$variant}-left { text-align: left !important; }
/* Text align to the center */
.text#{$variant}-center { text-align: center !important; }
}
}
// Text styles
/* Set the font weight to normal */
.text-normal { font-weight: $font-weight-normal !important; }
/* Set the font weight to bold */
.text-bold { font-weight: $font-weight-bold !important;}
/* Set the font to italic */
.text-italic { font-style: italic !important; }
/* Make text uppercase */
.text-uppercase { text-transform: uppercase !important; }
/* Underline text */
.text-underline { text-decoration: underline !important; }
/* Don't underline text */
.no-underline { text-decoration: none !important; }
/* Don't wrap white space */
.no-wrap { white-space: nowrap !important; }
/* Normal white space */
.ws-normal { white-space: normal !important; }
/* Allow long lines with no spaces to line break */
.wb-break-all { word-break: break-all !important; }
.text-emphasized {
font-weight: $font-weight-bold;
color: $text-gray-dark;
}
// List styles
.list-style-none { list-style: none !important; }
// Text Shadows
/* Add a dark text shadow */
.text-shadow-dark {
text-shadow: 0 1px 1px rgba($black, 0.25), 0 1px 25px rgba($black, 0.75);
}
/* Add a light text shadow */
.text-shadow-light {
text-shadow: 0 1px 0 rgba($white, 0.5);
}
/* Set to monospace font */
.text-mono {
font-family: $mono-font;
}
/* Disallow user from selecting text */
.user-select-none {
user-select: none !important;
}
================================================
FILE: _sass/primer-utilities/lib/visibility-display.scss
================================================
// Visibility and display utilities
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
// stylelint-disable comment-empty-line-before
$display-values: (
block,
flex,
inline,
inline-block,
inline-flex,
none,
table,
table-cell
);
// Responsive display utilities
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
@each $display in $display-values {
.d#{$variant}-#{$display} { display: $display !important; }
}
}
}
.v-hidden { visibility: hidden !important; }
.v-visible { visibility: visible !important; }
// Hide utilities for each breakpoint
// Each hide utility only applies to one breakpoint range.
@media (max-width: $width-sm) {
.hide-sm {
display: none !important;
}
}
@media (min-width: $width-sm) and (max-width: $width-md) {
.hide-md {
display: none !important;
}
}
@media (min-width: $width-md) and (max-width: $width-lg) {
.hide-lg {
display: none !important;
}
}
@media (min-width: $width-lg) {
.hide-xl {
display: none !important;
}
}
/* Set the table-layout to fixed */
.table-fixed { table-layout: fixed !important; }
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
// Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631
word-wrap: normal;
border: 0;
}
// Only display content on focus
.show-on-focus {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
&:focus {
z-index: 20;
width: auto;
height: auto;
clip: auto;
}
}
================================================
FILE: _sass/primer.scss
================================================
// Placeholder file. If your site uses
// @import "{{ site.theme }}";
// Then using this theme with jekyll-remote-theme will work fine.
@import "jekyll-theme-primer";
================================================
FILE: _sass/rouge.scss
================================================
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight .cm {
color: #999988;
font-style: italic;
}
.highlight .cp {
color: #999999;
font-weight: bold;
}
.highlight .c1 {
color: #999988;
font-style: italic;
}
.highlight .cs {
color: #999999;
font-weight: bold;
font-style: italic;
}
.highlight .c, .highlight .cd {
color: #999988;
font-style: italic;
}
.highlight .err {
color: #a61717;
background-color: #e3d2d2;
}
.highlight .gd {
color: #000000;
background-color: #ffdddd;
}
.highlight .ge {
color: #000000;
font-style: italic;
}
.highlight .gr {
color: #aa0000;
}
.highlight .gh {
color: #999999;
}
.highlight .gi {
color: #000000;
background-color: #ddffdd;
}
.highlight .go {
color: #888888;
}
.highlight .gp {
color: #555555;
}
.highlight .gs {
font-weight: bold;
}
.highlight .gu {
color: #aaaaaa;
}
.highlight .gt {
color: #aa0000;
}
.highlight .kc {
color: #000000;
font-weight: bold;
}
.highlight .kd {
color: #000000;
font-weight: bold;
}
.highlight .kn {
color: #000000;
font-weight: bold;
}
.highlight .kp {
color: #000000;
font-weight: bold;
}
.highlight .kr {
color: #000000;
font-weight: bold;
}
.highlight .kt {
color: #445588;
font-weight: bold;
}
.highlight .k, .highlight .kv {
color: #000000;
font-weight: bold;
}
.highlight .mf {
color: #009999;
}
.highlight .mh {
color: #009999;
}
.highlight .il {
color: #009999;
}
.highlight .mi {
color: #009999;
}
.highlight .mo {
color: #009999;
}
.highlight .m, .highlight .mb, .highlight .mx {
color: #009999;
}
.highlight .sb {
color: #d14;
}
.highlight .sc {
color: #d14;
}
.highlight .sd {
color: #d14;
}
.highlight .s2 {
color: #d14;
}
.highlight .se {
color: #d14;
}
.highlight .sh {
color: #d14;
}
.highlight .si {
color: #d14;
}
.highlight .sx {
color: #d14;
}
.highlight .sr {
color: #009926;
}
.highlight .s1 {
color: #d14;
}
.highlight .ss {
color: #990073;
}
.highlight .s {
color: #d14;
}
.highlight .na {
color: #008080;
}
.highlight .bp {
color: #999999;
}
.highlight .nb {
color: #0086B3;
}
.highlight .nc {
color: #445588;
font-weight: bold;
}
.highlight .no {
color: #008080;
}
.highlight .nd {
color: #3c5d5d;
font-weight: bold;
}
.highlight .ni {
color: #800080;
}
.highlight .ne {
color: #990000;
font-weight: bold;
}
.highlight .nf {
color: #990000;
font-weight: bold;
}
.highlight .nl {
color: #990000;
font-weight: bold;
}
.highlight .nn {
color: #555555;
}
.highlight .nt {
color: #000080;
}
.highlight .vc {
color: #008080;
}
.highlight .vg {
color: #008080;
}
.highlight .vi {
color: #008080;
}
.highlight .nv {
color: #008080;
}
.highlight .ow {
color: #000000;
font-weight: bold;
}
.highlight .o {
color: #000000;
font-weight: bold;
}
.highlight .w {
color: #bbbbbb;
}
.highlight {
background-color: #f8f8f8;
}
================================================
FILE: another-page.md
================================================
---
layout: default
---
## Welcome to another page
_yay_
[back](./)
================================================
FILE: assets/css/style.scss
================================================
---
---
@import "jekyll-theme-primer";
================================================
FILE: docs/CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at opensource@github.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers 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.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: docs/CONTRIBUTING.md
================================================
# Contributing to the Primer theme
Hi there! We're thrilled that you'd like to contribute to the Primer theme. Your help is essential for keeping it great.
the Primer theme is an open source project supported by the efforts of an entire community and built one contribution at a time by users like you. We'd love for you to get involved. Whatever your level of skill or however much time you can give, your contribution is greatly appreciated. There are many ways to contribute, from writing tutorials or blog posts, improving the documentation, submitting bug reports and feature requests, helping other users by commenting on issues, or writing code which can be incorporated into the Primer theme itself.
Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue, assessing changes, and helping you finalize your pull requests.
## Looking for support?
We'd love to help. Check out [the support guidelines](SUPPORT.md).
## How to report a bug
Think you found a bug? Please check [the list of open issues](https://github.com/pages-themes/primer/issues) to see if your bug has already been reported. If it hasn't please [submit a new issue](https://github.com/pages-themes/primer/issues/new).
Here are a few tips for writing *great* bug reports:
* Describe the specific problem (e.g., "widget doesn't turn clockwise" versus "getting an error")
* Include the steps to reproduce the bug, what you expected to happen, and what happened instead
* Check that you are using the latest version of the project and its dependencies
* Include what version of the project your using, as well as any relevant dependencies
* Only include one bug per issue. If you have discovered two bugs, please file two issues
* Even if you don't know how to fix the bug, including a failing test may help others track it down
**If you find a security vulnerability, do not open an issue. Please email security@github.com instead.**
## How to suggest a feature or enhancement
If you find yourself wishing for a feature that doesn't exist in the Primer theme, you are probably not alone. There are bound to be others out there with similar needs. Many of the features that the Primer theme has today have been added because our users saw the need.
Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and goals of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible, including describing the problem you're trying to solve.
[Open an issue](https://github.com/pages-themes/primer/issues/new) which describes the feature you would like to see, why you want it, how it should work, etc.
## Your first contribution
We'd love for you to contribute to the project. Unsure where to begin contributing to the Primer theme? You can start by looking through these "good first issue" and "help wanted" issues:
* [Good first issues](https://github.com/pages-themes/primer/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) - issues which should only require a few lines of code and a test or two
* [Help wanted issues](https://github.com/pages-themes/primer/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) - issues which may be a bit more involved, but are specifically seeking community contributions
*p.s. Feel free to ask for help; everyone is a beginner at first* :smiley_cat:
## How to propose changes
Here's a few general guidelines for proposing changes:
* If you are making visual changes, include a screenshot of what the affected element looks like, both before and after.
* Follow the [Jekyll style guide](https://ben.balter.com/jekyll-style-guide).
* If you are changing any user-facing functionality, please be sure to update the documentation
* Each pull request should implement **one** feature or bug fix. If you want to add or fix more than one thing, submit more than one pull request
* Do not commit changes to files that are irrelevant to your feature or bug fix
* Don't bump the version number in your pull request (it will be bumped prior to release)
* Write [a good commit message](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
At a high level, [the process for proposing changes](https://guides.github.com/introduction/flow/) is:
1. [Fork](https://github.com/pages-themes/primer/fork) and clone the project
2. Configure and install the dependencies: `script/bootstrap`
3. Make sure the tests pass on your machine: `script/cibuild`
4. Create a new branch: `git checkout -b my-branch-name`
5. Make your change, add tests, and make sure the tests still pass
6. Push to your fork and [submit a pull request](https://github.com/pages-themes/primer/compare)
7. Pat your self on the back and wait for your pull request to be reviewed and merged
**Interesting in submitting your first Pull Request?** It's easy! You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
## Bootstrapping your local development environment
`script/bootstrap`
## Running tests
`script/cibuild`
## Publishing Gem
In order to publish the Gem bump the version in *this file*, commit, create a tag with the new version number, and finally push the commit and tag to the repo.
## Code of conduct
This project is governed by [the Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.
## Additional Resources
* [Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)
* [Using Pull Requests](https://help.github.com/articles/using-pull-requests/)
* [GitHub Help](https://help.github.com)
================================================
FILE: docs/SUPPORT.md
================================================
## Where to get help
If you think you've found a bug in the Primer theme, please [check the existing issues](https://github.com/pages-themes/primer/issues), and if no one has reported the problem, [open a new issue](https://github.com/pages-themes/primer/issues/new).
If you have a general question about the theme, how to implement it, or how to customize it for your site you have two options:
1. Search for your query on [`support.github.com`](https://support.github.com/?q=pages+Primer+theme), which will also look for similar topics on [`github.community`](https://github.community/search?q=pages+Primer+theme)
2. Ask your question of the Jekyll community on [talk.jekyllrb.com](https://talk.jekyllrb.com/)
3. [Contact GitHub Support](https://github.com/contact?form%5Bsubject%5D=GitHub%20Pages%20theme%20pages-themes/primer)
================================================
FILE: index.md
================================================
---
layout: default
---
Text can be **bold**, _italic_, or ~~strikethrough~~.
[Link to another page](./another-page.html).
There should be whitespace between paragraphs.
There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.
# Header 1
This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
## Header 2
> This is a blockquote following a header.
>
> When something is important enough, you do it even if the odds are not in your favor.
### Header 3
```js
// Javascript code with syntax highlighting.
var fun = function lang(l) {
dateformat.i18n = require('./lang/' + l)
return true;
}
```
```ruby
# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
s.add_dependency(gem, "= #{version}")
end
```
#### Header 4
* This is an unordered list following a header.
* This is an unordered list following a header.
* This is an unordered list following a header.
##### Header 5
1. This is an ordered list following a header.
2. This is an ordered list following a header.
3. This is an ordered list following a header.
###### Header 6
| head1 | head two | three |
|:-------------|:------------------|:------|
| ok | good swedish fish | nice |
| out of stock | good and plenty | nice |
| ok | good `oreos` | hmm |
| ok | good `zoute` drop | yumm |
### There's a horizontal rule below this.
* * *
### Here is an unordered list:
* Item foo
* Item bar
* Item baz
* Item zip
### And an ordered list:
1. Item one
1. Item two
1. Item three
1. Item four
### And a nested list:
- level 1 item
- level 2 item
- level 2 item
- level 3 item
- level 3 item
- level 1 item
- level 2 item
- level 2 item
- level 2 item
- level 1 item
- level 2 item
- level 2 item
- level 1 item
### Small image
### Large image
### Definition lists can be used with HTML syntax.
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
```
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
```
```
The final element.
```
================================================
FILE: jekyll-theme-primer.gemspec
================================================
# frozen_string_literal: true
Gem::Specification.new do |s|
s.name = "jekyll-theme-primer"
s.version = "0.6.0"
s.authors = ["GitHub, Inc."]
s.email = ["open-source@github.com"]
s.homepage = "https://github.com/pages-themes/jekyll-theme-primer"
s.summary = "Primer is a Jekyll theme for GitHub Pages based on GitHub's Primer styles"
s.files = `git ls-files -z`.split("\x0").select do |f|
f.match(%r{^(assets|_(includes|layouts|sass)/|(LICENSE|README)((\.(txt|md)|$)))}i)
end
s.platform = Gem::Platform::RUBY
s.license = "MIT"
s.required_ruby_version = ">= 2.4.0"
s.add_dependency "jekyll", "> 3.5", "< 5.0"
s.add_runtime_dependency "jekyll-github-metadata", "~> 2.9"
s.add_runtime_dependency "jekyll-seo-tag", "~> 2.0"
s.add_development_dependency "html-proofer", "~> 3.0"
s.add_development_dependency "rubocop-github", "~> 0.16"
s.add_development_dependency "w3c_validators", "~> 1.3"
end
================================================
FILE: package.json
================================================
{
"name": "jekyll-theme-primer",
"version": "0.1.0",
"description": "A Jekyll theme based on GitHub's Primer styles",
"main": "index.html",
"scripts": {
"test": "script/cibuild"
},
"author": "Ben Balter",
"license": "MIT",
"dependencies": {
"primer-base": "^1.9.2",
"primer-layout": "^1.6.2",
"primer-markdown": "^3.7.13",
"primer-support": "^4.7.2",
"primer-utilities": "^4.14.4"
},
"devDependencies": {
"@primer/sync": "^0.1.0"
}
}
================================================
FILE: script/bootstrap
================================================
#!/bin/sh
set -e
gem install bundler
bundle install
================================================
FILE: script/build
================================================
#!/bin/sh
# Build a preview of the theme
set -e
bundle exec jekyll build
================================================
FILE: script/cibuild
================================================
#!/bin/sh
set -e
bundle exec jekyll build
bundle exec htmlproofer ./_site --check-html --check-sri
bundle exec rubocop -D --config .rubocop.yml
bundle exec script/validate-html
gem build jekyll-theme-primer.gemspec
================================================
FILE: script/install
================================================
#!/bin/sh
# Install NPM dependencies to _sass directory and symlink to node_modules
set -e
npm install
mv node_modules _sass
ln -s _sass node_modules
# Normalize.css is distributed as CSS, which Sass dosen't like. Convert to scss.
if test -e "_sass/normalize.css/normalize.css"; then
mv -f _sass/normalize.css/normalize.css _sass/normalize.css/normalize.scss
fi
# Add our own theme scss file for consistency of naming in `assets/style.scss`
content='
@import "primer-support/index.scss";
@import "primer-base/index.scss";
@import "primer-utilities/index.scss";
@import "primer-layout/index.scss";
@import "primer-markdown/index.scss";
@import "rouge";
'
echo "$content" >> _sass/jekyll-theme-primer.scss
# Create rouge stylesheet
rougify style github > _sass/rouge.scss
================================================
FILE: script/release
================================================
#!/bin/sh
# Tag and push a release.
set -e
# Make sure we're in the project root.
cd $(dirname "$0")/..
# Make sure the darn thing works
bundle update
# Build a new gem archive.
rm -rf jekyll-theme-primer-*.gem
gem build -q jekyll-theme-primer.gemspec
# Make sure we're on the master branch.
(git branch | grep -q 'master') || {
echo "Only release from the master branch."
exit 1
}
# Figure out what version we're releasing.
tag=v`ls jekyll-theme-primer-*.gem | sed 's/^jekyll-theme-primer-\(.*\)\.gem$/\1/'`
# Make sure we haven't released this version before.
git fetch -t origin
(git tag -l | grep -q "$tag") && {
echo "Whoops, there's already a '${tag}' tag."
exit 1
}
# Tag it and bag it.
gem push jekyll-theme-primer-*.gem && git tag "$tag" &&
git push origin master && git push origin "$tag"
================================================
FILE: script/server
================================================
#!/bin/sh
# Start the local preview server
set -e
bundle exec jekyll serve
================================================
FILE: script/update
================================================
#!/bin/sh
# Update NPM dependencies
set -ex
rm -Rf _sass/primer-*
npm update
npx primer-sync _sass
rm -rf node_modules
================================================
FILE: script/validate-html
================================================
#!/usr/bin/env ruby
# frozen_string_literal: true
require "w3c_validators"
def validator(file)
extension = File.extname(file)
if extension == ".html"
W3CValidators::NuValidator.new
elsif extension == ".css"
W3CValidators::CSSValidator.new
end
end
def validate(file)
puts "Checking #{file}..."
path = File.expand_path "../_site/#{file}", __dir__
results = validator(file).validate_file(path)
return puts "Valid!" if results.errors.empty?
results.errors.each { |err| puts err }
exit 1
end
validate "index.html"
gitextract__yudom7l/
├── .github/
│ ├── CODEOWNERS
│ ├── config.yml
│ ├── dependabot.yml
│ ├── no-response.yml
│ ├── settings.yml
│ ├── stale.yml
│ └── workflows/
│ ├── ci.yaml
│ └── publish-gem.yml
├── .gitignore
├── .rubocop.yml
├── .travis.yml
├── Gemfile
├── LICENSE.md
├── README.md
├── _config.yml
├── _includes/
│ ├── .gitkeep
│ ├── head-custom-google-analytics.html
│ └── head-custom.html
├── _layouts/
│ ├── default.html
│ ├── home.html
│ ├── page.html
│ └── post.html
├── _sass/
│ ├── jekyll-theme-primer.scss
│ ├── primer-base/
│ │ ├── index.scss
│ │ └── lib/
│ │ ├── base.scss
│ │ ├── normalize.scss
│ │ └── typography-base.scss
│ ├── primer-layout/
│ │ ├── index.scss
│ │ └── lib/
│ │ ├── columns.scss
│ │ ├── container.scss
│ │ ├── grid-offset.scss
│ │ └── grid.scss
│ ├── primer-markdown/
│ │ ├── index.scss
│ │ └── lib/
│ │ ├── blob-csv.scss
│ │ ├── code.scss
│ │ ├── headings.scss
│ │ ├── images.scss
│ │ ├── lists.scss
│ │ ├── markdown-body.scss
│ │ └── tables.scss
│ ├── primer-support/
│ │ ├── index.scss
│ │ └── lib/
│ │ ├── mixins/
│ │ │ ├── buttons.scss
│ │ │ ├── layout.scss
│ │ │ ├── misc.scss
│ │ │ └── typography.scss
│ │ └── variables/
│ │ ├── color-system.scss
│ │ ├── colors.scss
│ │ ├── layout.scss
│ │ ├── misc.scss
│ │ └── typography.scss
│ ├── primer-utilities/
│ │ ├── index.scss
│ │ └── lib/
│ │ ├── animations.scss
│ │ ├── borders.scss
│ │ ├── box-shadow.scss
│ │ ├── colors.scss
│ │ ├── details.scss
│ │ ├── flexbox.scss
│ │ ├── layout.scss
│ │ ├── margin.scss
│ │ ├── padding.scss
│ │ ├── typography.scss
│ │ └── visibility-display.scss
│ ├── primer.scss
│ └── rouge.scss
├── another-page.md
├── assets/
│ └── css/
│ └── style.scss
├── docs/
│ ├── CODE_OF_CONDUCT.md
│ ├── CONTRIBUTING.md
│ └── SUPPORT.md
├── index.md
├── jekyll-theme-primer.gemspec
├── package.json
└── script/
├── bootstrap
├── build
├── cibuild
├── install
├── release
├── server
├── update
└── validate-html
Condensed preview — 80 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (115K chars).
[
{
"path": ".github/CODEOWNERS",
"chars": 182,
"preview": "# Require maintainer's :+1: for changes to the .github/ repo-config files\n# mainly due to https://github.com/probot/sett"
},
{
"path": ".github/config.yml",
"chars": 1778,
"preview": "# Behaviorbot config. See https://github.com/behaviorbot/ for more information.\n# Note: Please Don't edit this file dire"
},
{
"path": ".github/dependabot.yml",
"chars": 199,
"preview": "version: 2\nupdates:\n- package-ecosystem: npm\n directory: \"/\"\n schedule:\n interval: daily\n open-pull-requests-limit"
},
{
"path": ".github/no-response.yml",
"chars": 705,
"preview": "# Configuration for probot-no-response - https://github.com/probot/no-response\n\n# Number of days of inactivity before an"
},
{
"path": ".github/settings.yml",
"chars": 737,
"preview": "# Repository settings set via https://github.com/probot/settings\n\nrepository:\n has_issues: true\n has_wiki: false\n has"
},
{
"path": ".github/stale.yml",
"chars": 856,
"preview": "# Configuration for probot-stale - https://github.com/probot/stale\n\n# Number of days of inactivity before an Issue or Pu"
},
{
"path": ".github/workflows/ci.yaml",
"chars": 375,
"preview": "on:\n push:\n pull_request:\n types: [opened, synchronize]\njobs:\n build:\n runs-on: ubuntu-latest\n name: script/"
},
{
"path": ".github/workflows/publish-gem.yml",
"chars": 463,
"preview": "name: Publish Gem\n\non:\n release:\n types: [released]\n\njobs:\n release:\n runs-on: ubuntu-latest\n steps:\n - "
},
{
"path": ".gitignore",
"chars": 102,
"preview": "_site\nnode_modules\n.sass-cache\n*.gem\nGemfile.lock\n*.gem\nassets/**/*.html\nassets/**/*.md\n.jekyll-cache\n"
},
{
"path": ".rubocop.yml",
"chars": 149,
"preview": "inherit_gem:\n rubocop-github:\n - config/default.yml\n\nAllCops:\n Exclude:\n - _site/**/*\n - vendor/**/*\n\nLayout/"
},
{
"path": ".travis.yml",
"chars": 89,
"preview": "language: ruby\ncache: bundler\nrvm: 2.6\n\ninstall: script/bootstrap\nscript: script/cibuild\n"
},
{
"path": "Gemfile",
"chars": 70,
"preview": "# frozen_string_literal: true\n\nsource \"https://rubygems.org\"\n\ngemspec\n"
},
{
"path": "LICENSE.md",
"chars": 1084,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2016-2017 GitHub, Inc.\n\nPermission is hereby granted, free of charge, to any person"
},
{
"path": "README.md",
"chars": 5672,
"preview": "# The Primer theme\n\n[![.github/workflows/ci.yaml](https://github.com/pages-themes/primer/actions/workflows/ci.yaml/badge"
},
{
"path": "_config.yml",
"chars": 333,
"preview": "exclude:\n - node_modules\n - script\n\nsass:\n style: :compressed\n\ntheme: jekyll-theme-primer\n\ngithub:\n private: false\n "
},
{
"path": "_includes/.gitkeep",
"chars": 1,
"preview": "\n"
},
{
"path": "_includes/head-custom-google-analytics.html",
"chars": 351,
"preview": "{% if site.google_analytics %}\n <script async src=\"https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics"
},
{
"path": "_includes/head-custom.html",
"chars": 346,
"preview": "<!-- start custom head snippets, customize with your own _includes/head-custom.html file -->\n\n<!-- Setup Google Analytic"
},
{
"path": "_layouts/default.html",
"chars": 1172,
"preview": "<!DOCTYPE html>\n<html lang=\"{{ page.lang | default: site.lang | default: \"en-US\" }}\">\n <head>\n <meta charset=\"UTF-8\""
},
{
"path": "_layouts/home.html",
"chars": 37,
"preview": "---\nlayout: default\n---\n{{ content }}"
},
{
"path": "_layouts/page.html",
"chars": 37,
"preview": "---\nlayout: default\n---\n{{ content }}"
},
{
"path": "_layouts/post.html",
"chars": 37,
"preview": "---\nlayout: default\n---\n{{ content }}"
},
{
"path": "_sass/jekyll-theme-primer.scss",
"chars": 202,
"preview": "\n@import \"primer-support/index.scss\";\n@import \"primer-base/index.scss\";\n@import \"primer-utilities/index.scss\";\n@import \""
},
{
"path": "_sass/primer-base/index.scss",
"chars": 135,
"preview": "@import \"primer-support/index.scss\";\n\n@import \"./lib/normalize.scss\";\n@import \"./lib/base.scss\";\n@import \"./lib/typograp"
},
{
"path": "_sass/primer-base/lib/base.scss",
"chars": 1355,
"preview": "// stylelint-disable selector-max-type\n* {\n box-sizing: border-box;\n}\n\ninput,\nselect,\ntextarea,\nbutton {\n font-family:"
},
{
"path": "_sass/primer-base/lib/normalize.scss",
"chars": 7223,
"preview": "// stylelint-disable\n/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */\n\n/**\n * 1. Change the "
},
{
"path": "_sass/primer-base/lib/typography-base.scss",
"chars": 1211,
"preview": "// Headings\n// --------------------------------------------------\n// stylelint-disable selector-max-type\nh1,\nh2,\nh3,\nh4,"
},
{
"path": "_sass/primer-layout/index.scss",
"chars": 160,
"preview": "@import \"primer-support/index.scss\";\n@import \"./lib/container.scss\";\n@import \"./lib/columns.scss\";\n@import \"./lib/grid.s"
},
{
"path": "_sass/primer-layout/lib/columns.scss",
"chars": 820,
"preview": "// Grid system\n//\n// Create rows with `.columns` to clear the floated columns and outdent the\n// padding on `.column`s w"
},
{
"path": "_sass/primer-layout/lib/container.scss",
"chars": 638,
"preview": "// Fixed-width, centered column for site content.\n// This will be deprecated and replaced with container-lg in future\n.c"
},
{
"path": "_sass/primer-layout/lib/grid-offset.scss",
"chars": 941,
"preview": "// Optional offset options to work with grid.scss\n\n// Offset Columns\n\n@each $breakpoint, $variant in $responsive-variant"
},
{
"path": "_sass/primer-layout/lib/grid.scss",
"chars": 1925,
"preview": "// GRID\n\n// Columns\n.col-1 { width: (1 / 12 * 100%); }\n.col-2 { width: (2 / 12 * 100%); }\n.col-3 { width: (3 / 12 * 100%"
},
{
"path": "_sass/primer-markdown/index.scss",
"chars": 248,
"preview": "@import \"primer-support/index.scss\";\n@import \"./lib/markdown-body.scss\";\n@import \"./lib/headings.scss\";\n@import \"./lib/l"
},
{
"path": "_sass/primer-markdown/lib/blob-csv.scss",
"chars": 479,
"preview": "// stylelint-disable selector-max-type\n.markdown-body .csv-data {\n td,\n th {\n padding: 5px;\n overflow: hidden;\n "
},
{
"path": "_sass/primer-markdown/lib/code.scss",
"chars": 1093,
"preview": "// stylelint-disable selector-max-type\n.markdown-body {\n // Inline code snippets\n code,\n tt {\n padding: 0.2em 0.4e"
},
{
"path": "_sass/primer-markdown/lib/headings.scss",
"chars": 998,
"preview": "// Needs refactoring\n// stylelint-disable selector-max-compound-selectors, selector-max-specificity\n// stylelint-disable"
},
{
"path": "_sass/primer-markdown/lib/images.scss",
"chars": 2143,
"preview": "// Need to target base styles\n// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type, primer/"
},
{
"path": "_sass/primer-markdown/lib/lists.scss",
"chars": 1393,
"preview": "// Base styles\n// stylelint-disable selector-no-qualifying-type\n// stylelint-disable selector-max-type\n.markdown-body {\n"
},
{
"path": "_sass/primer-markdown/lib/markdown-body.scss",
"chars": 2229,
"preview": "// All of our block level items should have the same margin\n// stylelint-disable selector-max-type\n\n// This is styling f"
},
{
"path": "_sass/primer-markdown/lib/tables.scss",
"chars": 539,
"preview": "// Needs refactoring\n// stylelint-disable selector-max-type\n.markdown-body {\n // Tables\n table {\n display: block;\n "
},
{
"path": "_sass/primer-support/index.scss",
"chars": 329,
"preview": "// variables\n@import \"./lib/variables/typography.scss\";\n@import \"./lib/variables/colors.scss\";\n@import \"./lib/variables/"
},
{
"path": "_sass/primer-support/lib/mixins/buttons.scss",
"chars": 3844,
"preview": "// stylelint-disable block-closing-brace-newline-after\n\n// Button color generator for primary and themed buttons\n\n// New"
},
{
"path": "_sass/primer-support/lib/mixins/layout.scss",
"chars": 1232,
"preview": "// Responsive media queries\n\n@mixin breakpoint($breakpoint) {\n @if $breakpoint == \"\" {\n @content;\n }\n\n @else {\n "
},
{
"path": "_sass/primer-support/lib/mixins/misc.scss",
"chars": 599,
"preview": "// Generate a two-color caret for any element.\n@mixin double-caret($foreground: $text-white, $background: lighten($gray-"
},
{
"path": "_sass/primer-support/lib/mixins/typography.scss",
"chars": 1765,
"preview": "// Text hiding for image based text replacement.\n// Higher performance than -9999px because it only renders\n// the size "
},
{
"path": "_sass/primer-support/lib/variables/color-system.scss",
"chars": 3908,
"preview": "//\n//\n// -------- Grays --------\n$gray-000: #fafbfc !default;\n$gray-100: #f6f8fa !default;\n$gray-200: "
},
{
"path": "_sass/primer-support/lib/variables/colors.scss",
"chars": 2197,
"preview": "@import \"color-system.scss\";\n// Color variables\n// stylelint-disable declaration-bang-space-before\n\n// State indicators."
},
{
"path": "_sass/primer-support/lib/variables/layout.scss",
"chars": 1822,
"preview": "// Layout variables\n// stylelint-disable declaration-bang-space-before\n\n// These are our margin and padding utility spac"
},
{
"path": "_sass/primer-support/lib/variables/misc.scss",
"chars": 1384,
"preview": "// Miscellaneous variables\n// stylelint-disable declaration-bang-space-before\n\n// Border size\n$border-width: 1px !defaul"
},
{
"path": "_sass/primer-support/lib/variables/typography.scss",
"chars": 1232,
"preview": "// Typography variables\n// stylelint-disable declaration-bang-space-before\n\n// Heading sizes - mobile\n// h4—h6 remain th"
},
{
"path": "_sass/primer-utilities/index.scss",
"chars": 516,
"preview": "@import \"primer-support/index.scss\";\n// utilities\n@import \"./lib/animations.scss\";\n@import \"./lib/borders.scss\";\n@import"
},
{
"path": "_sass/primer-utilities/lib/animations.scss",
"chars": 2911,
"preview": "// This file contains reusable animations for github.\n// stylelint-disable primer/selector-no-utility\n\n/* Fade in an ele"
},
{
"path": "_sass/primer-utilities/lib/borders.scss",
"chars": 3828,
"preview": "// Border utilities\n// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-lin"
},
{
"path": "_sass/primer-utilities/lib/box-shadow.scss",
"chars": 435,
"preview": "// Box shadow utilities\n// stylelint-disable primer/selector-no-utility\n\n// Box shadows\n\n.box-shadow {\n box-shadow: $bo"
},
{
"path": "_sass/primer-utilities/lib/colors.scss",
"chars": 3876,
"preview": "// Color utilities\n// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility\n// stylelint-disabl"
},
{
"path": "_sass/primer-utilities/lib/details.scss",
"chars": 340,
"preview": "// stylelint-disable selector-max-type\n.details-overlay[open] > summary::before {\n position: fixed;\n top: 0;\n right: "
},
{
"path": "_sass/primer-utilities/lib/flexbox.scss",
"chars": 2616,
"preview": "// Flex utility classes\n// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before\n// stylel"
},
{
"path": "_sass/primer-utilities/lib/layout.scss",
"chars": 2837,
"preview": "// Layout\n// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-uti"
},
{
"path": "_sass/primer-utilities/lib/margin.scss",
"chars": 2232,
"preview": "// Margin spacer utilities\n// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer"
},
{
"path": "_sass/primer-utilities/lib/padding.scss",
"chars": 1918,
"preview": "// Padding spacer utilities\n// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before\n// sty"
},
{
"path": "_sass/primer-utilities/lib/typography.scss",
"chars": 5968,
"preview": "// stylelint-disable block-closing-brace-space-before, primer/selector-no-utility, selector-list-comma-newline-after\n// "
},
{
"path": "_sass/primer-utilities/lib/visibility-display.scss",
"chars": 1800,
"preview": "// Visibility and display utilities\n// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-befo"
},
{
"path": "_sass/primer.scss",
"chars": 171,
"preview": "// Placeholder file. If your site uses\n// @import \"{{ site.theme }}\";\n// Then using this theme with jekyll-remote-th"
},
{
"path": "_sass/rouge.scss",
"chars": 2903,
"preview": ".highlight table td { padding: 5px; }\n.highlight table pre { margin: 0; }\n.highlight .cm {\n color: #999988;\n font-styl"
},
{
"path": "another-page.md",
"chars": 71,
"preview": "---\nlayout: default\n---\n\n## Welcome to another page\n\n_yay_\n\n[back](./)\n"
},
{
"path": "assets/css/style.scss",
"chars": 40,
"preview": "---\n---\n\n@import \"jekyll-theme-primer\";\n"
},
{
"path": "docs/CODE_OF_CONDUCT.md",
"chars": 3218,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "docs/CONTRIBUTING.md",
"chars": 5972,
"preview": "# Contributing to the Primer theme\n\nHi there! We're thrilled that you'd like to contribute to the Primer theme. Your hel"
},
{
"path": "docs/SUPPORT.md",
"chars": 834,
"preview": "## Where to get help\n\nIf you think you've found a bug in the Primer theme, please [check the existing issues](https://gi"
},
{
"path": "index.md",
"chars": 2600,
"preview": "---\nlayout: default\n---\n\nText can be **bold**, _italic_, or ~~strikethrough~~.\n\n[Link to another page](./another-page.ht"
},
{
"path": "jekyll-theme-primer.gemspec",
"chars": 991,
"preview": "# frozen_string_literal: true\n\nGem::Specification.new do |s|\n s.name = \"jekyll-theme-primer\"\n s.version "
},
{
"path": "package.json",
"chars": 486,
"preview": "{\n \"name\": \"jekyll-theme-primer\",\n \"version\": \"0.1.0\",\n \"description\": \"A Jekyll theme based on GitHub's Primer style"
},
{
"path": "script/bootstrap",
"chars": 54,
"preview": "#!/bin/sh\n\nset -e\n\ngem install bundler\nbundle install\n"
},
{
"path": "script/build",
"chars": 75,
"preview": "#!/bin/sh\n# Build a preview of the theme\n\nset -e\n\nbundle exec jekyll build\n"
},
{
"path": "script/cibuild",
"chars": 217,
"preview": "#!/bin/sh\n\nset -e\n\nbundle exec jekyll build\nbundle exec htmlproofer ./_site --check-html --check-sri\nbundle exec rubocop"
},
{
"path": "script/install",
"chars": 777,
"preview": "#!/bin/sh\n# Install NPM dependencies to _sass directory and symlink to node_modules\n\nset -e\n\nnpm install\nmv node_modules"
},
{
"path": "script/release",
"chars": 825,
"preview": "#!/bin/sh\n# Tag and push a release.\n\nset -e\n\n# Make sure we're in the project root.\n\ncd $(dirname \"$0\")/..\n\n# Make sure "
},
{
"path": "script/server",
"chars": 77,
"preview": "#!/bin/sh\n# Start the local preview server\n\nset -e\n\nbundle exec jekyll serve\n"
},
{
"path": "script/update",
"chars": 123,
"preview": "#!/bin/sh\n# Update NPM dependencies\n\nset -ex\n\nrm -Rf _sass/primer-*\n\nnpm update\nnpx primer-sync _sass\n\nrm -rf node_modul"
},
{
"path": "script/validate-html",
"chars": 544,
"preview": "#!/usr/bin/env ruby\n# frozen_string_literal: true\n\nrequire \"w3c_validators\"\n\ndef validator(file)\n extension = File.extn"
}
]
About this extraction
This page contains the full source code of the pages-themes/primer GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 80 files (103.6 KB), approximately 31.2k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.