diff --git a/public/splash-logo.webp b/public/splash-logo.webp new file mode 100644 index 0000000..6e6e4bc Binary files /dev/null and b/public/splash-logo.webp differ diff --git a/src/content/docs/index.mdx b/src/content/docs/syntax.mdx similarity index 100% rename from src/content/docs/index.mdx rename to src/content/docs/syntax.mdx diff --git a/src/layouts/Document.astro b/src/layouts/Document.astro index 3aaea56..0d6a9ea 100644 --- a/src/layouts/Document.astro +++ b/src/layouts/Document.astro @@ -17,6 +17,7 @@ import Header from '@components/global/Header.astro' import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro"; // Styles +import "@styles/index.scss"; import "@styles/feelback.css"; --- @@ -79,118 +80,6 @@ import "@styles/feelback.css"; {REVERT_LAYOUT ? diff --git a/src/layouts/Splash.astro b/src/layouts/Splash.astro index fc47974..0801707 100644 --- a/src/layouts/Splash.astro +++ b/src/layouts/Splash.astro @@ -9,7 +9,7 @@ import { } from '@utils/GetConfig' // Properties -const { Title, Feedback, Feelback } = Astro.props +const { frontmatter } = Astro.props // Components import Head from '@components/global/Head.astro' @@ -17,6 +17,8 @@ import Header from '@components/global/Header.astro' import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro"; // Styles +import "@styles/index.scss"; +import "@styles/splash.scss"; import "@styles/feelback.css"; --- @@ -24,8 +26,18 @@ import "@styles/feelback.css";
+
+
+

{frontmatter.Title}

+

{frontmatter.Description}

+
+ {frontmatter.PrimaryText} + {frontmatter.SecondaryText} +
+
+ +
-

{Title}

@@ -41,100 +53,4 @@ import "@styles/feelback.css"; }
- - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/pages/index.mdx b/src/pages/index.mdx index 42f99d5..2cd9b10 100644 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -1,11 +1,13 @@ --- layout: "@layouts/Splash.astro" +Title: "Welcome to ButterflyVu" +Banner: "/splash-logo.webp" +PrimaryText: "Primary" +SecondaryText: "Secondary" +PrimaryLink: "#" +SecondaryLink: "#" --- -# Welcome to ButterlyVu - -![](https://md.sudovanilla.org/images/pexels-pixabay-326055.jpg) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. A cras semper auctor neque vitae tempus quam. Tempus quam pellentesque nec nam aliquam. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Quis commodo odio aenean sed adipiscing diam. Pharetra et ultrices neque ornare aenean euismod elementum. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Pharetra magna ac placerat vestibulum lectus mauris. Enim lobortis scelerisque fermentum dui. Enim facilisis gravida neque convallis. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Sit amet justo donec enim diam vulputate ut pharetra sit. Fusce ut placerat orci nulla pellentesque dignissim. Lectus vestibulum mattis ullamcorper velit. Pellentesque elit eget gravida cum sociis natoque penatibus. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Interdum varius sit amet mattis vulputate. Egestas integer eget aliquet nibh. diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000..f709875 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,112 @@ +body { + max-width: 1200px; + margin: auto; + font-family: Arial, Helvetica, sans-serif; + background: #0f0f0f; + color: white; +} + +a { + color: white; + text-decoration: underline; +} + +table { + font-family: Arial, Helvetica, sans-serif; + border-collapse: collapse; + width: 100%; + td, th { + border: 1px solid #111111; + padding: 8px; + } + tr:nth-child(even){background-color: #323232;} + tr:nth-child(even){background-color: #323232;} + tr:hover {background-color: #454545;} + th { + padding-top: 12px; + padding-bottom: 12px; + text-align: left; + background-color: #070707; + color: white; + } +} + +blockquote { + margin: 0px; + background: #323232; + border-radius: 4px; + padding: 12px 24px; + border-left: 4px white solid; + p { + margin: 0px; + } +} + +header { + background: #232323; + width: 100%; + position: absolute; + top: 0px; + left: 0px; + z-index: 1; + .header-content { + max-width: 1200px; + margin: auto; + } +} + +.page { + position: relative; + min-height: 100vh; + .content { + padding-top: 90px; + display: flex; + flex-direction: row; + gap: 24px; + padding-bottom: 80px; + .sidebar { + min-width: 250px; + display: flex; + flex-direction: column; + gap: 12px; + a { + text-decoration: none; + font-size: 14px; + color: #898989; + } + } + .document { + background: #232323; + border-radius: 4px; + padding: 12px 24px; + height: max-content; + img { + width: 100%; + border-radius: 6px; + } + .feelback-q { + justify-content: center; + padding: 24px 0px; + svg { + color: white; + } + .feelback-btn.active { + background: white; + border-radius: 3rem; + svg { + color: black; + } + } + } + } + } + .footer { + position: absolute; + padding-bottom: 24px; + bottom: 0; + width: 100%; + height: 2.5rem; + display: flex; + justify-content: space-between; + } +} diff --git a/src/styles/splash.scss b/src/styles/splash.scss new file mode 100644 index 0000000..f21c084 --- /dev/null +++ b/src/styles/splash.scss @@ -0,0 +1,31 @@ +.content { + flex-direction: column !important; +} + +.splash { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + img { + width: 50%; + } + .splash-action { + display: flex; + gap: 6px; + a { + text-decoration: none; + padding: 12px 26px; + background: white; + color: black; + border-radius: 3rem; + border: 1px white solid; + &.button-secondary { + background: transparent; + color: white; + border: 2px white solid; + } + } + } +} \ No newline at end of file