howdy-jekyll-theme 1.0.0

data/_sass/_components.scss

@@ -0,0 +1,767 @@
+// Howdy Jekyll Theme - Component Styles
+
+@use "variables" as *;
+
+// Buttons
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--howdy-spacing-sm);
+  padding: 12px 24px;
+  border-radius: var(--howdy-radius-full);
+  font-family: var(--howdy-font-primary);
+  font-weight: 600;
+  font-size: 15px;
+  letter-spacing: 0.02em;  // Required for UI labels/buttons
+  text-decoration: none;
+  cursor: pointer;
+  transition: var(--howdy-transition);
+  border: 2px solid transparent;
+  min-height: 44px;
+
+  &.btn-primary {
+    background-color: var(--howdy-text-primary);
+    color: var(--howdy-bg-white);
+
+    &:hover {
+      background-color: var(--howdy-accent-green);
+      color: var(--howdy-bg-white);
+    }
+  }
+
+  &.btn-secondary {
+    background-color: transparent;
+    color: var(--howdy-text-primary);
+    border-color: var(--howdy-border);
+
+    &:hover {
+      border-color: var(--howdy-accent-green);
+      color: var(--howdy-accent-green);
+    }
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+
+    @media (max-width: $howdy-lg) {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &:hover svg {
+    transform: translateX(-3px);
+  }
+
+  &.post-nav-next svg {
+    transform: translateX(0);
+  }
+
+  &.post-nav-next:hover svg {
+    transform: translateX(3px);
+  }
+
+  @media (max-width: $howdy-lg) {
+    padding: 10px 20px;
+    font-size: 14px;
+    min-height: 40px;
+  }
+
+  @media (max-width: $howdy-sm) {
+    width: 100%;
+    justify-content: center;
+    padding: 12px 20px;
+    font-size: 13px;
+  }
+}
+
+// Project card
+.project-card {
+  @extend .post-card;
+
+  .project-image {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: var(--howdy-radius-md);
+    background-color: var(--howdy-bg-light-gray);
+    transition: transform 0.3s ease;
+
+    @media (max-width: $howdy-sm) {
+      height: 160px;
+    }
+
+    @media (max-width: $howdy-xs) {
+      height: 140px;
+    }
+  }
+
+  &:hover {
+    border-color: var(--howdy-accent-green);
+  }
+
+  &:hover .project-image {
+    transform: scale(1.02);
+  }
+
+  .project-title {
+    font-family: var(--howdy-font-primary);
+    font-weight: 600;
+    font-size: 18px;
+    color: var(--howdy-text-primary);
+    transition: var(--howdy-transition);
+  }
+
+  .project-excerpt {
+    @extend .body-regular !optional;
+    margin: 0;
+  }
+}
+
+// Project category badge
+.project-category {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  background-color: var(--howdy-bg-green-tint);
+  color: var(--howdy-accent-green);
+  border-radius: var(--howdy-radius-full);
+  font-size: 12px;
+  letter-spacing: 0.01em;
+  font-weight: 500;
+  transition: var(--howdy-transition);
+  width: fit-content;
+}
+
+// Post card (blog)
+.post-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--howdy-spacing-md);
+  padding: var(--howdy-spacing-md);
+  border-radius: var(--howdy-radius-lg);
+  background-color: var(--howdy-bg-white);
+  border: 1px solid var(--howdy-border);
+  transition: var(--howdy-transition);
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: var(--howdy-accent-green);
+    background-color: var(--howdy-bg-light-gray);
+  }
+
+  &:hover .post-image {
+    transform: scale(1.02);
+  }
+
+  .post-image {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: var(--howdy-radius-md);
+    background-color: var(--howdy-bg-light-gray);
+    transition: transform 0.3s ease;
+
+    @media (max-width: $howdy-sm) {
+      height: 160px;
+    }
+
+    @media (max-width: $howdy-xs) {
+      height: 140px;
+    }
+  }
+
+  .post-title {
+    font-family: var(--howdy-font-primary);
+    font-weight: 600;
+    font-size: 18px;
+    color: var(--howdy-text-primary);
+    transition: var(--howdy-transition);
+  }
+
+  .post-excerpt {
+    @extend .body-regular !optional;
+    margin: 0;
+  }
+
+  .post-date {
+    @extend .small-text !optional;
+    color: var(--howdy-text-muted);
+  }
+}
+
+// Post category badge
+.post-category {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: var(--howdy-radius-full);
+  font-size: 12px;
+  letter-spacing: 0.01em;
+  font-weight: 500;
+  transition: var(--howdy-transition);
+  width: fit-content;
+
+  &.category-tutorials {
+    background-color: var(--howdy-bg-blue-tint);
+    color: var(--howdy-accent-blue);
+  }
+
+  &.category-inspiration {
+    background-color: var(--howdy-bg-orange-tint);
+    color: var(--howdy-accent-orange);
+  }
+
+  &.category-freebies {
+    background-color: var(--howdy-bg-green-tint);
+    color: var(--howdy-accent-green);
+  }
+
+  &.category-interviews {
+    background-color: var(--howdy-bg-purple-tint);
+    color: var(--howdy-accent-purple);
+  }
+}
+
+// Grid layouts
+.projects-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--howdy-spacing-lg);
+}
+
+.posts-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--howdy-spacing-lg);
+}
+
+.post-card,
+.project-card {
+  width: 100%;
+}
+
+// Pagination
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--howdy-spacing-sm);
+  margin-top: var(--howdy-spacing-48);
+  flex-wrap: wrap;
+}
+
+.pagination-page {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--howdy-border);
+  border-radius: var(--howdy-radius-md);
+  font-family: var(--howdy-font-primary);
+  font-weight: 500;
+  font-size: 15px;
+  color: var(--howdy-text-primary);
+  text-decoration: none;
+  cursor: pointer;
+  transition: var(--howdy-transition);
+
+  &:hover {
+    border-color: var(--howdy-accent-green);
+    color: var(--howdy-accent-green);
+  }
+
+  &.active {
+    background-color: var(--howdy-text-primary);
+    color: var(--howdy-bg-white);
+    border-color: transparent;
+  }
+}
+
+// Contact page
+.contact-intro {
+  font-size: 18px;
+  color: var(--howdy-text-secondary);
+  max-width: 50ch;
+  line-height: 1.6;
+}
+
+.contact-response-time {
+  margin-top: var(--howdy-spacing-md);
+  font-size: 14px;
+  color: var(--howdy-text-muted);
+}
+
+.contact-form-wrapper {
+  margin-top: var(--howdy-spacing-xl);
+  padding-top: var(--howdy-spacing-xl);
+  border-top: 1px solid var(--howdy-border);
+}
+
+.contact-form-title {
+  font-family: var(--howdy-font-primary);
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--howdy-text-primary);
+  margin-bottom: var(--howdy-spacing-md);
+}
+
+.contact-form {
+  max-width: 100%;
+
+  .form-row {
+    display: flex;
+    gap: var(--howdy-spacing-md);
+
+    @media (max-width: $howdy-sm) {
+      flex-direction: column;
+    }
+  }
+
+  .form-group {
+    flex: 1;
+    margin-bottom: var(--howdy-spacing-md);
+
+    input,
+    textarea {
+      width: 100%;
+      padding: 12px 16px;
+      border: 1px solid var(--howdy-border);
+      border-radius: var(--howdy-radius-md);
+      font-family: var(--howdy-font-primary);
+      font-size: 15px;
+      color: var(--howdy-text-primary);
+      background: transparent;
+      transition: border-color 0.2s ease;
+
+      &::placeholder {
+        color: var(--howdy-text-muted);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--howdy-accent-green);
+        outline-offset: 0;
+        border-color: var(--howdy-accent-green);
+      }
+    }
+
+    textarea {
+      resize: vertical;
+      min-height: 120px;
+    }
+  }
+
+  .btn {
+    margin-top: var(--howdy-spacing-sm);
+  }
+}
+
+.contact-faq {
+  margin-top: var(--howdy-spacing-xl);
+  padding-top: var(--howdy-spacing-xl);
+  border-top: 1px solid var(--howdy-border);
+}
+
+.contact-faq-title {
+  font-family: var(--howdy-font-primary);
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--howdy-text-primary);
+  margin-bottom: var(--howdy-spacing-lg);
+}
+
+.faq-item {
+  border-bottom: 1px solid var(--howdy-border);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.faq-question {
+  font-family: var(--howdy-font-primary);
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--howdy-text-primary);
+  padding: 16px 0;
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::after {
+    content: "";
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    margin-left: 16px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23797d85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+    transition: transform 0.2s var(--howdy-ease-out);
+  }
+
+  [open] > &::after {
+    transform: rotate(180deg);
+  }
+}
+
+.faq-answer {
+  padding-bottom: 16px;
+  font-size: 15px;
+  color: var(--howdy-text-secondary);
+  line-height: 1.6;
+}
+
+.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;
+}
+
+// Contact info
+.contact-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--howdy-spacing-lg);
+
+  .contact-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--howdy-spacing-xs);
+
+    .contact-label {
+      @extend .small-text !optional;
+      color: var(--howdy-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+
+    .contact-value {
+      @extend .body-large !optional;
+      color: var(--howdy-text-primary);
+
+      a {
+        color: inherit;
+        text-decoration: none;
+
+        &:hover {
+          color: var(--howdy-accent-green);
+        }
+      }
+
+      .contact-arrow {
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 4px;
+        transition: transform 0.2s var(--howdy-ease-out);
+      }
+
+      a:hover .contact-arrow {
+        transform: translateX(2px);
+      }
+    }
+  }
+}
+
+// Dark mode toggle
+.theme-toggle {
+  background: none;
+  border: 1px solid var(--howdy-border);
+  border-radius: var(--howdy-radius-full);
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--howdy-transition);
+  color: var(--howdy-text-primary);
+
+  &:hover {
+    border-color: var(--howdy-accent-green);
+    color: var(--howdy-accent-green);
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+// Social links
+.social-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--howdy-spacing-md);
+  margin-top: var(--howdy-spacing-lg);
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    color: var(--howdy-text-muted);
+    transition: var(--howdy-transition);
+
+    &:hover {
+      color: var(--howdy-accent-green);
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+// Table of contents
+.toc {
+  margin: var(--howdy-spacing-md) 0 var(--howdy-spacing-lg);
+  padding: var(--howdy-spacing-md) var(--howdy-spacing-lg);
+  background-color: var(--howdy-bg-light-gray);
+  border-radius: var(--howdy-radius-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--howdy-spacing-sm);
+
+  .toc-title {
+    font-weight: 600;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--howdy-text-muted);
+    margin-bottom: var(--howdy-spacing-xs);
+  }
+
+  a {
+    color: var(--howdy-text-secondary);
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 4px 0;
+    transition: var(--howdy-transition);
+
+    &:hover {
+      color: var(--howdy-accent-green);
+    }
+
+    &[style*="padding-left: 16px"],
+    &[style*="padding-left:16px"],
+    &[style*="padding-left: 24px"],
+    &[style*="padding-left:24px"],
+    &[style*="padding-left: 32px"],
+    &[style*="padding-left:32px"] {
+      &::before {
+        content: "– ";
+        color: var(--howdy-text-muted);
+        margin-right: 4px;
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--howdy-spacing-xs);
+
+    ul {
+      margin-top: var(--howdy-spacing-xs);
+      padding-left: 16px;
+    }
+  }
+}
+
+// Share buttons
+.share-buttons {
+  display: flex;
+  align-items: center;
+  gap: var(--howdy-spacing-sm);
+  margin: var(--howdy-spacing-xl) 0;
+
+  .share-label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--howdy-text-muted);
+    margin-right: var(--howdy-spacing-xs);
+  }
+
+  .share-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border-radius: var(--howdy-radius-full);
+    border: 1px solid var(--howdy-border);
+    background: transparent;
+    color: var(--howdy-text-secondary);
+    cursor: pointer;
+    transition: var(--howdy-transition);
+    text-decoration: none;
+    padding: 0;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    &:hover {
+      border-color: var(--howdy-accent-green);
+      color: var(--howdy-accent-green);
+    }
+  }
+}
+
+// Newsletter
+.newsletter {
+  margin: var(--howdy-spacing-xl) 0;
+  padding: var(--howdy-spacing-lg);
+  background-color: var(--howdy-bg-green-tint);
+  border-radius: var(--howdy-radius-lg);
+
+  h3 {
+    margin: 0 0 var(--howdy-spacing-xs);
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--howdy-text-primary);
+  }
+
+  p {
+    margin: 0 0 var(--howdy-spacing-md);
+    font-size: 14px;
+    color: var(--howdy-text-secondary);
+  }
+
+  .newsletter-form {
+    display: flex;
+    gap: var(--howdy-spacing-sm);
+
+    input[type="email"] {
+      flex: 1;
+      padding: 10px 16px;
+      border: 1px solid var(--howdy-border);
+      border-radius: var(--howdy-radius-full);
+      font-family: var(--howdy-font-primary);
+      font-size: 14px;
+      background-color: var(--howdy-bg-white);
+      color: var(--howdy-text-primary);
+      transition: var(--howdy-transition);
+      min-height: 44px;
+
+      &:focus-visible {
+        outline: 2px solid var(--howdy-accent-green);
+        outline-offset: 0;
+        border-color: var(--howdy-accent-green);
+      }
+    }
+
+    button {
+      padding: 10px 20px;
+      border: none;
+      border-radius: var(--howdy-radius-full);
+      background-color: var(--howdy-accent-green);
+      color: var(--howdy-bg-white);
+      font-family: var(--howdy-font-primary);
+      font-weight: 600;
+      font-size: 14px;
+      cursor: pointer;
+      transition: var(--howdy-transition);
+      min-height: 44px;
+
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+
+    @media (max-width: $howdy-sm) {
+      flex-direction: column;
+    }
+  }
+}
+
+// Comments
+.comments {
+  margin: var(--howdy-spacing-xl) 0;
+  padding-top: var(--howdy-spacing-lg);
+  border-top: 1px solid var(--howdy-border);
+}
+
+// About page
+.about-intro {
+  margin-top: 12px;
+  color: var(--howdy-text-secondary);
+  max-width: 50ch;
+}
+
+.about-body {
+  color: var(--howdy-text-secondary);
+  max-width: 50ch;
+}
+
+.about-body-muted {
+  color: var(--howdy-text-muted);
+  max-width: 50ch;
+}
+
+.about-resume-wrapper {
+  margin-top: 24px;
+}
+
+.about-testimonials {
+  margin-top: 48px;
+
+  .about-testimonials-heading {
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--howdy-text-muted);
+    margin-bottom: 24px;
+  }
+
+  .about-testimonial {
+    margin-bottom: 24px;
+
+    .about-testimonial-quote {
+      margin-bottom: 4px;
+    }
+
+    .about-testimonial-attribution {
+      font-size: 14px;
+      color: var(--howdy-text-muted);
+      cite {
+        font-style: normal;
+      }
+    }
+  }
+}
+
+// Reading time badge
+.detail-read-time {
+  font-size: 13px;
+  color: var(--howdy-text-muted);
+  font-weight: 500;
+}