Added sass and migrated styles

This commit is contained in:
Aron Malcher 2023-11-09 15:53:13 +01:00
parent ea5a815c2c
commit 906ca7806e
Signed by: aronmal
GPG key ID: 816B7707426FC612
7 changed files with 162 additions and 160 deletions

View file

@ -10,7 +10,8 @@
"astro": "astro"
},
"dependencies": {
"astro": "^3.4.4"
"astro": "^3.4.4",
"sass": "^1.69.5"
},
"devDependencies": {
"prettier": "^3.0.3",

View file

@ -7,7 +7,10 @@ settings:
dependencies:
astro:
specifier: ^3.4.4
version: 3.4.4(typescript@5.2.2)
version: 3.4.4(sass@1.69.5)(typescript@5.2.2)
sass:
specifier: ^1.69.5
version: 1.69.5
devDependencies:
prettier:
@ -48,7 +51,7 @@ packages:
astro: ^3.3.0
dependencies:
'@astrojs/prism': 3.0.0
astro: 3.4.4(typescript@5.2.2)
astro: 3.4.4(sass@1.69.5)(typescript@5.2.2)
github-slugger: 2.0.0
import-meta-resolve: 3.1.1
mdast-util-definitions: 6.0.0
@ -907,7 +910,7 @@ packages:
resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
dev: false
/astro@3.4.4(typescript@5.2.2):
/astro@3.4.4(sass@1.69.5)(typescript@5.2.2):
resolution: {integrity: sha512-Xyhif8RtKpNLo/TXN0Klxt0uq/2xNzbJ1tZ2udn/QguT9a6iGeO+N1iRSU5a4FrZNKb5jyg7koLpwfEVJjj7cw==}
engines: {node: '>=18.14.1', npm: '>=6.14.0'}
hasBin: true
@ -965,7 +968,7 @@ packages:
tsconfck: 3.0.0(typescript@5.2.2)
unist-util-visit: 4.1.2
vfile: 5.3.7
vite: 4.5.0
vite: 4.5.0(sass@1.69.5)
vitefu: 0.2.5(vite@4.5.0)
which-pm: 2.1.1
yargs-parser: 21.1.1
@ -1801,6 +1804,10 @@ packages:
resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
dev: false
/immutable@4.3.4:
resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
dev: false
/import-meta-resolve@3.1.1:
resolution: {integrity: sha512-qeywsE/KC3w9Fd2ORrRDUw6nS/nLwZpXgfrOc2IILvZYnCaEMd+D56Vfg9k4G29gIeVi3XKql1RQatME8iYsiw==}
dev: false
@ -3044,6 +3051,16 @@ packages:
suf-log: 2.5.3
dev: true
/sass@1.69.5:
resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==}
engines: {node: '>=14.0.0'}
hasBin: true
dependencies:
chokidar: 3.5.3
immutable: 4.3.4
source-map-js: 1.0.2
dev: false
/sax@1.3.0:
resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
dev: false
@ -3540,7 +3557,7 @@ packages:
vfile-message: 4.0.2
dev: false
/vite@4.5.0:
/vite@4.5.0(sass@1.69.5):
resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
@ -3571,6 +3588,7 @@ packages:
esbuild: 0.18.20
postcss: 8.4.31
rollup: 3.29.4
sass: 1.69.5
optionalDependencies:
fsevents: 2.3.3
dev: false
@ -3583,7 +3601,7 @@ packages:
vite:
optional: true
dependencies:
vite: 4.5.0
vite: 4.5.0(sass@1.69.5)
dev: false
/web-namespaces@2.0.1:

View file

@ -2,7 +2,7 @@
---
<footer class="footer">
<footer>
<div class="footerIcon">
<img
class="footerImage"
@ -57,7 +57,8 @@
>
</div>
</div>
</div><div class="footerNotice">
</div>
<div class="footerNotice">
<p>
This website is NOT affiliated with Nintendo or any other party. All
product names, logos, and brands are property of their respective owners.
@ -69,8 +70,8 @@
</p>
</div>
</footer>
<style>
.footer {
<style lang="scss">
footer {
align-items: center;
margin: 100px 1px 0 0;
background-color: rgba(0, 0, 0, 0.4);
@ -78,12 +79,10 @@
bottom: 0;
width: 100%;
padding: 5px;
}
.footerIcon {
display: block;
text-align: center;
}
.footerImage {
max-width: initial;
@ -95,35 +94,34 @@
.footerImageNote {
font-size: 0.75rem;
}
}
.footerTable {
padding: 20px 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.footerTable h3 {
h3 {
margin-bottom: 8px;
}
}
.footerLinks {
display: flex;
flex-direction: column;
align-items: baseline;
}
.footerLinks a {
a {
position: relative;
color: #ffffff;
text-decoration: none;
}
.footerLinks a:hover {
&:hover {
color: #ffffff;
}
.footerLinks a::before {
&::before {
content: "";
position: absolute;
display: block;
@ -137,9 +135,11 @@
transition: transform 0.3s ease;
}
.footerLinks a:hover::before {
&:hover::before {
transform: scaleX(1);
}
}
}
.footerNotice {
margin: 0 auto;
@ -148,12 +148,10 @@
}
@media (min-width: 768px) {
.footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 0px;
margin: 0 auto;
}
.footerIcon {
grid-column: span 1;
@ -168,4 +166,5 @@
grid-column: span 4;
}
}
}
</style>

View file

@ -1,111 +1,84 @@
<nav class="navMenu">
<ul class="grid">
<nav>
<ul>
<li class="navElem">
<div class="logoWtxt">
<a class:list={["pad3px", "textBx"]} href="/" target="_self"
><img
class:list={["logo", "pad3px"]}
<a class="textBx" href="/" target="_self">
<img
id="logo"
src="https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"
alt="The Bots Logo"
/>li'l Judd</a
>
</div>
/>
li'l Judd
</a>
</li>
<li class="navElem">
<a class="navLink" href="/features" target="_self">Features</a>
<a href="/features" target="_self">Features</a>
</li>
<li class="navElem">
<a class="navLink" href="/how-do-i" target="_self">How do I...?</a>
<a href="/how-do-i" target="_self">How do I...?</a>
</li>
<li class="navElem">
<a class="navLink" href="/stack" target="_self">The Stack</a>
<a href="/stack" target="_self">The Stack</a>
</li>
<li class="navElem">
<a class="navLink" href="/about" target="_self">About</a>
<a href="/about" target="_self">About</a>
</li>
<li class="navElemR">
<li class="navElem">
<a
class="navLink"
href="https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"
target="_blank">Invite to your server</a
>
</li>
</ul>
</nav>
<style>
.navMenu {
<style lang="scss">
nav {
display: flex;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
position: sticky;
border-radius: 5px;
}
.logo {
width: 32px;
height: 32px;
border-radius: 100%;
max-width: initial;
max-height: initial;
margin: 0.35rem;
}
.navElem {
ul {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.navElem:hover {
color: rgb(96 59 255) !important;
}
.navElemR {
transition: 0.5s;
}
.navElemR:hover {
color: rgb(96 59 255) !important;
}
.logoWtxt {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.pad3px {
padding: 3px;
.navElem {
margin: 0.5rem 1rem;
transition: 0.5s;
color: white;
&:hover {
color: rgb(96 59 255) !important;
}
.textBx {
display: flex;
align-items: center;
#logo {
width: 32px;
height: 32px;
border-radius: 100%;
max-width: initial;
max-height: initial;
margin: 0.5rem;
}
}
}
}
@media (min-width: 768px) {
.grid {
display: grid;
/*grid-template-columns: repeat(6, 1fr);*/
grid-template-columns: repeat(8, 1fr);
}
ul {
flex-direction: row;
padding: 0 2rem;
.navElem {
grid-column: span 1;
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
align-items: center;
text-align: center;
.navElem:last-child {
margin-left: auto;
}
}
.navElemR {
grid-column: 8;
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
align-items: center;
text-align: center;
}
}
</style>

View file

@ -24,7 +24,7 @@ import NavBar from "@components/NavBar.astro";
<Footer />
</body>
</html>
<style>
<style lang="scss">
.contentDiv {
display: flex;
flex-direction: column;
@ -72,4 +72,13 @@ import NavBar from "@components/NavBar.astro";
ul {
font-family: "Splatoon", sans-serif;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
}
</style>

View file

@ -8,6 +8,8 @@ import Layout from "@layouts/Layout.astro";
<p>
EMail: <a href="mailto:contact@moonleay.net">contact@moonleay.net</a>
</p>
<p>Discord: <a>@moonleay</a></p>
<p>
Discord: <a>@moonleay</a>
</p>
</section>
</Layout>

View file

@ -14,7 +14,7 @@ import Layout from "@layouts/Layout.astro";
</div>
</section>
</Layout>
<style>
<style lang="scss">
.section {
display: flex;
flex-direction: column;