a lot more modularity, only logo clouds left

This commit is contained in:
Aleksa Siriški 2023-06-08 11:39:34 +02:00
parent 00cd5d5574
commit 5ad6969c6a
No known key found for this signature in database
8 changed files with 82 additions and 110 deletions

View File

@ -22,14 +22,35 @@ params:
p1: p1:
heading: "Our mission" heading: "Our mission"
image: "images/pages/our-mission.png"
content: content:
- text: "Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi. Cursus faucibus nunc nisl netus morbi vel porttitor vitae ut. Amet vitae fames senectus vitae." - text: "Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi. Cursus faucibus nunc nisl netus morbi vel porttitor vitae ut. Amet vitae fames senectus vitae."
- text: "Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna. Sollicitudin tristique eroserat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna." - text: "Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna. Sollicitudin tristique eroserat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna."
- text: "Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies. Vulputate aliquet velit faucibus semper. Pellentesque in venenatis vestibulum consectetur nibh id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim fermentum lacus in. Viverra." - text: "Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies. Vulputate aliquet velit faucibus semper. Pellentesque in venenatis vestibulum consectetur nibh id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim fermentum lacus in. Viverra."
p2: p2:
heading: "Just in time for Hacktoberfest with JIT Tailwind." heading: "Just in time for Hacktoberfest with JIT Tailwind."
image: "images/pages/hacktoberfest.jpg"
content: content:
- text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at purus non enim commodo tincidunt vel in nulla. Aenean pretium dolor non ultricies bibendum. Etiam quis blandit enim. Nunc condimentum ut lorem in faucibus. Phasellus varius ligula et commodo tristique. Nunc sodales nisl nec laoreet vehicula. Donec velit nibh, sollicitudin at nulla a, egestas dignissim eros. Sed lacinia hendrerit interdum. Vestibulum pellentesque sem venenatis nisl tempor accumsan sit amet tempus felis. Mauris leo diam, porttitor nec bibendum id, tempus ac nulla. Etiam congue ornare erat at convallis. Donec in nisi dapibus, mattis risus vel, imperdiet enim. Donec fermentum sit amet tortor nec tincidunt. Nam nec lectus tortor. Nunc sit amet laoreet orci, porta ornare massa. Phasellus eget lorem mi. Nam eleifend ultricies sapien, quis mollis leo bibendum at. Quisque viverra lorem sit amet magna aliquet, et dignissim arcu eleifend." - text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at purus non enim commodo tincidunt vel in nulla. Aenean pretium dolor non ultricies bibendum. Etiam quis blandit enim. Nunc condimentum ut lorem in faucibus. Phasellus varius ligula et commodo tristique. Nunc sodales nisl nec laoreet vehicula. Donec velit nibh, sollicitudin at nulla a, egestas dignissim eros. Sed lacinia hendrerit interdum. Vestibulum pellentesque sem venenatis nisl tempor accumsan sit amet tempus felis. Mauris leo diam, porttitor nec bibendum id, tempus ac nulla. Etiam congue ornare erat at convallis. Donec in nisi dapibus, mattis risus vel, imperdiet enim. Donec fermentum sit amet tortor nec tincidunt. Nam nec lectus tortor. Nunc sit amet laoreet orci, porta ornare massa. Phasellus eget lorem mi. Nam eleifend ultricies sapien, quis mollis leo bibendum at. Quisque viverra lorem sit amet magna aliquet, et dignissim arcu eleifend."
p3:
heading: "Backed by world-renowned investors"
content:
- text: "cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi. Cursus faucibus nunc nisl netus morbi vel porttitor vitae ut. Amet vitae fames senectus vitae."
links:
- text: Meet our investors and advisors
url: "#"
p4:
heading: "From the blog"
content:
- text: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa libero labore natus atque, ducimus sed."
p5:
heading: "Stay Up to Date"
content:
- text: "Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque."
action: "#"
label: "Email address"
placeholder: "Enter your email"
button: "Notify me"
social_media: social_media:
github: github:

View File

@ -31,14 +31,11 @@
<!-- More main page content here... --> <!-- More main page content here... -->
<!-- Testimonial/stats section --> <!-- Our mission section -->
<div class="relative my-4"> <div class="relative my-4">
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:items-start lg:gap-24 lg:px-8"> <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:items-start lg:gap-24 lg:px-8">
<div class="relative sm:py-8 lg:py-0"> <div class="relative sm:py-8 lg:py-0">
<div aria-hidden="true" class="hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen"> <div aria-hidden="true" class="hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen">
<div
class="absolute inset-y-0 w-full bg-gray-50 dark:bg-gray-900/10 right-1/2 rounded-r-3xl lg:right-72">
</div>
<svg class="absolute -ml-3 top-8 left-1/2 lg:-right-8 lg:left-auto lg:top-12" width="404" <svg class="absolute -ml-3 top-8 left-1/2 lg:-right-8 lg:left-auto lg:top-12" width="404"
height="392" fill="none" viewBox="0 0 404 392" loading="lazy"> height="392" fill="none" viewBox="0 0 404 392" loading="lazy">
<defs> <defs>
@ -52,44 +49,15 @@
</svg> </svg>
</div> </div>
<div class="relative max-w-md px-4 py-6 mx-auto sm:max-w-3xl sm:px-6 lg:max-w-none lg:px-0 lg:py-20"> <div class="relative max-w-md px-4 py-6 mx-auto sm:max-w-3xl sm:px-6 lg:max-w-none lg:px-0 lg:py-20">
<!-- Testimonial card-->
<div class="relative pt-64 pb-10 overflow-hidden shadow-xl rounded-2xl"> <div class="relative pt-64 pb-10 overflow-hidden shadow-xl rounded-2xl">
{{ $missionimage := resources.Get "images/pages/our-mission.png" }} {{ $p1image := resources.Get .Site.Params.P1.Image }}
{{ with $missionimage }} {{ with $p1image }}
{{ with .Resize (printf "%dx%d webp q50" .Width .Height) }} {{ with .Resize (printf "%dx%d webp q80" .Width .Height) }}
<img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" <img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"
class="absolute inset-0 object-cover w-full h-full" alt="TailBliss - Our Mission" class="absolute inset-0 object-cover w-full h-full" alt="P1"
loading="lazy" /> loading="lazy" />
{{ end }}> {{ end }}>
{{ end }} {{ end }}
<div class="absolute inset-0 bg-primary-300 mix-blend-multiply"></div>
<div class="absolute inset-0 bg-gradient-to-t from-primary-600 opacity-80">
</div>
<div class="relative px-8">
<div>
<img class="h-12" src="images/tailbliss-white.svg" alt="Workcation">
</div>
<blockquote class="mt-8">
<div class="relative text-lg font-medium text-white md:flex-grow">
<svg class="absolute top-0 left-0 w-8 h-8 transform -translate-x-3 -translate-y-2 text-primary-400/30"
fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
<path
d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<p class="relative">Tincidunt integer commodo, cursus etiam
aliquam neque, et. Consectetur pretium in volutpat, diam.
Montes, magna cursus nulla feugiat dignissim id lobortis
amet.
</p>
</div>
<footer class="mt-4">
<p class="text-base font-semibold text-gray-200">
John Doe, CEO at TailBliss
</p>
</footer>
</blockquote>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -97,7 +65,7 @@
<div class="relative max-w-md px-4 mx-auto sm:max-w-3xl sm:px-6 lg:px-0"> <div class="relative max-w-md px-4 mx-auto sm:max-w-3xl sm:px-6 lg:px-0">
<!-- Content area --> <!-- Content area -->
<div class="md:pt-12 sm:pt-6 lg:pt-20"> <div class="md:pt-12 sm:pt-6 lg:pt-20">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 capitalize dark:text-gray-50 sm:text-4xl"> <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
{{ .Site.Params.P1.Heading }} {{ .Site.Params.P1.Heading }}
</h2> </h2>
<div class="mt-6 space-y-6 text-gray-900 dark:text-white"> <div class="mt-6 space-y-6 text-gray-900 dark:text-white">
@ -113,14 +81,15 @@
</div> </div>
<!-- Hero section --> <!-- Hero section -->
<div class="overflow-hidden sm:pt-6 lg:relative"> <div class="relative my-4">
<div class="max-w-md px-4 mx-auto sm:max-w-3xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-12 lg:px-8"> <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:items-start lg:gap-24 lg:px-8">
<div> <div class="relative max-w-md px-4 mx-auto sm:max-w-3xl sm:px-6 lg:px-0">
<div class="md:mt-8"> <!-- Content area -->
<div class="mt-6 sm:max-w-xl"> <div class="md:pt-12 sm:pt-6 lg:pt-20">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl"> <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
{{ .Site.Params.P2.Heading }} {{ .Site.Params.P2.Heading }}
</h1> </h2>
<div class="mt-6 space-y-6 text-gray-900 dark:text-white">
{{ range .Site.Params.P2.Content }} {{ range .Site.Params.P2.Content }}
<p class="pb-6 mt-6 text-lg text-gray-900 dark:text-white"> <p class="pb-6 mt-6 text-lg text-gray-900 dark:text-white">
{{ .text }} {{ .text }}
@ -129,41 +98,32 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="sm:mx-auto sm:max-w-3xl sm:px-6"> <div class="relative sm:py-8 lg:py-0">
<div class="md:py-12 sm:relative sm:mt-12 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> <div aria-hidden="true" class="hidden sm:block lg:absolute lg:inset-y-0 lg:left-0 lg:w-screen">
<div class="hidden sm:block"> <svg class="absolute -mr-3 top-8 right-1/2 lg:left-0 lg:right-auto lg:top-12" width="404"
<div height="392" fill="none" viewBox="0 0 404 392" loading="lazy">
class="absolute inset-y-0 w-screen left-1/2 rounded-l-3xl bg-gray-50 dark:bg-gray-900/10 lg:left-80 lg:right-0 lg:w-full">
</div>
<svg class="absolute -mr-3 top-8 right-1/2 lg:left-0 lg:m-0" width="404" height="392" fill="none"
viewBox="0 0 404 392" loading="lazy">
<defs> <defs>
<pattern id="837c3e70-6c3a-44e6-8854-cc48c737b659" x="0" y="0" width="20" height="20" <pattern id="02f20b47-fd69-4224-a62a-4c9de5c763f7" x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse"> patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" class="text-gray-200 dark:text-gray-900/60" <rect x="0" y="0" width="4" height="4" class="text-gray-200 dark:text-gray-900/60"
fill="currentColor" /> fill="currentColor" />
</pattern> </pattern>
</defs> </defs>
<rect width="404" height="392" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)" /> <rect width="404" height="392" fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)" />
</svg> </svg>
</div> </div>
<div class="relative pl-4 -mr-40 sm:mx-auto sm:max-w-3xl sm:px-0 lg:h-full lg:max-w-none lg:pl-12"> <div class="relative max-w-md px-4 py-6 mx-auto sm:max-w-3xl sm:px-6 lg:max-w-none lg:px-20 lg:py-20">
{{ $heroOne := resources.GetMatch "images/pages/hacktoberfest.jpg" }} <div class="relative pt-64 pb-10 overflow-hidden shadow-xl rounded-2xl">
{{ $p2image := resources.Get .Site.Params.P2.Image }}
{{ $tiny := ($heroOne.Fit "480x280 q80") }} {{ with $p2image }}
{{ $small := ($heroOne.Fit "768x280 q80") }} {{ with .Resize (printf "%dx%d webp q80" .Width .Height) }}
{{ $medium := ($heroOne.Fit "1024x280 q80") }} <img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"
{{ $large := ($heroOne.Fit "1374x1000 q80") }} class="absolute inset-0 object-cover w-full h-full" alt="P2"
loading="lazy" />
<img srcset=" {{ end }}>
{{- with $tiny.RelPermalink -}}{{.}} 480w{{- end -}} {{ end }}
{{- with $small.RelPermalink -}}, {{.}} 768w{{- end -}} </div>
{{- with $medium.RelPermalink -}}, {{.}} 1024w{{- end -}}
{{- with $large.RelPermalink -}}, {{.}} 1374w{{- end -}}" src="{{ $heroOne.RelPermalink }}"
alt="TailBliss Hacktoberfest Image"
class="w-full rounded-lg shadow-xl lg:h-full lg:w-auto lg:max-w-none" loading="lazy" />
</div> </div>
</div> </div>
</div> </div>
@ -414,19 +374,20 @@
</div> </div>
<div> <div>
<h2 class="pt-6 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl"> <h2 class="pt-6 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
Backed by world-renowned investors {{ .Site.Params.P3.Heading }}
</h2> </h2>
{{ range .Site.Params.P3.Content }}
<p class="max-w-3xl mt-6 text-lg leading-7 text-gray-900 dark:text-white">Sagittis scelerisque nulla <p class="max-w-3xl mt-6 text-lg leading-7 text-gray-900 dark:text-white">Sagittis scelerisque nulla
cursus in enim {{ .text }}
consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed
aenean erat arcu morbi. Cursus faucibus nunc nisl netus morbi vel porttitor vitae ut. Amet vitae
fames senectus vitae.
</p> </p>
{{ end }}
{{ range .Site.Params.P3.Links }}
<div class="my-6"> <div class="my-6">
<a href="#" class="text-base font-medium text-primary-400 dark:text-primary-100"> <a href="{{ .url }}" class="text-base font-medium text-primary-400 dark:text-primary-100">
Meet our investors and advisors&nbsp&rarr; {{ .text }}&nbsp&rarr;
</a> </a>
</div> </div>
{{ end }}
</div> </div>
</div> </div>
</div> </div>
@ -438,12 +399,14 @@
<div class="relative px-2 mx-auto max-w-7xl"> <div class="relative px-2 mx-auto max-w-7xl">
<div class="text-center"> <div class="text-center">
<h2 <h2
class="text-3xl font-black tracking-tight text-primary-500 capitalize dark:text-primary-300 sm:text-4xl"> class="text-3xl font-black tracking-tight text-primary-500 dark:text-primary-300 sm:text-4xl">
From the blog {{ .Site.Params.P4.Heading }}
</h2> </h2>
<p class="max-w-2xl mx-auto mt-3 text-xl text-gray-500 dark:text-gray-300 sm:mt-4">Lorem ipsum dolor {{ range .Site.Params.P4.Content }}
sit amet consectetur, <p class="max-w-2xl mx-auto mt-3 text-xl text-gray-500 dark:text-gray-300 sm:mt-4">
adipisicing elit. Ipsa libero labore natus atque, ducimus sed.</p> {{ .text }}
</p>
{{ end }}
</div> </div>
<div class="mx-auto text-gray-900 max-w-7xl dark:text-gray-50 md:px-1.5"> <div class="mx-auto text-gray-900 max-w-7xl dark:text-gray-50 md:px-1.5">
@ -476,7 +439,7 @@
{{ range $elem_index, $elem_val := (.GetTerms "tags") }} {{ range $elem_index, $elem_val := (.GetTerms "tags") }}
{{- if gt $elem_index 0 }}, {{ end -}} {{- if gt $elem_index 0 }}, {{ end -}}
<a href="{{ .Permalink }}" <a href="{{ .Permalink }}"
class="inline-flex items-center rounded-md bg-gray-300 hover:bg-primary-200 hover:text-black px-2.5 py-0.5 text-sm font-medium text-gray-900 capitalize">{{ .LinkTitle }}</a> class="inline-flex items-center rounded-md bg-gray-300 hover:bg-primary-200 hover:text-black px-2.5 py-0.5 text-sm font-medium text-gray-900 ">{{ .LinkTitle }}</a>
{{- end -}} {{- end -}}
</div> </div>
<div class="flex items-center mt-6"> <div class="flex items-center mt-6">
@ -513,20 +476,6 @@
{{ if not .Site.Params.Disable_stay_uptodate}} {{ if not .Site.Params.Disable_stay_uptodate}}
<!-- CTA section --> <!-- CTA section -->
<div class="relative pb-16 mt-6"> <div class="relative pb-16 mt-6">
<div aria-hidden="true" class="hidden sm:block">
<div class="absolute inset-y-0 left-0 w-1/2 rounded-r-3xl bg-gray-50 dark:bg-gray-900/10">
</div>
<svg class="absolute -ml-3 top-8 left-1/2" width="404" height="392" fill="none" viewBox="0 0 404 392">
<defs>
<pattern id="8228f071-bcee-4ec8-905a-2a059a2cc4fb" x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" class="text-gray-200 dark:text-gray-900/60"
fill="currentColor" />
</pattern>
</defs>
<rect width="404" height="392" fill="url(#8228f071-bcee-4ec8-905a-2a059a2cc4fb)" />
</svg>
</div>
<div class="max-w-md mx-auto px-7 sm:max-w-3xl lg:max-w-7xl"> <div class="max-w-md mx-auto px-7 sm:max-w-3xl lg:max-w-7xl">
<div class="relative px-6 py-10 overflow-hidden bg-primary-500 shadow-xl rounded-2xl sm:px-12 sm:py-20"> <div class="relative px-6 py-10 overflow-hidden bg-primary-500 shadow-xl rounded-2xl sm:px-12 sm:py-20">
<div aria-hidden="true" class="absolute inset-0 -mt-72 sm:-mt-32 md:mt-0"> <div aria-hidden="true" class="absolute inset-0 -mt-72 sm:-mt-32 md:mt-0">
@ -541,23 +490,25 @@
<div class="relative"> <div class="relative">
<div class="sm:text-center"> <div class="sm:text-center">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl"> <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
Stay Up to Date {{ .Site.Params.P5.Heading }}
</h2> </h2>
<p class="max-w-2xl mx-auto mt-6 text-lg text-primary-100">Sagittis {{ range .Site.Params.P5.Content }}
scelerisque nulla cursus in enim consectetur quam. Dictum urna sed <p class="max-w-2xl mx-auto mt-6 text-lg text-primary-100">
consectetur neque tristique pellentesque.</p> {{ .text }}
</p>
{{ end }}
</div> </div>
<form action="#" class="mt-12 sm:mx-auto sm:flex sm:max-w-lg"> <form action="{{ .Site.Params.P5.Action }}" class="mt-12 sm:mx-auto sm:flex sm:max-w-lg">
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<label for="cta-email" class="sr-only">Email address</label> <label for="cta-email" class="sr-only">{{ .Site.Params.P5.Label }}</label>
<input id="cta-email" type="email" <input id="cta-email" type="email"
class="block w-full px-5 py-3 text-base text-gray-900 placeholder-gray-500 border border-transparent rounded-md shadow-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-500" class="block w-full px-5 py-3 text-base text-gray-900 placeholder-gray-500 border border-transparent rounded-md shadow-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-500"
placeholder="Enter your email"> placeholder="{{ .Site.Params.P5.Placeholder }}">
</div> </div>
<div class="mt-4 sm:mt-0 sm:ml-3"> <div class="mt-4 sm:mt-0 sm:ml-3">
<button type="submit" <button type="submit" class="block w-full px-5 py-3 text-base font-medium text-white bg-gray-900 border border-transparent rounded-md shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-500 sm:px-10">
class="block w-full px-5 py-3 text-base font-medium text-white bg-gray-900 border border-transparent rounded-md shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-500 sm:px-10">Notify {{ .Site.Params.P5.Button }}
me</button> </button>
</div> </div>
</form> </form>
</div> </div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB