arsxy-theme 1.0.0.pre.rc

data/_sass/_base.scss

@@ -0,0 +1,264 @@
+// Include this comment block at the top of key files in your project
+/**
+ * ARSXY THEME DEVELOPMENT GUIDELINES
+ * 
+ * This file is part of the Arsxy Theme for Jekyll. When working with this theme,
+ * please adhere to the following guidelines:
+ * 
+ * 1. Clean, Responsive Design: Maintain minimal, distraction-free experience with 
+ *    mobile-first responsive design.
+ * 
+ * 2. SEO Optimization: Preserve semantic HTML, proper heading hierarchy, and valid 
+ *    structured data.
+ * 
+ * 3. GitHub Pages Compatibility: Use only GitHub Pages-compatible plugins and follow
+ *    GitHub Pages deployment best practices.
+ * 
+ * 4. Clean Code: Follow DRY principles, use meaningful naming, and maintain modular components.
+ * 
+ * 5. Coding Best Practices: Adhere to accessibility standards (WCAG), ensure cross-browser
+ *    compatibility, and proper separation of concerns.
+ * 
+ * For more detailed guidelines, see the AI_GUIDELINES.md file.
+ */
+
+/* CSS Variables for light mode */
+:root {
+  --primary-color: #{$primary-color};
+  --primary-color-rgb: #{$primary-color-rgb};
+  --secondary-color: #{$secondary-color};
+  // --accent-color: #{$accent-color};
+  --text-color: #{$text-color};
+  // --background-color: #{$background-color};
+  // --background-color-alt: #{$light-gray};
+  // --border-color: #{$border-color};
+  --link-color: #{$link-color};
+  --link-hover-color: #{$link-hover-color};
+}
+
+/* Dark mode CSS variables */
+html.dark-mode {
+  --primary-color: #{lighten($primary-color, 15%)};
+  --primary-color-rgb: 101, 151, 230; /* Lightened RGB values for primary color */
+  --secondary-color: #{lighten($secondary-color, 15%)};
+  // --accent-color: #{lighten($accent-color, 15%)};
+  --text-color: #{$dark-text-color};
+  // --background-color: #{$dark-background};
+  // --background-color-alt: #{$dark-surface};
+  // --border-color: #{$dark-border-color};
+  --link-color: #{lighten($link-color, 15%)};
+  --link-hover-color: #{lighten($link-hover-color, 15%)};
+}
+
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: $base-font-size;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: $base-font-family;
+  font-size: 1rem;
+  line-height: $base-line-height;
+  color: $text-color;
+  background-color: $background-color;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+/* Focus state for accessibility */
+a:focus, button:focus, input:focus, textarea:focus, select:focus, [tabindex]:focus {
+  outline: 3px solid rgba($primary-color, 0.4);
+  outline-offset: 2px;
+}
+
+/* Modern links */
+a {
+  color: $link-color;
+  text-decoration: none;
+  position: relative;
+  transition: $transition-base;
+  
+  &:hover {
+    color: $link-hover-color;
+    text-decoration: none;
+  }
+  
+  &.underline-effect {
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      transform: scaleX(0);
+      height: 2px;
+      bottom: -2px;
+      left: 0;
+      background-color: currentColor;
+      transform-origin: bottom right;
+      transition: transform 0.25s ease-out;
+    }
+    
+    &:hover::after {
+      transform: scaleX(1);
+      transform-origin: bottom left;
+    }
+  }
+}
+
+/* List styles */
+ul, ol {
+  margin-left: $spacing-md;
+  margin-bottom: $spacing-md;
+  
+  li {
+    margin-bottom: $spacing-xs;
+  }
+}
+
+/* Block elements spacing */
+p, h1, h2, h3, h4, h5, h6, blockquote, pre, table, dl, figure {
+  margin-bottom: $spacing-md;
+}
+
+/* Horizontal rule */
+hr {
+  height: 1px;
+  border: 0;
+  background-color: $border-color;
+  margin: $spacing-lg 0;
+}
+
+/* Modern blockquote styles */
+blockquote {
+  border-left: 4px solid $secondary-color;
+  padding: $spacing-md;
+  background-color: $light-gray;
+  margin-left: 0;
+  margin-right: 0;
+  font-style: italic;
+  border-radius: $border-radius-sm;
+  box-shadow: $shadow-sm;
+  
+  > :last-child {
+    margin-bottom: 0;
+  }
+  
+  cite {
+    display: block;
+    color: $dark-gray;
+    font-size: $smaller-font-size;
+    margin-top: $spacing-sm;
+    font-style: normal;
+  }
+}
+
+/* Images with subtle shadow */
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  border-radius: $border-radius;
+  box-shadow: $shadow-sm;
+  transition: $transition-base;
+  
+  &:hover {
+    box-shadow: $shadow-md;
+    transform: translateY(-2px);
+  }
+}
+
+/* Modern tables */
+table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-bottom: $spacing-md;
+  border-radius: $border-radius;
+  overflow: hidden;
+  box-shadow: $shadow-sm;
+  
+  th, td {
+    padding: $spacing-sm $spacing-md;
+    border-bottom: 1px solid $border-color;
+    text-align: left;
+  }
+  
+  th {
+    background-color: $light-gray;
+    font-weight: 600;
+  }
+  
+  tr:last-child td {
+    border-bottom: none;
+  }
+  
+  tr:hover {
+    background-color: rgba($light-gray, 0.5);
+  }
+}
+
+/* Form elements */
+input, 
+button, 
+textarea, 
+select {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  border-radius: $border-radius-sm;
+  border: 1px solid $border-color;
+  padding: $spacing-xs $spacing-sm;
+  transition: $transition-base;
+  
+  &:focus {
+    border-color: $primary-color;
+    box-shadow: 0 0 0 3px rgba($primary-color, 0.2);
+  }
+}
+
+button, .button {
+  background-color: $primary-color;
+  color: white;
+  border: none;
+  padding: $spacing-xs $spacing-md;
+  cursor: pointer;
+  font-weight: 500;
+  
+  &:hover {
+    background-color: darken($primary-color, 5%);
+    transform: translateY(-1px);
+    box-shadow: $shadow-sm;
+  }
+  
+  &.secondary {
+    background-color: $secondary-color;
+    
+    &:hover {
+      background-color: darken($secondary-color, 5%);
+    }
+  }
+  
+  &.accent {
+    background-color: $accent-color;
+    
+    &:hover {
+      background-color: darken($accent-color, 5%);
+    }
+  }
+}
+
+/* Custom selection color */
+::selection {
+  background: rgba($accent-color, 0.3);
+  color: $text-color;
+}