Skip to content

Commit e766a53

Browse files
DarmodyDarmody
committed
fix styles
1 parent af96fc8 commit e766a53

File tree

15 files changed

+319
-49
lines changed

15 files changed

+319
-49
lines changed

‎i18n/en/code.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎src/css/custom.css

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
--ifm-heading-margin-top: 0;
2525
--ifm-heading-margin-bottom: 0;
2626
--ifm-menu-color: rgba(146, 146, 146, 1);
27+
--ifm-link-hover-color: rgb(146, 146, 146);
2728
}
2829

2930
@media screen and (max-width: 996px) {
@@ -209,6 +210,13 @@ html {
209210
* navbar
210211
*/
211212

213+
@media screen and (max-width: 1364px) {
214+
.navbar__toggle {
215+
display: inherit;
216+
margin-right: 0;
217+
}
218+
}
219+
212220
.navbar__logo {
213221
margin-right: 0;
214222
}
@@ -226,10 +234,16 @@ html {
226234

227235
.navbar__item.dropdown {
228236
padding: 1rem;
229-
display: inline-block;
237+
display: inline-flex;
230238
white-space: nowrap;
231239
}
232240

241+
@media screen and (max-width: 1364px) {
242+
.navbar__item.dropdown {
243+
padding: 0.625rem;
244+
}
245+
}
246+
233247
.navbar__button {
234248
display: inline-flex;
235249
align-items: center;
@@ -242,6 +256,15 @@ html {
242256
font-weight: 400;
243257
line-height: 1.375rem;
244258
color: var(--ifm-color-primary-darker);
259+
transition: ease-in-out 150ms all;
260+
}
261+
262+
.navbar__button:hover,
263+
.navbar__button:focus-visible,
264+
.navbar__button:focus,
265+
.navbar__button:active {
266+
color: #fff;
267+
background: var(--ifm-color-primary-darker);
245268
}
246269

247270
@media screen and (max-width: 996px) {
@@ -296,6 +319,7 @@ html {
296319
}
297320

298321
.dropdown--right .dropdown__menu {
322+
top: calc(100% - var(--ifm-navbar-item-padding-vertical) + 1rem);
299323
right: 0.5rem;
300324
}
301325

@@ -404,10 +428,12 @@ a.sidebarItemLinkActive_node_modules-\@docusaurus-theme-classic-lib-theme-BlogSi
404428

405429
.pagination-nav__link--next .pagination-nav__label svg {
406430
margin-left: 0.5rem;
431+
margin-right: -0.44rem;
407432
}
408433

409434
.pagination-nav__link--prev .pagination-nav__label svg {
410435
margin-right: 0.5rem;
436+
margin-left: -0.44rem;
411437
transform: rotate(180deg);
412438
}
413439

‎src/pages/index.module.css

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ span.light {
8282
}
8383

8484
.p2 {
85-
font-size: 0.75rem;
86-
line-height: 1.25rem;
85+
font-size: 1.0625rem;
86+
line-height: 1.4375rem;
8787
}
8888
}
8989

@@ -99,12 +99,15 @@ span.light {
9999
font-weight: 400;
100100
line-height: 1.375rem;
101101
color: var(--ifm-color-primary-darker);
102-
102+
transition: ease-in-out 300ms all;
103103
}
104104

105-
.button.primary {
106-
background: var(--ifm-color-primary-darker);
105+
.button:hover,
106+
.button:active,
107+
.button:focus,
108+
.button:focus-visible {
107109
color: #fff;
110+
background: var(--ifm-color-primary-darker);
108111
}
109112

110113
@media screen and (max-width: 996px) {
@@ -123,7 +126,7 @@ span.light {
123126

124127
.toc {
125128
position: sticky;
126-
top: 0;
129+
top: calc(var(--ifm-navbar-height) + 1.5rem);
127130
padding: 0;
128131
display: flex;
129132
flex-direction: column;
@@ -388,6 +391,7 @@ span.light {
388391
}
389392

390393
.promptImg {
394+
max-width: 100%;
391395
width: 48.25rem;
392396
}
393397

@@ -433,12 +437,16 @@ span.light {
433437
color: var(--ifm-color-primary-darker);
434438
}
435439

436-
@media screen and (max-width: 996px) {
440+
@media screen and (max-width: 400px) {
437441
.promptImgLayout {
438442
position: relative;
439443
height: 21.3125rem;
440444
}
441445

446+
.promptImg {
447+
width: 100%;
448+
}
449+
442450
.promptForm {
443451
width: 15.8125rem;
444452
padding: 0.5rem;
@@ -583,6 +591,14 @@ a.blogLink:hover {
583591
margin-top: 2.5rem;
584592
}
585593

594+
@media screen and (max-width: 1364px) {
595+
.members {
596+
grid-template-columns: repeat(3, 1fr);
597+
gap: unset;
598+
margin-top: 1.25rem;
599+
}
600+
}
601+
586602
@media screen and (max-width: 996px) {
587603
.members {
588604
grid-template-columns: repeat(2, 1fr);
@@ -597,7 +613,7 @@ a.blogLink:hover {
597613
height: 20.875rem;
598614
}
599615

600-
@media screen and (max-width: 996px) {
616+
@media screen and (max-width: 1364px) {
601617
.memberItem {
602618
height: 15rem;
603619
}
@@ -608,7 +624,7 @@ a.blogLink:hover {
608624
border: 1px solid transparent;
609625
}
610626

611-
@media screen and (max-width: 996px) {
627+
@media screen and (max-width: 1364px) {
612628
.member {
613629
padding: 0.625rem;
614630
}
@@ -647,7 +663,7 @@ a.blogLink:hover {
647663
cursor: pointer;
648664
}
649665

650-
@media screen and (max-width: 996px) {
666+
@media screen and (max-width: 1364px) {
651667
.memberClose {
652668
font-size: 1.25rem;
653669
top: 0.625rem;
@@ -661,7 +677,7 @@ a.blogLink:hover {
661677
height: 13.25rem;
662678
}
663679

664-
@media screen and (max-width: 996px) {
680+
@media screen and (max-width: 1364px) {
665681
.memberAvatar {
666682
width: 8.8125rem;
667683
height: 8.8125rem;
@@ -672,7 +688,7 @@ a.blogLink:hover {
672688
margin-top: 1.25rem;
673689
}
674690

675-
@media screen and (max-width: 996px) {
691+
@media screen and (max-width: 1364px) {
676692
.memberDetails {
677693
margin-top: 1.25rem;
678694
}
@@ -685,7 +701,7 @@ a.blogLink:hover {
685701
color: var(--ifm-color-primary-darker);
686702
}
687703

688-
@media screen and (max-width: 996px) {
704+
@media screen and (max-width: 1364px) {
689705
.memberName {
690706
font-size: 1.5rem;
691707
line-height: 2rem;
@@ -700,7 +716,7 @@ a.blogLink:hover {
700716
text-wrap: nowrap;
701717
}
702718

703-
@media screen and (max-width: 996px) {
719+
@media screen and (max-width: 1364px) {
704720
.memberPosition {
705721
font-size: 1rem;
706722
line-height: 1.5rem;
@@ -717,7 +733,7 @@ a.blogLink:hover {
717733
border-top: 1px solid rgba(189, 189, 189, 1);
718734
}
719735

720-
@media screen and (max-width: 996px) {
736+
@media screen and (max-width: 1364px) {
721737
.memberExtra {
722738
margin-top: 0.625rem;
723739
font-size: 0.625rem;
@@ -753,7 +769,7 @@ a.blogLink:hover {
753769
margin-top: 2.5rem;
754770
}
755771

756-
@media screen and (max-width: 996px) {
772+
@media screen and (max-width: 1364px) {
757773
.partnersLayout {
758774
grid-template-columns: repeat(3, 1fr);
759775
gap: 1.375rem;

‎src/pages/index.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -740,10 +740,7 @@ function ContactUs() {
740740
Stay tuned for updates 📢 as we continue to innovate and move forward
741741
🚀.
742742
</motion.div>
743-
<motion.a
744-
{...whileInViewAnimation}
745-
className={clsx(styles.button, styles.primary)}
746-
>
743+
<motion.a {...whileInViewAnimation} className={styles.button}>
747744
<ArrowRight className={styles.buttonIcon} />
748745
<Translate>Get Start</Translate>
749746
</motion.a>

‎src/theme/Icon/Language/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ export default function LanguageWrapper(props) {
22
return (
33
<svg
44
className={props.className}
5-
width="16"
6-
height="16"
5+
width="1em"
6+
height="1em"
77
viewBox="0 0 24 24"
88
fill="none"
99
xmlns="http://www.w3.org/2000/svg"
@@ -12,19 +12,19 @@ export default function LanguageWrapper(props) {
1212
fillRule="evenodd"
1313
clipRule="evenodd"
1414
d="M2.5 12C2.5 6.75327 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75327 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12ZM12 3.5C7.30558 3.5 3.5 7.30556 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30556 16.6944 3.5 12 3.5Z"
15-
fill="#929292"
15+
fill="currentColor"
1616
/>
1717
<path
1818
fillRule="evenodd"
1919
clipRule="evenodd"
2020
d="M14.6001 3.66786C14.7132 3.54381 14.7611 3.36577 14.7114 3.19264C14.6351 2.92724 14.3582 2.77389 14.0928 2.85013C13.8055 2.93264 13.6939 3.17802 13.6532 3.30843C13.6089 3.4509 13.5972 3.61042 13.5972 3.75966C13.5972 4.06569 13.6483 4.47879 13.7387 4.98154C13.8217 5.44301 14.0013 5.77151 14.2399 6.0178C14.4333 6.21745 14.6589 6.35066 14.8115 6.4408C14.8331 6.45355 14.8533 6.46544 14.8716 6.47654C15.0429 6.57992 15.0973 6.63115 15.1278 6.68602C15.1539 6.73307 15.2025 6.85952 15.1506 7.1916C15.1017 7.50413 15.0117 7.59267 14.9675 7.62556C14.9027 7.67375 14.792 7.71054 14.5444 7.73397C14.4865 7.73944 14.4212 7.74357 14.35 7.74808C13.8914 7.77708 13.1835 7.82184 12.5837 8.34345C12.1698 8.70339 12.0491 9.18239 12.0293 9.61747C12.0133 9.96805 12.0618 10.3525 12.1042 10.6876C12.1121 10.7506 12.1199 10.812 12.1269 10.871C12.1754 11.277 12.1964 11.6014 12.1398 11.8649C12.0902 12.0955 11.9833 12.2739 11.7337 12.4132C11.4909 12.5487 11.2405 12.5581 10.9411 12.4695C10.6232 12.3754 10.2873 12.1812 9.91297 11.9423C9.85229 11.9035 9.78984 11.8631 9.72608 11.8218C9.42421 11.6262 9.09287 11.4115 8.78079 11.2713C8.39999 11.1001 7.90177 10.9706 7.4192 11.2336C7.0011 11.4615 6.77476 11.8319 6.64651 12.203C6.5219 12.5636 6.47561 12.9666 6.44274 13.3179C6.43596 13.3903 6.42974 13.4604 6.42371 13.5285C6.3985 13.8128 6.37653 14.0605 6.33081 14.2844C6.27401 14.5625 6.19758 14.7036 6.12039 14.774L6.4573 15.1434L6.12039 14.774C5.83008 15.0387 5.24062 15.1425 4.08564 14.6793C3.82934 14.5766 3.53825 14.701 3.43547 14.9573C3.33269 15.2136 3.45715 15.5047 3.71345 15.6075C4.9272 16.0942 6.04295 16.198 6.79421 15.5129C7.10762 15.2271 7.23988 14.8307 7.31059 14.4845C7.36883 14.1993 7.39686 13.88 7.42211 13.5926C7.42757 13.5304 7.43291 13.4696 7.43839 13.4111C7.4714 13.0583 7.51056 12.7643 7.59167 12.5296C7.66915 12.3054 7.76882 12.1819 7.89777 12.1116L7.89777 12.1116C7.96223 12.0765 8.08263 12.0538 8.37076 12.1833C8.60645 12.2893 8.85661 12.4509 9.15594 12.6443C9.2261 12.6896 9.29896 12.7367 9.37496 12.7852C9.74885 13.0238 10.1902 13.2901 10.6572 13.4284C11.1427 13.5721 11.6849 13.5857 12.2211 13.2864L12.2211 13.2864C12.7505 12.9909 13.0147 12.5532 13.1175 12.075C13.2132 11.6296 13.1676 11.1524 13.1199 10.7524C13.111 10.6784 13.1021 10.607 13.0935 10.538C13.0516 10.2019 13.0165 9.92002 13.0282 9.66302C13.0415 9.37165 13.1132 9.20819 13.2399 9.09804C13.567 8.81361 13.9069 8.78747 14.3675 8.75205C14.4534 8.74544 14.5435 8.73851 14.6386 8.72952C14.9083 8.704 15.2627 8.65234 15.5644 8.42782C15.8867 8.188 16.0646 7.81955 16.1386 7.34604C16.2096 6.8921 16.1762 6.51425 16.0021 6.20057C15.8322 5.89472 15.568 5.7288 15.3885 5.62044C15.3624 5.6047 15.3377 5.58992 15.3142 5.57586C15.1553 5.4807 15.052 5.41887 14.9581 5.32198C14.8682 5.22917 14.7735 5.08582 14.7229 4.80451L14.7229 4.80449C14.6352 4.31687 14.5972 3.9744 14.5972 3.75966C14.5972 3.72276 14.5984 3.69239 14.6001 3.66786Z"
21-
fill="#929292"
21+
fill="currentColor"
2222
/>
2323
<path
2424
fillRule="evenodd"
2525
clipRule="evenodd"
2626
d="M14.834 14.084C15.3807 13.5373 16.1976 13.2056 17.1582 13.5258C17.9889 13.8027 18.7922 14.3439 19.3695 14.7929C19.6626 15.0208 19.9066 15.2323 20.0777 15.3872C20.1634 15.4647 20.2312 15.5284 20.2781 15.5732C20.3016 15.5956 20.3199 15.6133 20.3326 15.6258L20.3474 15.6404L20.3516 15.6445L20.3529 15.6458C20.353 15.6459 20.3536 15.6466 20.0001 16.0001L20.3536 15.6466C20.5489 15.8418 20.5489 16.1584 20.3536 16.3537C20.1584 16.5489 19.8419 16.5489 19.6466 16.3538C19.6466 16.3537 19.6466 16.3538 19.6466 16.3538L19.6441 16.3512L19.6332 16.3405C19.6232 16.3307 19.6077 16.3157 19.5873 16.2962C19.5463 16.257 19.4852 16.1996 19.4068 16.1287C19.2498 15.9867 19.0251 15.7919 18.7556 15.5823C18.2079 15.1563 17.5112 14.6975 16.842 14.4744C16.3025 14.2946 15.8694 14.4629 15.5411 14.7912C15.191 15.1412 15 15.6414 15 16.0001C15 16.0244 15.0001 16.0486 15.0001 16.0725C15.0006 16.5026 15.0011 16.866 14.8223 17.2237C14.7304 17.4076 14.6023 17.5714 14.4499 17.7408C14.3003 17.907 14.105 18.1023 13.8632 18.3441L13.8536 18.3537C13.8473 18.3599 13.8069 18.4102 13.7957 18.5669C13.7849 18.7171 13.8059 18.9119 13.8602 19.1288C13.9726 19.5787 14.1906 19.9835 14.3536 20.1466C14.5489 20.3419 14.5489 20.6584 14.3536 20.8537C14.1583 21.0489 13.8417 21.0489 13.6465 20.8536C13.3096 20.5167 13.0276 19.9215 12.89 19.3714C12.8192 19.0882 12.7777 18.783 12.7982 18.4957C12.8183 18.215 12.9028 17.8902 13.1465 17.6465C13.4003 17.3927 13.5768 17.216 13.7066 17.0719C13.8354 16.9288 13.8948 16.8426 13.9278 16.7765C13.9891 16.654 14 16.5381 14 16.0001C14 15.3588 14.309 14.609 14.834 14.084Z"
27-
fill="#929292"
27+
fill="currentColor"
2828
/>
2929
</svg>
3030
);

‎src/theme/Navbar/Content/index.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
1111
import NavbarLogo from "@theme/Navbar/Logo";
1212
import NavbarSearch from "@theme/Navbar/Search";
1313
import styles from "./styles.module.css";
14+
import { useWindowSize } from "../useWindowSize";
1415
function useNavbarItems() {
1516
// TODO temporary casting until ThemeConfig type is improved
1617
return useThemeConfig().navbar.items;
@@ -45,6 +46,7 @@ function NavbarContentLayout({ left, right }) {
4546
</div>
4647
);
4748
}
49+
4850
export default function NavbarContent() {
4951
const mobileSidebar = useNavbarMobileSidebar();
5052
const items = useNavbarItems();
@@ -54,20 +56,25 @@ export default function NavbarContent() {
5456
[]
5557
);
5658
const searchBarItem = items.find((item) => item.type === "search");
59+
60+
const [windowSize] = useWindowSize();
61+
5762
return (
5863
<NavbarContentLayout
5964
left={
6065
// TODO stop hardcoding items?
6166
<>
62-
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
6367
<NavbarLogo />
64-
<NavbarItems items={leftItems} />
68+
<NavbarItems items={windowSize === "pad" ? [] : leftItems} />
6569
</>
6670
}
6771
right={
6872
// TODO stop hardcoding items?
6973
// Ask the user to add the respective navbar items => more flexible
7074
<>
75+
{(!mobileSidebar.disabled || windowSize === "pad") && (
76+
<NavbarMobileSidebarToggle />
77+
)}
7178
<NavbarItems items={finalRightItems} />
7279
<NavbarColorModeToggle className={styles.colorModeToggle} />
7380
{!searchBarItem && (

‎src/theme/Navbar/MobileSidebar/Header/index.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
3+
import {translate} from '@docusaurus/Translate';
4+
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
5+
import IconClose from '@theme/Icon/Close';
6+
import NavbarLogo from '@theme/Navbar/Logo';
7+
function CloseButton() {
8+
const mobileSidebar = useNavbarMobileSidebar();
9+
return (
10+
<button
11+
type="button"
12+
aria-label={translate({
13+
id: 'theme.docs.sidebar.closeSidebarButtonAriaLabel',
14+
message: 'Close navigation bar',
15+
description: 'The ARIA label for close button of mobile sidebar',
16+
})}
17+
className="clean-btn navbar-sidebar__close"
18+
onClick={() => mobileSidebar.toggle()}>
19+
<IconClose color="var(--ifm-color-emphasis-600)" />
20+
</button>
21+
);
22+
}
23+
export default function NavbarMobileSidebarHeader() {
24+
return (
25+
<div className="navbar-sidebar__brand">
26+
<NavbarLogo />
27+
<NavbarColorModeToggle className="margin-right--md" />
28+
<CloseButton />
29+
</div>
30+
);
31+
}

‎src/theme/Navbar/MobileSidebar/Layout/index.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
4+
export default function NavbarMobileSidebarLayout({
5+
header,
6+
primaryMenu,
7+
secondaryMenu,
8+
}) {
9+
const {shown: secondaryMenuShown} = useNavbarSecondaryMenu();
10+
return (
11+
<div className="navbar-sidebar">
12+
{header}
13+
<div
14+
className={clsx('navbar-sidebar__items', {
15+
'navbar-sidebar__items--show-secondary': secondaryMenuShown,
16+
})}>
17+
<div className="navbar-sidebar__item menu">{primaryMenu}</div>
18+
<div className="navbar-sidebar__item menu">{secondaryMenu}</div>
19+
</div>
20+
</div>
21+
);
22+
}

0 commit comments

Comments
 (0)