Skip to content

Commit 119b59f

Browse files
neural-loopneural-loop
authored
Merge pull request open-neuromorphic#240 from neural-loop/design-adjustments
Design adjustments
2 parents 686c8c0 + 8929459 commit 119b59f

File tree

9 files changed

+1023
-173
lines changed

9 files changed

+1023
-173
lines changed

‎.github/workflows/main.yml

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,6 @@ jobs:
3333
&& sudo tar -C /usr/local -xzf ${{ runner.temp }}/go.tar.gz \
3434
&& sudo ln -s /usr/local/go/bin/go /usr/local/bin/go
3535
36-
- name: Install wkhtmltopdf
37-
run: |
38-
sudo apt update
39-
sudo apt install wkhtmltopdf imagemagick -y
4036
4137
- name: Checkout
4238
uses: actions/checkout@v4.2.2

‎assets/og-template/template.html

Lines changed: 45 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,106 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
4+
<meta charset="utf-8" />
55
<title>OG Image</title>
6+
<link
7+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
8+
rel="stylesheet"
9+
/>
610
<style>
7-
/* Use a wrapper to act as our canvas and positioning context */
11+
body {
12+
margin: 0;
13+
padding: 0;
14+
font-family: "Inter", Arial, sans-serif;
15+
}
816
.canvas {
917
position: relative;
1018
width: 1200px;
1119
height: 630px;
12-
margin: 0;
13-
padding: 0;
1420
background-color: #f9fafb;
15-
font-family: 'Inter', Arial, sans-serif;
16-
overflow: hidden; /* Important to clip anything that goes outside */
21+
overflow: hidden;
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
1725
}
18-
19-
/* The watermark is now a simple, absolutely positioned image */
20-
.watermark {
26+
.background {
2127
position: absolute;
22-
z-index: 1; /* Behind the content */
28+
z-index: 1;
2329
opacity: 0.25;
24-
/* Position at bottom-left, partially off-screen */
2530
bottom: -35px;
26-
left: 300px;
27-
/* Set an explicit size */
31+
left: 380px;
2832
width: 900px;
2933
height: auto;
3034
transform: rotate(-15deg);
3135
}
32-
33-
/* The main content card, also absolutely positioned */
34-
.container {
35-
z-index: 2; /* On top of the watermark */
36-
position: absolute;
37-
top: 30px;
38-
left: 30px;
39-
width: 950px;
40-
height: 550px;
41-
}
42-
43-
.main-content {
44-
width: 100%;
45-
height: 100%;
36+
.content-wrapper {
37+
position: relative;
38+
z-index: 2;
39+
width: 1100px;
40+
height: 570px;
4641
display: flex;
4742
flex-direction: column;
48-
justify-content: center;
43+
justify-content: space-between;
4944
}
50-
5145
.header {
52-
position: relative;
53-
width: 100%;
54-
height: 80px;
55-
margin-bottom: 30px;
46+
display: flex;
47+
align-items: center;
5648
}
57-
5849
.logo {
59-
position: absolute;
60-
top: 0;
61-
left: 0;
62-
height: 80px;
50+
height: 90px;
6351
width: auto;
52+
margin-right: 30px;
6453
}
65-
img.logo[src=""] {
66-
display: none;
67-
}
68-
6954
.logo-text {
70-
position: absolute;
71-
top: 0;
72-
left: 110px;
73-
height: 80px;
74-
line-height: 80px;
75-
font-size: 54px;
55+
font-size: 56px;
7656
font-weight: 700;
7757
color: #1f2937;
78-
white-space: nowrap;
7958
}
80-
59+
.main-text {
60+
}
8161
.title {
82-
font-size: 50px;
62+
font-size: 64px;
8363
font-weight: 700;
84-
line-height: 1.15;
64+
line-height: 1.2;
8565
color: #1f2937;
8666
margin: 0 0 20px 0;
8767
display: -webkit-box;
8868
-webkit-line-clamp: 3;
8969
-webkit-box-orient: vertical;
9070
overflow: hidden;
91-
text-overflow: ellipsis;
92-
text-align: left;
9371
}
9472
.description {
95-
font-size: 32px;
96-
font-weight: 400;
97-
line-height: 1.45;
73+
font-size: 36px;
74+
line-height: 1.4;
9875
color: #4b5563;
99-
margin: 0 0 20px 0;
76+
margin: 0;
10077
display: -webkit-box;
10178
-webkit-line-clamp: 3;
10279
-webkit-box-orient: vertical;
10380
overflow: hidden;
104-
text-overflow: ellipsis;
105-
text-align: left;
81+
text-shadow: 0 0 10px white, 0 0 15px white, 0 0 20px white;
10682
}
107-
108-
.site-name {
83+
.footer {
10984
font-size: 35px;
11085
font-weight: 500;
11186
color: #667eea;
11287
text-align: left;
113-
position: absolute;
114-
left: 0px;
115-
bottom: 10px;
11688
}
11789
</style>
118-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
11990
</head>
12091
<body>
12192
<div class="canvas">
122-
<!-- Layer 1: The Watermark Image -->
123-
<img src="BACKGROUND_URL" class="watermark" alt=""/>
124-
125-
<!-- Layer 2: The Content Container -->
126-
<div class="container">
127-
<div class="main-content">
128-
<div class="header">
129-
<img src="LOGO_SRC" alt="Site Logo" class="logo">
130-
<div class="logo-text">Open Neuromorphic</div>
131-
</div>
93+
<img src="BACKGROUND_URL" class="background" alt="" />
94+
<div class="content-wrapper">
95+
<div class="header">
96+
<img src="LOGO_SRC" alt="Logo" class="logo" />
97+
<div class="logo-text">Open Neuromorphic</div>
98+
</div>
99+
<div class="main-text">
132100
<h1 class="title">PAGE_TITLE</h1>
133101
<p class="description">PAGE_DESCRIPTION</p>
134-
<div class="site-name">open-neuromorphic.org</div>
135102
</div>
103+
<div class="footer">open-neuromorphic.org</div>
136104
</div>
137105
</div>
138106
</body>

‎assets/scss/components/_og-preview.scss

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,14 @@
2121
}
2222

2323
.dark .og-preview-container {
24-
box-shadow: 0 4px 12px rgba(0,0,0, 0.4), 0 0 0 1px theme('colors.darkmode.border'), 0 0 20px rgba(188, 251, 255, 0.4);
25-
&:hover {
26-
box-shadow: 0 6px 25px rgba(0,0,0, 0.3), 0 0 0 1px theme('colors.darkmode.primary'), 0 0 30px rgba(188, 251, 255, 0.6);
27-
}
24+
box-shadow: 0 4px 12px rgba(0,0,0, 0.4), 0 0 0 1px theme('colors.darkmode.border'), 0 0 20px rgba(188, 251, 255, 0.4);
25+
&:hover {
26+
box-shadow: 0 6px 25px rgba(0,0,0, 0.3), 0 0 0 1px theme('colors.darkmode.primary'), 0 0 30px rgba(188, 251, 255, 0.6);
27+
}
2828
}
2929

30-
.og-preview-image {
31-
@apply w-full h-full bg-cover bg-center bg-no-repeat relative;
32-
background-color: theme('colors.body');
30+
.og-preview-image-tag {
31+
@apply absolute inset-0 w-full h-full object-cover z-0;
3332
}
3433

3534
.image-dark-overlay {
@@ -88,15 +87,12 @@
8887

8988
@media (max-width: 1023.98px) {
9089
.og-preview-container:hover {
91-
transform: none;
90+
transform: none;
9291
}
93-
.og-preview-image {
94-
background-size: contain;
95-
}
9692
.social-share-overlay {
97-
opacity: 1;
93+
opacity: 1;
9894
}
9995
.sharing-runner {
100-
@apply opacity-0;
96+
@apply opacity-0;
10197
}
102-
}
98+
}

‎layouts/partials/components/og-preview.html

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,60 @@
22

33
{{/* 1. Try to find the auto-generated OG image: [slug]-og.jpg */}}
44
{{ if .File }}
5-
{{ $pageSlug := path.Base .File.Dir }}
6-
{{ $generatedOgImageName := printf "%s-og.jpg" $pageSlug }}
7-
{{ $ogImageResource = .Resources.GetMatch $generatedOgImageName }}
5+
{{ $pageSlug := path.Base .File.Dir }}
6+
{{ $generatedOgImageName := printf "%s-og.jpg" $pageSlug }}
7+
{{ $ogImageResource = .Resources.GetMatch $generatedOgImageName }}
88
{{ end }}
99

1010
{{/* 2. If not found, fall back to the `image` param in front matter */}}
1111
{{ if not $ogImageResource }}
12-
{{ with .Params.image }}
13-
{{ $fmImage := . }}
14-
{{ $ogImageResource = $.Page.Resources.GetMatch $fmImage }}
15-
{{ if not $ogImageResource }}
16-
{{ $ogImageResource = resources.Get $fmImage }}
17-
{{ end }}
18-
{{ end }}
12+
{{ with .Params.image }}
13+
{{ $fmImage := . }}
14+
{{ $ogImageResource = $.Page.Resources.GetMatch $fmImage }}
15+
{{ if not $ogImageResource }}
16+
{{ $ogImageResource = resources.Get $fmImage }}
17+
{{ end }}
18+
{{ end }}
1919
{{ end }}
2020

2121
{{/* 3. If still not found, use a site-wide default */}}
2222
{{ if not $ogImageResource }}
23-
{{ with site.Params.metadata.image }}
24-
{{ $ogImageResource = resources.Get . }}
25-
{{ end }}
23+
{{ with site.Params.metadata.image }}
24+
{{ $ogImageResource = resources.Get . }}
25+
{{ end }}
2626
{{ end }}
2727

2828

2929
{{ if $ogImageResource }}
30-
{{ $resizedOg := $ogImageResource.Fill "600x315 Lanczos q85" }}
31-
{{ $ogImageDisplay := $resizedOg.RelPermalink }}
30+
{{ $resizedOg := $ogImageResource.Resize "600x Lanczos q85" }}
31+
{{ $ogImageDisplay := $resizedOg.RelPermalink }}
3232

33-
<div class="og-preview-wrapper">
34-
<div class="og-preview-container">
35-
<div class="og-preview-image" style="background-image: url('{{ $ogImageDisplay }}')">
36-
<div class="image-dark-overlay"></div>
37-
<div class="social-share-overlay">
38-
<div class="social-icons-container">
39-
<a href="https://twitter.com/intent/tweet/?text={{ .Title | urlquery }}&url={{ .Permalink | absURL }}" target="_blank" rel="noopener" class="social-icon" title="Share on X/Twitter">
40-
{{ partial "icon.html" (dict "style" "brands" "name" "x-twitter") }}
41-
</a>
42-
<a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink | absURL }}" target="_blank" rel="noopener" class="social-icon" title="Share on Facebook">
43-
{{ partial "icon.html" (dict "style" "brands" "name" "facebook") }}
44-
</a>
45-
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink | absURL }}&title={{ .Title | urlquery }}" target="_blank" rel="noopener" class="social-icon" title="Share on LinkedIn">
46-
{{ partial "icon.html" (dict "style" "brands" "name" "linkedin") }}
47-
</a>
48-
</div>
49-
</div>
50-
</div>
51-
<div class="sharing-runner">
52-
<span>Share this post</span>
53-
<div class="runner-icons">
33+
<div class="og-preview-wrapper">
34+
<div class="og-preview-container">
35+
<img src="{{ $ogImageDisplay }}" alt="Social share preview for {{ .Title }}" class="og-preview-image-tag" />
36+
37+
<div class="image-dark-overlay"></div>
38+
<div class="social-share-overlay">
39+
<div class="social-icons-container">
40+
<a href="https://twitter.com/intent/tweet/?text={{ .Title | urlquery }}&url={{ .Permalink | absURL }}" target="_blank" rel="noopener" class="social-icon" title="Share on X/Twitter">
5441
{{ partial "icon.html" (dict "style" "brands" "name" "x-twitter") }}
42+
</a>
43+
<a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink | absURL }}" target="_blank" rel="noopener" class="social-icon" title="Share on Facebook">
5544
{{ partial "icon.html" (dict "style" "brands" "name" "facebook") }}
45+
</a>
46+
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink | absURL }}&title={{ .Title | urlquery }}" target="_blank" rel="noopener" class="social-icon" title="Share on LinkedIn">
5647
{{ partial "icon.html" (dict "style" "brands" "name" "linkedin") }}
57-
</div>
48+
</a>
49+
</div>
50+
</div>
51+
<div class="sharing-runner">
52+
<span>Share this post</span>
53+
<div class="runner-icons">
54+
{{ partial "icon.html" (dict "style" "brands" "name" "x-twitter") }}
55+
{{ partial "icon.html" (dict "style" "brands" "name" "facebook") }}
56+
{{ partial "icon.html" (dict "style" "brands" "name" "linkedin") }}
5857
</div>
5958
</div>
6059
</div>
61-
{{ end }}
60+
</div>
61+
{{ end }}

‎layouts/partials/essentials/footer.html

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1-
<footer class="footer bg-gray-800 dark:bg-black text-gray-300 pt-16 pb-8">
2-
<div class="container">
1+
<footer class="footer bg-gray-800 dark:bg-black text-gray-300 pt-16 pb-8 relative overflow-hidden">
2+
{{ with resources.Get "images/ONM.png" }}
3+
{{ $watermark_webp := .Process "webp" }}
4+
<div
5+
class="absolute bottom-0 right-0 w-[1500px] h-[1500px] bg-no-repeat bg-contain bg-right-bottom opacity-[0.06] dark:opacity-[0.2] z-0 pointer-events-none"
6+
style="background-image: url('{{ $watermark_webp.RelPermalink }}'); transform: translate(5%, 5%) rotate(-10deg);">
7+
</div>
8+
{{ end }}
9+
<div class="container relative z-10">
310
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-10">
411

512
<!-- Column 1: Brand & Social -->
@@ -95,4 +102,4 @@ <h4 class="footer-heading">About & Legal</h4>
95102
{{ end }}
96103
</div>
97104
</div>
98-
</footer>
105+
</footer>

0 commit comments

Comments
 (0)