Initial Roux Hugo site — fashion journal for roux.pivoine.art
100-post fashion journal generated from ~/projects/ginger content: - Hugo Extended static site with TailwindCSS v4 - WebP image pipeline (thumb/card/og/full sizes via Hugo image processing) - Full SEO: sitemap (501 URLs), OpenGraph with per-post images, Twitter cards - Async page transitions via View Transitions API - Deep-linked URLs: /posts/[slug]/, /categories/[cat]/, /tags/[tag]/, /issues/ - Lightbox with keyboard/swipe nav, thumbnail strip, inverted search index - Issues archive with quarterly release structure - Multi-stage Dockerfile (Tailwind → Hugo → nginx:alpine) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
{{ define "main" }}
|
||||
{{/* Category / tag taxonomy list pages */}}
|
||||
<section class="hero" id="hero">
|
||||
{{- if eq .Kind "taxonomy" }}
|
||||
<div class="hero__eyebrow">{{ .Type | humanize }}</div>
|
||||
<h1 class="hero__title"><em>{{ .Title }}</em></h1>
|
||||
<p class="hero__lede">
|
||||
{{ len .Pages }} {{ if eq (len .Pages) 1 }}plate{{ else }}plates{{ end }} in this section.
|
||||
<a href="/" style="border-bottom:1px solid currentColor">Return to archive →</a>
|
||||
</p>
|
||||
{{- else if eq .Kind "term" }}
|
||||
<div class="hero__eyebrow">{{ .Type | humanize | singularize }}</div>
|
||||
<h1 class="hero__title"><em>{{ .Title }}</em></h1>
|
||||
<p class="hero__lede">
|
||||
{{ len .Pages }} {{ if eq (len .Pages) 1 }}plate{{ else }}plates{{ end }} tagged <em>{{ .Title }}</em>.
|
||||
<a href="/" style="border-bottom:1px solid currentColor">Return to archive →</a>
|
||||
</p>
|
||||
{{- else }}
|
||||
<div class="hero__eyebrow">The Archive</div>
|
||||
<h1 class="hero__title">All <em>plates</em></h1>
|
||||
<p class="hero__lede"><a href="/" style="border-bottom:1px solid currentColor">Return to home →</a></p>
|
||||
{{- end }}
|
||||
</section>
|
||||
|
||||
<section class="grid" id="grid" data-density="default"
|
||||
data-filter-type="{{ .Kind }}"
|
||||
data-filter-value="{{ .Title }}">
|
||||
{{- range $i, $p := .Pages }}
|
||||
{{- $img := $p.Resources.GetMatch "*.png" }}
|
||||
<a class="card"
|
||||
href="{{ $p.RelPermalink }}"
|
||||
style="--d:{{ mul (math.Min $i 18) 24 }}ms"
|
||||
data-id="{{ $p.Params.plate }}"
|
||||
data-slug="{{ $p.Params.slug }}">
|
||||
<div class="card__frame">
|
||||
{{- if $img }}
|
||||
{{- $w := $img.Resize "600x900 webp" }}
|
||||
<picture>
|
||||
<source srcset="{{ $w.RelPermalink }}" type="image/webp" />
|
||||
<img class="card__img"
|
||||
loading="{{ if lt $i 8 }}eager{{ else }}lazy{{ end }}"
|
||||
src="{{ $w.RelPermalink }}"
|
||||
alt="{{ $p.Title }}" />
|
||||
</picture>
|
||||
{{- end }}
|
||||
<span class="card__num">PLATE №{{ $p.Params.plate }}</span>
|
||||
<span class="card__cat">{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
|
||||
</div>
|
||||
<div class="card__meta">
|
||||
<h2 class="card__title">{{ $p.Title }}</h2>
|
||||
<div class="card__sub">
|
||||
<span>{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
|
||||
{{- if $p.Params.tags }}<span class="dot"></span><span>{{ index $p.Params.tags 0 }}</span>{{ end }}
|
||||
</div>
|
||||
<p class="card__desc">{{ $p.Params.description }}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{- end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,46 @@
|
||||
{{ define "main" }}
|
||||
{{/* Individual post page — grid renders in background, JS opens lightbox for this slug */}}
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero__eyebrow">{{ index (.Params.categories | default (slice "Plate")) 0 }}</div>
|
||||
<h1 class="hero__title"><em>{{ .Title }}</em></h1>
|
||||
<p class="hero__lede">{{ .Params.description }} <a href="/" style="border-bottom:1px solid currentColor">Return to archive →</a></p>
|
||||
</section>
|
||||
|
||||
<section class="grid" id="grid" data-density="default">
|
||||
{{- $posts := where .Site.RegularPages "Section" "posts" }}
|
||||
{{- range $i, $p := $posts }}
|
||||
{{- $img := $p.Resources.GetMatch "*.png" }}
|
||||
<a class="card"
|
||||
href="{{ $p.RelPermalink }}"
|
||||
style="--d:{{ mul (math.Min $i 18) 24 }}ms"
|
||||
data-id="{{ $p.Params.plate }}"
|
||||
data-slug="{{ $p.Params.slug }}">
|
||||
<div class="card__frame">
|
||||
{{- if $img }}
|
||||
{{- $w := $img.Resize "600x900 webp" }}
|
||||
<picture>
|
||||
<source srcset="{{ $w.RelPermalink }}" type="image/webp" />
|
||||
<img class="card__img"
|
||||
loading="{{ if lt $i 8 }}eager{{ else }}lazy{{ end }}"
|
||||
src="{{ $w.RelPermalink }}"
|
||||
alt="{{ $p.Title }}" />
|
||||
</picture>
|
||||
{{- end }}
|
||||
<span class="card__num">PLATE №{{ $p.Params.plate }}</span>
|
||||
<span class="card__cat">{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
|
||||
</div>
|
||||
<div class="card__meta">
|
||||
<h2 class="card__title">{{ $p.Title }}</h2>
|
||||
<div class="card__sub">
|
||||
<span>{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
|
||||
{{- if $p.Params.tags }}<span class="dot"></span><span>{{ index $p.Params.tags 0 }}</span>{{ end }}
|
||||
</div>
|
||||
<p class="card__desc">{{ $p.Params.description }}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{- end }}
|
||||
</section>
|
||||
|
||||
{{/* Tell JS which slug to open in the lightbox */}}
|
||||
<script>window.__ROUX_OPEN_SLUG = "{{ .Params.slug }}";</script>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{- partial "head.html" . }}
|
||||
</head>
|
||||
<body>
|
||||
{{- partial "header.html" . }}
|
||||
|
||||
<main id="content">
|
||||
{{- block "main" . }}{{- end }}
|
||||
</main>
|
||||
|
||||
{{- partial "footer.html" . }}
|
||||
|
||||
{{- partial "lightbox.html" . }}
|
||||
|
||||
<div class="ribbon" id="ribbon">
|
||||
<span>Roux № {{ .Site.Params.issueNumber }} — out now. <a href="/categories/gothic/">See the plates →</a></span>
|
||||
<button id="ribbonClose" aria-label="Dismiss">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{/* Inline posts data for JS search + lightbox */}}
|
||||
<script id="roux-data" type="application/json">
|
||||
{{- $posts := slice }}
|
||||
{{- range (where .Site.RegularPages "Section" "posts") }}
|
||||
{{- $img := .Resources.GetMatch "*.png" }}
|
||||
{{- $thumb := "" }}
|
||||
{{- $card := "" }}
|
||||
{{- if $img }}
|
||||
{{- $t := $img.Resize "300x450 webp" }}
|
||||
{{- $c := $img.Resize "900x1350 webp" }}
|
||||
{{- $thumb = $t.RelPermalink }}
|
||||
{{- $card = $c.RelPermalink }}
|
||||
{{- end }}
|
||||
{{- $post := dict
|
||||
"id" .Params.plate
|
||||
"slug" .Params.slug
|
||||
"title" .Title
|
||||
"description" .Params.description
|
||||
"categories" .Params.categories
|
||||
"tags" .Params.tags
|
||||
"thumb" $thumb
|
||||
"card" $card
|
||||
"url" .RelPermalink
|
||||
}}
|
||||
{{- $posts = $posts | append $post }}
|
||||
{{- end }}
|
||||
{{- $posts | jsonify | safeJS }}
|
||||
</script>
|
||||
|
||||
<script src="/js/app.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
{{- $posts := slice }}
|
||||
{{- range (where .Site.RegularPages "Section" "posts") }}
|
||||
{{- $img := .Resources.GetMatch "*.png" }}
|
||||
{{- $thumb := "" }}
|
||||
{{- $card := "" }}
|
||||
{{- if $img }}
|
||||
{{- $t := $img.Resize "300x450 webp" }}
|
||||
{{- $c := $img.Resize "900x1350 webp" }}
|
||||
{{- $thumb = $t.RelPermalink }}
|
||||
{{- $card = $c.RelPermalink }}
|
||||
{{- end }}
|
||||
{{- $post := dict
|
||||
"id" .Params.plate
|
||||
"slug" .Params.slug
|
||||
"title" .Title
|
||||
"description" .Params.description
|
||||
"categories" .Params.categories
|
||||
"tags" .Params.tags
|
||||
"thumb" $thumb
|
||||
"card" $card
|
||||
"url" .RelPermalink
|
||||
}}
|
||||
{{- $posts = $posts | append $post }}
|
||||
{{- end }}
|
||||
{{- $posts | jsonify }}
|
||||
@@ -0,0 +1,55 @@
|
||||
{{ define "main" }}
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero__eyebrow">
|
||||
№ {{ .Site.Params.issueNumber }} · {{ .Site.Params.issueSeason }} ·
|
||||
<a href="/issues/" style="border-bottom:1px solid currentColor;margin-left:6px">View all issues</a>
|
||||
</div>
|
||||
<h1 class="hero__title">An almanac<br/>of <em>fabric, light</em>,<br/>and gesture.</h1>
|
||||
<p class="hero__lede">
|
||||
Roux is a slow-publishing fashion journal — one hundred photographs at a time,
|
||||
gathered from <em>ateliers, streets, glasshouses and quiet hotel corridors</em>.
|
||||
You are reading <em>{{ .Site.Params.issueName }}</em>, our № {{ .Site.Params.issueNumber }} issue.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="grid" id="grid" data-density="default">
|
||||
{{- $posts := where .Site.RegularPages "Section" "posts" }}
|
||||
{{- range $i, $p := $posts }}
|
||||
{{- $img := $p.Resources.GetMatch "*.png" }}
|
||||
{{- $card := "" }}
|
||||
{{- $full := "" }}
|
||||
{{- if $img }}
|
||||
{{- $c := $img.Resize "600x900 webp" }}
|
||||
{{- $card = $c.RelPermalink }}
|
||||
{{- end }}
|
||||
<a class="card"
|
||||
href="{{ $p.RelPermalink }}"
|
||||
style="--d:{{ mul (math.Min $i 18) 24 }}ms"
|
||||
data-id="{{ $p.Params.plate }}"
|
||||
data-slug="{{ $p.Params.slug }}">
|
||||
<div class="card__frame">
|
||||
<picture>
|
||||
{{- if $img }}
|
||||
{{- $w := $img.Resize "600x900 webp" }}
|
||||
<source srcset="{{ $w.RelPermalink }}" type="image/webp" />
|
||||
<img class="card__img"
|
||||
loading="{{ if lt $i 8 }}eager{{ else }}lazy{{ end }}"
|
||||
src="{{ $w.RelPermalink }}"
|
||||
alt="{{ $p.Title }} — Roux Plate №{{ $p.Params.plate }}" />
|
||||
{{- end }}
|
||||
</picture>
|
||||
<span class="card__num">PLATE №{{ $p.Params.plate }}</span>
|
||||
<span class="card__cat">{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
|
||||
</div>
|
||||
<div class="card__meta">
|
||||
<h2 class="card__title">{{ $p.Title }}</h2>
|
||||
<div class="card__sub">
|
||||
<span>{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
|
||||
{{- if $p.Params.tags }}<span class="dot"></span><span>{{ index $p.Params.tags 0 }}</span>{{ end }}
|
||||
</div>
|
||||
<p class="card__desc">{{ $p.Params.description }}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{- end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,63 @@
|
||||
{{ define "main" }}
|
||||
{{- $issues := .Site.Data.issues }}
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero__eyebrow">Archive · Every issue</div>
|
||||
<h1 class="hero__title">The <em>issues</em></h1>
|
||||
<p class="hero__lede">Roux publishes one hundred photographs at a time, once a season. Each issue is a complete thing.</p>
|
||||
</section>
|
||||
|
||||
<div class="issues-grid">
|
||||
{{- range $i, $iss := $issues }}
|
||||
{{- $delay := mul $i 80 }}
|
||||
{{- $isCurrent := eq $iss.status "current" }}
|
||||
{{- $isForth := eq $iss.status "forthcoming" }}
|
||||
|
||||
{{- if $isCurrent }}
|
||||
<a href="/posts/" class="issue-card{{ if $isForth }} issue-card--forthcoming{{ end }}" style="--d:{{ $delay }}ms">
|
||||
{{- else if $isForth }}
|
||||
<div class="issue-card issue-card--forthcoming" style="--d:{{ $delay }}ms">
|
||||
{{- else }}
|
||||
<a href="/posts/" class="issue-card" style="--d:{{ $delay }}ms">
|
||||
{{- end }}
|
||||
|
||||
<div class="issue-card__cover">
|
||||
{{- if $isForth }}
|
||||
<div class="issue-card__forth">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
Forthcoming
|
||||
</div>
|
||||
{{- else }}
|
||||
{{/* Use first post image as cover */}}
|
||||
{{- $posts := where $.Site.RegularPages "Section" "posts" }}
|
||||
{{- $first := index $posts 0 }}
|
||||
{{- if $first }}
|
||||
{{- $img := $first.Resources.GetMatch "*.png" }}
|
||||
{{- if $img }}
|
||||
{{- $cover := $img.Resize "480x720 webp" }}
|
||||
<picture>
|
||||
<source srcset="{{ $cover.RelPermalink }}" type="image/webp" />
|
||||
<img src="{{ $cover.RelPermalink }}" alt="Issue {{ $iss.number }} cover" loading="lazy" />
|
||||
</picture>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
<div class="issue-card__meta">
|
||||
<div class="issue-card__num">{{ $iss.number }}</div>
|
||||
<h2 class="issue-card__title">{{ $iss.title | replaceRE `^(.+)$` "$1" }}</h2>
|
||||
<p class="issue-card__blurb">{{ $iss.blurb }}</p>
|
||||
<div class="issue-card__foot">
|
||||
<span>{{ $iss.season }}</span>
|
||||
{{- if $isCurrent }}
|
||||
<span class="issue-card__cta">Read the issue →</span>
|
||||
{{- else if $isForth }}
|
||||
<span class="issue-card__cta issue-card__cta--muted">Subscribe →</span>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{- if or $isCurrent (not $isForth) }}</a>{{- else }}</div>{{- end }}
|
||||
{{- end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,28 @@
|
||||
<footer class="foot">
|
||||
<div>
|
||||
<h4>Roux</h4>
|
||||
<h2 class="foot__roux">R<em>o</em>ux<sup style="font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-soft);vertical-align:top;margin-left:8px;">№{{ .Site.Params.issueNumber }}</sup></h2>
|
||||
<p>A slow-publishing fashion journal, gathered in Paris. One hundred photographs at a time, printed and unprinted.<br/>roux.pivoine.art</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Categories</h4>
|
||||
<p><a href="/categories/gothic/">Gothic</a></p>
|
||||
<p><a href="/categories/cyberpunk/">Cyberpunk</a></p>
|
||||
<p><a href="/categories/dark-fantasy/">Dark Fantasy</a></p>
|
||||
<p><a href="/categories/sci-fi/">Sci-Fi</a></p>
|
||||
<p><a href="/categories/cultural/">Cultural</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Index</h4>
|
||||
<p><a href="/tags/cape/">Cape</a></p>
|
||||
<p><a href="/tags/neon/">Neon</a></p>
|
||||
<p><a href="/tags/rain/">Rain</a></p>
|
||||
<p><a href="/tags/gothic/">Gothic</a></p>
|
||||
<p><a href="/tags/warrior/">Warrior</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Colophon</h4>
|
||||
<p>Set in Italiana & Cormorant Garamond, with Outfit for typographic furniture. © Roux MMXXVI.</p>
|
||||
<p style="margin-top:14px;color:var(--ink)">Press <span style="border:1px solid var(--rule);padding:3px 6px;border-radius:3px;font-family:var(--mono);font-size:10px">⌘K</span> from anywhere to search.</p>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,30 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>{{ if .IsHome }}{{ .Site.Title }} — {{ .Site.Params.description | truncate 60 }}{{ else }}{{ .Title }} — {{ .Site.Title }}{{ end }}</title>
|
||||
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}" />
|
||||
<link rel="canonical" href="{{ .Permalink }}" />
|
||||
|
||||
{{- template "_internal/opengraph.html" . }}
|
||||
{{- template "_internal/twitter_cards.html" . }}
|
||||
{{- template "_internal/schema.html" . }}
|
||||
{{/* Add og:image from page resource */}}
|
||||
{{- $img := .Resources.GetMatch "*.png" }}
|
||||
{{- if $img }}
|
||||
{{- $og := $img.Resize "1200x630 webp q80" }}
|
||||
<meta property="og:image" content="{{ $og.Permalink }}" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:image" content="{{ $og.Permalink }}" />
|
||||
{{- end }}
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/assets/roux-mark.svg" />
|
||||
<link rel="apple-touch-icon" href="/assets/roux-mark.svg" />
|
||||
<link rel="mask-icon" href="/assets/roux-mark.svg" color="#8a3322" />
|
||||
<meta name="theme-color" content="#f1ebe0" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Italiana&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/css/main.css" />
|
||||
{{ with .OutputFormats.Get "RSS" }}<link rel="alternate" type="{{ .MediaType.Type }}" title="{{ $.Site.Title }}" href="{{ .Permalink }}" />{{ end }}
|
||||
@@ -0,0 +1,38 @@
|
||||
{{- $cats := slice "Gothic" "Cyberpunk" "Dark Fantasy" "Urban" "Noir" "Fantasy" "Cultural" "Sci-Fi" "Boudoir" "Steampunk" "Luxury" "Action" "Lifestyle" "Nature" "Romantic" "Nightlife" "Elegant" "Adventure" "Mythology" }}
|
||||
<header class="masthead" id="masthead">
|
||||
<div class="masthead__inner">
|
||||
<div class="masthead__left">
|
||||
<span class="masthead__date" id="mhDate">—</span>
|
||||
<span class="mh-issue">№ {{ .Site.Params.issueNumber }}</span>
|
||||
<span class="mh-sep" style="opacity:.5">·</span>
|
||||
<span class="mh-pub">Roux Quarterly</span>
|
||||
</div>
|
||||
|
||||
<a class="masthead__logo" href="/" aria-label="Roux — home">
|
||||
{{- partial "logo.html" . }}
|
||||
</a>
|
||||
|
||||
<div class="masthead__right">
|
||||
<a href="/issues/" class="mh-link">Issues</a>
|
||||
<span class="mh-sep" style="opacity:.5">·</span>
|
||||
<span class="mh-city">Paris</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subhead" style="position:relative">
|
||||
<label class="subhead__search" for="searchInput">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||||
<input id="searchInput" type="search" autocomplete="off" placeholder="Search the archive — silk, nocturne, atelier…" />
|
||||
<span class="subhead__kbd">⌘ K</span>
|
||||
</label>
|
||||
<div class="subhead__count" id="count"></div>
|
||||
<div class="searchpop" id="searchpop"></div>
|
||||
</div>
|
||||
|
||||
<div class="tabs" id="tabs">
|
||||
<button data-cat="All" aria-pressed="true">All</button>
|
||||
{{- range $cats }}
|
||||
<button data-cat="{{ . }}" aria-pressed="false">{{ . }}</button>
|
||||
{{- end }}
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,31 @@
|
||||
<div class="lb" id="lb" data-open="false" role="dialog" aria-modal="true" aria-label="Roux plate viewer">
|
||||
<div class="lb__topbar">
|
||||
<div class="lb__brand">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true" style="height:24px;width:24px;flex:0 0 auto">
|
||||
<defs><radialGradient id="lbBloom" cx="50%" cy="46%" r="58%"><stop offset="0" stop-color="#b34a30"/><stop offset=".6" stop-color="#8a3322"/><stop offset="1" stop-color="#5a1d15"/></radialGradient></defs>
|
||||
<g fill="#6e2519" transform="translate(32 32)"><ellipse cx="0" cy="-16" rx="10.5" ry="14"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(60)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(120)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(180)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(240)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(300)"/></g>
|
||||
<g fill="url(#lbBloom)" transform="translate(32 32) rotate(30)"><ellipse cx="0" cy="-11" rx="8" ry="11"/><ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(60)"/><ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(120)"/><ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(180)"/><ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(240)"/><ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(300)"/></g>
|
||||
<g fill="#9a3a26" transform="translate(32 32)"><ellipse cx="0" cy="-6" rx="5" ry="7.5"/><ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(72)"/><ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(144)"/><ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(216)"/><ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(288)"/></g>
|
||||
<circle cx="32" cy="32" r="3.2" fill="#3a120c"/>
|
||||
<circle cx="32" cy="31.4" r="1.2" fill="#c0573c" opacity=".7"/>
|
||||
</svg>
|
||||
<span style="font:400 22px/1 'Italiana',serif;letter-spacing:.04em;color:#f5f0e6">Roux</span>
|
||||
<span style="opacity:.55">№ {{ .Site.Params.issueNumber }} · The Plates</span>
|
||||
</div>
|
||||
<div class="lb__index" id="lbIndex">000 / 100</div>
|
||||
<button class="lb__close" data-act="close" aria-label="Close">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="lb__stage">
|
||||
<button class="lb__nav lb__nav--prev" data-act="prev" aria-label="Previous">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
|
||||
</button>
|
||||
<div class="lb__track" id="lbTrack"></div>
|
||||
<button class="lb__nav lb__nav--next" data-act="next" aria-label="Next">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<aside class="lb__meta" id="lbMeta"></aside>
|
||||
<div class="lb__thumbs" id="lbThumbs"></div>
|
||||
</div>
|
||||
@@ -0,0 +1,38 @@
|
||||
<span class="logo">
|
||||
<svg class="logo__mark" viewBox="0 0 64 64" aria-hidden="true">
|
||||
<defs>
|
||||
<radialGradient id="mhBloom" cx="50%" cy="46%" r="58%">
|
||||
<stop offset="0" stop-color="#b34a30"/>
|
||||
<stop offset=".6" stop-color="#8a3322"/>
|
||||
<stop offset="1" stop-color="#5a1d15"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<g fill="#6e2519" transform="translate(32 32)">
|
||||
<ellipse cx="0" cy="-16" rx="10.5" ry="14"/>
|
||||
<ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(60)"/>
|
||||
<ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(120)"/>
|
||||
<ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(180)"/>
|
||||
<ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(240)"/>
|
||||
<ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(300)"/>
|
||||
</g>
|
||||
<g fill="url(#mhBloom)" transform="translate(32 32) rotate(30)">
|
||||
<ellipse cx="0" cy="-11" rx="8" ry="11"/>
|
||||
<ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(60)"/>
|
||||
<ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(120)"/>
|
||||
<ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(180)"/>
|
||||
<ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(240)"/>
|
||||
<ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(300)"/>
|
||||
</g>
|
||||
<g fill="#9a3a26" transform="translate(32 32)">
|
||||
<ellipse cx="0" cy="-6" rx="5" ry="7.5"/>
|
||||
<ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(72)"/>
|
||||
<ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(144)"/>
|
||||
<ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(216)"/>
|
||||
<ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(288)"/>
|
||||
</g>
|
||||
<circle cx="32" cy="32" r="3.2" fill="#3a120c"/>
|
||||
<circle cx="32" cy="31.4" r="1.2" fill="#c0573c" opacity=".7"/>
|
||||
</svg>
|
||||
<span class="logo__word">Roux</span>
|
||||
<span class="logo__tag">Le Journal · Paris</span>
|
||||
</span>
|
||||
Reference in New Issue
Block a user