{"id":25276734,"url":"https://github.com/yibie/hugo-theme-deck","last_synced_at":"2026-02-22T17:30:25.008Z","repository":{"id":276461477,"uuid":"927774658","full_name":"yibie/hugo-theme-deck","owner":"yibie","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-13T04:53:34.000Z","size":1517,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-27T13:36:46.646Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yibie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-05T14:23:15.000Z","updated_at":"2025-05-13T04:53:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"92a2cfac-16c6-4862-8f80-8c4bf828e049","html_url":"https://github.com/yibie/hugo-theme-deck","commit_stats":null,"previous_names":["yibie/hugo-theme-deck"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yibie/hugo-theme-deck","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yibie%2Fhugo-theme-deck","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yibie%2Fhugo-theme-deck/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yibie%2Fhugo-theme-deck/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yibie%2Fhugo-theme-deck/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yibie","download_url":"https://codeload.github.com/yibie/hugo-theme-deck/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yibie%2Fhugo-theme-deck/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29720564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T15:10:41.462Z","status":"ssl_error","status_checked_at":"2026-02-22T15:10:04.636Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-12T16:02:24.224Z","updated_at":"2026-02-22T17:30:24.999Z","avatar_url":"https://github.com/yibie.png","language":"CSS","funding_links":[],"categories":["CSS","HTML"],"sub_categories":[],"readme":"# Hugo Theme Deck\n\nA clean, column-based Hugo theme inspired by TweetDeck. Perfect for personal websites that want to present different types of content in an organized, visually appealing way.\n\n![screenshot](/static/demo.png)\n\n## Features\n\n- 🎯 Column-based layout for different content types\n- 🔄 Flexible mapping between content and display styles\n- 🎨 Clean and minimal design\n- 📱 Responsive design for desktop and mobile\n- 🎭 Multiple column styles for content display\n- ⚡ Fast and lightweight\n\n## What's New in v2 (Major Upgrade)\n\nA comprehensive UI/UX overhaul focusing on modern aesthetics, performance, and interaction fluidity.\n\n### 🎨 Visual \u0026 UI Overhaul\n- **Glassmorphism Design**: Implemented a sophisticated frosted glass effect across the sidebar and cards, supported by a dynamic ambient background animation.\n- **Deep Glass Hover**: Cards feature a \"Deep Glass\" effect on hover, creating a premium depth perception with subtle color tinting based on column type.\n- **Typography Upgrade**: Migrated to a modern font stack (Inter, SF Pro) with fluid typography scaling for better readability on all devices.\n- **Dark Mode Perfected**: Fully optimized dark theme with refined color palettes, shadow depth, and contrast adjustments.\n- **Clean Sidebar**: Polished sidebar layout with better alignment, simplified footer (removed visual noise), and improved mobile responsiveness.\n- **New Link Column**: Added a specialized `link` column style for sharing curated links with rich previews (title, domain, thumbnail) and commentary.\n\n### ⚡ Interaction \u0026 Experience\n- **Physics-Based Animations**: All transitions now use spring physics (`cubic-bezier`) for a natural, snappy feel.\n- **Full Card Clickability**: Cards are now fully clickable (via `stretched-link`) with `pointer` cursor throughout, functioning as large, cohesive touch targets.\n- **Native Scrolling**: Restored system-native scrollbars for consistent OS feel, while ensuring smooth momentum scrolling (`-webkit-overflow-scrolling`) on iOS.\n- **Scroll Improvements**: Fixed \"double scrollbar\" issues, page jumping bugs, and background bleeding. The horizontal column scroll is now locked to the container, preventing body scroll conflicts.\n\n### 🛠 Technical Improvements\n- **CSS Modularization**: Refactored monolithic CSS into modular files (`base.css`, `layout.css`, `cards.css`, etc.) for better maintainability.\n- **CSS Variables**: Extensive use of CSS Custom Properties for theming, spacing, and animations, making customization easier.\n- **Clean Code**: Removed redundant styles, legacy hacks, and unused assets.\n\n## Installation\n\n1. In your Hugo site directory, run:\n```bash\ngit submodule add https://github.com/yibie/hugo-theme-deck themes/hugo-theme-deck\n```\n\n2. In your site's `hugo.toml`, set the theme:\n```toml\ntheme = \"hugo-theme-deck\"\n```\n\n3. Copy `hugo.toml` from `themes/hugo-theme-deck` to your site's root directory.\n\n## How it works\n\nHugo Theme Deck works by decoupling three key components:\n\n1. **Column Names**: Define what columns appear in your layout\n2. **Column Styles**: Determine how content is displayed\n3. **Posts**: Content with standard structure\n\n### Configuration\n\nIn `hugo.toml`, you configure your site and columns:\n\n```toml\n# Basic site configuration\nbaseURL = 'https://example.org/' # Your site URL  \nlanguageCode = 'en-us' # Your site language\ntitle = 'Your Site Title' # Your site title\ntheme = 'hugo-theme-deck' # Your theme\n\n# Theme parameters\n[params]\n  # Site header information\n  author = \"Your Name\" # Your name\n  subtitle = \"Your Subtitle\" # Your subtitle\n  bio = \"Your bio text here. You can use **markdown** formatting.\" # Your bio text\n\n  # Column configuration\n  [params.sections]\n    columns = [\n      # Each column needs:\n      # - id: Unique identifier\n      # - title: Display name in header\n      # - category: Content category to display\n      # - style: Visual style to apply\n      { id = \"now\", title = \"Now\", category = \"now\", style = \"now\" },\n      { id = \"write\", title = \"Writing\", category = \"write\", style = \"write\" },\n      { id = \"quote\", title = \"Quotes\", category = \"quotes\", style = \"quote\" },\n      { id = \"read\", title = \"Reading\", category = \"read\", style = \"read\" },\n      { id = \"link\", title = \"Links\", category = \"link\", style = \"link\" },\n      # Example of reusing a style\n      { id = \"til\", title = \"TIL\", category = \"til\", style = \"write-column\" }  # TIL column is also use write-column style\n    ]\n\n# Optional menu configuration\n[[menu.main]]\nname = \"About\"\nurl = \"/about/\"\nweight = 10\n\n[[menu.main]]\nname = \"Archive\"\nurl = \"/posts/\"\nweight = 20\n```\n\nKey configuration concepts:\n1. `category` in column config matches with post's front matter categories\n2. `style` determines the visual presentation (now-column, write-column, quote-column, read-column)\n3. Different categories can use the same style (like TIL using write-column)\n4. Column order in config determines display order\n\n### Post Structure\nAll content posts share the same basic structure:\n```yaml\n---\ntitle: \"Post Title\"\ndate: 2024-03-14\ncategories: [\"write\"]  # Determines which column the post appears in\n---\nPost content goes here...\n```\n\n#### Quote Post\nFor posts displayed in the `quote-column`, the title acts as the quote text itself:\n\n```yaml\n---\ntitle: \"The best way to predict the future is to invent it.\"\ndate: 2024-03-14\ncategories: [\"quotes\"]\nauthor: \"Alan Kay\"       # Optional: who said it\nsource: \"Computer Science Conference, 1971\"  # Optional: where it's from\n---\n```\n\u003e **Note**: The post content is not displayed in `quote-column`. Only the title, author, and source are shown.\n\n#### Link Post\nFor posts displayed in the `link-column`, you need to provide external link metadata:\n\n```yaml\n---\ntitle: \"My commentary title\"  # Fallback if link_title is not set\ndate: 2024-03-14\ncategories: [\"link\"]\ntype: \"link\"  # Required for the dedicated single page layout\n\n# Link metadata (required)\nlink: \"https://example.com/article\"\n\n# Optional overrides for the preview card\nlink_title: \"The Article Title\"\nlink_desc: \"A short description of the linked content...\"\nlink_domain: \"example.com\"\nlink_image: \"/images/preview.jpg\"  # Thumbnail for the card\n---\n\nYour commentary goes here. This Markdown content will be shown\nbelow the link preview card on the homepage (truncated) and \nin full on the single page.\n```\n\n### Column Styles\nThe theme provides different styles for displaying post in different columns. Each style processes the post content differently:\n\n- `write-column`: \n  - Title → Card header\n  - First paragraph → Card summary\n  - Rest of content → Only visible in single page\n\n- `quote-column`:\n  - Title → Quote text with decorative marks\n  - Content → Not displayed\n  - Date → Not displayed\n\n- `now-column`:\n  - Title → Not displayed\n  - Content → Bubble message content\n  - Date → Timestamp in bubble\n\n- `read-column`:\n  - Title → Overlay text on hover\n  - First image in content → Grid item cover\n  - Content → Not displayed\n  - Date → Not displayed\n\n- `link-column`:\n  - Rich Preview Card with title, domain, description, and optional image\n  - Clicking the preview card opens the external link directly\n  - Post content acts as commentary below the card\n  - Date → Card footer\n\nThis decoupled design allows:\n- Same content category can be displayed in different styles\n- Different categories can share the same display style\n- Flexible mapping between content organization and visual presentation\n\n## License\n\nMIT License\n\n## Credits\n\nCreated by [Yibie](https://github.com/yibie)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyibie%2Fhugo-theme-deck","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyibie%2Fhugo-theme-deck","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyibie%2Fhugo-theme-deck/lists"}