Add subscription and community components (#47)

Close #46

Same as those in [blog](https://gitea.com/gitea/blog/pulls/272), but for docs and api
Ejected DocPage (unsafe to eject) and ApiDoc (safe to eject) for layout changes

![Screen Shot 2023-07-17 at 15.32.29](/attachments/74f992c7-b60d-4d71-bb50-8c085e6783fe)![Screen Shot 2023-07-17 at 15.32.40](/attachments/0df35cba-0797-4f21-abbe-bb61736c1e1f)

Screenshots

![Screen Shot 2023-07-17 at 15.27.29](/attachments/39e09cee-5043-4349-aaaa-7ab585aefbc4)![Screen Shot 2023-07-17 at 15.27.36](/attachments/396a9ae1-bbae-42b5-b1ab-c4158a2be78d)![Screen Shot 2023-07-17 at 15.27.53](/attachments/e12a35eb-625c-4950-960e-61226eda4ad4)![Screen Shot 2023-07-17 at 15.28.11](/attachments/578bd742-8a8b-4324-82d4-b9dc47d7f511)![Screen Shot 2023-07-17 at 15.28.19](/attachments/f304bb80-c6cb-4af4-b16f-b19fa2099ba5)

Co-authored-by: techknowlogick <techknowlogick@noreply.gitea.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Reviewed-on: https://gitea.com/gitea/gitea-docusaurus/pulls/47
Co-authored-by: HesterG <hestergong@gmail.com>
Co-committed-by: HesterG <hestergong@gmail.com>
This commit is contained in:
HesterG
2023-07-21 10:57:22 +00:00
committed by Lunny Xiao
parent c77d0e0e34
commit 02b0ebc9e1
22 changed files with 699 additions and 3 deletions

View File

@@ -0,0 +1,22 @@
import clsx from "clsx";
import React from "react";
import style from "./styles.module.css";
// skin?: "default" | "primary"
export const ActionCard = ({ skin = "default", icon, title, description, svgBackgroundColor, children, className }) => {
const styles = { background: svgBackgroundColor};
return (
<div
className={clsx(style.root, className, {
[style.skinPrimary]: skin === "primary",
})}
>
<div className={style.icon} style={styles}>{icon}</div>
<h3 className={style.title}>{title}</h3>
<p className={style.description}>{description}</p>
<div className={style.content}>{children}</div>
</div>
)
}
export default ActionCard

View File

@@ -0,0 +1,53 @@
.root {
padding: 2rem;
border-radius: 16px;
background: var(--theme-attention-card-bg-color);
}
.title {
margin-top: 1rem;
margin-bottom: 1rem;
font-size: var(--font-size-big-1);
font-weight: var(--ifm-font-weight-bold);
}
.description {
font-size: var(--font-size-large);
}
@media screen and (min-width: 880px) {
.root {
padding: 2rem;
}
.title {
font-size: 1.2rem;
}
}
.content {
display: flex;
flex: 1;
}
.skinPrimary {
background: var(--ifm-color-primary-lighter);
}
[data-theme='dark'] .skinPrimary {
background: var(--ifm-color-primary-darker);
}
.skinPrimary .title,
.skinPrimary .description {
color: var(--theme-attention-card-text-color);
}
.icon {
display: flex;
align-items: center;
justify-content: center;
height: 76px;
width: 76px;
border-radius: 50%;
}