forked from CRSS/Website
feat: add css
This commit is contained in:
parent
176396ce80
commit
44b742899c
11
css/src/_fonts.scss
Normal file
11
css/src/_fonts.scss
Normal 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
4
css/src/_reset.scss
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
108
css/src/style.scss
Normal file
108
css/src/style.scss
Normal 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
94
css/style.css
Normal 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
1
css/style.css.map
Normal 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
1
css/style.min.css
vendored
Normal 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
1
css/style.min.css.map
Normal 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"}
|
Loading…
Reference in a new issue