added friends section template

This commit is contained in:
elh 2024-06-17 20:10:27 -04:00
parent e769979948
commit 1a3a0ca680
8 changed files with 49 additions and 12 deletions

BIN
public/vee.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

View file

@ -1,8 +1,7 @@
--- ---
import Button from "../components/navbutton.svelte" import Button from "../components/navbutton.svelte"
const pageTitle= Astro.props
--- ---
<a active=
<div class="nav-links"> <div class="nav-links">
<Button class="navbutton"> <Button class="navbutton">
<a href="/">Home</a> <a href="/">Home</a>

View file

@ -0,0 +1,13 @@
---
---
<section id="Friends">
<h2>Friends Sites!</h2>
<div>
<form action="https://google.com">
<button class="fbutton">
<img class="buttonimg" title="test" src="/public/vee.png">
</button>
</form>
</a>
</div>
</section>

View file

@ -6,6 +6,7 @@
</script> </script>
<button on:click <button on:click
on:mouseover on:mouseover
on:focus
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
{...buttonProps}> {...buttonProps}>
@ -16,4 +17,5 @@
.navbutton { .navbutton {
} }
.fri
</style> </style>

View file

View file

@ -1,7 +1,13 @@
--- ---
import Layout from "../layouts/Sitelayout.astro"; import Layout from "../layouts/Sitelayout.astro";
import Friends from "../components/friends.astro"
import Socials from "../components/socials.astro"
const pageTitle="home"; const pageTitle="home";
--- ---
<Layout pageTitle={pageTitle}> <Layout pageTitle={pageTitle}>
<h1>uwu</h1> <h2> Hi, I'm Stellaluna!</h2>
<body>
<Socials />
<Friends />
</body>
</Layout> </Layout>

View file

@ -1,6 +1,9 @@
@import url('https://fonts.cdnfonts.com/css/ocr-a-std');
html { html {
background-color: #f1f5f9; background-color: darkorchid;
font-family: sans-serif; font-style: normal;
font-weight: 400;
} }
body { body {
@ -13,6 +16,8 @@ html {
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: 'OCR A Std', sans-serif;
} }
h1 { h1 {
@ -21,7 +26,7 @@ html {
} }
footer { footer {
text-align: center; text-align: center;
background-color: rgba(127,2,177, 0.50); background-color: orange;
padding: 0.02rem; padding: 0.02rem;
} }
@ -69,10 +74,22 @@ html {
} }
.navbutton { .navbutton {
border-radius: 30%; border-radius: 30%;
background: darkorchid; background: orange;
border-width: 3px;
} }
.navbutton a:hover, a:active .navbutton:hover, .navbutton:active
{ {
background-color: lightpink; background-color: darkorange;
border-radius: 30%; border-radius: 30%;
} }
.fbutton {
border-radius: 100px;
border-width: 0px;
}
.buttonimg {
width: 50px;
margin-top: -5px;
margin-right: -5px;
margin-left: -5px;
margin-bottom: -8px;
border-radius: 50%;}