fix: moved scss and css to seperate file, fixed overflow
chore: added folders to gitignore Signed-off-by: moonleay <contact@moonleay.net>
This commit is contained in:
parent
906ca7806e
commit
ab864e0247
10 changed files with 250 additions and 244 deletions
6
.gitignore
vendored
6
.gitignore
vendored
|
|
@ -21,4 +21,8 @@ pnpm-debug.log*
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
||||||
/.idea/
|
/.idea/
|
||||||
/.fleet/
|
/.fleet/
|
||||||
|
|
||||||
|
/.next/
|
||||||
|
|
||||||
|
next-env.d.ts
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
|
import '../styles/components/Footer.scss'
|
||||||
---
|
---
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
@ -70,101 +70,3 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<style lang="scss">
|
|
||||||
footer {
|
|
||||||
align-items: center;
|
|
||||||
margin: 100px 1px 0 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 5px;
|
|
||||||
|
|
||||||
.footerIcon {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.footerImage {
|
|
||||||
max-width: initial;
|
|
||||||
max-height: initial;
|
|
||||||
width: 48px;
|
|
||||||
margin: 0.5rem auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerImageNote {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerTable {
|
|
||||||
padding: 20px 0;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 20px;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerLinks {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: baseline;
|
|
||||||
|
|
||||||
a {
|
|
||||||
position: relative;
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
transform: scaleX(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerNotice {
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerTable {
|
|
||||||
grid-column: span 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerNotice {
|
|
||||||
grid-column: span 4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
|
---
|
||||||
|
import '../styles/components/NavBar.scss';
|
||||||
|
---
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li class="navElem">
|
<li class="navElem">
|
||||||
|
|
@ -30,55 +33,3 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<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;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.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) {
|
|
||||||
ul {
|
|
||||||
flex-direction: row;
|
|
||||||
padding: 0 2rem;
|
|
||||||
|
|
||||||
.navElem:last-child {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
---
|
---
|
||||||
import Footer from "@components/Footer.astro";
|
import Footer from "@components/Footer.astro";
|
||||||
import NavBar from "@components/NavBar.astro";
|
import NavBar from "@components/NavBar.astro";
|
||||||
|
import '../styles/Layout.scss';
|
||||||
|
import '../styles/GlobalLayout.css'
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
|
|
@ -24,61 +26,3 @@ import NavBar from "@components/NavBar.astro";
|
||||||
<Footer />
|
<Footer />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
<style lang="scss">
|
|
||||||
.contentDiv {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-bottom: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style is:global>
|
|
||||||
@font-face {
|
|
||||||
font-family: "Splatoon";
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src:
|
|
||||||
url("/assets/fonts/Splatoon2-common.woff2") format("woff2"),
|
|
||||||
url("/assets/fonts/Splatoon2-common.woff") format("woff");
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--foreground-rgb: 255, 255, 255;
|
|
||||||
font-family: "Splatoon", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: rgb(var(--foreground-rgb));
|
|
||||||
background-color: black;
|
|
||||||
background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/bg.jpg");
|
|
||||||
background-repeat: repeat;
|
|
||||||
background-size: 300px;
|
|
||||||
background-position: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
body a,
|
|
||||||
p,
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
span,
|
|
||||||
li,
|
|
||||||
ul {
|
|
||||||
font-family: "Splatoon", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
---
|
---
|
||||||
import Layout from "@layouts/Layout.astro";
|
import Layout from "@layouts/Layout.astro";
|
||||||
|
import '../styles/pages/index.scss';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
|
|
@ -14,37 +15,3 @@ import Layout from "@layouts/Layout.astro";
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
<style lang="scss">
|
|
||||||
.section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section h1 {
|
|
||||||
font-size: 4rem;
|
|
||||||
margin-top: 8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section h5 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section div {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p1 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p2 {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p2 a {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
55
src/styles/GlobalLayout.css
Normal file
55
src/styles/GlobalLayout.css
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "Splatoon";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url("/assets/fonts/Splatoon2-common.woff2") format("woff2"),
|
||||||
|
url("/assets/fonts/Splatoon2-common.woff") format("woff");
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--foreground-rgb: 255, 255, 255;
|
||||||
|
font-family: "Splatoon", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: rgb(var(--foreground-rgb));
|
||||||
|
background-color: black;
|
||||||
|
background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/bg.jpg");
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: 300px;
|
||||||
|
background-position: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body a,
|
||||||
|
p,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
span,
|
||||||
|
li,
|
||||||
|
ul {
|
||||||
|
font-family: "Splatoon", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
5
src/styles/Layout.scss
Normal file
5
src/styles/Layout.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
.contentDiv {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: auto;
|
||||||
|
}
|
||||||
96
src/styles/components/Footer.scss
Normal file
96
src/styles/components/Footer.scss
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
footer {
|
||||||
|
align-items: center;
|
||||||
|
margin: 100px 1px 0 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
.footerIcon {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.footerImage {
|
||||||
|
max-width: initial;
|
||||||
|
max-height: initial;
|
||||||
|
width: 48px;
|
||||||
|
margin: 0.5rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerImageNote {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerTable {
|
||||||
|
padding: 20px 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLinks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::before {
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerNotice {
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
column-gap: 0px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.footerIcon {
|
||||||
|
grid-column: span 1;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerTable {
|
||||||
|
grid-column: span 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerNotice {
|
||||||
|
grid-column: span 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
50
src/styles/components/NavBar.scss
Normal file
50
src/styles/components/NavBar.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
position: sticky;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.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) {
|
||||||
|
ul {
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0 2rem;
|
||||||
|
|
||||||
|
.navElem:last-child {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/pages/index.scss
Normal file
32
src/styles/pages/index.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
.section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
margin-top: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h5 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section div {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p1 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p2 {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p2 a {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue