Add splash to website
This commit is contained in:
Angelos Chalaris
BIN
assets/blob.png
Normal file
BIN
assets/blob.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
1
assets/leaves.svg
Normal file
1
assets/leaves.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
BIN
assets/leaves1.png
Normal file
BIN
assets/leaves1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
assets/leaves2.png
Normal file
BIN
assets/leaves2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
@ -14,6 +14,7 @@ import { getRawCodeBlocks as getCodeBlocks } from '../util';
|
||||
// Home page (splash and search)
|
||||
// ===================================================
|
||||
const IndexPage = props => {
|
||||
console.log(props);
|
||||
const snippets = props.data.snippetDataJson.data.map(snippet => ({
|
||||
title: snippet.title,
|
||||
html: props.data.allMarkdownRemark.edges.find(
|
||||
@ -52,15 +53,26 @@ const IndexPage = props => {
|
||||
meta={[{ name: `google-site-verification`, content: `ADD YOUR VERIFICATION CODE HERE` }]}
|
||||
/>
|
||||
<Shell withIcon={false} withTitle={false}>
|
||||
<img
|
||||
src={props.data.file.childImageSharp.original.src}
|
||||
alt='Logo'
|
||||
className='index-logo'
|
||||
/>
|
||||
<h1 className='index-title'>{props.data.site.siteMetadata.title}</h1>
|
||||
<p className='index-sub-title'>
|
||||
{props.data.site.siteMetadata.description}
|
||||
</p>
|
||||
<div className='splash'>
|
||||
<div className='splash-container'>
|
||||
<img className='splash-leaves' id='splash-leaves-1' src={props.data.leaves1.childImageSharp.original.src} alt='splash-leaves-1' />
|
||||
<img className='splash-leaves' id='splash-leaves-2' src={props.data.leaves2.childImageSharp.original.src} />
|
||||
<img id='splash-blob' src={props.data.blob.childImageSharp.original.src} alt='splash-blob' />
|
||||
<div className='splash-content'>
|
||||
<img
|
||||
src={props.data.file.childImageSharp.original.src} alt='Logo' className='splash-logo'
|
||||
/>
|
||||
<h1 className='splash-title'
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `${props.data.site.siteMetadata.title.replace('CSS','<strong>CSS</strong>')}`
|
||||
}}
|
||||
/>
|
||||
<p className='splash-sub-title'>
|
||||
{props.data.site.siteMetadata.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Search
|
||||
setSearchQuery={setSearchQuery}
|
||||
defaultValue={props.searchQuery}
|
||||
@ -122,6 +134,30 @@ export const indexPageQuery = graphql`
|
||||
}
|
||||
}
|
||||
}
|
||||
leaves1 : file(relativePath: { eq: "leaves1.png" }) {
|
||||
id
|
||||
childImageSharp {
|
||||
original {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
leaves2 : file(relativePath: { eq: "leaves2.png" }) {
|
||||
id
|
||||
childImageSharp {
|
||||
original {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
blob : file(relativePath: { eq: "blob.png" }) {
|
||||
id
|
||||
childImageSharp {
|
||||
original {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
|
||||
data {
|
||||
id
|
||||
|
||||
@ -75,43 +75,132 @@ img.website-logo {
|
||||
height: 48px;
|
||||
}
|
||||
// Homepage logo
|
||||
.index-logo {
|
||||
transition: 0.3s ease all;
|
||||
display: block;
|
||||
margin: 1.5rem 1.25rem 0.5rem;
|
||||
vertical-align: middle;
|
||||
@media screen and (min-width: 144px) {
|
||||
max-width: 128px;
|
||||
margin: 1.5rem auto 0.5rem;
|
||||
.splash {
|
||||
position: relative;
|
||||
height: 369px;
|
||||
padding: 5rem 1rem 4rem;
|
||||
background: #5b67ff;
|
||||
background: linear-gradient(25deg,#95e2ff,#5f79ff,#8ed5ff);
|
||||
color: #fff;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
&::after, &::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
display: inline-block;
|
||||
margin: 1.5rem 2rem 0.5rem 1.25rem;
|
||||
&::before {
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
top: 0;
|
||||
opacity: .1;
|
||||
z-index: -1;
|
||||
}
|
||||
&::after {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 0l12 12H0z' fill='%23f2f3f8'/%3E%3C/svg%3E");
|
||||
background-size: 24px 24px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
bottom: -7px;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
// Homepage title
|
||||
.index-title {
|
||||
transition: 0.3s ease all;
|
||||
.splash-container {
|
||||
max-width: 64rem;
|
||||
padding: 0 2%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.splash-leaves {
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
&#splash-leaves-1 {
|
||||
right: -100px;
|
||||
top: -50px;
|
||||
width: 250px;
|
||||
}
|
||||
&#splash-leaves-2 {
|
||||
left: -250px;
|
||||
bottom: -100px;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0) scale(1.0, 1.0) rotate(235deg);
|
||||
z-index: 2;
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
#splash-blob {
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
width: 240px;
|
||||
left: -25px;
|
||||
top: 50px;
|
||||
}
|
||||
.splash-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.splash-logo {
|
||||
height: 146px;
|
||||
user-select: none;
|
||||
}
|
||||
.splash-title {
|
||||
font-weight: 300;
|
||||
font-size: 2rem;
|
||||
color: var(--fore-color-dark);
|
||||
margin: 1rem 0;
|
||||
line-height: 1.2;
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
display: inline-block;
|
||||
}
|
||||
margin: 0.75rem 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
// Homepage subtitle
|
||||
.index-sub-title {
|
||||
transition: 0.3s ease all;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
margin: 1rem 1.25rem 1.25rem;
|
||||
color: var(--fore-color);
|
||||
text-align: center;
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
font-size: 1rem;
|
||||
font-size: 3.75rem;
|
||||
}
|
||||
}
|
||||
.splash-sub-title {
|
||||
font-size: 1.125rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 2rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .4px;
|
||||
@media screen and (min-width: $layout-medium-breakpoint) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// .index-logo {
|
||||
// transition: 0.3s ease all;
|
||||
// display: block;
|
||||
// margin: 1.5rem 1.25rem 0.5rem;
|
||||
// vertical-align: middle;
|
||||
// @media screen and (min-width: 144px) {
|
||||
// max-width: 128px;
|
||||
// margin: 1.5rem auto 0.5rem;
|
||||
// }
|
||||
// @media screen and (min-width: $layout-medium-breakpoint) {
|
||||
// display: inline-block;
|
||||
// margin: 1.5rem 2rem 0.5rem 1.25rem;
|
||||
// }
|
||||
// }
|
||||
// // Homepage title
|
||||
// .index-title {
|
||||
// transition: 0.3s ease all;
|
||||
// font-size: 2rem;
|
||||
// color: var(--fore-color-dark);
|
||||
// @media screen and (min-width: $layout-medium-breakpoint) {
|
||||
// display: inline-block;
|
||||
// }
|
||||
// margin: 0.75rem 1.25rem;
|
||||
// text-align: center;
|
||||
// }
|
||||
// // Homepage subtitle
|
||||
// .index-sub-title {
|
||||
// transition: 0.3s ease all;
|
||||
// font-size: 0.875rem;
|
||||
// line-height: 1.5;
|
||||
// margin: 1rem 1.25rem 1.25rem;
|
||||
// color: var(--fore-color);
|
||||
// text-align: center;
|
||||
// @media screen and (min-width: $layout-medium-breakpoint) {
|
||||
// font-size: 1rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// Page title
|
||||
.page-title {
|
||||
|
||||
Reference in New Issue
Block a user