goofmint 1.0.0

package/_sass/_base.scss

@@ -0,0 +1,58 @@
+// Base styles
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #333;
+  background-color: #fff;
+}
+
+.wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: color 0.3s ease;
+
+  &:hover {
+    color: var(--link-hover);
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+h1 { font-size: 2.5em; }
+h2 { font-size: 2em; }
+h3 { font-size: 1.5em; }
+
+p {
+  margin-bottom: 1em;
+}
+
+.btn {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: var(--button-bg);
+  color: #fff;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: var(--button-hover);
+    color: #fff;
+  }
+}

package/_sass/_components.scss

@@ -0,0 +1,113 @@
+// Component styles
+
+// Project grid
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 30px;
+  margin-bottom: 30px;
+}
+
+.project-card {
+  padding: 20px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+
+  h2, h3 {
+    margin-bottom: 10px;
+
+    a {
+      color: #333;
+      &:hover {
+        color: #0066cc;
+      }
+    }
+  }
+}
+
+.project-tech {
+  margin: 10px 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tech-tag {
+  display: inline-block;
+  padding: 4px 12px;
+  background-color: #e9ecef;
+  border-radius: 12px;
+  font-size: 0.85em;
+  color: #666;
+}
+
+// Post list
+.post-list {
+  list-style: none;
+
+  li {
+    margin-bottom: 30px;
+    padding-bottom: 30px;
+    border-bottom: 1px solid #e9ecef;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  h2, h3 {
+    margin-bottom: 10px;
+
+    a {
+      color: #333;
+      &:hover {
+        color: #0066cc;
+      }
+    }
+  }
+
+  .post-meta {
+    color: #666;
+    font-size: 0.9em;
+    margin-bottom: 10px;
+  }
+}
+
+// Post/Project content
+.post, .project {
+  max-width: 800px;
+  margin: 0 auto;
+
+  .post-header, .project-header {
+    margin-bottom: 30px;
+
+    h1 {
+      margin-bottom: 15px;
+    }
+  }
+
+  .post-content, .project-content {
+    line-height: 1.8;
+
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+      margin: 20px 0;
+    }
+
+    // Code and pre styles are defined in _syntax.scss
+  }
+
+  .project-links {
+    margin-top: 30px;
+    display: flex;
+    gap: 15px;
+  }
+}

package/_sass/_layout.scss

@@ -0,0 +1,140 @@
+// Layout styles
+
+// Header
+.site-header {
+  background-color: var(--header-bg);
+  border-bottom: 1px solid var(--header-border);
+  padding: 20px 0;
+
+  .wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .site-title {
+    font-size: 1.5em;
+    font-weight: 700;
+    color: var(--text-color);
+
+    &:hover {
+      color: var(--link-color);
+    }
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+
+  .site-nav {
+    display: flex;
+    gap: 20px;
+
+    a {
+      color: var(--text-color);
+      font-weight: 500;
+      opacity: 0.8;
+
+      &:hover {
+        color: var(--link-color);
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// Main content
+.page-content {
+  padding: 40px 0;
+  min-height: calc(100vh - 200px);
+}
+
+// Footer
+.site-footer {
+  background-color: var(--header-bg);
+  border-top: 1px solid var(--header-border);
+  padding: 40px 0;
+  margin-top: 60px;
+
+  .footer-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+    text-align: center;
+    color: var(--text-color);
+    opacity: 0.8;
+
+    .footer-info {
+      p {
+        margin-bottom: 0.5em;
+      }
+    }
+  }
+
+  .social-links {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .social-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: transparent;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: rgba(16, 185, 129, 0.1);
+      transform: translateY(-3px);
+    }
+
+    .social-icon {
+      width: 24px;
+      height: 24px;
+      filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(95%) contrast(90%);
+      transition: filter 0.3s ease;
+    }
+
+    &:hover .social-icon {
+      filter: brightness(0) saturate(100%) invert(56%) sepia(98%) saturate(565%) hue-rotate(106deg) brightness(93%) contrast(92%);
+    }
+  }
+}
+
+// Hero section
+.hero {
+  text-align: center;
+  padding: 60px 0;
+  background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
+  color: #fff;
+  margin-bottom: 40px;
+  border-radius: 8px;
+
+  h1 {
+    font-size: 3em;
+    margin-bottom: 0.3em;
+  }
+
+  p {
+    font-size: 1.2em;
+  }
+}
+
+// Sections
+section {
+  margin-bottom: 60px;
+
+  h2 {
+    margin-bottom: 30px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid var(--border-color);
+  }
+}

package/_sass/_syntax.scss

@@ -0,0 +1,137 @@
+// Syntax highlighting for code blocks
+// Light and dark mode support
+
+.highlight {
+  border-radius: 2px;
+  overflow-x: auto;
+  margin: 1.5em 0;
+
+  pre {
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+  }
+
+  code {
+    background-color: transparent;
+    padding: 0;
+    border: none;
+  }
+
+  // Comments
+  .c, .c1, .cm, .cp, .cs {
+    color: var(--syntax-comment);
+    font-style: italic;
+  }
+
+  // Errors
+  .err {
+    color: var(--syntax-error);
+    background-color: var(--syntax-error-bg);
+  }
+
+  // Keywords
+  .k, .kc, .kd, .kn, .kp, .kr, .kt {
+    color: var(--syntax-keyword);
+    font-weight: bold;
+  }
+
+  // Operators
+  .o, .ow {
+    color: var(--syntax-operator);
+  }
+
+  // Punctuation
+  .p {
+    color: var(--syntax-punctuation);
+  }
+
+  // Names
+  .n, .nb, .nc, .ne, .nf, .ni, .nl, .nn, .nt, .nv {
+    color: var(--syntax-name);
+  }
+
+  // Functions
+  .nf {
+    color: var(--syntax-function);
+    font-weight: bold;
+  }
+
+  // Classes
+  .nc {
+    color: var(--syntax-class);
+    font-weight: bold;
+  }
+
+  // Strings
+  .s, .s1, .s2, .sb, .sc, .sd, .se, .sh, .si, .sx {
+    color: var(--syntax-string);
+  }
+
+  // Numbers
+  .m, .mf, .mh, .mi, .mo {
+    color: var(--syntax-number);
+  }
+
+  // Variables
+  .na, .nb, .nv, .vc, .vg, .vi {
+    color: var(--syntax-variable);
+  }
+
+  // Built-ins
+  .nb, .bp {
+    color: var(--syntax-builtin);
+  }
+
+  // Constants
+  .no, .kc {
+    color: var(--syntax-constant);
+  }
+
+  // Generics
+  .gd {
+    color: var(--syntax-deleted);
+    background-color: var(--syntax-deleted-bg);
+  }
+
+  .gi {
+    color: var(--syntax-inserted);
+    background-color: var(--syntax-inserted-bg);
+  }
+
+  .gh {
+    color: var(--syntax-heading);
+    font-weight: bold;
+  }
+
+  .gu {
+    color: var(--syntax-subheading);
+    font-weight: bold;
+  }
+}
+
+// Inline code
+code {
+  background-color: var(--inline-code-bg);
+  color: var(--inline-code-text);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 0.9em;
+}
+
+// Pre blocks without highlight class
+pre {
+  background-color: var(--code-bg);
+  color: var(--code-text);
+  padding: 1em;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 1.5em 0;
+
+  code {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+  }
+}

package/_sass/_theme.scss

@@ -0,0 +1,261 @@
+// Theme variables
+:root {
+  // Light mode colors
+  --bg-color: #ffffff;
+  --text-color: #333333;
+  --header-bg: #f0fdf4;
+  --header-border: #d1fae5;
+  --link-color: #10b981;
+  --link-hover: #059669;
+  --card-bg: #f0fdf4;
+  --border-color: #d1fae5;
+  --hero-gradient-start: #10b981;
+  --hero-gradient-end: #14b8a6;
+  --code-bg: #f0fdf4;
+  --shadow-color: rgba(16, 185, 129, 0.1);
+  --button-bg: #10b981;
+  --button-hover: #059669;
+  --tag-bg: #d1fae5;
+  --tag-text: #047857;
+
+  // Syntax highlighting (light mode)
+  --code-text: #1f2937;
+  --inline-code-bg: #d1fae5;
+  --inline-code-text: #065f46;
+  --syntax-comment: #6b7280;
+  --syntax-error: #dc2626;
+  --syntax-error-bg: #fee2e2;
+  --syntax-keyword: #059669;
+  --syntax-operator: #0891b2;
+  --syntax-punctuation: #374151;
+  --syntax-name: #1f2937;
+  --syntax-function: #0d9488;
+  --syntax-class: #0891b2;
+  --syntax-string: #ea580c;
+  --syntax-number: #c026d3;
+  --syntax-variable: #4338ca;
+  --syntax-builtin: #0d9488;
+  --syntax-constant: #7c3aed;
+  --syntax-deleted: #dc2626;
+  --syntax-deleted-bg: #fee2e2;
+  --syntax-inserted: #16a34a;
+  --syntax-inserted-bg: #dcfce7;
+  --syntax-heading: #0891b2;
+  --syntax-subheading: #0d9488;
+}
+
+[data-theme="dark"] {
+  // Dark mode colors
+  --bg-color: #1a1a1a;
+  --text-color: #e0e0e0;
+  --header-bg: #1f2937;
+  --header-border: #374151;
+  --link-color: #34d399;
+  --link-hover: #6ee7b7;
+  --card-bg: #1f2937;
+  --border-color: #374151;
+  --hero-gradient-start: #10b981;
+  --hero-gradient-end: #14b8a6;
+  --code-bg: #1f2937;
+  --shadow-color: rgba(16, 185, 129, 0.2);
+  --button-bg: #34d399;
+  --button-hover: #6ee7b7;
+  --tag-bg: #374151;
+  --tag-text: #a7f3d0;
+
+  // Syntax highlighting (dark mode)
+  --code-text: #e0e0e0;
+  --inline-code-bg: #374151;
+  --inline-code-text: #a7f3d0;
+  --syntax-comment: #9ca3af;
+  --syntax-error: #f87171;
+  --syntax-error-bg: #7f1d1d;
+  --syntax-keyword: #34d399;
+  --syntax-operator: #22d3ee;
+  --syntax-punctuation: #d1d5db;
+  --syntax-name: #e0e0e0;
+  --syntax-function: #2dd4bf;
+  --syntax-class: #22d3ee;
+  --syntax-string: #fb923c;
+  --syntax-number: #e879f9;
+  --syntax-variable: #818cf8;
+  --syntax-builtin: #2dd4bf;
+  --syntax-constant: #a78bfa;
+  --syntax-deleted: #f87171;
+  --syntax-deleted-bg: #7f1d1d;
+  --syntax-inserted: #4ade80;
+  --syntax-inserted-bg: #14532d;
+  --syntax-heading: #22d3ee;
+  --syntax-subheading: #2dd4bf;
+}
+
+// Apply theme colors
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+a {
+  color: var(--link-color);
+
+  &:hover {
+    color: var(--link-hover);
+  }
+}
+
+.site-header {
+  background-color: var(--header-bg);
+  border-bottom: 1px solid var(--header-border);
+}
+
+.site-footer {
+  background-color: var(--header-bg);
+  border-top: 1px solid var(--header-border);
+
+  .footer-content {
+    color: var(--text-color);
+  }
+}
+
+.project-card {
+  background-color: var(--card-bg);
+
+  h2, h3 {
+    a {
+      color: var(--text-color);
+      &:hover {
+        color: var(--link-color);
+      }
+    }
+  }
+}
+
+.tech-tag {
+  background-color: var(--tag-bg);
+  color: var(--tag-text);
+}
+
+.btn {
+  background-color: var(--button-bg);
+
+  &:hover {
+    background-color: var(--button-hover);
+  }
+}
+
+.post-list {
+  li {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  h2, h3 {
+    a {
+      color: var(--text-color);
+      &:hover {
+        color: var(--link-color);
+      }
+    }
+  }
+}
+
+section h2 {
+  border-bottom: 2px solid var(--border-color);
+}
+
+// Code and pre styles are defined in _syntax.scss
+
+// Theme toggle button
+.theme-toggle {
+  background: none;
+  border: 2px solid var(--border-color);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  padding: 0;
+
+  &:hover {
+    border-color: var(--link-color);
+    transform: rotate(20deg);
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+    fill: var(--text-color);
+  }
+
+  .sun-icon {
+    display: none;
+  }
+
+  .moon-icon {
+    display: block;
+  }
+}
+
+[data-theme="dark"] .theme-toggle {
+  .sun-icon {
+    display: block;
+  }
+
+  .moon-icon {
+    display: none;
+  }
+}
+
+// Language toggle button
+.lang-toggle {
+  background: none;
+  border: 2px solid var(--border-color);
+  border-radius: 20px;
+  padding: 8px 16px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.9em;
+  color: var(--text-color);
+  transition: all 0.3s ease;
+
+  &:hover {
+    border-color: var(--link-color);
+    color: var(--link-color);
+    transform: translateY(-2px);
+  }
+}
+
+// Header controls container
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+// Social links dark mode support
+.social-link {
+  .social-icon {
+    filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(95%) contrast(90%);
+  }
+
+  &:hover .social-icon {
+    filter: brightness(0) saturate(100%) invert(56%) sepia(98%) saturate(565%) hue-rotate(106deg) brightness(93%) contrast(92%);
+  }
+}
+
+[data-theme="dark"] .social-link {
+  .social-icon {
+    filter: brightness(0) saturate(100%) invert(80%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(95%) contrast(90%);
+  }
+
+  &:hover {
+    background-color: rgba(52, 211, 153, 0.15);
+  }
+
+  &:hover .social-icon {
+    filter: brightness(0) saturate(100%) invert(73%) sepia(39%) saturate(458%) hue-rotate(99deg) brightness(95%) contrast(90%);
+  }
+}