Skip to content

Commit cf865b4

Browse files
MazizovaMazizova
authored
Merge pull request #36 from Mazizova/reviews-mockup-styling
Match the Reviews & Discussion section to the catalog-card mockup
2 parents 0d595c2 + c90739c commit cf865b4

6 files changed

Lines changed: 251 additions & 10 deletions

File tree

‎assets/scss/_light-theme.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,7 @@
258258
.resource-detail-panel-link { color: #0272a5; }
259259

260260
.resource-detail-reviews { border-top-color: #dde3ed; }
261+
.resource-detail-reviews-title { color: #0f172a; }
261262
.resource-detail-reviews-sub { color: #64748b; }
262263

263264
.status-chip {

‎assets/scss/_resources.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1814,10 +1814,19 @@ body.sheet-open {
18141814
border-top: 1px solid $dark-border;
18151815
}
18161816

1817+
.resource-detail-reviews-title {
1818+
font-size: 1.25rem;
1819+
font-weight: 700;
1820+
color: $off-white;
1821+
margin: 0;
1822+
}
1823+
18171824
.resource-detail-reviews-sub {
1825+
max-width: 640px;
18181826
font-size: 0.9375rem;
18191827
color: $muted;
1820-
margin: 0.5rem 0 1.5rem;
1828+
line-height: 1.6;
1829+
margin: 0.625rem 0 1.5rem;
18211830
}
18221831

18231832
.resource-detail-reviews-widget {

‎layouts/_default/baseof.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,15 @@
2929
try { localStorage.setItem('theme', next); } catch (e) {}
3030

3131
// Keep an embedded Giscus reviews widget (if this page has one)
32-
// in sync with the site's own theme toggle.
32+
// in sync with the site's own theme toggle — same custom theme
33+
// URLs the widget is mounted with (see resources/reviews.html).
3334
var giscusFrame = document.querySelector('iframe.giscus-frame');
3435
if (giscusFrame) {
36+
var giscusTheme = next === 'light'
37+
? {{ "giscus/theme-light.css" | absURL }}
38+
: {{ "giscus/theme-dark.css" | absURL }};
3539
giscusFrame.contentWindow.postMessage(
36-
{ giscus: { setConfig: { theme: next } } },
40+
{ giscus: { setConfig: { theme: giscusTheme } } },
3741
'https://giscus.app'
3842
);
3943
}

‎layouts/partials/resources/reviews.html‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
{{/*
2-
Reviews & Discussion — Giscus widget, one thread per resource page.
2+
Community feedback — Giscus widget, one thread per resource page.
33

44
Deliberately not a custom comments system: this is a static site with no
55
backend of its own, and Giscus gives real auth (GitHub sign-in) and
6-
storage (GitHub Discussions) for free, matching what the original
7-
detail-card mockup called for. See hugo.yaml (params.giscus) for the
8-
repo/category wiring and the one-time GitHub App install this depends on.
6+
storage (GitHub Discussions) for free. The heading/intro copy below
7+
matches the OurSQL Universe catalog-card mockup verbatim; the widget
8+
itself is giscus's own comment UI reskinned to the site's palette via
9+
static/giscus/theme-{dark,light}.css — giscus doesn't expose per-review
10+
structured fields (tags, "Your context", Helpful/Report voting) or
11+
Google/X sign-in, so those parts of the mockup aren't reproducible on
12+
top of it. See hugo.yaml (params.giscus) for the repo/category wiring
13+
and the one-time GitHub App install this depends on.
914

1015
data-mapping="pathname" keys each resource's discussion to its own URL,
1116
so every resource gets its own thread automatically — no per-resource
@@ -15,16 +20,20 @@
1520
*/}}
1621
{{ $g := .Site.Params.giscus }}
1722
{{ if $g }}
23+
{{ $themeDark := "giscus/theme-dark.css" | absURL }}
24+
{{ $themeLight := "giscus/theme-light.css" | absURL }}
1825
<div class="resource-detail-reviews">
19-
<span class="resources-category-eyebrow">Reviews &amp; Discussion</span>
20-
<p class="resource-detail-reviews-sub">Used this? Sign in with GitHub to leave a comment or reaction.</p>
26+
<h2 class="resource-detail-reviews-title">Community feedback</h2>
27+
<p class="resource-detail-reviews-sub">This space is for grounded, evaluable experience — versions used, environments, what you measured or observed, and how it behaves alongside other software. General impressions without supporting detail may be removed. Sign in to write one; posts are tied to a verified identity, not anonymous.</p>
2128
<div class="resource-detail-reviews-widget" id="giscus-mount"></div>
2229
<script>
2330
(function () {
2431
// Built at runtime (not a static data-theme attribute) so the widget
2532
// opens in whichever theme the visitor already has, dark or light —
2633
// baseof.html's theme-toggle handler keeps it in sync afterwards.
27-
var theme = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
34+
var themeDark = {{ $themeDark }};
35+
var themeLight = {{ $themeLight }};
36+
var theme = document.documentElement.getAttribute('data-theme') === 'light' ? themeLight : themeDark;
2837
var s = document.createElement('script');
2938
s.src = 'https://giscus.app/client.js';
3039
s.setAttribute('data-repo', {{ $g.repo }});

‎static/giscus/theme-dark.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/*! MIT License
2+
* Copyright (c) 2018 GitHub Inc.
3+
* https://github.com/primer/primitives/blob/main/LICENSE
4+
*
5+
* OurSQL Foundation custom giscus theme (dark) — a recolor of giscus's own
6+
* dark.css to match the site's palette (assets/scss/_variables.scss).
7+
* Only surface/text/accent/button variables below are changed; everything
8+
* else (syntax highlighting, success/attention/danger, background images)
9+
* is kept as GitHub's original values.
10+
*/
11+
12+
main {
13+
--color-prettylights-syntax-comment: #8b949e;
14+
--color-prettylights-syntax-constant: #79c0ff;
15+
--color-prettylights-syntax-entity: #d2a8ff;
16+
--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
17+
--color-prettylights-syntax-entity-tag: #7ee787;
18+
--color-prettylights-syntax-keyword: #ff7b72;
19+
--color-prettylights-syntax-string: #a5d6ff;
20+
--color-prettylights-syntax-variable: #ffa657;
21+
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
22+
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
23+
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
24+
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
25+
--color-prettylights-syntax-carriage-return-bg: #b62324;
26+
--color-prettylights-syntax-string-regexp: #7ee787;
27+
--color-prettylights-syntax-markup-list: #f2cc60;
28+
--color-prettylights-syntax-markup-heading: #1f6feb;
29+
--color-prettylights-syntax-markup-italic: #c9d1d9;
30+
--color-prettylights-syntax-markup-bold: #c9d1d9;
31+
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
32+
--color-prettylights-syntax-markup-deleted-bg: #67060c;
33+
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
34+
--color-prettylights-syntax-markup-inserted-bg: #033a16;
35+
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
36+
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
37+
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
38+
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
39+
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
40+
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
41+
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
42+
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
43+
44+
/* Buttons — recolored to the site's electric-cyan accent */
45+
--color-btn-text: #e8e8f0;
46+
--color-btn-bg: #1a1d30;
47+
--color-btn-border: #252840;
48+
--color-btn-shadow: 0 0 transparent;
49+
--color-btn-inset-shadow: 0 0 transparent;
50+
--color-btn-hover-bg: #141629;
51+
--color-btn-hover-border: #00c8ff;
52+
--color-btn-active-bg: #141629;
53+
--color-btn-active-border: #252840;
54+
--color-btn-selected-bg: #141629;
55+
--color-btn-primary-text: #000000;
56+
--color-btn-primary-bg: #00c8ff;
57+
--color-btn-primary-border: #00c8ff;
58+
--color-btn-primary-shadow: 0 0 transparent;
59+
--color-btn-primary-inset-shadow: 0 0 transparent;
60+
--color-btn-primary-hover-bg: #33d4ff;
61+
--color-btn-primary-hover-border: #33d4ff;
62+
--color-btn-primary-selected-bg: #00c8ff;
63+
--color-btn-primary-selected-shadow: 0 0 transparent;
64+
--color-btn-primary-disabled-text: rgb(0 0 0 / 50%);
65+
--color-btn-primary-disabled-bg: rgb(0 200 255 / 40%);
66+
--color-btn-primary-disabled-border: rgb(0 200 255 / 40%);
67+
--color-action-list-item-default-hover-bg: rgb(0 200 255 / 8%);
68+
--color-segmented-control-bg: #141629;
69+
--color-segmented-control-button-bg: #0d0f1a;
70+
--color-segmented-control-button-selected-border: #6b6b80;
71+
72+
/* Surfaces & text — the site's dark palette */
73+
--color-fg-default: #e8e8f0;
74+
--color-fg-muted: #6b6b80;
75+
--color-fg-subtle: #6b6b80;
76+
--color-canvas-default: #1a1d30;
77+
--color-canvas-overlay: #1a1d30;
78+
--color-canvas-inset: #0d0f1a;
79+
--color-canvas-subtle: #141629;
80+
--color-border-default: #252840;
81+
--color-border-muted: #252840;
82+
--color-neutral-muted: rgb(37 40 64 / 40%);
83+
--color-accent-fg: #00c8ff;
84+
--color-accent-emphasis: #00c8ff;
85+
--color-accent-muted: rgb(0 200 255 / 40%);
86+
--color-accent-subtle: rgb(0 200 255 / 15%);
87+
--color-success-fg: #3fb950;
88+
--color-attention-fg: #d29922;
89+
--color-attention-muted: rgb(187 128 9 / 40%);
90+
--color-attention-subtle: rgb(187 128 9 / 15%);
91+
--color-danger-fg: #f85149;
92+
--color-danger-muted: rgb(248 81 73 / 40%);
93+
--color-danger-subtle: rgb(248 81 73 / 10%);
94+
--color-primer-shadow-inset: 0 0 transparent;
95+
--color-scale-gray-7: #252840;
96+
--color-scale-blue-8: rgb(0 200 255 / 25%);
97+
98+
/*! Extensions from @primer/css/alerts/flash.scss */
99+
--color-social-reaction-bg-hover: var(--color-scale-gray-7);
100+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
101+
}
102+
103+
main .pagination-loader-container {
104+
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
105+
}
106+
107+
main .gsc-loading-image {
108+
background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
109+
}

‎static/giscus/theme-light.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/*! MIT License
2+
* Copyright (c) 2018 GitHub Inc.
3+
* https://github.com/primer/primitives/blob/main/LICENSE
4+
*
5+
* OurSQL Foundation custom giscus theme (light) — a recolor of giscus's own
6+
* light.css to match the site's light-theme palette (assets/scss/_light-theme.scss).
7+
* Only surface/text/accent/button variables below are changed; everything
8+
* else (syntax highlighting, success/attention/danger, background images)
9+
* is kept as GitHub's original values.
10+
*/
11+
12+
main {
13+
--color-prettylights-syntax-comment: #6e7781;
14+
--color-prettylights-syntax-constant: #0550ae;
15+
--color-prettylights-syntax-entity: #8250df;
16+
--color-prettylights-syntax-storage-modifier-import: #24292f;
17+
--color-prettylights-syntax-entity-tag: #116329;
18+
--color-prettylights-syntax-keyword: #cf222e;
19+
--color-prettylights-syntax-string: #0a3069;
20+
--color-prettylights-syntax-variable: #953800;
21+
--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
22+
--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
23+
--color-prettylights-syntax-invalid-illegal-bg: #82071e;
24+
--color-prettylights-syntax-carriage-return-text: #f6f8fa;
25+
--color-prettylights-syntax-carriage-return-bg: #cf222e;
26+
--color-prettylights-syntax-string-regexp: #116329;
27+
--color-prettylights-syntax-markup-list: #3b2300;
28+
--color-prettylights-syntax-markup-heading: #0550ae;
29+
--color-prettylights-syntax-markup-italic: #24292f;
30+
--color-prettylights-syntax-markup-bold: #24292f;
31+
--color-prettylights-syntax-markup-deleted-text: #82071e;
32+
--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
33+
--color-prettylights-syntax-markup-inserted-text: #116329;
34+
--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
35+
--color-prettylights-syntax-markup-changed-text: #953800;
36+
--color-prettylights-syntax-markup-changed-bg: #ffd8b5;
37+
--color-prettylights-syntax-markup-ignored-text: #eaeef2;
38+
--color-prettylights-syntax-markup-ignored-bg: #0550ae;
39+
--color-prettylights-syntax-meta-diff-range: #8250df;
40+
--color-prettylights-syntax-brackethighlighter-angle: #57606a;
41+
--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
42+
--color-prettylights-syntax-constant-other-reference-link: #0a3069;
43+
44+
/* Buttons — recolored to the site's electric-cyan accent */
45+
--color-btn-text: #0f172a;
46+
--color-btn-bg: #ffffff;
47+
--color-btn-border: #dde3ed;
48+
--color-btn-shadow: 0 1px 0 rgb(15 23 42 / 4%);
49+
--color-btn-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 25%);
50+
--color-btn-hover-bg: #f1f5f9;
51+
--color-btn-hover-border: #00c8ff;
52+
--color-btn-active-bg: #f1f5f9;
53+
--color-btn-active-border: #dde3ed;
54+
--color-btn-selected-bg: #f1f5f9;
55+
--color-btn-primary-text: #000000;
56+
--color-btn-primary-bg: #00c8ff;
57+
--color-btn-primary-border: #00c8ff;
58+
--color-btn-primary-shadow: 0 1px 0 rgb(15 23 42 / 10%);
59+
--color-btn-primary-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 15%);
60+
--color-btn-primary-hover-bg: #33d4ff;
61+
--color-btn-primary-hover-border: #33d4ff;
62+
--color-btn-primary-selected-bg: #00c8ff;
63+
--color-btn-primary-selected-shadow: inset 0 1px 0 rgb(0 0 0 / 10%);
64+
--color-btn-primary-disabled-text: rgb(0 0 0 / 50%);
65+
--color-btn-primary-disabled-bg: rgb(0 200 255 / 40%);
66+
--color-btn-primary-disabled-border: rgb(0 200 255 / 40%);
67+
--color-action-list-item-default-hover-bg: rgb(0 200 255 / 8%);
68+
--color-segmented-control-bg: #eaeef2;
69+
--color-segmented-control-button-bg: #ffffff;
70+
--color-segmented-control-button-selected-border: #94a3b8;
71+
72+
/* Surfaces & text — the site's light-theme palette */
73+
--color-fg-default: #0f172a;
74+
--color-fg-muted: #64748b;
75+
--color-fg-subtle: #94a3b8;
76+
--color-canvas-default: #ffffff;
77+
--color-canvas-overlay: #ffffff;
78+
--color-canvas-inset: #f8f9fc;
79+
--color-canvas-subtle: #f1f5f9;
80+
--color-border-default: #dde3ed;
81+
--color-border-muted: #dde3ed;
82+
--color-neutral-muted: rgb(148 163 184 / 20%);
83+
--color-accent-fg: #0272a5;
84+
--color-accent-emphasis: #0272a5;
85+
--color-accent-muted: rgb(2 114 165 / 40%);
86+
--color-accent-subtle: rgb(0 200 255 / 10%);
87+
--color-success-fg: #1a7f37;
88+
--color-attention-fg: #9a6700;
89+
--color-attention-muted: rgb(212 167 44 / 40%);
90+
--color-attention-subtle: #fff8c5;
91+
--color-danger-fg: #d1242f;
92+
--color-danger-muted: rgb(255 129 130 / 40%);
93+
--color-danger-subtle: #ffebe9;
94+
--color-primer-shadow-inset: inset 0 1px 0 rgb(221 227 237 / 40%);
95+
--color-scale-gray-1: #f1f5f9;
96+
--color-scale-blue-1: rgb(0 200 255 / 15%);
97+
98+
/*! Extensions from @primer/css/alerts/flash.scss */
99+
--color-social-reaction-bg-hover: var(--color-scale-gray-1);
100+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
101+
}
102+
103+
main .pagination-loader-container {
104+
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
105+
}
106+
107+
main .gsc-loading-image {
108+
background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
109+
}

0 commit comments

Comments
 (0)