starlight-cannoli-plugins 1.0.1 → 1.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-cannoli-plugins",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Starlight plugins for automatic sidebar generation and link validation",
   "license": "ISC",
   "main": "./dist/index.js",
@@ -18,10 +18,13 @@
     "./rehype-validate-links": {
       "import": "./dist/plugins/rehype-validate-links.js",
       "types": "./dist/plugins/rehype-validate-links.d.ts"
-    }
+    },
+    "./styles": "./src/styles/",
+    "./styles/*": "./src/styles/*"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/styles"
   ],
   "keywords": [
     "astro",

package/src/styles/custom.scss

@@ -0,0 +1,393 @@
+$info-color: #3b82f6;
+$warning-color: #f59e0b;
+
+html {
+  scroll-behavior: smooth;
+}
+
+// invert img.note-svg when on dark mode
+img.note-svg {
+  color-scheme: light dark;
+  padding-top: 1em;
+  padding-bottom: 1em;
+
+  html[data-theme="light"] & {
+    filter: none;
+  }
+
+  html:not([data-theme="light"]) & {
+    filter: invert(1) hue-rotate(180deg);
+  }
+}
+
+/************ Starlight Additions/Overrides ************/
+
+.sl-container:where(.astro-7nkwcw3z) {
+  max-width: 50rem;
+}
+
+.main-pane {
+  table > thead > tr > th {
+    border-bottom: 1px solid hsl(228, 6.2%, 47.3%);
+  }
+}
+
+starlight-toc {
+  a {
+    transition: transform 0.2s ease;
+    transform-origin: left;
+
+    span {
+      position: relative;
+      display: inline-block;
+      transition: color 0.2s ease;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: -8px;
+        top: 0;
+        bottom: 0;
+        width: 3px;
+        background-color: transparent;
+        border-radius: 2px;
+        transition: background-color 0.2s ease;
+      }
+    }
+  }
+
+  a[aria-current="true"] {
+    transform: scale(1.04);
+
+    span {
+      &::before {
+        background-color: var(--sl-color-text-accent);
+      }
+    }
+  }
+}
+
+#starlight__search mark {
+  color: hsl(339.8, 63.4%, 60.4%);
+}
+
+#starlight__mobile-toc {
+  > .dropdown {
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.6);
+  }
+}
+
+.expressive-code .copy > button {
+  height: 2rem;
+  width: 2rem;
+}
+
+/************ Details/Summary Styles ************/
+.main-pane details {
+  background: var(--sl-color-bg-nav);
+  border-radius: 4px;
+  padding: 0.3rem 0.6rem;
+  display: block;
+
+  &[open] {
+    max-width: 100%;
+
+    > div.details-wrapper {
+      overflow: auto;
+      max-height: 67vh;
+      padding-right: 0.8rem;
+      padding-left: 0.8rem;
+    }
+
+    p > img {
+      height: auto;
+      width: auto;
+    }
+  }
+}
+
+/********** MathJax/LaTeX Styling **********/
+mjx-container[jax="SVG"] {
+  overflow-x: auto;
+
+  &[display="true"] {
+    margin-top: 0.7em !important;
+    margin-bottom: 0.7em !important;
+    padding-top: 0.3em;
+    padding-bottom: 0.3em;
+  }
+
+  > svg {
+    display: unset;
+    max-width: unset;
+    height: unset;
+  }
+}
+
+/********** TikZ SVG Styling **********/
+script[type="text/tikz"] {
+  display: block;
+}
+
+div > div[class="page"] > svg {
+  color-scheme: light dark;
+
+  html[data-theme="light"] & {
+    stroke: currentColor;
+    fill: currentColor;
+  }
+
+  html:not([data-theme="light"]) & {
+    stroke: white;
+    fill: white;
+    filter: invert(1) hue-rotate(180deg);
+  }
+}
+
+/********** Mimic Bootstrap Class Utilities **********/
+.visually-hidden {
+  display: none !important;
+}
+
+.visibility-hidden {
+  visibility: hidden !important;
+}
+
+.visible {
+  display: block !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.justify-content-evenly {
+  justify-content: space-evenly !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.align-items-start {
+  align-items: flex-start !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+
+  .flex-fill {
+    flex: 1 1 auto;
+    margin-top: unset;
+  }
+
+  .flex-fill.flex-code {
+    min-width: 0;
+  }
+}
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+/* Overflow utilities */
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-y-auto {
+  overflow-y: auto !important;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden !important;
+}
+
+/* Padding and Margin Utilities */
+/* Exposes utility classes like .p-0, .p-1, .pt-2, .mb-3, ..., .m-6, .gap-6 */
+
+$spacings: (
+  p: padding,
+  pt: padding-top,
+  pb: padding-bottom,
+  ps: padding-left,
+  pe: padding-right,
+  m: margin,
+  mt: margin-top,
+  mb: margin-bottom,
+  ms: margin-left,
+  me: margin-right,
+  gap: gap,
+  gap-row: row-gap,
+  gap-col: column-gap,
+);
+
+$axis-spacings: (
+  px: (
+    padding-left,
+    padding-right,
+  ),
+  py: (
+    padding-top,
+    padding-bottom,
+  ),
+  mx: (
+    margin-left,
+    margin-right,
+  ),
+  my: (
+    margin-top,
+    margin-bottom,
+  ),
+);
+
+@each $class, $property in $spacings {
+  .#{$class}-0 {
+    #{$property}: 0 !important;
+  }
+
+  $scalar: 0.125;
+  $accumulated: 0;
+
+  @for $i from 1 through 6 {
+    $scalar: $scalar + ($i % 2) * $scalar;
+    $accumulated: $accumulated + $scalar;
+
+    .#{$class}-#{$i} {
+      #{$property}: #{$accumulated}rem !important;
+    }
+  }
+}
+
+/* Axis-specific spacing utilities (-x and -y) */
+@each $class, $properties in $axis-spacings {
+  .#{$class}-0 {
+    @each $property in $properties {
+      #{$property}: 0 !important;
+    }
+  }
+
+  $scalar: 0.125;
+  $accumulated: 0;
+
+  @for $i from 1 through 6 {
+    $scalar: $scalar + ($i % 2) * $scalar;
+    $accumulated: $accumulated + $scalar;
+
+    .#{$class}-#{$i} {
+      @each $property in $properties {
+        #{$property}: #{$accumulated}rem !important;
+      }
+    }
+  }
+}
+
+/************ Custom Styles ************/
+
+.highlight-green,
+.highlight-red {
+  padding: 5px;
+}
+
+.highlight-green {
+  background: #7de37d34;
+}
+
+.highlight-red {
+  background: #f7535b46;
+}
+
+.admin-only {
+  display: none;
+}
+
+.note-indicator {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: $info-color;
+  margin-right: 6px;
+  vertical-align: middle;
+  opacity: 0.6;
+}
+
+div.note {
+  display: none;
+  border: 3px solid $warning-color;
+  border-left: 6px solid $warning-color;
+  padding: 12px;
+  border-radius: 4px;
+  margin: 10px 0;
+
+  &::before {
+    content: "Personal Note";
+    display: block;
+    font-weight: bold;
+    color: $info-color;
+    margin-bottom: 8px;
+    font-size: 0.95em;
+  }
+}
+
+/********** Toggle Checkbox Styles **********/
+#toggle-all-details-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  input[type="checkbox"] {
+    position: relative;
+    appearance: none;
+    width: 1.2em;
+    height: 1.2em;
+    border: 2px solid currentColor;
+    border-radius: 2px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease;
+
+    &:checked {
+      background-color: var(--sl-color-accent);
+      border-color: var(--sl-color-accent);
+
+      &::after {
+        content: "✓";
+        color: white;
+        font-size: 0.8em;
+        font-weight: bold;
+      }
+    }
+  }
+}