arsxy-theme 1.0.0.pre.rc

data/_sass/_utilities.scss

@@ -0,0 +1,138 @@
+/* Utility classes */
+
+/* Spacing utilities */
+@each $name, $size in (
+  'xs': $spacing-xs,
+  'sm': $spacing-sm,
+  'md': $spacing-md,
+  'lg': $spacing-lg,
+  'xl': $spacing-xl
+) {
+  .mt-#{$name} { margin-top: $size !important; }
+  .mb-#{$name} { margin-bottom: $size !important; }
+  .ml-#{$name} { margin-left: $size !important; }
+  .mr-#{$name} { margin-right: $size !important; }
+  .mx-#{$name} { margin-left: $size !important; margin-right: $size !important; }
+  .my-#{$name} { margin-top: $size !important; margin-bottom: $size !important; }
+  .m-#{$name} { margin: $size !important; }
+  
+  .pt-#{$name} { padding-top: $size !important; }
+  .pb-#{$name} { padding-bottom: $size !important; }
+  .pl-#{$name} { padding-left: $size !important; }
+  .pr-#{$name} { padding-right: $size !important; }
+  .px-#{$name} { padding-left: $size !important; padding-right: $size !important; }
+  .py-#{$name} { padding-top: $size !important; padding-bottom: $size !important; }
+  .p-#{$name} { padding: $size !important; }
+}
+
+/* Text alignment */
+.text-left { text-align: left !important; }
+.text-center { text-align: center !important; }
+.text-right { text-align: right !important; }
+.text-justify { text-align: justify !important; }
+
+/* Display utilities */
+.d-block { display: block !important; }
+.d-inline { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-flex { display: flex !important; }
+.d-grid { display: grid !important; }
+.d-none { display: none !important; }
+
+/* Flex utilities */
+.flex-row { flex-direction: row !important; }
+.flex-column { flex-direction: column !important; }
+.flex-wrap { flex-wrap: wrap !important; }
+.flex-nowrap { flex-wrap: nowrap !important; }
+.justify-content-start { justify-content: flex-start !important; }
+.justify-content-end { justify-content: flex-end !important; }
+.justify-content-center { justify-content: center !important; }
+.justify-content-between { justify-content: space-between !important; }
+.justify-content-around { justify-content: space-around !important; }
+.align-items-start { align-items: flex-start !important; }
+.align-items-end { align-items: flex-end !important; }
+.align-items-center { align-items: center !important; }
+.align-items-baseline { align-items: baseline !important; }
+.align-items-stretch { align-items: stretch !important; }
+
+/* Text utilities */
+.text-primary { color: $primary-color !important; }
+.text-secondary { color: $secondary-color !important; }
+.text-muted { color: $dark-gray !important; }
+.text-white { color: white !important; }
+.font-weight-normal { font-weight: normal !important; }
+.font-weight-bold { font-weight: 600 !important; }
+.font-italic { font-style: italic !important; }
+.text-decoration-none { text-decoration: none !important; }
+.text-transform-uppercase { text-transform: uppercase !important; }
+.text-transform-lowercase { text-transform: lowercase !important; }
+.text-transform-capitalize { text-transform: capitalize !important; }
+
+/* Background utilities */
+.bg-primary { background-color: $primary-color !important; }
+.bg-secondary { background-color: $secondary-color !important; }
+.bg-light { background-color: $light-gray !important; }
+.bg-white { background-color: white !important; }
+
+/* Border utilities */
+.border { border: 1px solid $border-color !important; }
+.border-top { border-top: 1px solid $border-color !important; }
+.border-right { border-right: 1px solid $border-color !important; }
+.border-bottom { border-bottom: 1px solid $border-color !important; }
+.border-left { border-left: 1px solid $border-color !important; }
+.border-0 { border: 0 !important; }
+.rounded { border-radius: $border-radius !important; }
+.rounded-sm { border-radius: $border-radius-sm !important; }
+.rounded-lg { border-radius: $border-radius-lg !important; }
+.rounded-circle { border-radius: 50% !important; }
+
+/* Width and height utilities */
+.w-100 { width: 100% !important; }
+.w-75 { width: 75% !important; }
+.w-50 { width: 50% !important; }
+.w-25 { width: 25% !important; }
+.h-100 { height: 100% !important; }
+.h-75 { height: 75% !important; }
+.h-50 { height: 50% !important; }
+.h-25 { height: 25% !important; }
+
+/* Position utilities */
+.position-relative { position: relative !important; }
+.position-absolute { position: absolute !important; }
+.position-fixed { position: fixed !important; }
+.position-sticky { position: sticky !important; }
+
+/* Responsive visibility */
+@media (max-width: $on-palm) {
+  .hide-on-mobile { display: none !important; }
+}
+
+@media (min-width: $on-palm) and (max-width: $on-laptop) {
+  .hide-on-tablet { display: none !important; }
+}
+
+@media (min-width: $on-laptop) {
+  .hide-on-desktop { display: none !important; }
+}
+
+/* Clearfix */
+.clearfix {
+  &::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}
+
+/* Screen reader only */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

data/_sass/_variables.scss

@@ -0,0 +1,63 @@
+// Colors
+$primary-color: #3273dc;       // Modern blue
+$primary-color-rgb: 50, 115, 220; // RGB values for primary color
+$secondary-color: #00d1b2;     // Teal accent
+$accent-color: #ff5c8d;        // Eye-catching pink accent
+$text-color: #2c3e50;          // Softer than pure black
+$background-color: #ffffff;
+$light-gray: #f9fafb;          // Lighter background
+$gray: #e0e3e8;
+$dark-gray: #8c9bab;
+$code-background: #f0f4f8;
+$link-color: $primary-color;
+$link-hover-color: $accent-color;
+$border-color: #edf2f7;
+$success-color: #48c774;
+$warning-color: #ffdd57;
+$danger-color: #ff3860;
+
+// Typography
+$base-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+$code-font-family: 'JetBrains Mono', 'Courier New', monospace;
+$base-font-size: 18px;
+$small-font-size: 16px;
+$smaller-font-size: 14px;
+$base-line-height: 1.7;
+$heading-line-height: 1.3;
+
+// Spacing
+$spacing-unit: 30px;
+$spacing-xs: $spacing-unit * 0.25;
+$spacing-sm: $spacing-unit * 0.5;
+$spacing-md: $spacing-unit;
+$spacing-lg: $spacing-unit * 1.5;
+$spacing-xl: $spacing-unit * 2;
+
+// Layout
+$content-width: 800px;
+$on-palm: 600px;
+$on-laptop: 900px;
+$on-large: 1200px;
+
+// Border Radius
+$border-radius: 8px;          // More modern, slightly rounded corners
+$border-radius-sm: 4px;
+$border-radius-lg: 12px;
+
+// Shadows
+$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
+$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05);
+
+// Transitions
+$transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+$transition-fast: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+$transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+// Dark mode colors
+$dark-background: #0f172a;    // Dark blue-gray background
+$dark-surface: #1e293b;       // Slightly lighter surface
+$dark-text-color: #e2e8f0;
+$dark-border-color: #334155;
+$dark-code-background: #1e293b;
+$dark-gray-light: #64748b;

data/_sass/components/_code.scss

@@ -0,0 +1,245 @@
+/* Code block styles */
+.code-block {
+  margin-bottom: $spacing-lg;
+  position: relative;
+  
+  pre {
+    margin: 0;
+    padding: $spacing-md;
+    background-color: $code-background;
+    border-radius: $border-radius;
+    overflow-x: auto;
+    font-family: $code-font-family;
+    font-size: 0.9rem;
+    line-height: 1.6;
+    box-shadow: $shadow-md;
+    border: none;
+    
+    code {
+      background: none;
+      padding: 0;
+      font-size: inherit;
+      color: inherit;
+      border: none;
+      display: block;
+    }
+  }
+  
+  &::before {
+    content: attr(data-language);
+    position: absolute;
+    top: 0;
+    right: $spacing-sm;
+    background: linear-gradient(to right, $secondary-color, $accent-color);
+    color: white;
+    font-size: 0.7rem;
+    font-weight: bold;
+    padding: 0.2rem 0.7rem;
+    border-radius: 0 0 $border-radius-sm $border-radius-sm;
+    text-transform: uppercase;
+    z-index: 10;
+    font-family: $base-font-family;
+    letter-spacing: 0.5px;
+  }
+}
+
+/* Terminal output style */
+.language-terminal pre {
+  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
+  color: #f8f8f2;
+  border: 1px solid #444;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0.8rem;
+    left: 1rem;
+    width: 0.75rem;
+    height: 0.75rem;
+    background-color: #ff5f56;
+    border-radius: 50%;
+    box-shadow: 
+      1.3rem 0 0 0 #ffbd2e,
+      2.6rem 0 0 0 #27c93f;
+  }
+}
+
+/* Filename header for code blocks */
+.code-filename {
+  display: block;
+  background: linear-gradient(to right, rgba($primary-color, 0.05), rgba($secondary-color, 0.05));
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+  padding: $spacing-sm $spacing-md;
+  font-family: $code-font-family;
+  font-size: 0.85rem;
+  color: $secondary-color;
+  border: none;
+  border-bottom: 1px dashed rgba($border-color, 0.5);
+  font-weight: 500;
+  
+  &::before {
+    content: '📁';
+    margin-right: $spacing-xs;
+    opacity: 0.8;
+  }
+  
+  + pre {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    margin-top: 0;
+  }
+}
+
+/* Line numbers for code blocks */
+.line-numbers {
+  pre {
+    counter-reset: line;
+    padding-left: 4rem;
+    
+    .line {
+      display: inline-block;
+      width: 100%;
+      position: relative;
+      
+      &::before {
+        counter-increment: line;
+        content: counter(line);
+        position: absolute;
+        left: -3rem;
+        top: 0;
+        color: rgba($dark-gray, 0.5);
+        text-align: right;
+        width: 2rem;
+        font-size: 0.85em;
+        user-select: none;
+      }
+    }
+  }
+}
+
+/* Code block with highlighted lines */
+.highlight-line {
+  background: linear-gradient(to right, rgba($accent-color, 0.1), rgba($accent-color, 0.05));
+  display: block;
+  margin: 0 -$spacing-md;
+  padding: 0 $spacing-md;
+  border-left: 3px solid $accent-color;
+}
+
+/* Commands in code blocks */
+.command-line-prompt {
+  border-right: 1px solid rgba($border-color, 0.5);
+  display: block;
+  float: left;
+  font-size: 100%;
+  letter-spacing: -1px;
+  margin-right: $spacing-sm;
+  pointer-events: none;
+  user-select: none;
+  
+  > span {
+    position: relative;
+    
+    &:before {
+      color: rgba($dark-gray, 0.7);
+      content: " ";
+      display: block;
+      padding-right: 0.8em;
+    }
+  }
+  
+  > span[data-prompt]:before {
+    content: attr(data-prompt);
+  }
+  
+  > span[data-user]:before {
+    content: attr(data-user);
+    color: rgba($secondary-color, 0.8);
+  }
+  
+  > span[data-host]:before {
+    content: attr(data-host);
+    color: rgba($accent-color, 0.8);
+  }
+}
+
+/* Copy code button */
+.copy-code-button {
+  position: absolute;
+  right: $spacing-sm;
+  top: $spacing-sm;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.3rem 0.8rem;
+  font-size: 0.75rem;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.3); /* Lighter background */
+  border: none;
+  border-radius: $border-radius;
+  cursor: pointer;
+  opacity: 0.7; /* Make button visible by default */
+  transform: translateY(0); /* No initial transform */
+  transition: $transition-base;
+  z-index: 2;
+  font-weight: 500;
+  box-shadow: $shadow-sm;
+  
+  &::before {
+    content: '📋';
+    margin-right: 0.3rem;
+  }
+  
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.7); /* Darker on hover */
+    color: white; /* Ensure text remains white on hover */
+    box-shadow: $shadow-md;
+    transform: translateY(-2px);
+    opacity: 1; /* Full opacity on hover */
+  }
+  
+  &.copied {
+    background: linear-gradient(to right, $success-color, darken($success-color, 10%));
+    opacity: 1;
+    
+    &::before {
+      content: '✓';
+    }
+  }
+}
+
+/* Syntax highlighting improvements */
+.highlight {
+  .c, .c1, .cm { color: #6c8998; font-style: italic; } /* Comment */
+  .k, .kd, .kr { color: #569CD6; font-weight: bold; } /* Keyword */
+  .o { color: #d4d4d4; } /* Operator */
+  .s, .s1, .s2 { color: #CE9178; } /* String */
+  .nb { color: #569CD6; } /* Built-in */
+  .nc { color: #4EC9B0; } /* Class */
+  .nf { color: #DCDCAA; } /* Function */
+  .nn { color: #4EC9B0; } /* Namespace */
+  .nt { color: #569CD6; } /* Tag */
+  .nv { color: #9CDCFE; } /* Variable */
+  .mi, .mf { color: #B5CEA8; } /* Number */
+  .err { color: #F44747; background-color: transparent; } /* Error */
+}
+
+/* Diff syntax highlighting */
+.language-diff {
+  .gd { 
+    background-color: rgba($danger-color, 0.2);
+    color: $danger-color;
+    display: block;
+    margin: 0 -$spacing-md;
+    padding: 0 $spacing-md;
+  }
+  
+  .gi {
+    background-color: rgba($success-color, 0.2);
+    color: darken($success-color, 10%);
+    display: block;
+    margin: 0 -$spacing-md;
+    padding: 0 $spacing-md;
+  }
+}

data/_sass/components/_docs.scss

@@ -0,0 +1,263 @@
+// Documentation styles
+.docs-container {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+  max-width: var(--container-width);
+  margin: 0 auto;
+  padding: 2rem 1rem;
+  position: relative; // Add position context for absolute children
+  min-height: calc(100vh - 4rem); // Full viewport height minus padding
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    min-height: auto;
+  }
+}
+
+.docs-content {
+  flex: 1;
+  min-width: 0; // Fixes text overflowing flexbox in some cases
+}
+
+.docs-article {
+  width: 100%;
+}
+
+.docs-header {
+  margin-bottom: 2rem;
+  padding-top: 0; // Remove the top padding
+}
+
+.docs-title {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0; // Ensure no top margin
+  
+  @media (max-width: 768px) {
+    font-size: 2rem;
+  }
+}
+
+.docs-description {
+  font-size: 1.2rem;
+  color: var(--light-text-color);
+  margin-top: 0.5rem;
+}
+
+.docs-body {
+  font-size: 1.05rem;
+  line-height: 1.7;
+  
+  h2 {
+    font-size: 1.75rem;
+    margin: 2rem 0 1rem;
+    padding-bottom: 0.3rem;
+    border-bottom: 1px solid var(--border-color);
+  }
+  
+  h3 {
+    font-size: 1.4rem;
+    margin: 1.5rem 0 1rem;
+  }
+  
+  h4 {
+    font-size: 1.2rem;
+    margin: 1.5rem 0 0.75rem;
+  }
+  
+  p, ul, ol {
+    margin-bottom: 1.2rem;
+  }
+  
+  ul, ol {
+    padding-left: 1.5rem;
+    
+    li {
+      margin-bottom: 0.5rem;
+    }
+  }
+  
+  pre {
+    margin: 1.5rem 0;
+    border-radius: 0.5rem;
+  }
+  
+  img {
+    max-width: 100%;
+    border-radius: 0.5rem;
+    margin: 1.5rem 0;
+  }
+  
+  .highlight {
+    border-radius: 0.5rem;
+  }
+}
+
+// Sidebar styles
+.docs-sidebar {
+  width: 260px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 2rem;
+  height: calc(100vh - 4rem); // Full viewport height minus top spacing
+  overflow-y: auto; // Enable scrolling
+  scrollbar-width: thin; // Sleeker scrollbar for Firefox
+  
+  // Custom scrollbar for webkit browsers
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--border-color);
+    border-radius: 6px;
+  }
+  
+  // Better scrolling UX
+  -webkit-overflow-scrolling: touch; // Smooth scrolling on iOS
+  overscroll-behavior: contain; // Prevent scroll chaining
+  
+  @media (max-width: 768px) {
+    width: 100%;
+    position: relative;
+    top: 0;
+    height: auto;
+    max-height: 70vh; // Limit height on mobile but still allow scrolling
+    margin-top: 2rem;
+    margin-bottom: 0;
+    order: 2;
+  }
+}
+
+.docs-nav {
+  padding: 0.75rem 1rem 2rem; // Add more padding at the bottom
+  background: var(--light-bg-color);
+  border-radius: 0.5rem;
+  position: relative; // For proper stacking
+  
+  .dark-mode & {
+    background: var(--dark-code-bg);
+  }
+}
+
+.docs-nav-title {
+  font-size: 1.2rem;
+  margin-top: 0;
+  margin-bottom: 1.2rem;
+  padding-bottom: 0.5rem;
+  padding-top: 0; // Remove the padding-top completely
+  line-height: 1.2; // Adjust line height to match the main title
+  border-bottom: 1px solid var(--border-color);
+}
+
+.docs-nav-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  
+  & > li {
+    margin-bottom: 0.75rem;
+    
+    & > a {
+      display: block;
+      padding: 0.4rem 0;
+      color: var(--text-color);
+      text-decoration: none;
+      font-weight: 500;
+      border-radius: 0.25rem;
+      
+      &:hover {
+        color: var(--primary-color);
+      }
+      
+      &.active {
+        color: var(--primary-color);
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.docs-section {
+  margin-bottom: 1rem;
+}
+
+.docs-section-title {
+  display: block;
+  font-weight: 600;
+  margin: 1.25rem 0 0.5rem;
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--light-text-color);
+}
+
+.docs-section-items {
+  list-style: none;
+  padding-left: 0.5rem;
+  margin: 0.5rem 0 1rem;
+  
+  li {
+    margin-bottom: 0.25rem;
+  }
+  
+  a {
+    display: block;
+    padding: 0.3rem 0.5rem;
+    color: var(--text-color);
+    text-decoration: none;
+    border-radius: 0.25rem;
+    font-size: 0.95rem;
+    
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+      color: var(--primary-color);
+      
+      .dark-mode & {
+        background: rgba(255, 255, 255, 0.05);
+      }
+    }
+    
+    &.active {
+      background: rgba(0, 0, 0, 0.07);
+      color: var(--primary-color);
+      font-weight: 500;
+      
+      .dark-mode & {
+        background: rgba(255, 255, 255, 0.07);
+      }
+    }
+  }
+}
+
+// Dark mode support
+.dark-mode {
+  .docs-description {
+    color: var(--dark-text-color);
+    opacity: 0.8;
+  }
+  
+  .docs-nav {
+    background: var(--dark-code-bg);
+  }
+  
+  .docs-section-title {
+    color: var(--dark-text-color);
+    opacity: 0.7;
+  }
+  
+  .docs-nav-list > li > a,
+  .docs-section-items a {
+    color: var(--dark-text-color);
+    
+    &:hover,
+    &.active {
+      color: var(--dark-link-color);
+    }
+  }
+}