mirror of
https://github.com/spaytac/Casper.git
synced 2026-01-21 16:54:52 +00:00
GitHub
commit
4710ac85d6
2
LICENSE
2
LICENSE
@ -1,4 +1,4 @@
|
||||
Copyright (c) 2013-2022 Ghost Foundation
|
||||
Copyright (c) 2013-2023 Ghost Foundation
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
|
||||
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
@ -89,17 +89,10 @@ video {
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
@ -107,18 +100,15 @@ q:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
@ -126,42 +116,34 @@ html {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
i,
|
||||
em,
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
@ -169,27 +151,21 @@ sup {
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #fdffb6;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
@ -197,7 +173,6 @@ samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 3px 5px;
|
||||
font-family: var(--font-mono);
|
||||
@ -207,109 +182,81 @@ kbd {
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 -1px 0 rgba(124, 139, 154, 0.25);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
kbd {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
/* 3 */
|
||||
color: inherit;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */
|
||||
margin: 0; /* 3 */
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
html input[type="button"],
|
||||
/* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
/* 3 */
|
||||
cursor: pointer; /* 3 */
|
||||
|
||||
-webkit-appearance: button;
|
||||
/* 2 */
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
box-sizing: content-box;
|
||||
/* 2 */
|
||||
box-sizing: content-box; /* 2 */
|
||||
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
border: 0;
|
||||
/* 1 */
|
||||
padding: 0; /* 2 */
|
||||
border: 0; /* 1 */
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
@ -324,7 +271,6 @@ html {
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color-darkgrey);
|
||||
font-family: var(--font-sans);
|
||||
@ -415,7 +361,7 @@ li {
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
li+li {
|
||||
li + li {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
@ -445,7 +391,6 @@ blockquote small {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Quotation marks */
|
||||
blockquote small:before {
|
||||
content: "\2014 \00A0";
|
||||
@ -454,7 +399,6 @@ blockquote small:before {
|
||||
blockquote cite {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote cite a {
|
||||
font-weight: normal;
|
||||
}
|
||||
@ -483,7 +427,6 @@ h1 {
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
h1 {
|
||||
font-size: 2.8rem;
|
||||
@ -495,7 +438,6 @@ h2 {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
h2 {
|
||||
font-size: 2.3rem;
|
||||
@ -507,7 +449,6 @@ h3 {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
h3 {
|
||||
font-size: 1.7rem;
|
||||
@ -518,7 +459,6 @@ h4 {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
h4 {
|
||||
font-size: 1.7rem;
|
||||
@ -534,188 +474,3 @@ h6 {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
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);
|
||||
column-gap: 30px;
|
||||
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 {
|
||||
font-size: 28px;
|
||||
margin: 0.3em 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin: 1.2em 0em -1em;
|
||||
}
|
||||
|
||||
.post-tags a {
|
||||
border-bottom: none !important;
|
||||
font-size: small;
|
||||
margin: 0 1% 0 0
|
||||
}
|
||||
|
||||
.post-tags a .post-tag-title::before {
|
||||
content: '#'
|
||||
}
|
||||
|
||||
.post-tags a .post-tag-title {
|
||||
margin-top: 2%
|
||||
}
|
||||
|
||||
.post-tags a .post-tag-title:hover {
|
||||
background-color: var(--color-background-hover);
|
||||
color: var(--ghost-main-color) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 980px) {
|
||||
article .post-tags a .post-tag-title {
|
||||
margin-top: 2%
|
||||
}
|
||||
}
|
||||
|
||||
.post-tags .post-tags-box-label {
|
||||
font-size: 1rem;
|
||||
line-height: 1em;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: --color-content-light
|
||||
}
|
||||
|
||||
.article-share{
|
||||
margin: 6vmin 0 0;
|
||||
}
|
||||
|
||||
.article-share ul {
|
||||
list-style: none;
|
||||
padding-left: 0em;
|
||||
}
|
||||
|
||||
.article-share li {
|
||||
display: inline;
|
||||
padding-left: 0em;
|
||||
}
|
||||
|
||||
.article-share li+li {
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
|
||||
a.social-share-link svg {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.post-card-title-custom{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -1025,6 +1025,11 @@ production stylesheet in assets/built/screen.css
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
:is(.tag-template, .author-template) .post-card-large .post-card-excerpt {
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.post-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1213,20 +1218,19 @@ html.no-infinite-scroll .pagination {
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.article {
|
||||
padding: max(8vmin, 40px) 0 max(8vmin, 64px);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.page-template .article {
|
||||
padding-top: max(12vmin, 64px);
|
||||
.post-template .article {
|
||||
padding: max(8vmin, 40px) 0 max(8vmin, 64px);
|
||||
}
|
||||
|
||||
.article-header {
|
||||
padding: 0 0 max(6.4vmin, 40px) 0;
|
||||
.post-template .article-header {
|
||||
padding: 0 0 max(6.4vmin, 40px);
|
||||
}
|
||||
|
||||
.page-template .article-header {
|
||||
padding-bottom: max(3.2vmin, 28px);
|
||||
padding: max(12vmin, 64px) 0 max(3.2vmin, 28px);
|
||||
}
|
||||
|
||||
.article-tag {
|
||||
@ -1295,28 +1299,28 @@ html.no-infinite-scroll .pagination {
|
||||
is laid out on top of. Canvas just defines the grid, we don't
|
||||
use it for applying any other styles. */
|
||||
|
||||
.gh-canvas {
|
||||
.gh-canvas,
|
||||
.kg-width-full.kg-content-wide {
|
||||
--gap: max(4vmin, 20px);
|
||||
--main: min(var(--content-width, 720px), 100% - var(--gap) * 2);
|
||||
--wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
|
||||
--full: minmax(var(--gap), 1fr);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[full-start]
|
||||
minmax(max(4vmin, 20px), auto)
|
||||
[wide-start]
|
||||
minmax(auto, 240px)
|
||||
[main-start]
|
||||
min(720px, calc(100% - max(8vmin, 40px)))
|
||||
[main-end]
|
||||
minmax(auto, 240px)
|
||||
[wide-end]
|
||||
minmax(max(4vmin, 20px), auto)
|
||||
[full-end]
|
||||
;
|
||||
[full-start] var(--full)
|
||||
[wide-start] var(--wide)
|
||||
[main-start] var(--main) [main-end]
|
||||
var(--wide) [wide-end]
|
||||
var(--full) [full-end];
|
||||
}
|
||||
|
||||
.gh-canvas > * {
|
||||
grid-column: main-start / main-end;
|
||||
}
|
||||
|
||||
.kg-width-wide {
|
||||
.kg-width-wide,
|
||||
.kg-content-wide > div {
|
||||
grid-column: wide-start / wide-end;
|
||||
}
|
||||
|
||||
@ -1342,6 +1346,11 @@ headings, text, images and lists. We deal with cards lower down. */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Remove space between full-width cards */
|
||||
.gh-content > .kg-width-full + .kg-width-full:not(.kg-width-full.kg-card-hascaption + .kg-width-full) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* [id] represents all headings h1-h6, reset all margins */
|
||||
.gh-content > [id] {
|
||||
margin: 0;
|
||||
@ -1392,6 +1401,14 @@ is the very first element in the post content */
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.page-template .gh-content:only-child > *:first-child:not(.kg-width-full) {
|
||||
margin-top: max(12vmin, 64px);
|
||||
}
|
||||
|
||||
.page-template .gh-content > *:last-child:not(.kg-width-full) {
|
||||
margin-bottom: max(12vmin, 64px);
|
||||
}
|
||||
|
||||
.gh-content .kg-callout-card .kg-callout-text,
|
||||
.gh-content .kg-toggle-card .kg-toggle-content > ol,
|
||||
.gh-content .kg-toggle-card .kg-toggle-content > ul,
|
||||
@ -1479,6 +1496,14 @@ is the very first element in the post content */
|
||||
box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
.gh-content ol ol li {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.gh-content ol ol ol li {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.gh-content > blockquote:not([class]),
|
||||
.gh-content > ol,
|
||||
@ -1516,11 +1541,9 @@ make sure they look good, and are given a bit of extra spacing. */
|
||||
except for when immediately preceeded by a heading */
|
||||
.gh-content :not(.kg-card):not([id]) + .kg-card {
|
||||
margin-top: 6vmin;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.gh-content .kg-card + :not(.kg-card) {
|
||||
margin-top: 6vmin;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* This keeps small embeds centered */
|
||||
@ -2024,6 +2047,10 @@ iframe.instagram-media + script + :not([id]) {
|
||||
background: color-mod(var(--color-darkgrey) l(-5%));
|
||||
}
|
||||
|
||||
.page-template .site-footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.site-footer .inner {
|
||||
display: grid;
|
||||
grid-gap: 40px;
|
||||
@ -2119,8 +2146,7 @@ html.dark-mode figcaption a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html.dark-mode .gh-head,
|
||||
html.dark-mode .has-cover:not(.home-template) .gh-head {
|
||||
html.dark-mode body:not(.has-cover) .gh-head {
|
||||
background: var(--color-darkmode);
|
||||
color: #fff;
|
||||
}
|
||||
@ -2288,8 +2314,8 @@ html.dark-mode .footer-cta-title {
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
html.dark-mode .gh-head-open #gh-head,
|
||||
html.dark-mode .gh-head-open #gh-head .gh-head-actions {
|
||||
html.dark-mode .gh-head-open:not(.has-cover) #gh-head,
|
||||
html.dark-mode .gh-head-open:not(.has-cover) #gh-head .gh-head-actions {
|
||||
background: var(--color-darkmode);
|
||||
}
|
||||
}
|
||||
@ -2312,8 +2338,7 @@ html.dark-mode .footer-cta-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html.auto-color .gh-head,
|
||||
html.auto-color .has-cover:not(.home-template) .gh-head {
|
||||
html.auto-color body:not(.has-cover) .gh-head {
|
||||
background: var(--color-darkmode);
|
||||
color: #fff;
|
||||
}
|
||||
@ -2481,8 +2506,8 @@ html.dark-mode .footer-cta-title {
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
html.auto-color .gh-head-open #gh-head,
|
||||
html.auto-color .gh-head-open #gh-head .gh-head-actions {
|
||||
html.auto-color .gh-head-open:not(.has-cover) #gh-head,
|
||||
html.auto-color .gh-head-open:not(.has-cover) #gh-head .gh-head-actions {
|
||||
background: var(--color-darkmode);
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,10 @@
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
{{!-- Preload scripts --}}
|
||||
<link rel="preload" as="style" href="{{asset "built/screen.css"}}" />
|
||||
<link rel="preload" as="script" href="{{asset "built/casper.js"}}" />
|
||||
|
||||
{{!-- Theme assets - use the {asset} helper to reference styles & scripts,
|
||||
this will take care of caching and cache-busting automatically --}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "casper-aytac",
|
||||
"description": "A clean, minimal default theme for the Ghost publishing platform with little modifications by Aytac",
|
||||
"demo": "https://aytac.kirmizi.online",
|
||||
"version": "5.4.11",
|
||||
"version": "5.6.0",
|
||||
"engines": {
|
||||
"ghost": ">=5.0.0"
|
||||
},
|
||||
|
||||
44
page.hbs
44
page.hbs
@ -10,30 +10,32 @@ into the {body} tag of the default.hbs template --}}
|
||||
<main id="site-main" class="site-main">
|
||||
<article class="article {{post_class}}">
|
||||
|
||||
<header class="article-header gh-canvas">
|
||||
{{#match @page.show_title_and_feature_image}}
|
||||
<header class="article-header gh-canvas">
|
||||
|
||||
<h1 class="article-title">{{title}}</h1>
|
||||
<h1 class="article-title">{{title}}</h1>
|
||||
|
||||
{{#if feature_image}}
|
||||
<figure class="article-image">
|
||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
||||
<img
|
||||
srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{img_url feature_image size="m"}} 600w,
|
||||
{{img_url feature_image size="l"}} 1000w,
|
||||
{{img_url feature_image size="xl"}} 2000w"
|
||||
sizes="(min-width: 1400px) 1400px, 92vw"
|
||||
src="{{img_url feature_image size="xl"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
/>
|
||||
{{#if feature_image_caption}}
|
||||
<figcaption>{{feature_image_caption}}</figcaption>
|
||||
{{/if}}
|
||||
</figure>
|
||||
{{/if}}
|
||||
{{#if feature_image}}
|
||||
<figure class="article-image">
|
||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
||||
<img
|
||||
srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{img_url feature_image size="m"}} 600w,
|
||||
{{img_url feature_image size="l"}} 1000w,
|
||||
{{img_url feature_image size="xl"}} 2000w"
|
||||
sizes="(min-width: 1400px) 1400px, 92vw"
|
||||
src="{{img_url feature_image size="xl"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
/>
|
||||
{{#if feature_image_caption}}
|
||||
<figcaption>{{feature_image_caption}}</figcaption>
|
||||
{{/if}}
|
||||
</figure>
|
||||
{{/if}}
|
||||
|
||||
</header>
|
||||
</header>
|
||||
{{/match}}
|
||||
|
||||
<section class="gh-content gh-canvas">
|
||||
{{content}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user