Skip to content

Commit 490a64c

Browse files
morri-sonmorrison-sap
morri-son
and
morrison-sap
authored
Enable switch dark light mode (#473)
<!-- markdownlint-disable MD041 --> #### What this PR does / why we need it For accessibility reasons our website needs to have light mode (and dark mode). This PR introduces a toggle for that. fixes #472 --------- Signed-off-by: Gerald Morrison (SAP) <[email protected]> Co-authored-by: Gerald Morrison (SAP) <[email protected]>
1 parent 81cdb4e commit 490a64c

File tree

14 files changed

+530
-205
lines changed

14 files changed

+530
-205
lines changed

‎.github/config/wordlist.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@ credentialrequest
7575
credentialsspec
7676
crossplatform
7777
crypto
78+
cryptographic
79+
cta
7880
ctf
7981
ctfs
8082
ctx
@@ -354,6 +356,7 @@ storable
354356
struct
355357
subchart
356358
subcharts
359+
subheadline
357360
subpath
358361
subresource
359362
subst

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,6 @@ public/
77
.idea/
88
/.project
99
hugo_stats.json
10-
.DS_Store
10+
.DS_Store
11+
tmp/*
12+

‎assets/scss/common/_custom.scss

Lines changed: 166 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,188 @@
1-
// Put your custom SCSS code here
1+
/* ============================================
2+
GLOBAL LAYOUT & STRUCTURE
3+
============================================ */
4+
5+
// Full-width container overrides
26
.container-fw {
3-
// max-width: 1200px;
4-
max-width: 100%;
5-
padding-left: 1rem;
7+
max-width: 100%;
8+
padding-left: 1rem;
69

7-
.docs-content {
8-
margin-left: 0rem !important;
9-
margin-right: 0rem !important;
10-
padding-right: 0rem !important;
11-
padding-left: 0rem !important;
12-
}
13-
.docs-toc {
14-
margin-left: 3rem !important;
15-
margin-right: 0rem !important;
16-
padding-right: 0rem !important;
17-
padding-left: 0rem !important;
18-
}
10+
.docs-content {
11+
margin-left: 0rem !important;
12+
margin-right: 0rem !important;
13+
padding-right: 0rem !important;
14+
padding-left: 0rem !important;
15+
}
16+
17+
.docs-toc {
18+
margin-left: 3rem !important;
19+
margin-right: 0rem !important;
20+
padding-right: 0rem !important;
21+
padding-left: 0rem !important;
22+
}
1923
}
2024

21-
.navbar {
22-
background: #233545;
23-
background-color: #233545 !important; // important is added so the dark CSS template doesn't overwrite this value.
25+
// Images responsive in content
26+
.content img {
27+
max-width: 100%;
28+
height: auto;
2429
}
2530

26-
// forces the single page look like a list page
27-
.list.section.docs .content {
28-
padding-top: 0;
29-
padding-bottom: 0;
31+
32+
/* ============================================
33+
HEADER (NAVIGATION & LOGO)
34+
============================================ */
35+
36+
// Force header into dark mode style
37+
header.navbar {
38+
background-color: #1d1e22 !important; // consistent dark background
39+
color: #dee2e6 !important; // consistent text color
40+
padding-top: 1rem;
41+
padding-bottom: 1rem;
3042
}
3143

44+
/* === Fixed header top line (same in light/dark) === */
45+
.header-bar {
46+
height: 4px !important;
47+
background: linear-gradient(to right, #4cc9f0, #4361ee) !important;
48+
border: none !important;
49+
box-shadow: none !important;
50+
}
3251

33-
.content img {
34-
max-width: 100%;
35-
height: auto;
52+
// Navbar links and buttons use uniform color
53+
header.navbar .nav-link,
54+
header.navbar .btn-link,
55+
header.navbar .btn-dropdown {
56+
color: #dee2e6 !important;
57+
}
58+
59+
// Icons for search, toggler, etc. only
60+
header.navbar .btn-link svg,
61+
header.navbar .btn-dropdown svg,
62+
header.navbar .nav-link[aria-label="Search website"] svg {
63+
stroke: #dee2e6;
64+
fill: none;
3665
}
3766

38-
// === footer full-width & inline links ===
67+
// Logo color follows header text color
68+
.ocm-logo {
69+
color: #dee2e6 !important;
70+
}
71+
72+
// Size and layout for SVG logos
73+
.ocm-logo-icon svg,
74+
.ocm-logo-text svg {
75+
height: 42px;
76+
width: auto;
77+
display: block;
78+
}
79+
80+
81+
/* ============================================
82+
FOOTER
83+
============================================ */
84+
85+
// Full-width footer layout
3986
.site-footer .container {
40-
max-width: 100% !important;
41-
padding-left: 1rem;
42-
padding-right: 1rem;
43-
}
44-
45-
.site-footer {
46-
/* Optional: left-align text instead of centered */
47-
text-align: left !important;
48-
}
49-
50-
.site-footer small a {
51-
display: inline !important;
52-
white-space: nowrap !important;
53-
}
87+
max-width: 100% !important;
88+
padding-left: 1rem;
89+
padding-right: 1rem;
90+
}
91+
92+
// Align footer content left
93+
.site-footer {
94+
text-align: left !important;
95+
}
96+
97+
// Inline footer links
98+
.site-footer small a {
99+
display: inline !important;
100+
white-space: nowrap !important;
101+
}
54102

55-
/* ================================
56-
Section-specific layout overrides
57-
================================ */
103+
104+
/* ============================================
105+
PAGE-TYPE LAYOUT OVERRIDES
106+
============================================ */
107+
108+
// Single page (docs) content styling
109+
.list.section.docs .content {
110+
padding-top: 0;
111+
padding-bottom: 0;
112+
}
113+
114+
115+
/* ============================================
116+
SECTION-SPECIFIC OVERRIDES (by page section)
117+
============================================ */
58118

59119
@media (min-width: 1200px) {
60-
/* — COMMUNITY PAGE — */
61-
body.section-community {
62-
/* Hide the left sidebar */
63-
.docs-sidebar {
64-
display: none !important;
65-
}
66-
/* Widen the main content */
67-
.docs-content {
68-
flex: 0 0 85% !important;
69-
max-width: 85% !important;
70-
margin: 0 1rem !important;
71-
padding: 1rem !important;
72-
}
73-
/* Narrow the TOC and keep it visible */
74-
.docs-toc {
75-
display: block !important;
76-
flex: 0 0 15% !important;
77-
max-width: 15% !important;
78-
margin: 0 1rem !important;
79-
padding-top: 1rem !important;
80-
}
120+
/* Community Page */
121+
body.section-community {
122+
.docs-sidebar {
123+
display: none !important;
81124
}
82-
83-
/* — ROADMAP PAGE — */
84-
body.section-roadmap {
85-
/* Hide sidebar and TOC entirely */
86-
.docs-sidebar,
87-
.docs-toc {
88-
display: none !important;
89-
}
90-
/* Make the content almost full-width */
91-
.docs-content {
92-
flex: 0 0 90% !important;
93-
max-width: 90% !important;
94-
margin: 0 auto !important;
95-
padding: 1rem !important;
96-
}
125+
126+
.docs-content {
127+
flex: 0 0 85% !important;
128+
max-width: 85% !important;
129+
margin: 0 1rem !important;
130+
padding: 1rem !important;
131+
}
132+
133+
.docs-toc {
134+
display: block !important;
135+
flex: 0 0 15% !important;
136+
max-width: 15% !important;
137+
margin: 0 1rem !important;
138+
padding-top: 1rem !important;
97139
}
98140
}
99-
100-
/* Mobile fallback: both pages full-width below 768px */
101-
@media (max-width: 768px) {
102-
body.section-community .docs-content,
103-
body.section-roadmap .docs-content {
104-
flex: 0 0 100% !important;
105-
max-width: 100% !important;
141+
142+
/* Roadmap Page */
143+
body.section-roadmap {
144+
.docs-sidebar,
145+
.docs-toc {
146+
display: none !important;
147+
}
148+
149+
.docs-content {
150+
flex: 0 0 90% !important;
151+
max-width: 90% !important;
106152
margin: 0 auto !important;
107153
padding: 1rem !important;
108154
}
109-
/* On mobile keep the community TOC below the content */
110-
body.section-community .docs-toc {
111-
flex: 0 0 100% !important;
112-
max-width: 100% !important;
113-
margin: 1rem 0 !important;
114-
padding: 0 !important;
115-
}
116155
}
156+
}
157+
158+
/* Mobile layout adjustments for special pages */
159+
@media (max-width: 768px) {
160+
body.section-community .docs-content,
161+
body.section-roadmap .docs-content {
162+
flex: 0 0 100% !important;
163+
max-width: 100% !important;
164+
margin: 0 auto !important;
165+
padding: 1rem !important;
166+
}
167+
168+
body.section-community .docs-toc {
169+
flex: 0 0 100% !important;
170+
max-width: 100% !important;
171+
margin: 1rem 0 !important;
172+
padding: 0 !important;
173+
}
174+
}
175+
176+
177+
/* ============================================
178+
TYPOGRAPHY & FONTS
179+
============================================ */
180+
181+
// Import Quicksand font for OCM logo
182+
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@200&display=swap');
183+
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
184+
185+
.font-logo {
186+
font-family: 'Quicksand', sans-serif;
187+
font-weight: 300;
188+
}

0 commit comments

Comments
 (0)