Added sass and migrated styles
This commit is contained in:
parent
ea5a815c2c
commit
906ca7806e
GPG key ID:
816B7707426FC612
7 changed files with 162 additions and 160 deletions
|
|
@ -10,7 +10,8 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^3.4.4"
|
||||
"astro": "^3.4.4",
|
||||
"sass": "^1.69.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^3.0.3",
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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,94 +79,92 @@
|
|||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.footerIcon {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.footerIcon {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.footerImage {
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
width: 48px;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
.footerImage {
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
width: 48px;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
|
||||
.footerImageNote {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.footerImageNote {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footerTable {
|
||||
padding: 20px 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.footerTable {
|
||||
padding: 20px 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
|
||||
.footerTable h3 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.footerLinks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
}
|
||||
.footerLinks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
|
||||
.footerLinks a {
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
|
||||
.footerLinks a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.footerLinks a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
background-color: #ffffff;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
background-color: #ffffff;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.footerLinks a:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
&:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footerNotice {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.footerNotice {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footer {
|
||||
@media (min-width: 768px) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
column-gap: 0px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footerIcon {
|
||||
grid-column: span 1;
|
||||
justify-self: center;
|
||||
}
|
||||
.footerIcon {
|
||||
grid-column: span 1;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.footerTable {
|
||||
grid-column: span 3;
|
||||
}
|
||||
.footerTable {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.footerNotice {
|
||||
grid-column: span 4;
|
||||
.footerNotice {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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"]}
|
||||
src="https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"
|
||||
alt="The Bots Logo"
|
||||
/>li'l Judd</a
|
||||
>
|
||||
</div>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
|
||||
.navElem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.navElem {
|
||||
margin: 0.5rem 1rem;
|
||||
transition: 0.5s;
|
||||
color: white;
|
||||
|
||||
.navElem:hover {
|
||||
color: rgb(96 59 255) !important;
|
||||
}
|
||||
&:hover {
|
||||
color: rgb(96 59 255) !important;
|
||||
}
|
||||
|
||||
.navElemR {
|
||||
transition: 0.5s;
|
||||
}
|
||||
.textBx {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.navElemR:hover {
|
||||
color: rgb(96 59 255) !important;
|
||||
}
|
||||
|
||||
.logoWtxt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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);
|
||||
#logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 100%;
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navElem {
|
||||
grid-column: span 1;
|
||||
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
ul {
|
||||
flex-direction: row;
|
||||
padding: 0 2rem;
|
||||
|
||||
.navElemR {
|
||||
grid-column: 8;
|
||||
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
.navElem:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import Layout from "@layouts/Layout.astro";
|
|||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
Loading…
Reference in a new issue