Skip to content

Commit 899f349

Browse files
jviottijviotti
authored
Cleanup site shortcodes (#10)
Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
1 parent 51188c4 commit 899f349

File tree

9 files changed

+107
-55
lines changed

9 files changed

+107
-55
lines changed

‎assets/main.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,6 @@ $bootstrap-icons-font-dir: "./";
6666
border-bottom-color: $light !important;
6767
}
6868

69-
#jumbotron {
70-
background-image: url(background.webp);
71-
background-position: center;
72-
background-size: cover;
73-
background-repeat: no-repeat;
74-
}
75-
7669
// TODO: $btn-border-radius doesn't seem to help
7770
.btn {
7871
@extend .rounded-0;

‎content/_index.html‎

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
title = "Home"
33
+++
44

5-
<div class="border-top" id="jumbotron">
6-
<div class="container pt-4 pt-md-5 pb-3">
5+
<div class="border-top position-relative overflow-hidden">
6+
{{< blueprint theme="light" >}}
7+
8+
<div class="container pt-4 pt-md-5 pb-3 position-relative">
79
<div>
810
<div class="badge text-wrap border border-primary text-dark fs-6 mb-4 p-2"><b>Blaze</b>: Compiling JSON Schema for 10x Faster Validation. <a href="https://arxiv.org/abs/2503.02770">Read our paper</a></div>
911

@@ -34,9 +36,9 @@ <h2 class="fw-lighter d-none d-lg-block">
3436
</div>
3537
</div>
3638

37-
<section class="border-top border-bottom bg-light-subtle mb-4 shadow-sm">
39+
{{< components/ribbon >}}
3840
<div class="container text-secondary d-flex flex-column flex-xl-row align-items-center text-center text-xl-start">
39-
<div class="me-xl-5 my-4 text-nowrap">
41+
<div class="me-xl-5 text-nowrap">
4042
<p class="fs-5 mb-2 fw-light">
4143
<i class="bi bi-globe2 me-1"></i>
4244
Great organisations rely on our tooling
@@ -47,7 +49,7 @@ <h2 class="fw-lighter d-none d-lg-block">
4749
of developers in the API space know JSON Schema. Don't miss out</small>
4850
</div>
4951
</div>
50-
<div class="py-3">
52+
<div>
5153
<a class="text-decoration-none" href="https://www.sony.com">
5254
<img class="mx-3 my-3" height="17" src="sony.svg" alt="Sony logo">
5355
</a>
@@ -80,7 +82,7 @@ <h2 class="fw-lighter d-none d-lg-block">
8082
</a>
8183
</div>
8284
</div>
83-
</section>
85+
{{< /components/ribbon >}}
8486

8587
<section class="py-5" id="features">
8688
<div class="container">
@@ -305,26 +307,4 @@ <h1 class="card-title pricing-card-title">€1125<small class="text-body-seconda
305307
</div>
306308
</section>
307309

308-
<section id="opensource" class="border-top pt-5 bg-light-subtle bg-gradient">
309-
<div class="container">
310-
<h4 class="display-6 fw-bold mb-3">Open Source</h4>
311-
312-
<p class="lead mb-4">We maintain key open-source projects that make working with JSON Schema a breeze. Explore our projects on <a href="https://github.com/sourcemeta">GitHub</a> to learn more!</p>
313-
314-
<div class="row g-5">
315-
<div class="col-6">
316-
<a class="mb-3 fs-5 d-block" href="https://www.learnjsonschema.com">Learn JSON Schema</a>
317-
<a href="https://www.learnjsonschema.com">
318-
<img class="w-100 border-top border-start border-end" src="learnjsonschema.webp" alt="Screenshot of the Learn JSON Schema website">
319-
</a>
320-
</div>
321-
322-
<div class="col-6">
323-
<a class="mb-3 fs-5 d-block" href="https://github.com/sourcemeta/jsonschema">JSON Schema CLI</a>
324-
<a href="https://github.com/sourcemeta/jsonschema">
325-
<img class="w-100 border-top border-start border-end" src="jsonschemacli.webp" alt="Screenshot of the JSON Schema CLI in action">
326-
</a>
327-
</div>
328-
</div>
329-
</div>
330-
</section>
310+
{{< sections/opensource >}}

‎layouts/shortcodes/blueprint.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
{{- $theme := .Get "theme" | default "light" -}}
2+
{{- $color := cond (eq $theme "dark") "255, 255, 255" "0, 0, 0" -}}
3+
{{- $gridOpacity := cond (eq $theme "dark") "0.03" "0.02" -}}
4+
{{- $circleOpacity1 := cond (eq $theme "dark") "0.1" "0.06" -}}
5+
{{- $circleOpacity2 := cond (eq $theme "dark") "0.06" "0.04" -}}
6+
{{- $bracketOpacity1 := cond (eq $theme "dark") "0.12" "0.08" -}}
7+
{{- $bracketOpacity2 := cond (eq $theme "dark") "0.08" "0.05" -}}
8+
{{- $targetOpacity1 := cond (eq $theme "dark") "0.08" "0.05" -}}
9+
{{- $targetOpacity2 := cond (eq $theme "dark") "0.06" "0.04" -}}
10+
{{- $rectOpacity1 := cond (eq $theme "dark") "0.08" "0.05" -}}
11+
{{- $rectOpacity2 := cond (eq $theme "dark") "0.05" "0.04" -}}
12+
{{- $measureOpacity := cond (eq $theme "dark") "0.08" "0.06" -}}
13+
14+
<!-- Blueprint-style technical drawing background -->
15+
<div class="position-absolute top-0 start-0 w-100 h-100">
16+
<!-- Grid pattern -->
17+
<div class="position-absolute top-0 start-0 w-100 h-100" style="background-image: linear-gradient(rgba({{ $color }}, {{ $gridOpacity }}) 1px, transparent 1px), linear-gradient(90deg, rgba({{ $color }}, {{ $gridOpacity }}) 1px, transparent 1px); background-size: 60px 60px;"></div>
18+
19+
{{- if eq $theme "dark" -}}
20+
<!-- Large circle outline top-left (like a compass drawing) -->
21+
<div class="position-absolute rounded-circle" style="width: 400px; height: 400px; top: -150px; left: -100px; border: 1px solid rgba({{ $color }}, {{ $circleOpacity1 }});"></div>
22+
<div class="position-absolute rounded-circle" style="width: 420px; height: 420px; top: -160px; left: -110px; border: 1px solid rgba({{ $color }}, {{ $circleOpacity2 }});"></div>
23+
24+
<!-- Corner bracket top-right -->
25+
<div class="position-absolute" style="top: 40px; right: 60px; width: 80px; height: 80px; border-top: 2px solid rgba({{ $color }}, {{ $bracketOpacity1 }}); border-right: 2px solid rgba({{ $color }}, {{ $bracketOpacity1 }});"></div>
26+
<div class="position-absolute" style="top: 50px; right: 70px; width: 60px; height: 60px; border-top: 1px solid rgba({{ $color }}, {{ $bracketOpacity2 }}); border-right: 1px solid rgba({{ $color }}, {{ $bracketOpacity2 }});"></div>
27+
28+
<!-- Center crosshair/target circle -->
29+
<div class="position-absolute rounded-circle" style="width: 250px; height: 250px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba({{ $color }}, {{ $targetOpacity1 }});"></div>
30+
<div class="position-absolute rounded-circle" style="width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba({{ $color }}, {{ $targetOpacity2 }});"></div>
31+
<!-- Crosshair lines -->
32+
<div class="position-absolute" style="width: 1px; height: 60px; top: calc(50% - 125px); left: 50%; background: rgba({{ $color }}, {{ $targetOpacity1 }});"></div>
33+
<div class="position-absolute" style="width: 1px; height: 60px; top: calc(50% + 65px); left: 50%; background: rgba({{ $color }}, {{ $targetOpacity1 }});"></div>
34+
<div class="position-absolute" style="width: 60px; height: 1px; top: 50%; left: calc(50% - 125px); background: rgba({{ $color }}, {{ $targetOpacity1 }});"></div>
35+
<div class="position-absolute" style="width: 60px; height: 1px; top: 50%; left: calc(50% + 65px); background: rgba({{ $color }}, {{ $targetOpacity1 }});"></div>
36+
37+
<!-- Corner bracket bottom-left -->
38+
<div class="position-absolute" style="bottom: 60px; left: 40px; width: 100px; height: 100px; border-bottom: 2px solid rgba({{ $color }}, {{ $bracketOpacity1 }}); border-left: 2px solid rgba({{ $color }}, {{ $bracketOpacity1 }});"></div>
39+
40+
<!-- Rectangle outline bottom-right (like a detail callout) -->
41+
<div class="position-absolute" style="bottom: -50px; right: -30px; width: 300px; height: 200px; border: 1px solid rgba({{ $color }}, {{ $rectOpacity1 }}); transform: rotate(-15deg);"></div>
42+
<div class="position-absolute" style="bottom: -40px; right: -20px; width: 280px; height: 180px; border: 1px solid rgba({{ $color }}, {{ $rectOpacity2 }}); transform: rotate(-15deg);"></div>
43+
44+
<!-- Small measurement-style lines top -->
45+
<div class="position-absolute" style="top: 20%; left: 15%; width: 150px; height: 1px; background: rgba({{ $color }}, {{ $measureOpacity }});"></div>
46+
<div class="position-absolute" style="top: 20%; left: 15%; width: 1px; height: 8px; background: rgba({{ $color }}, {{ $measureOpacity }});"></div>
47+
<div class="position-absolute" style="top: 20%; left: calc(15% + 150px); width: 1px; height: 8px; background: rgba({{ $color }}, {{ $measureOpacity }});"></div>
48+
{{- else -}}
49+
<!-- Large circle outline top-right (like a compass drawing) -->
50+
<div class="position-absolute rounded-circle" style="width: 350px; height: 350px; top: -100px; right: -80px; border: 1px solid rgba({{ $color }}, {{ $circleOpacity1 }});"></div>
51+
<div class="position-absolute rounded-circle" style="width: 370px; height: 370px; top: -110px; right: -90px; border: 1px solid rgba({{ $color }}, {{ $circleOpacity2 }});"></div>
52+
53+
<!-- Corner bracket top-left -->
54+
<div class="position-absolute" style="top: 40px; left: 60px; width: 80px; height: 80px; border-top: 2px solid rgba({{ $color }}, {{ $bracketOpacity1 }}); border-left: 2px solid rgba({{ $color }}, {{ $bracketOpacity1 }});"></div>
55+
<div class="position-absolute" style="top: 50px; left: 70px; width: 60px; height: 60px; border-top: 1px solid rgba({{ $color }}, {{ $bracketOpacity2 }}); border-left: 1px solid rgba({{ $color }}, {{ $bracketOpacity2 }});"></div>
56+
57+
<!-- Center target circles -->
58+
<div class="position-absolute rounded-circle" style="width: 200px; height: 200px; top: 35%; left: 15%; border: 1px solid rgba({{ $color }}, {{ $targetOpacity1 }});"></div>
59+
<div class="position-absolute rounded-circle" style="width: 160px; height: 160px; top: calc(35% + 20px); left: calc(15% + 20px); border: 1px solid rgba({{ $color }}, {{ $targetOpacity2 }});"></div>
60+
61+
<!-- Corner bracket bottom-right -->
62+
<div class="position-absolute" style="bottom: 80px; right: 40px; width: 100px; height: 100px; border-bottom: 2px solid rgba({{ $color }}, {{ $bracketOpacity1 }}); border-right: 2px solid rgba({{ $color }}, {{ $bracketOpacity1 }});"></div>
63+
64+
<!-- Rectangle outline bottom-left (like a detail callout) -->
65+
<div class="position-absolute" style="bottom: -40px; left: -20px; width: 280px; height: 180px; border: 1px solid rgba({{ $color }}, {{ $targetOpacity1 }}); transform: rotate(12deg);"></div>
66+
67+
<!-- Small measurement-style lines -->
68+
<div class="position-absolute" style="top: 25%; right: 20%; width: 120px; height: 1px; background: rgba({{ $color }}, {{ $measureOpacity }});"></div>
69+
<div class="position-absolute" style="top: 25%; right: 20%; width: 1px; height: 8px; background: rgba({{ $color }}, {{ $measureOpacity }});"></div>
70+
<div class="position-absolute" style="top: 25%; right: calc(20% + 120px); width: 1px; height: 8px; background: rgba({{ $color }}, {{ $measureOpacity }});"></div>
71+
{{- end -}}
72+
</div>

‎layouts/shortcodes/components/ribbon.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<section class="bg-light-subtle border-top border-bottom py-4">
2+
{{ .Inner }}
3+
</section>

‎layouts/shortcodes/email.html‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎layouts/shortcodes/github.html‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎layouts/shortcodes/headline.html‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎layouts/shortcodes/quote.html‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎layouts/shortcodes/sections/opensource.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<section id="opensource" class="border-top pt-5 bg-light-subtle bg-gradient">
2+
<div class="container">
3+
<h4 class="display-6 fw-bold mb-3">Open Source</h4>
4+
5+
<p class="lead mb-4">We maintain key open-source projects that make working with JSON Schema a breeze. Explore our projects on <a href="https://github.com/sourcemeta">GitHub</a> to learn more!</p>
6+
7+
<div class="row g-5">
8+
<div class="col-6">
9+
<a class="mb-3 fs-5 d-block" href="https://www.learnjsonschema.com">Learn JSON Schema</a>
10+
<a href="https://www.learnjsonschema.com">
11+
<img class="w-100 border-top border-start border-end" src="/learnjsonschema.webp" alt="Screenshot of the Learn JSON Schema website">
12+
</a>
13+
</div>
14+
15+
<div class="col-6">
16+
<a class="mb-3 fs-5 d-block" href="https://github.com/sourcemeta/jsonschema">JSON Schema CLI</a>
17+
<a href="https://github.com/sourcemeta/jsonschema">
18+
<img class="w-100 border-top border-start border-end" src="/jsonschemacli.webp" alt="Screenshot of the JSON Schema CLI in action">
19+
</a>
20+
</div>
21+
</div>
22+
</div>
23+
</section>

0 commit comments

Comments
 (0)