mirror of
https://github.com/spaytac/Casper.git
synced 2026-01-21 16:54:52 +00:00
**update** tag page improvements
This commit is contained in:
parent
395dad204d
commit
6bcc1d4c3a
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -535,6 +535,14 @@ h6 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.post-tag-content {
|
||||
padding: max(8vmin,40px) max(4vmin,20px) max(8vmin,64px);
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-tag-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
||||
@ -542,20 +550,110 @@ h6 {
|
||||
row-gap: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
.post-tag-grid {
|
||||
column-gap: 30px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
row-gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.site-footer .post-tag-content {
|
||||
max-width: 500px;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.site-footer .copyright,
|
||||
.site-footer .copyright a {
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.site-footer .copyright {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.post-tag-grid {
|
||||
column-gap: 30px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0,1fr);
|
||||
row-gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-tag-grid-item {
|
||||
overflow: hidden;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.post-tag-grid-item-svg{
|
||||
width: 320px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.post-tag-grid-item-svg-first{
|
||||
height: 180px;
|
||||
width: 80px;
|
||||
fill: var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
.post-tag-grid-item-svg-first-obj{
|
||||
height: 28px;
|
||||
width: 80px;
|
||||
x:0;
|
||||
y:80;
|
||||
}
|
||||
|
||||
.post-tag-grid-item-svg-first-obj-text{
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.post-tag-grid-item-svg-second, .post-tag-grid-item-svg-second-obj{
|
||||
height: 180px;
|
||||
width: 240px;
|
||||
x: 80;
|
||||
y: 0;
|
||||
}
|
||||
|
||||
.post-tag-grid-item-svg-second-obj-inner{
|
||||
padding: max(0.5vmin,2px);
|
||||
}
|
||||
|
||||
.post-tag-grid-item-svg-second{
|
||||
fill: black;
|
||||
}
|
||||
|
||||
.post-tag-grid-item-svg-second-obj, .post-tag-grid-item-svg-second-obj-description{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.post-tag-grid-item h2 {
|
||||
margin: 0.3em 0 0.3em;
|
||||
font-size: 28px;
|
||||
margin: 0.3em 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.post-card-image {
|
||||
background: var(--color-lightgrey) no-repeat center center;
|
||||
inset: 0;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
.post-tag-grid-item-subtext:after,
|
||||
.post-tag-grid-item-subtext:before {
|
||||
content: " ";
|
||||
height: 1px;
|
||||
background: #000;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.post-tag-grid-item-subtext:after {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.post-tag-grid-item-subtext:before {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
@ -573,7 +671,6 @@ h6 {
|
||||
}
|
||||
|
||||
.post-tags a .post-tag-title {
|
||||
color: var(--ghost-accent-color) !important;
|
||||
margin-top: 2%
|
||||
}
|
||||
|
||||
|
||||
BIN
assets/js/casper-aytac.zip
Normal file
BIN
assets/js/casper-aytac.zip
Normal file
Binary file not shown.
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "casper-aytac",
|
||||
"description": "A clean, minimal default theme for the Ghost publishing platform",
|
||||
"demo": "https://demo.ghost.io",
|
||||
"description": "A clean, minimal default theme for the Ghost publishing platform with little modifications by Aytac",
|
||||
"demo": "https://aytac.kirmizi.online",
|
||||
"version": "5.3.2",
|
||||
"engines": {
|
||||
"ghost": ">=5.0.0"
|
||||
|
||||
@ -1,24 +1,80 @@
|
||||
{{!< default}}
|
||||
|
||||
<section class="post-content">
|
||||
<section class="post-content post-tag-content">
|
||||
<div class="post-tag-grid">
|
||||
{{#get 'tags' limit='9' include='count.posts' order='count.posts desc'}}
|
||||
{{#get 'tags' limit='15' include='count.posts' order='count.posts desc'}}
|
||||
{{#foreach tags}}
|
||||
<div class="post-tag-grid-item">
|
||||
<a href='{{ url }}'>
|
||||
{{#if feature_image}}
|
||||
<img class="post-card-image"
|
||||
src="{{img_url feature_image size="phone"}}"
|
||||
alt="{{title}}" />
|
||||
{{/if}}
|
||||
<h2>{{ name }}</h2>
|
||||
<p>{{description}}</p>
|
||||
<p>
|
||||
<small>{{ count.posts }} posts.</small>
|
||||
</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="post-tag-grid-item-svg">
|
||||
{{#if accent_color}}
|
||||
<rect x="0" y="0" style="fill: {{accent_color}}" class="post-tag-grid-item-svg-first"></rect>
|
||||
{{else}}
|
||||
<rect x="0" y="0" class="post-tag-grid-item-svg-first"></rect>
|
||||
{{/if}}
|
||||
<foreignObject class="post-tag-grid-item-svg-first-obj">
|
||||
<div class="post-tag-grid-item-svg-first-obj-text">{{ count.posts }}</div>
|
||||
</foreignObject>
|
||||
<rect class="post-tag-grid-item-svg-second"></rect>
|
||||
<foreignObject class="post-tag-grid-item-svg-second-obj">
|
||||
<div class="post-tag-grid-item-svg-second-obj-inner">
|
||||
{{#if accent_color}}
|
||||
<h2 style="color:{{accent_color}};">{{ name }}</h2>
|
||||
{{else}}
|
||||
<h2>{{ name }}</h2>
|
||||
{{/if}}
|
||||
|
||||
{{#if description}}
|
||||
<p class="post-tag-grid-item-svg-second-obj-description">{{description}}</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
{{!-- <section class="post-content post-tag-content">
|
||||
<div class="post-tag-grid">
|
||||
{{#get 'tags' limit='15' include='count.posts' order='count.posts desc'}}
|
||||
{{#foreach tags}}
|
||||
<div class="post-tag-grid-item">
|
||||
<a href='{{ url }}'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 260px;" class="post-tag-grid-item-svg">
|
||||
{{#if accent_color}}
|
||||
<rect x="0" y="0" height="150" width="80" style="fill: {{accent_color}}" class="post-tag-grid-item-svg-first"></rect>
|
||||
{{else}}
|
||||
<rect x="0" y="0" height="150" width="80" style="fill: var(--ghost-accent-color)" class="post-tag-grid-item-svg-first"></rect>
|
||||
{{/if}}
|
||||
<foreignObject x="0" y="55" height="28" width="80" class="post-tag-grid-item-svg-first">
|
||||
<div style="color: white;font-size: 28px;height: 28px;">{{ count.posts }}</div>
|
||||
</foreignObject>
|
||||
<rect x="80" y="0" height="150" width="180" style=" fill: black" class="post-tag-grid-item-svg-second"></rect>
|
||||
{{#if accent_color}}
|
||||
<foreignObject x="80" y="0" height="150" width="180" style="color:{{accent_color}};" class="post-tag-grid-item-svg-second">
|
||||
{{else}}
|
||||
<foreignObject x="80" y="0" height="150" width="180" style="color:white;" class="post-tag-grid-item-svg-second">
|
||||
{{/if}}
|
||||
|
||||
{{#if description}}
|
||||
<div>
|
||||
<h2>{{ name }}</h2>
|
||||
<p style="color:white;">{{description}}</p>
|
||||
</div>
|
||||
{{else}}
|
||||
<div style="margin-top: 30%;">
|
||||
<h2>{{ name }}</h2>
|
||||
</div>
|
||||
{{/if}}
|
||||
</foreignObject>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
</section> --}}
|
||||
6
post.hbs
6
post.hbs
@ -63,7 +63,11 @@ into the {body} tag of the default.hbs template --}}
|
||||
<div class="post-tags-box-label">Tags</div>
|
||||
{{#foreach tags}}
|
||||
<a href="{{url}}">
|
||||
<span class="post-tag-title">{{name}}</span>
|
||||
{{#if accent_color}}
|
||||
<span class="post-tag-title" style="color:{{accent_color}};">{{name}}</span>
|
||||
{{else}}
|
||||
<span class="post-tag-title" style="color:var(--ghost-accent-color);">{{name}}</span>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user