update
This commit is contained in:
parent
5316df8937
commit
67a1de90d2
7 changed files with 165 additions and 215 deletions
BIN
public/splash-logo.webp
Normal file
BIN
public/splash-logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
|
|
@ -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";
|
|||
|
||||
<!-- Style is temporary here -->
|
||||
<style is:global lang="scss">
|
||||
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: grid;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{REVERT_LAYOUT ?
|
||||
|
|
|
|||
|
|
@ -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";
|
|||
<Header/>
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<div class="splash">
|
||||
<div class="splash-content">
|
||||
<h1>{frontmatter.Title}</h1>
|
||||
<p>{frontmatter.Description}</p>
|
||||
<div class="splash-action">
|
||||
<a href={frontmatter.PrimaryLink} class="button">{frontmatter.PrimaryText}</a>
|
||||
<a href={frontmatter.SecondaryLink} class="button-secondary">{frontmatter.SecondaryText}</a>
|
||||
</div>
|
||||
</div>
|
||||
<img src={frontmatter.Banner}/>
|
||||
</div>
|
||||
<div class="document">
|
||||
<h1>{Title}</h1>
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,100 +53,4 @@ import "@styles/feelback.css";
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Style is temporary here -->
|
||||
<style is:global lang="scss">
|
||||
body {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background: #0f0f0f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
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: grid;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
|
|
|||
112
src/styles/index.scss
Normal file
112
src/styles/index.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
31
src/styles/splash.scss
Normal file
31
src/styles/splash.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue