Getting there
All checks were successful
Build and Deploy Hugo Site / build-and-deploy (push) Successful in 9s
All checks were successful
Build and Deploy Hugo Site / build-and-deploy (push) Successful in 9s
This commit is contained in:
Chris Smith
@@ -6,7 +6,11 @@ categories = ['programming']
|
||||
tags = ['productivity', 'pomodoro', 'time-management', 'workflow', 'tips']
|
||||
+++
|
||||
|
||||
*Originally posted at blog.cgsmith.net*
|
||||
<div class="notice notice-info">
|
||||
📝 Originally posted at blog.cgsmith.net
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
I need lists to help me stay productive each day. I'm sure this isn't unique to me or the industry but without a list there are some days where I feel too distracted or disoriented. Sometimes even with a list of things I get distracted! Here are some tools that I started using to help me become more productive everyday.
|
||||
|
||||
|
||||
@@ -6,7 +6,11 @@ categories = ['programming']
|
||||
tags = ['philosophy', 'tools', 'decision-making', 'career-advice', 'pragmatism']
|
||||
+++
|
||||
|
||||
*Originally published on cgsmith.net*
|
||||
<div class="notice notice-info">
|
||||
📝 Originally published on cgsmith.net
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
At work we get into discussions regarding the best tool for the job. It doesn't necessarily have to be about programming. These are all good conversations to have, but there is a point where you have to make a decision and it might not be the best decision.
|
||||
|
||||
|
||||
@@ -6,10 +6,10 @@ categories = ['general']
|
||||
tags = ['introduction', 'blog']
|
||||
+++
|
||||
|
||||
# Welcome to Sometimes Code
|
||||
|
||||
|
||||
|
||||
*Photo by [Majid Rangraz](https://unsplash.com/@majidrangraz) on [Unsplash](https://unsplash.com/photos/silver-laptop-computer-and-black-camera-lens-xZMghzq01UQ)*
|
||||
|
||||
Hello and welcome to my little corner of the internet! I'm Chris Smith, a senior software developer from East Troy, Wisconsin, and this is Sometimes Code - a personal blog where I'll be sharing thoughts, experiences, and insights about the two things that shape my world: **programming** and **family**.
|
||||
|
||||
## What You'll Find Here
|
||||
@@ -44,6 +44,4 @@ Thank you for being here at the beginning of this journey. Whether you're here f
|
||||
|
||||
Here's to the first of many posts on Sometimes Code!
|
||||
|
||||
---
|
||||
|
||||
*Want to know more about me? Check out my [resume](/resume) or browse posts by [programming](/categories/programming) or [family](/categories/family) topics.*
|
||||
|
||||
@@ -15,12 +15,14 @@ rssLimit = 20
|
||||
|
||||
[params]
|
||||
description = 'A personal blog about programming, family life, and the intersection of technology and humanity'
|
||||
subtitle = "echo 'Coding, family, life'; // by Chris Smith"
|
||||
author = 'Chris Smith'
|
||||
|
||||
# Social and contact information
|
||||
email = 'chris@sometimescode.com'
|
||||
github = 'https://github.com/cgsmith'
|
||||
linkedin = 'https://linkedin.com/in/phpguy'
|
||||
gitea = 'https://git.sometimescode.com/cgsmith'
|
||||
|
||||
# Location and work
|
||||
location = 'Henderson, Nevada'
|
||||
@@ -30,3 +32,9 @@ rssLimit = 20
|
||||
interests = ['PHP', 'Formula 1', 'Mountain Biking', 'Brewing', 'Open Source']
|
||||
|
||||
# Simple navigation is now handled in site-header.html partial
|
||||
|
||||
# Enable raw HTML in markdown
|
||||
[markup]
|
||||
[markup.goldmark]
|
||||
[markup.goldmark.renderer]
|
||||
unsafe = true
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
static/images/choosing-the-right-tool-for-the-job-1.jpg
Normal file
BIN
static/images/choosing-the-right-tool-for-the-job-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
static/images/majid-rangraz-xZMghzq01UQ-unsplash.jpg
Normal file
BIN
static/images/majid-rangraz-xZMghzq01UQ-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
@@ -1,22 +1,668 @@
|
||||
body {
|
||||
color: #222;
|
||||
font-family: sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 1rem;
|
||||
max-width: 768px;
|
||||
/* Google Fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto+Mono:wght@700&display=swap');
|
||||
|
||||
/* CSS Variables for theming */
|
||||
:root {
|
||||
--bg-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--text-secondary: #666666;
|
||||
--border-color: #e0e0e0;
|
||||
--link-color: #0066cc;
|
||||
--link-hover: #004499;
|
||||
--code-bg: #f5f5f5;
|
||||
--code-text: #333333;
|
||||
--header-border: #cccccc;
|
||||
}
|
||||
|
||||
/* Dark mode - system preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--bg-color: #1a1a1a;
|
||||
--text-color: #e0e0e0;
|
||||
--text-secondary: #a0a0a0;
|
||||
--border-color: #404040;
|
||||
--link-color: #6699ff;
|
||||
--link-hover: #99bbff;
|
||||
--code-bg: #2a2a2a;
|
||||
--code-text: #e0e0e0;
|
||||
--header-border: #404040;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode - manual override */
|
||||
[data-theme="dark"] {
|
||||
--bg-color: #1a1a1a;
|
||||
--text-color: #e0e0e0;
|
||||
--text-secondary: #a0a0a0;
|
||||
--border-color: #404040;
|
||||
--link-color: #6699ff;
|
||||
--link-hover: #99bbff;
|
||||
--code-bg: #2a2a2a;
|
||||
--code-text: #e0e0e0;
|
||||
--header-border: #404040;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
padding: 2rem 1rem;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Center content */
|
||||
body > * {
|
||||
max-width: 720px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Header styles */
|
||||
header {
|
||||
border-bottom: 1px solid #222;
|
||||
border-bottom: 2px solid var(--header-border);
|
||||
padding-bottom: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.site-title-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.site-header h1 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.site-header .subtitle {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
min-height: 1.5em;
|
||||
}
|
||||
|
||||
/* Theme toggle button */
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background-color: var(--code-bg);
|
||||
border-color: var(--link-color);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.theme-toggle:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Footer styles */
|
||||
footer {
|
||||
border-top: 2px solid var(--header-border);
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 3rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-social a {
|
||||
color: var(--text-secondary);
|
||||
transition: color 0.2s ease, transform 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-social a:hover {
|
||||
color: var(--link-color);
|
||||
transform: translateY(-2px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-content p {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
code {
|
||||
background-color: var(--code-bg);
|
||||
color: var(--code-text);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: var(--code-bg);
|
||||
color: var(--code-text);
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
line-height: 1.5;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul, ol {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote {
|
||||
border-left: 4px solid var(--link-color);
|
||||
margin: 1.5rem 0;
|
||||
padding-left: 1rem;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Notice boxes and callouts */
|
||||
.notice {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
.notice-info {
|
||||
background-color: #e3f2fd;
|
||||
border-color: #2196f3;
|
||||
color: #0d47a1;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .notice-info {
|
||||
background-color: #1a2332;
|
||||
border-color: #42a5f5;
|
||||
color: #90caf9;
|
||||
}
|
||||
|
||||
.notice-warning {
|
||||
background-color: #fff3e0;
|
||||
border-color: #ff9800;
|
||||
color: #e65100;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .notice-warning {
|
||||
background-color: #2d2416;
|
||||
border-color: #ffa726;
|
||||
color: #ffcc80;
|
||||
}
|
||||
|
||||
.notice-success {
|
||||
background-color: #e8f5e9;
|
||||
border-color: #4caf50;
|
||||
color: #1b5e20;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .notice-success {
|
||||
background-color: #1a2e1b;
|
||||
border-color: #66bb6a;
|
||||
color: #a5d6a7;
|
||||
}
|
||||
|
||||
/* Pastel highlights and callouts */
|
||||
.highlight-yellow {
|
||||
background-color: #fff9c4;
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .highlight-yellow {
|
||||
background-color: #3d3a1a;
|
||||
color: #fff59d;
|
||||
}
|
||||
|
||||
.highlight-pink {
|
||||
background-color: #fce4ec;
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .highlight-pink {
|
||||
background-color: #3a2529;
|
||||
color: #f8bbd0;
|
||||
}
|
||||
|
||||
.highlight-blue {
|
||||
background-color: #e1f5fe;
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .highlight-blue {
|
||||
background-color: #1a2a33;
|
||||
color: #b3e5fc;
|
||||
}
|
||||
|
||||
/* Navigation menu */
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem 0 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
nav li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Site title link */
|
||||
.site-title-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.site-title-link:hover {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Stylized logo */
|
||||
.logo-sometimes {
|
||||
font-family: 'Pacifico', cursive;
|
||||
font-weight: 400;
|
||||
margin-right: 0.3rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .logo-sometimes {
|
||||
background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.logo-code {
|
||||
font-family: 'Roboto Mono', 'Courier New', monospace;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
font-family: 'Roboto Mono', 'Courier New', monospace;
|
||||
font-weight: 700;
|
||||
color: #00ff41;
|
||||
animation: cursor-blink 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .cursor {
|
||||
color: #00ff41;
|
||||
}
|
||||
|
||||
.cursor::after {
|
||||
content: '_';
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
0%, 49% {
|
||||
opacity: 1;
|
||||
}
|
||||
50%, 100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post list on homepage */
|
||||
.posts-list {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.post-summary {
|
||||
margin-bottom: 3rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.post-summary:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.post-summary h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.post-summary h2 a {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-summary h2 a:hover {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
/* Post metadata */
|
||||
.post-meta {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.post-categories {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.category {
|
||||
background-color: var(--code-bg);
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Post excerpt */
|
||||
.post-excerpt {
|
||||
color: var(--text-color);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Single post page */
|
||||
.post-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.post-header h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.post-header .post-meta {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.post-footer {
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.post-tags strong {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: var(--code-bg);
|
||||
color: var(--link-color);
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
background-color: var(--link-color);
|
||||
color: var(--bg-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Edit page link */
|
||||
.edit-page {
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.edit-page a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.edit-page a:hover {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.edit-page svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.edit-page a:hover svg {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Post navigation */
|
||||
.post-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 2px solid var(--border-color);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.post-nav-prev,
|
||||
.post-nav-next {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.post-nav-next {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.post-nav a {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.25rem;
|
||||
background-color: var(--code-bg);
|
||||
border-radius: 5px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.post-nav a:hover {
|
||||
background-color: var(--link-color);
|
||||
color: var(--bg-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Featured post on homepage */
|
||||
.featured-post {
|
||||
margin-bottom: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.featured-post h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #222;
|
||||
margin-top: 1rem;
|
||||
.featured-content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00e;
|
||||
text-decoration: none;
|
||||
.section-divider {
|
||||
margin: 3rem 0 2rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-divider h2 {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 2rem;
|
||||
margin: 0;
|
||||
background-color: var(--bg-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.section-divider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
background-color: var(--border-color);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 640px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.site-header h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
padding: 0.4rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-nav-next {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1,117 @@
|
||||
console.log('This site was generated by Hugo.');
|
||||
|
||||
// Theme toggle functionality
|
||||
(function() {
|
||||
const STORAGE_KEY = 'theme-preference';
|
||||
|
||||
const getColorPreference = () => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored) {
|
||||
return stored;
|
||||
}
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
};
|
||||
|
||||
const setPreference = (theme) => {
|
||||
localStorage.setItem(STORAGE_KEY, theme);
|
||||
reflectPreference(theme);
|
||||
};
|
||||
|
||||
const reflectPreference = (theme) => {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
const button = document.querySelector('#theme-toggle');
|
||||
if (button) {
|
||||
button.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
|
||||
button.textContent = theme === 'dark' ? '☀️' : '🌙';
|
||||
}
|
||||
};
|
||||
|
||||
// Set initial theme
|
||||
const theme = getColorPreference();
|
||||
reflectPreference(theme);
|
||||
|
||||
// Set up toggle button when DOM is ready
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const button = document.querySelector('#theme-toggle');
|
||||
if (button) {
|
||||
button.addEventListener('click', () => {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
setPreference(newTheme);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches: isDark }) => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (!stored) {
|
||||
setPreference(isDark ? 'dark' : 'light');
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
// Typing animation for subtitle with mistakes
|
||||
(function() {
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const subtitleElement = document.querySelector('.site-header .subtitle');
|
||||
if (!subtitleElement) return;
|
||||
|
||||
const fullText = subtitleElement.textContent;
|
||||
subtitleElement.textContent = '';
|
||||
|
||||
// Define the typing sequence with mistakes happening naturally
|
||||
const sequence = [
|
||||
{ action: 'type', text: "echo 'Coding, family, life'; // by Chris Sm" },
|
||||
{ action: 'type', text: 't' },
|
||||
{ action: 'type', text: 'i' },
|
||||
{ action: 'type', text: 'h' },
|
||||
{ action: 'pause', duration: 400 },
|
||||
{ action: 'backspace', count: 3 },
|
||||
{ action: 'pause', duration: 200 },
|
||||
{ action: 'type', text: 'ith' }
|
||||
];
|
||||
|
||||
let currentText = '';
|
||||
let sequenceIndex = 0;
|
||||
let charIndex = 0;
|
||||
|
||||
function executeSequence() {
|
||||
if (sequenceIndex >= sequence.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const step = sequence[sequenceIndex];
|
||||
|
||||
if (step.action === 'type') {
|
||||
if (charIndex < step.text.length) {
|
||||
currentText += step.text[charIndex];
|
||||
subtitleElement.textContent = currentText;
|
||||
charIndex++;
|
||||
setTimeout(executeSequence, 80 + Math.random() * 40);
|
||||
} else {
|
||||
charIndex = 0;
|
||||
sequenceIndex++;
|
||||
setTimeout(executeSequence, 100);
|
||||
}
|
||||
} else if (step.action === 'backspace') {
|
||||
if (charIndex < step.count) {
|
||||
currentText = currentText.slice(0, -1);
|
||||
subtitleElement.textContent = currentText;
|
||||
charIndex++;
|
||||
setTimeout(executeSequence, 60);
|
||||
} else {
|
||||
charIndex = 0;
|
||||
sequenceIndex++;
|
||||
setTimeout(executeSequence, 100);
|
||||
}
|
||||
} else if (step.action === 'pause') {
|
||||
sequenceIndex++;
|
||||
setTimeout(executeSequence, step.duration);
|
||||
}
|
||||
}
|
||||
|
||||
// Start typing after a short delay
|
||||
setTimeout(executeSequence, 500);
|
||||
});
|
||||
})();
|
||||
|
||||
58
themes/sometimescode/layouts/_default/single.html
Normal file
58
themes/sometimescode/layouts/_default/single.html
Normal file
@@ -0,0 +1,58 @@
|
||||
{{ define "main" }}
|
||||
<article class="post">
|
||||
<header class="post-header">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="post-meta">
|
||||
<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
|
||||
{{ with .Params.categories }}
|
||||
<span class="post-categories">
|
||||
{{ range . }}
|
||||
<a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
|
||||
{{ end }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="post-content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
{{ if .Params.tags }}
|
||||
<footer class="post-footer">
|
||||
<div class="post-tags">
|
||||
<strong>Tags:</strong>
|
||||
{{ range .Params.tags }}
|
||||
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="tag">{{ . }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</footer>
|
||||
{{ end }}
|
||||
|
||||
{{ with .PrevInSection }}
|
||||
<nav class="post-nav">
|
||||
<div class="post-nav-prev">
|
||||
<a href="{{ .RelPermalink }}">← {{ .Title }}</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ with .NextInSection }}
|
||||
<div class="post-nav-next">
|
||||
<a href="{{ .RelPermalink }}">{{ .Title }} →</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if or .PrevInSection .NextInSection }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Section }}
|
||||
<div class="edit-page">
|
||||
<a href="https://git.sometimescode.com/cgsmith/sometimescode.com/src/branch/main/content/{{ .Section }}/{{ .File.BaseFileName }}.md?display=source" target="_blank" rel="noopener">
|
||||
<svg width="16" height="16" viewBox="-0.05 98.32 512.15 315.48" fill="currentColor" style="vertical-align: middle; margin-right: 0.5rem;">
|
||||
<path d="M502.6 103.7c-3.3-3.3-7.8-3.3-7.8-3.3s-95.5 5.4-144.9 6.5c-10.8.2-21.6.5-32.3.6V203c-4.5-2.1-9-4.3-13.5-6.4 0-29.6-.1-88.9-.1-88.9-23.6.3-72.7-1.8-72.7-1.8s-115.2-5.8-127.7-6.9c-8-.5-18.3-1.7-31.8 1.2-7.1 1.5-27.3 6-43.8 21.9C-8.7 154.8.7 206.7 1.9 214.5c1.4 9.5 5.6 36 25.8 59 37.3 45.7 117.6 44.6 117.6 44.6s9.9 23.5 24.9 45.2c20.4 27 41.3 48 61.7 50.5 51.3 0 153.9-.1 153.9-.1s9.8.1 23-8.4c11.4-6.9 21.6-19.1 21.6-19.1s10.5-11.2 25.2-36.9c4.5-7.9 8.2-15.6 11.5-22.8 0 0 45-95.4 45-188.2-1-28-7.9-33-9.5-34.6M97.7 269.9c-21.1-6.9-30.1-15.2-30.1-15.2S52 243.8 44.2 222.3c-13.4-36-1.1-58-1.1-58s6.8-18.3 31.4-24.4c11.2-3 25.2-2.5 25.2-2.5s5.8 48.4 12.8 76.7c5.9 23.8 20.2 63.3 20.2 63.3s-21.3-2.6-35-7.5m244.6 87.6s-5 11.8-16 12.5c-4.7.3-8.4-1-8.4-1s-.2-.1-4.3-1.7l-92-44.8s-8.9-4.6-10.4-12.7c-1.8-6.6 2.2-14.7 2.2-14.7l44.2-91.1s3.9-7.9 9.9-10.6c.5-.2 1.9-.8 3.7-1.2 6.6-1.7 14.7 2.3 14.7 2.3l90.2 43.7s10.3 4.6 12.5 13.2c1.5 6-.4 11.4-1.5 14-5.2 12.6-44.8 92.1-44.8 92.1"/>
|
||||
</svg>
|
||||
Edit this page on Gitea
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</article>
|
||||
{{ end }}
|
||||
@@ -1 +1,26 @@
|
||||
<p>Copyright {{ now.Year }}. All rights reserved.</p>
|
||||
<div class="footer-content">
|
||||
<div class="footer-social">
|
||||
{{ with site.Params.github }}
|
||||
<a href="{{ . }}" target="_blank" rel="noopener" aria-label="GitHub">
|
||||
<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ with site.Params.linkedin }}
|
||||
<a href="{{ . }}" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ with site.Params.gitea }}
|
||||
<a href="{{ . }}" target="_blank" rel="noopener" aria-label="Gitea">
|
||||
<svg width="20" height="20" viewBox="-0.05 98.32 512.15 315.48" fill="currentColor">
|
||||
<path d="M502.6 103.7c-3.3-3.3-7.8-3.3-7.8-3.3s-95.5 5.4-144.9 6.5c-10.8.2-21.6.5-32.3.6V203c-4.5-2.1-9-4.3-13.5-6.4 0-29.6-.1-88.9-.1-88.9-23.6.3-72.7-1.8-72.7-1.8s-115.2-5.8-127.7-6.9c-8-.5-18.3-1.7-31.8 1.2-7.1 1.5-27.3 6-43.8 21.9C-8.7 154.8.7 206.7 1.9 214.5c1.4 9.5 5.6 36 25.8 59 37.3 45.7 117.6 44.6 117.6 44.6s9.9 23.5 24.9 45.2c20.4 27 41.3 48 61.7 50.5 51.3 0 153.9-.1 153.9-.1s9.8.1 23-8.4c11.4-6.9 21.6-19.1 21.6-19.1s10.5-11.2 25.2-36.9c4.5-7.9 8.2-15.6 11.5-22.8 0 0 45-95.4 45-188.2-1-28-7.9-33-9.5-34.6M97.7 269.9c-21.1-6.9-30.1-15.2-30.1-15.2S52 243.8 44.2 222.3c-13.4-36-1.1-58-1.1-58s6.8-18.3 31.4-24.4c11.2-3 25.2-2.5 25.2-2.5s5.8 48.4 12.8 76.7c5.9 23.8 20.2 63.3 20.2 63.3s-21.3-2.6-35-7.5m244.6 87.6s-5 11.8-16 12.5c-4.7.3-8.4-1-8.4-1s-.2-.1-4.3-1.7l-92-44.8s-8.9-4.6-10.4-12.7c-1.8-6.6 2.2-14.7 2.2-14.7l44.2-91.1s3.9-7.9 9.9-10.6c.5-.2 1.9-.8 3.7-1.2 6.6-1.7 14.7 2.3 14.7 2.3l90.2 43.7s10.3 4.6 12.5 13.2c1.5 6-.4 11.4-1.5 14-5.2 12.6-44.8 92.1-44.8 92.1"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<p>Copyright {{ now.Year }} {{ site.Params.author }}. All rights reserved.</p>
|
||||
</div>
|
||||
|
||||
@@ -1,2 +1,12 @@
|
||||
<h1>{{ site.Title }}</h1>
|
||||
<div class="site-header">
|
||||
<div class="site-title-wrapper">
|
||||
<div>
|
||||
<h1><a href="/" class="site-title-link"><span class="logo-sometimes">Sometimes</span><span class="logo-code">CODE</span><span class="cursor"></span></a></h1>
|
||||
{{ with site.Params.subtitle }}
|
||||
<p class="subtitle">{{ . }}</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">🌙</button>
|
||||
</div>
|
||||
</div>
|
||||
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
|
||||
|
||||
@@ -1,7 +1,43 @@
|
||||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ range site.RegularPages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ .Summary }}
|
||||
{{ end }}
|
||||
{{ $welcomePost := where site.RegularPages "Title" "Welcome to Sometimes Code" | first 1 }}
|
||||
{{ $otherPosts := where site.RegularPages "Section" "posts" }}
|
||||
{{ $otherPosts := where $otherPosts "Title" "!=" "Welcome to Sometimes Code" }}
|
||||
|
||||
{{ range $welcomePost }}
|
||||
<article class="featured-post">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="post-meta">
|
||||
<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
|
||||
</div>
|
||||
<div class="featured-content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
<h2>Latest Posts</h2>
|
||||
|
||||
<section class="posts-list">
|
||||
{{ range $otherPosts }}
|
||||
<article class="post-summary">
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
<div class="post-meta">
|
||||
<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
|
||||
{{ with .Params.categories }}
|
||||
<span class="post-categories">
|
||||
{{ range . }}
|
||||
<span class="category">{{ . }}</span>
|
||||
{{ end }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="post-excerpt">
|
||||
{{ .Summary }}
|
||||
{{ if .Truncated }}
|
||||
<a href="{{ .RelPermalink }}" class="read-more">Read more →</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user