Skip to content

Commit 5881f28

Browse files
stalepstalep
committed
better æsh styling
1 parent 68bd149 commit 5881f28

15 files changed

Lines changed: 757 additions & 2 deletions

‎assets/css/custom.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
/* Æsh Custom Theme - Based on design.jboss.org/aesh */
2+
3+
/* Brand Colors */
4+
:root {
5+
/* Æsh primary colors from the official design */
6+
--aesh-olive-green: #868D36;
7+
--aesh-dark-olive: #5C584A;
8+
--aesh-darker-brown: #49463B;
9+
--aesh-cream: #EAE7D8;
10+
--aesh-white: #FFFFFF;
11+
12+
/* Override Hextra theme colors with Æsh branding */
13+
--primary-hue: 64;
14+
--primary-saturation: 45%;
15+
--primary-lightness: 38%;
16+
17+
/* Accent color using the olive green */
18+
--accent-color: var(--aesh-olive-green);
19+
--link-color: var(--aesh-olive-green);
20+
}
21+
22+
/* Dark mode specific overrides */
23+
.dark {
24+
--accent-color: var(--aesh-olive-green);
25+
--link-color: var(--aesh-olive-green);
26+
}
27+
28+
/* Link colors */
29+
a {
30+
color: var(--aesh-olive-green);
31+
}
32+
33+
a:hover {
34+
color: var(--aesh-dark-olive);
35+
}
36+
37+
.dark a {
38+
color: var(--aesh-olive-green);
39+
}
40+
41+
.dark a:hover {
42+
opacity: 0.8;
43+
}
44+
45+
/* Primary buttons and interactive elements */
46+
button[type="submit"],
47+
.btn-primary,
48+
.button-primary {
49+
background-color: var(--aesh-olive-green);
50+
border-color: var(--aesh-olive-green);
51+
}
52+
53+
button[type="submit"]:hover,
54+
.btn-primary:hover,
55+
.button-primary:hover {
56+
background-color: var(--aesh-dark-olive);
57+
border-color: var(--aesh-dark-olive);
58+
}
59+
60+
/* Navigation highlights */
61+
nav a.active,
62+
nav a[aria-current="page"] {
63+
color: var(--aesh-olive-green);
64+
border-bottom-color: var(--aesh-olive-green);
65+
}
66+
67+
/* Code blocks - subtle olive tint */
68+
pre,
69+
code {
70+
background-color: rgba(134, 141, 54, 0.05);
71+
}
72+
73+
.dark pre,
74+
.dark code {
75+
background-color: rgba(134, 141, 54, 0.1);
76+
}
77+
78+
/* Headings with subtle olive accent */
79+
h1, h2, h3, h4, h5, h6 {
80+
color: var(--aesh-dark-olive);
81+
}
82+
83+
.dark h1,
84+
.dark h2,
85+
.dark h3,
86+
.dark h4,
87+
.dark h5,
88+
.dark h6 {
89+
color: var(--aesh-cream);
90+
}
91+
92+
/* Search and focus states */
93+
input:focus,
94+
textarea:focus,
95+
select:focus {
96+
border-color: var(--aesh-olive-green);
97+
outline-color: var(--aesh-olive-green);
98+
}
99+
100+
/* Sidebar active items */
101+
.sidebar a.active,
102+
.sidebar a[aria-current="page"] {
103+
background-color: rgba(134, 141, 54, 0.1);
104+
border-left-color: var(--aesh-olive-green);
105+
color: var(--aesh-olive-green);
106+
}
107+
108+
/* Logo styling */
109+
.logo img {
110+
height: 2rem;
111+
width: auto;
112+
}
113+
114+
/* Custom styling for the home page hero section */
115+
.hero-section {
116+
border-bottom: 3px solid var(--aesh-olive-green);
117+
}
118+
119+
/* Blockquotes with olive accent */
120+
blockquote {
121+
border-left-color: var(--aesh-olive-green);
122+
}
123+
124+
/* Tables */
125+
table thead {
126+
background-color: rgba(134, 141, 54, 0.1);
127+
}
128+
129+
.dark table thead {
130+
background-color: rgba(134, 141, 54, 0.15);
131+
}
132+
133+
/* Footer accent */
134+
footer {
135+
border-top: 1px solid rgba(134, 141, 54, 0.2);
136+
}
137+
138+
/* Badge and tag styling */
139+
.badge,
140+
.tag {
141+
background-color: var(--aesh-olive-green);
142+
color: white;
143+
}
144+
145+
/* Scrollbar styling for webkit browsers */
146+
::-webkit-scrollbar-thumb {
147+
background-color: var(--aesh-olive-green);
148+
}
149+
150+
::-webkit-scrollbar-thumb:hover {
151+
background-color: var(--aesh-dark-olive);
152+
}
153+
154+
/* Selection color */
155+
::selection {
156+
background-color: rgba(134, 141, 54, 0.3);
157+
}
158+
159+
.dark ::selection {
160+
background-color: rgba(134, 141, 54, 0.5);
161+
}

‎hugo.yaml‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,21 @@ menu:
4343
icon: x-twitter
4444

4545
params:
46+
description: "Æsh - Java libraries for building powerful command-line interfaces"
47+
48+
theme:
49+
default: system
50+
displayToggle: true
51+
4652
navbar:
47-
displayTitle: true
48-
displayLogo: false
53+
displayTitle: false
54+
displayLogo: true
55+
logo:
56+
path: images/logo.svg
57+
dark: images/logo.svg
58+
link: /
59+
width: 120
60+
height: 50
4961

5062
footer:
5163
displayCopyright: false
@@ -54,3 +66,6 @@ params:
5466
editURL:
5567
enable: true
5668
base: "https://github.com/aeshell/aeshell.github.com/edit/main/content"
69+
70+
page:
71+
width: wide

‎static/android-chrome-192x192.png‎

12.2 KB
Loading

‎static/android-chrome-512x512.png‎

12.2 KB
Loading

‎static/apple-touch-icon.png‎

12.2 KB
Loading

‎static/css/custom.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
/* Æsh Custom Theme - Based on design.jboss.org/aesh */
2+
3+
/* Brand Colors */
4+
:root {
5+
/* Æsh primary colors from the official design */
6+
--aesh-olive-green: #868D36;
7+
--aesh-dark-olive: #5C584A;
8+
--aesh-darker-brown: #49463B;
9+
--aesh-cream: #EAE7D8;
10+
--aesh-white: #FFFFFF;
11+
12+
/* Override Hextra theme colors with Æsh branding */
13+
--primary-hue: 64;
14+
--primary-saturation: 45%;
15+
--primary-lightness: 38%;
16+
17+
/* Accent color using the olive green */
18+
--accent-color: var(--aesh-olive-green);
19+
--link-color: var(--aesh-olive-green);
20+
}
21+
22+
/* Dark mode specific overrides */
23+
.dark {
24+
--accent-color: var(--aesh-olive-green);
25+
--link-color: var(--aesh-olive-green);
26+
}
27+
28+
/* Link colors */
29+
a {
30+
color: var(--aesh-olive-green);
31+
}
32+
33+
a:hover {
34+
color: var(--aesh-dark-olive);
35+
}
36+
37+
.dark a {
38+
color: var(--aesh-olive-green);
39+
}
40+
41+
.dark a:hover {
42+
opacity: 0.8;
43+
}
44+
45+
/* Primary buttons and interactive elements */
46+
button[type="submit"],
47+
.btn-primary,
48+
.button-primary {
49+
background-color: var(--aesh-olive-green);
50+
border-color: var(--aesh-olive-green);
51+
}
52+
53+
button[type="submit"]:hover,
54+
.btn-primary:hover,
55+
.button-primary:hover {
56+
background-color: var(--aesh-dark-olive);
57+
border-color: var(--aesh-dark-olive);
58+
}
59+
60+
/* Navigation highlights */
61+
nav a.active,
62+
nav a[aria-current="page"] {
63+
color: var(--aesh-olive-green);
64+
border-bottom-color: var(--aesh-olive-green);
65+
}
66+
67+
/* Code blocks - subtle olive tint */
68+
pre,
69+
code {
70+
background-color: rgba(134, 141, 54, 0.05);
71+
}
72+
73+
.dark pre,
74+
.dark code {
75+
background-color: rgba(134, 141, 54, 0.1);
76+
}
77+
78+
/* Headings with subtle olive accent */
79+
h1, h2, h3, h4, h5, h6 {
80+
color: var(--aesh-dark-olive);
81+
}
82+
83+
.dark h1,
84+
.dark h2,
85+
.dark h3,
86+
.dark h4,
87+
.dark h5,
88+
.dark h6 {
89+
color: var(--aesh-cream);
90+
}
91+
92+
/* Search and focus states */
93+
input:focus,
94+
textarea:focus,
95+
select:focus {
96+
border-color: var(--aesh-olive-green);
97+
outline-color: var(--aesh-olive-green);
98+
}
99+
100+
/* Sidebar active items */
101+
.sidebar a.active,
102+
.sidebar a[aria-current="page"] {
103+
background-color: rgba(134, 141, 54, 0.1);
104+
border-left-color: var(--aesh-olive-green);
105+
color: var(--aesh-olive-green);
106+
}
107+
108+
/* Logo styling */
109+
.logo img {
110+
height: 2rem;
111+
width: auto;
112+
}
113+
114+
/* Custom styling for the home page hero section */
115+
.hero-section {
116+
border-bottom: 3px solid var(--aesh-olive-green);
117+
}
118+
119+
/* Blockquotes with olive accent */
120+
blockquote {
121+
border-left-color: var(--aesh-olive-green);
122+
}
123+
124+
/* Tables */
125+
table thead {
126+
background-color: rgba(134, 141, 54, 0.1);
127+
}
128+
129+
.dark table thead {
130+
background-color: rgba(134, 141, 54, 0.15);
131+
}
132+
133+
/* Footer accent */
134+
footer {
135+
border-top: 1px solid rgba(134, 141, 54, 0.2);
136+
}
137+
138+
/* Badge and tag styling */
139+
.badge,
140+
.tag {
141+
background-color: var(--aesh-olive-green);
142+
color: white;
143+
}
144+
145+
/* Scrollbar styling for webkit browsers */
146+
::-webkit-scrollbar-thumb {
147+
background-color: var(--aesh-olive-green);
148+
}
149+
150+
::-webkit-scrollbar-thumb:hover {
151+
background-color: var(--aesh-dark-olive);
152+
}
153+
154+
/* Selection color */
155+
::selection {
156+
background-color: rgba(134, 141, 54, 0.3);
157+
}
158+
159+
.dark ::selection {
160+
background-color: rgba(134, 141, 54, 0.5);
161+
}

‎static/favicon-16x16.png‎

3.49 KB
Loading

‎static/favicon-32x32.png‎

1.22 KB
Loading

0 commit comments

Comments
 (0)