Skip to content

Commit f394fce

Browse files
SkalskiPSkalskiP
authored
Merge pull request #214 from roboflow/new-theme
Add new theme
2 parents 5e36fd2 + b5218c7 commit f394fce

File tree

4 files changed

+443
-17
lines changed

4 files changed

+443
-17
lines changed

‎docs/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
---
22
comments: true
3+
hide:
4+
- navigation
5+
- toc
36
---
47

58

‎docs/stylesheets/rf.css

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
:root, body {
2+
/* Default to light theme */
3+
--md-primary-fg-color: #8315F9;
4+
--md-code-hl-color: #8315F9 !important;
5+
--md-accent-fg-color: #8315F9 !important;
6+
--md-code-hl-color--light: #e8d2ff89 !important;
7+
--md-footer-fg-color--light: rgb(111, 108, 121) !important;
8+
}
9+
10+
body.light {
11+
/* Light theme */
12+
--md-text-color: #000000;
13+
--md-h2-color: #000000;
14+
}
15+
.md-grid {
16+
max-width: 85%;
17+
margin: auto;
18+
}
19+
.sublist {
20+
display: none;
21+
list-style: none;
22+
padding-left: 0;
23+
background: white;
24+
position: absolute;
25+
border-radius: 8px;
26+
margin-top: 0.25rem;
27+
}
28+
.sublist {
29+
transition: opacity 0.5s ease-in-out;
30+
display: none;
31+
position: absolute; /* Ensure it overlaps and doesn't break flow */
32+
background: white; /* So it's visible */
33+
z-index: 1000;
34+
}
35+
.sublist li {
36+
padding: 0.5rem;
37+
}
38+
#products-list *:hover .products-sublist {
39+
display: block;
40+
}
41+
#resources-list *, #products-list * {
42+
cursor: pointer;
43+
}
44+
.products-sublist, .resources-sublist {
45+
padding: 0.25rem;
46+
}
47+
.products-sublist li:hover, .resources-sublist li:hover, .md-nav__link[href]:hover {
48+
background: rgb(242, 241, 247) !important;
49+
border-radius: 6px;
50+
color: initial !important;
51+
}
52+
.md-search {
53+
flex-grow: 2;
54+
}
55+
.portfolio-section .md-grid {
56+
max-width: 100%;
57+
}
58+
.md-header__inner {
59+
align-items: center;
60+
display: grid;
61+
grid-template-columns: 0.1fr 1.4fr 2fr 2fr;
62+
padding-right: 1rem;
63+
}
64+
.md-search__inner {
65+
max-width: 600px;
66+
width: 100%;
67+
min-width: 100%;
68+
}
69+
.md-search__input {
70+
background: white;
71+
border: 1px solid rgb(229, 231, 235);
72+
border-radius: 8px;
73+
color: rgb(111, 108, 121);
74+
}
75+
.md-search__form *, .md-search__icon, .md-search__input {
76+
color: rgb(111, 108, 121);
77+
}
78+
.md-search__input::placeholder {
79+
color: rgb(156, 163, 175);
80+
}
81+
.md-search__form {
82+
background: none !important;
83+
}
84+
.md-footer, .md-footer-meta {
85+
background-color: transparent;
86+
color: rgb(111, 108, 121);
87+
}
88+
.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child, .md-typeset .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > :nth-child(10), .md-typeset .tabbed-set > input:nth-child(11):checked ~ .tabbed-labels > :nth-child(11), .md-typeset .tabbed-set > input:nth-child(12):checked ~ .tabbed-labels > :nth-child(12), .md-typeset .tabbed-set > input:nth-child(13):checked ~ .tabbed-labels > :nth-child(13), .md-typeset .tabbed-set > input:nth-child(14):checked ~ .tabbed-labels > :nth-child(14), .md-typeset .tabbed-set > input:nth-child(15):checked ~ .tabbed-labels > :nth-child(15), .md-typeset .tabbed-set > input:nth-child(16):checked ~ .tabbed-labels > :nth-child(16), .md-typeset .tabbed-set > input:nth-child(17):checked ~ .tabbed-labels > :nth-child(17), .md-typeset .tabbed-set > input:nth-child(18):checked ~ .tabbed-labels > :nth-child(18), .md-typeset .tabbed-set > input:nth-child(19):checked ~ .tabbed-labels > :nth-child(19), .md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2), .md-typeset .tabbed-set > input:nth-child(20):checked ~ .tabbed-labels > :nth-child(20), .md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3), .md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4), .md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5), .md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6), .md-typeset .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7), .md-typeset .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8), .md-typeset .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > :nth-child(9) {
89+
color: #8315F9;
90+
border-bottom: 1px solid #8315F9;
91+
}
92+
.md-footer *, html .md-footer-meta.md-typeset a {
93+
color: rgb(111, 108, 121);
94+
}
95+
.repo-card {
96+
height: 100%;
97+
}
98+
.header-btn {
99+
text-align: center;
100+
}
101+
.header-btn, .sublist {
102+
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(217, 215, 226) 0px 0px 0px 1px, rgb(217, 215, 226) 0px 1px 2px 0px;
103+
}
104+
.header-btn:hover {
105+
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(217, 215, 226) 0px 0px 0px 1px, rgb(217, 215, 226) 0px 1.0001px 2.00013px -0.0000327245px, rgba(0, 0, 0, 0) 0px 0.000065449px 0.000130898px -0.000065449px;
106+
}
107+
.md-typeset .headerlink:hover, .md-typeset .headerlink:target {
108+
color: #8315F9;
109+
}
110+
.md-typeset h1, .md-header__title {
111+
color: black;
112+
font-weight: 800;
113+
}
114+
.md-typeset h1 {
115+
font-weight: normal;
116+
margin-bottom: 1rem;
117+
}
118+
body {
119+
background: linear-gradient(to left bottom, rgb(243, 238, 255), rgb(255, 255, 255) 60%) no-repeat;
120+
}
121+
122+
/* .md-nav__link:has([tabindex=""]) {
123+
text-transform: uppercase;
124+
} */
125+
126+
.header-list {
127+
display: flex;
128+
align-items: center;
129+
gap: 1rem;
130+
list-style: none;
131+
font-size: 0.75rem;
132+
justify-content: flex-end;
133+
}
134+
.md-nav__list label, .md-nav--secondary label {
135+
/* text-transform: uppercase; */
136+
color: rgb(29, 29, 31) !important;
137+
font-size: 0.7rem;
138+
margin-bottom: 0;
139+
}
140+
.md-nav--secondary label {
141+
margin-left: 0.5rem;
142+
}
143+
144+
.md-nav__link {
145+
padding: 0.25rem;
146+
padding-left: 0.5rem;
147+
padding-right: 0.5rem;
148+
}
149+
150+
.md-nav__link--active {
151+
background: rgb(243, 238, 255);
152+
border-radius: 6px;
153+
padding-top: 0.25rem;
154+
}
155+
156+
.md-tabs__item--active {
157+
color: var(--md-primary-fg-color);
158+
border-bottom: 2px solid var(--md-primary-fg-color);
159+
}
160+
161+
.md-nav--secondary .md-nav__title {
162+
background: transparent;
163+
box-shadow: none;
164+
}
165+
166+
.md-header, .md-tabs {
167+
color: rgb(111, 108, 121);
168+
background-color: transparent;
169+
}
170+
.md-header--shadow {
171+
background: linear-gradient(to left bottom, rgb(243, 238, 255), rgb(255, 255, 255) 60%);
172+
box-shadow: none;
173+
border-bottom: 1px solid rgb(229, 231, 235);
174+
}
175+
176+
#item-logo {
177+
display: none;
178+
}
179+
.md-main__inner, .md-header__inner, .md-grid {
180+
max-width: 100%;
181+
}
182+
@media (max-width: 1200px) {
183+
.md-header__inner {
184+
display: flex;
185+
}
186+
.header-list {
187+
display: none;
188+
}
189+
#item-logo {
190+
display: block;
191+
}
192+
}
193+
.md-content {
194+
max-width: 40rem;
195+
margin: auto;
196+
}
197+
/* // if no md-sidebar--primary, make .md-content full width */
198+
.md-main__inner:has(.md-sidebar--primary[hidden]) .md-content {
199+
max-width: 100%;
200+
}
201+
.md-sidebar--primary {
202+
flex: 0 20%;
203+
}
204+
.md-tabs {
205+
border-bottom: 1px solid rgb(229, 231, 235);
206+
}
207+
.md-main__inner {
208+
padding-top: 1rem;
209+
margin-top: 0;
210+
}
211+
212+
body.dark {
213+
/* Dark theme */
214+
--md-text-color: #FFFFFF;
215+
--md-h2-color: #add8e6;
216+
}
217+
218+
body.light .md-content *, body.dark .md-content * {
219+
color: var(--md-text-color) !important;
220+
}
221+
222+
body[data-md-url$="/cookbooks/"] .md-sidebar--primary,
223+
body[data-md-url$="/cookbooks/"] .md-sidebar--secondary {
224+
display: none;
225+
}
226+
227+
body[data-md-url$="/cookbooks/"] .md-content {
228+
margin-left: 0;
229+
width: 100%;
230+
}
231+
232+
.md-main, nav .md-grid, .md-header__inner {
233+
max-width: 1600px;
234+
width: 100%;
235+
margin: auto;
236+
}
237+
.md-search__scrollwrap {
238+
width: 100% !important;
239+
}
240+
.md-nav--secondary .md-nav__title {
241+
position: initial !important;
242+
}
243+
244+
.md-header__title .md-ellipsis {
245+
overflow: initial !important;
246+
text-overflow: initial !important;
247+
}
248+
.md-search {
249+
flex-grow: 0;
250+
}

0 commit comments

Comments
 (0)