mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-04-26 01:49:23 -05:00
chore(lint): set up .editorconfig, lint all
This commit is contained in:
Ash Monty
parent
cfd7aa9625
commit
37256536aa
15
.editorconfig
Normal file
15
.editorconfig
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
# http://editorconfig.org
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = tab
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.js]
|
||||||
|
indent_size = 4
|
||||||
|
|
||||||
|
[*.{css,handlebars,json}]
|
||||||
|
indent_size = 2
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
{
|
{
|
||||||
"env": {
|
"env": {
|
||||||
"browser": true,
|
"browser": true,
|
||||||
"node": true,
|
"node": true,
|
||||||
"commonjs": true,
|
"commonjs": true,
|
||||||
"es6": true
|
"es6": true
|
||||||
},
|
},
|
||||||
"globals": {
|
"globals": {
|
||||||
"document": true
|
"document": true
|
||||||
},
|
},
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"ecmaVersion": 2021
|
"ecmaVersion": 2021
|
||||||
},
|
},
|
||||||
"extends": "eslint:recommended",
|
"extends": "eslint:recommended",
|
||||||
"rules": {
|
"rules": {
|
||||||
"no-case-declarations": "off",
|
"no-case-declarations": "off",
|
||||||
"no-empty": "off",
|
"no-empty": "off",
|
||||||
"no-console": "off",
|
"no-console": "off",
|
||||||
|
|
@ -23,20 +23,20 @@
|
||||||
"error",
|
"error",
|
||||||
"never"
|
"never"
|
||||||
],
|
],
|
||||||
"indent": [
|
"indent": [
|
||||||
"error",
|
"error",
|
||||||
"tab",
|
"tab",
|
||||||
{
|
{
|
||||||
"SwitchCase": 1
|
"SwitchCase": 1
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"quotes": [
|
"quotes": [
|
||||||
"error",
|
"error",
|
||||||
"single"
|
"single"
|
||||||
],
|
],
|
||||||
"semi": [
|
"semi": [
|
||||||
"error",
|
"error",
|
||||||
"always"
|
"always"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
language: node_js
|
language: node_js
|
||||||
node_js:
|
node_js:
|
||||||
- "7"
|
- "7"
|
||||||
- "8"
|
- "8"
|
||||||
- "9"
|
- "9"
|
||||||
|
|
||||||
sudo: false
|
sudo: false
|
||||||
|
|
||||||
script:
|
script:
|
||||||
- "npm run lint"
|
- "npm run lint"
|
||||||
|
|
|
||||||
|
|
@ -7,5 +7,5 @@ Contributions should go in the [dev branch](https://github.com/PretendoNetwork/w
|
||||||
Visit the [live version](https://pretendo.network)
|
Visit the [live version](https://pretendo.network)
|
||||||
|
|
||||||
<a href="https://discord.gg/DThgbba" target="_blank">
|
<a href="https://discord.gg/DThgbba" target="_blank">
|
||||||
<img src="https://discordapp.com/api/guilds/408718485913468928/widget.png?style=banner3">
|
<img src="https://discordapp.com/api/guilds/408718485913468928/widget.png?style=banner3">
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
15990
package-lock.json
generated
15990
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
86
package.json
86
package.json
|
|
@ -1,45 +1,45 @@
|
||||||
{
|
{
|
||||||
"name": "website",
|
"name": "website",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "src/server.js",
|
"main": "src/server.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "browserify ./public/assets/js/miieditor.js -o ./public/assets/js/miieditor.bundled.js && node src/server.js"
|
"start": "browserify ./public/assets/js/miieditor.js -o ./public/assets/js/miieditor.bundled.js && node src/server.js"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/PretendoNetwork/website.git"
|
"url": "git+https://github.com/PretendoNetwork/website.git"
|
||||||
},
|
},
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/PretendoNetwork/website/issues"
|
"url": "https://github.com/PretendoNetwork/website/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/PretendoNetwork/website#readme",
|
"homepage": "https://github.com/PretendoNetwork/website#readme",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@discordjs/rest": "^0.5.0",
|
"@discordjs/rest": "^0.5.0",
|
||||||
"adm-zip": "^0.5.9",
|
"adm-zip": "^0.5.9",
|
||||||
"browserify": "^17.0.0",
|
"browserify": "^17.0.0",
|
||||||
"colors": "^1.4.0",
|
"colors": "^1.4.0",
|
||||||
"cookie-parser": "^1.4.5",
|
"cookie-parser": "^1.4.5",
|
||||||
"discord-api-types": "^0.36.1",
|
"discord-api-types": "^0.36.1",
|
||||||
"discord-oauth2": "github:ryanblenis/discord-oauth2",
|
"discord-oauth2": "github:ryanblenis/discord-oauth2",
|
||||||
"express": "^4.17.1",
|
"express": "^4.17.1",
|
||||||
"express-handlebars": "^5.3.1",
|
"express-handlebars": "^5.3.1",
|
||||||
"express-locale": "^2.0.0",
|
"express-locale": "^2.0.0",
|
||||||
"fs-extra": "^9.1.0",
|
"fs-extra": "^9.1.0",
|
||||||
"got": "^11.8.2",
|
"got": "^11.8.2",
|
||||||
"gray-matter": "^4.0.3",
|
"gray-matter": "^4.0.3",
|
||||||
"kaitai-struct": "^0.9.0",
|
"kaitai-struct": "^0.9.0",
|
||||||
"marked": "^4.0.10",
|
"marked": "^4.0.10",
|
||||||
"mongoose": "^6.4.0",
|
"mongoose": "^6.4.0",
|
||||||
"morgan": "^1.10.0",
|
"morgan": "^1.10.0",
|
||||||
"nodemailer": "^6.7.5",
|
"nodemailer": "^6.7.5",
|
||||||
"stripe": "^9.9.0",
|
"stripe": "^9.9.0",
|
||||||
"trello": "^0.11.0",
|
"trello": "^0.11.0",
|
||||||
"uuid": "^8.3.2"
|
"uuid": "^8.3.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"eslint": "^7.32.0"
|
"eslint": "^7.32.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,320 +1,320 @@
|
||||||
/* Removing until it's done */
|
/* Removing until it's done */
|
||||||
.setting-card a.edit,
|
.setting-card a.edit,
|
||||||
.sign-in-history a {
|
.sign-in-history a {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-wrapper {
|
.account-wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
column-gap: 48px;
|
column-gap: 48px;
|
||||||
margin-top: 80px;
|
margin-top: 80px;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Account settings sidebar */
|
/* Account settings sidebar */
|
||||||
.account-sidebar .user {
|
.account-sidebar .user {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 55px auto;
|
margin: 55px auto;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
.account-sidebar .user .miiname {
|
.account-sidebar .user .miiname {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
margin: 8px 0 4px;
|
margin: 8px 0 4px;
|
||||||
}
|
}
|
||||||
.account-sidebar .user .username {
|
.account-sidebar .user .username {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.account-sidebar .user .tier-name {
|
.account-sidebar .user .tier-name {
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
border-radius: 1.2em;
|
border-radius: 1.2em;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
padding: 4px 16px;
|
padding: 4px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-sidebar .user .tier-level-0,
|
.account-sidebar .user .tier-level-0,
|
||||||
.account-sidebar .user .access-level-0 {
|
.account-sidebar .user .access-level-0 {
|
||||||
background: #2a2f50;
|
background: #2a2f50;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
border-color: #383f6b;
|
border-color: #383f6b;
|
||||||
}
|
}
|
||||||
.account-sidebar .user .tier-level-1 {
|
.account-sidebar .user .tier-level-1 {
|
||||||
background: rgba(255, 132, 132, 0.2);
|
background: rgba(255, 132, 132, 0.2);
|
||||||
color: #FF8484;
|
color: #FF8484;
|
||||||
border-color: rgba(255, 132, 132, 0.8);
|
border-color: rgba(255, 132, 132, 0.8);
|
||||||
}
|
}
|
||||||
.account-sidebar .user .tier-level-2 {
|
.account-sidebar .user .tier-level-2 {
|
||||||
background: rgba(89, 201, 165, 0.3);
|
background: rgba(89, 201, 165, 0.3);
|
||||||
color:#59c9a5;
|
color:#59c9a5;
|
||||||
border-color: #59c9a5;
|
border-color: #59c9a5;
|
||||||
}
|
}
|
||||||
.account-sidebar .user .tier-level-3 {
|
.account-sidebar .user .tier-level-3 {
|
||||||
background: rgba(202, 177, 251, 0.3);
|
background: rgba(202, 177, 251, 0.3);
|
||||||
color:var(--accent-shade-3);
|
color:var(--accent-shade-3);
|
||||||
border-color: var(--accent-shade-3);
|
border-color: var(--accent-shade-3);
|
||||||
}
|
}
|
||||||
.account-sidebar .user .access-level-banned {
|
.account-sidebar .user .access-level-banned {
|
||||||
background: rgba(255, 63, 0, 0.1);
|
background: rgba(255, 63, 0, 0.1);
|
||||||
color:#FF3F00;
|
color:#FF3F00;
|
||||||
border-color: rgba(255, 63, 0, 0.8);
|
border-color: rgba(255, 63, 0, 0.8);
|
||||||
}
|
}
|
||||||
.account-sidebar .user .access-level-1 {
|
.account-sidebar .user .access-level-1 {
|
||||||
background: rgba(100, 247, 239, 0.3);
|
background: rgba(100, 247, 239, 0.3);
|
||||||
color: #64F7EF;
|
color: #64F7EF;
|
||||||
border-color: #64F7EF;
|
border-color: #64F7EF;
|
||||||
}
|
}
|
||||||
.account-sidebar .user .access-level-2 {
|
.account-sidebar .user .access-level-2 {
|
||||||
background: rgba(255, 199, 89, 0.3);
|
background: rgba(255, 199, 89, 0.3);
|
||||||
color: #FFC759;
|
color: #FFC759;
|
||||||
border-color: #FFC759;
|
border-color: #FFC759;
|
||||||
}
|
}
|
||||||
.account-sidebar .user .access-level-3 {
|
.account-sidebar .user .access-level-3 {
|
||||||
background: rgba(90, 255, 21, 0.3);
|
background: rgba(90, 255, 21, 0.3);
|
||||||
color:#5AFF15;
|
color:#5AFF15;
|
||||||
border-color: #5AFF15;
|
border-color: #5AFF15;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-sidebar .user .mii {
|
.account-sidebar .user .mii {
|
||||||
width: 128px;
|
width: 128px;
|
||||||
height: 128px;
|
height: 128px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
}
|
}
|
||||||
.account-sidebar .buttons a {
|
.account-sidebar .buttons a {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 20px 24px;
|
padding: 20px 24px;
|
||||||
margin: 20px 0 0;
|
margin: 20px 0 0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.account-sidebar .buttons a svg {
|
.account-sidebar .buttons a svg {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
.account-sidebar .buttons a p.caption {
|
.account-sidebar .buttons a p.caption {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.account-sidebar .buttons p.cemu-warning {
|
.account-sidebar .buttons p.cemu-warning {
|
||||||
margin: 4px 0 0;
|
margin: 4px 0 0;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Settings */
|
/* Settings */
|
||||||
.settings-wrapper {
|
.settings-wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-column-start: 2;
|
grid-column-start: 2;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
column-gap: 20px;
|
column-gap: 20px;
|
||||||
}
|
}
|
||||||
.settings-wrapper a {
|
.settings-wrapper a {
|
||||||
color: var(--accent-shade-1);
|
color: var(--accent-shade-1);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.settings-wrapper a:hover {
|
.settings-wrapper a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.settings-wrapper h2.section-header {
|
.settings-wrapper h2.section-header {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
grid-column: 1 / 3;
|
grid-column: 1 / 3;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-card {
|
.setting-card {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 35px repeat(2, auto);
|
grid-template-rows: 35px repeat(2, auto);
|
||||||
row-gap: 24px;
|
row-gap: 24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: var(--bg-shade-2);
|
background: var(--bg-shade-2);
|
||||||
padding: 48px 60px;
|
padding: 48px 60px;
|
||||||
}
|
}
|
||||||
.setting-card * {
|
.setting-card * {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.setting-card .edit {
|
.setting-card .edit {
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 42px;
|
top: 42px;
|
||||||
right: 48px;
|
right: 48px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
.setting-card .edit:hover {
|
.setting-card .edit:hover {
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-card .header {
|
.setting-card .header {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-card .setting-list {
|
.setting-card .setting-list {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, auto);
|
grid-template-columns: repeat(2, auto);
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.setting-card .setting-list p.label {
|
.setting-card .setting-list p.label {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: min-content;
|
height: min-content;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-card .server-selection {
|
.setting-card .server-selection {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
}
|
}
|
||||||
.setting-card .server-selection input {
|
.setting-card .server-selection input {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.server-selection input + label {
|
.server-selection input + label {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 50%;
|
flex: 50%;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.server-selection input + label h2 {
|
.server-selection input + label h2 {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
}
|
}
|
||||||
.server-selection input:checked + label,
|
.server-selection input:checked + label,
|
||||||
.server-selection input:checked + label h2 {
|
.server-selection input:checked + label h2 {
|
||||||
background: var(--accent-shade-0);
|
background: var(--accent-shade-0);
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-card #link-discord-account {
|
.setting-card #link-discord-account {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 48px;
|
padding: 12px 48px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-card button {
|
.setting-card button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
padding: 12px 48px;
|
padding: 12px 48px;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-card.span-both-columns {
|
.setting-card.span-both-columns {
|
||||||
grid-column: 1 / span 2;
|
grid-column: 1 / span 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes banner-notice {
|
@keyframes banner-notice {
|
||||||
0% {
|
0% {
|
||||||
top: -150px;
|
top: -150px;
|
||||||
}
|
}
|
||||||
20% {
|
20% {
|
||||||
top: 35px;
|
top: 35px;
|
||||||
}
|
}
|
||||||
80% {
|
80% {
|
||||||
top: 35px;
|
top: 35px;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
top: -150px;
|
top: -150px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.banner-notice {
|
.banner-notice {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: -150px;
|
top: -150px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
animation: banner-notice 5s;
|
animation: banner-notice 5s;
|
||||||
}
|
}
|
||||||
.banner-notice div {
|
.banner-notice div {
|
||||||
padding: 4px 36px;
|
padding: 4px 36px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
.banner-notice.success div {
|
.banner-notice.success div {
|
||||||
background: var(--green-shade-0);
|
background: var(--green-shade-0);
|
||||||
}
|
}
|
||||||
.banner-notice.error div {
|
.banner-notice.error div {
|
||||||
background: var(--red-shade-1);
|
background: var(--red-shade-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-top: 80px;
|
margin-top: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1300px) {
|
@media screen and (max-width: 1300px) {
|
||||||
.account-wrapper {
|
.account-wrapper {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-wrapper {
|
.settings-wrapper {
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-sidebar {
|
.account-sidebar {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-sidebar .user .mii {
|
.account-sidebar .user .mii {
|
||||||
width: 128px;
|
width: 128px;
|
||||||
height: 128px;
|
height: 128px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1000px) {
|
@media screen and (max-width: 1000px) {
|
||||||
.settings-wrapper {
|
.settings-wrapper {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-card {
|
.setting-card {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 550px) {
|
@media screen and (max-width: 550px) {
|
||||||
.setting-card {
|
.setting-card {
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
width: calc(100vw - 48px);
|
width: calc(100vw - 48px);
|
||||||
margin-left: -5vw;
|
margin-left: -5vw;
|
||||||
margin-right: -2.5vw;
|
margin-right: -2.5vw;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-card .edit {
|
.setting-card .edit {
|
||||||
top: 20px;
|
top: 20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
transform: scale(0.85);
|
transform: scale(0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-card .server-selection {
|
.setting-card .server-selection {
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 350px) {
|
@media screen and (max-width: 350px) {
|
||||||
.setting-card .setting-list {
|
.setting-card .setting-list {
|
||||||
grid-template-columns: auto;
|
grid-template-columns: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,92 +1,92 @@
|
||||||
.new-font {
|
.new-font {
|
||||||
font-family: museo-sans, sans-serif;
|
font-family: museo-sans, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pretendo {
|
.pretendo {
|
||||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.announcement-hero {
|
.announcement-hero {
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 96px 0;
|
padding: 96px 0;
|
||||||
margin: 36px 0 24px;
|
margin: 36px 0 24px;
|
||||||
}
|
}
|
||||||
.announcement-hero p {
|
.announcement-hero p {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
.announcement-hero h1 {
|
.announcement-hero h1 {
|
||||||
font-size: 450%;
|
font-size: 450%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.announcement-hero::before {
|
.announcement-hero::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 500vw;
|
width: 500vw;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: -50vw;
|
left: -50vw;
|
||||||
background: var(--accent-shade-0);
|
background: var(--accent-shade-0);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bro-what.subscribe {
|
.bro-what.subscribe {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.bro-what.subscribe h1 {
|
.bro-what.subscribe h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
.buy-now {
|
.buy-now {
|
||||||
margin-left:auto;
|
margin-left:auto;
|
||||||
}
|
}
|
||||||
.buy-now button {
|
.buy-now button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bro-what {
|
.bro-what {
|
||||||
padding: 48px;
|
padding: 48px;
|
||||||
}
|
}
|
||||||
.bro-what a {
|
.bro-what a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.dotted-bg {
|
.dotted-bg {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.dotted-bg::before {
|
.dotted-bg::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 500vw;
|
width: 500vw;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: -50vw;
|
left: -50vw;
|
||||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='6' height='6' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform=''%3E%3Crect width='100%25' height='100%25' fill='rgba(27, 31, 59,1)'/%3E%3Ccircle cx='20' cy='20' r='11' fill='rgba(103, 61, 182,0.4)'/%3E%3Cpath d='M9 20aInfinityInfinity 0 0 0InfinityNaNaInfinityInfinity 0 0 0-InfinityNaN' fill='%23ecc94b'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
|
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='6' height='6' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform=''%3E%3Crect width='100%25' height='100%25' fill='rgba(27, 31, 59,1)'/%3E%3Ccircle cx='20' cy='20' r='11' fill='rgba(103, 61, 182,0.4)'/%3E%3Cpath d='M9 20aInfinityInfinity 0 0 0InfinityNaNaInfinityInfinity 0 0 0-InfinityNaN' fill='%23ecc94b'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footnotes {
|
.footnotes {
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 946px) {
|
@media screen and (max-width: 946px) {
|
||||||
header nav a:not(.keep-on-mobile) {
|
header nav a:not(.keep-on-mobile) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.announcement-hero h1 {
|
.announcement-hero h1 {
|
||||||
font-size: 350%;
|
font-size: 350%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 724px) {
|
@media screen and (max-width: 724px) {
|
||||||
|
|
@ -105,35 +105,35 @@
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.announcement-hero h1 {
|
.announcement-hero h1 {
|
||||||
font-size: 250%;
|
font-size: 250%;
|
||||||
}
|
}
|
||||||
.announcement-hero p {
|
.announcement-hero p {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
.bro-what.subscribe {
|
.bro-what.subscribe {
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bro-what a,
|
.bro-what a,
|
||||||
.buy-now button {
|
.buy-now button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bro-what a {
|
.bro-what a {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.announcement-hero {
|
.announcement-hero {
|
||||||
padding: 72px 0;
|
padding: 72px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (max-width: 480px) {
|
||||||
.bro-what {
|
.bro-what {
|
||||||
padding: 36px 0;
|
padding: 36px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,119 +1,119 @@
|
||||||
.blog-card {
|
.blog-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row nowrap;
|
flex-flow: row nowrap;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .post-info {
|
.blog-card .post-info {
|
||||||
flex: 50%;
|
flex: 50%;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .post-info .title {
|
.blog-card .post-info .title {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .post-info .caption {
|
.blog-card .post-info .caption {
|
||||||
margin: 4px 0 32px 0;
|
margin: 4px 0 32px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .pub-info {
|
.blog-card .pub-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .pub-info .date {
|
.blog-card .pub-info .date {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .pub-info > * {
|
.blog-card .pub-info > * {
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
margin-top: 0.2em;
|
margin-top: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .profile {
|
.blog-card .profile {
|
||||||
display: inline-grid;
|
display: inline-grid;
|
||||||
grid-template-columns: 30px auto;
|
grid-template-columns: 30px auto;
|
||||||
grid-gap: 10px;
|
grid-gap: 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
margin-right: 0.3em;
|
margin-right: 0.3em;
|
||||||
}
|
}
|
||||||
.blog-card .profile img {
|
.blog-card .profile img {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .cover {
|
.blog-card .cover {
|
||||||
flex: 50%;
|
flex: 50%;
|
||||||
border: 3px solid var(--bg-shade-0);
|
border: 3px solid var(--bg-shade-0);
|
||||||
border-radius: 0 10px 10px 0;
|
border-radius: 0 10px 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-hero a,
|
.progress-hero a,
|
||||||
.progress-hero a * {
|
.progress-hero a * {
|
||||||
color: var(--accent-shade-1);
|
color: var(--accent-shade-1);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-hero a:hover,
|
.progress-hero a:hover,
|
||||||
.progress-hero a:hover {
|
.progress-hero a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
margin: 10vh auto;
|
margin: 10vh auto;
|
||||||
width: min-content;
|
width: min-content;
|
||||||
}
|
}
|
||||||
.buttons button.secondary.icon-btn {
|
.buttons button.secondary.icon-btn {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-top: 160px;
|
margin-top: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
@media screen and (max-width: 900px) {
|
||||||
.blog-card {
|
.blog-card {
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
}
|
}
|
||||||
.blog-card .post-info {
|
.blog-card .post-info {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
}
|
}
|
||||||
.blog-card .cover {
|
.blog-card .cover {
|
||||||
order: -1;
|
order: -1;
|
||||||
min-height: 250px;
|
min-height: 250px;
|
||||||
border-radius: 10px 10px 0 0;
|
border-radius: 10px 10px 0 0;
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 450px) {
|
@media screen and (max-width: 450px) {
|
||||||
.blog-card .cover {
|
.blog-card .cover {
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
.wrapper {
|
.wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
header {
|
header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-wrap {
|
.card-wrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card {
|
.blog-card {
|
||||||
padding: 60px;
|
padding: 60px;
|
||||||
max-width: 1100px;
|
max-width: 1100px;
|
||||||
margin: 50px auto;
|
margin: 50px auto;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card h1,
|
.blog-card h1,
|
||||||
|
|
@ -25,201 +25,201 @@ header {
|
||||||
.blog-card h4,
|
.blog-card h4,
|
||||||
.blog-card h5,
|
.blog-card h5,
|
||||||
.blog-card h6 {
|
.blog-card h6 {
|
||||||
margin: 40px 0 10px;
|
margin: 40px 0 10px;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card strong {
|
.blog-card strong {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card a,
|
.blog-card a,
|
||||||
.blog-card a * {
|
.blog-card a * {
|
||||||
color: var(--accent-shade-1);
|
color: var(--accent-shade-1);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card a:hover,
|
.blog-card a:hover,
|
||||||
.blog-card a:hover {
|
.blog-card a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card del {
|
.blog-card del {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .title {
|
.blog-card .title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .pub-info {
|
.blog-card .pub-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
.blog-card .pub-info .date {
|
.blog-card .pub-info .date {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
.blog-card .pub-info > * {
|
.blog-card .pub-info > * {
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
margin-top: 0.2em;
|
margin-top: 0.2em;
|
||||||
}
|
}
|
||||||
.blog-card .profile {
|
.blog-card .profile {
|
||||||
display: inline-grid;
|
display: inline-grid;
|
||||||
grid-template-columns: 30px auto;
|
grid-template-columns: 30px auto;
|
||||||
grid-gap: 10px;
|
grid-gap: 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
margin-right: 0.3em;
|
margin-right: 0.3em;
|
||||||
}
|
}
|
||||||
.blog-card .profile img {
|
.blog-card .profile img {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card p,
|
.blog-card p,
|
||||||
.post-info {
|
.post-info {
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card img {
|
.blog-card img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 800px;
|
max-height: 800px;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
.blog-card img.emoji {
|
.blog-card img.emoji {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card video {
|
.blog-card video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card iframe {
|
.blog-card iframe {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 16/9;
|
aspect-ratio: 16/9;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
/* Fallback for aspect-ratio since it's unsupported by some browsers (looking at you Safari) */
|
/* Fallback for aspect-ratio since it's unsupported by some browsers (looking at you Safari) */
|
||||||
@supports not (aspect-ratio: 16/9) {
|
@supports not (aspect-ratio: 16/9) {
|
||||||
.blog-card .aspectratio-fallback {
|
.blog-card .aspectratio-fallback {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 0;
|
height: 0;
|
||||||
padding-top: 56.25%;
|
padding-top: 56.25%;
|
||||||
}
|
}
|
||||||
.blog-card iframe {
|
.blog-card iframe {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* Some twitter iframe specific stuff */
|
/* Some twitter iframe specific stuff */
|
||||||
.blog-card .twitter-tweet {
|
.blog-card .twitter-tweet {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
.blog-card .twitter-tweet iframe {
|
.blog-card .twitter-tweet iframe {
|
||||||
border: none; /* Fixes the double border */
|
border: none; /* Fixes the double border */
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card table {
|
.blog-card table {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.blog-card table th {
|
.blog-card table th {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
background: var(--bg-shade-4);
|
background: var(--bg-shade-4);
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
.blog-card table td {
|
.blog-card table td {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
}
|
}
|
||||||
.blog-card table tr:nth-child(even) {
|
.blog-card table tr:nth-child(even) {
|
||||||
background: var(--bg-shade-2);
|
background: var(--bg-shade-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card pre code {
|
.blog-card pre code {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card input[type="checkbox"] {
|
.blog-card input[type="checkbox"] {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
vertical-align: -60%;
|
vertical-align: -60%;
|
||||||
}
|
}
|
||||||
.blog-card input[type="checkbox"]:checked {
|
.blog-card input[type="checkbox"]:checked {
|
||||||
content: "checkboxtest";
|
content: "checkboxtest";
|
||||||
background: no-repeat center/contain url(../images/check.svg),
|
background: no-repeat center/contain url(../images/check.svg),
|
||||||
var(--bg-shade-3);
|
var(--bg-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card hr {
|
.blog-card hr {
|
||||||
border: 1px solid var(--text-shade-1);
|
border: 1px solid var(--text-shade-1);
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card blockquote {
|
.blog-card blockquote {
|
||||||
border-left: 2px solid var(--text-shade-1);
|
border-left: 2px solid var(--text-shade-1);
|
||||||
padding: 8px 24px;
|
padding: 8px 24px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (max-width: 800px) {
|
||||||
.blog-card {
|
.blog-card {
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 35px auto;
|
margin: 35px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card {
|
.blog-card {
|
||||||
padding: 40px 5vw;
|
padding: 40px 5vw;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
margin: auto auto 40px;
|
margin: auto auto 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,18 +10,18 @@ button {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
padding: 12px 48px;
|
padding: 12px 48px;
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
button:hover {
|
button:hover {
|
||||||
background: var(--bg-shade-4);
|
background: var(--bg-shade-4);
|
||||||
}
|
}
|
||||||
button.primary {
|
button.primary {
|
||||||
background: var(--accent-shade-0);
|
background: var(--accent-shade-0);
|
||||||
}
|
}
|
||||||
button.primary:hover {
|
button.primary:hover {
|
||||||
background: var(--accent-shade-1);
|
background: var(--accent-shade-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.secondary.icon-btn {
|
button.secondary.icon-btn {
|
||||||
|
|
@ -40,101 +40,101 @@ button svg {
|
||||||
/* MODALS */
|
/* MODALS */
|
||||||
|
|
||||||
body.modal-open {
|
body.modal-open {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.modal-wrapper {
|
div.modal-wrapper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
div.modal-wrapper.hidden {
|
div.modal-wrapper.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
div.modal {
|
div.modal {
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
padding: 48px;
|
padding: 48px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: min(660px, 90%);
|
width: min(660px, 90%);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.modal h1 {
|
div.modal h1 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
p.modal-caption {
|
p.modal-caption {
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
}
|
}
|
||||||
p.modal-caption span,
|
p.modal-caption span,
|
||||||
p.switch-tier-modal-caption span {
|
p.switch-tier-modal-caption span {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-button-wrapper {
|
.modal-button-wrapper {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
.modal-button-wrapper button {
|
.modal-button-wrapper button {
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
.modal-button-wrapper button.cancel {
|
.modal-button-wrapper button.cancel {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
.modal-button-wrapper button {
|
.modal-button-wrapper button {
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
div.modal {
|
div.modal {
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MISC FORM COMPONENTS */
|
/* MISC FORM COMPONENTS */
|
||||||
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
vertical-align: -65%;
|
vertical-align: -65%;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
input[type="checkbox"]:checked {
|
input[type="checkbox"]:checked {
|
||||||
background: no-repeat center/contain url(../images/check.svg), var(--accent-shade-0);
|
background: no-repeat center/contain url(../images/check.svg), var(--accent-shade-0);
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
display: block;
|
display: block;
|
||||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
background-color: var(--bg-shade-3);
|
background-color: var(--bg-shade-3);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
width: calc(100% - 24px);
|
width: calc(100% - 24px);
|
||||||
}
|
}
|
||||||
input:focus {
|
input:focus {
|
||||||
background-color: var(--bg-shade-4);
|
background-color: var(--bg-shade-4);
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: 150ms;
|
transition: 150ms;
|
||||||
}
|
}
|
||||||
|
|
@ -1,221 +1,221 @@
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background: var(--bg-shade-0);
|
background: var(--bg-shade-0);
|
||||||
}
|
}
|
||||||
a.logo-link {
|
a.logo-link {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-left: 36px;
|
margin-left: 36px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.docs-wrapper header {
|
.docs-wrapper header {
|
||||||
width: calc(100% - 72px);
|
width: calc(100% - 72px);
|
||||||
background: var(--bg-shade-0);
|
background: var(--bg-shade-0);
|
||||||
padding: 12px 36px;
|
padding: 12px 36px;
|
||||||
margin: 18px 0;
|
margin: 18px 0;
|
||||||
}
|
}
|
||||||
header a.logo-link {
|
header a.logo-link {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
header nav a:first-child {
|
header nav a:first-child {
|
||||||
margin-left: -24px;
|
margin-left: -24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-wrapper {
|
.docs-wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, fit-content(100%));
|
grid-template-columns: repeat(2, fit-content(100%));
|
||||||
grid-template-rows: repeat(2, fit-content(100%));
|
grid-template-rows: repeat(2, fit-content(100%));
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-wrapper .sidebar {
|
.docs-wrapper .sidebar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: clamp(270px, 30vw, 500px);
|
width: clamp(270px, 30vw, 500px);
|
||||||
background: var(--bg-shade-0);
|
background: var(--bg-shade-0);
|
||||||
max-height: calc(100vh - 69px);
|
max-height: calc(100vh - 69px);
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
.docs-wrapper .sidebar .section {
|
.docs-wrapper .sidebar .section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
margin-left: 138px;
|
margin-left: 138px;
|
||||||
margin-bottom: 72px;
|
margin-bottom: 72px;
|
||||||
}
|
}
|
||||||
.docs-wrapper .sidebar .section:first-child {
|
.docs-wrapper .sidebar .section:first-child {
|
||||||
margin-top: 72px;
|
margin-top: 72px;
|
||||||
}
|
}
|
||||||
.docs-wrapper .sidebar .section h5 {
|
.docs-wrapper .sidebar .section h5 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--text-shade-0);
|
color: var(--text-shade-0);
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.docs-wrapper .sidebar .section a {
|
.docs-wrapper .sidebar .section a {
|
||||||
position: relative;
|
position: relative;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.docs-wrapper .sidebar .section a.active,
|
.docs-wrapper .sidebar .section a.active,
|
||||||
.docs-wrapper .sidebar .section a:hover {
|
.docs-wrapper .sidebar .section a:hover {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
.docs-wrapper .sidebar .section a.active::before {
|
.docs-wrapper .sidebar .section a.active::before {
|
||||||
/* This filter thing is jank, if anyone knows a better way to do this please fix */
|
/* This filter thing is jank, if anyone knows a better way to do this please fix */
|
||||||
filter: invert(51%) sepia(12%) saturate(2930%) hue-rotate(218deg)
|
filter: invert(51%) sepia(12%) saturate(2930%) hue-rotate(218deg)
|
||||||
brightness(99%) contrast(92%);
|
brightness(99%) contrast(92%);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -30px;
|
left: -30px;
|
||||||
content: url(../images/arrow-right.svg);
|
content: url(../images/arrow-right.svg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-wrapper .content {
|
.docs-wrapper .content {
|
||||||
width: calc(100vw - clamp(270px, 30vw, 500px) - (72px * 2));
|
width: calc(100vw - clamp(270px, 30vw, 500px) - (72px * 2));
|
||||||
background: var(--bg-shade-1);
|
background: var(--bg-shade-1);
|
||||||
padding: 72px;
|
padding: 72px;
|
||||||
max-height: calc(100vh - 69px - (72px * 2));
|
max-height: calc(100vh - 69px - (72px * 2));
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
.docs-wrapper .content-inner {
|
.docs-wrapper .content-inner {
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
}
|
}
|
||||||
.docs-wrapper .content p {
|
.docs-wrapper .content p {
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
}
|
}
|
||||||
.docs-wrapper .content h1:first-child {
|
.docs-wrapper .content h1:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.docs-wrapper .content .quick-links-grid {
|
.docs-wrapper .content .quick-links-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
grid-gap: 24px;
|
grid-gap: 24px;
|
||||||
margin-bottom: 60px;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
.docs-wrapper .quick-links-grid a {
|
.docs-wrapper .quick-links-grid a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background: var(--bg-shade-2);
|
background: var(--bg-shade-2);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
.docs-wrapper .quick-links-grid svg:first-child {
|
.docs-wrapper .quick-links-grid svg:first-child {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
margin-right: 24px;
|
margin-right: 24px;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
color: var(--accent-shade-2);
|
color: var(--accent-shade-2);
|
||||||
}
|
}
|
||||||
.docs-wrapper .quick-links-grid p.header {
|
.docs-wrapper .quick-links-grid p.header {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.docs-wrapper .quick-links-grid p {
|
.docs-wrapper .quick-links-grid p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.docs-wrapper .quick-links-grid svg:last-child {
|
.docs-wrapper .quick-links-grid svg:last-child {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar styling 'cause it's fancy */
|
/* Scrollbar styling 'cause it's fancy */
|
||||||
.docs-wrapper .sidebar::-webkit-scrollbar,
|
.docs-wrapper .sidebar::-webkit-scrollbar,
|
||||||
.docs-wrapper .content::-webkit-scrollbar,
|
.docs-wrapper .content::-webkit-scrollbar,
|
||||||
.docs-wrapper .content pre code::-webkit-scrollbar {
|
.docs-wrapper .content pre code::-webkit-scrollbar {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
.docs-wrapper .sidebar::-webkit-scrollbar-track,
|
.docs-wrapper .sidebar::-webkit-scrollbar-track,
|
||||||
.docs-wrapper .content::-webkit-scrollbar-track,
|
.docs-wrapper .content::-webkit-scrollbar-track,
|
||||||
.docs-wrapper .content pre code::-webkit-scrollbar-track {
|
.docs-wrapper .content pre code::-webkit-scrollbar-track {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
.docs-wrapper .sidebar::-webkit-scrollbar-thumb,
|
.docs-wrapper .sidebar::-webkit-scrollbar-thumb,
|
||||||
.docs-wrapper .content::-webkit-scrollbar-thumb,
|
.docs-wrapper .content::-webkit-scrollbar-thumb,
|
||||||
.docs-wrapper .content pre code::-webkit-scrollbar-thumb {
|
.docs-wrapper .content pre code::-webkit-scrollbar-thumb {
|
||||||
background-color: var(--text-shade-0);
|
background-color: var(--text-shade-0);
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
border: 3px solid var(--bg-shade-1);
|
border: 3px solid var(--bg-shade-1);
|
||||||
}
|
}
|
||||||
.docs-wrapper .content::-webkit-scrollbar-thumb {
|
.docs-wrapper .content::-webkit-scrollbar-thumb {
|
||||||
border: 3px solid var(--bg-shade-1);
|
border: 3px solid var(--bg-shade-1);
|
||||||
}
|
}
|
||||||
.docs-wrapper .content pre code::-webkit-scrollbar-thumb {
|
.docs-wrapper .content pre code::-webkit-scrollbar-thumb {
|
||||||
border: 3px solid var(--bg-shade-0);
|
border: 3px solid var(--bg-shade-0);
|
||||||
}
|
}
|
||||||
.docs-wrapper .sidebar {
|
.docs-wrapper .sidebar {
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
|
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
|
||||||
}
|
}
|
||||||
.docs-wrapper .content {
|
.docs-wrapper .content {
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
|
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
|
||||||
}
|
}
|
||||||
.docs-wrapper .content pre code {
|
.docs-wrapper .content pre code {
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: var(--text-shade-0) var(--bg-shade-0);
|
scrollbar-color: var(--text-shade-0) var(--bg-shade-0);
|
||||||
}
|
}
|
||||||
.docs-wrapper .content .missing-in-locale-notice {
|
.docs-wrapper .content .missing-in-locale-notice {
|
||||||
background: var(--bg-shade-2);
|
background: var(--bg-shade-2);
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.input-wrapper {
|
.input-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.localization-form input {
|
.localization-form input {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
background-color: var(--bg-shade-3);
|
background-color: var(--bg-shade-3);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: 4px 0 0 4px;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
width: 20px;
|
width: 20px;
|
||||||
flex: 2 10%;
|
flex: 2 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search input::placeholder {
|
.search input::placeholder {
|
||||||
color: var(--text-shade-0);
|
color: var(--text-shade-0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search input:focus {
|
.search input:focus {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: var(--bg-shade-3);
|
color: var(--bg-shade-3);
|
||||||
transition: 200ms;
|
transition: 200ms;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search button {
|
.search button {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
padding: 12px 36px;
|
padding: 12px 36px;
|
||||||
background: var(--accent-shade-0);
|
background: var(--accent-shade-0);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1080px) {
|
@media screen and (max-width: 1080px) {
|
||||||
.docs-wrapper .sidebar .section {
|
.docs-wrapper .sidebar .section {
|
||||||
margin-left: 60px;
|
margin-left: 60px;
|
||||||
width: 184px;
|
width: 184px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,76 +1,76 @@
|
||||||
.select-box {
|
.select-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box > * {
|
.select-box > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box .options-container {
|
.select-box .options-container {
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: all 0.4s;
|
transition: all 0.4s;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: var(--bg-shade-3);
|
background-color: var(--bg-shade-3);
|
||||||
order: 1;
|
order: 1;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 48px;
|
top: 48px;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box .option .item {
|
.select-box .option .item {
|
||||||
color: var(--text-shade-2);
|
color: var(--text-shade-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box .lang {
|
.select-box .lang {
|
||||||
width: 1.3rem;
|
width: 1.3rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
margin-right: .2rem;
|
margin-right: .2rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box .options-container.active {
|
.select-box .options-container.active {
|
||||||
max-height: 240px;
|
max-height: 240px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box .options-container.active + .locale-dropdown-toggle::after {
|
.select-box .options-container.active + .locale-dropdown-toggle::after {
|
||||||
transform: translateY(-50%) rotateX(180deg);
|
transform: translateY(-50%) rotateX(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box .options-container::-webkit-scrollbar {
|
.select-box .options-container::-webkit-scrollbar {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
border-radius: 0 5px 5px 0;
|
border-radius: 0 5px 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box .options-container::-webkit-scrollbar-thumb {
|
.select-box .options-container::-webkit-scrollbar-thumb {
|
||||||
background: var(--text-shade-1);
|
background: var(--text-shade-1);
|
||||||
border-radius: 0 5px 5px 0;
|
border-radius: 0 5px 5px 0;
|
||||||
}
|
}
|
||||||
.select-box .option {
|
.select-box .option {
|
||||||
padding: 12px 15px;
|
padding: 12px 15px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box .option:hover {
|
.select-box .option:hover {
|
||||||
background: var(--bg-shade-4);
|
background: var(--bg-shade-4);
|
||||||
}
|
}
|
||||||
.select-box .option:hover .item {
|
.select-box .option:hover .item {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box label {
|
.select-box label {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box .option .radio {
|
.select-box .option .radio {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,137 +1,137 @@
|
||||||
pre code.hljs {
|
pre code.hljs {
|
||||||
display: block;
|
display: block;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
padding: 36px;
|
padding: 36px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
code.hljs {
|
code.hljs {
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
}
|
}
|
||||||
.hljs {
|
.hljs {
|
||||||
background: var(--bg-shade-0);
|
background: var(--bg-shade-0);
|
||||||
color: #d6deeb;
|
color: #d6deeb;
|
||||||
}
|
}
|
||||||
.hljs-keyword {
|
.hljs-keyword {
|
||||||
color: var(--accent-shade-2);
|
color: var(--accent-shade-2);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
.hljs-built_in {
|
.hljs-built_in {
|
||||||
color: #addb67;
|
color: #addb67;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
.hljs-type {
|
.hljs-type {
|
||||||
color: #82aaff;
|
color: #82aaff;
|
||||||
}
|
}
|
||||||
.hljs-literal {
|
.hljs-literal {
|
||||||
color: #ff5874;
|
color: #ff5874;
|
||||||
}
|
}
|
||||||
.hljs-number {
|
.hljs-number {
|
||||||
color: #f78c6c;
|
color: #f78c6c;
|
||||||
}
|
}
|
||||||
.hljs-regexp {
|
.hljs-regexp {
|
||||||
color: #5ca7e4;
|
color: #5ca7e4;
|
||||||
}
|
}
|
||||||
.hljs-string {
|
.hljs-string {
|
||||||
color: #ecc48d;
|
color: #ecc48d;
|
||||||
}
|
}
|
||||||
.hljs-subst {
|
.hljs-subst {
|
||||||
color: #d3423e;
|
color: #d3423e;
|
||||||
}
|
}
|
||||||
.hljs-symbol {
|
.hljs-symbol {
|
||||||
color: #82aaff;
|
color: #82aaff;
|
||||||
}
|
}
|
||||||
.hljs-class {
|
.hljs-class {
|
||||||
color: #ffcb8b;
|
color: #ffcb8b;
|
||||||
}
|
}
|
||||||
.hljs-function {
|
.hljs-function {
|
||||||
color: #82aaff;
|
color: #82aaff;
|
||||||
}
|
}
|
||||||
.hljs-title {
|
.hljs-title {
|
||||||
color: #dcdcaa;
|
color: #dcdcaa;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
.hljs-params {
|
.hljs-params {
|
||||||
color: #7fdbca;
|
color: #7fdbca;
|
||||||
}
|
}
|
||||||
.hljs-comment {
|
.hljs-comment {
|
||||||
color: #637777;
|
color: #637777;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
.hljs-doctag {
|
.hljs-doctag {
|
||||||
color: #7fdbca;
|
color: #7fdbca;
|
||||||
}
|
}
|
||||||
.hljs-meta,
|
.hljs-meta,
|
||||||
.hljs-meta .hljs-keyword {
|
.hljs-meta .hljs-keyword {
|
||||||
color: #82aaff;
|
color: #82aaff;
|
||||||
}
|
}
|
||||||
.hljs-meta .hljs-string {
|
.hljs-meta .hljs-string {
|
||||||
color: #ecc48d;
|
color: #ecc48d;
|
||||||
}
|
}
|
||||||
.hljs-section {
|
.hljs-section {
|
||||||
color: #82b1ff;
|
color: #82b1ff;
|
||||||
}
|
}
|
||||||
.hljs-attr,
|
.hljs-attr,
|
||||||
.hljs-name,
|
.hljs-name,
|
||||||
.hljs-tag {
|
.hljs-tag {
|
||||||
color: #7fdbca;
|
color: #7fdbca;
|
||||||
}
|
}
|
||||||
.hljs-attribute {
|
.hljs-attribute {
|
||||||
color: #80cbc4;
|
color: #80cbc4;
|
||||||
}
|
}
|
||||||
.hljs-variable {
|
.hljs-variable {
|
||||||
color: #addb67;
|
color: #addb67;
|
||||||
}
|
}
|
||||||
.hljs-bullet {
|
.hljs-bullet {
|
||||||
color: #d9f5dd;
|
color: #d9f5dd;
|
||||||
}
|
}
|
||||||
.hljs-code {
|
.hljs-code {
|
||||||
color: #80cbc4;
|
color: #80cbc4;
|
||||||
}
|
}
|
||||||
.hljs-emphasis {
|
.hljs-emphasis {
|
||||||
color: #c792ea;
|
color: #c792ea;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
.hljs-strong {
|
.hljs-strong {
|
||||||
color: #addb67;
|
color: #addb67;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.hljs-formula {
|
.hljs-formula {
|
||||||
color: #c792ea;
|
color: #c792ea;
|
||||||
}
|
}
|
||||||
.hljs-link {
|
.hljs-link {
|
||||||
color: #ff869a;
|
color: #ff869a;
|
||||||
}
|
}
|
||||||
.hljs-quote {
|
.hljs-quote {
|
||||||
color: #697098;
|
color: #697098;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
.hljs-selector-tag {
|
.hljs-selector-tag {
|
||||||
color: #ff6363;
|
color: #ff6363;
|
||||||
}
|
}
|
||||||
.hljs-selector-id {
|
.hljs-selector-id {
|
||||||
color: #fad430;
|
color: #fad430;
|
||||||
}
|
}
|
||||||
.hljs-selector-class {
|
.hljs-selector-class {
|
||||||
color: #addb67;
|
color: #addb67;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
.hljs-selector-attr,
|
.hljs-selector-attr,
|
||||||
.hljs-selector-pseudo {
|
.hljs-selector-pseudo {
|
||||||
color: #c792ea;
|
color: #c792ea;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
.hljs-template-tag {
|
.hljs-template-tag {
|
||||||
color: #c792ea;
|
color: #c792ea;
|
||||||
}
|
}
|
||||||
.hljs-template-variable {
|
.hljs-template-variable {
|
||||||
color: #addb67;
|
color: #addb67;
|
||||||
}
|
}
|
||||||
.hljs-addition {
|
.hljs-addition {
|
||||||
color: #addb67ff;
|
color: #addb67ff;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
.hljs-deletion {
|
.hljs-deletion {
|
||||||
color: #ef535090;
|
color: #ef535090;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,95 +1,95 @@
|
||||||
.localization-wrapper {
|
.localization-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: calc(100vh - 155px);
|
min-height: calc(100vh - 155px);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.localization-widget {
|
.localization-widget {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.caption {
|
.caption {
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title.dot {
|
.title.dot {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.localization-instr,
|
.localization-instr,
|
||||||
.localization-instr:visited {
|
.localization-instr:visited {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--accent-shade-2);
|
color: var(--accent-shade-2);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -4px;
|
left: -4px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.localization-instr svg {
|
.localization-instr svg {
|
||||||
height: 1.3em;
|
height: 1.3em;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.localization-form {
|
.localization-form {
|
||||||
padding: 36px;
|
padding: 36px;
|
||||||
background-color: var(--bg-shade-0);
|
background-color: var(--bg-shade-0);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
margin-top: 36px;
|
margin-top: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-wrapper {
|
.input-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.localization-form input {
|
.localization-form input {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
background-color: var(--bg-shade-3);
|
background-color: var(--bg-shade-3);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: 4px 0 0 4px;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
width: 20px;
|
width: 20px;
|
||||||
flex: 2 10%;
|
flex: 2 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.localization-form input::placeholder {
|
.localization-form input::placeholder {
|
||||||
color: var(--text-shade-0);
|
color: var(--text-shade-0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.localization-form input:focus {
|
.localization-form input:focus {
|
||||||
background-color: var(--bg-shade-4);
|
background-color: var(--bg-shade-4);
|
||||||
color: var(--bg-shade-3);
|
color: var(--bg-shade-3);
|
||||||
transition: 200ms;
|
transition: 200ms;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.localization-form button {
|
.localization-form button {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0 4px 4px 0;
|
border-radius: 0 4px 4px 0;
|
||||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
padding: 12px 36px;
|
padding: 12px 36px;
|
||||||
background: var(--accent-shade-0);
|
background: var(--accent-shade-0);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,132 +1,132 @@
|
||||||
.wrapper {
|
.wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
header {
|
header {
|
||||||
margin: 35px 0;
|
margin: 35px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-form-wrapper {
|
.account-form-wrapper {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
form.account {
|
form.account {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 40px 48px;
|
padding: 40px 48px;
|
||||||
background-color: var(--bg-shade-2);
|
background-color: var(--bg-shade-2);
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
width: min(480px, 90vw);
|
width: min(480px, 90vw);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
form.account h2 {
|
form.account h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
form.account p {
|
form.account p {
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
form.account div {
|
form.account div {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
form.account label {
|
form.account label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
form.account button {
|
form.account button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--accent-shade-0);
|
background: var(--accent-shade-0);
|
||||||
}
|
}
|
||||||
|
|
||||||
form.account a {
|
form.account a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block;
|
display: block;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
form.account a:hover {
|
form.account a:hover {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
form.account a.pwdreset {
|
form.account a.pwdreset {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
form.account a.register {
|
form.account a.register {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes banner-notice {
|
@keyframes banner-notice {
|
||||||
0% {
|
0% {
|
||||||
top: -150px;
|
top: -150px;
|
||||||
}
|
}
|
||||||
20% {
|
20% {
|
||||||
top: 35px;
|
top: 35px;
|
||||||
}
|
}
|
||||||
80% {
|
80% {
|
||||||
top: 35px;
|
top: 35px;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
top: -150px;
|
top: -150px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.banner-notice {
|
.banner-notice {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: -150px;
|
top: -150px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
animation: banner-notice 5s;
|
animation: banner-notice 5s;
|
||||||
}
|
}
|
||||||
.banner-notice div {
|
.banner-notice div {
|
||||||
padding: 4px 36px;
|
padding: 4px 36px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
.banner-notice.error div {
|
.banner-notice.error div {
|
||||||
background: var(--red-shade-1);
|
background: var(--red-shade-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
form.account.register {
|
form.account.register {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
width: min(780px, 90vw);
|
width: min(780px, 90vw);
|
||||||
column-gap: 24px;
|
column-gap: 24px;
|
||||||
margin-bottom: 48px;
|
margin-bottom: 48px;
|
||||||
}
|
}
|
||||||
form.account.register div.h-captcha {
|
form.account.register div.h-captcha {
|
||||||
grid-column: 1 / span 2;
|
grid-column: 1 / span 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
form.account.register p,
|
form.account.register p,
|
||||||
form.account.register div.email,
|
form.account.register div.email,
|
||||||
form.account.register div.buttons {
|
form.account.register div.buttons {
|
||||||
grid-column: 1 / span 2;
|
grid-column: 1 / span 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 720px) {
|
@media screen and (max-width: 720px) {
|
||||||
form.account.register {
|
form.account.register {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
form.account.register div.h-captcha,
|
form.account.register div.h-captcha,
|
||||||
form.account.register p,
|
form.account.register p,
|
||||||
form.account.register div.email,
|
form.account.register div.email,
|
||||||
form.account.register div.buttons {
|
form.account.register div.buttons {
|
||||||
grid-column: unset;
|
grid-column: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -70,11 +70,11 @@ body, .main-body {
|
||||||
|
|
||||||
h1.dot:not([data-title-suffix]):after, h2.dot:not([data-title-suffix]):after {
|
h1.dot:not([data-title-suffix]):after, h2.dot:not([data-title-suffix]):after {
|
||||||
content: "";
|
content: "";
|
||||||
background-color: var(--accent-shade-1);
|
background-color: var(--accent-shade-1);
|
||||||
width: 0.6rem;
|
width: 0.6rem;
|
||||||
height: 0.6rem;
|
height: 0.6rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
h1.dot[data-title-suffix]:after, h2.dot[data-title-suffix]:after {
|
h1.dot[data-title-suffix]:after, h2.dot[data-title-suffix]:after {
|
||||||
content: attr(data-title-suffix);
|
content: attr(data-title-suffix);
|
||||||
|
|
@ -331,7 +331,7 @@ section.showcase::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
section.showcase .text {
|
section.showcase .text {
|
||||||
max-width: 504px;
|
max-width: 504px;
|
||||||
|
|
@ -894,7 +894,7 @@ section.update-signup div.circle {
|
||||||
|
|
||||||
|
|
||||||
section.showcase {
|
section.showcase {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
section.showcase .grid {
|
section.showcase .grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|
@ -961,7 +961,7 @@ section.update-signup div.circle {
|
||||||
}
|
}
|
||||||
|
|
||||||
section.showcase {
|
section.showcase {
|
||||||
padding: 160px 0;
|
padding: 160px 0;
|
||||||
}
|
}
|
||||||
section.showcase p.text {
|
section.showcase p.text {
|
||||||
margin-bottom: 82px;
|
margin-bottom: 82px;
|
||||||
|
|
@ -984,7 +984,7 @@ section.update-signup div.circle {
|
||||||
|
|
||||||
section.team-helpers .team-helpers-cards {
|
section.team-helpers .team-helpers-cards {
|
||||||
grid-gap: 12px;
|
grid-gap: 12px;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
section.team-helpers .animation-wrapper .helper-card {
|
section.team-helpers .animation-wrapper .helper-card {
|
||||||
padding: 7px 18px;
|
padding: 7px 18px;
|
||||||
|
|
|
||||||
|
|
@ -1,251 +1,250 @@
|
||||||
body,
|
body,
|
||||||
div.main-body,
|
div.main-body,
|
||||||
.miieditor-wrapper {
|
.miieditor-wrapper {
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.logotype {
|
svg.logotype {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
top:42px;
|
top:42px;
|
||||||
left:162px;
|
left:162px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.miieditor-wrapper {
|
.miieditor-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 2fr 3fr;
|
grid-template-columns: 2fr 3fr;
|
||||||
background: var(--bg-shade-0);
|
background: var(--bg-shade-0);
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
gap: 0 48px;
|
gap: 0 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.miieditor-wrapper::after {
|
.miieditor-wrapper::after {
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: radial-gradient(closest-side, var(--bg-shade-1) 0%, transparent 100%);
|
background: radial-gradient(closest-side, var(--bg-shade-1) 0%, transparent 100%);
|
||||||
width: 200vh;
|
width: 200vh;
|
||||||
height: 200vh;
|
height: 200vh;
|
||||||
top: -100vh;
|
top: -100vh;
|
||||||
left: -100vh;
|
left: -100vh;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.mii-img-wrapper {
|
div.mii-img-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-width: 512px;
|
max-width: 512px;
|
||||||
width: 26vw;
|
width: 26vw;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
img#mii-img {
|
img#mii-img {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 512px;
|
width: 512px;
|
||||||
height: auto;
|
height: auto;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
div.mii-img-wrapper .shadow {
|
div.mii-img-wrapper .shadow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -18px;
|
bottom: -18px;
|
||||||
left: 6px;
|
left: 6px;
|
||||||
height: 72px;
|
height: 72px;
|
||||||
width: 512px;
|
width: 512px;
|
||||||
background: radial-gradient(farthest-side, var(--bg-shade-2) 0%, transparent 100%);
|
background: radial-gradient(farthest-side, var(--bg-shade-2) 0%, transparent 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.params-wrapper {
|
div.params-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow-x: visible;
|
overflow-x: visible;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 150px;
|
margin-top: 150px;
|
||||||
margin-right: 100px;
|
margin-right: 100px;
|
||||||
display: grid;
|
display: grid;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.tabs {
|
div.tabs {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
background: #0A0C19;
|
background: #0A0C19;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
div.tabs .tabbtn {
|
div.tabs .tabbtn {
|
||||||
min-width: 42px;
|
min-width: 42px;
|
||||||
min-height: 42px;
|
min-height: 42px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: none;
|
background: none;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
div.tabs .tabbtn:hover,
|
div.tabs .tabbtn:hover,
|
||||||
div.tabs .tabbtn.active {
|
div.tabs .tabbtn.active {
|
||||||
background: var(--bg-shade-1);
|
background: var(--bg-shade-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.subtabs {
|
div.subtabs {
|
||||||
position: relative;
|
position: relative;
|
||||||
grid-column: 1 / span 2;
|
grid-column: 1 / span 2;
|
||||||
}
|
}
|
||||||
div.subtabs .subtabbtn {
|
div.subtabs .subtabbtn {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: none;
|
background: none;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
div.subtabs .subtabbtn.active::before,
|
div.subtabs .subtabbtn.active::before,
|
||||||
div.subtabs .subtabbtn.active:hover::before {
|
div.subtabs .subtabbtn.active:hover::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
background: var(--accent-shade-1);
|
background: var(--accent-shade-1);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtab.has-sliders {
|
.subtab.has-sliders {
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
form.params {
|
form.params {
|
||||||
grid-template-columns: repeat(2, auto);
|
grid-template-columns: repeat(2, auto);
|
||||||
}
|
}
|
||||||
form.params .tab {
|
form.params .tab {
|
||||||
display: none;
|
display: none;
|
||||||
grid-template-columns: 534px 258px;
|
grid-template-columns: 534px 258px;
|
||||||
gap: 48px;
|
gap: 48px;
|
||||||
}
|
}
|
||||||
form.params .tab.active {
|
form.params .tab.active {
|
||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: none;
|
display: none;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
gap: 18px;
|
gap: 18px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
}
|
}
|
||||||
fieldset.active {
|
fieldset.active {
|
||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
fieldset.color {
|
fieldset.color {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
}
|
}
|
||||||
fieldset input[type="radio"] {
|
fieldset input[type="radio"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
fieldset input[type="radio"] + label {
|
fieldset input[type="radio"] + label {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
}
|
}
|
||||||
fieldset input[type="radio"]:checked + label {
|
fieldset input[type="radio"]:checked + label {
|
||||||
background: var(--bg-shade-4);
|
background: var(--bg-shade-4);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
box-shadow: inset 0 0 0 4px var(--accent-shade-1);
|
box-shadow: inset 0 0 0 4px var(--accent-shade-1);
|
||||||
}
|
}
|
||||||
fieldset.color input[type="radio"]:checked + label {
|
fieldset.color input[type="radio"]:checked + label {
|
||||||
box-shadow: inset 0 0 0 4px var(--accent-shade-1), inset 0 0 0 6px var(--bg-shade-1);
|
box-shadow: inset 0 0 0 4px var(--accent-shade-1), inset 0 0 0 6px var(--bg-shade-1);
|
||||||
}
|
}
|
||||||
div.colorSidebar {
|
div.colorSidebar {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset.has-subpages.active {
|
fieldset.has-subpages.active {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
fieldset.has-subpages .subpage {
|
fieldset.has-subpages .subpage {
|
||||||
display: none;
|
display: none;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
gap: 18px;
|
gap: 18px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
}
|
}
|
||||||
fieldset.has-subpages .subpage.active {
|
fieldset.has-subpages .subpage.active {
|
||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="range"].invert {
|
input[type="range"].invert {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
grid-column: 3 / span 2;
|
grid-column: 3 / span 2;
|
||||||
grid-row: 4;
|
grid-row: 4;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
}
|
}
|
||||||
.pagination .current-page-index {
|
.pagination .current-page-index {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
width: 18px;
|
width: 18px;
|
||||||
margin-right: 0.7ch;
|
margin-right: 0.7ch;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-btn {
|
.page-btn {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.page-btn svg{
|
.page-btn svg{
|
||||||
height: 36px;
|
height: 36px;
|
||||||
margin: 6px
|
margin: 6px
|
||||||
}
|
}
|
||||||
.page-btn.disabled {
|
.page-btn.disabled {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.page-btn.disabled svg path {
|
.page-btn.disabled svg path {
|
||||||
fill: var(--bg-shade-3);
|
fill: var(--bg-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
button * {
|
button * {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.miieditor-wrapper::before {
|
.miieditor-wrapper::before {
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: var(--bg-shade-1);
|
background: var(--bg-shade-1);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
width: 1308px;
|
width: 1308px;
|
||||||
height: 1707px;
|
height: 1707px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
right: -200px;
|
right: -200px;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,111 +1,111 @@
|
||||||
footer {
|
footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, fit-content(100%)) 1fr;
|
grid-template-columns: repeat(3, fit-content(100%)) 1fr;
|
||||||
gap: 7.7vw;
|
gap: 7.7vw;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
margin-top: 120px;
|
margin-top: 120px;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 60px 0;
|
padding: 60px 0;
|
||||||
}
|
}
|
||||||
footer::after {
|
footer::after {
|
||||||
content: "";
|
content: "";
|
||||||
width: 400vw;
|
width: 400vw;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: -50vw;
|
left: -50vw;
|
||||||
background: var(--bg-shade-0);
|
background: var(--bg-shade-0);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
footer div {
|
footer div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
footer svg.logotype {
|
footer svg.logotype {
|
||||||
height: 56px;
|
height: 56px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin: -10px 0 24px -10px;
|
margin: -10px 0 24px -10px;
|
||||||
}
|
}
|
||||||
footer p {
|
footer p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
footer h1 {
|
footer h1 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
footer a {
|
footer a {
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
footer a:hover {
|
footer a:hover {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
footer div.discord-server-card {
|
footer div.discord-server-card {
|
||||||
background: var(--bg-shade-2);
|
background: var(--bg-shade-2);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 30px 90px 30px 36px;
|
padding: 30px 90px 30px 36px;
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
}
|
}
|
||||||
footer div.discord-server-card h1 {
|
footer div.discord-server-card h1 {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
footer div.discord-server-card h2 {
|
footer div.discord-server-card h2 {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
footer div.discord-server-card a {
|
footer div.discord-server-card a {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--accent-shade-3);
|
color: var(--accent-shade-3);
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin-left: -2px;
|
margin-left: -2px;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
footer div.discord-server-card a:hover {
|
footer div.discord-server-card a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
footer div.discord-server-card svg {
|
footer div.discord-server-card svg {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
stroke-width: 3px;
|
stroke-width: 3px;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
@media screen and (max-width: 900px) {
|
||||||
footer {
|
footer {
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
grid-template-rows: repeat(2, fit-content(100%));
|
grid-template-rows: repeat(2, fit-content(100%));
|
||||||
}
|
}
|
||||||
footer div {
|
footer div {
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
}
|
}
|
||||||
footer div.discord-server-card {
|
footer div.discord-server-card {
|
||||||
grid-column: 1 / span 4;
|
grid-column: 1 / span 4;
|
||||||
width: calc(100% - 126px);
|
width: calc(100% - 126px);
|
||||||
justify-self: normal;
|
justify-self: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 580px) {
|
@media screen and (max-width: 580px) {
|
||||||
footer {
|
footer {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
grid-template-rows: repeat(4, fit-content(100%));
|
grid-template-rows: repeat(4, fit-content(100%));
|
||||||
}
|
}
|
||||||
footer div {
|
footer div {
|
||||||
justify-self: start;
|
justify-self: start;
|
||||||
}
|
}
|
||||||
footer div.discord-server-card {
|
footer div.discord-server-card {
|
||||||
grid-column: 1 / span 1;
|
grid-column: 1 / span 1;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
width: calc(100% - 60px);
|
width: calc(100% - 60px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,155 +1,155 @@
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 35px;
|
margin-top: 35px;
|
||||||
}
|
}
|
||||||
header a {
|
header a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
header .logo-link,
|
header .logo-link,
|
||||||
header .logo-link svg {
|
header .logo-link svg {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
header nav a:first-child {
|
header nav a:first-child {
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
}
|
}
|
||||||
header nav a {
|
header nav a {
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
margin: 0 17px;
|
margin: 0 17px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
header nav a:hover {
|
header nav a:hover {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
transition: color 50ms ease-in-out;
|
transition: color 50ms ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
header .right-section {
|
header .right-section {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
grid-gap: 24px;
|
grid-gap: 24px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
header .locale-dropdown-toggle {
|
header .locale-dropdown-toggle {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
transition: color 150ms;
|
transition: color 150ms;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
header .locale-dropdown-toggle:hover,
|
header .locale-dropdown-toggle:hover,
|
||||||
header .locale-dropdown-toggle.active {
|
header .locale-dropdown-toggle.active {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
header .user-widget-wrapper {
|
header .user-widget-wrapper {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header .user-widget-wrapper a.login-link {
|
header .user-widget-wrapper a.login-link {
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: color 150ms;
|
transition: color 150ms;
|
||||||
}
|
}
|
||||||
header .user-widget-wrapper a.login-link:hover {
|
header .user-widget-wrapper a.login-link:hover {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
header .user-widget-wrapper.logged-in {
|
header .user-widget-wrapper.logged-in {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
header .user-widget-wrapper.logged-in .user-widget-toggle {
|
header .user-widget-wrapper.logged-in .user-widget-toggle {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
background: var(--text-shade-0);
|
background: var(--text-shade-0);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
header .user-widget-wrapper .user-widget-toggle img,
|
header .user-widget-wrapper .user-widget-toggle img,
|
||||||
header .user-widget .user-avatar img {
|
header .user-widget .user-avatar img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
header .user-widget {
|
header .user-widget {
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
transition: max-height 300ms, padding 200ms, opacity 150ms;
|
transition: max-height 300ms, padding 200ms, opacity 150ms;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 48px;
|
top: 48px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: var(--bg-shade-2);
|
background: var(--bg-shade-2);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
box-shadow: 0 0 10px -2px var(--bg-shade-0);
|
box-shadow: 0 0 10px -2px var(--bg-shade-0);
|
||||||
}
|
}
|
||||||
header .user-widget.active {
|
header .user-widget.active {
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
padding: 36px;
|
padding: 36px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
header .user-widget .user-avatar {
|
header .user-widget .user-avatar {
|
||||||
width: 128px;
|
width: 128px;
|
||||||
height: 128px;
|
height: 128px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background: var(--text-shade-0);
|
background: var(--text-shade-0);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
header .user-widget .user-info {
|
header .user-widget .user-info {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
header .user-widget .user-info .mii-name {
|
header .user-widget .user-info .mii-name {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
header .user-widget .buttons {
|
header .user-widget .buttons {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
header .user-widget .button {
|
header .user-widget .button {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 60px;
|
padding: 8px 60px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
header .user-widget .button.logout {
|
header .user-widget .button.logout {
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
@media screen and (max-width: 900px) {
|
||||||
header nav a:not(.keep-on-mobile) {
|
header nav a:not(.keep-on-mobile) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
header .logo-link {
|
header .logo-link {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (max-width: 480px) {
|
||||||
header .logo-link svg text {
|
header .logo-link svg text {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
header .logo-link svg {
|
header .logo-link svg {
|
||||||
width: 39.876px;
|
width: 39.876px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header .logo-link {
|
header .logo-link {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
header nav a {
|
header nav a {
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,308 +1,308 @@
|
||||||
.wrapper {
|
.wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
.wrapper::before {
|
.wrapper::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -800px;
|
top: -800px;
|
||||||
content: "";
|
content: "";
|
||||||
background: var(--bg-shade-0);
|
background: var(--bg-shade-0);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
width: 1600px;
|
width: 1600px;
|
||||||
height: 1400px;
|
height: 1400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-arrow {
|
.back-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
top: 36px;
|
top: 36px;
|
||||||
left: max(calc((100vw - 1590px) / 2), 2.5vw);
|
left: max(calc((100vw - 1590px) / 2), 2.5vw);
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
|
|
||||||
transition: filter 150ms;
|
transition: filter 150ms;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
.back-arrow:hover {
|
.back-arrow:hover {
|
||||||
filter: brightness(1.5)
|
filter: brightness(1.5)
|
||||||
}
|
}
|
||||||
.back-arrow svg {
|
.back-arrow svg {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
.back-arrow span {
|
.back-arrow span {
|
||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-form-wrapper {
|
.account-form-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
width: min(1200px, 100%);
|
width: min(1200px, 100%);
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
margin: 0 auto 48px;
|
margin: 0 auto 48px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-form-wrapper .logotype {
|
.account-form-wrapper .logotype {
|
||||||
margin: 36px auto 0;
|
margin: 36px auto 0;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1.title {
|
h1.title {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
p.caption {
|
p.caption {
|
||||||
width: min(100%, 500px);
|
width: min(100%, 500px);
|
||||||
margin: 0 auto 36px;
|
margin: 0 auto 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-form-wrapper .progress-bar-wrapper {
|
.account-form-wrapper .progress-bar-wrapper {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: min(100%, 500px);
|
width: min(100%, 500px);
|
||||||
margin: 0 auto 72px;
|
margin: 0 auto 72px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: var(--bg-shade-2);
|
background: var(--bg-shade-2);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.account-form-wrapper .progress-bar-wrapper p {
|
.account-form-wrapper .progress-bar-wrapper p {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.account-form-wrapper .progress-bar-wrapper p span {
|
.account-form-wrapper .progress-bar-wrapper p span {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-form-wrapper .progress-bar {
|
.account-form-wrapper .progress-bar {
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: 1.3rem;
|
gap: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form .tier-radio {
|
form .tier-radio {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
form .tier-radio:checked + label::before {
|
form .tier-radio:checked + label::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-shadow: inset 0 0 0 4px var(--accent-shade-1);
|
box-shadow: inset 0 0 0 4px var(--accent-shade-1);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
form .tier-radio:checked + label::after {
|
form .tier-radio:checked + label::after {
|
||||||
content: url(/assets/images/check.svg);
|
content: url(/assets/images/check.svg);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: var(--accent-shade-1);
|
background: var(--accent-shade-1);
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -16px;
|
top: -16px;
|
||||||
right: -16px;
|
right: -16px;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
label.tier {
|
label.tier {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: calc(50px + 1rem);
|
padding-top: calc(50px + 1rem);
|
||||||
background: var(--bg-shade-3);
|
background: var(--bg-shade-3);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 150ms;
|
transition: all 150ms;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
label.tier p {
|
label.tier p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
label.tier .tier-thumbnail {
|
label.tier .tier-thumbnail {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -50px;
|
top: -50px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background: var(--bg-shade-4);
|
background: var(--bg-shade-4);
|
||||||
}
|
}
|
||||||
form .tier-radio:checked + label .tier-thumbnail::before {
|
form .tier-radio:checked + label .tier-thumbnail::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-shadow: inset 0 0 0 4px var(--accent-shade-1);
|
box-shadow: inset 0 0 0 4px var(--accent-shade-1);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
label.tier .tier-text {
|
label.tier .tier-text {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
margin-bottom: auto;
|
margin-bottom: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
label.tier .tier-name {
|
label.tier .tier-name {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
label.tier .tier-perks {
|
label.tier .tier-perks {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
margin: 24px auto 48px;
|
margin: 24px auto 48px;
|
||||||
}
|
}
|
||||||
label.tier .tier-perks div {
|
label.tier .tier-perks div {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 16px auto;
|
grid-template-columns: 16px auto;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
label.tier .tier-perks svg {
|
label.tier .tier-perks svg {
|
||||||
stroke-width: 5px;
|
stroke-width: 5px;
|
||||||
stroke: var(--green-shade-1);
|
stroke: var(--green-shade-1);
|
||||||
stroke-linecap: square;
|
stroke-linecap: square;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
margin-top: 0.5ex;
|
margin-top: 0.5ex;
|
||||||
}
|
}
|
||||||
|
|
||||||
label.tier p.price {
|
label.tier p.price {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: var(--bg-shade-4);
|
background: var(--bg-shade-4);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 1.5rem 1rem;
|
padding: 1.5rem 1rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 0 0 10px 10px;
|
border-radius: 0 0 10px 10px;
|
||||||
}
|
}
|
||||||
label.tier p.price span {
|
label.tier p.price span {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-right: 0.5ch;
|
margin-right: 0.5ch;
|
||||||
}
|
}
|
||||||
|
|
||||||
form .button-wrapper {
|
form .button-wrapper {
|
||||||
grid-column: 2 / span 1;
|
grid-column: 2 / span 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
display: block;
|
display: block;
|
||||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
|
|
||||||
background: var(--accent-shade-0);
|
background: var(--accent-shade-0);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
transition: filter 300ms;
|
transition: filter 300ms;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
filter: none;
|
filter: none;
|
||||||
}
|
}
|
||||||
form button.disabled {
|
form button.disabled {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
filter: brightness(0.75) saturate(0.75); /* not using opacity here 'cause in the mobile layout you would see the cards under it */
|
filter: brightness(0.75) saturate(0.75); /* not using opacity here 'cause in the mobile layout you would see the cards under it */
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
form button.unsubscribe {
|
form button.unsubscribe {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: none;
|
background: none;
|
||||||
color: var(--text-shade-1);
|
color: var(--text-shade-1);
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
form button.unsubscribe.hidden {
|
form button.unsubscribe.hidden {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
form button.unsubscribe:hover {
|
form button.unsubscribe:hover {
|
||||||
color: var(--text-shade-3);
|
color: var(--text-shade-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
@media screen and (max-width: 900px) {
|
||||||
.account-form-wrapper {
|
.account-form-wrapper {
|
||||||
width: min(500px, 100%);
|
width: min(500px, 100%);
|
||||||
margin-bottom: 172px;
|
margin-bottom: 172px;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 2.4rem;
|
gap: 2.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form button {
|
form button {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
form .button-wrapper {
|
form .button-wrapper {
|
||||||
grid-column: 1 / span 1;
|
grid-column: 1 / span 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 24px;
|
bottom: 24px;
|
||||||
width: min(500px, 90%);
|
width: min(500px, 90%);
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
form .button-wrapper::before {
|
form .button-wrapper::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -24px;
|
top: -24px;
|
||||||
left: -100vw;
|
left: -100vw;
|
||||||
width: 200vw;
|
width: 200vw;
|
||||||
height: 300%;
|
height: 300%;
|
||||||
background: var(--bg-shade-0);
|
background: var(--bg-shade-0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 380px) {
|
@media screen and (max-width: 380px) {
|
||||||
label.tier .tier-perks {
|
label.tier .tier-perks {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
.back-arrow {
|
.back-arrow {
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
}
|
}
|
||||||
.back-arrow span {
|
.back-arrow span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,7 @@ document.addEventListener('click', (e) => {
|
||||||
let found = false;
|
let found = false;
|
||||||
if (
|
if (
|
||||||
localeDropdown == targetElement ||
|
localeDropdown == targetElement ||
|
||||||
localeDropdown.contains(targetElement)
|
localeDropdown.contains(targetElement)
|
||||||
) {
|
) {
|
||||||
found = true;
|
found = true;
|
||||||
userWidget.classList.remove('active');
|
userWidget.classList.remove('active');
|
||||||
|
|
@ -67,9 +67,9 @@ document.addEventListener('click', (e) => {
|
||||||
|
|
||||||
if (
|
if (
|
||||||
userWidget == targetElement ||
|
userWidget == targetElement ||
|
||||||
userWidget.contains(targetElement) ||
|
userWidget.contains(targetElement) ||
|
||||||
userWidgetToggle == targetElement ||
|
userWidgetToggle == targetElement ||
|
||||||
userWidgetToggle.contains(targetElement)
|
userWidgetToggle.contains(targetElement)
|
||||||
) {
|
) {
|
||||||
found = true;
|
found = true;
|
||||||
localeDropdownToggle.classList.remove('active');
|
localeDropdownToggle.classList.remove('active');
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
{
|
{
|
||||||
"name": "Pretendo Network",
|
"name": "Pretendo Network",
|
||||||
"short_name": "Pretendo Network",
|
"short_name": "Pretendo Network",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "https://pretendo.network/assets/images/icons/android-chrome-192x192.png",
|
"src": "https://pretendo.network/assets/images/icons/android-chrome-192x192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "https://pretendo.network/assets/images/icons/android-chrome-384x384.png",
|
"src": "https://pretendo.network/assets/images/icons/android-chrome-384x384.png",
|
||||||
"sizes": "384x384",
|
"sizes": "384x384",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"theme_color": "#1b1f3b",
|
"theme_color": "#1b1f3b",
|
||||||
"background_color": "#1b1f3b",
|
"background_color": "#1b1f3b",
|
||||||
"display": "standalone"
|
"display": "standalone"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
{
|
{
|
||||||
"name": "Pretendo",
|
"name": "Pretendo",
|
||||||
"short_name": "Pretendo",
|
"short_name": "Pretendo",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "/assets/icons/android-chrome-192x192.png",
|
"src": "/assets/icons/android-chrome-192x192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/assets/icons/android-chrome-384x384.png",
|
"src": "/assets/icons/android-chrome-384x384.png",
|
||||||
"sizes": "384x384",
|
"sizes": "384x384",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"theme_color": "#673db6",
|
"theme_color": "#673db6",
|
||||||
"background_color": "#673db6",
|
"background_color": "#673db6",
|
||||||
"display": "standalone"
|
"display": "standalone"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -12,7 +12,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{#each postList }}
|
{{#each postList }}
|
||||||
<a href="/blog/{{this.slug}}" class="purple-card blog-card">
|
<a href="/blog/{{this.slug}}" class="purple-card blog-card">
|
||||||
<div class="post-info">
|
<div class="post-info">
|
||||||
<h2 class="title">{{{ this.postInfo.title }}}</h2>
|
<h2 class="title">{{{ this.postInfo.title }}}</h2>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
<div class="docs-wrapper">
|
<div class="docs-wrapper">
|
||||||
|
|
||||||
<a href="/" class="logo-link">
|
<a href="/" class="logo-link">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
||||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||||
<g id="logo" transform="translate(553 467)">
|
<g id="logo" transform="translate(553 467)">
|
||||||
|
|
@ -27,15 +27,15 @@
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
{{> header}}
|
{{> header}}
|
||||||
|
|
||||||
{{> docs-sidebar}}
|
{{> docs-sidebar}}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="content-inner">
|
<div class="content-inner">
|
||||||
{{#if missingInLocale}}
|
{{#if missingInLocale}}
|
||||||
<p class="missing-in-locale-notice">{{ localeHelper locale "docs" "missingInLocale" }}</p>
|
<p class="missing-in-locale-notice">{{ localeHelper locale "docs" "missingInLocale" }}</p>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if showQuickLinks}}
|
{{#if showQuickLinks}}
|
||||||
<h1>{{ localeHelper locale "docs" "quickLinks" "header" }}</h1>
|
<h1>{{ localeHelper locale "docs" "quickLinks" "header" }}</h1>
|
||||||
|
|
@ -58,13 +58,12 @@
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{{ content }}}
|
{{{ content }}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
|
||||||
<link rel="stylesheet" href="/assets/css/highlightjs.css">
|
<link rel="stylesheet" href="/assets/css/highlightjs.css">
|
||||||
<script>hljs.highlightAll();</script>
|
<script>hljs.highlightAll();</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
<div class="docs-wrapper">
|
<div class="docs-wrapper">
|
||||||
|
|
||||||
<a href="/" class="logo-link">
|
<a href="/" class="logo-link">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
||||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||||
<g id="logo" transform="translate(553 467)">
|
<g id="logo" transform="translate(553 467)">
|
||||||
|
|
@ -27,14 +27,13 @@
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
{{> header}}
|
{{> header}}
|
||||||
|
|
||||||
{{> docs-sidebar}}
|
{{> docs-sidebar}}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="content-inner">
|
<div class="content-inner">
|
||||||
<div class="card"></div>
|
<div class="card"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,48 @@
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h5>Getting started</h5>
|
<h5>Getting started</h5>
|
||||||
<a href="/docs/welcome">Welcome</a>
|
<a href="/docs/welcome">Welcome</a>
|
||||||
<a href="/docs/installing-juxt" >Installing Juxt</a>
|
<a href="/docs/installing-juxt" >Installing Juxt</a>
|
||||||
<a href="/docs/search">Search</a>
|
<a href="/docs/search">Search</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h5>Error codes - Juxt</h5>
|
<h5>Error codes - Juxt</h5>
|
||||||
<a href="/docs/JXT-598-0000">JXT-598-0000</a>
|
<a href="/docs/JXT-598-0000">JXT-598-0000</a>
|
||||||
<a href="/docs/JXT-598-0001">JXT-598-0001</a>
|
<a href="/docs/JXT-598-0001">JXT-598-0001</a>
|
||||||
<a href="/docs/JXT-598-0002">JXT-598-0002</a>
|
<a href="/docs/JXT-598-0002">JXT-598-0002</a>
|
||||||
<a href="/docs/JXT-598-0003">JXT-598-0003</a>
|
<a href="/docs/JXT-598-0003">JXT-598-0003</a>
|
||||||
<a href="/docs/JXT-598-0009">JXT-598-0009</a>
|
<a href="/docs/JXT-598-0009">JXT-598-0009</a>
|
||||||
<a href="/docs/JXT-598-0010">JXT-598-0010</a>
|
<a href="/docs/JXT-598-0010">JXT-598-0010</a>
|
||||||
<a href="/docs/JXT-598-0011">JXT-598-0011</a>
|
<a href="/docs/JXT-598-0011">JXT-598-0011</a>
|
||||||
<a href="/docs/JXT-598-0015">JXT-598-0015</a>
|
<a href="/docs/JXT-598-0015">JXT-598-0015</a>
|
||||||
<a href="/docs/JXT-598-0020">JXT-598-0020</a>
|
<a href="/docs/JXT-598-0020">JXT-598-0020</a>
|
||||||
<a href="/docs/JXT-598-1XXX">JXT-598-1XXX</a>
|
<a href="/docs/JXT-598-1XXX">JXT-598-1XXX</a>
|
||||||
<a href="/docs/JXT-598-2XXX">JXT-598-2XXX</a>
|
<a href="/docs/JXT-598-2XXX">JXT-598-2XXX</a>
|
||||||
<a href="/docs/JXT-598-3XXX">JXT-598-3XXX</a>
|
<a href="/docs/JXT-598-3XXX">JXT-598-3XXX</a>
|
||||||
<a href="/docs/JXT-598-4XXX">JXT-598-4XXX</a>
|
<a href="/docs/JXT-598-4XXX">JXT-598-4XXX</a>
|
||||||
<a href="/docs/JXT-598-5XXX">JXT-598-5XXX</a>
|
<a href="/docs/JXT-598-5XXX">JXT-598-5XXX</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h5>Error codes - Beans</h5>
|
<h5>Error codes - Beans</h5>
|
||||||
<a href="/docs/Black Beans">Black Beans</a>
|
<a href="/docs/Black Beans">Black Beans</a>
|
||||||
<a href="/docs/black-eyed-peas">Black-Eyed Peas</a>
|
<a href="/docs/black-eyed-peas">Black-Eyed Peas</a>
|
||||||
<a href="/docs/Cannellini Beans">Cannellini Beans</a>
|
<a href="/docs/Cannellini Beans">Cannellini Beans</a>
|
||||||
<a href="/docs/Chickpeas (Garbanzo Beans)">Chickpeas (Garbanzo Beans)</a>
|
<a href="/docs/Chickpeas (Garbanzo Beans)">Chickpeas (Garbanzo Beans)</a>
|
||||||
<a href="/docs/Great Northern Beans">Great Northern Beans</a>
|
<a href="/docs/Great Northern Beans">Great Northern Beans</a>
|
||||||
<a href="/docs/Kidney Beans">Kidney Beans</a>
|
<a href="/docs/Kidney Beans">Kidney Beans</a>
|
||||||
<a href="/docs/Lima Beans">Lima Beans</a>
|
<a href="/docs/Lima Beans">Lima Beans</a>
|
||||||
<a href="/docs/Pinto Beans">Pinto Beans</a>
|
<a href="/docs/Pinto Beans">Pinto Beans</a>
|
||||||
<a href="/docs/Fava Beans">Fava Beans</a>
|
<a href="/docs/Fava Beans">Fava Beans</a>
|
||||||
<a href="/docs/Navy Beans">Navy Beans</a>
|
<a href="/docs/Navy Beans">Navy Beans</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function selectSidebarElement(element) {
|
function selectSidebarElement(element) {
|
||||||
element.scrollIntoView({ block: "center" });
|
element.scrollIntoView({ block: "center" });
|
||||||
element.classList.add('active');
|
element.classList.add('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
selectSidebarElement(document.querySelector("div.sidebar a[href='/docs/{{currentPage}}']"));
|
selectSidebarElement(document.querySelector("div.sidebar a[href='/docs/{{currentPage}}']"));
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user