Skip to content

Commit 1ee828f

Browse files
math-eatonmath-eaton
committed
misc dark mode + logos
1 parent 8b8ea47 commit 1ee828f

9 files changed

Lines changed: 57 additions & 45 deletions

File tree

‎.claude/settings.local.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"permissions": {
3+
"allow": [
4+
"Bash(grep -rn \"setAttribute\\\\|data-bs-theme\" /Users/matthewheaton/GitHub/0_CIESIN/GRID3_dataUserGuide/docs/site_libs/quarto-html/ --include=*.js)",
5+
"WebFetch(domain:stackoverflow.com)"
6+
]
7+
}
8+
}

‎_quarto.yml‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,13 @@ execute:
2121

2222

2323
website:
24-
25-
description: "Practical guides for accessing, analyzing, and visualizing GRID3 data"
26-
site-url: https://tiles.ciesin.app/
24+
# title: "CIESIN-GRID3 Spatial Data Science User Guide"
25+
description: "Guides and resources for working with CIESIN-GRID3 geospatial data."
26+
open-graph: true
27+
site-url: https://guides.ciesin.app/
2728
repo-url: https://github.com/ciesin/GRID3_dataUserGuide
2829
# repo-actions: [source]
29-
favicon: images/favicon.ico
30+
favicon: images/favicon.svg
3031
bread-crumbs: false
3132
back-to-top-navigation: true
3233

‎custom.css‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ a {
128128
/* flush snap — removes the default 0.125rem Popper gap */
129129

130130
/* colours */
131-
--bs-dropdown-bg: var(--ciesin-brand);
131+
--bs-dropdown-bg: var(--ciesin-nav);
132132
--bs-dropdown-color: rgba(255, 255, 255, 0.92);
133133
--bs-dropdown-link-color: rgba(255, 255, 255, 0.92);
134134
--bs-dropdown-link-hover-color: #ffffff;
@@ -174,16 +174,30 @@ a {
174174
}
175175
}
176176

177-
/* Code blocks */
178-
pre {
179-
border-left: 4px solid var(--ciesin-code-border);
177+
/* styling for code blocks */
178+
179+
.sourceCode {
180+
border-left: 0.2rem solid var(--ciesin-code-border);
180181
background-color: var(--ciesin-code-bg);
182+
max-width: 100%;
183+
overflow-x: auto;
184+
}
181185

186+
pre {
187+
max-width: 100%;
188+
overflow-x: auto;
182189
}
183190

184-
/* styling for code blocks */
185191
pre, code {
186-
font-family: "IBM Plex Mono", monospace;
192+
font-family: "IBM Plex Mono", monospace;
193+
}
194+
195+
/* scroll within the element if needed, not full viewport */
196+
table {
197+
display: block;
198+
max-width: 100%;
199+
overflow-x: auto;
200+
-webkit-overflow-scrolling: touch;
187201
}
188202

189203
/* parenthesis after section numbers? */
@@ -335,6 +349,13 @@ h1.quarto-secondary-nav-title {
335349
transition: background-color 0.2s ease, color 0.2s ease;
336350
}
337351

352+
/* Theme-aware logo on home page */
353+
.ciesin-logo-dark { display: none; }
354+
.ciesin-logo-light { display: block; }
355+
356+
body.quarto-dark .ciesin-logo-light { display: none; }
357+
body.quarto-dark .ciesin-logo-dark { display: block; }
358+
338359
/* footer */
339360

340361
.page-footer {
@@ -353,6 +374,6 @@ h1.quarto-secondary-nav-title {
353374
#quarto-back-to-top {
354375
position: fixed !important;
355376
color: #ffffff !important;
356-
background-color: var(--ciesin-brand) !important;
377+
background-color: var(--ciesin-nav) !important;
357378
z-index: 9999 !important;
358379
}

‎images/favicon-light.svg‎

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

‎images/favicon.ico‎

-15 KB
Binary file not shown.

images/favicon-dark.svg renamed to images/favicon.svg

Lines changed: 5 additions & 5 deletions
Loading

‎index.qmd‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ format:
1717
---
1818

1919

20-
![](https://grid3.org/content/uploads/2024/11/CIESIN_TransparentBackground_BlueText.png){width=400px}
20+
<img src="images/CIESIN_logo-blue.png" class="ciesin-logo-light" width="90%" alt="CIESIN logo">
21+
<img src="images/CIESIN_logo-white.png" class="ciesin-logo-dark" width="90%" alt="CIESIN logo">
2122

2223

2324
This website is a collection of user guides demonstrating ways to access, analyze, and visualize CIESIN GRID3 datasets.

‎pages/visualization/index.qmd‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ format:
88
page-layout: full
99
---
1010

11-
This section covers methods for rendering GRID3 spatial data — from desktop GIS styling in QGIS to web-based interactive maps using PMTiles and Leaflet.
11+
This section covers methods for rendering GRID3 spatial data for end users.
1212

1313

1414
## Guides in this section
@@ -17,4 +17,4 @@ This section covers methods for rendering GRID3 spatial data — from desktop GI
1717
Design a static map with GRID3 layers in QGIS.
1818

1919
- [Creating a dynamic webmap](pmtiles/intro.qmd)
20-
Build a browser-based interactive mapsusing GRID3 PMTiles data.
20+
Build a browser-based interactive maps using GRID3 PMTiles and MapLibre.

‎theme-dark.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
// Bootstrap Sass variable overrides — dark mode, colors only.
44
// Palette derived from brand blue #1D4F91.
55

6-
$body-bg: #1f1f1f;
6+
$body-bg: #303030;
77
$body-color: #fdfdfd;
88
$headings-color: #fdfdfd;
9-
$link-color: #787878;
9+
$link-color: #a8ccf2;
1010
$link-hover-color: lighten(#7ab3e8, 10%);
11-
$border-color: #8cafd4;
11+
$border-color: #c7c7c7;
1212
$code-color: #a8ccf2;
1313
$secondary: #a5a5a5;
1414

@@ -19,16 +19,16 @@ $secondary: #a5a5a5;
1919
// Mirror the same token names as theme-light.scss — only values differ.
2020

2121
:root {
22-
--ciesin-brand: #1D4F91; /* unchanged — navbar/buttons stay blue */
23-
--ciesin-accent: #c7c7c7; /* headings, links, borders, hr */
22+
--ciesin-brand: #003373; /* unchanged — navbar/buttons stay blue */
23+
--ciesin-accent: #a8ccf2; /* headings, links, borders, hr */
2424
--ciesin-muted: #c9c9c9; /* subtitle / secondary text */
25-
--ciesin-nav: #3b3b3b;
25+
--ciesin-nav: #303030;
2626
--ciesin-code-border: #3a6ab0; /* code block left border */
2727
--ciesin-code-bg: #111c2e; /* code block background */
2828
--ciesin-footer-rule: rgba(255, 255, 255, 0.12); /* footer top rule */
2929
--ciesin-shadow: rgba(0, 0, 0, 0.40); /* card shadow */
3030
--ciesin-shadow-hover: rgba(13, 40, 80, 0.55); /* card hover shadow */
3131

3232
--text-color: #fdfdfd;
33-
--background-color: #1D4F91
33+
--background-color: #1f1f1f
3434
}

0 commit comments

Comments
 (0)