Skip to content

Commit ee4a371

Browse files
jathaydejathayde
authored
Guides Dark Mode fixes (rails#51444)
* Guides feedback fixes @claudioduarte in rails#51415 - [x] Make alt, shorter SVG line for mobile, add responsive style - [x] Add side padding on footer (goes to edge on mobile, does not align on desktop) - [x] Shrink overall height of subCol so it doesn’t overlap footer @ivanjuric in rails#51398 - [x] Flip inverted dark modes on “more Ruby on Rails” nav bar DHH/Core: - [x] Darker dark mode (Github style) - [x] Double box on WIP call out (index.html. editable?) - [x] NavBar bottom issue clipping on some guides (pad the content?) - [x] Rounded corners/better appearance on select form elements in header - [x] Black border on bottom of interstitials * Additional UI cleanup - [x] tightening up white space, adding Rails brand HR after intro - [x] base fontsize to 16px from 18px; - [x] fixing some darker dark mode issues in the last commit * Lightening syntax highlight colors
1 parent 0a40f6e commit ee4a371

File tree

9 files changed

+2135
-80
lines changed

9 files changed

+2135
-80
lines changed

‎guides/assets/images/hr_rails_mobile.svg

Lines changed: 1 addition & 0 deletions
Loading

‎guides/assets/images/hr_rails_white_mobile.svg

Lines changed: 1 addition & 0 deletions
Loading

‎guides/assets/stylesheets/highlight.css

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
/* ----------------------------------------------------------------------------
2+
// Rails Guides Redesign
3+
// February 2024
4+
//
5+
// John Athayde (https://www.johnathayde.com) for Meticulous
6+
// ---------------------------------------------------------------------------- */
7+
.highlight {
8+
background-color: transparent !important;
9+
}
10+
.highlight table td {
11+
padding: 5px;
12+
}
13+
.highlight table pre {
14+
margin: 0;
15+
}
16+
.highlight .c,
17+
.highlight .cd,
18+
.highlight .ch,
19+
.highlight .cm,
20+
.highlight .cpf,
21+
.highlight .cs .c1,
22+
.highlight .ge {
23+
font-style: italic;
24+
}
25+
.highlight .cp,
26+
.highlight .cs,
27+
.highlight .fm,
28+
.highlight .gs,
29+
.highlight .kc,
30+
.highlight .kd,
31+
.highlight .kn,
32+
.highlight .kp,
33+
.highlight .kr,
34+
.highlight .kt,
35+
.highlight .nc,
36+
.highlight .nd,
37+
.highlight .ne,
38+
.highlight .nf,
39+
.highlight .nl,
40+
.highlight .o,
41+
.highlight .ow {
42+
font-weight: 500;
43+
}
44+
45+
.highlight {
46+
color: #fff;
47+
/* Comment */
48+
/* Error */
49+
/* Keyword */
50+
/* Literal */
51+
/* Name */
52+
/* Operator */
53+
/* Punctuation */
54+
/* Comment.Multiline */
55+
/* Comment.Preproc */
56+
/* Comment.Single */
57+
/* Comment.Special */
58+
/* Keyword.Constant */
59+
/* Keyword.Declaration */
60+
/* Keyword.Namespace */
61+
/* Keyword.Pseudo */
62+
/* Keyword.Reserved */
63+
/* Keyword.Type */
64+
/* Literal.Date */
65+
/* Literal.Number */
66+
/* Literal.String */
67+
/* Name.Attribute */
68+
/* Name.Builtin */
69+
/* Name.Class */
70+
/* Name.Constant */
71+
/* Name.Decorator */
72+
/* Name.Entity */
73+
/* Name.Exception */
74+
/* Name.Function */
75+
/* Name.Label */
76+
/* Name.Namespace */
77+
/* Name.Other */
78+
/* Name.Property */
79+
/* Name.Tag */
80+
/* Name.Variable */
81+
/* Operator.Word */
82+
/* Text.Whitespace */
83+
/* Literal.Number.Float */
84+
/* Literal.Number.Hex */
85+
/* Literal.Number.Integer */
86+
/* Literal.Number.Oct */
87+
/* Literal.String.Backtick */
88+
/* Literal.String.Char */
89+
/* Literal.String.Doc */
90+
/* Literal.String.Double */
91+
/* Literal.String.Escape */
92+
/* Literal.String.Heredoc */
93+
/* Literal.String.Interpol */
94+
/* Literal.String.Other */
95+
/* Literal.String.Regex */
96+
/* Literal.String.Single */
97+
/* Literal.String.Symbol */
98+
/* Name.Builtin.Pseudo */
99+
/* Name.Variable.Class */
100+
/* Name.Variable.Global */
101+
/* Name.Variable.Instance */
102+
/* Literal.Number.Integer.Long */
103+
/* Generic Heading & Diff Header */
104+
/* Generic.Subheading & Diff Unified/Comment? */
105+
/* Generic.Deleted & Diff Deleted */
106+
/* Generic.Inserted & Diff Inserted */
107+
}
108+
.highlight.plaintext, .highlight.console, .highlight.erb, .highlight.html {
109+
color: #fff;
110+
}
111+
.highlight .hll {
112+
background-color: #272822;
113+
}
114+
.highlight .c {
115+
color: #A9A9A8;
116+
}
117+
.highlight .err {
118+
color: #e7007b;
119+
background-color: #1e0010;
120+
}
121+
.highlight .k {
122+
color: #8AECFF;
123+
}
124+
.highlight .l {
125+
color: #C3A2FF;
126+
}
127+
.highlight .n {
128+
color: #f8f8f2;
129+
}
130+
.highlight .o {
131+
color: #FF538C;
132+
}
133+
.highlight .p {
134+
color: #f8f8f2;
135+
}
136+
.highlight .cm {
137+
color: #A9A9A8;
138+
}
139+
.highlight .cp {
140+
color: #A9A9A8;
141+
}
142+
.highlight .c1 {
143+
color: #A9A9A8;
144+
}
145+
.highlight .cs {
146+
color: #A9A9A8;
147+
}
148+
.highlight .kc {
149+
color: #8AECFF;
150+
}
151+
.highlight .kd {
152+
color: #8AECFF;
153+
}
154+
.highlight .kn {
155+
color: #FF538C;
156+
}
157+
.highlight .kp {
158+
color: #8AECFF;
159+
}
160+
.highlight .kr {
161+
color: #8AECFF;
162+
}
163+
.highlight .kt {
164+
color: #8AECFF;
165+
}
166+
.highlight .ld {
167+
color: #FCEF8D;
168+
}
169+
.highlight .m {
170+
color: #C3A2FF;
171+
}
172+
.highlight .s {
173+
color: #FCEF8D;
174+
}
175+
.highlight .na {
176+
color: #BDFB42;
177+
}
178+
.highlight .nb {
179+
color: #f8f8f2;
180+
}
181+
.highlight .nc {
182+
color: #BDFB42;
183+
}
184+
.highlight .no {
185+
color: #8AECFF;
186+
}
187+
.highlight .nd {
188+
color: #BDFB42;
189+
}
190+
.highlight .ni {
191+
color: #f8f8f2;
192+
}
193+
.highlight .ne {
194+
color: #BDFB42;
195+
}
196+
.highlight .nf {
197+
color: #BDFB42;
198+
}
199+
.highlight .nl {
200+
color: #f8f8f2;
201+
}
202+
.highlight .nn {
203+
color: #f8f8f2;
204+
}
205+
.highlight .nx {
206+
color: #BDFB42;
207+
}
208+
.highlight .py {
209+
color: #f8f8f2;
210+
}
211+
.highlight .nt {
212+
color: #FF538C;
213+
}
214+
.highlight .nv {
215+
color: #f8f8f2;
216+
}
217+
.highlight .ow {
218+
color: #FF538C;
219+
}
220+
.highlight .w {
221+
color: #f8f8f2;
222+
}
223+
.highlight .mf {
224+
color: #C3A2FF;
225+
}
226+
.highlight .mh {
227+
color: #C3A2FF;
228+
}
229+
.highlight .mi {
230+
color: #C3A2FF;
231+
}
232+
.highlight .mo {
233+
color: #C3A2FF;
234+
}
235+
.highlight .sb {
236+
color: #FCEF8D;
237+
}
238+
.highlight .sc {
239+
color: #FCEF8D;
240+
}
241+
.highlight .sd {
242+
color: #FCEF8D;
243+
}
244+
.highlight .s2 {
245+
color: #FCEF8D;
246+
}
247+
.highlight .se {
248+
color: #C3A2FF;
249+
}
250+
.highlight .sh {
251+
color: #FCEF8D;
252+
}
253+
.highlight .si {
254+
color: #FCEF8D;
255+
}
256+
.highlight .sx {
257+
color: #FCEF8D;
258+
}
259+
.highlight .sr {
260+
color: #FCEF8D;
261+
}
262+
.highlight .s1 {
263+
color: #FCEF8D;
264+
}
265+
.highlight .ss {
266+
color: #FCEF8D;
267+
}
268+
.highlight .bp {
269+
color: #f8f8f2;
270+
}
271+
.highlight .vc {
272+
color: #f8f8f2;
273+
}
274+
.highlight .vg {
275+
color: #f8f8f2;
276+
}
277+
.highlight .vi {
278+
color: #f8f8f2;
279+
}
280+
.highlight .il {
281+
color: #C3A2FF;
282+
}
283+
.highlight .gh {
284+
color: #A9A9A8;
285+
}
286+
.highlight .gu {
287+
color: #75715e;
288+
}
289+
.highlight .gd {
290+
color: #FF538C;
291+
background-color: unset;
292+
}
293+
.highlight .gi {
294+
color: #BDFB42;
295+
background-color: unset;
296+
}
297+
.highlight .gr {
298+
color: #FF538C;
299+
}
300+
.highlight .go {
301+
color: #A9A9A8;
302+
}
303+
.highlight .gp {
304+
color: #fff;
305+
}

0 commit comments

Comments
 (0)