Skip to content

Commit

Permalink
refactor: home grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@eallion
eallion committed Oct 25, 2024
1 parent ed0d361 commit b777eb4
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 138 deletions.
133 changes: 23 additions & 110 deletions assets/css/compiled/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1893,6 +1893,10 @@ select {
height:0.75rem
}

.h-32 {
height:8rem
}

.h-36 {
height:9rem
}
Expand Down Expand Up @@ -1958,10 +1962,6 @@ select {
height:100vh
}

.h-32 {
height:8rem
}

.max-h-3 {
max-height:0.75rem
}
Expand Down Expand Up @@ -2014,6 +2014,10 @@ select {
width:0.75rem
}

.w-32 {
width:8rem
}

.w-36 {
width:9rem
}
Expand Down Expand Up @@ -2092,16 +2096,12 @@ select {
width:100vw
}

.w-32 {
width:8rem
}

.min-w-0 {
min-width:0px
}

.min-w-24 {
min-width:6rem
.min-w-32 {
min-width:8rem
}

.min-w-\[1\.8rem\] {
Expand All @@ -2128,10 +2128,6 @@ select {
min-width:100%
}

.min-w-32 {
min-width:8rem
}

.max-w-3xl {
max-width:48rem
}
Expand Down Expand Up @@ -2704,21 +2700,6 @@ select {
background-color:transparent
}

.bg-neutral-50 {
--tw-bg-opacity:1;
background-color:rgba(var(--color-neutral-50), var(--tw-bg-opacity))
}

.bg-primary-50 {
--tw-bg-opacity:1;
background-color:rgba(var(--color-primary-50), var(--tw-bg-opacity))
}

.bg-primary-900 {
--tw-bg-opacity:1;
background-color:rgba(var(--color-primary-900), var(--tw-bg-opacity))
}

.bg-gradient-to-b {
background-image:linear-gradient(to bottom, var(--tw-gradient-stops))
}
Expand Down Expand Up @@ -2747,24 +2728,6 @@ select {
--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-primary-700 {
--tw-gradient-from:rgba(var(--color-primary-700), 1) var(--tw-gradient-from-position);
--tw-gradient-to:rgba(var(--color-primary-700), 0) var(--tw-gradient-to-position);
--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-primary-800 {
--tw-gradient-from:rgba(var(--color-primary-800), 1) var(--tw-gradient-from-position);
--tw-gradient-to:rgba(var(--color-primary-800), 0) var(--tw-gradient-to-position);
--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-primary-400 {
--tw-gradient-from:rgba(var(--color-primary-400), 1) var(--tw-gradient-from-position);
--tw-gradient-to:rgba(var(--color-primary-400), 0) var(--tw-gradient-to-position);
--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-60\% {
--tw-gradient-from-position:60%
}
Expand All @@ -2777,6 +2740,10 @@ select {
--tw-gradient-to:rgba(var(--color-neutral-100), 1) var(--tw-gradient-to-position)
}

.to-primary-200 {
--tw-gradient-to:rgba(var(--color-primary-200), 1) var(--tw-gradient-to-position)
}

.to-secondary-600 {
--tw-gradient-to:rgba(var(--color-secondary-600), 1) var(--tw-gradient-to-position)
}
Expand All @@ -2785,26 +2752,6 @@ select {
--tw-gradient-to:transparent var(--tw-gradient-to-position)
}

.to-primary-600 {
--tw-gradient-to:rgba(var(--color-primary-600), 1) var(--tw-gradient-to-position)
}

.to-primary-300 {
--tw-gradient-to:rgba(var(--color-primary-300), 1) var(--tw-gradient-to-position)
}

.to-primary-800 {
--tw-gradient-to:rgba(var(--color-primary-800), 1) var(--tw-gradient-to-position)
}

.to-primary-700 {
--tw-gradient-to:rgba(var(--color-primary-700), 1) var(--tw-gradient-to-position)
}

.to-primary-200 {
--tw-gradient-to:rgba(var(--color-primary-200), 1) var(--tw-gradient-to-position)
}

.bg-clip-padding {
background-clip:padding-box
}
Expand Down Expand Up @@ -5426,6 +5373,11 @@ pre {
color:rgba(var(--color-neutral-100), var(--tw-text-opacity))
}

.hover\:text-neutral-300:hover {
--tw-text-opacity:1;
color:rgba(var(--color-neutral-300), var(--tw-text-opacity))
}

.hover\:text-primary-400:hover {
--tw-text-opacity:1;
color:rgba(var(--color-primary-400), var(--tw-text-opacity))
Expand All @@ -5446,16 +5398,6 @@ pre {
color:rgba(var(--color-primary-700), var(--tw-text-opacity))
}

.hover\:text-neutral-200:hover {
--tw-text-opacity:1;
color:rgba(var(--color-neutral-200), var(--tw-text-opacity))
}

.hover\:text-neutral-300:hover {
--tw-text-opacity:1;
color:rgba(var(--color-neutral-300), var(--tw-text-opacity))
}

.hover\:underline:hover {
text-decoration-line:underline
}
Expand Down Expand Up @@ -5703,11 +5645,6 @@ pre {
background-color:rgba(var(--color-primary-900), var(--tw-bg-opacity))
}

.dark\:bg-neutral-900:is(.dark *) {
--tw-bg-opacity:1;
background-color:rgba(var(--color-neutral-900), var(--tw-bg-opacity))
}

.dark\:from-neutral-800:is(.dark *) {
--tw-gradient-from:rgba(var(--color-neutral-800), 1) var(--tw-gradient-from-position);
--tw-gradient-to:rgba(var(--color-neutral-800), 0) var(--tw-gradient-to-position);
Expand All @@ -5720,42 +5657,18 @@ pre {
--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:from-primary-400:is(.dark *) {
--tw-gradient-from:rgba(var(--color-primary-400), 1) var(--tw-gradient-from-position);
--tw-gradient-to:rgba(var(--color-primary-400), 0) var(--tw-gradient-to-position);
--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:from-primary-500:is(.dark *) {
--tw-gradient-from:rgba(var(--color-primary-500), 1) var(--tw-gradient-from-position);
--tw-gradient-to:rgba(var(--color-primary-500), 0) var(--tw-gradient-to-position);
--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:to-neutral-800:is(.dark *) {
--tw-gradient-to:rgba(var(--color-neutral-800), 1) var(--tw-gradient-to-position)
}

.dark\:to-secondary-800:is(.dark *) {
--tw-gradient-to:rgba(var(--color-secondary-800), 1) var(--tw-gradient-to-position)
}

.dark\:to-primary-600:is(.dark *) {
--tw-gradient-to:rgba(var(--color-primary-600), 1) var(--tw-gradient-to-position)
}

.dark\:to-primary-300:is(.dark *) {
--tw-gradient-to:rgba(var(--color-primary-300), 1) var(--tw-gradient-to-position)
}

.dark\:to-primary-700:is(.dark *) {
--tw-gradient-to:rgba(var(--color-primary-700), 1) var(--tw-gradient-to-position)
}

.dark\:to-primary-800:is(.dark *) {
--tw-gradient-to:rgba(var(--color-primary-800), 1) var(--tw-gradient-to-position)
}

.dark\:to-secondary-800:is(.dark *) {
--tw-gradient-to:rgba(var(--color-secondary-800), 1) var(--tw-gradient-to-position)
}

.dark\:text-neutral:is(.dark *) {
--tw-text-opacity:1;
color:rgba(var(--color-neutral), var(--tw-text-opacity))
Expand Down
46 changes: 18 additions & 28 deletions layouts/partials/home/custom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<style>#content_progress{display:none;}</style>

<article class="max-w-full prose dark:prose-invert">
<section class="max-w-full prose dark:prose-invert">
<div class="relative">
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
<div class="mx-auto max-w-7xl p-0">
Expand Down Expand Up @@ -773,7 +773,7 @@ <h2 class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300">

if (articleDataList.length > 0) {
const titles = articleDataList.map(data => data.title);
const title = titles.map(t => `《${t}》`).join('<br />');
const title = titles.map(t => `“${t}”`).join('<br />');

let count = 0;
let post = articleDataList.length;
Expand Down Expand Up @@ -813,45 +813,35 @@ <h2 class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300">

</script>

<section class="prose dark:prose-invert">{{ .Content }}</section>

</div>
</div>
</div>
</div>
</article>
</section>

<section>
{{ $recentArticles := 5 }}
{{ $showMoreLinkDest := "/posts" }}
{{ if .Site.Params.homepage.showRecent | default false }}
{{ if index .Site.Params.homepage "showRecentItems" }}
{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
{{ end }}

<h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" }}</h2>

{{ if and .Site.Params.homepage.cardView (not .Site.Params.homepage.cardViewScreenWidth) | default false }}
{{ partial "recent-articles/cardview.html" . }}
{{ else if and .Site.Params.homepage.cardView .Site.Params.homepage.cardViewScreenWidth | default false }}
{{ partial "recent-articles/cardview-fullwidth.html" . }}
{{ else }}
{{ partial "recent-articles/list.html" . }}
{{ end }}

{{ if .Site.Params.homepage.showMoreLink | default false }}
{{ if index .Site.Params.homepage "showRecentItems" }}
{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
{{ end }}
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ $paginatedPages := .Paginate $pages }}
{{ $filteredPages := after 0 $paginatedPages.Pages }}
{{ range first 9 $filteredPages }}
{{ partial "article-link/card.html" . }}
{{ end }}
</section>

<div class="mt-10 flex justify-center">
<a href="{{ $showMoreLinkDest }}">
<button
class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">
<a href="/blog">
<button class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded" type="button">
{{ i18n "recent.show_more" | markdownify }}
</button>
</a>
</div>
{{ end }}
{{ end }}

</section>

{{ if .Site.Params.homepage.layoutBackgroundBlur | default false }}
<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>

Expand Down

0 comments on commit b777eb4

Please sign in to comment.