diff --git a/_config.yml b/_config.yml index 934bbb4e..267eda64 100644 --- a/_config.yml +++ b/_config.yml @@ -209,7 +209,7 @@ kramdown: auto_ids: true footnote_nr: 1 entity_output: as_char - toc_levels: 1..3 + toc_levels: 1..2 smart_quotes: lsquo,rsquo,ldquo,rdquo enable_coderay: false diff --git a/_posts/2025-03-13-python-packaging-security-pypi.md b/_posts/2025-03-13-python-packaging-security-pypi.md index e37dfe66..12477953 100644 --- a/_posts/2025-03-13-python-packaging-security-pypi.md +++ b/_posts/2025-03-13-python-packaging-security-pypi.md @@ -61,7 +61,7 @@ The Ultralytics breach highlights the need for us all to follow and understand s [PyPA provides a great overview of using actions to publish your Python package.](https://packaging.python.org/en/latest/guides/publishing-package-distribution-releases-using-github-actions-ci-cd-workflows/) {: .notice } -## 1. Create a dedicated GitHub environment for publishing actions +## 1. Create a dedicated GitHub environment for publishing actions First, make sure that your PyPI publish GitHub Action uses an isolated GitHub environment. Isolated environments ensure your publishing process remains secure even if other parts of your CI pipeline are compromised. This is because you can lock an environment down by ensuring that only specific users can authorize this environment to run. @@ -96,7 +96,7 @@ To lock down a GitHub environment: *Optionally, you can click prevent self-review, preventing someone from triggering a release or a build and then running it!*
- Animated gif file that shows the GitHub interface where you can click on settings and go to the environment setting to create or edit a GitHub environment + Animated gif file that shows the GitHub interface where you can click on settings and go to the environment setting to create or edit a GitHub environment
To create a new environment to use in a GitHub Action, 1) go to your repo's settings; 2) click environment; 3) add a new environment. In this screenshot, we already have a pypi environment created. Note that you can name your environment whatever you want, however, PyPI suggests that you use the name pypi for a Trusted Publisher workflow.
@@ -104,15 +104,15 @@ To lock down a GitHub environment:
- - Screenshot of the GitHub settings interface showing the ‘Environments’ section with configuration options for ‘pypi.’ The ‘Deployment protection rules’ section is visible, with ‘Required reviewers’ enabled and two reviewers listed: ‘lwasser’ and ‘willingc.’ Other options such as ‘Prevent self-review’ and ‘Wait timer’ are present but not enabled. + + Screenshot of the GitHub settings interface showing the ‘Environments’ section with configuration options for ‘pypi.’ The ‘Deployment protection rules’ section is visible, with ‘Required reviewers’ enabled and two reviewers listed: ‘lwasser’ and ‘willingc.’ Other options such as ‘Prevent self-review’ and ‘Wait timer’ are present but not enabled.
GitHub environment settings for “pypi,” displaying deployment protection rules with required reviewers configured for workflow approvals.
-## 2. 🔑 Use Trusted Publisher for PyPI +## 2. Use Trusted Publisher for PyPI Now that you have a GitHub environment setup, you can set up Trusted Publisher in your PyPI account. @@ -123,8 +123,8 @@ A Trusted Publisher setup creates a secure link between PyPI and your repository Using a Trusted Publisher combined with a locked-down environment eliminates the need to store sensitive tokens as GitHub secrets. It also removes the need to refresh and update tokens periodically to avoid token leaks or theft issues.
- - A workflow diagram showing GitHub Actions building distribution files (sdist and wheel), publishing them securely to PyPI, represented as a warehouse. The diagram includes a lock icon emphasizing security, with the pyOpenSci logo in the top-left corner. + + A workflow diagram showing GitHub Actions building distribution files (sdist and wheel), publishing them securely to PyPI, represented as a warehouse. The diagram includes a lock icon emphasizing security, with the pyOpenSci logo in the top-left corner.
Example of the PyPI Trusted Publisher form, used to securely link a GitHub repository with PyPI for publishing Python packages. Trusted Publisher reduces the risk of token theft and improves overall security.
@@ -149,8 +149,8 @@ The steps for setting up Trusted Publisher are:
- - PyPI Trusted Publisher form example showing settings for linking a GitHub repository with PyPI for secure publishing. + + PyPI Trusted Publisher form example showing settings for linking a GitHub repository with PyPI for secure publishing.
Example of the PyPI Trusted Publisher form, used to securely link a GitHub repository with PyPI for publishing Python packages. Trusted Publisher reduces the risk of token theft and improves overall security. @@ -162,8 +162,8 @@ For an example of a GitHub workflow that uses Trusted Publishing, check out our
- - PyPI Trusted Publisher manage settings showing what the Trusted Publisher setup looks like after you've created it in PyPI. It shows all of the items that you filled out in the form and has a remove button if you want to remove it from PyPI. + + PyPI Trusted Publisher manage settings showing what the Trusted Publisher setup looks like after you've created it in PyPI. It shows all of the items that you filled out in the form and has a remove button if you want to remove it from PyPI.
Example of the PyPI Trusted Publisher setup in PyPI once you've created the Trusted PuUblisher link by filling the form out above. @@ -174,13 +174,11 @@ For an example of a GitHub workflow that uses Trusted Publishing, check out our **Note:** Read more here about [support for publishing to GitLab](https://docs.pypi.org/trusted-publishers/adding-a-publisher/#gitlab-cicd) using trusted publishing. {: .notice } -## 3. Add `zizmor` to your CI workflows +## 3. Add `zizmor` to your CI workflows -Finally, consider adding [Zizmor](https://woodruffw.github.io/zizmor/) to your CI and pre-commit checks. +Finally, consider adding [Zizmor](https://woodruffw.github.io/zizmor/) to your [Continuous Integration (CI)](https://www.pyopensci.org/python-package-guide/continuous-integration/ci.html#what-is-continuous-integration) and [pre-commit checks](https://www.pyopensci.org/python-package-guide/package-structure-code/code-style-linting-format.html#use-pre-commit-hooks-to-run-code-formatters-and-linters-on-commits). -Zizmor is a static analysis tool designed to help identify GitHub Action security issues. Zizmor scans your workflows and highlights common vulnerabilities, ensuring your (continuous integration / continuous deployment) pipelines remain secure and efficient. - -**TODO: link to packaging guide page on CI when it's published friday** +Zizmor is a static analysis tool designed to help identify GitHub Action security issues. Zizmor scans your workflows and highlights common vulnerabilities, ensuring your continuous integration / continuous deployment pipelines remain secure and efficient. Named as a playful nod to Dr. Zizmor’s famous “clear skin” ads, zizmor aims to give you “beautiful clean workflows.” diff --git a/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss index 45b0beeb..ddf6da6c 100644 --- a/_sass/minimal-mistakes/_base.scss +++ b/_sass/minimal-mistakes/_base.scss @@ -2,469 +2,481 @@ BASE ELEMENTS ========================================================================== */ -html { - /* sticky footer fix */ - position: relative; - min-height: 100%; -} - -body { - margin: 0; - padding: 0; - color: $text-color; - font-family: $global-font-family; - line-height: 1.6; - weight: $weight-3; - font-size: 1em; - - &.overflow--hidden { - /* when primary navigation is visible, the content in the background won't scroll */ - overflow: hidden; - } -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 3.5rem 0 1rem 0; - line-height: 1.2; - color: #542668; -} - -h1 { - margin-top: 0; - font-size: $h-size-1; - font-weight: 200 !important; - font-family: $header-font-family; -} - -h2 { - font-size: $h-size-2; - font-family: $header-font-family; -} - -h3 { - font-size: $h-size-3; - //font-family: $sans-serif; - font-weight: $weight-4; - line-height: 1.1em; -} - -h4 { - font-size: $h-size-4; - font-weight: $semibold-weight; -} - -h5 { - font-size: $h-size-5; - font-weight: $semibold-weight; -} - -h6 { - font-size: $h-size-6; -} - -small, -.small { - font-size: $type-size-6; -} - -p { - margin-bottom: 1.3em; -} - -u, -ins { - text-decoration: none; - border-bottom: 1px solid $text-color; - a { - color: inherit; + html { + /* sticky footer fix */ + position: relative; + min-height: 100%; } -} - -del a { - color: inherit; -} - -/* reduce orphans and widows when printing */ - -p, -pre, -blockquote, -ul, -ol, -dl, -figure, -table, -fieldset { - orphans: 3; - widows: 3; -} - -/* abbreviations */ - -abbr[title], -abbr[data-original-title] { - text-decoration: none; - cursor: help; - border-bottom: 1px dotted $text-color; -} - -/* blockquotes */ - -blockquote { - margin: 2em 1em 2em 0; - padding-left: 1em; - padding-right: 1em; - font-style: italic; - border-left: 0.25em solid $primary-color; - - cite { - font-style: italic; - &:before { - content: "\2014"; - padding-right: 5px; + body { + margin: 0; + padding: 0; + color: $text-color; + font-family: $global-font-family; + line-height: 1.6; + weight: $weight-3; + font-size: 1em; + + &.overflow--hidden { + /* when primary navigation is visible, the content in the background won't scroll */ + overflow: hidden; } } -} - -%quote-style { - font-weight: bold; - font-size: 100px; - color: $pyos-teal; - line-height: 0; -} - -/* Block quote with bigger quotes*/ -blockquote.highlight-quote { - border: none; - font-family: Georgia, "Times New Roman", Times, serif; - margin-top: 6rem; - margin-bottom: 4rem; - padding: 0 2rem; - max-width: $medium; - - footer { - font-style: italic; - font-weight: 500; - text-align: right; + + strong {font-weight:$semibold-weight} + ul li {margin-bottom: 0} + + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 3.5rem 0 1rem 0; + line-height: 1.2; + color: #542668; } - &:after{ - @extend %quote-style; - position: absolute; - content: close-quote; - right: 10rem; // To ensure the right quote is within the margin - margin-top:2rem; + h1 { + margin-top: 0; + font-size: $h-size-1; + font-weight: 200 !important; + font-family: $header-font-family; } - & > div.end { - position: relative; + + h2 { + font-size: $h-size-2; + //font-family: $header-font-family; } - & > div.end:after { - @extend %quote-style; - content: close-quote; - position: absolute; - right: 0; - margin-top:2.8rem; + h3 { + font-size: $h-size-3; + font-weight: $weight-4; + line-height: 1.1em; + margin-top: 2.7em; + } + + h4 { + font-size: $h-size-4; + font-weight: $semibold-weight; + } + + h5 { + font-size: $h-size-5; + font-weight: $semibold-weight; + } + + h6 { + font-size: $h-size-6; + } + + small, + .small { + font-size: $type-size-6; } p { - font-size: 1.3rem; - position: relative; - margin-bottom: 0.63rem; + margin-bottom: 1.3em; + } - &:before { - @extend %quote-style; - position: absolute; - content: open-quote; - left: 0; - top: -20px; + u, + ins { + text-decoration: none; + border-bottom: 1px solid $text-color; + a { + color: inherit; } } - &.magenta { - div.end:after, - p:before, - p:after { - @extend %quote-style; - color: $pyos-magenta; - } + del a { + color: inherit; } - &.purple { - div.end:after, - p:before, - p:after { - color: $pyos-mediumpurple; - } + /* Font awesome */ + .fa-solid { + font-size: .7em; + } + + /* reduce orphans and widows when printing */ + + p, + pre, + blockquote, + ul, + ol, + dl, + figure, + table, + fieldset { + orphans: 3; + widows: 3; } + /* abbreviations */ - @include breakpoint('max-width: #$mobile') { - padding: 0; - //font-size: 2rem; + abbr[title], + abbr[data-original-title] { + text-decoration: none; + cursor: help; + border-bottom: 1px dotted $text-color; } -} -// for some reason i have to manually override here -blockquote.highlight-quote.magenta:after{ - color: $pyos-magenta; + /* blockquotes */ + + blockquote { + margin: 2em 1em 2em 0; + padding-left: 1em; + padding-right: 1em; + font-style: italic; + border-left: 0.25em solid $primary-color; + + cite { + font-style: italic; + + &:before { + content: "\2014"; + padding-right: 5px; + } } -blockquote.highlight-quote.purple:after{ - color: $pyos-mediumpurple; + } + + %quote-style { + font-weight: bold; + font-size: 100px; + color: $pyos-teal; + line-height: 0; + } + + /* Block quote with bigger quotes*/ + blockquote.highlight-quote { + border: none; + font-family: Georgia, "Times New Roman", Times, serif; + margin-top: 6rem; + margin-bottom: 4rem; + padding: 0 2rem; + max-width: $medium; + + footer { + font-style: italic; + font-weight: 500; + text-align: right; } -/* links */ + &:after{ + @extend %quote-style; + position: absolute; + content: close-quote; + right: 10rem; // To ensure the right quote is within the margin + margin-top:2rem; + } + & > div.end { + position: relative; + } -a { - text-underline-offset: .1em; - text-decoration-color: rgba($text-color, 0.7); - text-decoration: underline; + & > div.end:after { + @extend %quote-style; + content: close-quote; + position: absolute; + right: 0; + margin-top:2.8rem; + } + p { + font-size: 1.3rem; + position: relative; + margin-bottom: 0.63rem; + + &:before { + @extend %quote-style; + position: absolute; + content: open-quote; + left: 0; + top: -20px; + } + } - &:focus { - @extend %tab-focus; + &.magenta { + div.end:after, + p:before, + p:after { + @extend %quote-style; + color: $pyos-magenta; + } + } + + &.purple { + div.end:after, + p:before, + p:after { + color: $pyos-mediumpurple; + } + } + + + @include breakpoint('max-width: #$mobile') { + padding: 0; + //font-size: 2rem; + } } - &:visited { - color: $link-color-visited; + // for some reason i have to manually override here + blockquote.highlight-quote.magenta:after{ + color: $pyos-magenta; + } + blockquote.highlight-quote.purple:after{ + color: $pyos-mediumpurple; + } + + /* links */ + + a { + text-underline-offset: .1em; + text-decoration-color: rgba($text-color, 0.7); + text-decoration: underline; + + + &:focus { + @extend %tab-focus; + } + + &:visited { + color: $link-color-visited; + } + + &:hover { + color: $link-color-hover; + outline: 0; + text-decoration: none !important; + text-decoration-line: none !important; + transition: color 0.3s ease, text-decoration-color 0.3s ease; + } } - &:hover { - color: $link-color-hover; - outline: 0; - text-decoration: none !important; - text-decoration-line: none !important; - transition: color 0.3s ease, text-decoration-color 0.3s ease; + /* buttons */ + + button:focus { + @extend %tab-focus; } -} -/* buttons */ + /* code */ -button:focus { - @extend %tab-focus; -} + tt, + code, + kbd, + samp, + pre { + font-family: $monospace; + font-weight: $weight-5; + font-size: 1em; + } -/* code */ -tt, -code, -kbd, -samp, -pre { - font-family: $monospace; - font-weight: $weight-5; - font-size: 1em; -} + kbd { + background-color: $kbd-color-background; + color: $kbd-color-text; + border-radius: 0.25rem; + box-shadow: 0 2px 0 1px $kbd-color-border; + line-height: 1; + font-size: .75em; + padding: .15em .25em; + &:hover { + box-shadow: 0 1px 0 0.5px $kbd-color-border; + top: 1px; + } + } -kbd { - background-color: $kbd-color-background; - color: $kbd-color-text; - border-radius: 0.25rem; - box-shadow: 0 2px 0 1px $kbd-color-border; - line-height: 1; - font-size: .75em; - padding: .15em .25em; + pre { + overflow-x: auto; /* add scrollbars to wide code blocks*/ + } - &:hover { - box-shadow: 0 1px 0 0.5px $kbd-color-border; - top: 1px; - } -} - -pre { - overflow-x: auto; /* add scrollbars to wide code blocks*/ -} - -/* horizontal rule */ - -hr { - display: block; - margin: 1em 0; - border: 0; - border-top: 1px solid $border-color; -} - -/* lists */ - -ul, -ol { - margin-bottom: 1.9em; - font-weight: $weight-3; -} -ul li, -ol li { - margin-bottom: 0.5em; - font-size: $type-size-5; - list-style: 1.4em; -} - -li ul, -li ol { - margin-top: 0.5em; -} - -/* - Media and embeds - ========================================================================== */ + /* horizontal rule */ -/* Figures and images */ + hr { + display: block; + margin: 1em 0; + border: 0; + border-top: 1px solid $border-color; + } -figure { - display: -webkit-box; - display: flex; - -webkit-box-pack: justify; - justify-content: space-between; - -webkit-box-align: start; - align-items: flex-start; - flex-wrap: wrap; - margin: 2em 0; + /* lists */ - img, - iframe, - .fluid-width-video-wrapper { - margin-bottom: 1em; + ul, + ol { + margin-bottom: 1.9em; + font-weight: $weight-3; + } + ul li, + ol li { + margin-bottom: 0.3em; + font-size: $type-size-5; + list-style: 1.4em; } - img { - width: 100%; - border-radius: $border-radius; - -webkit-transition: $global-transition; - transition: $global-transition; + ul li::marker { + color: #9C939F; /* Change bullet color */ } - > a { - display: block; + li ul, + li ol { + margin-top: 0.5em; } - &.half { - > a, - > img { - @include breakpoint($small) { - width: calc(50% - 0.5em); - } + /* + Media and embeds + ========================================================================== */ + + /* Figures and images */ + + figure { + display: -webkit-box; + display: flex; + -webkit-box-pack: justify; + justify-content: space-between; + -webkit-box-align: start; + align-items: flex-start; + flex-wrap: wrap; + margin: 2em 0; + + img, + iframe, + .fluid-width-video-wrapper { + margin-bottom: 1em; } - figcaption { + img { width: 100%; + border-radius: $border-radius; + -webkit-transition: $global-transition; + transition: $global-transition; } - } - &.third { - > a, - > img { - @include breakpoint($small) { - width: calc(33.3333% - 0.5em); + > a { + display: block; + } + + &.half { + > a, + > img { + @include breakpoint($small) { + width: calc(50% - 0.5em); + } + } + + figcaption { + width: 100%; } } - figcaption { - width: 100%; + &.third { + > a, + > img { + @include breakpoint($small) { + width: calc(33.3333% - 0.5em); + } + } + + figcaption { + width: 100%; + } } } -} -/* Figure captions */ + /* Figure captions */ -figcaption { - margin-bottom: 0.5em; - color: $muted-text-color; - font-family: $caption-font-family; - font-size: $type-size-6; + figcaption { + margin-bottom: 0.5em; + color: $muted-text-color; + font-family: $caption-font-family; + font-size: $type-size-6; - a { - -webkit-transition: $global-transition; - transition: $global-transition; + a { + -webkit-transition: $global-transition; + transition: $global-transition; - &:hover { - color: $link-color-hover; + &:hover { + color: $link-color-hover; + } } } -} -/* Fix IE9 SVG bug */ + /* Fix IE9 SVG bug */ -svg:not(:root) { - overflow: hidden; -} + svg:not(:root) { + overflow: hidden; + } -/* - Navigation lists - ========================================================================== */ + /* + Navigation lists + ========================================================================== */ + + /** + * Removes margins, padding, and bullet points from navigation lists + * + * Example usage: + * + */ + + nav { + ul { + margin: 0; + padding: 0; + } -/** - * Removes margins, padding, and bullet points from navigation lists - * - * Example usage: - * - */ - -nav { - ul { - margin: 0; - padding: 0; - } + li { + list-style: none; + } - li { - list-style: none; - } + a { + text-decoration: none; + } - a { - text-decoration: none; - } + /* override white-space for nested lists */ + ul li, + ol li { + margin-bottom: 0; + } - /* override white-space for nested lists */ - ul li, - ol li { - margin-bottom: 0; + li ul, + li ol { + margin-top: 0; + } } - li ul, - li ol { - margin-top: 0; + /* + Global animation transition + ========================================================================== */ + + b, + i, + strong, + em, + blockquote, + p, + q, + span, + figure, + img, + h1, + h2, + header, + input, + a, + tr, + td, + form button, + input[type="submit"], + .btn, + .highlight, + .archive__item-teaser { + -webkit-transition: $global-transition; + transition: $global-transition; } -} - -/* - Global animation transition - ========================================================================== */ - -b, -i, -strong, -em, -blockquote, -p, -q, -span, -figure, -img, -h1, -h2, -header, -input, -a, -tr, -td, -form button, -input[type="submit"], -.btn, -.highlight, -.archive__item-teaser { - -webkit-transition: $global-transition; - transition: $global-transition; -} diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index acebdf60..772fbef8 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -2,660 +2,662 @@ SINGLE PAGE/POST ========================================================================== */ -#main { - @include clearfix; - margin-left: auto; - margin-right: auto; - padding-left: 1em; - padding-right: 1em; - -webkit-animation: $intro-transition; - animation: $intro-transition; - max-width: 100%; - -webkit-animation-delay: 0.15s; - animation-delay: 0.15s; - - @include breakpoint($x-large) { - max-width: $max-width; - } -} - -body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - min-height: 100vh; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} - -.initial-content, -.search-content { - flex: 1 0 auto; -} - -.page { - @include breakpoint($large) { - float: right; - width: calc(100% - #{$right-sidebar-width-narrow}); - padding-right: $right-sidebar-width-narrow; + #main { + @include clearfix; + margin-left: auto; + margin-right: auto; + padding-left: 1em; + padding-right: 1em; + -webkit-animation: $intro-transition; + animation: $intro-transition; + max-width: 100%; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + + @include breakpoint($x-large) { + max-width: $max-width; + } } - @include breakpoint($x-large) { - width: calc(100% - #{$right-sidebar-width}); - padding-right: $right-sidebar-width; + body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 100vh; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } - .page__inner-wrap { - float: left; - margin-top: 1em; - margin-left: 0; - margin-right: 0; - width: 100%; - clear: both; + .initial-content, + .search-content { + flex: 1 0 auto; + } - .page__content, - .page__meta, - .page__share { - position: relative; + .page { + @include breakpoint($large) { + float: right; + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-right: $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + padding-right: $right-sidebar-width; + } + + .page__inner-wrap { float: left; + margin-top: 1em; margin-left: 0; margin-right: 0; width: 100%; clear: both; - } - } -} - -.page__title { - margin-top: 0; - line-height: 1; - a { - color: $text-color; - text-decoration: none; + .page__content, + .page__meta, + .page__share { + position: relative; + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; + } + } } - & + .page__meta { - margin-top: -0.5em; - } -} + .page__title { + margin-top: 0; + line-height: 1; -.page__lead { - font-family: $global-font-family; - font-size: $type-size-5; - font-weight: $weight-3; -} + a { + color: $text-color; + text-decoration: none; + } -.page__content { - figure { - max-width: 35rem; + & + .page__meta { + margin-top: -0.5em; + } } - p, - li, - pre { - max-width: $medium; - font-weight: $weight-4; + .page__lead { + font-family: $global-font-family; + font-size: $type-size-5; + font-weight: $weight-3; } - h2 { - padding-bottom: 0.2em; - margin-bottom: 0; - } + .page__content { + figure { + max-width: 35rem; + } - h1, - h2, - h3, - h4, - h5, - h6 { - max-width: $large; + p, + li, + pre { + max-width: $medium; + font-weight: $weight-4; + } - .header-link { - position: relative; - left: 0.5em; - opacity: 0; - font-size: 0.8em; - -webkit-transition: opacity 0.2s ease-in-out 0.1s; - -moz-transition: opacity 0.2s ease-in-out 0.1s; - -o-transition: opacity 0.2s ease-in-out 0.1s; - transition: opacity 0.2s ease-in-out 0.1s; + h2 { + padding-bottom: 0.2em; + margin-bottom: 0.2em; + margin-top: 2.5em; + font-weight: $weight-5; //500 } - &:hover .header-link { - opacity: 1; + h1, + h2, + h3, + h4, + h5, + h6 { + max-width: $large; + + .header-link { + position: relative; + left: 0.5em; + opacity: 0; + font-size: 0.8em; + -webkit-transition: opacity 0.2s ease-in-out 0.1s; + -moz-transition: opacity 0.2s ease-in-out 0.1s; + -o-transition: opacity 0.2s ease-in-out 0.1s; + transition: opacity 0.2s ease-in-out 0.1s; + } + + &:hover .header-link { + opacity: 1; + } } - } - p, - dl { - font-size: $type-size-5; - line-height: 1.5em; - } + p, + dl { + font-size: $type-size-5; + line-height: 1.5em; + } - /* paragraph indents */ - p { - margin: 0 0 $indent-var; + /* paragraph indents */ + p { + margin: 0 0 $indent-var; - /* sibling indentation*/ - @if $paragraph-indent == true { - & + p { - text-indent: $indent-var; - margin-top: -($indent-var); + /* sibling indentation*/ + @if $paragraph-indent == true { + & + p { + text-indent: $indent-var; + margin-top: -($indent-var); + } } } - } - a:not(.btn) { - &:hover { - text-decoration: underline; + a:not(.btn) { + &:hover { + text-decoration: underline; - img { - box-shadow: 0 0 10px rgba(#000, 0.25); + img { + box-shadow: 0 0 10px rgba(#000, 0.25); + } } } - } - :not(pre) > code { - padding-top: 0.1rem; - padding-bottom: 0.1rem; - font-size: 0.8em; - background: $code-background-color; - border-radius: $border-radius; + :not(pre) > code { + padding-top: 0.1rem; + padding-bottom: 0.1rem; + font-size: 0.8em; + background: $code-background-color; + border-radius: $border-radius; - &::before, - &::after { - letter-spacing: -0.2em; - content: "\00a0"; /* non-breaking space*/ + &::before, + &::after { + letter-spacing: -0.2em; + content: "\00a0"; /* non-breaking space*/ + } } - } - dt { - margin-top: 1em; - font-family: $sans-serif; - font-weight: bold; - } + dt { + margin-top: 1em; + font-family: $sans-serif; + font-weight: bold; + } - dd { - margin-left: 1em; - font-family: $sans-serif; - font-size: $type-size-6; - } + dd { + margin-left: 1em; + font-family: $sans-serif; + font-size: $type-size-6; + } - .small { - font-size: $type-size-6; - } + .small { + font-size: $type-size-6; + } - /* blockquote citations */ - blockquote + .small { - margin-top: -1.5em; - padding-left: 1.25rem; + /* blockquote citations */ + blockquote + .small { + margin-top: -1.5em; + padding-left: 1.25rem; + } } -} -.page__hero { - position: relative; - margin-bottom: 2em; - @include clearfix; - -webkit-animation: $intro-transition; - animation: $intro-transition; - -webkit-animation-delay: 0.25s; - animation-delay: 0.25s; - - &--overlay { + .page__hero { position: relative; margin-bottom: 2em; - padding: 3em 0; @include clearfix; - background-size: cover; - background-repeat: no-repeat; - background-position: center; -webkit-animation: $intro-transition; animation: $intro-transition; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; - a { - color: #fff; - } + &--overlay { + position: relative; + margin-bottom: 2em; + padding: 3em 0; + @include clearfix; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + -webkit-animation: $intro-transition; + animation: $intro-transition; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; + + a { + color: #fff; + } - .wrapper { - padding-left: 1em; - padding-right: 1em; + .wrapper { + padding-left: 1em; + padding-right: 1em; - @include breakpoint($x-large) { - max-width: $x-large; + @include breakpoint($x-large) { + max-width: $x-large; + } } - } - .page__title, - .page__meta, - .page__lead, - .btn { - color: #fff; - text-shadow: 1px 1px 4px rgba(#000, 0.5); - } + .page__title, + .page__meta, + .page__lead, + .btn { + color: #fff; + text-shadow: 1px 1px 4px rgba(#000, 0.5); + } - .page__lead { - max-width: $medium; - } + .page__lead { + max-width: $medium; + } - .page__title { - font-size: $type-size-2; + .page__title { + font-size: $type-size-2; - @include breakpoint($small) { - font-size: $type-size-1; + @include breakpoint($small) { + font-size: $type-size-1; + } } } } -} - -.page__hero-image { - width: 100%; - height: auto; - -ms-interpolation-mode: bicubic; -} - -.page__hero-caption { - position: absolute; - bottom: 0; - right: 0; - margin: 0 auto; - padding: 2px 5px; - color: #fff; - font-family: $caption-font-family; - font-size: $type-size-7; - background: #000; - text-align: right; - z-index: 5; - opacity: 0.5; - border-radius: $border-radius 0 0 0; - - @include breakpoint($large) { - padding: 5px 10px; - } - a { - color: #fff; - text-decoration: none; + .page__hero-image { + width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; } -} -/* - Social sharing - ========================================================================== */ + .page__hero-caption { + position: absolute; + bottom: 0; + right: 0; + margin: 0 auto; + padding: 2px 5px; + color: #fff; + font-family: $caption-font-family; + font-size: $type-size-7; + background: #000; + text-align: right; + z-index: 5; + opacity: 0.5; + border-radius: $border-radius 0 0 0; -.page__share { - margin-top: 2em; - padding-top: 1em; - border-top: 1px solid $border-color; + @include breakpoint($large) { + padding: 5px 10px; + } - @include breakpoint(max-width $small) { - .btn span { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + a { + color: #fff; + text-decoration: none; } } -} -.page__share-title { - margin-bottom: 10px; - font-size: $type-size-6; - text-transform: uppercase; -} - -/* - Page meta - ========================================================================== */ + /* + Social sharing + ========================================================================== */ -.page__meta { - margin-top: 2em; - color: $muted-text-color; - font-family: $sans-serif; - font-size: $type-size-6; - - p { - margin: 0; + .page__share { + margin-top: 2em; + padding-top: 1em; + border-top: 1px solid $border-color; + + @include breakpoint(max-width $small) { + .btn span { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + } } - a { - color: inherit; + .page__share-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; } -} -.page__meta-title { - margin-bottom: 10px; - font-size: $type-size-6; - text-transform: uppercase; -} + /* + Page meta + ========================================================================== */ -.page__meta-sep::before { - content: "\2022"; - padding-left: 0.5em; - padding-right: 0.5em; -} + .page__meta { + margin-top: 2em; + color: $muted-text-color; + font-family: $sans-serif; + font-size: $type-size-6; -/* - Page taxonomy - ========================================================================== */ + p { + margin: 0; + } -.page__taxonomy { - .sep { - display: none; + a { + color: inherit; + } } - strong { - margin-right: 10px; + .page__meta-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; } -} - -.page__taxonomy-item { - display: inline-block; - margin-right: 5px; - margin-bottom: 8px; - padding: 5px 10px; - text-decoration: none; - border: 1px solid mix(#000, $border-color, 25%); - border-radius: $border-radius; - &:hover { - text-decoration: none; - color: $link-color-hover; + .page__meta-sep::before { + content: "\2022"; + padding-left: 0.5em; + padding-right: 0.5em; } -} -.taxonomy__section { - margin-bottom: 2em; - padding-bottom: 1em; + /* + Page taxonomy + ========================================================================== */ - &:not(:last-child) { - border-bottom: solid 1px $border-color; - } + .page__taxonomy { + .sep { + display: none; + } - .archive__item-title { - margin-top: 0; + strong { + margin-right: 10px; + } } - .archive__subtitle { - clear: both; - border: 0; - } + .page__taxonomy-item { + display: inline-block; + margin-right: 5px; + margin-bottom: 8px; + padding: 5px 10px; + text-decoration: none; + border: 1px solid mix(#000, $border-color, 25%); + border-radius: $border-radius; - + .taxonomy__section { - margin-top: 2em; + &:hover { + text-decoration: none; + color: $link-color-hover; + } } -} -.taxonomy__title { - margin-bottom: 0.5em; - color: $muted-text-color; -} + .taxonomy__section { + margin-bottom: 2em; + padding-bottom: 1em; + + &:not(:last-child) { + border-bottom: solid 1px $border-color; + } -.taxonomy__count { - color: $muted-text-color; -} + .archive__item-title { + margin-top: 0; + } -.taxonomy__index { - display: grid; - grid-column-gap: 2em; - grid-template-columns: repeat(2, 1fr); - margin: 1.414em 0; - padding: 0; - font-size: 0.75em; - list-style: none; + .archive__subtitle { + clear: both; + border: 0; + } - @include breakpoint($large) { - grid-template-columns: repeat(3, 1fr); + + .taxonomy__section { + margin-top: 2em; + } } - a { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - padding: 0.25em 0; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - color: inherit; - text-decoration: none; - border-bottom: 1px solid $border-color; - } -} - -.back-to-top { - display: block; - clear: both; - color: $muted-text-color; - font-size: 0.6em; - text-transform: uppercase; - text-align: right; - text-decoration: none; -} - -/* - Comments - ========================================================================== */ + .taxonomy__title { + margin-bottom: 0.5em; + color: $muted-text-color; + } -.page__comments { - float: left; - margin-left: 0; - margin-right: 0; - width: 100%; - clear: both; -} + .taxonomy__count { + color: $muted-text-color; + } -.page__comments-title { - margin-top: 2rem; - margin-bottom: 10px; - padding-top: 2rem; - font-size: $type-size-6; - border-top: 1px solid $border-color; - text-transform: uppercase; -} + .taxonomy__index { + display: grid; + grid-column-gap: 2em; + grid-template-columns: repeat(2, 1fr); + margin: 1.414em 0; + padding: 0; + font-size: 0.75em; + list-style: none; -.page__comments-form { - -webkit-transition: $global-transition; - transition: $global-transition; + @include breakpoint($large) { + grid-template-columns: repeat(3, 1fr); + } - &.disabled { - input, - button, - textarea, - label { - pointer-events: none; - cursor: not-allowed; - filter: alpha(opacity=65); - box-shadow: none; - opacity: 0.65; + a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.25em 0; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + color: inherit; + text-decoration: none; + border-bottom: 1px solid $border-color; } } -} -.comment { - @include clearfix(); - margin: 1em 0; - - &:not(:last-child) { - border-bottom: 1px solid $border-color; + .back-to-top { + display: block; + clear: both; + color: $muted-text-color; + font-size: 0.6em; + text-transform: uppercase; + text-align: right; + text-decoration: none; } -} -.comment__avatar-wrapper { - float: left; - width: 60px; - height: 60px; + /* + Comments + ========================================================================== */ - @include breakpoint($large) { - width: 100px; - height: 100px; + .page__comments { + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; } -} - -.comment__avatar { - width: 40px; - height: 40px; - border-radius: 50%; - @include breakpoint($large) { - width: 80px; - height: 80px; - padding: 5px; - border: 1px solid $border-color; + .page__comments-title { + margin-top: 2rem; + margin-bottom: 10px; + padding-top: 2rem; + font-size: $type-size-6; + border-top: 1px solid $border-color; + text-transform: uppercase; + } + + .page__comments-form { + -webkit-transition: $global-transition; + transition: $global-transition; + + &.disabled { + input, + button, + textarea, + label { + pointer-events: none; + cursor: not-allowed; + filter: alpha(opacity=65); + box-shadow: none; + opacity: 0.65; + } + } } -} -.comment__content-wrapper { - float: right; - width: calc(100% - 60px); + .comment { + @include clearfix(); + margin: 1em 0; - @include breakpoint($large) { - width: calc(100% - 100px); + &:not(:last-child) { + border-bottom: 1px solid $border-color; + } } -} -.comment__author { - margin: 0; + .comment__avatar-wrapper { + float: left; + width: 60px; + height: 60px; - a { - text-decoration: none; + @include breakpoint($large) { + width: 100px; + height: 100px; + } } -} -.comment__date { - @extend .page__meta; - margin: 0; + .comment__avatar { + width: 40px; + height: 40px; + border-radius: 50%; - a { - text-decoration: none; + @include breakpoint($large) { + width: 80px; + height: 80px; + padding: 5px; + border: 1px solid $border-color; + } } -} - -/* - Related - ========================================================================== */ -.page__related { - @include clearfix(); - float: left; - margin-top: 2em; - padding-top: 1em; - border-top: 1px solid $border-color; - - @include breakpoint($large) { + .comment__content-wrapper { float: right; - width: calc(100% - #{$right-sidebar-width-narrow}); + width: calc(100% - 60px); + + @include breakpoint($large) { + width: calc(100% - 100px); + } } - @include breakpoint($x-large) { - width: calc(100% - #{$right-sidebar-width}); + .comment__author { + margin: 0; + + a { + text-decoration: none; + } } - a { - color: inherit; - text-decoration: none; + .comment__date { + @extend .page__meta; + margin: 0; + + a { + text-decoration: none; + } } -} -.page__related-title { - margin-bottom: 10px; - font-size: $type-size-6; - text-transform: uppercase; -} + /* + Related + ========================================================================== */ -/* - Wide Pages - ========================================================================== */ + .page__related { + @include clearfix(); + float: left; + margin-top: 2em; + padding-top: 1em; + border-top: 1px solid $border-color; -.wide { - .page { @include breakpoint($large) { - padding-right: 0; + float: right; + width: calc(100% - #{$right-sidebar-width-narrow}); } @include breakpoint($x-large) { - padding-right: 0; + width: calc(100% - #{$right-sidebar-width}); + } + + a { + color: inherit; + text-decoration: none; } } - .page__content figure { - max-width: 40rem; + .page__related-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; } - .page__related { - @include breakpoint($large) { - padding-right: 0; + /* + Wide Pages + ========================================================================== */ + + .wide { + .page { + @include breakpoint($large) { + padding-right: 0; + } + + @include breakpoint($x-large) { + padding-right: 0; + } } - @include breakpoint($x-large) { - padding-right: 0; + .page__content figure { + max-width: 40rem; } - } -} -/* Media queries */ + .page__related { + @include breakpoint($large) { + padding-right: 0; + } -@media screen and (max-width: 768px) { - .page__content, .archive__item { - font-size: 1.1em + @include breakpoint($x-large) { + padding-right: 0; + } + } } - .element-item { - width:calc(90% - 10px)!important; - } + /* Media queries */ - .narrow p { - font-size: 0.9em!important; - } - .narrow { - font-size: 0.9em!important; - } + @media screen and (max-width: 768px) { + .page__content, .archive__item { + font-size: 1.1em + } - .page__meta.contributors { - font-size: .9em !important; - } + .element-item { + width:calc(90% - 10px)!important; + } - h2.archive__item-title, h3.archive__item-title { - font-size: 1.3em!important; - } + .narrow p { + font-size: 0.9em!important; + } + .narrow { + font-size: 0.9em!important; + } + .page__meta.contributors { + font-size: .9em !important; + } - .feature__item--center .archive__item-body, .archive__item-body { - width: 100%!important; - padding: 0!important; - } + h2.archive__item-title, h3.archive__item-title { + font-size: 1.3em!important; + } - .wide #main { - padding-left: 2em; - } - .feature__item { - width: 95%!important; - } - .cards { - margin-right: auto!important; - margin-left: auto!important; - } - .wide__p_text { - max-width: 90%!important; - } - ol { - font-size: 1em; + .feature__item--center .archive__item-body, .archive__item-body { + width: 100%!important; + padding: 0!important; + } + + .wide #main { + padding-left: 2em; + } + .feature__item { + width: 95%!important; + } + .cards { + margin-right: auto!important; + margin-left: auto!important; + } + + .wide__p_text { + max-width: 90%!important; + } + ol { + font-size: 1em; + } } -} -/* End media query 48em / 768 px */ + /* End media query 48em / 768 px */ -/* max 480 px */ -@media screen and (max-width: 480px) { - body{ - font-size: 1.4em; + /* max 480 px */ + @media screen and (max-width: 480px) { + body{ + font-size: 1.4em; + } } -}