v0.1.40 홈 피드 및 문서 버전 정리
Made-with: Cursor
This commit is contained in:
@@ -1,15 +1,49 @@
|
||||
<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>
|
||||
<section class="home-hero px-5 sm:px-6 py-6 md:py-8 relative" data-home-hero="">
|
||||
<div class="max-w-content mx-auto flex gap-6">
|
||||
<div class="home-hero__content z-2 flex-2 flex flex-col gap-2 items-center justify-center text-center">
|
||||
<h1 class="text-xl md:text-2xl font-semibold text-balance leading-[1.125]">
|
||||
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>
|
||||
<p class="text-base text-balance text-typ-tone max-w-md leading-snug">{{@site.description}}</p>
|
||||
{{/if}}
|
||||
{{subscribe_form
|
||||
placeholder="Your email"
|
||||
button_class="button button--light button--subscribe"
|
||||
form_class="subscribe-form subscribe-form--hero"
|
||||
}}
|
||||
<form class="group relative flex w-full max-w-xs flex-col items-start mt-1" data-members-form="subscribe">
|
||||
<fieldset class="w-full flex gap-2 flex-wrap text-sm">
|
||||
<legend class="sr-only">Personal information</legend>
|
||||
<input data-members-email="" class="text-sm bg-bgr-tone border border-brd text-typ flex-2 py-1.5 px-3 rounded-md focus:ring-0 focus:bg-bgr" type="email" autocomplete="email" placeholder="Your email" aria-label="Your email" required="" aria-required="true">
|
||||
<button class="flex-1 px-3 py-1.5 text-bgr font-medium rounded-md hover:opacity-90 bg-gradient-to-b from-typ/75 to-typ/95 border border-typ cursor-pointer" type="submit">
|
||||
<span class="hidden group-[.loading]:flex items-center justify-center">
|
||||
<i class="icon icon-loader size-5 [&_svg]:animate-spin stroke-2" role="presentation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 3a9 9 0 1 0 9 9"></path>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
<span class="group-[.loading]:hidden">Subscribe</span>
|
||||
</button>
|
||||
</fieldset>
|
||||
<div data-notification="" class="absolute left-0 -bottom-16 z-50 invisible opacity-0 -translate-y-4 transition-all text-[0.8rem] text-left font-medium leading-none flex items-center w-full max-w-md rounded-md gap-2 bg-white text-black p-3 shadow-lg group-[.success]:opacity-100 group-[.success]:visible group-[.success]:translate-y-0 group-[.error]:opacity-100 group-[.error]:visible group-[.error]:translate-y-0">
|
||||
<div class="hidden group-[.success]:flex items-center gap-2 flex-1">
|
||||
<i class="icon icon-success size-6 text-emerald-600 fill-current" role="presentation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"></path>
|
||||
</svg>
|
||||
</i>
|
||||
<p>Great! Check your inbox and click the link.</p>
|
||||
</div>
|
||||
<div class="hidden group-[.error]:flex items-center gap-2 flex-1">
|
||||
<i class="icon icon-error size-6 text-red-600 fill-current" role="presentation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"></path>
|
||||
</svg>
|
||||
</i>
|
||||
<p>Sorry, something went wrong. Please try again.</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
@@ -1,59 +1,97 @@
|
||||
<section class="px-5 sm:px-6 py-4" data-tabs data-home-content>
|
||||
<section class="px-5 sm:px-6 py-4" data-home-content x-data="{ activeFeed: '#latest', postFeedTypeOpen: false }">
|
||||
<div class="max-w-content mx-auto">
|
||||
<div class="flex gap-2 items-center justify-between border-b border-brd pb-2">
|
||||
<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 class="flex gap-2 items-center justify-between border-b border-brd pb-2">
|
||||
<ul class="hidden md:flex gap-1 text-typ-tone font-medium" data-feed-select="">
|
||||
<li data-feed-select-item="latest">
|
||||
<a href="#latest" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#latest' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#latest'">Latest</a>
|
||||
</li>
|
||||
<li data-feed-select-item="featured">
|
||||
<a href="#featured" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#featured' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#featured'">Featured</a>
|
||||
</li>
|
||||
<li data-feed-select-item="updated">
|
||||
<a href="#updated" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#updated' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#updated'">Updated</a>
|
||||
</li>
|
||||
<li data-feed-select-item="categories">
|
||||
<a href="#categories" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#categories' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#categories'">Categories</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="flex flex-col gap-1 relative text-sm font-medium md:hidden">
|
||||
<button class="px-3 py-1.5 pr-2 rounded-theme bg-bgr hover:bg-bgr-tone relative leading-none cursor-pointer flex gap-0.75 items-center justify-center border border-brd" @click="postFeedTypeOpen = !postFeedTypeOpen" data-feed-type-toggle="" aria-label="Select feed type">
|
||||
<span class="pointer-events-none" x-show="activeFeed === '#latest'">Latest</span>
|
||||
<span class="pointer-events-none" x-show="activeFeed === '#featured'">Featured</span>
|
||||
<span class="pointer-events-none" x-show="activeFeed === '#updated'">Updated</span>
|
||||
<span class="pointer-events-none" x-show="activeFeed === '#categories'">Categories</span>
|
||||
<span class="opacity-75 pointer-events-none">
|
||||
<i class="icon icon-chevron-down stroke-[2.5] size-4" role="presentation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<menu class="flex flex-col gap-0.5 absolute top-9 left-0 border border-brd bg-bgr rounded-theme p-1.5 z-10 transition-[transform,opacity,visibility] shadow" :class="postFeedTypeOpen ? 'translate-y-0 opacity-100 visible' : '-translate-y-2 opacity-0 invisible'" @click.outside="postFeedTypeOpen = false">
|
||||
<li class="w-full"><a href="#latest" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#latest'; postFeedTypeOpen = false">Latest</a></li>
|
||||
<li class="w-full"><a href="#featured" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#featured'; postFeedTypeOpen = false">Featured</a></li>
|
||||
<li class="w-full"><a href="#updated" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#updated'; postFeedTypeOpen = false">Updated</a></li>
|
||||
<li class="w-full"><a href="#categories" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#categories'; postFeedTypeOpen = false">Categories</a></li>
|
||||
</menu>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-8 mb-8 is-active" data-tab-panel="latest">
|
||||
{{> "lists/post-feed"}}
|
||||
</div>
|
||||
<div class="flex flex-col gap-8 mb-8" x-show="activeFeed === '#latest'" data-feed="latest">
|
||||
{{> "lists/post-feed"}}
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" data-tab-panel="featured">
|
||||
{{#get "posts" filter="featured:true" limit="8" include="authors,tags"}}
|
||||
{{> "lists/post-items" posts=posts}}
|
||||
{{/get}}
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" data-tab-panel="updated">
|
||||
{{#get "posts" order="updated_at desc" limit="8" include="authors,tags"}}
|
||||
{{> "lists/post-items" posts=posts}}
|
||||
{{/get}}
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" data-tab-panel="categories">
|
||||
<div class="category-overview">
|
||||
{{#get "tags" limit="8" include="count.posts" order="count.posts desc"}}
|
||||
{{#foreach tags}}
|
||||
<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 class="category-overview__link" href="{{url}}">View all ↗</a>
|
||||
</div>
|
||||
<ol class="category-overview__posts">
|
||||
{{#get "posts" filter=(concat "tag:" slug) limit="5"}}
|
||||
{{#foreach posts}}
|
||||
<li><a href="{{url}}" data-number="{{@number}}. ">{{title}}</a></li>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</ol>
|
||||
</section>
|
||||
{{/foreach}}
|
||||
<div class="tab-panel" x-show="activeFeed === '#featured'" data-feed="featured">
|
||||
{{#get "posts" filter="featured:true" limit="8" include="authors,tags"}}
|
||||
{{> "lists/post-items" posts=posts}}
|
||||
{{/get}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel **:data-post-card-date-updated:block **:data-post-card-date:hidden" x-show="activeFeed === '#updated'" data-feed="updated">
|
||||
{{#get "posts" order="updated_at desc" limit="8" include="authors,tags"}}
|
||||
{{> "lists/post-items" posts=posts}}
|
||||
{{/get}}
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" x-show="activeFeed === '#categories'" data-feed="categories">
|
||||
<ul class="flex flex-col">
|
||||
{{#get "tags" limit="8" include="count.posts" order="count.posts desc"}}
|
||||
{{#foreach tags}}
|
||||
<li class="p-4 pl-5 sm:pl-6 sm:p-5 flex flex-wrap flex-col gap-2 md:flex-row border-b border-b-brd relative before:absolute before:left-0 before:top-0 before:w-0.75 before:h-full before:bg-accent"{{#if accent_color}} style="--color-accent:{{accent_color}}"{{/if}}>
|
||||
<h2 class="font-medium basis-full leading-tight">{{name}}</h2>
|
||||
<div class="flex-2 flex flex-col gap-1.5 border-b border-brd pb-3 mb-2 md:pb-0 md:border-b-0 md:mr-4 md:mb-0 items-start justify-between">
|
||||
{{#if description}}
|
||||
<p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{description}}</p>
|
||||
{{else}}
|
||||
<p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{plural count.posts empty="No posts yet" singular="% post in this category" plural="% posts in this category"}}</p>
|
||||
{{/if}}
|
||||
<a href="{{url}}" class="text-sm text-typ-tone font-semibold leading-snug flex items-center gap-1 hover:opacity-75 mt-0.5">
|
||||
<span>View all</span>
|
||||
<i class="icon icon-arrow-up-right size-3.5 stroke-3" role="presentation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M17 7l-10 10"></path>
|
||||
<path d="M8 7l9 0l0 9"></path>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
<ol class="flex-3 flex flex-col gap-1.5 text-sm text-typ-tone font-medium">
|
||||
{{#get "posts" filter=(concat "tag:" slug) limit="5"}}
|
||||
{{#foreach posts}}
|
||||
<li>
|
||||
<a href="{{url}}" data-number="{{@number}}. " class="line-clamp-1 text-ellipsis before:content-[attr(data-number)] before:font-bold leading-snug hover:opacity-75" title="{{title}}">{{title}}</a>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</ol>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
{{#if show_filter}}
|
||||
<div class="section-filter">
|
||||
<span>Latest posts</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{> "lists/post-items" posts=posts}}
|
||||
{{pagination}}
|
||||
<div class="post-feed" data-load-more-root>
|
||||
{{#if show_filter}}
|
||||
<div class="section-filter">
|
||||
<span>Latest posts</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{> "lists/post-items" posts=posts}}
|
||||
{{pagination}}
|
||||
</div>
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<div class="post-list home-post-list flex flex-col divide-y divide-brd">
|
||||
<div class="post-list home-post-list flex flex-col divide-y divide-brd" data-load-more-list>
|
||||
{{#foreach posts}}
|
||||
<article class="post {{post_class}} relative flex flex-row items-start gap-3 text-typ py-4 group overflow-hidden" data-post-card{{#if featured}} data-featured{{/if}}>
|
||||
<a href="{{url}}" data-post-card-media class="flex-1 relative group aspect-square sm:aspect-video min-w-16 ">
|
||||
{{#if feature_image}}
|
||||
<figure class="block rounded-theme overflow-hidden" role="none">
|
||||
<img class="w-full aspect-square sm:aspect-video object-cover rounded-[inherit] hover:opacity-90 transition-all blur-0" src="{{img_url feature_image size="s"}}" alt="{{title}}">
|
||||
<figure class="block rounded-lg overflow-hidden" role="none">
|
||||
<img class="w-full aspect-square sm:aspect-video object-cover hover:opacity-90 transition-all blur-0" src="{{img_url feature_image size="s"}}" alt="{{title}}">
|
||||
</figure>
|
||||
{{else}}
|
||||
<span class="block w-full aspect-square sm:aspect-video rounded-theme bg-bgr-tone text-typ-tone text-xs text-center p-4">{{title}}</span>
|
||||
<span class="block w-full aspect-square sm:aspect-video rounded-lg bg-bgr-tone text-typ-tone text-xs text-center p-4">{{title}}</span>
|
||||
{{/if}}
|
||||
</a>
|
||||
<div class="relative min-w-0 flex-3 md:flex-4 flex flex-col gap-1.5 justify-between " data-post-card-content>
|
||||
<h2 class="text-sm font-medium leading-tight flex flex-wrap gap-y-0.5 gap-x-1.5 items-end max-w-[90%]" data-post-card-title>
|
||||
<a href="{{url}}" class="hover:opacity-75 flex items-start gap-1.5">
|
||||
{{#if featured}}
|
||||
<span data-post-featured class="inline-flex text-brand -mr-0.5 shrink-0">
|
||||
<span data-post-featured class="icon icon-bolt size-4 stroke-1 fill-current5">
|
||||
<img class="size-4 -mt-0.5" src="{{asset "icons/bolt.svg"}}" alt="">
|
||||
</span>
|
||||
{{/if}}
|
||||
@@ -45,7 +45,9 @@
|
||||
</a>
|
||||
</div>
|
||||
<button data-post-share-toggle class="absolute top-0 md:top-auto md:bottom-0 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer md:opacity-0 md:invisible group-hover:opacity-100 group-hover:visible transition-[opacity,visibility]" type="button" aria-label="Share this post">
|
||||
<img class="size-4 pointer-events-none" src="{{asset "icons/arrow_outward.svg"}}" alt="">
|
||||
<i class="icon icon-share size-4 stroke-2 pointer-events-none" role="presentation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-share-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13 4v4c-6.575 1.028 -9.02 6.788 -10 12c-.037 .206 5.384 -5.962 10 -6v4l8 -7l-8 -7"></path></svg>
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -1,9 +1,16 @@
|
||||
<nav class="pagination" role="navigation">
|
||||
{{#if prev}}
|
||||
<a class="pagination__link" href="{{page_url prev}}">Newer</a>
|
||||
{{/if}}
|
||||
<span class="pagination__status">Page {{page}} of {{pages}}</span>
|
||||
{{#if next}}
|
||||
<a class="pagination__link" href="{{page_url next}}">Older</a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
{{#if next}}
|
||||
<div class="pagination pagination--load-more" data-load-more-pagination data-next-url="{{page_url next}}">
|
||||
<button class="pagination__load-more" type="button" data-load-more-trigger>Load More</button>
|
||||
</div>
|
||||
{{/if}}
|
||||
<noscript>
|
||||
<nav class="pagination" role="navigation">
|
||||
{{#if prev}}
|
||||
<a class="pagination__link" href="{{page_url prev}}">Newer</a>
|
||||
{{/if}}
|
||||
<span class="pagination__status">Page {{page}} of {{pages}}</span>
|
||||
{{#if next}}
|
||||
<a class="pagination__link" href="{{page_url next}}">Older</a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
</noscript>
|
||||
|
||||
@@ -1,14 +1,32 @@
|
||||
<nav class="post-navigation">
|
||||
<nav class="px-5 sm:px-6 mb-6">
|
||||
<div class="max-w-content mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-4 text-sm leading-tight font-medium">
|
||||
{{#prev_post}}
|
||||
<a class="post-navigation__link" href="{{url}}">
|
||||
<small>Previous post</small>
|
||||
<strong>{{title}}</strong>
|
||||
<a class="flex flex-col gap-1 items-start hover:opacity-75" href="{{url}}">
|
||||
<small class="uppercase font-medium text-[0.7rem] text-typ-tone opacity-75 flex items-center gap-0.75">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="14" height="14" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M15 6l-6 6l6 6"></path></svg>
|
||||
Previous post
|
||||
</small>
|
||||
<strong class="text-left flex flex-col gap-1 ml-4">{{title}}</strong>
|
||||
</a>
|
||||
{{/prev_post}}
|
||||
{{#next_post}}
|
||||
<a class="post-navigation__link post-navigation__link--next" href="{{url}}">
|
||||
<small>Next post</small>
|
||||
<strong>{{title}}</strong>
|
||||
<a class="flex flex-col gap-1 items-end hover:opacity-75" href="{{url}}">
|
||||
<small class="uppercase font-medium text-[0.7rem] text-typ-tone opacity-75 flex items-center gap-0.75">
|
||||
Next post
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="14" height="14" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 6l6 6l-6 6"></path></svg>
|
||||
</small>
|
||||
<strong class="text-left flex flex-col gap-1 ml-4">{{title}}</strong>
|
||||
</a>
|
||||
{{/next_post}}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<aside class="sidebar sidebar--left">
|
||||
<div class="sidebar__inner">
|
||||
<nav class="menu-groups border-b border-brd pl-4 pr-3 sm:pl-5 xl:pl-0 py-3" data-nav="menu" data-primary-nav x-data="{ homePagesOpen: true, membersOpen: false }">
|
||||
<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">
|
||||
@@ -64,7 +63,7 @@
|
||||
</button>
|
||||
<div class="sidebar-card__content sidebar-card__content--categories" x-cloak x-show="categoriesOpen">
|
||||
<ul class="category-grid grid sm:grid-cols-2 gap-x-2 gap-0.5 mt-1 text-typ-tone font-medium text-[0.8rem] -mb-1.5">
|
||||
{{#get "tags" limit="10" include="count.posts"}}
|
||||
{{#get "tags" limit="11" include="count.posts"}}
|
||||
{{#foreach tags}}
|
||||
<li>
|
||||
<a class="category-chip group flex items-center gap-2 leading-tight pl-0 pr-3 py-2 rounded-theme hover:bg-bgr-tone hover:px-3 hover:text-typ transition-[padding]" href="{{url}}" aria-label="{{name}}"{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
|
||||
@@ -79,7 +78,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sidebar-card">
|
||||
<section class="px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5 border-b border-brd">
|
||||
<div class="sidebar-card__header">
|
||||
<h2>Authors</h2>
|
||||
</div>
|
||||
@@ -102,12 +101,15 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="sidebar-footer">
|
||||
<a href="{{@custom.footer_primary_url}}">{{@custom.footer_primary_link}}</a>
|
||||
<a href="{{@custom.footer_secondary_url}}">{{@custom.footer_secondary_link}}</a>
|
||||
<a href="{{@custom.footer_tertiary_url}}">{{@custom.footer_tertiary_link}}</a>
|
||||
<a href="{{@custom.footer_quaternary_url}}">{{@custom.footer_quaternary_link}}</a>
|
||||
<button class="icon-button icon-button--plain" type="button" data-theme-toggle aria-label="Toggle theme">◐</button>
|
||||
<span class="flex-1"></span>
|
||||
|
||||
<nav class="pl-4 pr-3 sm:pl-5 xl:pl-1 py-2 flex items-center justify-between gap-2">
|
||||
<ul class="flex flex-wrap items-center gap-3 text-typ-tone text-xs mb-2">
|
||||
<li><a href="{{@custom.footer_primary_url}}">{{@custom.footer_primary_link}}</a></li>
|
||||
<li><a href="{{@custom.footer_secondary_url}}">{{@custom.footer_secondary_link}}</a></li>
|
||||
<li><a href="{{@custom.footer_tertiary_url}}">{{@custom.footer_tertiary_link}}</a></li>
|
||||
<li><a href="{{@custom.footer_quaternary_url}}">{{@custom.footer_quaternary_link}}</a></li>
|
||||
</ul>
|
||||
<button class="flex items-center self-start gap-1 p-1 size-6 rounded-theme hover:bg-bgr-tone cursor-pointer text-xs font-medium" data-theme-toggle aria-label="Toggle theme">◐</button>
|
||||
</footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -1,36 +1,39 @@
|
||||
<aside class="sidebar sidebar--right">
|
||||
<div class="sidebar__inner sidebar__inner--right">
|
||||
{{#is "post"}}
|
||||
{{#post}}
|
||||
{{#primary_author}}
|
||||
<section class="author-feature author-feature--top">
|
||||
{{#if profile_image}}
|
||||
<img class="avatar avatar--large" src="{{img_url profile_image size="s"}}" alt="{{name}}">
|
||||
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
|
||||
<a class="flex gap-2 hover:opacity-80">{{#if profile_image}}
|
||||
<img class="object-cover size-10 sm:size-12 aspect-square" src="{{img_url profile_image size="s"}}" alt="{{name}}">
|
||||
{{else}}
|
||||
<div class="avatar avatar--large avatar--fallback">A</div>
|
||||
<div class="object-cover size-10 sm:size-12 aspect-square avatar--fallback">A</div>
|
||||
{{/if}}
|
||||
<div class="author-feature__body">
|
||||
<h3>{{name}}</h3>
|
||||
{{#if bio}}<p>{{bio}}</p>{{/if}}
|
||||
<div class="flex-1 flex flex-col gap-1">
|
||||
<h3 class="text-sm font-medium leading-tight flex items-center justify-between gap-1">{{name}}</h3>
|
||||
{{#if bio}}<p class="text-xs text-typ-tone leading-tight line-clamp-3 text-overflow-ellipsis">{{bio}}</p>{{/if}}
|
||||
</div>
|
||||
<span class="author-feature__action">↗</span>
|
||||
</a>
|
||||
</section>
|
||||
{{/primary_author}}
|
||||
{{/post}}
|
||||
{{/is}}
|
||||
|
||||
<section class="site-intro">
|
||||
{{#if @site.icon}}
|
||||
<img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
|
||||
{{else}}
|
||||
<div class="site-icon site-icon--fallback">T</div>
|
||||
{{/if}}
|
||||
<div class="about-block">
|
||||
<h2>{{@site.title}}</h2>
|
||||
{{#if @site.description}}
|
||||
<p>{{@site.description}}</p>
|
||||
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-3 border-b border-brd ">
|
||||
<div class="flex items-center gap-2.5">
|
||||
{{#if @site.icon}}
|
||||
<img class="w-12 min-h-12 rounded-md h-full relative" src="{{@site.icon}}" alt="{{@site.title}}">
|
||||
{{else}}
|
||||
<div class="w-12 min-h-12 rounded-md h-full relative site-icon--fallback">T</div>
|
||||
{{/if}}
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<h2 class="text-sm md:text-base font-medium leading-tight">{{@site.title}}</h2>
|
||||
{{#if @site.description}}
|
||||
<p class="text-sm text-typ-tone leading-tight">{{@site.description}}</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
{{subscribe_form
|
||||
@@ -38,57 +41,71 @@
|
||||
button_class="button button--subscribe"
|
||||
form_class="subscribe-form"
|
||||
}}
|
||||
|
||||
|
||||
<section class="sidebar-card sidebar-card--tight">
|
||||
<div class="sidebar-card__header">
|
||||
<h2>Follow</h2>
|
||||
<span class="sidebar-card__action">↗</span>
|
||||
</div>
|
||||
<div class="social-row">
|
||||
{{#if @site.facebook}}<a href="{{social_url type="facebook"}}" aria-label="Facebook">f</a>{{/if}}
|
||||
{{#if @site.twitter}}<a href="{{social_url type="twitter"}}" aria-label="X">x</a>{{/if}}
|
||||
<a href="{{@site.url}}/rss/" aria-label="RSS">rss</a>
|
||||
</div>
|
||||
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-wrap items-center justify-between gap-1.5 border-b border-brd">
|
||||
<h2 class="uppercase font-medium text-xs text-typ-tone">Follow</h2>
|
||||
<nav class="relative flex flex-wrap items-center gap-1 text-typ text-sm z-10">
|
||||
{{!-- {{#if @site.facebook}}<a href="{{social_url type="facebook"}}" class="hover:opacity-75 p-0.5" aria-label="Facebook">f</a>{{/if}} --}}
|
||||
{{#if @site.twitter}}<a href="{{social_url type="twitter"}}" class="w-5 h-5 hover:opacity-75 p-0.5" aria-label="X">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
|
||||
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
|
||||
</svg>
|
||||
</a>{{/if}}
|
||||
<a href="{{@site.url}}/rss/" class="hover:w-5 h-5 opacity-75 p-0.5" aria-label="RSS">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rss" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<circle cx="5" cy="19" r="1"></circle>
|
||||
<path d="M4 4a16 16 0 0 1 16 16"></path>
|
||||
<path d="M4 11a9 9 0 0 1 9 9"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<section class="sidebar-card sidebar-card--tight">
|
||||
<div class="sidebar-card__header">
|
||||
<h2>Recommended</h2>
|
||||
<span class="sidebar-card__action">↗</span>
|
||||
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
|
||||
<div class="flex items-center justify-between gap-2 mb-2">
|
||||
<h2 class="uppercase font-medium text-xs text-typ-tone">Recommended</h2>
|
||||
<button class="text-sm font-medium flex items-center gap-1 rounded-btn group bg-bgr text-typ hover:text-typ-tone cursor-pointer gh-portal-close">↗</button>
|
||||
</div>
|
||||
<ul class="recommended-list">
|
||||
<ul class="flex flex-col gap-1 rounded-theme overflow-hidden">
|
||||
{{#get "posts" filter="featured:true" limit="3" include="tags"}}
|
||||
{{#foreach posts}}
|
||||
<li><a href="{{url}}">{{title}}</a></li>
|
||||
<li><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75">{{title}}</a></li>
|
||||
{{/foreach}}
|
||||
{{else}}
|
||||
<li><a href="{{@site.url}}">{{@site.title}}</a></li>
|
||||
<li><a href="{{@site.url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75">{{@site.title}}</a></li>
|
||||
{{/get}}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="sidebar-card sidebar-card--about">
|
||||
<p>{{@site.title}} is a thoughtfully designed Ghost theme inspired by editorial communities, with flexible settings that let you shape it to your publication.</p>
|
||||
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-2.5 border-b border-brd">
|
||||
<p class="text-sm white-space: pre-wrap;">{{@site.title}} is a thoughtfully designed Ghost theme inspired by editorial communities, with flexible settings that let you shape it to your publication.</p>
|
||||
<a class="button button--accent" href="{{@site.url}}">About {{@site.title}}</a>
|
||||
</section>
|
||||
|
||||
{{#is "post"}}
|
||||
{{#post}}
|
||||
<section class="sidebar-card sidebar-card--tight">
|
||||
<div class="sidebar-card__header">
|
||||
<h2>Read next</h2>
|
||||
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
|
||||
<div class="flex items-center justify-between gap-2 mb-1">
|
||||
<h2 class="uppercase font-medium text-xs text-typ-tone">Read next</h2>
|
||||
</div>
|
||||
<ul class="recommended-list">
|
||||
<ul class="flex flex-col gap-0.5 rounded-theme overflow-hidden">
|
||||
{{#get "posts" filter=(concat "id:-" id) limit="4"}}
|
||||
{{#foreach posts}}
|
||||
<li><a href="{{url}}">{{title}}</a></li>
|
||||
<li class="style-none"><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75"><h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{title}}</h3></a></li>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</ul>
|
||||
</section>
|
||||
{{/post}}
|
||||
{{/is}}
|
||||
|
||||
<footer class="copyright">©{{date format="YYYY"}} {{@site.title}}. Published with Ghost.</footer>
|
||||
</div>
|
||||
<span class="md:flex-1"></span>
|
||||
<footer class="px-5 sm:px-6 xl:pr-1">
|
||||
<div class="py-3 flex flex-col items-start justify-start text-typ-tone text-xs">
|
||||
©{{date format="YYYY"}} {{@site.title}}. Published with Ghost.
|
||||
</div>
|
||||
</footer>
|
||||
</aside>
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
<header class="topbar">
|
||||
<div class="topbar__inner">
|
||||
<div class="topbar__brand flex items-center gap-3">
|
||||
<button class="topbar__sidebar-toggle" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
|
||||
<header class="topbar border-b border-brd bg-bgr/95 supports-[backdrop-filter]:bg-bgr/80">
|
||||
<div class="topbar__inner mx-auto">
|
||||
<div class="topbar__brand flex h-full items-center gap-3 px-4">
|
||||
<button class="topbar__sidebar-toggle inline-flex items-center justify-center rounded-theme hover:bg-bgr-tone" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
|
||||
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open" src="{{asset "icons/left_panel_open.svg"}}" alt="">
|
||||
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close" src="{{asset "icons/left_panel_close.svg"}}" alt="">
|
||||
</button>
|
||||
<a class="brand brand--topbar" href="{{@site.url}}">
|
||||
<a class="brand brand--topbar inline-flex items-center gap-2.5 whitespace-nowrap" href="{{@site.url}}">
|
||||
<span class="brand__name">{{@site.title}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="topbar__search">
|
||||
<button class="search-trigger" type="button" data-search-open aria-label="Open search">
|
||||
<div class="topbar__search flex h-full items-center justify-center px-4">
|
||||
<button class="search-trigger flex w-full max-w-xs items-center gap-2.5 rounded-xl border border-brd bg-bgr px-3.5 py-2 text-sm text-typ-tone transition-colors hover:bg-bgr-tone hover:text-typ" type="button" data-search-open aria-label="Open search">
|
||||
<img class="search-trigger__icon" src="{{asset "icons/search.svg"}}" alt="">
|
||||
<span>Search</span>
|
||||
<span class="search-shortcut">/</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="topbar__actions flex items-center justify-end gap-2">
|
||||
<button class="icon-button icon-button--search-mobile" type="button" data-search-open aria-label="Open search">
|
||||
<div class="topbar__actions flex h-full items-center justify-end gap-2 px-4">
|
||||
<button class="icon-button icon-button--search-mobile inline-flex items-center justify-center rounded-theme border border-brd bg-bgr hover:bg-bgr-tone" type="button" data-search-open aria-label="Open search">
|
||||
<img class="search-trigger__icon" src="{{asset "icons/search.svg"}}" alt="">
|
||||
</button>
|
||||
{{#if @custom.show_admin_link}}
|
||||
<a class="button button--accent" href="/ghost/">Admin</a>
|
||||
<a class="icon-button icon-button--profile" href="/ghost/" aria-label="Ghost admin"><span></span></a>
|
||||
<a class="button button--accent rounded-theme" href="/ghost/">Admin</a>
|
||||
<a class="icon-button icon-button--profile rounded-full border border-brd bg-bgr hover:bg-bgr-tone" href="/ghost/" aria-label="Ghost admin"><span></span></a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -33,10 +33,10 @@
|
||||
<div class="search-modal__panel">
|
||||
<div class="search-modal__input">
|
||||
<button type="button" class="icon-button icon-button--plain" data-search-close aria-label="Close search">×</button>
|
||||
<input type="search" placeholder="Search posts, tags and authors" data-search-input>
|
||||
<input type="search" placeholder="게시물, 태그, 작성자 검색" data-search-input>
|
||||
</div>
|
||||
<div class="search-modal__body" data-search-results>
|
||||
<p class="search-modal__hint">Start typing to filter visible posts, tags, and authors in the current page.</p>
|
||||
<p class="search-modal__hint">현재 페이지에 표시되는 게시물, 태그 및 작성자를 필터링하려면 입력을 시작하세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user