v0.1.24 메인 피드 스타일 정리
This commit is contained in:
@@ -1,11 +1,15 @@
|
||||
<section class="hero">
|
||||
<h1 class="hero__title">Ideas <em>published</em> for meaningful conversation, discussed and shaped by the community</h1>
|
||||
{{#if @site.description}}
|
||||
<p class="hero__description">{{@site.description}}</p>
|
||||
{{/if}}
|
||||
{{subscribe_form
|
||||
placeholder="Your email"
|
||||
button_class="button button--light"
|
||||
form_class="subscribe-form subscribe-form--hero"
|
||||
}}
|
||||
<section class="hero home-hero" data-home-hero>
|
||||
<div class="home-hero__inner">
|
||||
<div class="home-hero__content">
|
||||
<h1 class="hero__title">Ideas <em>published</em> for meaningful conversation, <em>discussed</em> and shaped by the community</h1>
|
||||
{{#if @site.description}}
|
||||
<p class="hero__description">{{@site.description}}</p>
|
||||
{{/if}}
|
||||
{{subscribe_form
|
||||
placeholder="Your email"
|
||||
button_class="button button--light button--subscribe"
|
||||
form_class="subscribe-form subscribe-form--hero"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<section class="stack-section" data-tabs>
|
||||
<div class="tab-row-wrap">
|
||||
<div class="tab-row" role="tablist" aria-label="Homepage sections">
|
||||
<section class="stack-section home-feed" data-tabs data-home-content>
|
||||
<div class="tab-row-wrap home-feed__toolbar">
|
||||
<div class="tab-row home-feed__tabs" role="tablist" aria-label="Homepage sections">
|
||||
<button class="tab-row__button is-active" type="button" data-tab-trigger="latest">Latest</button>
|
||||
<button class="tab-row__button" type="button" data-tab-trigger="featured">Featured</button>
|
||||
<button class="tab-row__button" type="button" data-tab-trigger="updated">Updated</button>
|
||||
<button class="tab-row__button" type="button" data-tab-trigger="categories">Categories</button>
|
||||
</div>
|
||||
<button class="view-toggle" type="button" aria-label="Change view">
|
||||
<button class="view-toggle home-feed__view-toggle" type="button" aria-label="Change view">
|
||||
<span class="view-toggle__grid"></span>
|
||||
<span class="view-toggle__chevron">⌄</span>
|
||||
</button>
|
||||
@@ -30,22 +30,22 @@
|
||||
|
||||
<div class="tab-panel" data-tab-panel="categories">
|
||||
<div class="category-overview">
|
||||
{{#get "tags" limit="4" include="count.posts"}}
|
||||
{{#get "tags" limit="8" include="count.posts" order="count.posts desc"}}
|
||||
{{#foreach tags}}
|
||||
<section class="category-overview__row">
|
||||
<div>
|
||||
<section class="category-overview__row"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>
|
||||
<div class="category-overview__intro">
|
||||
<h2>{{name}}</h2>
|
||||
{{#if description}}
|
||||
<p>{{description}}</p>
|
||||
{{else}}
|
||||
<p>{{plural count.posts empty="No posts yet" singular="% post in this category" plural="% posts in this category"}}</p>
|
||||
{{/if}}
|
||||
<a href="{{url}}">View all ↗</a>
|
||||
<a class="category-overview__link" href="{{url}}">View all ↗</a>
|
||||
</div>
|
||||
<ol>
|
||||
<ol class="category-overview__posts">
|
||||
{{#get "posts" filter=(concat "tag:" slug) limit="5"}}
|
||||
{{#foreach posts}}
|
||||
<li><a href="{{url}}">{{title}}</a></li>
|
||||
<li><a href="{{url}}" data-number="{{@number}}. ">{{title}}</a></li>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</ol>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="post-list">
|
||||
<div class="post-list home-post-list">
|
||||
{{#foreach posts}}
|
||||
<article class="post-card">
|
||||
<article class="post-card{{#if featured}} is-featured{{/if}}">
|
||||
<a class="post-card__media" href="{{url}}">
|
||||
{{#if feature_image}}
|
||||
<img src="{{img_url feature_image size="s"}}" alt="{{title}}">
|
||||
@@ -9,7 +9,7 @@
|
||||
{{/if}}
|
||||
</a>
|
||||
<div class="post-card__content">
|
||||
<h2>
|
||||
<h2 class="post-card__title">
|
||||
<a href="{{url}}">
|
||||
{{#if featured}}
|
||||
<img class="post-card__featured-icon" src="{{asset "icons/bolt.svg"}}" alt="">
|
||||
@@ -17,7 +17,7 @@
|
||||
<span>{{title}}</span>
|
||||
</a>
|
||||
</h2>
|
||||
{{#if excerpt}}<p>{{excerpt words="22"}}</p>{{/if}}
|
||||
{{#if excerpt}}<p class="post-card__excerpt">{{excerpt words="24"}}</p>{{/if}}
|
||||
<div class="post-card__meta">
|
||||
<time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
|
||||
{{#primary_author}}
|
||||
@@ -28,6 +28,10 @@
|
||||
<span class="meta-divider">/</span>
|
||||
<a class="meta-pill" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>{{name}}</a>
|
||||
{{/primary_tag}}
|
||||
{{#unless access}}
|
||||
<span class="meta-divider">/</span>
|
||||
<span class="meta-item meta-item--access">Members</span>
|
||||
{{/unless}}
|
||||
<span class="meta-divider">/</span>
|
||||
<span class="meta-item meta-item--comments">
|
||||
<span class="meta-item__icon">◌</span>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<ul class="menu-groups__list flex flex-col gap-0.75 text-typ text-sm">
|
||||
<li class="menu-group menu-group--nav nav-toggle is-mainitem flex items-center flex-wrap w-full relative group" :class="{ 'is-open': homePagesOpen }" data-label="Home pages" data-slug="home-pages" data-length="10" aria-haspopup="true">
|
||||
<a class="menu-group__link menu-group__link--toggle flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="#" role="button" @click.prevent="homePagesOpen = !homePagesOpen" :aria-expanded="homePagesOpen.toString()" aria-haspopup="true">
|
||||
<span class="menu-link__marker"></span>
|
||||
<span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
|
||||
<span class="menu-link__label">Home pages</span>
|
||||
</a>
|
||||
<button class="menu-group__toggle relative cursor-pointer p-2 rounded-r-theme" type="button" title="Menu toggle" aria-label="Toggle submenu" aria-controls="home-pages" :aria-expanded="homePagesOpen.toString()" @click="homePagesOpen = !homePagesOpen" aria-haspopup="true">
|
||||
@@ -20,21 +20,21 @@
|
||||
|
||||
<li class="menu-group menu-group--nav menu-group--link flex items-center flex-wrap w-full relative group" data-label="Tags" data-slug="tags" data-length="4">
|
||||
<a class="menu-group__link flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="/tags/">
|
||||
<span class="menu-link__marker"></span>
|
||||
<span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
|
||||
<span class="menu-link__label">Tags</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="menu-group menu-group--nav menu-group--link flex items-center flex-wrap w-full relative group" data-label="Authors" data-slug="authors" data-length="7">
|
||||
<a class="menu-group__link flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="/authors/">
|
||||
<span class="menu-link__marker"></span>
|
||||
<span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
|
||||
<span class="menu-link__label">Authors</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="menu-group menu-group--nav nav-toggle is-mainitem flex items-center flex-wrap w-full relative group" :class="{ 'is-open': membersOpen }" data-label="Members" data-slug="members" data-length="7" aria-haspopup="true">
|
||||
<a class="menu-group__link menu-group__link--toggle flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="#" role="button" @click.prevent="membersOpen = !membersOpen" :aria-expanded="membersOpen.toString()" aria-haspopup="true">
|
||||
<span class="menu-link__marker"></span>
|
||||
<span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
|
||||
<span class="menu-link__label">Members</span>
|
||||
</a>
|
||||
<button class="menu-group__toggle relative cursor-pointer p-2 rounded-r-theme" type="button" title="Menu toggle" aria-label="Toggle submenu" aria-controls="members" :aria-expanded="membersOpen.toString()" @click="membersOpen = !membersOpen" aria-haspopup="true">
|
||||
|
||||
Reference in New Issue
Block a user