diff --git a/content/_index.md b/content/_index.md index 50fa557..82353b5 100644 --- a/content/_index.md +++ b/content/_index.md @@ -7,10 +7,10 @@ hero_alt: "Exit to Community concept illustration"
- Exit to Community concept illustration

Stories and strategies for community ownership

+ Exit to Community concept illustration
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 3465a01..715d719 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -8,6 +8,20 @@ + + + + + + {{ if .Params.image }}{{ end }} + {{ if .Params.banner }}{{ end }} + + + + + {{ if .Params.image }}{{ end }} + {{ if .Params.banner }}{{ end }} + @@ -83,9 +97,10 @@ diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 2defdd3..f23735b 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -9,14 +9,37 @@ {{ if .Pages }}
- - - + +
+
+
+ Select tags +
+ + + +
+
+
+ +
+
+
+
+
+
+
+ Sort by Title + + + +
+
+
Sort by Title
+
Sort by Date
+
+
+
@@ -24,6 +47,7 @@
{{ if .Params.banner }} @@ -83,9 +107,9 @@ align-items: center; } -.search-input, .tag-filter, .sort-select { +.search-input { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - font-weight: 500; + font-weight: 400; font-size: 14px; padding: 10px 16px; border: 1px solid var(--border); @@ -94,14 +118,11 @@ backdrop-filter: blur(8px); transition: all 0.2s ease; color: var(--text-primary); -} - -.search-input { flex: 1; min-width: 280px; } -.search-input:focus, .tag-filter:focus, .sort-select:focus { +.search-input:focus { outline: none; border-color: var(--e2c-yellow); background: var(--e2c-yellow); @@ -110,14 +131,230 @@ } .search-input::placeholder { - color: var(--text-secondary); + color: var(--text-primary); font-weight: 400; } -.tag-filter, .sort-select { +/* Custom Multi-Select Dropdown */ +.tag-filter-container { + position: relative; + min-width: 200px; +} + +.tag-dropdown { + position: relative; + font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +.tag-dropdown-trigger { + display: flex; + align-items: center; + padding: 10px 16px; + border: 1px solid var(--border); + border-radius: 24px; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(8px); + cursor: pointer; + transition: all 0.2s ease; + color: var(--text-primary); + font-size: 14px; + font-weight: 400; + min-height: 20px; +} + +.tag-dropdown-trigger:hover, .tag-dropdown.open .tag-dropdown-trigger { + border-color: var(--e2c-yellow); + background: var(--e2c-yellow); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.dropdown-label { + flex: 1; + color: var(--text-primary); + font-weight: 400; + white-space: nowrap; +} + +.tag-dropdown.has-selection .dropdown-label { + display: none; +} + +.selected-tags { + display: flex; + flex-wrap: wrap; + gap: 4px; + flex: 1; + min-height: 20px; +} + +.selected-tag { + background: var(--text-primary); + color: white; + padding: 2px 8px; + border-radius: 12px; + font-size: 12px; + font-weight: 500; + display: flex; + align-items: center; + gap: 4px; +} + +.selected-tag .remove { + cursor: pointer; + font-weight: bold; + font-size: 14px; + line-height: 1; + opacity: 0.8; +} + +.selected-tag .remove:hover { + opacity: 1; +} + +.dropdown-arrow { + margin-left: 8px; + transition: transform 0.2s ease; + flex-shrink: 0; +} + +.tag-dropdown.open .dropdown-arrow { + transform: rotate(180deg); +} + +.tag-dropdown-menu { + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--card-background); + border: 1px solid var(--border); + border-radius: 12px; + box-shadow: 0 8px 24px var(--shadow); + z-index: 1000; + max-height: 200px; + overflow-y: auto; + opacity: 0; + visibility: hidden; + transform: translateY(-4px); + transition: all 0.2s ease; + margin-top: 4px; +} + +.tag-dropdown.open .tag-dropdown-menu { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.tag-option { + display: flex; + align-items: center; + padding: 8px 12px; + cursor: pointer; + font-size: 14px; + color: var(--text-primary); + transition: background-color 0.15s ease; +} + +.tag-option:hover { + background: rgba(244, 208, 63, 0.1); +} + +.tag-option input[type="checkbox"] { + margin-right: 8px; + accent-color: var(--e2c-yellow); +} + +.tag-option.selected { + background: rgba(244, 208, 63, 0.15); + font-weight: 500; +} + +/* Custom Sort Dropdown */ +.sort-container { + position: relative; min-width: 160px; } +.sort-dropdown { + position: relative; + font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +.sort-dropdown-trigger { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 16px; + border: 1px solid var(--border); + border-radius: 24px; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(8px); + cursor: pointer; + transition: all 0.2s ease; + color: var(--text-primary); + font-size: 14px; + font-weight: 400; + min-height: 20px; +} + +.sort-dropdown-trigger:hover, .sort-dropdown.open .sort-dropdown-trigger { + border-color: var(--e2c-yellow); + background: var(--e2c-yellow); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.sort-label { + flex: 1; + white-space: nowrap; +} + +.sort-dropdown.open .dropdown-arrow { + transform: rotate(180deg); +} + +.sort-dropdown-menu { + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--card-background); + border: 1px solid var(--border); + border-radius: 12px; + box-shadow: 0 8px 24px var(--shadow); + z-index: 1000; + opacity: 0; + visibility: hidden; + transform: translateY(-4px); + transition: all 0.2s ease; + margin-top: 4px; +} + +.sort-dropdown.open .sort-dropdown-menu { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.sort-option { + padding: 8px 12px; + cursor: pointer; + font-size: 14px; + color: var(--text-primary); + transition: background-color 0.15s ease; +} + +.sort-option:hover { + background: rgba(244, 208, 63, 0.1); +} + +.sort-option.selected { + background: rgba(244, 208, 63, 0.15); + font-weight: 500; +} + .tags { margin-top: 0.5rem; } @@ -216,26 +453,64 @@ gap: 12px; } - .search-input, .tag-filter, .sort-select { + .search-input { width: 100%; min-width: unset; padding: 8px 14px; font-size: 12px; } + + .tag-filter-container, .sort-container { + min-width: unset; + width: 100%; + } + + .sort-dropdown-trigger { + padding: 8px 14px; + font-size: 12px; + } + + .tag-dropdown-trigger { + padding: 8px 14px; + font-size: 12px; + } + + .selected-tag { + font-size: 11px; + padding: 1px 6px; + } + + .tag-dropdown-menu { + left: -4px; + right: -4px; + } } diff --git a/static/css/main.css b/static/css/main.css index 215a71c..284253f 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -363,16 +363,15 @@ a:hover { } .hero-section { - background: var(--e2c-yellow); padding: 4rem 2rem; - margin: 0 0 3rem 0; - border-radius: 24px; + margin: 0 auto 3rem auto; + max-width: 1200px; } .hero-content { display: flex; align-items: center; - gap: 3rem; + gap: 4rem; max-width: 1200px; margin: 0 auto; } @@ -381,6 +380,12 @@ a:hover { width: 300px; height: auto; border-radius: 16px; + flex-shrink: 0; +} + +.hero-text { + flex: 1; + max-width: 700px; } .hero-text h1 { @@ -425,14 +430,16 @@ a:hover { } .intro-section ul li { - background: var(--text-primary); - color: white; + background: var(--card-background); + border: 2px solid var(--e2c-yellow); + color: var(--text-primary); padding: 24px 28px; - border-radius: 4px; - font-weight: 600; + border-radius: 16px; + font-weight: 500; text-align: center; line-height: 1.4; font-size: 1.1rem; + box-shadow: 0 4px 12px var(--shadow); } .cards-grid {