arsxy-theme 1.0.0.pre.rc

data/_sass/components/_footer.scss

@@ -0,0 +1,170 @@
+/* Footer styles */
+.site-footer {
+  background: linear-gradient(to bottom, $light-gray, $background-color);
+  padding: $spacing-xl 0 $spacing-lg;
+  border-top: 1px solid $border-color;
+  margin-top: $spacing-xl;
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: $primary-color; /* Changed from gradient to solid primary color */
+  }
+  
+  .footer-content {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacing-lg;
+    margin-bottom: $spacing-lg;
+    
+    @media (min-width: $on-palm) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    
+    @media (min-width: $on-laptop) {
+      grid-template-columns: 2fr 1fr 1fr;
+    }
+  }
+  
+  .footer-col {
+    h2 {
+      margin-top: 0;
+      font-size: 1.2rem;
+      margin-bottom: $spacing-md;
+      color: $primary-color;  // Changed from $secondary-color to $primary-color
+      position: relative;
+      display: inline-block;
+      
+      &::after {
+        content: '';
+        display: block;
+        width: 2rem;
+        height: 0.15rem;
+        background: $primary-color;  // Changed from $accent-color to $primary-color
+        margin-top: 0.3rem;
+        border-radius: 1rem;
+      }
+    }
+    
+    p {
+      color: lighten($text-color, 10%);
+    }
+  }
+  
+  .footer-links, .social-links {
+    list-style: none;
+    margin-left: 0;
+    
+    li {
+      margin-bottom: $spacing-sm;
+      transition: $transition-base;
+      
+      &:hover {
+        transform: translateX(3px);
+      }
+    }
+    
+    a {
+      color: lighten($text-color, 10%);
+      transition: $transition-base;
+      position: relative;
+      padding-left: 0; /* Removed padding-left completely */
+      
+      &:hover {
+        color: $primary-color;
+      }
+    }
+  }
+  
+  .social-links {
+    display: flex;
+    flex-wrap: wrap;
+    
+    li {
+      display: inline-block;
+      margin-right: $spacing-md;
+      
+      &:hover {
+        transform: translateY(-3px);
+      }
+    }
+    
+    a {
+      padding-left: 0;
+    }
+    
+    .social-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background-color: rgba($primary-color, 0.1);
+      color: $primary-color;
+      transition: $transition-base;
+      
+      &:hover {
+        background-color: $primary-color;
+        color: white;
+        box-shadow: $shadow-md;
+      }
+    }
+  }
+  
+  .footer-bottom {
+    border-top: 1px solid rgba($border-color, 0.5);
+    padding-top: $spacing-md;
+    font-size: $small-font-size;
+    color: $dark-gray;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    
+    @media (max-width: $on-palm) {
+      flex-direction: column;
+      gap: $spacing-xs;
+    }
+    
+    p {
+      margin-bottom: 0;
+    }
+    
+    a {
+      color: $secondary-color;
+      
+      &:hover {
+        color: $accent-color;
+      }
+    }
+  }
+  
+  .back-to-top {
+    position: absolute;
+    right: $spacing-md;
+    bottom: $spacing-md;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: $background-color;
+    color: $primary-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    box-shadow: $shadow-md;
+    transition: $transition-base;
+    
+    &:hover {
+      transform: translateY(-5px);
+      background-color: $primary-color;
+      color: white;
+    }
+  }
+}

data/_sass/components/_header.scss

@@ -0,0 +1,313 @@
+/* Header styles */
+.site-header {
+  background-color: rgba($background-color, 0.95);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid $border-color;
+  padding: $spacing-md 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: $shadow-sm;
+  transition: $transition-base;
+  
+  &:hover {
+    box-shadow: $shadow-md;
+  }
+  
+  .wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  
+  .site-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-decoration: none;
+    color: $text-color;
+    position: relative;
+    padding: $spacing-xs $spacing-sm;
+    background: linear-gradient(to right, $primary-color, $accent-color);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(to right, rgba($primary-color, 0.1), rgba($accent-color, 0.1));
+      border-radius: $border-radius;
+      z-index: -1;
+      transform: scale(0.9);
+      opacity: 0;
+      transition: $transition-base;
+    }
+    
+    &:hover {
+      &::before {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+  
+  /* Right side of header containing actions and nav */
+  .site-header-right {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+  }
+}
+
+/* Navigation */
+.site-nav {
+  display: flex;
+  align-items: center;
+  
+  .page-link {
+    margin-left: $spacing-md;
+    font-weight: 500;
+    font-size: 1rem;
+    color: $text-color;
+    position: relative;
+    padding: $spacing-xs 0;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      transform: scaleX(0);
+      height: 2px;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(to right, $secondary-color, $accent-color);
+      transform-origin: bottom right;
+      transition: transform 0.3s ease-out;
+      border-radius: 1px;
+    }
+    
+    &:hover, &.active {
+      color: $primary-color;
+      text-decoration: none;
+      
+      &::after {
+        transform: scaleX(1);
+        transform-origin: bottom left;
+      }
+    }
+  }
+  
+  /* Mobile menu */
+  .nav-trigger {
+    display: none;
+  }
+  
+  .menu-icon {
+    display: none;
+  }
+  
+  .trigger {
+    display: flex;
+    align-items: center;
+  }
+}
+
+/* Site header actions container */
+.site-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  
+  .search-toggle {
+    margin: 0;
+    
+    .search-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: $spacing-xs;
+      color: $dark-gray;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      transition: $transition-base;
+      
+      &:hover {
+        color: $text-color;
+        background-color: rgba($primary-color, 0.1);
+      }
+      
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+  
+  /* Dark mode toggle */
+  .theme-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: $spacing-xs;
+    color: $dark-gray;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: $transition-base;
+    
+    &:hover {
+      color: $text-color;
+      background-color: rgba($primary-color, 0.1);
+      transform: rotate(15deg);
+    }
+    
+    &.dark-active {
+      .theme-toggle-icon.sun {
+        display: block;
+      }
+      
+      .theme-toggle-icon.moon {
+        display: none;
+      }
+    }
+    
+    .theme-toggle-icon {
+      width: 20px;
+      height: 20px;
+    }
+    
+    .theme-toggle-icon.sun {
+      display: none;
+    }
+    
+    .theme-toggle-icon.moon {
+      display: block;
+    }
+  }
+}
+
+/* Mobile responsive styles */
+@media screen and (max-width: $on-palm) {
+  .site-header-right {
+    align-items: center;
+  }
+
+  .site-nav {
+    position: relative;
+    display: flex;
+    align-items: center;
+    
+    label[for="nav-trigger"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      z-index: 2;
+      cursor: pointer;
+      margin: 0;
+      padding: 8px; /* Added padding to push the icon down slightly */
+    }
+    
+    .menu-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px; /* Reduced height to match other icons */
+      padding: 0;
+      margin: 0;
+      
+      > svg {
+        fill: $text-color;
+        width: 18px;
+        height: 15px;
+      }
+    }
+    
+    input ~ .trigger {
+      clear: both;
+      display: none;
+      flex-direction: column;
+      padding: $spacing-sm;
+      background: linear-gradient(to bottom right, rgba($background-color, 0.95), rgba($background-color, 0.99));
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      position: absolute;
+      top: 100%;
+      right: 0;
+      width: 200px;
+      border-radius: $border-radius;
+      border: 1px solid $border-color;
+      box-shadow: $shadow-md;
+      z-index: 1001;
+    }
+    
+    input:checked ~ .trigger {
+      display: flex;
+      animation: fadeDown 0.3s ease-out forwards;
+    }
+    
+    .page-link {
+      display: block;
+      margin: 0 0 $spacing-sm 0;
+      padding: $spacing-xs 0;
+      line-height: 1.5;
+      text-align: left;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      &::after {
+        bottom: -2px;
+      }
+    }
+  }
+  
+  /* Ensure search and dark mode buttons have same vertical alignment */
+  .site-header-actions {
+    display: flex;
+    align-items: center;
+    
+    .search-toggle, .theme-toggle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 36px;
+      padding: 8px; /* Match padding with hamburger menu */
+    }
+  }
+}
+
+/* Desktop layout styles */
+@media screen and (min-width: $on-palm + 1) {
+  .site-header-right {
+    flex-direction: row-reverse;
+  }
+  
+  .site-nav {
+    margin-right: $spacing-md;
+  }
+}
+
+@keyframes fadeDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}