Compare commits
6 commits
master
...
better-bra
| Author | SHA1 | Date | |
|---|---|---|---|
|
35298f6fd9 | ||
|
|
8eba539daf | ||
| 31fbe13613 | |||
|
|
4fd4b19011 | ||
|
|
e4fc566f43 | ||
|
|
897659d39f |
27 changed files with 275 additions and 282 deletions
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -1,4 +0,0 @@
|
||||||
.DS_Store
|
|
||||||
.direnv
|
|
||||||
node_modules
|
|
||||||
_site
|
|
||||||
|
|
@ -1 +1,3 @@
|
||||||
# astolfo.org
|
# astolfo.org
|
||||||
|
|
||||||
|
the source code of astolfo.org
|
||||||
131
bundle.css
131
bundle.css
|
|
@ -1,131 +0,0 @@
|
||||||
:root {
|
|
||||||
color-scheme: light dark;
|
|
||||||
--background: light-dark(#FFADD6, black);
|
|
||||||
--text: light-dark(black, white);
|
|
||||||
--rounding: 30px;
|
|
||||||
--gaps: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
--text: #1e0611;
|
|
||||||
--background: #FFADD6;
|
|
||||||
--primary: #7b194a;
|
|
||||||
--secondary: #520029;
|
|
||||||
--accent: #ff2b95;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--text: #f9e1ec;
|
|
||||||
--background: #290918;
|
|
||||||
--primary: #e684b5;
|
|
||||||
--secondary: #ffadd6;
|
|
||||||
--accent: #FF7BFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: linear-gradient(#FF61B0 0vh, #b24dff 50vh, #E70073 100vh, #FFF 100%); /*-- light mode
|
|
||||||
* background: linear-gradient(#880044 0vh, #58009b 50vh, #850042 100vh, #000 100%) -- dark mode*/
|
|
||||||
font-family: Comic Neue, Chalkboard, Comic Sans MS;
|
|
||||||
/* background: #ffd1e8; /* ff61b0 */
|
|
||||||
/* background: #ff389c; /* dark mode */
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: var(--primary);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: var(--secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--primary);
|
|
||||||
text-decoration: underline 1px wavy var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
b {
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* main content area
|
|
||||||
*/
|
|
||||||
|
|
||||||
#content {
|
|
||||||
width: calc(100vw - var(--gaps)*2);
|
|
||||||
min-height: calc(100vh - var(--gaps)*2);
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
margin: var(--gaps);
|
|
||||||
}
|
|
||||||
|
|
||||||
#content > * {
|
|
||||||
border-radius: var(--rounding);
|
|
||||||
|
|
||||||
background: var(--background);
|
|
||||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#bg-overlay {
|
|
||||||
min-width: 50vw;
|
|
||||||
margin-left: var(--gaps);
|
|
||||||
max-width: 100vw;
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* header/nav bar side bar whatevr
|
|
||||||
*/
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
text-orientation: mixed;
|
|
||||||
|
|
||||||
font-size: 7vh;
|
|
||||||
margin-left: 0px;
|
|
||||||
margin-right: 0px;
|
|
||||||
padding: 0.3em
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav > a {
|
|
||||||
width: inherit;
|
|
||||||
padding: 0.5em;
|
|
||||||
filter: grayscale(1) ;
|
|
||||||
text-decoration: none;
|
|
||||||
height: 2.5em;
|
|
||||||
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
|
|
||||||
transition-duration: 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav > a:hover {
|
|
||||||
filter: grayscale(0);
|
|
||||||
transform: translateX(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav > a > p {
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
color: light-dark(var(--text), var(--background));
|
|
||||||
width: fit-content;
|
|
||||||
padding: 0.2em;
|
|
||||||
border-radius: 20%;
|
|
||||||
margin: 0 0 0 0;
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 942 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 696 B |
Binary file not shown.
|
Before Width: | Height: | Size: 5 KiB |
BIN
img/favicon.ico
BIN
img/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
49
index.html
49
index.html
|
|
@ -1,49 +0,0 @@
|
||||||
<html lang="en-AU">
|
|
||||||
<head>
|
|
||||||
<title>astolfo.org</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="stylesheet" href="/bundle.css">
|
|
||||||
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="content">
|
|
||||||
<header style="background-color: var(--background); display: flex; flex-direction: column;">
|
|
||||||
<a style="color: inherit; text-decoration: inherit; height: fit-content;" href="/">
|
|
||||||
<div style="background-color: var(--accent); width: 100%; margin: none; border-radius: var(--rounding);">
|
|
||||||
<h1 style="color: black;">astolfo.org</h1>
|
|
||||||
<svg style="background-color: var(--background);" viewBox="0 0 370 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-651,-550)"><g transform="matrix(-1,-0,0,-1,1672,1470)"><path d="M651,919.999C686.037,849.927 757.656,805.663 836,805.663C914.344,805.663 985.963,849.927 1021,919.999C1021,920 1021,920 1021,920L651,920C651,920 651,920 651,919.999Z" style="fill:var(--accent)"/></g></g></svg>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<img src="img/astolfos/nav.webp" style="object-fit: scale-down; height: auto; max-width: 8.6em; margin-top: auto;">
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<a href="/blog" style="background-image: url(img/astolfos/nav-blog.webp)"><p>blog</p></a>
|
|
||||||
<a href="/store" style="background-image: url(img/astolfos/nav-store.webp)"><p>store</p></a>
|
|
||||||
<a href="/about" style="background-image: url(img/astolfos/nav-about.webp); border-bottom-left-radius: var(--rounding); border-bottom-right-radius: var(--rounding);"><p>about</p></a>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div id="bg-overlay">
|
|
||||||
<h1>header 1</h1>
|
|
||||||
<h2>header 2</h2>
|
|
||||||
<h3>header 3</h3>
|
|
||||||
<h4>header 4</h4>
|
|
||||||
<h5>header 5</h5>
|
|
||||||
<p>
|
|
||||||
normal text
|
|
||||||
<b>bold text</b>
|
|
||||||
<i>italics text</i>
|
|
||||||
<a href="https://ooo.eeeee.ooo">anchor tag</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="height: 10vw;"></div>
|
|
||||||
<h1>mrow</h1>
|
|
||||||
<h1>mrow</h1>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,98 +0,0 @@
|
||||||
---
|
|
||||||
layout: base
|
|
||||||
---
|
|
||||||
|
|
||||||
# I DO NOT KNOW WHO SINNED ON THIS WEBSITE BY ADDING "ALOFTO" BUT I WILL FIND THEM AND DO SOMETHING VERY BAD TO THEM FOR SLANDERING TEH ASTOLFO NAME
|
|
||||||
|
|
||||||
In the annals of philosophical inquiry, the concept of "goodness" has been dissected, debated, and defined by the likes of Socrates, Plato, Kant, and Confucius. Yet, none of them—despite their wisdom—had the privilege of meeting Alofto, a dog so pure of heart and noble of spirit that his very existence invites us to rethink what it means to be good. In this essay, I shall explore the philosophical foundations of "good boy-ness" through the exemplary life and behavior of Alofto, a dog whose actions transcend basic obedience and reach into the realm of moral virtue.
|
|
||||||
|
|
||||||
I. Who Is Alofto?
|
|
||||||
|
|
||||||
Alofto is not merely a dog; he is a phenomenon. A creature born not just of fur and paw, but of purpose and profound affection. With his expressive eyes, gently wagging tail, and ever-alert ears, Alofto is a being whose presence radiates calm, loyalty, and a unique form of nonverbal wisdom. Some say he is a golden retriever. Others claim he’s a mutt with a noble lineage lost to history. But to reduce him to breed alone would be like describing Socrates merely as “a man who asked too many questions.” Alofto, in essence, is a good boy—and he is good not by accident but by the very nature of who he chooses to be.
|
|
||||||
|
|
||||||
II. What Is "Good"?
|
|
||||||
|
|
||||||
Before we understand why Alofto is a good boy, we must define what “good” means. In classical philosophy, “goodness” has been approached from multiple angles:
|
|
||||||
|
|
||||||
Plato’s Forms: Plato suggested that all things aspire to an ideal form. For Plato, there is a Form of the Good, and things in our world are "good" insofar as they participate in or reflect this ideal.
|
|
||||||
|
|
||||||
Aristotle’s Virtue Ethics: Aristotle saw goodness as the result of cultivating virtue through habit. A good being does not act rightly by accident, but through the development of character.
|
|
||||||
|
|
||||||
Kantian Ethics: Kant posited that goodness arises from acting out of a sense of duty and moral law, not personal gain.
|
|
||||||
|
|
||||||
Utilitarianism: Bentham and Mill claimed that goodness lies in the maximization of happiness and minimization of suffering.
|
|
||||||
|
|
||||||
So, how does Alofto measure up?
|
|
||||||
|
|
||||||
III. Alofto as a Platonic Ideal
|
|
||||||
|
|
||||||
Alofto is not simply good; he might be the Form of the Good Boy incarnate. Imagine the perfect good boy in your mind: loyal, kind, attentive, brave, occasionally silly, always affectionate, sometimes wise beyond words. That is Alofto. When he waits patiently at the door for his human to return, tail slowly thumping, he becomes a mirror to the ideal of faithfulness. When he barks only when truly necessary (such as at squirrels who dare to invade the backyard), he embodies discernment.
|
|
||||||
|
|
||||||
Plato would look at Alofto and say, “Ah yes, there he is. The Good Boy we have only seen shadows of until now.”
|
|
||||||
|
|
||||||
IV. Aristotle and the Virtue of Dogness
|
|
||||||
|
|
||||||
Aristotle emphasized eudaimonia—the flourishing life—achieved through the cultivation of virtues proper to one's nature. For a human, this might include rationality, courage, and justice. But what are the virtues proper to a dog?
|
|
||||||
|
|
||||||
Let us define them as:
|
|
||||||
|
|
||||||
Loyalty
|
|
||||||
|
|
||||||
Protectiveness without aggression
|
|
||||||
|
|
||||||
Obedience tempered by independent judgment
|
|
||||||
|
|
||||||
Joy in simplicity
|
|
||||||
|
|
||||||
Empathy toward humans and other creatures
|
|
||||||
|
|
||||||
Alofto demonstrates each of these with such balance and consistency that one could say he has achieved canine eudaimonia. He guards the house, but never snarls at the mail carrier. He knows when to sit, when to stay, and—most importantly—when to nuzzle you when you need comfort.
|
|
||||||
|
|
||||||
He doesn’t act from compulsion but from choice. He chooses the virtuous middle path, the Golden Leash, if you will, between wild instinct and robotic obedience.
|
|
||||||
|
|
||||||
V. Kant and the Moral Dog
|
|
||||||
|
|
||||||
Alofto’s moral framework can also be examined through a Kantian lens. Kant held that the truly moral act is one done from duty, not personal gain. When Alofto nudges the toddler away from the staircase—not because he wants a treat, but because he feels it is right—he acts from a sense of duty. When he brings his ball not to demand play, but to share joy with a lonely human, he performs what Kant might call a "categorical imperative" in canine form: Act only according to that maxim whereby you can at the same time will that it should become a universal law (of good boys).
|
|
||||||
|
|
||||||
Alofto’s goodness is not conditional. He is not “good” only when watched, or only when praised. He is good when no one is looking. He is good in the rain, good in the vet’s office, good in his sleep.
|
|
||||||
|
|
||||||
VI. Utilitarian Joy-Bringer
|
|
||||||
|
|
||||||
While philosophers like Bentham and Mill sought to measure morality in terms of pain and pleasure, Alofto would win utilitarian awards for maximum tail-wag-induced happiness. Consider:
|
|
||||||
|
|
||||||
Alofto comforts crying children with a gentle nuzzle.
|
|
||||||
|
|
||||||
Alofto greets strangers with cautious optimism and kind eyes.
|
|
||||||
|
|
||||||
Alofto knows when to lie next to someone in grief and simply be present.
|
|
||||||
|
|
||||||
His very existence spreads joy. His actions reduce stress, provide emotional support, and build bonds of love. If the greatest good is that which brings the most happiness to the most beings, then Alofto is—empirically—a force of immense moral good.
|
|
||||||
|
|
||||||
VII. Zen, Tao, and the Effortless Good Boy
|
|
||||||
|
|
||||||
Eastern philosophies such as Zen Buddhism and Taoism value wu wei—action through non-action, the effortless flow of nature. Alofto lives this daily. He does not strain to be good; he simply is. He flows with the day, finds joy in a breeze, in a stick, in a passing cloud. He has no ego, no ambition, no desire to dominate. He follows the Tao of Dog—the path of presence, patience, and play.
|
|
||||||
|
|
||||||
When he sits beside you in silence, he teaches you more about mindfulness than hours of meditation apps.
|
|
||||||
|
|
||||||
VIII. The Ethics of Good Boyhood
|
|
||||||
|
|
||||||
There are dogs who obey commands. There are dogs who do tricks. But then there are dogs who live ethically—not out of training, but out of a natural alignment with virtue. That is Alofto. He does not chase the neighbor’s cat, not because he fears punishment, but because he senses the cat’s anxiety. He does not beg at the table when guests are over, not because he’s been scolded before, but because he respects the moment.
|
|
||||||
|
|
||||||
His goodness is not reactive. It is proactive. It is chosen.
|
|
||||||
|
|
||||||
IX. In Defense of Anthropomorphism
|
|
||||||
|
|
||||||
Critics may argue that we project human traits onto dogs like Alofto. That may be true to an extent. But perhaps the more profound truth is that we see in Alofto the best of ourselves. Dogs may not speak our language, but they communicate clearly through intention, action, and presence. In Alofto’s eyes, we do not see a mirror—we see a light that guides us toward becoming more patient, more kind, more attuned.
|
|
||||||
|
|
||||||
Conclusion: Alofto, the Moral Compass
|
|
||||||
|
|
||||||
To call Alofto merely a “good boy” is to understate the case. He is not just good—he is Goodness made soft and furry. He is the quiet philosopher of the household, the four-legged sage, the wagging teacher of empathy. In a world increasingly driven by speed, distraction, and disconnection, Alofto offers us a different model: one of quiet presence, loyal attention, and simple joy.
|
|
||||||
|
|
||||||
Philosophers will continue to argue over the nature of morality, but those who know Alofto already have their answer.
|
|
||||||
|
|
||||||
He is good.
|
|
||||||
Not because he has to be.
|
|
||||||
Because he chooses to be.
|
|
||||||
|
|
||||||
And that, truly, is the highest virtue.
|
|
||||||
|
|
||||||
16
src/about.html
Normal file
16
src/about.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>HTML5 Boilerplate</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Page Title</h1>
|
||||||
|
<script src="scripts.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
BIN
src/astolfo.webp
Normal file
BIN
src/astolfo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
16
src/blog.html
Normal file
16
src/blog.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>HTML5 Boilerplate</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Page Title</h1>
|
||||||
|
<script src="scripts.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
BIN
src/bussyair.webp
Normal file
BIN
src/bussyair.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
46
src/index.html
Normal file
46
src/index.html
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="en-AU">
|
||||||
|
<head>
|
||||||
|
<title>astolfo.org</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<ul>
|
||||||
|
<li><a class="header-links" href="./store.html">store</a></li>
|
||||||
|
<li><a class="header-links" href="./blog.html">blog</a></li>
|
||||||
|
<li><a class="header-links" href="./services.html">services</a></li>
|
||||||
|
<li><a class="header-links" href="./about.html">about</a></li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div id="landing" style="height: 70vh; max-height: 70vh;">
|
||||||
|
<div id="landing-inner">
|
||||||
|
<h1 id="float-header">
|
||||||
|
<span style="animation-delay: 0.1s;">a</span>
|
||||||
|
<span style="animation-delay: 0.2s;">s</span>
|
||||||
|
<span style="animation-delay: 0.3s;">t</span>
|
||||||
|
<span style="animation-delay: 0.4s;">o</span>
|
||||||
|
<span style="animation-delay: 0.5s;">l</span>
|
||||||
|
<span style="animation-delay: 0.6s;">f</span>
|
||||||
|
<span style="animation-delay: 0.7s;">o</span>
|
||||||
|
<span style="animation-delay: 0.8s;">.</span>
|
||||||
|
<span style="animation-delay: 0.9s;">o</span>
|
||||||
|
<span style="animation-delay: 1s; ">r</span>
|
||||||
|
<span style="animation-delay: 1.1s;">g</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<marquee id="footer-scroll" style="font-size: 13vw; width: 50%; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background-color: var(--accent2); border-radius: var(--rounding)">astolfo.org</marquee>
|
||||||
|
<!-- idk put astolfo in a train here, learn pixel art someday -->
|
||||||
|
<div>
|
||||||
|
<p>all text, html and css licensed under BSD0 unless noted otherwise.</p>
|
||||||
|
<hr>
|
||||||
|
<p>site build at commit [PUT COMMIT HERE]. source avaliable at git.astolfo.org/nico/astolfo.org</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
src/pillow.webp
Normal file
BIN
src/pillow.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 369 KiB |
BIN
src/plush.webp
Normal file
BIN
src/plush.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
16
src/services.html
Normal file
16
src/services.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>HTML5 Boilerplate</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Page Title</h1>
|
||||||
|
<script src="scripts.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
BIN
src/sheets.webp
Normal file
BIN
src/sheets.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 365 KiB |
39
src/store.html
Normal file
39
src/store.html
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>store.astolfo.org</title>
|
||||||
|
<link rel="stylesheet" href="./styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body style="background-color:rgb(231, 151, 207);">
|
||||||
|
<h1>Astolfo Store</h1>
|
||||||
|
<p>
|
||||||
|
<img src="astolfo.webp" alt="Astolfo" class="center">
|
||||||
|
</p>
|
||||||
|
<p style="text-align:center;">Only the finest goods!</p>
|
||||||
|
<script src="scripts.js"></script>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<img src="bussyair.webp" alt="Bussy Air" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="pillow.webp" alt="Body Pillow" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="plush.webp" alt="Plush" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="sheets.webp" alt="Bed Sheets" style="width:75%">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p> Bussy Air</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h1 {text-align: center;}
|
||||||
|
</style>
|
||||||
140
src/styles.css
Normal file
140
src/styles.css
Normal file
|
|
@ -0,0 +1,140 @@
|
||||||
|
:root {
|
||||||
|
--text: black;
|
||||||
|
--accent: #ff69b4;
|
||||||
|
--accent2: #FA7DBC;
|
||||||
|
--background: #fba0e3;
|
||||||
|
--rounding: 8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding: 0px;
|
||||||
|
margin: auto;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
background-image: url("background.jpg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: fixed;
|
||||||
|
|
||||||
|
font-family: 'Trebuchet MS', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin: 1em;
|
||||||
|
padding: 0.5em;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
padding-right: 3em;
|
||||||
|
|
||||||
|
border-radius: var(--rounding);
|
||||||
|
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
|
||||||
|
background-color: var(--background);
|
||||||
|
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header li{
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-links {
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
padding: 0.3em;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: var(--rounding);
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-links:hover {
|
||||||
|
background-color: var(--accent);
|
||||||
|
scale: 250%;
|
||||||
|
transform: translateY(-5px) rotate(-7deg);
|
||||||
|
margin-left: 2em;
|
||||||
|
margin-right: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Three image containers (use 25% for four, and 50% for two, etc) */
|
||||||
|
.column {
|
||||||
|
float: left;
|
||||||
|
width: 25%;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Clear floats after image containers */
|
||||||
|
.row::after {
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
color: var(--text);
|
||||||
|
background-color: var(--background);
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
margin: 0px;
|
||||||
|
padding: 30px;
|
||||||
|
border-top-right-radius: var(--rounding);
|
||||||
|
border-top-left-radius: var(--rounding);
|
||||||
|
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer * {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#landing-inner {
|
||||||
|
border-radius: var(--rounding);
|
||||||
|
background-color: var(--background);
|
||||||
|
width: 80vw;
|
||||||
|
margin: auto;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
#float-header {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12vw;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#float-header span {
|
||||||
|
display: inline-block;
|
||||||
|
animation: float 3s ease-in-out infinite;
|
||||||
|
|
||||||
|
color: var(--accent2);
|
||||||
|
-webkit-text-stroke: 0.01em var(--text);
|
||||||
|
|
||||||
|
padding: 0px;
|
||||||
|
margin-left: -0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
footer {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer marquee {
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue