more style changes
This commit is contained in:
genki_angel
parent
45bf836c70
commit
08a9f0528d
16 changed files with 305 additions and 15 deletions
BIN
src/lib/assets/fonts/easvhs/easvhs-webfont.woff
Normal file
BIN
src/lib/assets/fonts/easvhs/easvhs-webfont.woff
Normal file
Binary file not shown.
BIN
src/lib/assets/fonts/easvhs/easvhs-webfont.woff2
Normal file
BIN
src/lib/assets/fonts/easvhs/easvhs-webfont.woff2
Normal file
Binary file not shown.
BIN
src/lib/assets/fonts/minecraft/minecraftia-webfont.woff
Normal file
BIN
src/lib/assets/fonts/minecraft/minecraftia-webfont.woff
Normal file
Binary file not shown.
BIN
src/lib/assets/fonts/minecraft/minecraftia-webfont.woff2
Normal file
BIN
src/lib/assets/fonts/minecraft/minecraftia-webfont.woff2
Normal file
Binary file not shown.
BIN
src/lib/assets/img/alert.gif
Normal file
BIN
src/lib/assets/img/alert.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 B |
BIN
src/lib/assets/img/pfp.webp
Normal file
BIN
src/lib/assets/img/pfp.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
|
|
@ -3,7 +3,7 @@
|
|||
// import quote from randomquote function
|
||||
</script>
|
||||
|
||||
<div class="billboard">
|
||||
<div class="billboard noselect">
|
||||
<div class="quote">
|
||||
<img src={star} alt="" />
|
||||
<p>meowwww</p>
|
||||
|
|
@ -14,7 +14,8 @@
|
|||
<style lang="scss">
|
||||
@use '$lib/styles/variables' as vars;
|
||||
.billboard {
|
||||
border: solid 2px vars.$base-color;
|
||||
border: solid 2px vars.$base-colour;
|
||||
background-color: black;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 800px;
|
||||
|
|
@ -24,9 +25,13 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
line-height: 32px;
|
||||
// line-height: 32px;
|
||||
margin: 8px 0 8px 0;
|
||||
|
||||
p {
|
||||
padding-top: .3em;
|
||||
}
|
||||
|
||||
animation: billboard 20s linear infinite;
|
||||
}
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="holder">
|
||||
<div class="holder noselect">
|
||||
<div class="marquee">
|
||||
{#each blinkies as blinkie}
|
||||
<img src={blinkie} alt="" />
|
||||
|
|
@ -23,8 +23,9 @@
|
|||
height: 20px;
|
||||
}
|
||||
.holder {
|
||||
font-family: none;
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
margin: 1em auto;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,11 @@
|
|||
name: "home",
|
||||
image: ""
|
||||
},
|
||||
{
|
||||
destination: "/about",
|
||||
name: "about",
|
||||
image: ""
|
||||
},
|
||||
{
|
||||
destination: "/pets",
|
||||
name: "pets",
|
||||
|
|
@ -31,13 +36,14 @@
|
|||
<nav>
|
||||
{#each navlinks as links}
|
||||
<a href="{links.destination}" class="link">
|
||||
<img src="{links.image}" alt="">
|
||||
<img class="noselect" src="{links.image}" alt="">
|
||||
<p>{links.name}</p>
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$lib/styles/variables' as vars;
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
|
@ -48,10 +54,20 @@
|
|||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: black;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
&:hover {
|
||||
p {
|
||||
color: vars.$highlight;
|
||||
}
|
||||
img {
|
||||
border: 2px solid vars.$highlight;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div>
|
||||
<div class="noselect">
|
||||
<p>welcome to...</p>
|
||||
<h1>BANII.CAFE</h1>
|
||||
<h1>バニー BANII.CAFE カフェ</h1>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -11,11 +11,13 @@
|
|||
margin: 1em 0;
|
||||
}
|
||||
h1 {
|
||||
font-family: easvhsregular;
|
||||
font-size: 3em;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#00d4ff00 0%,
|
||||
vars.$base-color 25%,
|
||||
vars.$base-color 75%,
|
||||
vars.$base-colour 25%,
|
||||
vars.$base-colour 75%,
|
||||
#00d4ff00 100%
|
||||
);
|
||||
color: black;
|
||||
|
|
|
|||
56
src/lib/components/window.svelte
Normal file
56
src/lib/components/window.svelte
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<script lang="ts">
|
||||
let { name, children } : {name: string, children?: any} = $props();
|
||||
</script>
|
||||
|
||||
<div class="window">
|
||||
<div class="title">
|
||||
<h2>{name}</h2>
|
||||
<div class="minimise noselect">_</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
{#if children}
|
||||
{@render children?.()}
|
||||
{:else}
|
||||
<p>meoww :3</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$lib/styles/variables' as vars;
|
||||
h2 {
|
||||
color: black;
|
||||
}
|
||||
.title {
|
||||
font-family: easvhsregular;
|
||||
h2 {
|
||||
margin-top: 8px;
|
||||
font-size: 2em;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: vars.$base-colour;
|
||||
// background: linear-gradient(-2deg,vars.$base-colour 65%, vars.$highlight 100%);
|
||||
padding: 0 2px 0 1em;
|
||||
gap: 1em;
|
||||
}
|
||||
.content {
|
||||
border: 1px solid vars.$base-colour;
|
||||
padding: 1em;
|
||||
background-color: black;
|
||||
}
|
||||
.minimise {
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
line-height: 32px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.minimise:hover {
|
||||
background-color: #53461f;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,17 @@
|
|||
@use './variables' as vars;
|
||||
|
||||
@font-face {
|
||||
font-family: easvhsregular;
|
||||
src: url('$lib/assets/fonts/easvhs/easvhs-webfont.woff2') format("woff2"), url('$lib/assets/fonts/easvhs/easvhs-webfont.woff') format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: minecraftia;
|
||||
src: url('$lib/assets/fonts/minecraft/minecraftia-webfont.woff2') format("woff2"), url('$lib/assets/fonts/minecraft/minecraftia-webfont.woff') format("woff");
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -10,11 +22,24 @@ body {
|
|||
|
||||
color: #fefefe;
|
||||
|
||||
font-family: minecraftia;
|
||||
|
||||
/* display: flex;
|
||||
justify-content: center;
|
||||
width: 100%; */
|
||||
}
|
||||
|
||||
.window {
|
||||
border: solid 2px vars.$base-color;
|
||||
.noselect {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.imgwrap {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -1 +1,3 @@
|
|||
$base-color: #dede6c;
|
||||
$base-colour: #dede6c;
|
||||
$highlight: #00fffa;
|
||||
$warning: #cc4c4c;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
@use '$lib/styles/variables' as vars;
|
||||
|
||||
main {
|
||||
border: 1px dashed vars.$base-color;
|
||||
border: 1px dashed vars.$base-colour;
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,187 @@
|
|||
<script lang="ts">
|
||||
import Window from '$lib/components/window.svelte';
|
||||
|
||||
import pfp from '$lib/assets/img/pfp.webp';
|
||||
import alert from '$lib/assets/img/alert.gif';
|
||||
|
||||
const imported = import.meta.glob('$lib/assets/img/stamps/*', { eager: true });
|
||||
let stamps: Array<string> = [];
|
||||
for (const img in imported) {
|
||||
stamps.push(img);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<!-- about -->
|
||||
<Window name="about">
|
||||
<p>
|
||||
hello! ^w^/<br />welcome to my site, feel free to look around and learn something your government
|
||||
doesn't want you to know :3
|
||||
</p>
|
||||
</Window>
|
||||
|
||||
<!-- most wanted -->
|
||||
<Window name="most wanted">
|
||||
<div id="mostwanted">
|
||||
<div class="imgwrap money">
|
||||
<img class="noselect" alt="" />
|
||||
<h1>FBI's most wanted</h1>
|
||||
<img class="noselect" src="" alt="" />
|
||||
</div>
|
||||
<div id="profile">
|
||||
<img class="noselect" src={pfp} alt="" />
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>name:</td>
|
||||
<td>placeholder</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>height:</td>
|
||||
<td>placeholder</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>species:</td>
|
||||
<td>placeholder</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>wanted for:</td>
|
||||
<td>placeholder</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>last seen:</td>
|
||||
<td>placeholder</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="info">
|
||||
<h3>!INFO!</h3>
|
||||
<p>
|
||||
likes to smell plants and imprison bugs... can be found eating plastic from your bins and
|
||||
drinking kerosene at your nearest airport
|
||||
</p>
|
||||
</div>
|
||||
<div id="caution">
|
||||
<h3>!CAUTION!</h3>
|
||||
<div class="imgwrap">
|
||||
<img class="noselect" src={alert} alt="" />
|
||||
<p>will bark very loud if approached</p>
|
||||
<img class="noselect" src={alert} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="reward">
|
||||
<h3>!REWARD!</h3>
|
||||
<br />
|
||||
<div class="imgwrap">
|
||||
<img class="noselect" src="" alt="" />
|
||||
<p>
|
||||
second-hand Hwasong-18 ICBM<br />
|
||||
[fuel not included]
|
||||
</p>
|
||||
<img class="noselect" src="" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Window>
|
||||
|
||||
<!-- latest posts -->
|
||||
<!-- <Window name="posts"></Window> -->
|
||||
|
||||
<!-- stampbook -->
|
||||
<Window name="stampbook">
|
||||
<div id="stampbook">
|
||||
{#each stamps as stamp}
|
||||
<img class="stamp noselect" src={stamp} alt="oops..." />
|
||||
{/each}
|
||||
</div>
|
||||
</Window>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$lib/styles/variables' as vars;
|
||||
td {
|
||||
padding: 1em;
|
||||
}
|
||||
#mostwanted {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
h1 {
|
||||
color: vars.$warning;
|
||||
font-size: 3em;
|
||||
padding-top: .5em;
|
||||
}
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
#profile {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
img {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
border: 2px solid vars.$highlight;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
#info {
|
||||
h3 {
|
||||
color: vars.$highlight;
|
||||
}
|
||||
}
|
||||
#caution {
|
||||
h3 {
|
||||
color: vars.$warning;
|
||||
}
|
||||
img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
#reward {
|
||||
border: 2px solid vars.$base-colour;
|
||||
background-color: black;
|
||||
padding: 1em;
|
||||
h3 {
|
||||
font-size: 3em;
|
||||
color: vars.$base-colour;
|
||||
text-decoration: underline;
|
||||
}
|
||||
img {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
.money {
|
||||
img {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#stampbook {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
}
|
||||
.stamp {
|
||||
width: 99px;
|
||||
height: 56px;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue