gitea-mirror/blog
1
0
Fork 0
mirror of https://gitea.com/gitea/blog.git synced 2024-06-02 00:11:23 +05:30
Code Issues Packages Projects Releases Wiki Activity

style adujustments

Browse source
This commit is contained in:
HesterG 2023-07-14 10:14:33 +08:00
parent 6509901dac
commit 8acf58e28d
8 changed files with 50 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/ActionCard/index.js
View file

@ -3,22 +3,8 @@ import React from "react"
import style from "./styles.module.css"
// type Props = {
// skin?: "default" | "primary"
// title: React.ReactNode
// description: React.ReactNode
// icon?: React.ReactNode
// className?: string
// }
export const ActionCard = ({
skin = "default",
icon,
title,
description,
children,
className,
}) => (
// skin?: "default" | "primary"
export const ActionCard = ({ skin = "default", icon, title, description, children, className }) => (
<div
className={clsx(style.root, className, {
[style.skinPrimary]: skin === "primary",

6
src/components/ActionFooter/index.js
View file

@ -5,8 +5,6 @@ import SubscribeIcon from "./subscribeIcon.svg"
import Subscribe from "../Subscribe"
import React from "react"
import SvgImage from "../SvgImage"
import Button from "../Button"
import styles from "./styles.module.css"
export const ActionFooter = () => (
<div className={footerCss.cards}>
@ -18,7 +16,7 @@ export const ActionFooter = () => (
/>
}
title="Join our developer community"
description="Gitea is open source. Follow us on Twitter, star our GitHub repo, and join our developer community on Discord!"
description="Gitea is open source. Star our GitHub repo, and join our developer community on Discord!"
>
<a
className={footerCss.card__link}
@ -46,7 +44,7 @@ export const ActionFooter = () => (
>
<Subscribe
placeholder="Email address"
submitButtonVariant="secondary"
submitButtonText = "Subscribe"
/>
</ActionCard>
</div>

27
src/components/ActionFooter/styles.module.css
View file

@ -1,27 +0,0 @@
.loader {
position: absolute;
width: 20px;
height: 20px;
}
.loader:after {
content: " ";
display: block;
width: 14px;
height: 14px;
margin: 0;
border-radius: 50%;
border: 3px solid transparent;
border-color: var(--ifm-color-white) transparent var(--ifm-color-white)
transparent;
animation: loader 1.2s linear infinite;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

2
src/components/Button/styles.module.css
View file

@ -7,7 +7,7 @@
border: none;
border-radius: calc(var(--ifm-global-border-radius) / 2);
font-weight: var(--ifm-font-weight-bold);
font-size: 16px;
font-size: var(--font-size-normal);
transition: background-color 100ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

4
src/components/Input/styles.module.css
View file

@ -7,13 +7,13 @@
border: none;
background: var(--palette-rock);
font-size: var(--font-size-normal);
color: var(--palette-white);
color: var(--ifm-color-white);
border: 2px solid transparent;
}
.input:focus {
outline: none;
border-color: var(--palette-white);
border-color: var(--ifm-color-white);
}
.input:placeholder {

15
src/components/Subscribe/index.js
View file

@ -1,29 +1,20 @@
import React, { useState } from "react"
import { CSSTransition, TransitionGroup } from "react-transition-group"
import Input from "../Input"
import Button from "../Button"
import style from "./style.module.css"
import clsx from "clsx"
const emailPattern = "^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$"
const Spinner = () => <span className={style.loader} />
const Subscribe = ({
placeholder = "Email address",
submitButtonText = "Subscribe",
className,
classNameInputs,
}) => {
const Subscribe = ({placeholder, submitButtonText, className, classNameInputs}) => {
const [loading, setLoading] = useState(false)
const [sent, setSent] = useState(false)
const onSubmit = (event) => {
const onSubmit = () => {
setLoading(true)
}
return (
<form method="post" action="https://list.gitea.com/subscription/form" className={clsx(style.root, className)} onSubmit={onSubmit}>
<form method="post" action="https://list.gitea.com/subscription/form" className={clsx(style.root, className)} onSubmit={() => {setLoading(true)}}>
<div className={clsx(style.inputs, classNameInputs)}>
<input type="hidden" name="nonce" />
<input className={style.checkbox} id="2aae7" type="checkbox" name="l" value="2aae7a49-b6b9-4aa3-b35a-32c9aeace57b" checked readOnly/>

4
src/components/Subscribe/style.module.css
View file

@ -22,7 +22,7 @@
padding: 1rem;
font-size: var(--font-size-small);
width: 100%;
background-color: var(--theme-card-secondary-bg-color);
background-color: var(--theme-input-bg-color);
}
.checkbox {
@ -57,7 +57,7 @@
}
.success {
font-size: 17px;
font-size: var(--font-size-large);
font-weight: var(--ifm-font-weight-bold);
}

54
src/css/custom.css
View file

@ -6,6 +6,25 @@
/* You can override the default Infima variables here. */
:root {
--font-size-small: 15px;
--font-size-normal: 16px;
--font-size-large: 17px;
--font-size-big-1: 22px;
--font-size-big-2: 24px;
--font-size-big-3: 32px;
--font-size-big-4: 46px;
--font-size-big-5: 64px;
--palette-dark-10: rgba(0, 0, 0, 0.1);
--palette-dark-20: rgba(0, 0, 0, 0.2);
--palette-dark-30: rgba(0, 0, 0, 0.3);
--palette-dark-40: rgba(0, 0, 0, 0.4);
--palette-dark-60: rgba(0, 0, 0, 0.6);
--palette-dark-80: rgba(0, 0, 0, 0.8);
--palette-white-10: rgba(255, 255, 255, 0.1);
--palette-white-20: rgba(255, 255, 255, 0.1);
--palette-charade: #21222c;
--palette-rock: #262833;
--palette-pale-blue: #b1b5d3;
--ifm-color-primary: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
@ -15,12 +34,12 @@
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--ifm-global-border-radius: 8px;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--docusaurus-highlighted-code-line-bg: var(--palette-dark-10);
--theme-card-bg-color: #f0f1f5;
--theme-card-bg-color-hover: rgb(225, 227, 235);
--theme-card-border-color: #b7b9c3;
--theme-card-text-color: #21222c;
--theme-card-title-color: #21222c;
--theme-card-text-color: var(--palette-charade);
--theme-card-title-color: var(--palette-charade);
--theme-attention-card-bg-color: #f0f1f5;
--theme-attention-card-text-color: var(--ifm-color-white);
--theme-input-text-color: #555b88;
@ -28,16 +47,18 @@
--theme-button-primary-background-color: var(--ifm-color-primary);
--theme-button-primary-text-color: var(--ifm-color-white);
--theme-button-primary-hover-background-color: var(--ifm-color-primary-darker);
--theme-button-secondary-background-color: rgba(0, 0, 0, 0.1);
--theme-button-secondary-text-color: #21222c;
--theme-button-secondary-hover-background-color: rgba(0, 0, 0, 0.3);
--theme-button-tertiary-background-color: rgba(0, 0, 0, 0.3);
--theme-button-tertiary-text-color: rgba(0, 0, 0, 0.8);
--theme-button-tertiary-hover-background-color: rgba(0, 0, 0, 0.4);
--theme-button-secondary-background-color: var(--palette-dark-10);
--theme-button-secondary-text-color: var(--palette-charade);
--theme-button-secondary-hover-background-color: var(--palette-dark-30);
--theme-button-tertiary-background-color: var(--palette-dark-30);
--theme-button-tertiary-text-color: var(--palette-dark-80);
--theme-button-tertiary-hover-background-color: var(--palette-dark-40);
--theme-input-bg-color: #f0f1f5;
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--palette-gray: #4b4e5d;
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
@ -45,25 +66,26 @@
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
--docusaurus-highlighted-code-line-bg: var(--palette-dark-30);
--theme-card-text-color: var(--ifm-color-white);
--theme-card-title-color: var(--ifm-color-white);
--theme-card-bg-color: #262833;
--theme-card-bg-color: var(--palette-rock);
--theme-card-bg-color-hover: rgb(47, 49, 63);
--theme-card-border-color: #51535f;
--theme-card-border-radius: 8px;
--theme-attention-card-bg-color: var(--ifm-color-gray-200);
--theme-attention-card-bg-color: var(--palette-gray);
--theme-input-bg-color: #44475a;
--theme-input-text-color: #b1b5d3;
--theme-card-secondary-bg-color: #21222c;
--theme-card-secondary-bg-color: var(--palette-charade);
--theme-button-primary-background-color: var(--ifm-color-primary);
--theme-button-primary-text-color: var(--ifm-color-white);
--theme-button-primary-hover-background-color: var(--ifm-color-primary-darker);
--theme-button-secondary-background-color: var(--ifm-color-white);
--theme-button-secondary-text-color: #21222c;
--theme-button-secondary-text-color: var(--palette-charade);
--theme-button-secondary-hover-background-color: #d9d9d9;
--theme-button-tertiary-background-color: rgba(255, 255, 255, 0.1);
--theme-button-tertiary-background-color: var(--palette-white-10);
--theme-button-tertiary-text-color: var(--ifm-color-white);
--theme-button-tertiary-hover-background-color: rgba(255, 255, 255, 0.2)
--theme-button-tertiary-hover-background-color: var(--palette-white-20);
}
.internal-href [class*='iconExternalLink'] {