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
|
|
@ -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…
Add table
Add a link
Reference in a new issue