1
0
Fork 0
forked from CRSS/Website

feat: add css

This commit is contained in:
TheClashFruit 2023-09-14 21:47:02 +02:00
parent 176396ce80
commit 44b742899c
Signed by: TheClashFruit
GPG key ID: CF4A319B9A73290C
7 changed files with 220 additions and 0 deletions

11
css/src/_fonts.scss Normal file
View file

@ -0,0 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Outfit", "Noto Color Emoji", sans-serif;
margin-bottom: 6px;
}

4
css/src/_reset.scss Normal file
View file

@ -0,0 +1,4 @@
* {
padding: 0;
margin: 0;
}

108
css/src/style.scss Normal file
View file

@ -0,0 +1,108 @@
@import "reset";
@import "fonts";
body {
background: #f8fafc;
}
.container {
max-width: 1100px;
width: 100%;
margin: 0 auto;
}
ul, ol {
list-style-position: inside;
}
.pageHero {
background-image: url('../img/spawn.jpg');
background-position: center;
color: #fff;
height: 240px;
> .blurFiler {
backdrop-filter: blur(2px);
padding: 8px 0;
height: calc(100% - (8px + 8px));
> .container {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
}
.pageNav {
width: 100svw;
background: #f1f5f9;
> .container {
padding: 16px 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
> ul {
list-style: none;
display: flex;
gap: 8px;
> li {
> a {
color: #0f172a;
text-decoration: none;
padding: 8px 16px;
border-radius: 32px;
&:hover, &.active {
background: rgba(15, 23, 42, 0.1);
}
&.buttonPrimary {
background: #6366f1;
color: #fff;
}
}
}
}
}
}
.pageContent {
margin: 16px 0;
}
.pageFooter {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
> .left {
display: flex;
flex-direction: column;
}
}

94
css/style.css Normal file
View file

@ -0,0 +1,94 @@
@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
padding: 0;
margin: 0;
}
* {
font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Outfit", "Noto Color Emoji", sans-serif;
margin-bottom: 6px;
}
body {
background: #f8fafc;
}
.container {
max-width: 1100px;
width: 100%;
margin: 0 auto;
}
ul, ol {
list-style-position: inside;
}
.pageHero {
background-image: url("../img/spawn.jpg");
background-position: center;
color: #fff;
height: 240px;
}
.pageHero > .blurFiler {
backdrop-filter: blur(2px);
padding: 8px 0;
height: calc(100% - 16px);
}
.pageHero > .blurFiler > .container {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.pageNav {
width: 100svw;
background: #f1f5f9;
}
.pageNav > .container {
padding: 16px 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.pageNav > .container > ul {
list-style: none;
display: flex;
gap: 8px;
}
.pageNav > .container > ul > li > a {
color: #0f172a;
text-decoration: none;
padding: 8px 16px;
border-radius: 32px;
}
.pageNav > .container > ul > li > a:hover, .pageNav > .container > ul > li > a.active {
background: rgba(15, 23, 42, 0.1);
}
.pageNav > .container > ul > li > a.buttonPrimary {
background: #6366f1;
color: #fff;
}
.pageContent {
margin: 16px 0;
}
.pageFooter {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.pageFooter > .left {
display: flex;
flex-direction: column;
}
/*# sourceMappingURL=style.css.map */

1
css/style.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/_reset.scss","src/style.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;;;ADAF;EACE;;;AAGF;EACE;EAEA;;;AENF;EACE;;;AAGF;EACE;EAEA;EAEA;;;AAGF;EACE;;;AAGF;EACE;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;;AAKN;EACE;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;EAEA;;AAGE;EACE;EAEA;EAEA;EAEA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAQZ;EACE;;;AAGF;EACE;EACA;EAEA;EACA;;AAEA;EACE;EACA","file":"style.css"}

1
css/style.min.css vendored Normal file
View file

@ -0,0 +1 @@
@import"https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap";*{padding:0;margin:0}*{font-family:"Noto Sans","Noto Color Emoji",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Outfit","Noto Color Emoji",sans-serif;margin-bottom:6px}body{background:#f8fafc}.container{max-width:1100px;width:100%;margin:0 auto}ul,ol{list-style-position:inside}.pageHero{background-image:url("../img/spawn.jpg");background-position:center;color:#fff;height:240px}.pageHero>.blurFiler{backdrop-filter:blur(2px);padding:8px 0;height:calc(100% - 16px)}.pageHero>.blurFiler>.container{height:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.pageNav{width:100svw;background:#f1f5f9}.pageNav>.container{padding:16px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.pageNav>.container>ul{list-style:none;display:flex;gap:8px}.pageNav>.container>ul>li>a{color:#0f172a;text-decoration:none;padding:8px 16px;border-radius:32px}.pageNav>.container>ul>li>a:hover,.pageNav>.container>ul>li>a.active{background:rgba(15,23,42,.1)}.pageNav>.container>ul>li>a.buttonPrimary{background:#6366f1;color:#fff}.pageContent{margin:16px 0}.pageFooter{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.pageFooter>.left{display:flex;flex-direction:column}/*# sourceMappingURL=style.min.css.map */

1
css/style.min.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/_reset.scss","src/style.scss"],"names":[],"mappings":"AAAQ,gRCCN,UACA,WDCA,sDAGF,kBACE,mDAEA,kBENF,KACE,mBAGF,WACE,iBAEA,WAEA,cAGF,MACE,2BAGF,UACE,yCAEA,2BAEA,WAEA,aAEA,qBACE,0BAEA,cAEA,yBAEA,gCACE,YAEA,aACA,mBAEA,mBACA,8BAKN,SACE,aAEA,mBAEA,oBACE,eAEA,aACA,mBAEA,mBACA,8BAEA,uBACE,gBAEA,aAEA,QAGE,4BACE,cAEA,qBAEA,iBAEA,mBAEA,qEACE,6BAGF,0CACE,mBACA,WAQZ,aACE,cAGF,YACE,aACA,mBAEA,mBACA,8BAEA,kBACE,aACA","file":"style.min.css"}