Preparation for v2
This commit is contained in:
Ale
parent
2212218520
commit
e53bedeec8
21 changed files with 217 additions and 127 deletions
|
Before Width: | Height: | Size: 448 KiB After Width: | Height: | Size: 448 KiB |
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 414 B After Width: | Height: | Size: 414 B |
BIN
App/public/v2/Assets/background.png
Normal file
BIN
App/public/v2/Assets/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
App/public/v2/Assets/border.png
Normal file
BIN
App/public/v2/Assets/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
App/public/v2/Assets/header-pic.png
Normal file
BIN
App/public/v2/Assets/header-pic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
|
|
@ -2,16 +2,16 @@
|
||||||
---
|
---
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span><a href="https://dd86k.space/">DD/</a></span>
|
<span><a href="https://dd86k.space/">DD/</a></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
span {
|
span {
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #ffb86c;
|
color: #ffb86c;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,19 +2,20 @@
|
||||||
---
|
---
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span><a href="/">Home/</a></span>
|
<span><a href="/">Home/</a></span>
|
||||||
<span
|
<span
|
||||||
><a href="https://forge.cakey.me/Cake/Personal_website">GitRepo/</a></span
|
><a href="https://forge.cakey.me/Cake/Personal_website">GitRepo/</a
|
||||||
>
|
></span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
span {
|
span {
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #ffb86c;
|
color: #ffb86c;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
0
App/src/Components/v2/button.astro
Normal file
0
App/src/Components/v2/button.astro
Normal file
8
App/src/Components/v2/navbar.astro
Normal file
8
App/src/Components/v2/navbar.astro
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
---
|
||||||
|
import "../../Styles/v2/navbar.css";
|
||||||
|
---
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a>home</a>
|
||||||
|
<a>blog</a>
|
||||||
|
</nav>
|
||||||
13
App/src/Components/v2/titlebar.astro
Normal file
13
App/src/Components/v2/titlebar.astro
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
---
|
||||||
|
import "../../Styles/v2/titlebar.css";
|
||||||
|
|
||||||
|
const { page_title } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div id="titlebar">
|
||||||
|
<img src="/v2/Assets/header-pic.png" />
|
||||||
|
<div id="titlebar-title-wrapper">
|
||||||
|
<h1>{page_title}</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
@ -1,145 +1,146 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "victor mono";
|
font-family: "victor mono";
|
||||||
src: url("/Assets/VictorMono-Regular.ttf");
|
src: url("/v1/Assets/VictorMono-Regular.ttf");
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background-color: #282a36;
|
--background-color: #282a36;
|
||||||
--border-color: #44475a;
|
--border-color: #44475a;
|
||||||
--primary-color: #ff79c6;
|
--primary-color: #ff79c6;
|
||||||
--secondary-color: #bd93f9;
|
--secondary-color: #bd93f9;
|
||||||
--text-color: #f8f8f2;
|
--text-color: #f8f8f2;
|
||||||
--link-color: #ffb86c;
|
--link-color: #ffb86c;
|
||||||
--highlight-color: #8be9fd;
|
--highlight-color: #8be9fd;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
border-left: var(--border-color) solid;
|
border-left: var(--border-color) solid;
|
||||||
border-right: var(--border-color) solid;
|
border-right: var(--border-color) solid;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
max-width: 950px;
|
max-width: 950px;
|
||||||
font-family: "victor mono";
|
font-family: "victor mono";
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
padding-bottom: 50px;
|
padding-bottom: 50px;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content h1 {
|
#content h1 {
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content .mainheader {
|
#content .mainheader {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content .mainheader img {
|
#content .mainheader img {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
border: var(--border-color) solid;
|
border: var(--border-color) solid;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 10%;
|
width: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content h1 strong {
|
#content h1 strong {
|
||||||
color: var(--secondary-color);
|
color: var(--secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#content p {
|
#content p {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
color: var(--secondary-color);
|
color: var(--secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--highlight-color);
|
color: var(--highlight-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#content a {
|
#content a {
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content a:hover {
|
#content a:hover {
|
||||||
background-color: var(--link-color);
|
background-color: var(--link-color);
|
||||||
color: var(--background-color);
|
color: var(--background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#content .paragraphwpic {
|
#content .paragraphwpic {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content .paragraphwpic p {
|
#content .paragraphwpic p {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content .paragraphwpic img,
|
#content .paragraphwpic img,
|
||||||
.small {
|
.small {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
border: var(--border-color) solid;
|
border: var(--border-color) solid;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content .paragraphwpic .small {
|
#content .paragraphwpic .small {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
height: 40%;
|
height: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
display: block;
|
display: block;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: 1px solid var(--border-color);
|
border-top: 1px solid var(--border-color);
|
||||||
margin: 0 0;
|
margin: 0 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.commandline {
|
.commandline {
|
||||||
background-color: var(--border-color);
|
background-color: var(--border-color);
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
.commandline > * {
|
|
||||||
color: var(--highlight-color) !important;
|
.commandline>* {
|
||||||
|
color: var(--highlight-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
border-bottom: 1px dashed var(--link-color);
|
border-bottom: 1px dashed var(--link-color);
|
||||||
border-left: 1px solid var(--link-color);
|
border-left: 1px solid var(--link-color);
|
||||||
border-right: 1px solid var(--link-color);
|
border-right: 1px solid var(--link-color);
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
44
App/src/Styles/v2/common.css
Normal file
44
App/src/Styles/v2/common.css
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
:root {
|
||||||
|
--background-color: #282a36;
|
||||||
|
--border-color: #44475a;
|
||||||
|
--primary-color: #ff79c6;
|
||||||
|
--secondary-color: #bd93f9;
|
||||||
|
--text-color: #f8f8f2;
|
||||||
|
--link-color: #ffb86c;
|
||||||
|
--highlight-color: #8be9fd;
|
||||||
|
|
||||||
|
--navbar-header-pic-size: 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#main-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
background: url("/v2/Assets/background.png");
|
||||||
|
background-repeat: repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-container {
|
||||||
|
border: 24px solid transparent;
|
||||||
|
border-image: url("/v2/Assets/border.png") 32 round;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
0
App/src/Styles/v2/navbar.css
Normal file
0
App/src/Styles/v2/navbar.css
Normal file
16
App/src/Styles/v2/titlebar.css
Normal file
16
App/src/Styles/v2/titlebar.css
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
#titlebar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#titlebar>#titlebar-title-wrapper {
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
left: calc(0px - calc(var(--navbar-header-pic-size)/2));
|
||||||
|
}
|
||||||
|
|
||||||
|
#titlebar>img {
|
||||||
|
width: var(--navbar-header-pic-size);
|
||||||
|
height: var(--navbar-header-pic-size);
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
---
|
|
||||||
const { title } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<nav>
|
|
||||||
<a href="#">Home</a>
|
|
||||||
<a href="#">Posts</a>
|
|
||||||
<a href="#">Contact</a>
|
|
||||||
</nav>
|
|
||||||
<h1>{title}</h1>
|
|
||||||
<article>
|
|
||||||
<slot />
|
|
||||||
<!-- il tuo contenuto viene inserito qui -->
|
|
||||||
</article>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
24
App/src/layouts/v2/common.astro
Normal file
24
App/src/layouts/v2/common.astro
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
---
|
||||||
|
import "../../Styles/v2/common.css";
|
||||||
|
const { page_title } = Astro.props;
|
||||||
|
import Navbar from "../../Components/v2/navbar.astro";
|
||||||
|
import Titlebar from "../../Components/v2/titlebar.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="main-container">
|
||||||
|
<div id="header-container">
|
||||||
|
<Titlebar page_title={page_title} />
|
||||||
|
<Navbar />
|
||||||
|
</div>
|
||||||
|
<main>
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
import CommonLayout from "../layouts/v2/common.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<CommonLayout page_title="cake">pallw</CommonLayout>
|
||||||
|
|
@ -10,7 +10,7 @@ const posts = await Astro.glob("./posts/*.md");
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/v1/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>Cakey's home directory</title>
|
<title>Cakey's home directory</title>
|
||||||
|
|
@ -8,7 +8,7 @@ import FriendsRow from "../../Components/v1/FriendsRow.astro";
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/v1/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>Cakey's home directory</title>
|
<title>Cakey's home directory</title>
|
||||||
|
|
@ -57,7 +57,7 @@ import FriendsRow from "../../Components/v1/FriendsRow.astro";
|
||||||
>Arch</a
|
>Arch</a
|
||||||
> with KDE, which is a really nice combo.
|
> with KDE, which is a really nice combo.
|
||||||
</p>
|
</p>
|
||||||
<img src="/Assets/Homepage/desktop.jpg" />
|
<img src="/v1/Assets/Homepage/desktop.jpg" />
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div class="commandline">
|
<div class="commandline">
|
||||||
|
|
@ -74,7 +74,7 @@ import FriendsRow from "../../Components/v1/FriendsRow.astro";
|
||||||
resonates with me so much, both in the anime ending, and the
|
resonates with me so much, both in the anime ending, and the
|
||||||
movie.
|
movie.
|
||||||
</p>
|
</p>
|
||||||
<img class="small" src="/Assets/Homepage/thirdimpact.png" />
|
<img class="small" src="/v1/Assets/Homepage/thirdimpact.png" />
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Loading…
Reference in a new issue