diff --git a/pages/_app.js b/pages/_app.js index 9cee751f..f007ac17 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -3,6 +3,7 @@ import { useEffect } from 'react' import 'animate.css' import '@/styles/globals.css' import '@/styles/nprogress.css' +import '@/styles/utility-patterns.css' // core styles shared by all of react-notion-x (required) import 'react-notion-x/src/styles.css' diff --git a/styles/globals.css b/styles/globals.css index fed2254d..79e490de 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -331,19 +331,4 @@ a.avatar-wrapper { column-count: 1; column-gap: .5rem; } - } - - -/* Buttons */ -.btn, -.btn-sm { - @apply font-medium inline-flex items-center justify-center border border-transparent rounded leading-snug transition duration-150 ease-in-out; -} - -.btn { - @apply px-8 py-3 shadow-lg; -} - -.btn-sm { - @apply px-4 py-2 shadow; -} \ No newline at end of file + } \ No newline at end of file diff --git a/styles/utility-patterns.css b/styles/utility-patterns.css new file mode 100644 index 00000000..383a3384 --- /dev/null +++ b/styles/utility-patterns.css @@ -0,0 +1,79 @@ +/* Typography */ +.h1 { + @apply text-4xl font-extrabold leading-tight tracking-tighter; +} + +.h2 { + @apply text-3xl font-extrabold leading-tight tracking-tighter; +} + +.h3 { + @apply text-3xl font-bold leading-tight; +} + +.h4 { + @apply text-2xl font-bold leading-snug tracking-tight; +} + +@screen md { + .h1 { + @apply text-5xl; + } + + .h2 { + @apply text-4xl; + } +} + +/* Buttons */ +.btn, +.btn-sm { + @apply font-medium inline-flex items-center justify-center border border-transparent rounded leading-snug transition duration-150 ease-in-out; +} + +.btn { + @apply px-8 py-3 shadow-lg; +} + +.btn-sm { + @apply px-4 py-2 shadow; +} + +/* Forms */ +.form-input, +.form-textarea, +.form-multiselect, +.form-select, +.form-checkbox, +.form-radio { + @apply bg-white border border-gray-300 focus:border-gray-500; +} + +.form-input, +.form-textarea, +.form-multiselect, +.form-select, +.form-checkbox { + @apply rounded; +} + +.form-input, +.form-textarea, +.form-multiselect, +.form-select { + @apply py-3 px-4; +} + +.form-input, +.form-textarea { + @apply placeholder-gray-500; +} + +.form-select { + @apply pr-10; +} + +.form-checkbox, +.form-radio { + @apply text-gray-800 rounded-sm; +} \ No newline at end of file diff --git a/themes/blank/index.js b/themes/blank/index.js index 92d3d9af..39b402b0 100644 --- a/themes/blank/index.js +++ b/themes/blank/index.js @@ -1,3 +1,4 @@ +/* eslint-disable */ /** * 这是一个空白主题，方便您用作创建新主题时的模板，从而开发出您自己喜欢的主题 @@ -5,7 +6,6 @@ * 2. 内容大部分是在此文件中写死，notion数据从props参数中传进来 * 3. 您可在此网站找到更多喜欢的组件 https://www.tailwind-kit.com/ */ -/* eslint-disable*/ import BLOG from '@/blog.config' import DarkModeButton from '@/components/DarkModeButton' import NotionPage from '@/components/NotionPage' @@ -17,7 +17,6 @@ import { useState } from 'react' */ const THEME_CONFIG = { THEME: 'blank' } - /** * 布局框架 * 作为一个基础框架使用，定义了整个主题每个页面必备的顶部导航栏和页脚 @@ -26,8 +25,8 @@ const THEME_CONFIG = { THEME: 'blank' } * @returns */ const LayoutBase = (props) => { - const { siteInfo, children } = props - return
+ const { siteInfo, children } = props + return
{/* 顶部导航栏 */} @@ -41,27 +40,19 @@ const LayoutBase = (props) => {
} - /** * 首页布局 * @param {*} props * @returns */ const LayoutIndex = (props) => { - const { siteInfo } = props - return ( + const { siteInfo } = props + return ( - - - - - - - - ) + ) } /** @@ -70,8 +61,9 @@ const LayoutIndex = (props) => { * @returns */ const LayoutSlug = (props) => -
-
+
+ +
@@ -85,87 +77,12 @@ const LayoutPage = (props) => const LayoutTag = (props) => const LayoutTagIndex = (props) => -/** - * 问题留言区域 - * @param {*} props - * @returns - */ -const FAQ = (props) => { - return
-

- FAQs -

- -
-} - /** * 文章列表 */ const PostList = (props) => { - const { latestPosts } = props - return
+ const { latestPosts } = props + return

@@ -195,7 +112,7 @@ const PostList = (props) => {

{post.tags?.map(t => { - return
+ return
#{t}
})} @@ -209,546 +126,17 @@ const PostList = (props) => {
} -/** - * 产品大图 - */ -const ProductInfo = () => { - return
-
-
- - -

- Be on - - Time - -

-

- 这是一个空主题，很多数据在页面中写死，您可以在代码的 /themes/blank 中个性化您的页面 -

-
- - Get started - - - Read more - -
-
- -
-
- -} - -/** - * 多张对比的价格卡 - */ -const PriceCardMulti = () => { - return
-
- -
-

- Entreprise -

-

- $0 - - / month - -

-

- For most businesses that want to optimize web queries. -

-
    -
  • - - - - - All illimited components -
    • -
  • - - - - - Own custom Tailwind styles -
    • -
  • - - - - - Unlimited Templates -
    • -
  • - - - - - Free premium dashboard -
    • -
  • - - - - - Best ranking -
    • -
  • - - - - - Prenium svg -
    • -
  • - - - - - My wife -
    • -
- -
- - - -
-

- Essential -

-

- For the basics tailwind -

-

- $99 -

-

- Per agent per month -

- -
    -
  • - - - - - All illimited components Tailwind -
    • -
  • - - - - - Own analitycs templates -
    • -
  • - - - - - 24/24 support link -
    • -
- - -
    -
  • - - - - -
    - All free dashboard - - free plan - -
    -
    • -
  • - - - - -
    - Best ranking -
    -
    • -
  • - - - - -
    - Chocolate and meel -
    -
    • -
-
- - -
-
-

- Pro -

-

- $99 - - month - -

-
-

- Plan include : -

-
    -
  • - - - - - All illimited components -
    • -
  • - - - - - Own custom Tailwind styles -
    • -
  • - - - - - Unlimited Templates -
    • -
  • - - - - - Free premium dashboard -
    • -
  • - - - - - Best ranking -
    • -
  • - - - - - Prenium svg -
    • -
  • - - - - - My wife -
    • -
- -
- - - - -
-
-} - - -/** - * 价格卡 单个 - * @returns - */ -const PriceCardOne = () => { - return
-
-
-

- Zero Commission -

-

- Start selling online for free with all the features you need to launch your local delivery and pick-up service, nothing more. We don't charge commission or monthly fees, keep all your margin. -

-
-
-

- What's included -

-
-
-
-
    -
  • -
    - - - - -
    -

    - All illimited components -

    -
    • -
  • -
    - - - - -
    -

    - Own custom Tailwind styles -

    -
    • -
  • -
    - - - - -
    -

    - Unlimited Templates -

    -
    • -
  • -
    - - - - -
    -

    - Free premium dashboard -

    -
    • -
  • -
    - - - - -
    -

    - Best ranking -

    -
    • -
  • -
    - - - - -
    -

    - Prenium svg -

    -
    • -
  • -
    - - - - -
    -

    - My wife -

    -
    • -
-
-
-
-

- & What's not -

-
-
    -
  • -
    - - - - -
    -

    - No Contracts. No monthly, setup, or additional payment processor fees -

    -
    • -
  • -
    - - - - -
    -

    - No 2-week on-boarding, it takes 20 minutes! -

    -
    • -
-
-
-
-

- Free -

-
- - $0/mo - -
-

- - Card payments: - - - 2.9% + 20p per transaction - -

-
-
- -
-
-
-
-
- -} - -/** - * 一个网页抹胸信息 - * @returns - */ -const BandeauInfo = () => { - - return
-
-

- Used by leading architects, home builders renovators. -

-

- Feel confident in choosing the best energy assessor for your energy rating. -

-
-
-
-

- 119 -

-

- Energy raters -

-
-
-

- 6 -

-

- Quotes on average -

-
-
-

- 24 hours -

-

- Average turnaround -

-
-
-
- -
-
- -} - - -/** - * 团队介绍 - * @returns - */ -const Teams = () => { - - return
- -
- Avatar Jacky -
-

- Jacky Pout -

-

- FullStack Engineer -

-

- He love caramel and he hate PHP -

- - Jacky@poute.com - -
-
-
- Avatar Damien Marley -
-

- Damien Marley -

-

- CEO -

-

- He's fun and listen everyday Bob Marley -

- - Damien@marley.com - -
-
-
- -} - /** * 导航栏 * @param {*} param0 * @returns */ const NavBar = ({ siteInfo }) => { - const [showMenu, setShowMenu] = useState(false) - const toggleMenu = () => { - setShowMenu(!showMenu) - } - return
+ const [showMenu, setShowMenu] = useState(false) + const toggleMenu = () => { + setShowMenu(!showMenu) + } + return