Use Sass-style comments in Furo #428
Conversation
| @@ -18,25 +18,35 @@ body { | |||
| border: 1px solid var(--qiskit-color-admonition-info--background); | |||
| } | |||
|
|
|||
| /* Admonitions are complex because they use a 3px left border with a different color than the rest | |||
There was a problem hiding this comment.
This comment is moved below because I moved the rules for p.topic-title::before and p.topic-title higher in the file. That will unblock the follow up PR.
| @@ -1,50 +1,54 @@ | |||
| // By default, Furo expands the left and right sidebars when the page width increases, but it | |||
There was a problem hiding this comment.
This comment was moved from down below in the file. I realize it makes sense to be document-level since it explains our overall strategy for the page layout.
No changes made, other than where I comment below.
| // sidebar from being split way too far from the page content itself. | ||
| // | ||
| // The easiest way to achieve this is using flexbox, given that Furo already uses it. We keep | ||
| // Furo's default values for `width` and `min-width` for the .sidebar-drawer because it's necessary |
There was a problem hiding this comment.
for the .sidebar-drawer is new.
| .qiskit-translations-header-container label, | ||
| .qiskit-previous-releases-header-container label { | ||
| cursor: pointer; | ||
| } |
There was a problem hiding this comment.
Moved a little lower
| * -------------------------------------------------------------------------------------- */ | ||
| // -------------------------------------------------------------------------------------- | ||
| // Translations | ||
| // -------------------------------------------------------------------------------------- |
There was a problem hiding this comment.
I reordered code in the below two sections. No changes made, other than to use // comments.
| --color-table-header-background: #dde1e6; | ||
| } | ||
|
|
||
| /* Because we disable drop shadows, restore borders for tables by overriding rules that disabled | ||
| * them. */ | ||
| // Add a border to the top of the table so that tables without headers have a border. |
There was a problem hiding this comment.
This rule was moved higher up in the file.
| node-version = "18.16.0" | ||
| node-version = "18.16.1" |
There was a problem hiding this comment.
CI failed because it couldn't download Node 18.16.0. 18.16.1 is the newest release so I figured I'd upgrade while at it.
There was a problem hiding this comment.
I found out that it's preferred to use ::before for clarity, e.g. footer::before rather than footer:before.
TIL; more info.
Otherwise if it's just moving code around then LGTM.
CSS didn't let us use
//style comments, but SCSS (Sassy CSS) does. These comments are simpler to write and read.Uses
::beforerather than:beforeI found out that it's preferred to use
::beforefor clarity, e.g.footer::beforerather thanfooter:before.Moves some related rules closer together
Some code was moved closer to its relevant rules. This is prework for an upcoming refactor to use Sass nesting.
No changes were made -- it only moves the code.