~comcloudway/pages

5fa325fde7a744e19907fe0c6c9c0734c573ddc8 — Jakob Meier 3 months ago a73ba6d 
Add shortcode to display color swatches
patch browse .tar.gz 
2 files changed, 22 insertions(+), 2 deletions(-)

M layouts/blog/single.html
A layouts/shortcodes/color-swatch.html

M layouts/blog/single.html => layouts/blog/single.html +4 -2
@@ 7,15 7,17 @@
	<body>
		{{ partial "nav.html" }}
		<main>
			<h2>
			<h1>
				{{.Title}}
			</h2>
			</h1>
			<small>
				{{.Date.Format "January 2, 2006"}}
			</small>
			{{ if (or (eq .Params.toc nil) .Params.toc)}}
			<aside>
				{{ .TableOfContents }}
			</aside>
			{{ end }}
			{{.Content}}
		</main>
		{{ partial "footer.html" . }}


A layouts/shortcodes/color-swatch.html => layouts/shortcodes/color-swatch.html +18 -0
@@ 0,0 1,18 @@
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content">
  <div class="cs-preview" style="background: {{ index .Params 0 }}"></div>
  <span class="cs-text">{{ index .Params 0 }}</span>
  <style>
    .cs-preview {
        width: 5rem;
        border: 2px solid var(--color-headline);
        height: 5rem;
        border-radius: 50%;
        margin: 0.4rem;
    }
    .cs-text {
        margin: 0.4rem;
        width: 100%;
        text-align: center;
    }
  </style>
</div>