Skip to content

Commit 19e7409

Browse files
danielledeleonginx-jack
danielledeleo
and
nginx-jack
authored
Initial Mainframe styles (#85)
Co-authored-by: Jack Hickey <[email protected]>
1 parent 231e881 commit 19e7409

File tree

5 files changed

+261
-3
lines changed

5 files changed

+261
-3
lines changed

‎assets/css/inter/inter.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/*
2+
Font families defined by this CSS:
3+
- InterVariable variable font for modern web browsers
4+
- Inter static fonts for older web browsers (small optical size)
5+
- InterDisplay static fonts for older web browsers (large optical size)
6+
7+
Usage example:
8+
:root { font-family: Inter, sans-serif; }
9+
@supports (font-variation-settings: normal) {
10+
:root { font-family: InterVariable, sans-serif; }
11+
}
12+
13+
*/
14+
@font-face {
15+
font-family: InterVariable;
16+
font-style: normal;
17+
font-weight: 100 900;
18+
font-display: swap;
19+
src: url('font-files/InterVariable.woff2?v=4.0') format('woff2');
20+
}
21+
@font-face {
22+
font-family: InterVariable;
23+
font-style: italic;
24+
font-weight: 100 900;
25+
font-display: swap;
26+
src: url('font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
27+
}
28+
/* legacy name "Inter var" (Oct 2023) */
29+
@font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable.woff2?v=4.0') format('woff2'); }
30+
@font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable-Italic.woff2?v=4.0') format('woff2'); }
31+
/* static fonts */
32+
@font-face { font-family:Inter; font-style:normal; font-weight:100; font-display:swap; src:url("font-files/Inter-Thin.woff2?v=4.0") format("woff2"); }
33+
@font-face { font-family:Inter; font-style:italic; font-weight:100; font-display:swap; src:url("font-files/Inter-ThinItalic.woff2?v=4.0") format("woff2"); }
34+
@font-face { font-family:Inter; font-style:normal; font-weight:200; font-display:swap; src:url("font-files/Inter-ExtraLight.woff2?v=4.0") format("woff2"); }
35+
@font-face { font-family:Inter; font-style:italic; font-weight:200; font-display:swap; src:url("font-files/Inter-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
36+
@font-face { font-family:Inter; font-style:normal; font-weight:300; font-display:swap; src:url("font-files/Inter-Light.woff2?v=4.0") format("woff2"); }
37+
@font-face { font-family:Inter; font-style:italic; font-weight:300; font-display:swap; src:url("font-files/Inter-LightItalic.woff2?v=4.0") format("woff2"); }
38+
@font-face { font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url("font-files/Inter-Regular.woff2?v=4.0") format("woff2"); }
39+
@font-face { font-family:Inter; font-style:italic; font-weight:400; font-display:swap; src:url("font-files/Inter-Italic.woff2?v=4.0") format("woff2"); }
40+
@font-face { font-family:Inter; font-style:normal; font-weight:500; font-display:swap; src:url("font-files/Inter-Medium.woff2?v=4.0") format("woff2"); }
41+
@font-face { font-family:Inter; font-style:italic; font-weight:500; font-display:swap; src:url("font-files/Inter-MediumItalic.woff2?v=4.0") format("woff2"); }
42+
@font-face { font-family:Inter; font-style:normal; font-weight:600; font-display:swap; src:url("font-files/Inter-SemiBold.woff2?v=4.0") format("woff2"); }
43+
@font-face { font-family:Inter; font-style:italic; font-weight:600; font-display:swap; src:url("font-files/Inter-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
44+
@font-face { font-family:Inter; font-style:normal; font-weight:700; font-display:swap; src:url("font-files/Inter-Bold.woff2?v=4.0") format("woff2"); }
45+
@font-face { font-family:Inter; font-style:italic; font-weight:700; font-display:swap; src:url("font-files/Inter-BoldItalic.woff2?v=4.0") format("woff2"); }
46+
@font-face { font-family:Inter; font-style:normal; font-weight:800; font-display:swap; src:url("font-files/Inter-ExtraBold.woff2?v=4.0") format("woff2"); }
47+
@font-face { font-family:Inter; font-style:italic; font-weight:800; font-display:swap; src:url("font-files/Inter-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
48+
@font-face { font-family:Inter; font-style:normal; font-weight:900; font-display:swap; src:url("font-files/Inter-Black.woff2?v=4.0") format("woff2"); }
49+
@font-face { font-family:Inter; font-style:italic; font-weight:900; font-display:swap; src:url("font-files/Inter-BlackItalic.woff2?v=4.0") format("woff2"); }
50+
@font-face { font-family:InterDisplay; font-style:normal; font-weight:100; font-display:swap; src:url("font-files/InterDisplay-Thin.woff2?v=4.0") format("woff2"); }
51+
@font-face { font-family:InterDisplay; font-style:italic; font-weight:100; font-display:swap; src:url("font-files/InterDisplay-ThinItalic.woff2?v=4.0") format("woff2"); }
52+
@font-face { font-family:InterDisplay; font-style:normal; font-weight:200; font-display:swap; src:url("font-files/InterDisplay-ExtraLight.woff2?v=4.0") format("woff2"); }
53+
@font-face { font-family:InterDisplay; font-style:italic; font-weight:200; font-display:swap; src:url("font-files/InterDisplay-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
54+
@font-face { font-family:InterDisplay; font-style:normal; font-weight:300; font-display:swap; src:url("font-files/InterDisplay-Light.woff2?v=4.0") format("woff2"); }
55+
@font-face { font-family:InterDisplay; font-style:italic; font-weight:300; font-display:swap; src:url("font-files/InterDisplay-LightItalic.woff2?v=4.0") format("woff2"); }
56+
@font-face { font-family:InterDisplay; font-style:normal; font-weight:400; font-display:swap; src:url("font-files/InterDisplay-Regular.woff2?v=4.0") format("woff2"); }
57+
@font-face { font-family:InterDisplay; font-style:italic; font-weight:400; font-display:swap; src:url("font-files/InterDisplay-Italic.woff2?v=4.0") format("woff2"); }
58+
@font-face { font-family:InterDisplay; font-style:normal; font-weight:500; font-display:swap; src:url("font-files/InterDisplay-Medium.woff2?v=4.0") format("woff2"); }
59+
@font-face { font-family:InterDisplay; font-style:italic; font-weight:500; font-display:swap; src:url("font-files/InterDisplay-MediumItalic.woff2?v=4.0") format("woff2"); }
60+
@font-face { font-family:InterDisplay; font-style:normal; font-weight:600; font-display:swap; src:url("font-files/InterDisplay-SemiBold.woff2?v=4.0") format("woff2"); }
61+
@font-face { font-family:InterDisplay; font-style:italic; font-weight:600; font-display:swap; src:url("font-files/InterDisplay-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
62+
@font-face { font-family:InterDisplay; font-style:normal; font-weight:700; font-display:swap; src:url("font-files/InterDisplay-Bold.woff2?v=4.0") format("woff2"); }
63+
@font-face { font-family:InterDisplay; font-style:italic; font-weight:700; font-display:swap; src:url("font-files/InterDisplay-BoldItalic.woff2?v=4.0") format("woff2"); }
64+
@font-face { font-family:InterDisplay; font-style:normal; font-weight:800; font-display:swap; src:url("font-files/InterDisplay-ExtraBold.woff2?v=4.0") format("woff2"); }
65+
@font-face { font-family:InterDisplay; font-style:italic; font-weight:800; font-display:swap; src:url("font-files/InterDisplay-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
66+
@font-face { font-family:InterDisplay; font-style:normal; font-weight:900; font-display:swap; src:url("font-files/InterDisplay-Black.woff2?v=4.0") format("woff2"); }
67+
@font-face { font-family:InterDisplay; font-style:italic; font-weight:900; font-display:swap; src:url("font-files/InterDisplay-BlackItalic.woff2?v=4.0") format("woff2"); }

‎assets/css/v2/style.css

Lines changed: 188 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,188 @@
1-
html {
2-
background-color: lightgreen;
3-
}
1+
/* webfonts */
2+
:root {
3+
font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
4+
font-feature-settings: 'liga' on, 'calt' on;
5+
6+
/* fallback to slightly thinner font on browsers without variable 'wght' support */
7+
font-weight: 300;
8+
9+
/* base rem = 16px by default, left as percentage for screen readers */
10+
font-size: 100%;
11+
12+
--color-brand: #009639;
13+
--color-brand-300: #a6daba;
14+
--color-brand-200: #ccead7;
15+
--color-brand-100: #f2faf5;
16+
--color-background: #FFFFFF;
17+
--color-foreground: #000000;
18+
--color-shadow: #D2D2D2;
19+
}
20+
21+
@supports (font-variation-settings: normal) {
22+
:root {
23+
font-family: InterVariable, sans-serif;
24+
font-variation-settings: 'wght' 350;
25+
}
26+
27+
h1, h2, h3, h4, h5, h6, .breadcrumb {
28+
font-variation-settings: 'wght' 500;
29+
}
30+
}
31+
32+
h1, h2, h3, h4, h5, h6, .breadcrumb {
33+
font-weight: 500;
34+
}
35+
36+
/* layout */
37+
header {
38+
margin: 2rem 2rem;
39+
40+
.navbar {
41+
42+
}
43+
}
44+
/* breadcrumbs */
45+
nav {
46+
display: flex;
47+
align-items: center;
48+
padding: 1rem;
49+
50+
.logo {
51+
height: 3rem;
52+
width: 3rem;
53+
54+
}
55+
56+
.links a {
57+
margin: 0 0 0 1rem;
58+
}
59+
}
60+
61+
.main {
62+
display: flex;
63+
margin: 0 1rem;
64+
}
65+
66+
.sidebar {
67+
flex-basis: 1;
68+
width: 20rem;
69+
margin: 2rem 0;
70+
}
71+
72+
.row {
73+
display: flex;
74+
flex-wrap: nowrap;
75+
align-items: flex-start;
76+
}
77+
78+
/* content */
79+
main {
80+
max-width: 40rem;
81+
min-width: 30rem;
82+
margin: 2rem 2rem;
83+
}
84+
85+
p {
86+
margin: 0 0 1.5rem 0;
87+
line-height: 1.5rem;
88+
}
89+
90+
.breadcrumb {
91+
font-size: 0.875rem;
92+
margin: 0 0 2rem 0;
93+
}
94+
95+
.breadcrumb {
96+
color: var(--color-foreground);
97+
text-decoration: none;
98+
}
99+
100+
.breadcrumb .active {
101+
font-weight: 600;
102+
}
103+
104+
.breadcrumb ol {
105+
list-style: none;
106+
padding: 0;
107+
display: flex;
108+
}
109+
110+
.breadcrumb li:after {
111+
padding: 0 0.25rem;
112+
content: "\E1D7";
113+
}
114+
115+
116+
a {
117+
color: var(--color-brand);
118+
}
119+
120+
h1 {
121+
font-size: 2rem;
122+
margin: 0 0 2rem 0;
123+
}
124+
125+
h2 {
126+
font-size: 1.5rem;
127+
margin: 3rem 0 1rem 0;
128+
}
129+
130+
/* callouts */
131+
blockquote {
132+
border: 1px solid var(--color-foreground);
133+
padding: 1rem;
134+
margin: 3rem -1rem;
135+
136+
/* solid 3px drop shadow */
137+
box-shadow: 3px 3px 0px var(--color-shadow);
138+
}
139+
140+
blockquote.note:before{
141+
content: "Note";
142+
text-transform: uppercase;
143+
font-size: 1rem;
144+
font-weight: 600;
145+
font-variation-settings: 'wght' 600;
146+
147+
position: absolute;
148+
margin: -1.625rem 0 0 -0.25rem;
149+
padding: 0 0.25rem;
150+
display: block;
151+
background-color: var(--color-background);
152+
}
153+
154+
blockquote p:first-child {
155+
margin: 0 auto 1rem auto;
156+
}
157+
158+
blockquote p:last-child {
159+
margin: 0 auto;
160+
}
161+
162+
code {
163+
font-weight: light;
164+
font-family: 'JetBrains Mono', monospace;
165+
}
166+
167+
/* FILTHY HACKS BEGIN */
168+
169+
/* Override logo with black text version */
170+
.navbar-brand {
171+
height: 3.5rem;
172+
display: block;
173+
174+
/* non-tiling background logo */
175+
background-image: url(/images/icons/NGINX-Docs-horiz-black-type.svg);
176+
background-repeat: no-repeat;
177+
178+
img {
179+
display: none;
180+
}
181+
}
182+
183+
/* FILTHY HACKS END */
184+
185+
/* Hidden temporarily */
186+
.code-copy {
187+
display: none;
188+
}

‎layouts/partials/styles.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@
1111
<link href="{{ $css7.RelPermalink }}" integrity="{{ $css7.Data.Integrity }}" rel="stylesheet" type="text/css" id="css7"
1212
disabled>
1313

14+
{{ $cssInter := resources.Get "css/inter/inter.css" | fingerprint "sha512" }}
15+
<link href="{{ $cssInter.RelPermalink }}" integrity="{{ $cssInter.Data.Integrity }}" rel="stylesheet" type="text/css"
16+
id="cssInter">
17+
<!-- end v2 theme assets -->
18+
19+
1420
<!-- load FontAwesome from assets -->
1521
{{ $cssFA1 := resources.Get "fontawesome/css/all.min.css" | fingerprint "sha512" }}
1622
<link href="{{ $cssFA1.RelPermalink }}" integrity="{{ $cssFA1.Data.Integrity }}" rel="stylesheet" type="text/css"

‎static/css/inter/font-files/InterVariable-Italic.woff2

372 KB
Binary file not shown.

‎static/css/inter/font-files/InterVariable.woff2

337 KB
Binary file not shown.

0 commit comments

Comments
 (0)