arsxy-theme 1.0.0.pre.rc

data/_sass/_layout.scss

@@ -0,0 +1,118 @@
+/* Layout styles */
+.wrapper {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 $spacing-md;
+  flex: 1;
+  width: 100%;
+}
+
+/* Site content */
+.page-content {
+  flex: 1 0 auto;
+  padding: $spacing-lg 0;
+  
+  /* Add space between sections */
+  section {
+    margin-bottom: $spacing-xl;
+  }
+}
+
+/* Basic grid system */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: $spacing-md;
+  
+  &.grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  &.grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  &.grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Container for home page */
+.home {
+  .post-list {
+    margin-left: 0;
+    list-style: none;
+    
+    > li {
+      margin-bottom: $spacing-lg;
+      border-bottom: 1px solid $border-color;
+      padding-bottom: $spacing-md;
+      
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+/* Post preview on homepage */
+.post-preview {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: $spacing-md;
+  
+  @media (min-width: $on-palm) {
+    grid-template-columns: 2fr 1fr;
+    
+    &.no-image {
+      grid-template-columns: 1fr;
+    }
+  }
+  
+  .post-preview-content {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .post-preview-image {
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: $border-radius;
+    }
+  }
+}
+
+/* Two column layout for pages with sidebar */
+.layout-with-sidebar {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: $spacing-lg;
+  
+  @media (min-width: $on-laptop) {
+    grid-template-columns: 2fr 1fr;
+  }
+  
+  .main-content {
+    grid-column: 1;
+  }
+  
+  .sidebar {
+    grid-column: 1;
+    
+    @media (min-width: $on-laptop) {
+      grid-column: 2;
+    }
+  }
+}
+
+/* Page header */
+.page-header {
+  margin-bottom: $spacing-lg;
+  text-align: center;
+  
+  .page-title {
+    margin-bottom: $spacing-sm;
+  }
+}

data/_sass/_responsive.scss

@@ -0,0 +1,157 @@
+/* Responsive styles */
+
+/* Base responsive adjustments */
+@media (max-width: $on-palm) {
+  html {
+    font-size: 16px;
+  }
+  
+  h1 {
+    font-size: 1.9rem;
+  }
+  
+  h2 {
+    font-size: 1.6rem;
+  }
+  
+  h3 {
+    font-size: 1.3rem;
+  }
+  
+  .wrapper {
+    padding: 0 $spacing-sm;
+  }
+  
+  /* Adjust spacing for mobile */
+  .post-content {
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: $spacing-lg;
+    }
+  }
+}
+
+/* Medium screens */
+@media (min-width: $on-palm) and (max-width: $on-laptop) {
+  .wrapper {
+    padding: 0 $spacing-md;
+  }
+}
+
+/* Home page layout adjustments */
+@media (max-width: $on-palm) {
+  .post-preview {
+    grid-template-columns: 1fr;
+    
+    .post-preview-image {
+      order: -1;
+      margin-bottom: $spacing-sm;
+    }
+  }
+}
+
+/* Responsive tables */
+@media (max-width: $on-palm) {
+  table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Responsive images */
+@media (max-width: $on-palm) {
+  .post-content {
+    img {
+      margin-left: -$spacing-sm;
+      margin-right: -$spacing-sm;
+      max-width: calc(100% + #{$spacing-sm * 2});
+      width: calc(100% + #{$spacing-sm * 2});
+      border-radius: 0;
+    }
+  }
+}
+
+/* Navigation for mobile */
+@media (max-width: $on-palm) {
+  .site-header {
+    .wrapper {
+      position: relative; // Ensure proper positioning for children
+    }
+  }
+  
+  .site-nav {
+    position: relative;
+    margin-left: auto; // Push to the right side
+    
+    .menu-icon {
+      display: block;
+      margin-left: auto; // Right align
+    }
+    
+    .page-link {
+      display: block;
+      padding: $spacing-xs 0;
+      margin-left: 0; // Reset left margin
+      border-bottom: 1px solid rgba($border-color, 0.5);
+      
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+    
+    .trigger {
+      max-height: calc(100vh - 100px); // Prevent from being too tall
+      overflow-y: auto; // Allow scrolling if too many items
+    }
+    
+    // Fix dark mode toggle in mobile menu
+    .theme-toggle {
+      margin: $spacing-xs 0 0 0;
+      justify-content: flex-start;
+    }
+  }
+}
+
+/* Footer responsive adjustments */
+@media (max-width: $on-palm) {
+  .site-footer {
+    text-align: center;
+    
+    .footer-col {
+      margin-bottom: $spacing-md;
+    }
+    
+    .footer-links li, 
+    .social-links li {
+      display: inline-block;
+      margin: 0 $spacing-xs $spacing-xs 0;
+    }
+  }
+}
+
+/* Post navigation on small screens */
+@media (max-width: $on-palm) {
+  .post-navigation {
+    flex-direction: column;
+    gap: $spacing-sm;
+    
+    a {
+      text-align: center;
+      width: 100%;
+      flex: none;
+    }
+  }
+}
+
+/* Making code blocks more readable on small screens */
+@media (max-width: $on-palm) {
+  pre {
+    padding: $spacing-sm;
+    font-size: 0.85rem;
+  }
+  
+  .line-numbers pre span.line::before {
+    margin-right: $spacing-xs;
+    width: 1.2em;
+  }
+}

data/_sass/_syntax-highlighting.scss

@@ -0,0 +1,147 @@
+/* Syntax highlighting styles for code blocks */
+.highlight {
+  margin-bottom: $spacing-md;
+  border-radius: $border-radius;
+  background: $code-background;
+  
+  pre {
+    padding: $spacing-md;
+    overflow-x: auto;
+    border-radius: $border-radius;
+    border: 1px solid $border-color;
+    font-family: $code-font-family;
+    font-size: 0.85rem;
+    line-height: 1.6;
+    
+    code {
+      padding: 0;
+      background: none;
+    }
+  }
+  
+  .hll { background-color: #ffffcc }
+  .c { color: #999988; font-style: italic } /* Comment */
+  .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+  .k { color: #0086B3; font-weight: bold } /* Keyword */
+  .o { color: #000000; font-weight: bold } /* Operator */
+  .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+  .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+  .c1 { color: #999988; font-style: italic } /* Comment.Single */
+  .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+  .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+  .ge { color: #000000; font-style: italic } /* Generic.Emph */
+  .gr { color: #aa0000 } /* Generic.Error */
+  .gh { color: #999999 } /* Generic.Heading */
+  .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+  .go { color: #888888 } /* Generic.Output */
+  .gp { color: #555555 } /* Generic.Prompt */
+  .gs { font-weight: bold } /* Generic.Strong */
+  .gu { color: #aaaaaa } /* Generic.Subheading */
+  .gt { color: #aa0000 } /* Generic.Traceback */
+  .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+  .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+  .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+  .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+  .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+  .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+  .m { color: #009999 } /* Literal.Number */
+  .s { color: #d01040 } /* Literal.String */
+  .na { color: #008080 } /* Name.Attribute */
+  .nb { color: #0086B3 } /* Name.Builtin */
+  .nc { color: #445588; font-weight: bold } /* Name.Class */
+  .no { color: #008080 } /* Name.Constant */
+  .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+  .ni { color: #800080 } /* Name.Entity */
+  .ne { color: #990000; font-weight: bold } /* Name.Exception */
+  .nf { color: #990000; font-weight: bold } /* Name.Function */
+  .nl { color: #990000; font-weight: bold } /* Name.Label */
+  .nn { color: #555555 } /* Name.Namespace */
+  .nt { color: #000080 } /* Name.Tag */
+  .nv { color: #008080 } /* Name.Variable */
+  .ow { color: #000000; font-weight: bold } /* Operator.Word */
+  .w { color: #bbbbbb } /* Text.Whitespace */
+  .mf { color: #009999 } /* Literal.Number.Float */
+  .mh { color: #009999 } /* Literal.Number.Hex */
+  .mi { color: #009999 } /* Literal.Number.Integer */
+  .mo { color: #009999 } /* Literal.Number.Oct */
+  .sb { color: #d01040 } /* Literal.String.Backtick */
+  .sc { color: #d01040 } /* Literal.String.Char */
+  .sd { color: #d01040 } /* Literal.String.Doc */
+  .s2 { color: #d01040 } /* Literal.String.Double */
+  .se { color: #d01040 } /* Literal.String.Escape */
+  .sh { color: #d01040 } /* Literal.String.Heredoc */
+  .si { color: #d01040 } /* Literal.String.Interpol */
+  .sx { color: #d01040 } /* Literal.String.Other */
+  .sr { color: #009926 } /* Literal.String.Regex */
+  .s1 { color: #d01040 } /* Literal.String.Single */
+  .ss { color: #990073 } /* Literal.String.Symbol */
+  .bp { color: #999999 } /* Name.Builtin.Pseudo */
+  .vc { color: #008080 } /* Name.Variable.Class */
+  .vg { color: #008080 } /* Name.Variable.Global */
+  .vi { color: #008080 } /* Name.Variable.Instance */
+  .il { color: #009999 } /* Literal.Number.Integer.Long */
+}
+
+/* Filename caption for code blocks */
+.code-filename {
+  display: block;
+  background: $gray;
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+  padding: $spacing-xs $spacing-sm;
+  font-family: $code-font-family;
+  font-size: 0.8rem;
+  color: darken($text-color, 10%);
+  border: 1px solid $border-color;
+  border-bottom: none;
+  
+  + .highlight {
+    pre {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+}
+
+/* Language label */
+.language-label {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 2px 6px;
+  font-size: 0.7rem;
+  background: $light-gray;
+  color: $dark-gray;
+  border-bottom-left-radius: $border-radius-sm;
+  user-select: none;
+}
+
+/* Code block container with relative positioning for language label */
+.code-container {
+  position: relative;
+}
+
+/* Copy button for code blocks */
+.copy-code-button {
+  position: absolute;
+  right: $spacing-xs;
+  top: $spacing-xs;
+  background: $light-gray;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-sm;
+  font-size: 0.75rem;
+  padding: 2px 6px;
+  color: $dark-gray;
+  cursor: pointer;
+  transition: $transition-fast;
+  opacity: 0;
+  
+  &:hover {
+    background: darken($light-gray, 5%);
+    color: $text-color;
+  }
+}
+
+.highlight:hover .copy-code-button {
+  opacity: 1;
+}

data/_sass/_typography.scss

@@ -0,0 +1,226 @@
+/* Typography styles */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: $heading-line-height;
+  color: darken($text-color, 5%);
+  margin-top: $spacing-lg;
+  margin-bottom: $spacing-sm;
+  letter-spacing: -0.02em;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin-top: 0;
+  background: linear-gradient(to right, $primary-color, $secondary-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}
+
+h2 {
+  font-size: 1.8rem;
+  position: relative;
+  
+  &::after {
+    content: '';
+    display: block;
+    width: 3rem;
+    height: 0.2rem;
+    background: linear-gradient(to right, $secondary-color, $accent-color);
+    margin-top: 0.5rem;
+    border-radius: 1rem;
+  }
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1.25rem;
+  color: $secondary-color;
+}
+
+h5 {
+  font-size: 1.1rem;
+}
+
+h6 {
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Paragraph spacing */
+p {
+  margin-bottom: $spacing-md;
+}
+
+/* Emphasis and strong */
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: 700;
+  color: darken($text-color, 10%);
+}
+
+/* Lead paragraph (larger, for introductions) */
+.lead {
+  font-size: 1.3rem;
+  font-weight: 400;
+  line-height: 1.6;
+  margin-bottom: $spacing-lg;
+  color: $secondary-color;
+}
+
+/* Drop cap for first paragraph */
+.dropcap {
+  float: left;
+  font-size: 4rem;
+  line-height: 0.7;
+  padding-right: 0.2em;
+  margin-top: 0.1em;
+  font-weight: 700;
+  background: linear-gradient($primary-color, $accent-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}
+
+/* Small text */
+small, .small {
+  font-size: $small-font-size;
+  color: $dark-gray;
+}
+
+/* Text utility classes */
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-primary {
+  color: $primary-color;
+}
+
+.text-secondary {
+  color: $secondary-color;
+}
+
+.text-accent {
+  color: $accent-color;
+}
+
+.text-muted {
+  color: $dark-gray;
+}
+
+.text-gradient {
+  background: linear-gradient(to right, $primary-color, $accent-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}
+
+/* Lists */
+ul, ol {
+  margin-left: $spacing-md;
+  margin-bottom: $spacing-md;
+  
+  li {
+    margin-bottom: $spacing-xs;
+    
+    &::marker {
+      color: $secondary-color;
+    }
+  }
+}
+
+ul.fancy-list {
+  list-style: none;
+  margin-left: 0;
+  
+  li {
+    position: relative;
+    padding-left: $spacing-md;
+    margin-bottom: $spacing-sm;
+    
+    &::before {
+      content: '→';
+      color: $accent-color;
+      position: absolute;
+      left: 0;
+    }
+  }
+}
+
+dl {
+  margin-bottom: $spacing-md;
+  
+  dt {
+    font-weight: 700;
+    margin-top: $spacing-sm;
+    color: $secondary-color;
+  }
+  
+  dd {
+    margin-left: $spacing-md;
+    margin-bottom: $spacing-sm;
+  }
+}
+
+/* Inline code */
+code {
+  font-family: $code-font-family;
+  font-size: 0.9em;
+  padding: 0.2em 0.4em;
+  background-color: $code-background;
+  border-radius: $border-radius-sm;
+  color: $accent-color;
+}
+
+/* Links in headings */
+h1, h2, h3, h4, h5, h6 {
+  a {
+    color: inherit;
+    
+    &:hover {
+      color: $link-color;
+      text-decoration: none;
+    }
+  }
+}
+
+/* Highlighted text */
+.highlight-text {
+  position: relative;
+  display: inline-block;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 0.3em;
+    width: 100%;
+    background-color: rgba($secondary-color, 0.3);
+    z-index: -1;
+    transition: $transition-base;
+  }
+  
+  &:hover::before {
+    height: 0.6em;
+  }
+}