waveterm/docusaurus-og
0
0
Fork 0
mirror of https://github.com/wavetermdev/docusaurus-og.git synced 2026-08-05 13:46:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #44 from acid-info/amir-mobile

Browse Source 
closes #42
This commit is contained in:
amir houieh
2022-10-09 14:51:09 +02:00
committed by GitHub
parent b8a3e7eea2 7ecd197a86
commit 5923abfa03
9 changed files with 153 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docusaurus.config.js
+8 -9
View File
@@ -37,16 +37,15 @@ const config = {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
// editUrl: '',
},
// blog: {
// showReadingTime: true,
// // Please change this to your repo.
// // Remove this to remove the "edit this page" links.
// editUrl:
// 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
// },
theme: {
customCss: require.resolve('./src/css/custom.scss'),
},
src/components/mdx/ExternalReferenceCard/ExternalReferenceCard.tsx
+2 -2
View File
@@ -34,8 +34,8 @@ export const ExternalReferenceCard = (props: TProps): JSX.Element => {
<div className={clsx('alert', styles.exref)}>
<div className={styles.exrefContainer}>
<div>{icon}</div>
<div>{children}</div>
<div>
<div className={styles.exrefText}>{children}</div>
<div className={styles.exrefButton}>
<LinkButtonWithIcon
icon={<IconArrowRightCircle />}
linkProps={{ href: linkUrl, target: '_black' }}
src/components/mdx/ExternalReferenceCard/style.module.scss
+25
View File
@@ -16,3 +16,28 @@
}
}
}
@media (max-width: 576px) {
.exrefContainer {
flex-direction: column;
align-items: flex-start !important;
> *:first-child {
width: 30px;
}
> *:first-child svg {
width: 100%;
height: 100%;
opacity: 0.5 !important;
}
.exrefText {
font-size: var(--ifm-h3-font-size);
padding-right: 40px;
margin-bottom: calc(2 * var(--ifm-paragraph-margin-bottom));
}
.exrefButton {
width: 100%;
}
}
}
src/components/mdx/FeatureList/style.module.scss
+18 -2
View File
@@ -3,8 +3,8 @@
display: grid;
grid-auto-rows: 200px;
grid-template-columns: 1fr 1fr;
grid-column-gap: calc(0.7 * var(--ifm-global-spacing));
grid-row-gap: calc(0.6 * var(--ifm-global-spacing));
grid-column-gap: var(--ifm-spacing-horizontal);
grid-row-gap: var(--ifm-spacing-vertical);
&.n_1 > *:nth-child(n + 1),
&.n_3 > *:nth-child(n + 3) {
@@ -12,3 +12,19 @@
}
}
}
@media (max-width: 576px) {
.FeatureListContainer {
grid-template-columns: 1fr !important;
grid-auto-rows: calc(
90vw - calc(2 * var(--ifm-spacing-horizontal))
) !important;
> * {
grid-column: 1/1 !important;
}
h4 {
max-width: 170px;
}
}
}
src/components/mdx/Hero/Hero.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export const Hero = (props: TProps): JSX.Element => {
<div>
<div>
<h1 className={clsx('hero__title', styles.heroTitle)}>{title}</h1>
<p className={clsx('hero_subtitle', 'sub4', styles.heroSubtitle)}>
<p className={clsx('hero_subtitle', styles.heroSubtitle)}>
{subtitle}
</p>
</div>
src/components/mdx/Hero/style.module.scss
+22 -2
View File
@@ -1,7 +1,9 @@
.Hero {
.HeroContainer {
position: relative;
padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
padding: var(--ifm-alert-padding-horizontal)
var(--ifm-alert-padding-horizontal);
border-radius: var(--ifm-global-radius);
height: 320px;
@@ -25,8 +27,26 @@
.heroTitle {
margin: 0;
}
.heroSubtitle {
font-size: var(--ifm-h4-font-size);
color: var(--ifm-color-gray-400);
}
}
}
@media (max-width: 996px) {
.HeroContainer {
height: 420px !important;
}
button {
width: 100%;
}
.heroSubtitle {
font-size: var(--ifm-h3-font-size) !important;
line-height: 1.6rem;
margin-bottom: calc(1.5 * var(--ifm-paragraph-margin-bottom));
padding-right: 40px;
}
}
src/components/mdx/TeamList/style.module.scss
+30
View File
@@ -52,3 +52,33 @@
}
}
}
@media (max-width: 576px) {
.TeamListContainer {
grid-column-gap: calc(1 * var(--ifm-spacing-horizontal)) !important;
grid-row-gap: calc(1 * var(--ifm-spacing-vertical)) !important;
}
.memberCard {
grid-template-rows: 270px 110px !important;
grid-column-gap: calc(1 * var(--ifm-spacing-horizontal)) !important;
grid-row-gap: calc(1 * var(--ifm-spacing-vertical)) !important;
}
.memberCardCaption {
flex-direction: column !important;
gap: 10px !important;
.memberSocials {
height: 30px;
gap: 16px !important;
opacity: 0.5 !important;
a {
width: 25px;
svg {
width: 100%;
height: 100%;
}
}
}
}
}
src/css/custom.scss
+35
View File
@@ -37,6 +37,8 @@
--ifm-color-gray-800: #1a1a1a;
--ifm-color-gray-900: #151515;
--ifm-color-gray-1000: var(--ifm-color-black);
--ifm-font-color-base-inverse: var(--ifm-color-black);
/*Code block*/
--docusaurus-highlighted-code-line-bg: var(--ifm-color-gray-100);
@@ -47,6 +49,8 @@
--ifm-card-background-color: var(--ifm-color-gray-100) !important;
--ifm-alert-foreground-color: var(--ifm-color-gray-700);
--ifm-button-background-color: var(--ifm-color-white);
/*spacing and details*/
--ifm-global-border-width: 1px;
--ifm-global-radius: 0.6rem;
@@ -250,3 +254,34 @@ small {
.menu_src-theme-Navbar-Content-styles-module svg {
display: none;
}
.card {
padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
}
@media (max-width: 576px) {
:root {
--ifm-global-spacing: 0.5rem;
--ifm-spacing-vertical: var(--ifm-global-spacing);
--ifm-spacing-horizontal: var(--ifm-global-spacing);
--ifm-button-size-multiplier: 1.25;
--ifm-button-padding-horizontal: calc(
var(--ifm-button-size-multiplier) * var(--ifm-spacing-horizontal)
);
--ifm-button-padding-vertical: calc(
var(--ifm-button-size-multiplier) * var(--ifm-spacing-vertical)
);
--ifm-alert-padding-horizontal: calc(2 * var(--ifm-spacing-horizontal));
--ifm-alert-padding-vertical: calc(2 * var(--ifm-spacing-vertical));
}
.markdown > h2 {
--ifm-h2-font-size: 1.75rem;
}
.markdown h4 {
--ifm-h4-font-size: 1.25rem !important;
}
}
src/theme/Footer/Layout/style.module.scss
+12 -2
View File
@@ -64,8 +64,18 @@
}
}
@media (min-width: 997px) {
@media (max-width: 576px) {
.footerContentWrapper {
//max-width: 75% !important;
opacity: 0.5 !important;
}
.communityLinks {
gap: 20px !important;
a {
width: 30px;
}
svg {
width: 100% !important;
height: 100% !important;
}
}
}