9 changed files with 578 additions and 157 deletions
-
1package.json
-
18shell.nix
-
405src/domains/landing/components/Landing.tsx
-
27src/domains/landing/index.tsx
-
21src/domains/status/index.tsx
-
7src/lib/styles.ts
-
246src/styles/landing.css
-
5static/landing/styles/style.css
-
5yarn.lock
@ -0,0 +1,18 @@ |
|||
{ pkgs ? import <nixpkgs> {} }: |
|||
|
|||
with pkgs; |
|||
|
|||
let |
|||
nodePkg = pkgs.nodejs-12_x; |
|||
yarnPkg = pkgs.yarn.override { nodejs = nodePkg; }; |
|||
tslPkg = pkgs.nodePackages.typescript-language-server.override { nodejs = nodePkg; }; |
|||
src = ./.; |
|||
in mkShell { |
|||
shellHook = '' |
|||
export PATH=$PATH:${src}/node_modules/.bin |
|||
''; |
|||
buildInputs = [ |
|||
yarnPkg nodePkg tslPkg |
|||
yarn2nix |
|||
]; |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
import path from 'path'; |
|||
import fs from 'fs'; |
|||
|
|||
export default function embedStyles(filename: string) { |
|||
const file = fs.readFileSync(path.resolve('src/styles', filename), 'utf-8'); |
|||
return file; |
|||
} |
|||
@ -0,0 +1,246 @@ |
|||
@font-face { |
|||
font-family: FiraCode; |
|||
src: url('https://gensokyo.network/static/landing/fonts/FiraCode-Retina.woff2'); |
|||
font-display: swap; |
|||
} |
|||
|
|||
.grid-container { |
|||
width: 100vw; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.grid-cell { |
|||
height: 50vh; |
|||
flex: 0 0 50vw; |
|||
box-sizing: border-box; |
|||
/* width: 50vw; */ |
|||
} |
|||
|
|||
.grid-cell > * > h2 { |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
.grid-cell > div { |
|||
box-sizing: border-box; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
padding: 20px; |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
|
|||
html, body { |
|||
padding: 0; |
|||
margin: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
body { |
|||
font-family: FiraCode; |
|||
} |
|||
|
|||
|
|||
.links { |
|||
list-style: none; |
|||
padding-left: 0; |
|||
} |
|||
|
|||
.links > li { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.cell-text { |
|||
white-space: pre-line; |
|||
} |
|||
|
|||
.dinner { |
|||
color: lightgray; |
|||
} |
|||
|
|||
.feature-list { |
|||
list-style: none; |
|||
padding-left: 0; |
|||
} |
|||
|
|||
.feature-list > li { |
|||
margin-top: 10px; |
|||
} |
|||
.feature-list > li:before { |
|||
content: '<*>'; |
|||
margin-right: 5px;} |
|||
.yuyuko-bg { |
|||
background-image: url('https://gensokyo.network/static/landing/images/yuyuko.webp'); |
|||
background-color: var(--YuyukoBackground); |
|||
} |
|||
|
|||
.youmu-bg { |
|||
background-image: url('https://gensokyo.network/static/landing/images/youmu.webp'); |
|||
background-color: var(--YoumuBackground); |
|||
} |
|||
|
|||
.yuuka-bg { |
|||
background-image: url('https://gensokyo.network/static/landing/images/yuuka.webp'); |
|||
background-color: var(--YuukaBackground); |
|||
} |
|||
|
|||
.byakuren-bg { |
|||
background-image: url('https://gensokyo.network/static/landing/images/byakuren.webp'); |
|||
background-color: var(--ByakurenBackground); |
|||
} |
|||
|
|||
.img-bg { |
|||
z-index: -1; |
|||
content: ''; |
|||
background-size: 200px; |
|||
background-repeat: no-repeat; |
|||
/* background-position-x: left; */ |
|||
background-position: bottom right; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.yuyuko-cell { |
|||
color: var(--YuyukoText); |
|||
position: relative; |
|||
} |
|||
|
|||
.youmu-cell { |
|||
background-color: var(--YoumuBackground); |
|||
color: var(--YoumuText); |
|||
position: relative; |
|||
} |
|||
|
|||
.yuuka-cell { |
|||
background-color: var(--YuukaBackground); |
|||
color: var(--YuukaText); |
|||
position: relative; |
|||
} |
|||
|
|||
.byakuren-cell { |
|||
background-color: var(--ByakurenBackground); |
|||
color: var(--ByakurenText); |
|||
position: relative; |
|||
} |
|||
|
|||
a { |
|||
color: #B6FBFD; |
|||
text-decoration: none; |
|||
transition: border-color 0.5s ease; |
|||
border: 1px solid rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
a:before { |
|||
content: ">="; |
|||
color: white; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
a:hover { |
|||
transition: border-color 0.5s ease; |
|||
border-bottom: 1px solid #B6FBFD !important; |
|||
} |
|||
|
|||
.services-list { |
|||
margin-top: 15px; |
|||
} |
|||
|
|||
.services-list > tbody > tr > td { |
|||
padding: 5px; |
|||
color: var(--ByakurenText); |
|||
} |
|||
.services-list > tbody > tr > td:first-of-type { |
|||
padding-left: 0; |
|||
} |
|||
|
|||
.under-construction { |
|||
position: relative; |
|||
} |
|||
|
|||
.under-construction > * > a { |
|||
color: #9b1719; |
|||
} |
|||
|
|||
.under-construction:before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-image: url('/images/warning.png'); |
|||
background-position: center; |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
ul.bottom-links { |
|||
list-style: none; |
|||
padding-left: 0; |
|||
position: absolute; |
|||
bottom: 15px; |
|||
left: 20px; |
|||
} |
|||
|
|||
ul.bottom-links > li { |
|||
display: inline-block; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.break { |
|||
margin: 0; |
|||
color: white; |
|||
} |
|||
|
|||
.text-success { |
|||
color: var(--Success); |
|||
} |
|||
|
|||
.success { |
|||
color: white; |
|||
background-color: var(--Success); |
|||
} |
|||
|
|||
.text-fail { |
|||
color: var(--Fail); |
|||
} |
|||
|
|||
.fail { |
|||
color: white; |
|||
background-color: var(--Fail); |
|||
} |
|||
|
|||
.text-warning { |
|||
color: var(--Success); |
|||
} |
|||
|
|||
.warning { |
|||
color: white; |
|||
background-color: var(--Fail); |
|||
} |
|||
|
|||
@media (max-width: 820px) { |
|||
.grid-cell { |
|||
flex: 0 0 100vw; |
|||
height: 65vh; |
|||
} |
|||
} |
|||
|
|||
:root { |
|||
--Test: #000000; |
|||
--Success: #32c900; |
|||
--Fail: #c90000; |
|||
--Warning: #D9DB40; |
|||
--YuyukoBackground: #FF6FB7; |
|||
--YuyukoText: white; |
|||
--YoumuBackground: #30AA2A; |
|||
--YoumuText: white; |
|||
--YuukaBackground: #FF0005; |
|||
--YuukaText: white; |
|||
--ByakurenBackground: #8918D2; |
|||
--ByakurenText: white; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue