Skip to content

Commit 0b3eec0

Browse files
nginx-jacknginx-jack
committed
CSS: Refactor to separate css files
1 parent 2eea44e commit 0b3eec0

22 files changed

+2398
-2187
lines changed

‎assets/css/blocks.css‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
/*
2+
Blocks should be used for larger state and layout changes.
3+
In this case, we handle the difference from our "normal" content layout,
4+
homepage, redocly pages, and list pages.
5+
*/
6+
7+
/* Homepage */
8+
.homepage {
9+
--content-max-width: 120rem;
10+
11+
.homepage-heading {
12+
grid-column: 1 / -1;
13+
font-size: 1.5rem;
14+
font-weight: 500;
15+
margin: 2rem 0rem;
16+
}
17+
18+
.homepage-section {
19+
display: grid;
20+
grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
21+
gap: 1.5rem;
22+
23+
justify-content: center;
24+
max-width: 98rem;
25+
margin: 0 auto;
26+
padding-bottom: 2rem;
27+
28+
a {
29+
color: oklch(var(--color-foreground));
30+
text-decoration-color: oklch(var(--color-background));
31+
32+
&:hover {
33+
text-decoration-color: oklch(var(--color-background));
34+
}
35+
}
36+
37+
.homepage-heading {
38+
grid-column: 1 / -1;
39+
margin: 1rem 0rem;
40+
}
41+
}
42+
43+
/* Styling for items */
44+
.homepage-item {
45+
background: oklch(var(--color-background));
46+
border: 1px solid oklch(var(--color-codeblock-border));
47+
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
48+
min-height: 11rem;
49+
padding: 1rem 2rem 2rem 2rem;
50+
display: flex;
51+
flex-direction: column;
52+
justify-content: space-between;
53+
cursor: pointer;
54+
55+
&:hover {
56+
box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
57+
text-decoration-color: oklch(var(--color-background));
58+
border: 1px solid oklch(var(--color-brand) / 0.8);
59+
}
60+
}
61+
62+
.homepage-item-heading {
63+
display: flex;
64+
align-items: center;
65+
justify-content: flex-start;
66+
}
67+
68+
.homepage-item-logo {
69+
margin-right: 0.5rem;
70+
}
71+
72+
.homepage-item-logo img {
73+
height: 40px;
74+
width: auto;
75+
display: block;
76+
}
77+
78+
.homepage-item-text {
79+
font-size: 1.1rem;
80+
font-weight: 600;
81+
line-height: 1.2;
82+
margin: 0;
83+
padding: 0;
84+
/* Hack to make text line-up with logos */
85+
transform: translateY(-6px);
86+
}
87+
88+
.homepage-item-content {
89+
line-height: 1.5rem;
90+
}
91+
}
92+
93+
/* List page */
94+
.list-page {
95+
--flow-gap: 0.5rem;
96+
97+
h2 {
98+
font-size: 1.5rem;
99+
}
100+
101+
hr {
102+
margin: 1rem 0;
103+
}
104+
}
105+
106+
/* Handles different flow-gap of list page */
107+
.list-page.text-content {
108+
grid-template-rows: calc(70px + var(--flow-gap)) max-content;
109+
}
110+
111+
/* OTHER TODO SORT */
112+
113+
/* breadcrumbs */
114+
nav {
115+
display: flex;
116+
align-items: center;
117+
118+
.logo {
119+
height: 3rem;
120+
width: 3rem;
121+
}
122+
123+
.links a {
124+
margin: 0 0 0 1rem;
125+
}
126+
}
127+
128+
/* Breadcrumb */
129+
.breadcrumb-layout {
130+
position: relative;
131+
background-color: --color-background;
132+
133+
.sidebar__mobile__toggle {
134+
display: none;
135+
}
136+
}
137+
138+
.breadcrumb {
139+
color: oklch(var(--color-foreground));
140+
text-decoration: none;
141+
font-size: 0.875rem;
142+
margin: 0;
143+
}
144+
145+
.breadcrumb .active {
146+
font-weight: 600;
147+
}
148+
149+
.breadcrumb ol {
150+
list-style: none;
151+
padding: 0;
152+
display: block;
153+
154+
> * {
155+
display: inline;
156+
line-height: 25px;
157+
}
158+
}
159+
160+
.breadcrumb li:after {
161+
padding: 0 0.25rem;
162+
content: "\E1D7";
163+
}
164+
165+
/* MARK: Catalog
166+
*/
167+
.catalog {
168+
.catalog__table {
169+
padding-bottom: 2rem;
170+
}
171+
}
172+
173+
/* MARK: Images
174+
*/
175+
figure {
176+
margin: 0;
177+
}
178+
179+
img,
180+
.figure-bitmap {
181+
display: inline-block;
182+
width: auto;
183+
max-width: 100%;
184+
height: auto;
185+
max-height: 100%;
186+
}
187+
188+
/* Logo */
189+
.f5-logo-footer {
190+
height: 32px;
191+
width: 32px;
192+
}
193+
194+
/* HR Lines */
195+
hr {
196+
/* Move to gutter */
197+
width: calc(100% + 2rem);
198+
margin-left: -1rem;
199+
200+
border: 1px solid oklch(var(--color-divider));
201+
}
202+
203+
@media print {
204+
.qualtrics-feedback {
205+
visibility: hidden;
206+
}
207+
}
208+
209+
.not-found-container {
210+
display: flex;
211+
flex-direction: column;
212+
margin-top: 10vh;
213+
214+
.info-header {
215+
font-size: var(--font-step-2);
216+
}
217+
218+
.info-desc {
219+
display: flex;
220+
flex-direction: column;
221+
gap: var(--space-3xs);
222+
font-size: var(--font-step--1);
223+
}
224+
}

‎assets/css/components/callouts.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
blockquote {
2+
border: 1px solid oklch(var(--color-foreground));
3+
padding: 1rem;
4+
margin: 0 -1rem;
5+
6+
/* solid 3px drop shadow */
7+
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
8+
9+
&:has(.code-block) .code-block:not(:has(.single-line)) {
10+
/* Removes negative margins from multi-line codeblocks */
11+
margin: 0;
12+
}
13+
14+
.callout-content {
15+
margin: 0;
16+
}
17+
}
18+
19+
blockquote.note {
20+
position: relative;
21+
z-index: 0;
22+
}
23+
24+
blockquote.note:before {
25+
content: attr(data-title);
26+
font-size: 1rem;
27+
font-weight: 600;
28+
font-variation-settings: "wght" 600;
29+
30+
position: absolute;
31+
margin: -1.625rem 0 0 -0.25rem;
32+
padding: 0 0.25rem;
33+
display: block;
34+
background-color: oklch(var(--color-background));
35+
z-index: 999;
36+
}
37+
38+
blockquote p:first-child {
39+
margin: 0 auto 1rem auto;
40+
}
41+
42+
blockquote p:last-child {
43+
margin: 0 auto;
44+
}
45+
46+
/* Maintain the split column for as long as possible */
47+
@media (min-width: 67rem) {
48+
blockquote.side-callout {
49+
grid-column: 2 !important;
50+
align-self: start;
51+
}
52+
}
53+
54+
blockquote > div > * {
55+
margin: 0 0 var(--flow-gap) 0;
56+
}
57+
58+
blockquote ol,
59+
blockquote ul {
60+
margin: 0 0 1rem 1rem;
61+
}
62+
63+
li > blockquote {
64+
margin: var(--flow-gap) 0 0 0;
65+
}
66+
67+
blockquote.call-out {
68+
--padding: 0.75rem;
69+
padding: var(--padding);
70+
71+
.call-out-type {
72+
display: block;
73+
font-weight: 500;
74+
margin: calc(-1 * var(--padding)) calc(-1 * var(--padding)) var(--padding)
75+
calc(-1 * var(--padding));
76+
77+
padding: 0.25rem var(--padding);
78+
}
79+
80+
br {
81+
display: none;
82+
}
83+
}
84+
85+
blockquote.caution {
86+
--color-shadow: var(--color-callout-caution-shadow);
87+
border: 1px solid oklch(var(--color-callout-caution));
88+
89+
.call-out-type {
90+
background-color: oklch(var(--color-callout-caution-shadow));
91+
border-bottom: 1px solid oklch(var(--color-callout-caution));
92+
}
93+
.call-out-type .feather {
94+
color: oklch(var(--color-callout-caution));
95+
}
96+
}
97+
98+
blockquote.warning {
99+
--color-shadow: var(--color-callout-warning-shadow);
100+
border: 1px solid oklch(var(--color-callout-warning));
101+
102+
.call-out-type {
103+
background-color: oklch(var(--color-callout-warning-shadow));
104+
border-bottom: 1px solid oklch(var(--color-callout-warning));
105+
}
106+
.call-out-type .feather {
107+
color: oklch(var(--color-callout-warning));
108+
}
109+
}
110+
111+
blockquote.important {
112+
--color-shadow: var(--color-callout-important-shadow);
113+
border: 1px solid oklch(var(--color-callout-important));
114+
115+
.call-out-type {
116+
background-color: oklch(var(--color-callout-important-shadow));
117+
border-bottom: 1px solid oklch(var(--color-callout-important));
118+
}
119+
}
120+
121+
li:has(> div > blockquote) {
122+
blockquote {
123+
margin: 0;
124+
}
125+
126+
div:has(blockquote) {
127+
margin-bottom: 0.5rem;
128+
}
129+
}

0 commit comments

Comments
 (0)