fluxgrid-css 1.0.0

package/src/css/print.css

@@ -0,0 +1,106 @@
+@media print {
+  .c-print-hidden {
+    display: none !important;
+  }
+  .c-print-block {
+    display: block !important;
+  }
+  .c-print-inline {
+    display: inline !important;
+  }
+  .c-print-inline-block {
+    display: inline-block !important;
+  }
+
+  .c-print-break-before {
+    break-before: page;
+  }
+  .c-print-break-after {
+    break-after: page;
+  }
+  .c-print-break-inside-avoid {
+    break-inside: avoid;
+  }
+  .c-print-break-inside {
+    break-inside: auto;
+  }
+
+  .c-print-color-adjust-exact {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+  .c-print-color-adjust-economy {
+    print-color-adjust: economy;
+    -webkit-print-color-adjust: economy;
+  }
+
+  .c-print-m-0 {
+    margin: 0 !important;
+  }
+  .c-print-p-0 {
+    padding: 0 !important;
+  }
+  .c-print-shadow-none {
+    box-shadow: none !important;
+  }
+  .c-print-border-none {
+    border: none !important;
+  }
+  .c-print-bg-white {
+    background: white !important;
+  }
+  .c-print-text-black {
+    color: black !important;
+  }
+  .c-print-text-sm {
+    font-size: 0.75rem !important;
+  }
+
+  .c-print-w-full {
+    width: 100% !important;
+  }
+  .c-print-max-w-full {
+    max-width: 100% !important;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  img {
+    page-break-inside: avoid;
+    max-width: 100% !important;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+
+  p,
+  blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+
+  @page {
+    margin: 1cm;
+  }
+}
+
+.c-print-only {
+  display: none;
+}
+
+@media print {
+  .c-print-only {
+    display: block;
+  }
+}

package/src/css/reset.css

@@ -0,0 +1,99 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+img,
+picture,
+video,
+canvas,
+svg,
+iframe {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select,
+optgroup {
+  font: inherit;
+  color: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+button {
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+fieldset {
+  border: none;
+}
+
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid currentColor;
+  margin: 0;
+}
+
+summary {
+  cursor: pointer;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:focus-visible {
+  outline: 2px solid var(--c-focus, #6c63ff);
+  outline-offset: 2px;
+}

package/src/css/scroll.css

@@ -0,0 +1,188 @@
+.c-scroll-auto {
+  scroll-behavior: auto;
+}
+.c-scroll-smooth {
+  scroll-behavior: smooth;
+}
+
+.c-scroll-m-0 {
+  scroll-margin: 0;
+}
+.c-scroll-m-4 {
+  scroll-margin: 16px;
+}
+.c-scroll-m-8 {
+  scroll-margin: 32px;
+}
+.c-scroll-m-16 {
+  scroll-margin: 64px;
+}
+.c-scroll-mt-0 {
+  scroll-margin-top: 0;
+}
+.c-scroll-mt-4 {
+  scroll-margin-top: 16px;
+}
+.c-scroll-mt-8 {
+  scroll-margin-top: 32px;
+}
+.c-scroll-mt-16 {
+  scroll-margin-top: 64px;
+}
+.c-scroll-mt-20 {
+  scroll-margin-top: 80px;
+}
+
+.c-scroll-p-0 {
+  scroll-padding: 0;
+}
+.c-scroll-p-4 {
+  scroll-padding: 16px;
+}
+.c-scroll-p-8 {
+  scroll-padding: 32px;
+}
+.c-scroll-pt-0 {
+  scroll-padding-top: 0;
+}
+.c-scroll-pt-4 {
+  scroll-padding-top: 16px;
+}
+.c-scroll-pt-8 {
+  scroll-padding-top: 32px;
+}
+.c-scroll-pt-16 {
+  scroll-padding-top: 64px;
+}
+
+.c-snap-none {
+  scroll-snap-type: none;
+}
+.c-snap-x {
+  scroll-snap-type: x mandatory;
+}
+.c-snap-x-prox {
+  scroll-snap-type: x proximity;
+}
+.c-snap-y {
+  scroll-snap-type: y mandatory;
+}
+.c-snap-y-prox {
+  scroll-snap-type: y proximity;
+}
+.c-snap-both {
+  scroll-snap-type: both mandatory;
+}
+.c-snap-both-prox {
+  scroll-snap-type: both proximity;
+}
+
+.c-snap-start {
+  scroll-snap-align: start;
+}
+.c-snap-end {
+  scroll-snap-align: end;
+}
+.c-snap-center {
+  scroll-snap-align: center;
+}
+.c-snap-align-none {
+  scroll-snap-align: none;
+}
+
+.c-snap-normal {
+  scroll-snap-stop: normal;
+}
+.c-snap-always {
+  scroll-snap-stop: always;
+}
+
+.c-overscroll-auto {
+  overscroll-behavior: auto;
+}
+.c-overscroll-contain {
+  overscroll-behavior: contain;
+}
+.c-overscroll-none {
+  overscroll-behavior: none;
+}
+.c-overscroll-x-auto {
+  overscroll-behavior-x: auto;
+}
+.c-overscroll-x-contain {
+  overscroll-behavior-x: contain;
+}
+.c-overscroll-x-none {
+  overscroll-behavior-x: none;
+}
+.c-overscroll-y-auto {
+  overscroll-behavior-y: auto;
+}
+.c-overscroll-y-contain {
+  overscroll-behavior-y: contain;
+}
+.c-overscroll-y-none {
+  overscroll-behavior-y: none;
+}
+
+.c-touch-auto {
+  touch-action: auto;
+}
+.c-touch-none {
+  touch-action: none;
+}
+.c-touch-pan-x {
+  touch-action: pan-x;
+}
+.c-touch-pan-y {
+  touch-action: pan-y;
+}
+.c-touch-pan-left {
+  touch-action: pan-left;
+}
+.c-touch-pan-right {
+  touch-action: pan-right;
+}
+.c-touch-pan-up {
+  touch-action: pan-up;
+}
+.c-touch-pan-down {
+  touch-action: pan-down;
+}
+.c-touch-pinch-zoom {
+  touch-action: pinch-zoom;
+}
+.c-touch-manipulation {
+  touch-action: manipulation;
+}
+
+.c-scrollbar-none {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.c-scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
+.c-scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--c-gray-300) transparent;
+}
+.c-scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.c-scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.c-scrollbar-thin::-webkit-scrollbar-thumb {
+  background: var(--c-gray-300);
+  border-radius: 9999px;
+}
+.c-scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: var(--c-gray-400);
+}
+
+.c-scrollbar-auto {
+  scrollbar-width: auto;
+}

package/src/css/sizing.css

@@ -0,0 +1,352 @@
+.c-w-0 {
+  width: 0;
+}
+.c-w-px {
+  width: 1px;
+}
+.c-w-auto {
+  width: auto;
+}
+.c-w-1 {
+  width: 4px;
+}
+.c-w-2 {
+  width: 8px;
+}
+.c-w-3 {
+  width: 12px;
+}
+.c-w-4 {
+  width: 16px;
+}
+.c-w-5 {
+  width: 20px;
+}
+.c-w-6 {
+  width: 24px;
+}
+.c-w-8 {
+  width: 32px;
+}
+.c-w-10 {
+  width: 40px;
+}
+.c-w-12 {
+  width: 48px;
+}
+.c-w-16 {
+  width: 64px;
+}
+.c-w-20 {
+  width: 80px;
+}
+.c-w-24 {
+  width: 96px;
+}
+.c-w-32 {
+  width: 128px;
+}
+.c-w-40 {
+  width: 160px;
+}
+.c-w-48 {
+  width: 192px;
+}
+.c-w-56 {
+  width: 224px;
+}
+.c-w-64 {
+  width: 256px;
+}
+.c-w-72 {
+  width: 288px;
+}
+.c-w-80 {
+  width: 320px;
+}
+.c-w-96 {
+  width: 384px;
+}
+.c-w-1-2 {
+  width: 50%;
+}
+.c-w-1-3 {
+  width: 33.333%;
+}
+.c-w-2-3 {
+  width: 66.666%;
+}
+.c-w-1-4 {
+  width: 25%;
+}
+.c-w-3-4 {
+  width: 75%;
+}
+.c-w-1-5 {
+  width: 20%;
+}
+.c-w-2-5 {
+  width: 40%;
+}
+.c-w-3-5 {
+  width: 60%;
+}
+.c-w-4-5 {
+  width: 80%;
+}
+.c-w-25 {
+  width: 25%;
+}
+.c-w-50 {
+  width: 50%;
+}
+.c-w-75 {
+  width: 75%;
+}
+.c-w-100 {
+  width: 100%;
+}
+.c-w-screen {
+  width: 100vw;
+}
+.c-w-min {
+  width: min-content;
+}
+.c-w-max {
+  width: max-content;
+}
+.c-w-fit {
+  width: fit-content;
+}
+
+.c-min-w-0 {
+  min-width: 0;
+}
+.c-min-w-full {
+  min-width: 100%;
+}
+.c-min-w-min {
+  min-width: min-content;
+}
+.c-min-w-max {
+  min-width: max-content;
+}
+.c-min-w-fit {
+  min-width: fit-content;
+}
+
+.c-max-w-xs {
+  max-width: 320px;
+}
+.c-max-w-sm {
+  max-width: 384px;
+}
+.c-max-w-md {
+  max-width: 448px;
+}
+.c-max-w-lg {
+  max-width: 512px;
+}
+.c-max-w-xl {
+  max-width: 576px;
+}
+.c-max-w-2xl {
+  max-width: 672px;
+}
+.c-max-w-3xl {
+  max-width: 768px;
+}
+.c-max-w-4xl {
+  max-width: 896px;
+}
+.c-max-w-5xl {
+  max-width: 1024px;
+}
+.c-max-w-6xl {
+  max-width: 1152px;
+}
+.c-max-w-7xl {
+  max-width: 1280px;
+}
+.c-max-w-full {
+  max-width: 100%;
+}
+.c-max-w-screen {
+  max-width: 100vw;
+}
+.c-max-w-none {
+  max-width: none;
+}
+.c-max-w-prose {
+  max-width: 65ch;
+}
+
+.c-h-0 {
+  height: 0;
+}
+.c-h-px {
+  height: 1px;
+}
+.c-h-auto {
+  height: auto;
+}
+.c-h-1 {
+  height: 4px;
+}
+.c-h-2 {
+  height: 8px;
+}
+.c-h-3 {
+  height: 12px;
+}
+.c-h-4 {
+  height: 16px;
+}
+.c-h-5 {
+  height: 20px;
+}
+.c-h-6 {
+  height: 24px;
+}
+.c-h-8 {
+  height: 32px;
+}
+.c-h-10 {
+  height: 40px;
+}
+.c-h-12 {
+  height: 48px;
+}
+.c-h-16 {
+  height: 64px;
+}
+.c-h-20 {
+  height: 80px;
+}
+.c-h-24 {
+  height: 96px;
+}
+.c-h-32 {
+  height: 128px;
+}
+.c-h-40 {
+  height: 160px;
+}
+.c-h-48 {
+  height: 192px;
+}
+.c-h-56 {
+  height: 224px;
+}
+.c-h-64 {
+  height: 256px;
+}
+.c-h-100 {
+  height: 100%;
+}
+.c-h-screen {
+  height: 100vh;
+}
+.c-h-svh {
+  height: 100svh;
+}
+.c-h-dvh {
+  height: 100dvh;
+}
+.c-h-min {
+  height: min-content;
+}
+.c-h-max {
+  height: max-content;
+}
+.c-h-fit {
+  height: fit-content;
+}
+
+.c-min-h-0 {
+  min-height: 0;
+}
+.c-min-h-full {
+  min-height: 100%;
+}
+.c-min-h-screen {
+  min-height: 100vh;
+}
+.c-min-h-svh {
+  min-height: 100svh;
+}
+.c-min-h-dvh {
+  min-height: 100dvh;
+}
+
+.c-max-h-full {
+  max-height: 100%;
+}
+.c-max-h-screen {
+  max-height: 100vh;
+}
+.c-max-h-none {
+  max-height: none;
+}
+.c-max-h-48 {
+  max-height: 192px;
+}
+.c-max-h-64 {
+  max-height: 256px;
+}
+.c-max-h-96 {
+  max-height: 384px;
+}
+
+.c-size-0 {
+  width: 0;
+  height: 0;
+}
+.c-size-1 {
+  width: 4px;
+  height: 4px;
+}
+.c-size-2 {
+  width: 8px;
+  height: 8px;
+}
+.c-size-4 {
+  width: 16px;
+  height: 16px;
+}
+.c-size-5 {
+  width: 20px;
+  height: 20px;
+}
+.c-size-6 {
+  width: 24px;
+  height: 24px;
+}
+.c-size-8 {
+  width: 32px;
+  height: 32px;
+}
+.c-size-10 {
+  width: 40px;
+  height: 40px;
+}
+.c-size-12 {
+  width: 48px;
+  height: 48px;
+}
+.c-size-16 {
+  width: 64px;
+  height: 64px;
+}
+.c-size-20 {
+  width: 80px;
+  height: 80px;
+}
+.c-size-24 {
+  width: 96px;
+  height: 96px;
+}
+.c-size-full {
+  width: 100%;
+  height: 100%;
+}