@lottecode/lottecss 0.0.1 → 0.0.3

package/src/css/column.css

@@ -0,0 +1,330 @@
+/* Multi-Column Layout */
+
+/* Column Count */
+.columns-1 {
+  column-count: 1;
+}
+
+.columns-2 {
+  column-count: 2;
+}
+
+.columns-3 {
+  column-count: 3;
+}
+
+.columns-4 {
+  column-count: 4;
+}
+
+.columns-5 {
+  column-count: 5;
+}
+
+.columns-6 {
+  column-count: 6;
+}
+
+/* Column Width */
+.columns-xs {
+  column-width: 10rem;
+}
+
+.columns-sm {
+  column-width: 15rem;
+}
+
+.columns-md {
+  column-width: 20rem;
+}
+
+.columns-lg {
+  column-width: 25rem;
+}
+
+.columns-xl {
+  column-width: 30rem;
+}
+
+/* Column Gap */
+.column-gap-0 {
+  column-gap: 0;
+}
+
+.column-gap-1 {
+  column-gap: 0.25rem;
+}
+
+.column-gap-2 {
+  column-gap: 0.5rem;
+}
+
+.column-gap-4 {
+  column-gap: 1rem;
+}
+
+.column-gap-6 {
+  column-gap: 1.5rem;
+}
+
+.column-gap-8 {
+  column-gap: 2rem;
+}
+
+/* Column Rule */
+.column-rule {
+  column-rule: 1px solid var(--color-border);
+}
+
+.column-rule-none {
+  column-rule: none;
+}
+
+.column-rule-dotted {
+  column-rule-style: dotted;
+}
+
+.column-rule-dashed {
+  column-rule-style: dashed;
+}
+
+.column-rule-solid {
+  column-rule-style: solid;
+}
+
+.column-rule-double {
+  column-rule-style: double;
+}
+
+/* Column Rule Width */
+.column-rule-1 {
+  column-rule-width: 1px;
+}
+
+.column-rule-2 {
+  column-rule-width: 2px;
+}
+
+.column-rule-4 {
+  column-rule-width: 4px;
+}
+
+/* Column Rule Color - using CSS variables */
+.column-rule-primary {
+  column-rule-color: var(--color-primary);
+}
+
+.column-rule-secondary {
+  column-rule-color: var(--color-secondary);
+}
+
+.column-rule-muted {
+  column-rule-color: var(--color-muted);
+}
+
+/* Column Span */
+.column-span-all {
+  column-span: all;
+}
+
+.column-span-none {
+  column-span: none;
+}
+
+/* Column Fill */
+.column-fill-auto {
+  column-fill: auto;
+}
+
+.column-fill-balance {
+  column-fill: balance;
+}
+
+/* Break Inside */
+.break-inside-auto {
+  break-inside: auto;
+}
+
+.break-inside-avoid {
+  break-inside: avoid;
+}
+
+.break-inside-avoid-column {
+  break-inside: avoid-column;
+}
+
+/* Break Before */
+.break-before-auto {
+  break-before: auto;
+}
+
+.break-before-column {
+  break-before: column;
+}
+
+.break-before-avoid-column {
+  break-before: avoid-column;
+}
+
+/* Break After */
+.break-after-auto {
+  break-after: auto;
+}
+
+.break-after-column {
+  break-after: column;
+}
+
+.break-after-avoid-column {
+  break-after: avoid-column;
+}
+
+/* Responsive Column Utilities */
+@media (min-width: 640px) {
+  .sm\:columns-1 {
+    column-count: 1;
+  }
+  .sm\:columns-2 {
+    column-count: 2;
+  }
+  .sm\:columns-3 {
+    column-count: 3;
+  }
+  .sm\:columns-4 {
+    column-count: 4;
+  }
+  .sm\:columns-5 {
+    column-count: 5;
+  }
+  .sm\:columns-6 {
+    column-count: 6;
+  }
+
+  .sm\:columns-xs {
+    column-width: 10rem;
+  }
+  .sm\:columns-sm {
+    column-width: 15rem;
+  }
+  .sm\:columns-md {
+    column-width: 20rem;
+  }
+  .sm\:columns-lg {
+    column-width: 25rem;
+  }
+  .sm\:columns-xl {
+    column-width: 30rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:columns-1 {
+    column-count: 1;
+  }
+  .md\:columns-2 {
+    column-count: 2;
+  }
+  .md\:columns-3 {
+    column-count: 3;
+  }
+  .md\:columns-4 {
+    column-count: 4;
+  }
+  .md\:columns-5 {
+    column-count: 5;
+  }
+  .md\:columns-6 {
+    column-count: 6;
+  }
+
+  .md\:columns-xs {
+    column-width: 10rem;
+  }
+  .md\:columns-sm {
+    column-width: 15rem;
+  }
+  .md\:columns-md {
+    column-width: 20rem;
+  }
+  .md\:columns-lg {
+    column-width: 25rem;
+  }
+  .md\:columns-xl {
+    column-width: 30rem;
+  }
+
+  .md\:column-gap-0 {
+    column-gap: 0;
+  }
+  .md\:column-gap-1 {
+    column-gap: 0.25rem;
+  }
+  .md\:column-gap-2 {
+    column-gap: 0.5rem;
+  }
+  .md\:column-gap-4 {
+    column-gap: 1rem;
+  }
+  .md\:column-gap-6 {
+    column-gap: 1.5rem;
+  }
+  .md\:column-gap-8 {
+    column-gap: 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:columns-1 {
+    column-count: 1;
+  }
+  .lg\:columns-2 {
+    column-count: 2;
+  }
+  .lg\:columns-3 {
+    column-count: 3;
+  }
+  .lg\:columns-4 {
+    column-count: 4;
+  }
+  .lg\:columns-5 {
+    column-count: 5;
+  }
+  .lg\:columns-6 {
+    column-count: 6;
+  }
+
+  .lg\:columns-xs {
+    column-width: 10rem;
+  }
+  .lg\:columns-sm {
+    column-width: 15rem;
+  }
+  .lg\:columns-md {
+    column-width: 20rem;
+  }
+  .lg\:columns-lg {
+    column-width: 25rem;
+  }
+  .lg\:columns-xl {
+    column-width: 30rem;
+  }
+
+  .lg\:column-gap-0 {
+    column-gap: 0;
+  }
+  .lg\:column-gap-1 {
+    column-gap: 0.25rem;
+  }
+  .lg\:column-gap-2 {
+    column-gap: 0.5rem;
+  }
+  .lg\:column-gap-4 {
+    column-gap: 1rem;
+  }
+  .lg\:column-gap-6 {
+    column-gap: 1.5rem;
+  }
+  .lg\:column-gap-8 {
+    column-gap: 2rem;
+  }
+}

package/src/css/editorial.css

@@ -0,0 +1,12 @@
+.editorial p,
+.editorial h1,
+.editorial h2,
+.editorial h3,
+.editorial h4,
+.editorial h5,
+.editorial h6,
+.editorial ul,
+.editorial ol,
+.editorial blockquote {
+    max-width: 400px;
+}

package/src/css/fonts.css

@@ -0,0 +1,46 @@
+/* Fonts */
+
+/* Font Variables */
+:root {
+  --font-cdn: "https://assets.lottecode.com";
+  --font-family-sans: "Berkeley Mono", monospace;
+  --font-family-mono: "Berkeley Mono", monospace;
+}
+
+/* Font Utility Classes */
+.font-sans {
+  font-family: var(--font-family-sans);
+}
+
+.font-mono {
+  font-family: var(--font-family-mono);
+}
+
+/* Berkeley Mono — https://berkeleygraphics.com/typefaces/berkeley-mono */
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("https://assets.lottecode.com/fonts/BerkeleyMono-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("https://assets.lottecode.com/fonts/BerkeleyMono-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("https://assets.lottecode.com/fonts/BerkeleyMono-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("https://assets.lottecode.com/fonts/BerkeleyMono-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+}

package/src/css/forms.css

@@ -0,0 +1,174 @@
+body {
+  /* Form container */
+
+  & form {
+    margin-bottom: 1rem;
+  }
+
+  /* Fieldset and Legend */
+
+  & fieldset {
+    /*margin: 0 0 1.5rem 0;*/
+    /*padding: 1rem;*/
+    /*border: 1px solid var(--color-border);*/
+    /*border-radius: 4px;*/
+    /*background-color: var(--color-surface);*/
+  }
+
+  & legend {
+    width: auto;
+    padding: 0 0.5rem;
+    font-weight: 600;
+    color: var(--color-foreground);
+  }
+
+  /* Form groups */
+
+  & form div {
+    margin-bottom: 1rem;
+  }
+
+  /* Labels */
+
+  & label {
+    display: inline-block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--color-foreground);
+  }
+
+  /* Basic inputs */
+
+  & input[type="text"],
+  & input[type="email"],
+  & input[type="password"],
+  & input[type="number"],
+  & input[type="tel"],
+  & input[type="url"],
+  & input[type="search"] {
+    display: block;
+    width: 100%;
+    padding: 0.25rem 0.5rem;
+    line-height: 1.5;
+    color: var(--color-foreground);
+    background-color: var(--color-background);
+    background-clip: padding-box;
+    border: 1px solid var(--color-border);
+    border-radius: 0;
+    transition: border-color 0.15s ease-in-out;
+  }
+
+  & input:focus {
+    border-color: var(--color-accent);
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem var(--color-accent);
+  }
+
+  /* Form controls with validation states */
+
+  .is-valid {
+    border-color: var(--color-success);
+  }
+
+  .is-valid:focus {
+    border-color: var(--color-success);
+    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+  }
+
+  .is-invalid {
+    border-color: var(--color-error);
+  }
+
+  .is-invalid:focus {
+    border-color: var(--color-error);
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  }
+
+  /* Other input types */
+
+  & input[type="date"],
+  & input[type="time"],
+  & input[type="datetime-local"] {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    line-height: 1.5;
+    color: var(--color-foreground);
+    background-color: var(--color-background);
+    background-clip: padding-box;
+    border: 1px solid var(--color-border);
+    border-radius: 0.25rem;
+  }
+
+  & input[type="radio"],
+  & input[type="checkbox"] {
+    margin-right: 0.5rem;
+  }
+
+  & input[type="color"] {
+    height: 2rem;
+    width: 4rem;
+    padding: 0.2rem;
+    background-color: var(--color-background);
+    border: 1px solid var(--color-border);
+  }
+
+  & input[type="range"] {
+    width: 100%;
+  }
+
+  /* Select elements */
+
+  & select {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    line-height: 1.5;
+    color: var(--color-foreground);
+    background-color: var(--color-background);
+    background-clip: padding-box;
+    border: 1px solid var(--color-border);
+    border-radius: 0.25rem;
+  }
+
+  & select[multiple] {
+    height: auto;
+  }
+
+  /* Textarea */
+
+  & textarea {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    line-height: 1.5;
+    color: var(--color-foreground);
+    background-color: var(--color-background);
+    background-clip: padding-box;
+    border: 1px solid var(--color-border);
+    border-radius: 0.25rem;
+    resize: vertical;
+  }
+
+  /* Form layout using Grid */
+  @media (min-width: 768px) {
+    .form-grid {
+      display: grid;
+      grid-template-columns: 30% 70%;
+      gap: 0.5rem;
+      align-items: center;
+    }
+
+    .form-grid label {
+      grid-column: 1;
+      text-align: right;
+      margin-bottom: 0;
+    }
+
+    .form-grid input,
+    .form-grid select,
+    .form-grid textarea {
+      grid-column: 2;
+    }
+  }
+}

package/src/css/globals.css

@@ -0,0 +1,144 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Berkeley Mono", monospace;
+  font-size: 16px;
+  background-color: var(--color-background);
+  margin: 0;
+  padding: 0;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: var(--color-accent);
+}
+
+* {
+  border-color: var(--color-border);
+}
+
+p + p {
+  margin-top: 1rem;
+}
+
+h1 {
+  font-size: 1.5rem;
+  text-transform: uppercase;
+}
+
+.card-bevel {
+  position: relative;
+}
+
+.card-bevel::after {
+  content: "";
+  position: absolute;
+  bottom: -3px;
+  right: -3px;
+  width: calc(100% - 2px);
+  height: calc(100% - 2px);
+  border-bottom: 3px solid black;
+  border-right: 3px solid black;
+  opacity: 1;
+}
+
+/* Carousel animation */
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.ticker-content {
+  animation: scroll 60s linear infinite;
+  will-change: transform;
+}
+
+.ticker-item {
+  padding: 0 1rem;
+}
+
+/* Tarot card flip */
+.tarot-card-flip {
+  perspective: 800px;
+}
+
+.tarot-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-style: preserve-3d;
+}
+
+.tarot-card-inner.flipped {
+  transform: rotateY(180deg);
+}
+
+.tarot-card-front,
+.tarot-card-back {
+  position: absolute;
+  inset: 0;
+  backface-visibility: hidden;
+}
+
+.tarot-card-back {
+  transform: rotateY(180deg);
+}
+
+/* Thin scrollbar */
+.thin-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: black transparent;
+}
+
+p,
+span,
+a,
+cite,
+q,
+em,
+strong,
+abbr,
+time,
+mark,
+address,
+ul,
+ol,
+li,
+dl,
+dd,
+dt,
+div,
+article,
+section,
+aside,
+blockquote,
+figure,
+figcaption,
+main,
+header,
+footer,
+nav,
+details,
+summary,
+label,
+legend,
+fieldset,
+input,
+select,
+option,
+button,
+textarea,
+caption,
+th,
+td,
+samp,
+kbd,
+var {
+  font-size: 0.75rem;
+}

package/src/css/header.css

@@ -0,0 +1,26 @@
+header {
+  max-width: 1024px;
+  margin: 2rem auto 0 auto;
+  /*padding: 0 0.5rem;*/
+  background-color: var(--color-background);
+  width: 100%;
+  position: sticky;
+  z-index: 1035;
+  top: 0;
+  border-bottom: 1px solid var(--color-border);
+  left: 0;
+  right: 0;
+}
+
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}