15 Commits

Author SHA1 Message Date
Bob van de Vijver
9aa1eeac3c
Fix Sass mixed declarations (#1495)
As requested (https://github.com/just-the-docs/just-the-docs/issues/1493#issuecomment-2227203330), a PR to resolve the Sass deprecations. Seems to solve all deprecations I am seeing, and I am not seeing any weird changes in the resulting CSS file.

Closes #1493.

<details>
<summary>Git diff of generated CSS file</summary>


```patch
diff --git a/just-the-docs-default.css b/just-the-docs-default.css.new
index fe42b2d..50a103b 100644
--- a/just-the-docs-default.css
+++ b/just-the-docs-default.css.new
@@ -591,9 +591,11 @@ template {
 }

 html {
-  font-size: 0.875rem !important;
   scroll-behavior: smooth;
 }
+html {
+  font-size: 0.875rem !important;
+}
 @media (min-width: 31.25rem) {
   html {
     font-size: 1rem !important;
@@ -715,25 +717,50 @@ blockquote {
     min-width: 16.5rem;
   }
 }
-
 @media (min-width: 50rem) {
-  .main {
-    position: relative;
-    max-width: 50rem;
+  .side-bar + .main {
     margin-left: 15.5rem;
   }
 }
 @media (min-width: 66.5rem) {
-  .main {
+  .side-bar + .main {
     margin-left: max(16.5rem, (100% - 66.5rem) / 2 + 16.5rem);
   }
 }
+.side-bar + .main .main-header {
+  display: none;
+  background-color: #f5f6fa;
+}
+@media (min-width: 50rem) {
+  .side-bar + .main .main-header {
+    display: flex;
+    background-color: #fff;
+  }
+}
+.side-bar + .main .main-header.nav-open {
+  display: block;
+}
+@media (min-width: 50rem) {
+  .side-bar + .main .main-header.nav-open {
+    display: flex;
+  }
+}
+
+.main {
+  margin: auto;
+}
+@media (min-width: 50rem) {
+  .main {
+    position: relative;
+    max-width: 50rem;
+  }
+}

 .main-content-wrap {
-  padding-right: 1rem;
-  padding-left: 1rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
 }
 @media (min-width: 50rem) {
   .main-content-wrap {
@@ -750,24 +777,13 @@ blockquote {

 .main-header {
   z-index: 0;
-  display: none;
-  background-color: #f5f6fa;
+  border-bottom: 1px solid #eeebee;
 }
 @media (min-width: 50rem) {
   .main-header {
     display: flex;
     justify-content: space-between;
     height: 3.75rem;
-    background-color: #fff;
-    border-bottom: 1px solid #eeebee;
-  }
-}
-.main-header.nav-open {
-  display: block;
-}
-@media (min-width: 50rem) {
-  .main-header.nav-open {
-    display: flex;
   }
 }

@@ -814,8 +830,6 @@ blockquote {
 }

 .site-title {
-  padding-right: 1rem;
-  padding-left: 1rem;
   flex-grow: 1;
   display: flex;
   height: 100%;
@@ -823,7 +837,8 @@ blockquote {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   color: #27262b;
-  font-size: 1.125rem !important;
+  padding-right: 1rem;
+  padding-left: 1rem;
 }
 @media (min-width: 50rem) {
   .site-title {
@@ -831,6 +846,9 @@ blockquote {
     padding-left: 2rem;
   }
 }
+.site-title {
+  font-size: 1.125rem !important;
+}
 @media (min-width: 31.25rem) {
   .site-title {
     font-size: 1.5rem !important;
@@ -877,15 +895,14 @@ body {
 }

 .site-footer {
-  padding-right: 1rem;
-  padding-left: 1rem;
   position: absolute;
   bottom: 0;
   left: 0;
   padding-top: 1rem;
   padding-bottom: 1rem;
   color: #959396;
-  font-size: 0.6875rem !important;
+  padding-right: 1rem;
+  padding-left: 1rem;
 }
 @media (min-width: 50rem) {
   .site-footer {
@@ -893,6 +910,9 @@ body {
     padding-left: 2rem;
   }
 }
+.site-footer {
+  font-size: 0.6875rem !important;
+}
 @media (min-width: 31.25rem) {
   .site-footer {
     font-size: 0.75rem !important;
@@ -948,6 +968,8 @@ body {
   color: #959396;
   content: counter(step-counter);
   counter-increment: step-counter;
+}
+.main-content ol > li::before {
   font-size: 0.75rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1150,10 +1172,12 @@ body {
   list-style: none;
 }
 .nav-list .nav-list-item {
-  font-size: 0.875rem !important;
   position: relative;
   margin: 0;
 }
+.nav-list .nav-list-item {
+  font-size: 0.875rem !important;
+}
 @media (min-width: 31.25rem) {
   .nav-list .nav-list-item {
     font-size: 1rem !important;
@@ -1246,6 +1270,8 @@ body {
   text-align: start;
   text-transform: uppercase;
   border-bottom: 1px solid #eeebee;
+}
+.nav-category {
   font-size: 0.6875rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1280,6 +1306,8 @@ body {
 .aux-nav {
   height: 100%;
   overflow-x: auto;
+}
+.aux-nav {
   font-size: 0.6875rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1320,6 +1348,8 @@ body {

 .breadcrumb-nav-list-item {
   display: table-cell;
+}
+.breadcrumb-nav-list-item {
   font-size: 0.6875rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1341,11 +1371,14 @@ body {
   content: "";
 }

+h1,
+.text-alpha {
+  font-weight: 300;
+}
 h1,
 .text-alpha {
   font-size: 2rem !important;
   line-height: 1.25;
-  font-weight: 300;
 }
 @media (min-width: 31.25rem) {
   h1,
@@ -1381,11 +1414,14 @@ h3,

 h4,
 .text-delta {
-  font-size: 0.6875rem !important;
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
+h4,
+.text-delta {
+  font-size: 0.6875rem !important;
+}
 @media (min-width: 31.25rem) {
   h4,
   .text-delta {
@@ -1454,9 +1490,12 @@ h6,
   text-transform: uppercase;
   vertical-align: middle;
   background-color: #2869e6;
-  font-size: 0.6875rem !important;
   border-radius: 12px;
 }
+.label:not(g),
+.label-blue:not(g) {
+  font-size: 0.6875rem !important;
+}
 @media (min-width: 31.25rem) {
   .label:not(g),
   .label-blue:not(g) {
@@ -1752,6 +1791,8 @@ h6,
   padding-left: 0;
   margin-bottom: 0.25rem;
   list-style: none;
+}
+.search-results-list {
   font-size: 0.875rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1804,6 +1845,8 @@ h6,
 }
 .search-result-doc.search-result-doc-parent {
   opacity: 0.5;
+}
+.search-result-doc.search-result-doc-parent {
   font-size: 0.75rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1844,6 +1887,8 @@ h6,
   color: #959396;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+.search-result-rel-url {
   font-size: 0.5625rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1862,6 +1907,8 @@ h6,
   word-wrap: break-word;
   border-left: 1px solid;
   border-left-color: #eeebee;
+}
+.search-result-previews {
   font-size: 0.6875rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1889,6 +1936,8 @@ h6,

 .search-no-result {
   padding: 0.5rem 0.75rem;
+}
+.search-no-result {
   font-size: 0.75rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1998,13 +2047,16 @@ table {

 th,
 td {
-  font-size: 0.75rem !important;
   min-width: 7.5rem;
   padding: 0.5rem 0.75rem;
   background-color: #fff;
   border-bottom: 1px solid rgba(238, 235, 238, 0.5);
   border-left: 1px solid #eeebee;
 }
+th,
+td {
+  font-size: 0.75rem !important;
+}
 @media (min-width: 31.25rem) {
   th,
   td {
@@ -2135,12 +2187,15 @@ figure.highlight :not(pre) > code {
 }
 .highlight .table-wrapper td,
 .highlight .table-wrapper pre {
-  font-size: 0.6875rem !important;
   min-width: 0;
   padding: 0;
   background-color: #f5f6fa;
   border: 0;
 }
+.highlight .table-wrapper td,
+.highlight .table-wrapper pre {
+  font-size: 0.6875rem !important;
+}
 @media (min-width: 31.25rem) {
   .highlight .table-wrapper td,
   .highlight .table-wrapper pre {
```
</details>
2024-08-12 11:34:20 -07:00
Eric Knibbe
49d004f271
Fixes minor spacing and comment nits (#1128)
This PR simply fixes a few spacing and comment nits I found.
2023-01-10 11:23:21 -08:00
Matt Wang
c2ec3d89c2
Update Stylelint to v14, extend SCSS plugins, remove primer-* configs, resolve issues (#821)
This is a catch-all PR that modernizes and updates our Stylelint config, and resolves all open issues. This is a pretty big change - so I want to update all of our related dependencies in lockstep.

In particular, this PR

- [x] updates stylelint to `v14`
- [x] adds in the standard stylelint config for SCSS (`stylelint-config-standard-scss`)
- [x] swaps out `stylelint-config-prettier` for `stylelint-config-prettier-scss`
- [x] ~~properly update `@primer`-related plugins:~~ completely remove `primer` from our configuration
- [x] autofix, manually resolve, or disable all newly-introduced lint errors; **I've avoided manually resolving errors that would be a behavioural change**
- [x] re-runs `npm run format`

See the "next steps" section on some extra thoughts on disabling errors.

(implicitly, I'm also using node 16/the new package-lock format).

### disabling rules and next steps

I've introduced several new disabled rules. Let me quickly explain what's going on; there are two categories of rules I've disabled:

1. rules that were temporary disables; they were frequent enough that I couldn't manually resolve them, but should be simple. **I plan on opening issues to re-enable each of these rules**, just after this PR
    - `declaration-block-no-redundant-longhand-properties`: this is just tedious and error-prone
    - `no-descending-specificity`: this one is tricky since it could have impacts on the cascade (though that seems unlikely)
    - `scss/no-global-function-names`: I think we need to [import map and then use `map.get`](https://stackoverflow.com/questions/64210390/sass-map-get-doesnt-work-map-get-does-what-gives), but I'll leave this as out of scope for now
2. rules that are long-term disables; due to the SASS-based nature of our theme, I think we'll keep these in limbo
    - `alpha-value-notation` causes problems with SASS using the `modern` syntax - literals like `50%` are not properly interpolated, and they cause formatting issues on the site
    - `color-function-notation` also causes problems with SASS, but in this case the `modern` syntax breaks SASS compilation; we're not alone (see this [SO post](https://stackoverflow.com/questions/71805735/error-function-rgb-is-missing-argument-green-in-sass)). 

In addition, we have many inline `stylelint-disable` comments. I'd open a separate issue to audit them, especially since I think some disables are unnecessary.

### on Primer 

**note: there hasn't been much other discussion, so I'm going to remove primer's stylelint config.**

If I do add `@primer/stylelint-config`, I get *a ton* of errors about now using `@primer`'s in-built SCSS variables. I imagine that we probably won't want to use these presets (though I could be wrong). In that case, I think we could either:

1. disable all of those rules
4. not use `@primer/stylelint-config`, since we're not actually using primer, and shift back to the standard SCSS config provided by Stylelint

~~Any thoughts here? I also don't have the original context as to why we do use the primer rules, perhaps @pmarsceill can chime in?~~
2022-07-25 09:18:13 -07:00
Alyssa Ross
3ca57e3b0d
Minor style fixes for jekyll-asciidoc (#829)
I have a site whose content is written in AsciiDoc, using the [jekyll-asciidoc][] plugin.

Just the Docs works great, but there are just two minor styling glitches I've noticed:

The first is that Just the Docs' CSS doesn't understand the code block markup jekyll-asciidoc produces.  It's not too different though, so it's very easily fixed.

The second is that jekyll-asciidoc generates `div.sect(𝑛 − 1)` elements around headings of type `h𝑛`, that enclose all the heading and all the content after it until the next heading of greater or equal rank.

This means that headings are _always_ first children in AsciiDoc output, which meant the wrong margins were applied to most headings. To fix this, we need to only reduce the margin of first-child headings nested directly below the .main-content element, and headings nested directly below AsciiDoc `.sect𝑛` elements that are themselves first children.

With these two small changes, my site looks perfect, and the styles look exactly the same as on Just the Docs' own documentation.

[jekyll-asciidoc]: https://github.com/asciidoctor/jekyll-asciidoc
2022-07-12 15:15:05 -07:00
Peter Mosses
70b34f01f7
Combination (#578)
This PR combines (and resolves conflicts between) #448, #463, #466, #494, #495, #496, #498, and #572. 

The main aim is to facilitate use of several of the implemented features _together_, when using the fork as a remote theme. It should also simplify merging the included PRs into a future release.

The branch [combination-rec-nav](https://github.com/pdmosses/just-the-docs/tree/combination-rec-nav) adds [multi-level navigation](https://github.com/pmarsceill/just-the-docs/pull/462) and (NEW:) [sibling links](https://github.com/pmarsceill/just-the-docs/pull/394) to the branch used for this PR. It includes updated [documentation for the navigation structure](https://pdmosses.github.io/just-the-docs/docs/navigation-structure/), and reorganised and extended [navigation tests](https://pdmosses.github.io/just-the-docs/tests/navigation/). The documentation and the tests can be browsed at the (temporary) [website published from the combination-rec-nav branch](https://pdmosses.github.io/just-the-docs/).

_Caveat:_ The changes to v0.3.3 in this PR and #462 have not yet been reviewed or approved, and may need updating before merging into a release of the theme. If you use a branch from a PR as a remote theme, there is a risk of such updates affecting your website. Moreover, these branches are likely to be deleted after they have been merged. To avoid  such problems, you could copy the branch that you want to use to your own fork of the theme.

Co-authored-by: Matt Wang <matt@matthewwang.me>
2022-07-04 12:15:10 -07:00
PLanCompS
98b22be66b Inhibit text-transform for code in h4
Tested in `index-test.md`

Fixes #403
2020-08-06 10:04:43 +02:00
Patrick Marsceill
6345c61aae
Clean up typography updates 2020-05-05 12:48:45 -04:00
Patrick Marsceill
beb88adf5f
Typography fixes 2020-05-01 17:32:33 -04:00
Patrick Marsceill
411c508806
Add additional layout and text justifcations 2020-05-01 15:32:42 -04:00
Patrick Marsceill
a4da666d2a
Add new liting rule disables 2019-05-13 16:55:22 -04:00
Patrick Marsceill
8968860b4b
Ignore node modules 2018-11-15 16:17:29 -05:00
Patrick Marsceill
2d1305045e
Typography utils 2018-10-23 11:41:06 -04:00
Patrick Marsceill
e581397758
Initial commit 2017-03-26 21:09:19 -04:00
Patrick Marsceill
594385ae7b
initial commit 2017-03-24 09:47:37 -04:00
Patrick Marsceill
b7b0d0d7bf
Initial commit 2017-03-09 13:16:08 -05:00