Websites/liljudd-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity

Added sass and migrated styles

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

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

30
pnpm-lock.yaml
View file

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

145
src/components/Footer.astro
View file

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

127
src/components/NavBar.astro
View file

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

11
src/layouts/Layout.astro
View file

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

4
src/pages/contact.astro
View file

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

2
src/pages/index.astro
View file

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