| | |
| | | @use "./custom.scss"; |
| | | @use "./syntax.scss"; |
| | | @use "./callouts.scss"; |
| | | @use "./custom.scss"; |
| | | @use "./variables.scss" as *; |
| | | |
| | | html { |
| | |
| | | .math { |
| | | color: var(--darkgray); |
| | | fill: var(--darkgray); |
| | | overflow-wrap: anywhere; |
| | | hyphens: auto; |
| | | } |
| | | |
| | | .math { |
| | |
| | | |
| | | .page { |
| | | @media all and (max-width: $fullPageWidth) { |
| | | margin: 0 5vw; |
| | | } |
| | | |
| | | & p { |
| | | overflow-wrap: anywhere; |
| | | margin: 0 auto; |
| | | padding: 0 1rem; |
| | | max-width: 800px; |
| | | } |
| | | |
| | | & article { |
| | |
| | | & li:has(> input[type="checkbox"]) { |
| | | list-style-type: none; |
| | | padding-left: 0; |
| | | margin-left: -1.4rem; |
| | | } |
| | | |
| | | & li:has(> input[type="checkbox"]:checked) { |
| | | text-decoration: line-through; |
| | | text-decoration-color: var(--gray); |
| | | color: var(--gray); |
| | | } |
| | | |
| | | & li > * { |
| | | margin: 0; |
| | | margin-top: 0; |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | |
| | |
| | | & .sidebar.left { |
| | | left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); |
| | | @media all and (max-width: $fullPageWidth) { |
| | | gap: 0rem; |
| | | gap: 0; |
| | | align-items: center; |
| | | } |
| | | } |
| | |
| | | input[type="checkbox"] { |
| | | transform: translateY(2px); |
| | | color: var(--secondary); |
| | | border-color: var(--lightgray); |
| | | border: 1px solid var(--lightgray); |
| | | border-radius: 3px; |
| | | background-color: var(--light); |
| | | position: relative; |
| | | margin-inline-end: 0.2rem; |
| | | margin-inline-start: -1.4rem; |
| | | appearance: none; |
| | | width: 16px; |
| | | height: 16px; |
| | | |
| | | &:checked { |
| | | border-color: var(--secondary); |
| | | background-color: var(--secondary); |
| | | |
| | | &::after { |
| | | content: ""; |
| | | position: absolute; |
| | | left: 4px; |
| | | top: 1px; |
| | | width: 4px; |
| | | height: 8px; |
| | | display: block; |
| | | border: solid var(--light); |
| | | border-width: 0 2px 2px 0; |
| | | transform: rotate(45deg); |
| | | } |
| | | } |
| | | } |
| | | |
| | | blockquote { |
| | |
| | | |
| | | h2 { |
| | | font-size: 1.4rem; |
| | | opacity: 0.95; |
| | | margin-top: 2.4rem; |
| | | } |
| | | |
| | | h3 { |
| | | font-size: 1.12rem; |
| | | margin-top: 2.12rem; |
| | | opacity: 0.9; |
| | | } |
| | | |
| | | h4, |
| | |
| | | h6 { |
| | | font-size: 1rem; |
| | | margin-top: 2rem; |
| | | opacity: 0.85; |
| | | } |
| | | |
| | | div[data-rehype-pretty-code-fragment] { |
| | |
| | | |
| | | &:has(> code.mermaid) { |
| | | border: none; |
| | | position: relative; |
| | | } |
| | | |
| | | & > code { |
| | |
| | | } |
| | | |
| | | table { |
| | | margin: 1rem 0; |
| | | border: 1px solid var(--gray); |
| | | margin: 1rem; |
| | | padding: 1.5rem; |
| | | border-collapse: collapse; |
| | | & > * { |
| | | line-height: 2rem; |
| | | } |
| | | } |
| | | |
| | | td, |
| | | th { |
| | | text-align: left; |
| | | padding: 0.4rem 1rem; |
| | | border-bottom: 2px solid var(--gray); |
| | | } |
| | | |
| | | td { |
| | | padding: 0.2rem 1rem; |
| | | border: 1px solid var(--gray); |
| | | } |
| | | |
| | | tr { |
| | | border-bottom: 1px solid var(--lightgray); |
| | | &:last-child { |
| | | border-bottom: none; |
| | | } |
| | | } |
| | | |
| | | img { |