new style
This commit is contained in:
10
src/assets/git.svg
Normal file
10
src/assets/git.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="92pt" height="92pt" viewBox="0 0 92 92">
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path d="M0 .113h91.887V92H0Zm0 0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#a)">
|
||||
<path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 877 B |
11
src/assets/gitea.svg
Normal file
11
src/assets/gitea.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 640 640;" xml:space="preserve" viewBox="5.67 143.05 628.65 387.55">
|
||||
<g>
|
||||
<path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8 c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4 c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"></path>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2 c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5 c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5 c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3 c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1 C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4 c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7 S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55 c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8 l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"></path>
|
||||
<path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4 c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1 c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9 c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3 c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3 c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29 c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8 C343.2,346.5,335,363.3,326.8,380.1z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -15,6 +15,7 @@ interface Props {
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
|
||||
const { title, description, image = FallbackImage } = Astro.props;
|
||||
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
@@ -56,3 +57,14 @@ const { title, description, image = FallbackImage } = Astro.props;
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={new URL(image.src, Astro.url)} />
|
||||
<script is:inline>
|
||||
|
||||
if (sessionStorage.getItem("theme")) {
|
||||
document.documentElement.setAttribute("data-theme", sessionStorage.getItem("theme"));
|
||||
} else {
|
||||
sessionStorage.setItem("theme", "light")
|
||||
document.documentElement.setAttribute("data-theme", "light");
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@@ -3,33 +3,10 @@ const today = new Date();
|
||||
---
|
||||
|
||||
<footer>
|
||||
© {today.getFullYear()} Your name here. All rights reserved.
|
||||
© {today.getFullYear()} sirlilpanda. All rights reserved.
|
||||
<div class="social-links">
|
||||
<a href="https://m.webtoo.ls/@astro" target="_blank">
|
||||
<span class="sr-only">Follow Astro on Mastodon</span>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
width="32"
|
||||
height="32"
|
||||
astro-icon="social/mastodon"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://twitter.com/astrodotbuild" target="_blank">
|
||||
<span class="sr-only">Follow Astro on Twitter</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/twitter"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://github.com/withastro/astro" target="_blank">
|
||||
<span class="sr-only">Go to Astro's GitHub repo</span>
|
||||
<a href="https://github.com/sirlilpanda" target="_blank">
|
||||
<span class="sr-only">Go to my Github i barely use it anymore but have fun</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"
|
||||
><path
|
||||
fill="currentColor"
|
||||
@@ -42,9 +19,9 @@ const today = new Date();
|
||||
<style>
|
||||
footer {
|
||||
padding: 2em 1em 6em 1em;
|
||||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||
color: rgb(var(--gray));
|
||||
text-align: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.social-links {
|
||||
display: flex;
|
||||
@@ -52,6 +29,7 @@ const today = new Date();
|
||||
gap: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
text-decoration: none;
|
||||
color: rgb(var(--gray));
|
||||
|
||||
86
src/components/HamburgerIcon.astro
Normal file
86
src/components/HamburgerIcon.astro
Normal file
@@ -0,0 +1,86 @@
|
||||
---
|
||||
// code taken from here
|
||||
// thank you Author: Mikael Ainalem
|
||||
// https://www.sliderrevolution.com/resources/css-hamburger-menu/
|
||||
|
||||
interface Props {
|
||||
width: number,
|
||||
height: number,
|
||||
}
|
||||
|
||||
const { width, height } = Astro.props;
|
||||
---
|
||||
|
||||
<!-- thank you Mikael Ainalem for this really cool hamburger menu -->
|
||||
<svg class="ham hamRotate ham8" viewBox="0 0 100 100" width={width} height={height} onclick="this.classList.toggle('active')">
|
||||
<path
|
||||
class="line top"
|
||||
d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20" />
|
||||
<path
|
||||
class="line middle"
|
||||
d="m 30,50 h 40" />
|
||||
<path
|
||||
class="line bottom"
|
||||
d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20" />
|
||||
</svg>
|
||||
|
||||
|
||||
<style>
|
||||
.ham {
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: transform 400ms;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hamRotate.active {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.ham8 .top {
|
||||
stroke-dasharray: 40 160;
|
||||
}
|
||||
|
||||
.ham8 .middle {
|
||||
stroke-dasharray: 40 142;
|
||||
transform-origin: 50%;
|
||||
transition: transform 400ms, stroke 500ms ease;
|
||||
}
|
||||
|
||||
.ham8 .bottom {
|
||||
stroke-dasharray: 40 85;
|
||||
transform-origin: 50%;
|
||||
transition: transform 400ms, stroke-dashoffset 400ms, stroke 500ms ease;
|
||||
}
|
||||
|
||||
.ham8.active .top {
|
||||
stroke-dashoffset: -64px;
|
||||
stroke: var(--accent);
|
||||
|
||||
}
|
||||
|
||||
.ham8.active .middle {
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--accent);
|
||||
|
||||
}
|
||||
|
||||
.ham8.active .bottom {
|
||||
stroke-dashoffset: -64px;
|
||||
stroke: var(--accent);
|
||||
}
|
||||
|
||||
.line {
|
||||
fill:none;
|
||||
transition:
|
||||
stroke-dasharray 400ms,
|
||||
stroke-dashoffset 400ms,
|
||||
stroke 500ms ease;
|
||||
stroke: var(--text-color);
|
||||
stroke-width: 4;
|
||||
stroke-linecap:round;
|
||||
}
|
||||
</style>
|
||||
@@ -1,86 +1,560 @@
|
||||
---
|
||||
import { SITE_TITLE } from '../consts';
|
||||
import HeaderLink from './HeaderLink.astro';
|
||||
import Icon from './Icon.astro'
|
||||
import HambugerIcon from './HamburgerIcon.astro'
|
||||
---
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<h2><a href="/">{SITE_TITLE}</a></h2>
|
||||
<div class="internal-links">
|
||||
<HeaderLink href="/">Home</HeaderLink>
|
||||
<HeaderLink href="/blog">Blog</HeaderLink>
|
||||
<HeaderLink href="/about">About</HeaderLink>
|
||||
|
||||
<header id="header-bar">
|
||||
<div class="background">
|
||||
<div class="window-frame-wrapper", id="window-frame-wrapper">
|
||||
<div class="frame-top", id="frame-top"/>
|
||||
<div class="frame-bottom", id="frame-bottom"/>
|
||||
</div>
|
||||
<div class="social-links">
|
||||
<a href="https://m.webtoo.ls/@astro" target="_blank">
|
||||
<span class="sr-only">Follow Astro on Mastodon</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://twitter.com/astrodotbuild" target="_blank">
|
||||
<span class="sr-only">Follow Astro on Twitter</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://github.com/withastro/astro" target="_blank">
|
||||
<span class="sr-only">Go to Astro's GitHub repo</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
||||
></path></svg
|
||||
>
|
||||
<div class="sky", id="sky"/>
|
||||
</div>
|
||||
<div class="header-bar-wrapper">
|
||||
<div class="">
|
||||
<a href="/" class="header-icon">
|
||||
<Icon height={72} width={72} />
|
||||
</a>
|
||||
<div class="theme-toggle" id="theme-toggle" onclick="handle_theme_toggle()">
|
||||
<div class="clock-face">
|
||||
<div class="clock-display" id="clock-display">12 : 23</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="hamburger-menu-button" onclick="handle_nav()" id="hamburger-menu-button">
|
||||
<HambugerIcon height={52} width={52} />
|
||||
</div>
|
||||
|
||||
<nav id="nav">
|
||||
<HeaderLink href="/">Home()</HeaderLink>
|
||||
<HeaderLink href="/articles">Articles()</HeaderLink>
|
||||
<HeaderLink href="/guestBook">guestBook()</HeaderLink>
|
||||
<HeaderLink href="/pictures">pictures()</HeaderLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<style>
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
background-color: rgba(rgb(var(--background)), 0.2);
|
||||
/* background: var(--background-colour); */
|
||||
backdrop-filter: blur(5px);
|
||||
box-shadow: var(--box-shadow);
|
||||
position: sticky;
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://onio.neocities.org" title="Visit Onio Café">
|
||||
<img src="https://onio.neocities.org/thebutton.gif" alt="Come Chat With Us!" width="88" height="31">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script is:inline>
|
||||
/* Hamburger button management */
|
||||
let opened = false;
|
||||
|
||||
/* Set the width of the side navigation to 250px */
|
||||
function handle_nav() {
|
||||
if (opened === true) {
|
||||
document.getElementById("nav").classList.remove("active");
|
||||
console.log("closed");
|
||||
opened = false;
|
||||
} else {
|
||||
document.getElementById("nav").classList.add("active");
|
||||
document.getElementById("hamburger-menu-button").focus();
|
||||
console.log("opened");
|
||||
opened = true;
|
||||
}
|
||||
}
|
||||
|
||||
const slat_spaceing = 180;
|
||||
let number_of_slats = 0;
|
||||
function position_window_frame() {
|
||||
const header = document.getElementById("header-bar");
|
||||
const window_frame = document.getElementById("window-frame-wrapper");
|
||||
const header_bounding_box = header.getBoundingClientRect();
|
||||
console.log(header_bounding_box)
|
||||
const frame_bottom = document.getElementById("frame-bottom");
|
||||
const frame_bottom_bounding_box = frame_bottom.getBoundingClientRect();;
|
||||
const em = parseFloat(getComputedStyle(header).fontSize);
|
||||
|
||||
number_of_slats = Math.ceil(header_bounding_box.width / slat_spaceing);
|
||||
console.log(`number of slats ${number_of_slats}`)
|
||||
|
||||
for (let i = 0; i < number_of_slats; i++) {
|
||||
const slat = document.createElement('div');
|
||||
place_window_slats(slat, i, header_bounding_box, em)
|
||||
window_frame.appendChild(slat)
|
||||
}
|
||||
|
||||
frame_bottom.style.top = `${header_bounding_box.bottom - frame_bottom_bounding_box.height}px`;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
position_window_frame()
|
||||
function place_window_slats(slat, i, bound_box, em) {
|
||||
// console.log(`i ${i}`)
|
||||
// console.log(slat)
|
||||
slat.className = "slat"
|
||||
slat.style.position = "absolute";
|
||||
slat.style.height = `${bound_box.height}px`;
|
||||
slat.style.width = `${em*0.5}px`;
|
||||
slat.style.backgroundColor = "var(--frame-colour)"
|
||||
slat.style.zIndex = "1"
|
||||
slat.style.left = `${slat_spaceing * i}px`
|
||||
}
|
||||
|
||||
h2 a,
|
||||
h2 a.active {
|
||||
text-decoration: none;
|
||||
function remove_slats() {
|
||||
const window_frame = document.getElementById("window-frame-wrapper");
|
||||
|
||||
for (let child of window_frame.children) {
|
||||
if (child.className == "slat") {
|
||||
child.remove()
|
||||
}
|
||||
}
|
||||
}
|
||||
nav {
|
||||
|
||||
const number_of_stars = 300;
|
||||
function fill_stars() {
|
||||
|
||||
// get the size of the header
|
||||
const header = document.getElementById("header-bar");
|
||||
|
||||
// header.style.background = "red";
|
||||
const header_bounding_box = header.getBoundingClientRect();
|
||||
console.log(header_bounding_box.width)
|
||||
console.log(header_bounding_box.width/2)
|
||||
let stars = document.getElementById("sky")
|
||||
stars.setAttribute("width", header_bounding_box.width);
|
||||
stars.setAttribute("height", header_bounding_box.height);
|
||||
|
||||
for (let i = 0; i < number_of_stars; ++i) {
|
||||
const star = document.createElement('div');
|
||||
place_star(star, header_bounding_box)
|
||||
console.log(star.style.top)
|
||||
stars.appendChild(star)
|
||||
}
|
||||
}
|
||||
fill_stars()
|
||||
|
||||
function place_star(star, header_bounding_box) {
|
||||
star.classList.add('star');
|
||||
star.style.background = "white"
|
||||
|
||||
const star_size = Math.random() * 2 + 1;
|
||||
star.className = 'star';
|
||||
star.style.position = "absolute";
|
||||
star.style.width = `${star_size}px`
|
||||
star.style.height = `${star_size}px`
|
||||
// multiply by 3
|
||||
const center_offset = Math.random() * header_bounding_box.width/2;
|
||||
star.style.left = `${header_bounding_box.width/2}px`
|
||||
star.style.top = `${header_bounding_box.height}px`
|
||||
star.style.boxShadow = "0px 0px 14px white"
|
||||
star.style.borderRadius = "100%"
|
||||
star.style.transition = "250ms"
|
||||
star.style.animationDuration = `${Math.random() * 20 + 10}s`;
|
||||
|
||||
const ani_duration = (Math.random() * 30000 + 30000);
|
||||
const ani_start_time = ani_duration * Math.random();
|
||||
|
||||
const orbit_keyframes = new KeyframeEffect(
|
||||
star,
|
||||
[
|
||||
{transform : `rotate(0deg) translateX(${center_offset}px) rotate(0deg)`},
|
||||
{transform : `rotate(-180deg) translateX(${center_offset}px) rotate(0deg)`}
|
||||
],
|
||||
{
|
||||
duration : ani_duration, // in ms
|
||||
iterations : "Infinity",
|
||||
iterationStart : ani_start_time
|
||||
}
|
||||
)
|
||||
|
||||
const twinkle_keyframes = new KeyframeEffect(
|
||||
star,
|
||||
[
|
||||
{opacity: 0.8},
|
||||
{opacity: 0.3},
|
||||
{opacity: 0.8}
|
||||
],
|
||||
{
|
||||
duration : ani_duration, // in ms
|
||||
iterations : "Infinity",
|
||||
iterationStart : ani_start_time
|
||||
}
|
||||
)
|
||||
|
||||
const orbit_animation = new Animation(orbit_keyframes, document.timeline);
|
||||
const twinkle_animation = new Animation(twinkle_keyframes, document.timeline);
|
||||
orbit_animation.play()
|
||||
twinkle_animation.play()
|
||||
}
|
||||
|
||||
function hide_stars() {
|
||||
let stars = document.getElementById("sky")
|
||||
|
||||
for (let child of stars.children) {
|
||||
if (child.className == "star") {
|
||||
child.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function show_stars() {
|
||||
let stars = document.getElementById("sky")
|
||||
|
||||
for (let child of stars.children) {
|
||||
if (child.className == "star") {
|
||||
child.style.display = "unset";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function replace_stars() {
|
||||
let stars = document.getElementById("sky")
|
||||
const header = document.getElementById("header-bar");
|
||||
const header_bounding_box = header.getBoundingClientRect();
|
||||
|
||||
for (let child of stars.children) {
|
||||
if (child.className == "star") {
|
||||
place_star(child, header_bounding_box)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function place_cloud(cloud, bound_box) {
|
||||
cloud.className = "cloud"
|
||||
|
||||
// cloud.style.left = `${Math.random() * bound_box.width}px`
|
||||
cloud.style.top = `${Math.random() * bound_box.height}px`
|
||||
cloud.style.position = "absolute";
|
||||
|
||||
// random circles around the top half of the cloud
|
||||
const number_of_parts = Math.random() * 8 + 3;
|
||||
for (let i = 0; i < number_of_parts; i++) {
|
||||
const fluff = document.createElement('div')
|
||||
fluff.style.backgroundColor = "white"
|
||||
fluff.style.position = "absolute";
|
||||
|
||||
fluff.style.borderRadius = "100%"
|
||||
const fluff_size = Math.random() * 75 + 20
|
||||
|
||||
fluff.style.width = `${fluff_size}px`
|
||||
fluff.style.height = `${fluff_size}px`
|
||||
|
||||
const angle = Math.random() * 180
|
||||
const rad = Math.random() * 20 + 3
|
||||
fluff.style.top = `${rad*Math.sin(angle)}px`
|
||||
fluff.style.left = `${rad*Math.cos(angle)}px`
|
||||
fluff.style.boxShadow = "0px 0px 5px white"
|
||||
|
||||
const ani_duration = (Math.random() * 15000 + 5000);
|
||||
const ani_start_time = ani_duration * Math.random();
|
||||
|
||||
const wiggle_keyframes = new KeyframeEffect(
|
||||
fluff,
|
||||
[
|
||||
{transform : `translateX(0px) translateY(0px)`},
|
||||
{transform : `translateX(${Math.random() * 5 + 3}px) translateY(${Math.random() * 5 + 2}px)`},
|
||||
{transform : `translateX(0px) translateY(0px)`}
|
||||
],
|
||||
{
|
||||
duration : ani_duration, // in ms
|
||||
iterations : "Infinity",
|
||||
iterationStart : ani_start_time
|
||||
}
|
||||
)
|
||||
|
||||
const wiggle_animation = new Animation(wiggle_keyframes, document.timeline);
|
||||
wiggle_animation.play()
|
||||
|
||||
cloud.appendChild(fluff);
|
||||
}
|
||||
const travel_ani_duration = (Math.random() * 300000 + 100000);
|
||||
const travel_ani_start_time = travel_ani_duration * Math.random();
|
||||
const travel_keyframes = new KeyframeEffect(
|
||||
cloud,
|
||||
[
|
||||
{transform : `translateX(-100px) translateY(-100px)`},
|
||||
{transform : `translateX(${bound_box.width}px) translateY(${Math.random() * bound_box.height}px)`}
|
||||
],
|
||||
{
|
||||
duration : travel_ani_duration, // in ms
|
||||
iterations : "Infinity",
|
||||
iterationStart : travel_ani_start_time
|
||||
}
|
||||
)
|
||||
|
||||
const travel_animation = new Animation(travel_keyframes, document.timeline);
|
||||
travel_animation.play()
|
||||
}
|
||||
|
||||
function hide_cloud() {
|
||||
let sky = document.getElementById("sky")
|
||||
|
||||
for (let child of sky.children) {
|
||||
if (child.className == "cloud") {
|
||||
child.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
function show_cloud() {
|
||||
let sky = document.getElementById("sky")
|
||||
|
||||
for (let child of sky.children) {
|
||||
if (child.className == "cloud") {
|
||||
child.style.display = "unset";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const number_of_clouds = 20;
|
||||
function fill_sky() {
|
||||
// get the size of the header
|
||||
const header = document.getElementById("header-bar");
|
||||
const header_bounding_box = header.getBoundingClientRect();
|
||||
console.log(header_bounding_box)
|
||||
let sky = document.getElementById("sky")
|
||||
sky.setAttribute("width", header_bounding_box.width);
|
||||
sky.setAttribute("height", header_bounding_box.height);
|
||||
|
||||
for (let i = 0; i < number_of_clouds; ++i) {
|
||||
const cloud = document.createElement('div');
|
||||
place_cloud(cloud, header_bounding_box)
|
||||
sky.appendChild(cloud)
|
||||
}
|
||||
}
|
||||
fill_sky()
|
||||
|
||||
function light_mode() {
|
||||
hide_stars()
|
||||
show_cloud()
|
||||
}
|
||||
|
||||
function dark_mode() {
|
||||
show_stars()
|
||||
hide_cloud()
|
||||
}
|
||||
|
||||
|
||||
let theme = document.documentElement.getAttribute("data-theme");
|
||||
|
||||
function handle_theme_toggle() {
|
||||
console.log("clicked")
|
||||
if (theme === "dark") {
|
||||
theme = "light"
|
||||
light_mode()
|
||||
document.documentElement.setAttribute("data-theme", "light");
|
||||
sessionStorage.setItem("theme", "light");
|
||||
console.log("light mode")
|
||||
return;
|
||||
}
|
||||
if (theme === "light") {
|
||||
theme = "dark"
|
||||
dark_mode()
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
sessionStorage.setItem("theme", "dark");
|
||||
console.log("dark mode")
|
||||
return;
|
||||
}
|
||||
}
|
||||
console.log(`theme : ${theme}`)
|
||||
if (theme === "dark") {
|
||||
dark_mode()
|
||||
theme = "dark";
|
||||
} else {
|
||||
light_mode()
|
||||
theme = "light";
|
||||
}
|
||||
|
||||
|
||||
addEventListener("resize", (event) => {
|
||||
remove_slats()
|
||||
position_window_frame()
|
||||
|
||||
replace_stars()
|
||||
})
|
||||
|
||||
function update_clock() {
|
||||
let display = document.getElementById("clock-display");
|
||||
let current_time = new Date()
|
||||
display.innerHTML = `${current_time.getHours()} : ${current_time.getMinutes().toString().padStart(2, "0")}`
|
||||
}
|
||||
update_clock()
|
||||
|
||||
window.setInterval(update_clock, 1000)
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
:root {
|
||||
--header-height: 4em;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: absolute;
|
||||
transform: translateY(-0.5em) translateX(0.5em);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.clock-face {
|
||||
display: flex;
|
||||
flex-direction: row;;
|
||||
padding: 0.2em;
|
||||
border-radius: 20% 20% 0% 0%;
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
.clock-display {
|
||||
border-radius: 20%;
|
||||
background-color: #101010;
|
||||
padding-left: 0.1em;
|
||||
padding-right: 0.1em;
|
||||
padding-top: 0.1em;
|
||||
color: red;
|
||||
text-shadow: 0px 0px 5px red;
|
||||
}
|
||||
|
||||
.slat {
|
||||
background-color: var(--frame-colour);
|
||||
}
|
||||
|
||||
.frame-top {
|
||||
position: absolute;
|
||||
height: 0.5em;
|
||||
width: 100%;
|
||||
background-color: var(--frame-colour);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.frame-bottom {
|
||||
position: absolute;
|
||||
height: 0.5em;
|
||||
width: 100%;
|
||||
background-color: var(--frame-colour);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sky {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
min-height: 10em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background {
|
||||
/* position: absolute; */
|
||||
/* clip-path: rect(0% 100% 100% 0%); */
|
||||
width: 100vw;
|
||||
min-height: 10em;
|
||||
transition: background 250ms;
|
||||
background: var(--sky-colour);
|
||||
}
|
||||
|
||||
header {
|
||||
min-height: 10em;
|
||||
width: 100vw;
|
||||
/* background: linear-gradient(360deg,rgba(8, 0, 26, 1) 0%, rgba(7, 0, 20, 1) 37%, rgba(0, 0, 0, 1) 100%); */
|
||||
}
|
||||
|
||||
.header-bar-wrapper {
|
||||
z-index: 99;
|
||||
min-height: 10em;
|
||||
position: absolute;
|
||||
transform: translateY(-10em);
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* justify-content: space-evenly; */
|
||||
height: var(--header-height);
|
||||
margin: 0;
|
||||
box-shadow: 0 2px 8px rgba(var(--text-color), 5%);
|
||||
transition: 100ms;
|
||||
}
|
||||
nav a {
|
||||
padding: 1em 0.5em;
|
||||
color: var(--black);
|
||||
border-bottom: 4px solid transparent;
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
nav, nav.active {
|
||||
width: auto;
|
||||
}
|
||||
nav a.active {
|
||||
text-decoration: none;
|
||||
border-bottom-color: var(--accent);
|
||||
nav {
|
||||
padding-right: 2em;
|
||||
}
|
||||
.social-links,
|
||||
.social-links a {
|
||||
|
||||
.header-icon {
|
||||
margin-left: 1em;
|
||||
z-index: 4;
|
||||
transform: rotateZ(-4deg);
|
||||
background-color: rgba(250, 235, 215, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
transition: 150ms;
|
||||
}
|
||||
|
||||
.header-icon:hover {
|
||||
transform: translateY(-0.2em) rotateZ(-2deg);
|
||||
box-shadow: 19px 29px 70px -19px rgba(80,80,80,0.75);
|
||||
}
|
||||
|
||||
.hamburger-menu-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.Icon {
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
|
||||
.theme-toggle {
|
||||
position: absolute;
|
||||
transform: translateY(-0.72em) translateX(0.5em);
|
||||
z-index: 99;
|
||||
}
|
||||
/* Mobile styles */
|
||||
|
||||
|
||||
.hamburger-menu-button {
|
||||
float: right;
|
||||
max-height: 64px;
|
||||
fill: var(--text-color);
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: 250ms;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
z-index: 89;
|
||||
display: unset;
|
||||
}
|
||||
|
||||
nav {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
max-width: 100%;
|
||||
z-index: 88;
|
||||
background-color: rgb(from var(--header-color) r g b / 0.4);
|
||||
backdrop-filter: blur(16px);
|
||||
overflow-x: hidden;
|
||||
padding-top: var(--header-height);
|
||||
padding-bottom: 100%;
|
||||
padding-right: 0em;
|
||||
transition: 250ms;
|
||||
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||
}
|
||||
|
||||
nav.active {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -16,9 +16,43 @@ const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
transition: 250ms;
|
||||
|
||||
padding: 0.5em 0.5em;
|
||||
color: var(--text-color);
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.active {
|
||||
font-weight: bolder;
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
transition: 250ms;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
a {
|
||||
padding-left: 1em;
|
||||
display: block;
|
||||
padding: 0.5em 0.5em;
|
||||
color: var(--text-color);
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.active {
|
||||
text-decoration: none;
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -33,7 +33,7 @@ const { height = 36, width = 36 } = Astro.props;
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
/* svg {
|
||||
border: 1px solid purple;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
124
src/components/skillCard.astro
Normal file
124
src/components/skillCard.astro
Normal file
@@ -0,0 +1,124 @@
|
||||
---
|
||||
// Import the global.css file here so that it is included on
|
||||
// all pages through the use of the <BaseHead /> component.
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
skill_level: string;
|
||||
}
|
||||
|
||||
const { title, description, image, skill_level, } = Astro.props;
|
||||
---
|
||||
|
||||
|
||||
|
||||
<div class="box">
|
||||
<div class="grid_wrapper">
|
||||
<!-- 2,3 -->
|
||||
<img src={image} alt="">
|
||||
<div class="title">{title}</div>
|
||||
<div class="skill_level">{skill_level}</div>
|
||||
<div class="description"><slot /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.box > .grid_wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
gap: 0px;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 2em;
|
||||
background-color: var(--skill-card-colour);
|
||||
width: 80%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
border-radius: 3em;
|
||||
border-width: 1em;
|
||||
border-color: var(--skill-card-colour);
|
||||
transition-duration: 400ms;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.box:hover {
|
||||
box-shadow: 10px 10px 8px #000000;
|
||||
transform: translate(0, -0.5em);
|
||||
}
|
||||
|
||||
@keyframes exp-bar {
|
||||
0% {background: linear-gradient(#e66465, #9198e5)}
|
||||
100% {background: linear-gradient(#9198e5, #e66465)}
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_wrapper img {
|
||||
height: 80%;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-right: 0.25em;
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
|
||||
.grid_wrapper .description {
|
||||
/* background-color: blue; */
|
||||
width: auto;
|
||||
grid-column: 2 / span 3;
|
||||
}
|
||||
|
||||
.grid_wrapper .title {
|
||||
color: var(--title-colour);
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
.grid_wrapper .title:after {
|
||||
content: ":";
|
||||
/* width: 5em; */
|
||||
}
|
||||
|
||||
|
||||
.grid_wrapper .skill_level {
|
||||
border-radius: 4em;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
min-width: fit-content;
|
||||
min-height: fit-content;
|
||||
color: #000000;
|
||||
background: linear-gradient(-24deg, #00ff00, #94ff7e, #acff4e, #27ff88);
|
||||
background-size: 400% 400%;
|
||||
grid-column: 3 / span 3;
|
||||
width: auto;
|
||||
transition: 250ms;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.grid_wrapper .skill_level {
|
||||
animation: gradient 2s linear infinite reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.box:hover .skill_level {
|
||||
animation: gradient 2s linear infinite reverse;
|
||||
}
|
||||
|
||||
</style>
|
||||
9
src/env.d.ts
vendored
9
src/env.d.ts
vendored
@@ -8,3 +8,12 @@ type Runtime = import("@astrojs/cloudflare").Runtime<Env>;
|
||||
declare namespace App {
|
||||
interface Locals extends Runtime {}
|
||||
}
|
||||
|
||||
interface Window {
|
||||
theme: {
|
||||
setTheme: (theme: "auto" | "dark" | "light") => void;
|
||||
getTheme: () => "auto" | "dark" | "light";
|
||||
getSystemTheme: () => "light" | "dark";
|
||||
getDefaultTheme: () => "auto" | "dark" | "light";
|
||||
};
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
---
|
||||
import AboutHeroImage from '../assets/blog-placeholder-about.jpg';
|
||||
import Layout from '../layouts/BlogPost.astro';
|
||||
export const prerender = true;
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="About Me"
|
||||
description="Lorem ipsum dolor sit amet"
|
||||
pubDate={new Date('August 08 2021')}
|
||||
heroImage={AboutHeroImage}
|
||||
>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
|
||||
viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam
|
||||
adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus
|
||||
et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus
|
||||
vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque
|
||||
sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non
|
||||
tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non
|
||||
blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
|
||||
porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
|
||||
massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc.
|
||||
Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis
|
||||
bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra
|
||||
massa massa ultricies mi.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
|
||||
suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
|
||||
nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
|
||||
turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
|
||||
dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
|
||||
semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
|
||||
vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
|
||||
facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam
|
||||
vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla
|
||||
urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
|
||||
viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
|
||||
scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
|
||||
gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
|
||||
pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
|
||||
blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
|
||||
cursus metus aliquam eleifend mi.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
|
||||
nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
|
||||
tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
|
||||
ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
|
||||
proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
|
||||
</p>
|
||||
</Layout>
|
||||
@@ -16,6 +16,7 @@ const post = Astro.props;
|
||||
const { Content } = await render(post);
|
||||
---
|
||||
|
||||
|
||||
<BlogPost {...post.data}>
|
||||
<Content />
|
||||
</BlogPost>
|
||||
@@ -95,7 +95,7 @@ const posts = (await getCollection('blog')).sort(
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<a href={`/blog/${post.id}/`}>
|
||||
<a href={`/articles/${post.id}/`}>
|
||||
{post.data.heroImage && (
|
||||
<Image width={720} height={360} src={post.data.heroImage} alt="" />
|
||||
)}
|
||||
99
src/pages/guestBook/index.astro
Normal file
99
src/pages/guestBook/index.astro
Normal file
@@ -0,0 +1,99 @@
|
||||
---
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
|
||||
import { drizzle } from "drizzle-orm/d1";
|
||||
import { GuestLog } from "../../schema";
|
||||
import { env } from "cloudflare:workers";
|
||||
|
||||
export const prerender = false
|
||||
|
||||
const db = drizzle(env.DB);
|
||||
|
||||
if (Astro.request.method === 'POST') {
|
||||
// Parse form data
|
||||
const formData = await Astro.request.formData();
|
||||
console.log(formData);
|
||||
const name = formData.get('name');
|
||||
const message = formData.get('message');
|
||||
const website_link = formData.get('website_link');
|
||||
|
||||
if (
|
||||
typeof name === 'string' &&
|
||||
typeof website_link === 'string' &&
|
||||
typeof message === 'string' &&
|
||||
name !== "" &&
|
||||
message !== ""
|
||||
) {
|
||||
|
||||
if (message.length >= 255) {
|
||||
return;
|
||||
}
|
||||
|
||||
await db.insert(GuestLog).values([{
|
||||
name : name,
|
||||
message : message,
|
||||
website_link : website_link,
|
||||
date_viewed : new Date(),
|
||||
}]);
|
||||
}
|
||||
}
|
||||
|
||||
let guest_logs : {id: number; name: string; message: string | null; date: Date;}[] = [];
|
||||
try {
|
||||
guest_logs = await db
|
||||
.select()
|
||||
.from(GuestLog)
|
||||
.orderBy(GuestLog.date);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
guest_logs.forEach(log => {
|
||||
console.log(log)
|
||||
});
|
||||
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title="guest book" description="a guest book of everyone who have visited my site" />
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<section>
|
||||
<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1>
|
||||
<form method="POST" style="display: grid">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" name="name" />
|
||||
|
||||
<label for="website_link">Website link(optional)</label>
|
||||
<input id="website_link" name="website_link" />
|
||||
|
||||
<label for="message">message</label>
|
||||
<textarea id="message" name="message"></textarea>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
<h1>guest book</h1>
|
||||
<ul>
|
||||
{
|
||||
guest_logs.map((log) => (
|
||||
<li>
|
||||
<p>[{log.date.toDateString()}] {log.name}
|
||||
{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}
|
||||
: {log.message}</p>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +1,31 @@
|
||||
---
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Icon from '../components/Icon.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import FormattedDate from '../components/FormattedDate.astro';
|
||||
import { Image } from 'astro:assets';
|
||||
|
||||
import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
|
||||
|
||||
import SkillCard from '../components/skillCard.astro'
|
||||
import { desc } from "drizzle-orm";
|
||||
import { drizzle } from "drizzle-orm/d1";
|
||||
import { GuestLog } from "../schema";
|
||||
import { env } from "cloudflare:workers";
|
||||
import { GuestLog } from "../schema";
|
||||
|
||||
export const prerender = false
|
||||
|
||||
const db = drizzle(env.DB);
|
||||
|
||||
if (Astro.request.method === 'POST') {
|
||||
// Parse form data
|
||||
const formData = await Astro.request.formData();
|
||||
console.log(formData);
|
||||
const name = formData.get('name');
|
||||
const message = formData.get('message');
|
||||
const website_link = formData.get('website_link');
|
||||
|
||||
if (
|
||||
typeof name === 'string' &&
|
||||
typeof website_link === 'string' &&
|
||||
typeof message === 'string' &&
|
||||
name !== "" &&
|
||||
message !== ""
|
||||
) {
|
||||
|
||||
if (message.length >= 255) {
|
||||
return;
|
||||
}
|
||||
|
||||
await db.insert(GuestLog).values([{
|
||||
name : name,
|
||||
message : message,
|
||||
website_link : website_link,
|
||||
date_viewed : new Date(),
|
||||
}]);
|
||||
}
|
||||
}
|
||||
|
||||
let guest_logs : {id: number; name: string; message: string | null; date: Date;}[] = [];
|
||||
try {
|
||||
guest_logs = await db
|
||||
.select()
|
||||
.from(GuestLog)
|
||||
.orderBy(GuestLog.date);
|
||||
.orderBy(GuestLog.date)
|
||||
.limit(20);
|
||||
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
@@ -58,6 +33,15 @@ guest_logs = await db
|
||||
guest_logs.forEach(log => {
|
||||
console.log(log)
|
||||
});
|
||||
|
||||
|
||||
const posts = (await getCollection('blog')).sort(
|
||||
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
@@ -68,65 +52,91 @@ guest_logs.forEach(log => {
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<div class="IntroHeader"></div>
|
||||
<h1 class="greeting">Hello!!, im sirlilpanda</h1>
|
||||
<Icon />
|
||||
|
||||
<!-- <div class="IntroHeader"></div> -->
|
||||
<div class="greeting-wrapper">
|
||||
<h1 class="greeting">Hello!!, im sirlilpanda</h1>
|
||||
<Icon height={128} width={128}/>
|
||||
</div>
|
||||
|
||||
<h1 id="about_me">About me</h1>
|
||||
<p1>
|
||||
im an insane computer engineer who has to many hobbies and projects for me to actually work on.
|
||||
That is just the best way to describe me you think of a hobby ive probably dabbled in it.
|
||||
just a friendly neighborhood technomancer
|
||||
</p1>
|
||||
|
||||
<h1>guest book</h1>
|
||||
<ul>
|
||||
<p>
|
||||
click the clock in the corner if you want to change to dark mode. <br/>
|
||||
im still not full happy with the look of this website and will contiune to make changes.
|
||||
</p>
|
||||
|
||||
<h3>check out my lastest <a href={`/articles/${posts[0].id}/`}>blog post</a></h3>
|
||||
<div class="preview-post">
|
||||
<a href={`/articles/${posts[0].id}/`}>
|
||||
{posts[0].data.heroImage && (
|
||||
<Image width={720} height={360} src={posts[0].data.heroImage} alt="" />
|
||||
)}
|
||||
<h4 class="title">{posts[0].data.title}</h4>
|
||||
<p class="date">
|
||||
<FormattedDate date={posts[0].data.pubDate} />
|
||||
</p>
|
||||
<p>{posts[0].data.description}</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>consider adding to the <a href="/guestBook">guestbook</a></h3>
|
||||
<h5>heres what others had to say already</h5>
|
||||
<ul class="lastest-guestbook-logs">
|
||||
{
|
||||
guest_logs.map((log) => (
|
||||
<li>
|
||||
<p>[{log.date.toDateString()}] {log.name}
|
||||
{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}
|
||||
: {log.message}</p>
|
||||
<p class="title">[{log.date.toDateString()}] {log.name}
|
||||
{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}:</p>
|
||||
<p class="message">{log.message}</p>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1>
|
||||
<form method="POST" style="display: grid">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" name="name" />
|
||||
|
||||
<label for="website_link">Website link(optional)</label>
|
||||
<input id="website_link" name="website_link" />
|
||||
|
||||
<label for="message">message</label>
|
||||
<textarea id="message" name="message"></textarea>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
<h3>take my button, i will be collecting some soon too!</h3>
|
||||
|
||||
<textarea class="button-copy">
|
||||
<a href="https://sirlilpanda.studio" title="Visit sirlilpandas website">
|
||||
<img
|
||||
src="https://sirlilpanda.studio/public/panda.gif"
|
||||
alt="check out a man driven to insanity"
|
||||
width=88 height=31
|
||||
>
|
||||
</a>
|
||||
</textarea>
|
||||
|
||||
|
||||
<a href="https://sirlilpanda.studio" title="Visit sirlilpandas website">
|
||||
<img src="panda_big.gif" alt="check out a man driven to insanity" width={88*4} height={31*4}>
|
||||
<img
|
||||
src="panda_big.gif" alt="check out a man driven to insanity" width={88*4} height={31*4}>
|
||||
</a>
|
||||
|
||||
<a href="https://onio.neocities.org" title="Visit Onio Café">
|
||||
<img src="https://onio.neocities.org/thebutton.gif" alt="Come Chat With Us!" width="88" height="31">
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
<style>
|
||||
.IntroHeader {
|
||||
display: flexbox;
|
||||
|
||||
.button-copy {
|
||||
font-size: 1em;
|
||||
color: var(--text-color);
|
||||
height: 10em;
|
||||
background: var(--background-colour);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes gradient {
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 90%;
|
||||
}
|
||||
@@ -163,4 +173,57 @@ guest_logs.forEach(log => {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.preview-post {
|
||||
border-radius: 2em;
|
||||
padding-top: 1em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
background: var(--background-colour);
|
||||
border-style: solid;
|
||||
border-color: blanchedalmond;
|
||||
box-shadow: var(--box-shadow);
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
|
||||
.Icon {
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.greeting-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.lastest-guestbook-logs {
|
||||
border-radius: 2em;
|
||||
padding: 1em;
|
||||
background: var(--background-colour);
|
||||
border-style: solid;
|
||||
border-color: blanchedalmond;
|
||||
box-shadow: var(--box-shadow);
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
|
||||
ul > li {
|
||||
margin-top: 1em;
|
||||
border-radius: 1em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
border-style: solid;
|
||||
border-color: blanchedalmond;
|
||||
transition: 250ms;
|
||||
background: var(--background-colour);
|
||||
}
|
||||
|
||||
ul > li:hover {
|
||||
transform: translateY(-0.5em);
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
ul > li:nth-of-type(odd) {
|
||||
background: var(--main-background-colour);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
99
src/pages/pictures/index.astro
Normal file
99
src/pages/pictures/index.astro
Normal file
@@ -0,0 +1,99 @@
|
||||
---
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
|
||||
import { drizzle } from "drizzle-orm/d1";
|
||||
import { GuestLog } from "../../schema";
|
||||
import { env } from "cloudflare:workers";
|
||||
|
||||
export const prerender = false
|
||||
|
||||
const db = drizzle(env.DB);
|
||||
|
||||
if (Astro.request.method === 'POST') {
|
||||
// Parse form data
|
||||
const formData = await Astro.request.formData();
|
||||
console.log(formData);
|
||||
const name = formData.get('name');
|
||||
const message = formData.get('message');
|
||||
const website_link = formData.get('website_link');
|
||||
|
||||
if (
|
||||
typeof name === 'string' &&
|
||||
typeof website_link === 'string' &&
|
||||
typeof message === 'string' &&
|
||||
name !== "" &&
|
||||
message !== ""
|
||||
) {
|
||||
|
||||
if (message.length >= 255) {
|
||||
return;
|
||||
}
|
||||
|
||||
await db.insert(GuestLog).values([{
|
||||
name : name,
|
||||
message : message,
|
||||
website_link : website_link,
|
||||
date_viewed : new Date(),
|
||||
}]);
|
||||
}
|
||||
}
|
||||
|
||||
let guest_logs : {id: number; name: string; message: string | null; date: Date;}[] = [];
|
||||
try {
|
||||
guest_logs = await db
|
||||
.select()
|
||||
.from(GuestLog)
|
||||
.orderBy(GuestLog.date);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
guest_logs.forEach(log => {
|
||||
console.log(log)
|
||||
});
|
||||
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title="guest book" description="a guest book of everyone who have visited my site" />
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<section>
|
||||
<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1>
|
||||
<form method="POST" style="display: grid">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" name="name" />
|
||||
|
||||
<label for="website_link">Website link(optional)</label>
|
||||
<input id="website_link" name="website_link" />
|
||||
|
||||
<label for="message">message</label>
|
||||
<textarea id="message" name="message"></textarea>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
<h1>guest book</h1>
|
||||
<ul>
|
||||
{
|
||||
guest_logs.map((log) => (
|
||||
<li>
|
||||
<p>[{log.date.toDateString()}] {log.name}
|
||||
{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}
|
||||
: {log.message}</p>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
@@ -11,7 +11,6 @@
|
||||
--gray-dark: 34, 41, 57;
|
||||
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
|
||||
|
||||
|
||||
--yellow-light-theme: #f5c300;
|
||||
--pink-light-theme: #a4036f;
|
||||
--blue-light-theme: #048ba8;
|
||||
@@ -19,7 +18,7 @@
|
||||
--text-color-light-theme: #101010;
|
||||
--title-color-light-theme: var(--yellow-light-theme);
|
||||
--link-color-light-theme: var(--blue-light-theme);
|
||||
--background-light-theme: #ffffff;
|
||||
--background-light-theme: #cfffc0;
|
||||
--header-light-theme: #f2f8ff;
|
||||
--gray-light-theme: rgb(34, 41, 57);
|
||||
|
||||
@@ -43,23 +42,27 @@
|
||||
0 16px 32px rgba(var(--black), 33%);
|
||||
|
||||
--box-shadow-lighter: 0 2px 6px rgba(var(--black), 50%), 0 8px 24px rgba(var(--black), 20%);
|
||||
|
||||
|
||||
/* --accent: #2337ff;
|
||||
--accent-dark: #000d8a;
|
||||
--black: 15, 18, 25;
|
||||
--gray: 96, 115, 159;
|
||||
--gray-light: 229, 233, 240;
|
||||
--gray-dark: 34, 41, 57;
|
||||
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
|
||||
--box-shadow:
|
||||
0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
|
||||
0 16px 32px rgba(var(--gray), 33%); */
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root[data-theme="light"] {
|
||||
/* defaults to dark theme */
|
||||
--yellow : var(--yellow-light-theme);
|
||||
--pink : var(--pink-light-theme);
|
||||
--blue : var(--blue-light-theme);
|
||||
--green : var(--green-light-theme);
|
||||
--text-color: var(--text-color-light-theme);
|
||||
--title-color: var(--title-color-light-theme);
|
||||
--link-color: var(--link-color-light-theme);
|
||||
--background-colour : var(--background-light-theme);
|
||||
--header-color: var(--header-light-theme);
|
||||
--gray: var(--gray-light-theme);
|
||||
--sky-colour : linear-gradient(#3f67b5, #6baadf, #b5d1e8);
|
||||
--frame-colour : #c2c2c2;
|
||||
--main-background-colour : #fffeab;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
/* defaults to dark theme */
|
||||
:root {
|
||||
--yellow : var(--yellow-dark-theme);
|
||||
--pink : var(--pink-dark-theme);
|
||||
--blue : var(--blue-dark-theme);
|
||||
@@ -70,8 +73,9 @@
|
||||
--background-colour : var(--background-dark-theme);
|
||||
--header-color: var(--header-dark-theme);
|
||||
--gray: var(--gray-dark-theme);
|
||||
}
|
||||
|
||||
--sky-colour: linear-gradient(360deg,rgba(8, 0, 26, 1) 0%, rgba(7, 0, 20, 1) 37%, rgba(0, 0, 0, 1) 100%);
|
||||
--frame-colour : #1a1a1e;
|
||||
--main-background-colour : #3b3b3b;
|
||||
}
|
||||
|
||||
|
||||
@@ -94,7 +98,8 @@ body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||
background-color: var(--background-colour);
|
||||
/* background: linear-gradient(var(--gray-gradient)) no-repeat; */
|
||||
background-size: 100% 600px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
@@ -102,12 +107,20 @@ body {
|
||||
font-size: 20px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
main {
|
||||
z-index: 4;
|
||||
width: 720px;
|
||||
max-width: calc(100% - 2em);
|
||||
margin: auto;
|
||||
padding: 3em 1em;
|
||||
background-color: var(--main-background-colour);
|
||||
border-radius: 2em;
|
||||
border-style: solid;
|
||||
border-color: blanchedalmond;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
@@ -145,6 +158,7 @@ a:hover {
|
||||
}
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.prose p {
|
||||
margin-bottom: 2em;
|
||||
|
||||
Reference in New Issue
Block a user