Preparation for v2
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
After Width: | Height: | Size: 2.7 KiB |
BIN
App/public/v2/Assets/border.png
Normal file
After Width: | Height: | Size: 3.6 KiB |
BIN
App/public/v2/Assets/header-pic.png
Normal file
After Width: | Height: | Size: 68 KiB |
|
@ -2,16 +2,16 @@
|
|||
---
|
||||
|
||||
<div>
|
||||
<span><a href="https://dd86k.space/">DD/</a></span>
|
||||
<span><a href="https://dd86k.space/">DD/</a></span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
span {
|
||||
padding: 2px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #ffb86c;
|
||||
}
|
||||
span {
|
||||
padding: 2px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #ffb86c;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -2,19 +2,20 @@
|
|||
---
|
||||
|
||||
<div>
|
||||
<span><a href="/">Home/</a></span>
|
||||
<span
|
||||
><a href="https://forge.cakey.me/Cake/Personal_website">GitRepo/</a></span
|
||||
>
|
||||
<span><a href="/">Home/</a></span>
|
||||
<span
|
||||
><a href="https://forge.cakey.me/Cake/Personal_website">GitRepo/</a
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
span {
|
||||
padding: 2px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #ffb86c;
|
||||
}
|
||||
span {
|
||||
padding: 2px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #ffb86c;
|
||||
}
|
||||
</style>
|
||||
|
|
0
App/src/Components/v2/button.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
|
@ -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-family: "victor mono";
|
||||
src: url("/Assets/VictorMono-Regular.ttf");
|
||||
font-family: "victor mono";
|
||||
src: url("/v1/Assets/VictorMono-Regular.ttf");
|
||||
}
|
||||
|
||||
:root {
|
||||
--background-color: #282a36;
|
||||
--border-color: #44475a;
|
||||
--primary-color: #ff79c6;
|
||||
--secondary-color: #bd93f9;
|
||||
--text-color: #f8f8f2;
|
||||
--link-color: #ffb86c;
|
||||
--highlight-color: #8be9fd;
|
||||
--background-color: #282a36;
|
||||
--border-color: #44475a;
|
||||
--primary-color: #ff79c6;
|
||||
--secondary-color: #bd93f9;
|
||||
--text-color: #f8f8f2;
|
||||
--link-color: #ffb86c;
|
||||
--highlight-color: #8be9fd;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
background-color: var(--background-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#content {
|
||||
border-left: var(--border-color) solid;
|
||||
border-right: var(--border-color) solid;
|
||||
border-width: 1px;
|
||||
max-width: 950px;
|
||||
font-family: "victor mono";
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 50px;
|
||||
flex-grow: 1;
|
||||
border-left: var(--border-color) solid;
|
||||
border-right: var(--border-color) solid;
|
||||
border-width: 1px;
|
||||
max-width: 950px;
|
||||
font-family: "victor mono";
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 50px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#content h1 {
|
||||
color: var(--primary-color);
|
||||
font-size: 50px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--primary-color);
|
||||
font-size: 50px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#content .mainheader {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#content .mainheader img {
|
||||
margin-top: auto;
|
||||
border: var(--border-color) solid;
|
||||
border-radius: 50%;
|
||||
width: 10%;
|
||||
margin-top: auto;
|
||||
border: var(--border-color) solid;
|
||||
border-radius: 50%;
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
#content h1 strong {
|
||||
color: var(--secondary-color);
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
#content p {
|
||||
color: var(--text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--secondary-color);
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
i {
|
||||
color: var(--highlight-color);
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
#content a {
|
||||
color: var(--link-color);
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
color: var(--link-color);
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#content a:hover {
|
||||
background-color: var(--link-color);
|
||||
color: var(--background-color);
|
||||
background-color: var(--link-color);
|
||||
color: var(--background-color);
|
||||
}
|
||||
|
||||
#content .paragraphwpic {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#content .paragraphwpic p {
|
||||
width: 30%;
|
||||
flex-grow: 1;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-top: 0;
|
||||
width: 30%;
|
||||
flex-grow: 1;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#content .paragraphwpic img,
|
||||
.small {
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
margin-top: 5px;
|
||||
border: var(--border-color) solid;
|
||||
border-width: 1px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
margin-top: 5px;
|
||||
border: var(--border-color) solid;
|
||||
border-width: 1px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#content .paragraphwpic .small {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin: 0 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin: 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.commandline {
|
||||
background-color: var(--border-color);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
background-color: var(--border-color);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.commandline > * {
|
||||
color: var(--highlight-color) !important;
|
||||
|
||||
.commandline>* {
|
||||
color: var(--highlight-color) !important;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
color: var(--link-color);
|
||||
border-collapse: collapse;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px dashed var(--link-color);
|
||||
border-left: 1px solid var(--link-color);
|
||||
border-right: 1px solid var(--link-color);
|
||||
padding: 5px;
|
||||
border-bottom: 1px dashed var(--link-color);
|
||||
border-left: 1px solid var(--link-color);
|
||||
border-right: 1px solid var(--link-color);
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
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
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
|
@ -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">
|
||||
<head>
|
||||
<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="generator" content={Astro.generator} />
|
||||
<title>Cakey's home directory</title>
|
|
@ -8,7 +8,7 @@ import FriendsRow from "../../Components/v1/FriendsRow.astro";
|
|||
<html lang="en">
|
||||
<head>
|
||||
<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="generator" content={Astro.generator} />
|
||||
<title>Cakey's home directory</title>
|
||||
|
@ -57,7 +57,7 @@ import FriendsRow from "../../Components/v1/FriendsRow.astro";
|
|||
>Arch</a
|
||||
> with KDE, which is a really nice combo.
|
||||
</p>
|
||||
<img src="/Assets/Homepage/desktop.jpg" />
|
||||
<img src="/v1/Assets/Homepage/desktop.jpg" />
|
||||
</span>
|
||||
|
||||
<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
|
||||
movie.
|
||||
</p>
|
||||
<img class="small" src="/Assets/Homepage/thirdimpact.png" />
|
||||
<img class="small" src="/v1/Assets/Homepage/thirdimpact.png" />
|
||||
</span>
|
||||
|
||||
<p>
|