feat: add index page
This commit is contained in:
parent
69688e589b
commit
d8af687361
19
src/app.scss
Normal file
19
src/app.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
@import 'variables.scss';
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'ZenKakuGothicNew-Regular';
|
||||||
|
src: url(/fonts/ZenKakuGothicNew-Regular.ttf) format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: #000;
|
||||||
|
font-family: 'ZenKakuGothicNew-Regular', '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro',
|
||||||
|
'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
7
src/lib/article.ts
Normal file
7
src/lib/article.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
export type Content = {
|
||||||
|
title: string;
|
||||||
|
image: string;
|
||||||
|
date: string;
|
||||||
|
link: string;
|
||||||
|
tags: string[];
|
||||||
|
};
|
||||||
174
src/lib/blog.scss
Normal file
174
src/lib/blog.scss
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
.document {
|
||||||
|
--color-text: #ffffff;
|
||||||
|
--color-concept: hsl(39, 100%, 25%, 0.5);
|
||||||
|
--color-concept-hsl: 39, 100%, 25%;
|
||||||
|
--color-outline: #ffffff40;
|
||||||
|
* {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
position: relative;
|
||||||
|
width: auto;
|
||||||
|
font-size: 2rem;
|
||||||
|
border-bottom: 1px solid var(--color-outline);
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
> *:not(h1) {
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
content: '#';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -1.5rem;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
color: rgb(131, 131, 131);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--color-outline);
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
transform: translate(0, 0);
|
||||||
|
text-shadow: 0 0 1rem hsl(var(--color-concept-hsl));
|
||||||
|
transition: 0.2s ease-out;
|
||||||
|
font-weight: normal;
|
||||||
|
&:hover {
|
||||||
|
transform: translate(0, -0.1rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
blockquote {
|
||||||
|
position: relative;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
color: rgb(162, 162, 162);
|
||||||
|
&::before {
|
||||||
|
content: '“';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -0.5rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
color: rgb(131, 131, 131);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
warn {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
padding: 1rem 0.7rem 0.7rem;
|
||||||
|
background-image: linear-gradient(to right, var(--color-outline), transparent 75%);
|
||||||
|
background-origin: border-box;
|
||||||
|
box-shadow: inset 0 0 0 100vh var(--background-color);
|
||||||
|
text-shadow: 0 0 1rem hsl(var(--color-concept-hsl),1);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
&::before {
|
||||||
|
content: 'note:warn';
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
top: 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
margin-bottom: -0.3rem;
|
||||||
|
transform: translate(0, -0.5rem);
|
||||||
|
text-shadow: 0 0 1rem red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
font-family: monospace;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.2rem;
|
||||||
|
background: rgba(255, 255, 255, 0.25);
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
details {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
transition: 0.2s ease-out;
|
||||||
|
transition-property: height;
|
||||||
|
padding-inline-start: 0.1rem;
|
||||||
|
> summary {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
list-style: '＋ ' outside;
|
||||||
|
margin-left: 1rem;
|
||||||
|
padding: 0.2rem;
|
||||||
|
background: linear-gradient(to right, rgba(255, 255, 255, 0.25), transparent 200px);
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
text-shadow: 0 0 0.25rem rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
margin-block-start: 0.5rem;
|
||||||
|
margin-block-end: 0.5rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&[open] {
|
||||||
|
> summary {
|
||||||
|
list-style: '－ ' outside;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
animation: detailsIn 0.5s ease;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes detailsIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
border: none;
|
||||||
|
border: 1px solid var(--color-outline);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0 0.5rem hsl(var(--color-concept-hsl), 0.5);
|
||||||
|
thead {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: #ffffff0d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: 0.5em;
|
||||||
|
border-left: 1px solid var(--color-outline);
|
||||||
|
&:first-child {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
142
src/routes/+error.svelte
Normal file
142
src/routes/+error.svelte
Normal file
|
|
@ -0,0 +1,142 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import '$lib/blog.scss';
|
||||||
|
|
||||||
|
export let data: any;
|
||||||
|
|
||||||
|
data.date = new Date();
|
||||||
|
data.date = [
|
||||||
|
data.date.getFullYear(),
|
||||||
|
(data.date.getMonth() + 1).toString().padStart(2, '0'),
|
||||||
|
data.date.getDate().toString().padStart(2, '0')
|
||||||
|
].join('-');
|
||||||
|
data.image = '/img/error.jpg';
|
||||||
|
data.title = 'Something went wrong :(';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{$page.status} | Blog | HareWorks</title>
|
||||||
|
<meta name="robots" content="noindex" />
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<!-- <div class="hero">
|
||||||
|
<img src={data.image} alt="" />
|
||||||
|
</div> -->
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">
|
||||||
|
<h1>{data.title}</h1>
|
||||||
|
<div class="meta">
|
||||||
|
<span>{data.date}</span>
|
||||||
|
<span />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<main>
|
||||||
|
<div class="document">
|
||||||
|
<h1>{$page.status} {$page.error?.message}</h1>
|
||||||
|
<a href="/">Home</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:global(body) {
|
||||||
|
background-color: var(--background-primary);
|
||||||
|
}
|
||||||
|
.back {
|
||||||
|
position: fixed;
|
||||||
|
z-index: -1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #000;
|
||||||
|
color: white;
|
||||||
|
filter: brightness(0.8) grayscale(0.5);
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
color: white;
|
||||||
|
min-height: 100%;
|
||||||
|
padding-top: 100px;
|
||||||
|
width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 12px 100px 12px 0;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
span {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
&:first-child {
|
||||||
|
&::before {
|
||||||
|
content: '🗀 ';
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: '|';
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
margin-left: 5px;
|
||||||
|
padding: 0 5px;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
flex: 1;
|
||||||
|
background-color: var(--background-primary);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 1000px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
h1 {
|
||||||
|
padding: 8px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
89
src/routes/+page.server.ts
Normal file
89
src/routes/+page.server.ts
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
import { error } from '@sveltejs/kit';
|
||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
// import index from '$lib/index';
|
||||||
|
import type { Content } from '$lib/article';
|
||||||
|
import pool from '$lib/database';
|
||||||
|
|
||||||
|
let data: {
|
||||||
|
recent: Content[],
|
||||||
|
tags: string[],
|
||||||
|
updated: string
|
||||||
|
} = {
|
||||||
|
recent: [
|
||||||
|
{
|
||||||
|
title: "title",
|
||||||
|
image: "image",
|
||||||
|
date: "date",
|
||||||
|
link: "link",
|
||||||
|
tags: ["tag1", "tag2"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tags: ["hoge", "fuga", "piyo"],
|
||||||
|
updated: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ params }) => {
|
||||||
|
const connect = await pool.connect();
|
||||||
|
const result = await connect.query('SELECT NOW()')
|
||||||
|
.then((res) => {
|
||||||
|
data.updated = res.rows[0].now.toISOString();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
error(err);
|
||||||
|
});
|
||||||
|
connect.release();
|
||||||
|
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
// export const load: PageServerLoad = async ({ params }) => {
|
||||||
|
// let data = {
|
||||||
|
// hero: [] as Content[],
|
||||||
|
// recent: [] as Content[],
|
||||||
|
// tags: Array.from(index.tags),
|
||||||
|
// updated: index.updated
|
||||||
|
// };
|
||||||
|
// for (const dat of index.articles.filter((article) => article.publish == "public").list.slice(0, 4).reverse()) {
|
||||||
|
// if (!dat) continue;
|
||||||
|
// data.hero.push({
|
||||||
|
// title: dat.title,
|
||||||
|
// image: dat.image,
|
||||||
|
// date: ((date) => {
|
||||||
|
// {
|
||||||
|
// // YYYY/MM/DD
|
||||||
|
// return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date
|
||||||
|
// .getDate()
|
||||||
|
// .toString()
|
||||||
|
// .padStart(2, '0')}`;
|
||||||
|
// }
|
||||||
|
// })(dat.released),
|
||||||
|
// link: dat.series
|
||||||
|
// ? `/post/${dat.category}/${dat.series}/${dat.id}`
|
||||||
|
// : `/post/${dat.category}/${dat.id}`,
|
||||||
|
// tags: dat.tags
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// //recent 10 articles
|
||||||
|
// for (const dat of index.articles.filter((article) => article.publish == "public").list.slice(0, 10)) {
|
||||||
|
// if (!dat) continue;
|
||||||
|
// data.recent.push({
|
||||||
|
// title: dat.title,
|
||||||
|
// image: dat.image,
|
||||||
|
// date: ((date) => {
|
||||||
|
// {
|
||||||
|
// // YYYY/MM/DD
|
||||||
|
// return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date
|
||||||
|
// .getDate()
|
||||||
|
// .toString()
|
||||||
|
// .padStart(2, '0')}`;
|
||||||
|
// }
|
||||||
|
// })(dat.released),
|
||||||
|
// link: dat.series
|
||||||
|
// ? `/post/${dat.category}/${dat.series}/${dat.id}`
|
||||||
|
// : `/post/${dat.category}/${dat.id}`,
|
||||||
|
// tags: dat.tags
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return data;
|
||||||
|
// };
|
||||||
|
|
@ -1,2 +1,307 @@
|
||||||
<h1>Welcome to SvelteKit</h1>
|
<script lang="ts">
|
||||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
import type { PageData } from './$types';
|
||||||
|
// import Cursor from '$lib/components/cursor.svelte';
|
||||||
|
// import Footer from '$lib/components/footer.svelte';
|
||||||
|
|
||||||
|
export let data: PageData;
|
||||||
|
|
||||||
|
let refresh = true;
|
||||||
|
let searchInput: HTMLInputElement;
|
||||||
|
let suggest: HTMLDivElement;
|
||||||
|
const emojis = ['( ᐢ˙꒳˙ᐢ )', '(=`•ω•´)', '₍ᐢ｡•༝•｡ᐢ₎', 'ヽ(･ω･*)', '( |||| ᐢ˙꒳˙ᐢ )'];
|
||||||
|
const searchChange = (e: Event) => {
|
||||||
|
if (refresh === false) return;
|
||||||
|
const value = (e.target as HTMLInputElement).value;
|
||||||
|
if (value.length === 0) return;
|
||||||
|
refresh = false;
|
||||||
|
let xhr = new XMLHttpRequest();
|
||||||
|
// xhr.open('GET', `/api/search?q=${value}`);
|
||||||
|
// xhr.send();
|
||||||
|
// xhr.onload = () => {
|
||||||
|
// setTimeout(() => {q
|
||||||
|
// refresh = true;
|
||||||
|
// }, 1000);
|
||||||
|
// };
|
||||||
|
setTimeout(() => {
|
||||||
|
suggest.textContent = emojis[Math.floor(Math.random() * emojis.length)] + 'ﾐｼﾞｯｿｳﾀﾞﾖ...';
|
||||||
|
setTimeout(() => {
|
||||||
|
refresh = true;
|
||||||
|
}, 1000);
|
||||||
|
}, Math.random() * 100);
|
||||||
|
};
|
||||||
|
const searchKeydown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key !== 'Enter') return;
|
||||||
|
// const input = e.target as HTMLInputElement;
|
||||||
|
// const value = input.value;
|
||||||
|
// if (value.length > 0) {
|
||||||
|
// window.location.href = `/search?s=${value}`;
|
||||||
|
// }
|
||||||
|
suggest.textContent = emojis[Math.floor(Math.random() * emojis.length)] + 'ｱﾝ?';
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Home | Blog | HareWorks</title>
|
||||||
|
<meta name="description" content="Hareの個人ブログです。" />
|
||||||
|
<meta property="og:title" content="Home - HareWorks" />
|
||||||
|
<meta property="og:description" content="Hareの個人ブログです。" />
|
||||||
|
<meta property="og:image" content="/img/logo.png" />
|
||||||
|
<meta property="og:url" content={`https://blog.hare.works/`} />
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="controls" > </div>
|
||||||
|
<main>
|
||||||
|
<h1>blog.hareworks.net</h1>
|
||||||
|
<p>
|
||||||
|
このブログはHareの個人ブログです。プログラミング、情報技術全般、デザイン、その他興味のあることについて書いています。
|
||||||
|
</p>
|
||||||
|
<div class="links">
|
||||||
|
<ul>
|
||||||
|
<li><a href="/about">ABOUT</a></li>
|
||||||
|
<li><a href="/contact">CONTACT</a></li>
|
||||||
|
<li><a href="/discord">DISCORD</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="notice">
|
||||||
|
<p>( ᐢ˙꒳˙ᐢ ) ← cute</p>
|
||||||
|
</div>
|
||||||
|
<div class="serch">
|
||||||
|
<div class="box">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search"
|
||||||
|
on:focus={() => {
|
||||||
|
suggest.classList.remove('hidden');
|
||||||
|
|
||||||
|
}}
|
||||||
|
on:blur={() => {
|
||||||
|
suggest.classList.add('hidden');
|
||||||
|
}}
|
||||||
|
on:input={searchChange}
|
||||||
|
on:keydown={searchKeydown}
|
||||||
|
bind:this={searchInput}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="suggest hidden" bind:this={suggest}></div>
|
||||||
|
</div>
|
||||||
|
<div class="recent">
|
||||||
|
<h2>RECENT<span>updated: {data.updated}</span></h2>
|
||||||
|
<ul>
|
||||||
|
{#each data.recent as post}
|
||||||
|
<li>
|
||||||
|
<a href={post.link}>{post.title} - {post.date}</a>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="tags">
|
||||||
|
<h2>TAGS</h2>
|
||||||
|
<ul>
|
||||||
|
{#each data.tags as tag}
|
||||||
|
<li>
|
||||||
|
<button on:click={() => (searchInput.value = tag)}>{tag}</button>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- <Footer mode="home" /> -->
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:global(body) {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: var(--background-primary);
|
||||||
|
background-size: cover;
|
||||||
|
background-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100dvh;
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.controls {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
border: 1px solid var(--line-primary);
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 60px 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1000px;
|
||||||
|
height: 100dvh;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
> div {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-left: auto;
|
||||||
|
width: 80%;
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: end;
|
||||||
|
gap: 4px;
|
||||||
|
border-top: 1px solid var(--line-primary);
|
||||||
|
li {
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
padding: 0 3px 0 3px;
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice {
|
||||||
|
padding: 5px 0;
|
||||||
|
border-bottom: 1px solid var(--line-primary);
|
||||||
|
p {
|
||||||
|
padding: 15px 0;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
background-color: rgba(105, 105, 105, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.serch {
|
||||||
|
width: 100%;
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
&::before {
|
||||||
|
content: ' ';
|
||||||
|
position: relative;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 30%;
|
||||||
|
border-bottom: 1px solid var(--line-primary);
|
||||||
|
}
|
||||||
|
input[type='text'] {
|
||||||
|
display: inline;
|
||||||
|
width: 70%;
|
||||||
|
margin-left: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: transparent;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid var(--line-primary);
|
||||||
|
border-bottom: none;
|
||||||
|
border-right: none;
|
||||||
|
color: white;
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.suggest {
|
||||||
|
display: block;
|
||||||
|
margin-left: 30%;
|
||||||
|
width: 70%;
|
||||||
|
height: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-bottom: 1px solid var(--line-primary);
|
||||||
|
transition: 0.5s ease-in-out;
|
||||||
|
transition-property: height border-bottom;
|
||||||
|
&.hidden {
|
||||||
|
height: 0;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 0 20px 0 10px;
|
||||||
|
border-left: 1px solid var(--line-primary);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
> span {
|
||||||
|
padding-left: 30px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
font-size: 1rem;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
background-color: transparent;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
&:hover {
|
||||||
|
border-bottom: 1px solid var(--line-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0 0 0 30px;
|
||||||
|
margin: 0;
|
||||||
|
li {
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.recent {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.tags {
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
gap: 3px;
|
||||||
|
li {
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 3px 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid var(--line-primary);
|
||||||
|
color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
main {
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.notice {
|
||||||
|
p {
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
5
src/variables.scss
Normal file
5
src/variables.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
:root {
|
||||||
|
--background-primary: #343434;
|
||||||
|
--line-primary: rgba(255, 255, 255, 0.1);
|
||||||
|
--highlight-primary: rgba(255, 115, 0, 0.2);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user