744235b47f
- Add final part of LocallyGrown.net series: "From Survival to Sustainability" - Implement Hugo series taxonomy for better content organization - Add series navigation partial showing all 6 parts with prev/next links - Update all LocallyGrown posts with series metadata and ordering - Display series indicators on index page for connected content - Style series navigation with responsive design and dark mode support - Fix series links across all posts to use correct slugs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
189 lines
3.9 KiB
SCSS
189 lines
3.9 KiB
SCSS
.app-header-social {
|
|
flex-wrap: wrap;
|
|
a:not(:last-child) {
|
|
margin-right: 0.2em;
|
|
}
|
|
}
|
|
|
|
// Fix sidebar scrolling for smaller viewports
|
|
@media (min-width: 940px) {
|
|
.app-header {
|
|
height: 100vh !important;
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
min-height: unset !important;
|
|
}
|
|
}
|
|
|
|
// Import callout styles
|
|
@import 'callouts';
|
|
|
|
// Series indicator on list pages
|
|
.series-indicator {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.75rem;
|
|
margin-left: 0.5rem;
|
|
background: var(--series-bg, #e3f2fd);
|
|
color: var(--series-text, #1976d2);
|
|
border-radius: 4px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
vertical-align: middle;
|
|
|
|
svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 0.25rem;
|
|
vertical-align: -2px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.series-indicator {
|
|
background: rgba(33, 150, 243, 0.15);
|
|
color: rgba(144, 202, 249, 1);
|
|
}
|
|
}
|
|
|
|
// Series navigation styling
|
|
.series-box {
|
|
background: var(--card-bg, #f5f5f5);
|
|
border: 1px solid var(--border-color, #e0e0e0);
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin: 2rem 0;
|
|
|
|
.series-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.1rem;
|
|
|
|
.series-part {
|
|
color: var(--secondary-text, #666);
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
.series-nav {
|
|
margin: 1rem 0;
|
|
|
|
.series-list {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin: 0;
|
|
|
|
li {
|
|
padding: 0.5rem 0;
|
|
border-left: 3px solid transparent;
|
|
padding-left: 1rem;
|
|
|
|
&.current {
|
|
border-left-color: var(--primary-color, #007bff);
|
|
background: var(--highlight-bg, rgba(0, 123, 255, 0.05));
|
|
margin-left: -1rem;
|
|
padding-left: calc(1rem + 1rem);
|
|
margin-right: -1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color, #007bff);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.series-navigation {
|
|
margin-top: 1.5rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--border-color, #e0e0e0);
|
|
|
|
.series-nav-links {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
|
|
.series-prev,
|
|
.series-next {
|
|
flex: 1;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.series-prev {
|
|
text-align: left;
|
|
background: var(--button-bg, #f0f0f0);
|
|
color: var(--link-color, #007bff);
|
|
|
|
&:hover:not(.disabled) {
|
|
background: var(--button-hover-bg, #e0e0e0);
|
|
}
|
|
|
|
&.disabled {
|
|
color: var(--disabled-text, #999);
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.series-next {
|
|
text-align: right;
|
|
background: var(--button-bg, #f0f0f0);
|
|
color: var(--link-color, #007bff);
|
|
|
|
&:hover:not(.disabled) {
|
|
background: var(--button-hover-bg, #e0e0e0);
|
|
}
|
|
|
|
&.disabled {
|
|
color: var(--disabled-text, #999);
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Dark mode support
|
|
@media (prefers-color-scheme: dark) {
|
|
.series-box {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
|
|
.series-header .series-part {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.series-nav .series-list li.current {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.series-navigation {
|
|
border-top-color: rgba(255, 255, 255, 0.1);
|
|
|
|
.series-nav-links {
|
|
.series-prev,
|
|
.series-next {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
|
&:hover:not(.disabled) {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
&.disabled {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |