animation and articles
This commit is contained in:
parent
32b9fd7f3f
commit
52383f0527
7 changed files with 252 additions and 13 deletions
8
src/articles/test.md
Normal file
8
src/articles/test.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: 'The greatest post of all time'
|
||||
date: 'the night'
|
||||
tag: ''
|
||||
status: 'Public'
|
||||
---
|
||||
|
||||
Here is my _great_ post!
|
||||
150
src/components/Blog.astro
Normal file
150
src/components/Blog.astro
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
---
|
||||
import "../styles/landing.css";
|
||||
interface Props {
|
||||
file: string;
|
||||
url: string;
|
||||
frontmatter: {
|
||||
title: string;
|
||||
date: string;
|
||||
description: string;
|
||||
};
|
||||
}
|
||||
const posts = Object.values<Props>(
|
||||
import.meta.glob("../articles/*.md", { eager: true }),
|
||||
);
|
||||
---
|
||||
|
||||
<div id="blog">
|
||||
<div class="title_cont">
|
||||
<h1 class="title montserrat-underline-title-font">
|
||||
<a href="#blog">Article</a>
|
||||
</h1>
|
||||
<hr class="title_div" />
|
||||
</div>
|
||||
<div class="post_container">
|
||||
{
|
||||
posts.map((post) => (
|
||||
<div class="post">
|
||||
<p class="post_col-1">{post.frontmatter.title}</p>
|
||||
<p class="post_col-2">{post.frontmatter.date}</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.montserrat-underline-title-font {
|
||||
font-family: "Montserrat Underline", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
#blog {
|
||||
width: 100%;
|
||||
height: 100dvh;
|
||||
background-color: var(--background_hl);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.title {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: fit-content;
|
||||
background-color: var(--background_hl);
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
color: var(--frontend_lt);
|
||||
padding-inline: 10%;
|
||||
}
|
||||
.title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
left: -5px;
|
||||
display: inline-block;
|
||||
transform: skewX(-8deg);
|
||||
background-color: var(--background_hl);
|
||||
z-index: -1;
|
||||
}
|
||||
.title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
right: -5px;
|
||||
display: inline-block;
|
||||
transform: skewX(8deg);
|
||||
background-color: var(--background_hl);
|
||||
z-index: -1;
|
||||
}
|
||||
.title_div {
|
||||
margin: 0px;
|
||||
height: 3px;
|
||||
color: var(--background_hl);
|
||||
background-color: var(--background_hl);
|
||||
border: none;
|
||||
}
|
||||
.title_cont {
|
||||
background-color: var(--background);
|
||||
height: fit-content;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: var(--frontend_lt);
|
||||
}
|
||||
.post {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-auto-rows: max-content;
|
||||
color: var(--frontend_lt);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
gap: 20px;
|
||||
}
|
||||
.post_col-2 {
|
||||
text-align: right;
|
||||
}
|
||||
.post_container {
|
||||
height: 60%;
|
||||
width: 35%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-35%);
|
||||
}
|
||||
@media (575px > width) {
|
||||
.post_container {
|
||||
height: 60%;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-35%);
|
||||
}
|
||||
.post {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 6px;
|
||||
p {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
.post_col-2 {
|
||||
text-align: left;
|
||||
background-color: var(--background);
|
||||
width: fit-content;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,44 +3,52 @@ import { onMounted, ref, useTemplateRef, watchEffect } from 'vue';
|
|||
import '../styles/landing.css'
|
||||
const name = useTemplateRef("name");
|
||||
const light_width = ref("0px");
|
||||
const light_height = ref("0px");
|
||||
onMounted(() => {
|
||||
if (name.value) {
|
||||
light_width.value = name.value.offsetWidth + "px";
|
||||
light_height.value = name.value.offsetHeight + "px";
|
||||
console.log(light_width.value)
|
||||
}
|
||||
})
|
||||
watchEffect(() => {
|
||||
if (name.value) {
|
||||
light_width.value = name.value.offsetWidth + "px";
|
||||
light_height.value = name.value.offsetHeight + "px";
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="title montserrat-underline-title-font">
|
||||
<h1 class="lighter_dep wordbreak">
|
||||
<span>Welcome to </span>
|
||||
<h1 class="lighter_dep">
|
||||
<span class=" wordbreak">Welcome to </span>
|
||||
<span class="light" ref="name">Jasinco's Realm</span>
|
||||
<div class="lighter_bg" :style="{ width: light_width }"></div>
|
||||
<div class="lighter_bg" :style="{ width: light_width, height: light_height }"></div>
|
||||
</h1>
|
||||
<p class="dancing-script-describe-font describe">
|
||||
A place I found, A palace I built
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="padd"></div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 100%;
|
||||
height:90dvh;
|
||||
width:100%;
|
||||
display: grid;
|
||||
background-color: var(--background);
|
||||
color: var(--frontend);
|
||||
margin:0px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
z-index: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.light {
|
||||
|
|
@ -50,22 +58,22 @@ watchEffect(() => {
|
|||
|
||||
.lighter_bg {
|
||||
background-color: hsl(from var(--light) h s calc(l/2));
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
z-index: -1;
|
||||
padding-right: 10px;
|
||||
transform: skewX(-10deg);
|
||||
animation-name: appearAnimate;
|
||||
animation-duration: 0.8s;
|
||||
animation-timing-function: ease;
|
||||
|
||||
}
|
||||
|
||||
.lighter_dep {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wordbreak:nth-child(1) {
|
||||
break-after: right;
|
||||
|
||||
}
|
||||
|
||||
.montserrat-underline-title-font {
|
||||
|
|
@ -85,4 +93,41 @@ watchEffect(() => {
|
|||
.describe {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.padd{
|
||||
height: 10dvh;
|
||||
animation: 0.4s ease 1.14s folderAppear normal forwards;
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
@keyframes appearAnimate {
|
||||
0% {
|
||||
right:2000px;
|
||||
}
|
||||
49%{
|
||||
right:-2000px;
|
||||
visibility: hidden;
|
||||
}
|
||||
51%{
|
||||
right:2000px;
|
||||
visibility: visible;
|
||||
}
|
||||
100%{
|
||||
right: -8px;
|
||||
}
|
||||
}
|
||||
@keyframes folderAppear {
|
||||
0%{
|
||||
height:10dvh;
|
||||
}
|
||||
100%{
|
||||
height:0dvh;
|
||||
}
|
||||
}
|
||||
@media (575px > width) {
|
||||
.wordbreak::after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,7 +19,17 @@
|
|||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100dvw;
|
||||
height: 100dvh;
|
||||
width: calc(var(--vw, 1vw) * 100);
|
||||
max-width: 100dvw;
|
||||
min-height: 100dvh;
|
||||
scrollbar-width: 0px;
|
||||
/* scrollbar-gutter: stable; */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
new ResizeObserver(() => {
|
||||
let vw = document.documentElement.clientWidth / 100;
|
||||
document.documentElement.style.setProperty("--vw", `${vw}px`);
|
||||
}).observe(document.documentElement);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
// import Welcome from '../components/Welcome.astro';
|
||||
import HelloBanner from '../components/HelloBanner.vue';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Blog from '../components/Blog.astro'
|
||||
|
||||
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
|
||||
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
|
||||
|
|
@ -10,4 +11,5 @@ import Layout from '../layouts/Layout.astro';
|
|||
<Layout>
|
||||
<!-- <Welcome /> -->
|
||||
<HelloBanner client:load/>
|
||||
<Blog />
|
||||
</Layout>
|
||||
|
|
|
|||
22
src/pages/posts/[id].astro
Normal file
22
src/pages/posts/[id].astro
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
import { defineCollection, z } from 'astro:content';
|
||||
import { glob, file } from 'astro/loaders';
|
||||
const blog = defineCollection({
|
||||
loader: glob({pattern: "**/*.md", base:"../articles"}),
|
||||
schema: z.object({
|
||||
name: z.string(),
|
||||
tag: z.string(),
|
||||
date: z.string(),
|
||||
status: z.enum(["Public", "Unrelease"])
|
||||
})
|
||||
})
|
||||
export function getStaticPaths() {
|
||||
return [
|
||||
{ params: { id: "clifford" }},
|
||||
{ params: { id: "rover" }},
|
||||
{ params: { id: "spot" }},
|
||||
];
|
||||
}
|
||||
|
||||
const { id } = Astro.params;
|
||||
---
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
:root {
|
||||
--background: #2c2c2c;
|
||||
--background_hl: #3d3d3d;
|
||||
--light: #ffde21;
|
||||
--frontend: #858585;
|
||||
--frontend_lt: #D3D3D3;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue