Compare commits
No commits in common. "master" and "0.6.3" have entirely different histories.
145 changed files with 33858 additions and 8132 deletions
|
|
@ -1,3 +1,3 @@
|
|||
defaults
|
||||
>1% and not dead
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-typescript',
|
||||
'@vue/eslint-config-prettier'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest'
|
||||
}
|
||||
}
|
||||
14
.eslintrc.js
Normal file
14
.eslintrc.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
|
||||
parserOptions: {
|
||||
parser: "babel-eslint",
|
||||
},
|
||||
rules: {
|
||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
},
|
||||
};
|
||||
28
.gitignore
vendored
28
.gitignore
vendored
|
|
@ -1,30 +1,20 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
|
|
|||
3
.jshintrc
Normal file
3
.jshintrc
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"esversion": 9
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
7
.vscode/extensions.json
vendored
7
.vscode/extensions.json
vendored
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode"
|
||||
]
|
||||
}
|
||||
15
.vscode/sftp.json
vendored
Normal file
15
.vscode/sftp.json
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"name": "sebin-reference",
|
||||
"protocol": "sftp",
|
||||
"port": 22,
|
||||
"host": "sebin-ref",
|
||||
"username": "sebin",
|
||||
"privateKeyPath": "~/.ssh/id_sebin",
|
||||
"passphrase": "HeyImGrump20!6",
|
||||
"remotePath": "sebin-ref",
|
||||
"watcher": {
|
||||
"files": "dist/**",
|
||||
"autoUpload": true,
|
||||
"autoDelete": true
|
||||
}
|
||||
}
|
||||
57
README.md
57
README.md
|
|
@ -1,55 +1,24 @@
|
|||
# Sebin Reference Page
|
||||
# sebin-reference
|
||||
|
||||
The official reference page of Sebin Nyshkim, the anthro dragon.
|
||||
|
||||
This page is primarily targeted at artists commissioned to draw Sebin. The idea is to have a single point of truth to easily point to.
|
||||
|
||||
The benefit of this is two-fold:
|
||||
|
||||
* Lack of attachments in Fur Affinity notes
|
||||
* Participating in art raffles on Twitter without cluttering up the media tab with the same image over and over again
|
||||
|
||||
Furthermore, this page serves both for the development of Sebin as an independent character as well as a training ground for learning various new web technologies fitting such a project.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
||||
|
||||
1. Disable the built-in TypeScript Extension
|
||||
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
|
||||
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
||||
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
|
|||
3
babel.config.js
Normal file
3
babel.config.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
presets: ["@vue/cli-plugin-babel/preset"],
|
||||
};
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="flex">
|
||||
<div class="image">
|
||||
<img src="../../../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
|
||||
</div>
|
||||
<div class="headings">
|
||||
<h1>Sebin Nyshkim</h1>
|
||||
<h2>
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/></svg>
|
||||
<span class="handle">SebinNyshkim</span>
|
||||
</span>
|
||||
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
|
||||
<span class="handle">@SebinNyshkim</span>
|
||||
</span>
|
||||
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
|
||||
<span class="handle">@SebinNyshkim@meow.social</span>
|
||||
</span>
|
||||
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
|
||||
<span class="handle">Sebin Nyshkim#8877</span>
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
@import "../../../src/assets/fonts/exo/exo.css";
|
||||
|
||||
:root {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
|
||||
--theme-c-muted-blue: #22759d;
|
||||
--theme-c-amaranth: #e93f3f;
|
||||
--theme-c-deep-purple: #33124a;
|
||||
--theme-c-charcoal: #303030;
|
||||
|
||||
--container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
|
||||
--welcome-header-mainline-font-size: 25vh;
|
||||
--welcome-header-subline-font-size: 10vh;
|
||||
|
||||
--icon-size: calc(var(--welcome-header-subline-font-size) * 1.25);
|
||||
|
||||
--page-background: radial-gradient(circle at bottom right,
|
||||
var(--theme-c-amaranth) 5%,
|
||||
transparent 50%),
|
||||
radial-gradient(circle at top left,
|
||||
var(--theme-c-muted-blue) 5%,
|
||||
var(--theme-c-deep-purple) 100%);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
/* line-height: 1.5; */
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main::before,
|
||||
main::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main::before {
|
||||
background: url(../../../src/assets/subtle-prism.svg);
|
||||
mix-blend-mode: multiply;
|
||||
z-index: -1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
main::after {
|
||||
background: var(--page-background);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
flex: 0 0 50vw;
|
||||
padding: 0 2vw;
|
||||
}
|
||||
|
||||
.flex > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.image {
|
||||
flex: 0 0 60vh;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 100%;
|
||||
border: 3vh solid #fff; box-shadow: var(--container-box-shadow);
|
||||
}
|
||||
|
||||
.headings {
|
||||
flex: 0 1 45vw;
|
||||
margin: 0;
|
||||
padding: 0 1vw;
|
||||
}
|
||||
|
||||
.headings :where(h1, h2) {
|
||||
font-family: "Exo", sans-serif;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.headings h1 {
|
||||
font-size: var(--welcome-header-mainline-font-size);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.headings h2 {
|
||||
font-size: var(--welcome-header-subline-font-size);
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.headings .contact {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headings .icon,
|
||||
.headings .handle {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.headings .icon {
|
||||
flex: 0 0 var(--icon-size);
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
margin: 0 0.375em 0 0;
|
||||
}
|
||||
|
||||
.headings .icon {
|
||||
fill: #fff;
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="flex">
|
||||
<div class="image">
|
||||
<img src="../../../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
|
||||
</div>
|
||||
<div class="headings">
|
||||
<h1>Sebin Nyshkim</h1>
|
||||
<h2>
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/></svg>
|
||||
<span class="handle">SebinNyshkim</span>
|
||||
</span>
|
||||
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
|
||||
<span class="handle">@SebinNyshkim</span>
|
||||
</span>
|
||||
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
|
||||
<span class="handle">@SebinNyshkim@meow.social</span>
|
||||
</span>
|
||||
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
|
||||
<span class="handle">Sebin Nyshkim#8877</span>
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
@import "../../../src/assets/fonts/exo/exo.css";
|
||||
|
||||
:root {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
|
||||
--theme-c-muted-blue: #22759d;
|
||||
--theme-c-amaranth: #e93f3f;
|
||||
--theme-c-deep-purple: #33124a;
|
||||
--theme-c-charcoal: #303030;
|
||||
|
||||
--container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
|
||||
--welcome-header-mainline-font-size: 6vw;
|
||||
--welcome-header-subline-font-size: 2vw;
|
||||
|
||||
--icon-size: calc(var(--welcome-header-subline-font-size) * 1.25);
|
||||
|
||||
--page-background: radial-gradient(circle at bottom right,
|
||||
var(--theme-c-amaranth) 5%,
|
||||
transparent 50%),
|
||||
radial-gradient(circle at top left,
|
||||
var(--theme-c-muted-blue) 5%,
|
||||
var(--theme-c-deep-purple) 100%);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
/* line-height: 1.5; */
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main::before,
|
||||
main::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main::before {
|
||||
background: url(../../../src/assets/subtle-prism.svg);
|
||||
mix-blend-mode: multiply;
|
||||
z-index: -1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
main::after {
|
||||
background: var(--page-background);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
flex: 0 0 72vw;
|
||||
}
|
||||
|
||||
.flex>* {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.image {
|
||||
flex: 0 0 60vh;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 100%;
|
||||
border: 1vw solid #fff;
|
||||
box-shadow: var(--container-box-shadow);
|
||||
}
|
||||
|
||||
.headings {
|
||||
flex: 0 0 50vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.headings :where(h1, h2) {
|
||||
font-family: "Exo", sans-serif;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.headings h1 {
|
||||
font-size: var(--welcome-header-mainline-font-size);
|
||||
font-weight: 900;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.headings h2 {
|
||||
font-size: var(--welcome-header-subline-font-size);
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.headings .contact {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headings .icon,
|
||||
.headings .handle {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.headings .icon {
|
||||
flex: 0 0 var(--icon-size);
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
margin: 0 0.375em 0 0;
|
||||
}
|
||||
|
||||
.headings .icon {
|
||||
fill: #fff;
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="flex">
|
||||
<div class="image">
|
||||
<img src="../../../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
|
||||
</div>
|
||||
<div class="headings">
|
||||
<h1>Sebin Nyshkim</h1>
|
||||
<h2>
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/></svg>
|
||||
<span class="handle">SebinNyshkim</span>
|
||||
</span>
|
||||
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
|
||||
<span class="handle">@SebinNyshkim</span>
|
||||
</span>
|
||||
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
|
||||
<span class="handle">@SebinNyshkim@meow.social</span>
|
||||
</span>
|
||||
|
||||
<span class="contact">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
|
||||
<span class="handle">Sebin Nyshkim#8877</span>
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
@import "../../../src/assets/fonts/exo/exo.css";
|
||||
|
||||
:root {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
|
||||
--theme-c-muted-blue: #22759d;
|
||||
--theme-c-amaranth: #e93f3f;
|
||||
--theme-c-deep-purple: #33124a;
|
||||
--theme-c-charcoal: #303030;
|
||||
|
||||
--container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
|
||||
--welcome-header-mainline-font-size: 8vw;
|
||||
--welcome-header-subline-font-size: 2.5vw;
|
||||
|
||||
--icon-size: calc(var(--welcome-header-subline-font-size) * 1.25);
|
||||
|
||||
--page-background: radial-gradient(
|
||||
circle at bottom right,
|
||||
var(--theme-c-amaranth) 5%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at top left,
|
||||
var(--theme-c-muted-blue) 5%,
|
||||
var(--theme-c-deep-purple) 100%
|
||||
);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
/* line-height: 1.5; */
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main::before,
|
||||
main::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main::before {
|
||||
background: url(../../../src/assets/subtle-prism.svg);
|
||||
mix-blend-mode: multiply;
|
||||
z-index: -1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
main::after {
|
||||
background: var(--page-background);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.flex > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.image {
|
||||
flex: 0 0 60vh;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 100%;
|
||||
border: 1vw solid #fff;
|
||||
box-shadow: var(--container-box-shadow);
|
||||
}
|
||||
|
||||
.headings {
|
||||
flex: 0 0 60vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.headings :where(h1, h2) {
|
||||
font-family: "Exo", sans-serif;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.headings h1 {
|
||||
font-size: var(--welcome-header-mainline-font-size);
|
||||
font-weight: 900;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.headings h2 {
|
||||
font-size: var(--welcome-header-subline-font-size);
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.headings .contact {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headings .icon,
|
||||
.headings .handle {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.headings .icon {
|
||||
flex: 0 0 var(--icon-size);
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
margin: 0 0.375em 0 0;
|
||||
}
|
||||
|
||||
.headings .icon {
|
||||
fill: #fff;
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="flex">
|
||||
<div class="image">
|
||||
<img src="../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
|
||||
</div>
|
||||
<div class="headings">
|
||||
<h1>Sebin Nyshkim</h1>
|
||||
<h2>Character Reference Page</h2>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
|
||||
</body>
|
||||
</html>
|
||||
112
card/style.css
112
card/style.css
|
|
@ -1,112 +0,0 @@
|
|||
@import "../src/assets/fonts/exo/exo.css";
|
||||
|
||||
:root {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
|
||||
--theme-c-muted-blue: #22759d;
|
||||
--theme-c-amaranth: #e93f3f;
|
||||
--theme-c-deep-purple: #33124a;
|
||||
--theme-c-charcoal: #303030;
|
||||
|
||||
--container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
|
||||
--welcome-header-mainline-font-size: 8vw;
|
||||
--welcome-header-subline-font-size: 3.5vw;
|
||||
|
||||
--page-background: radial-gradient(
|
||||
circle at bottom right,
|
||||
var(--theme-c-amaranth) 5%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at top left,
|
||||
var(--theme-c-muted-blue) 5%,
|
||||
var(--theme-c-deep-purple) 100%
|
||||
);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main::before,
|
||||
main::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main::before {
|
||||
background: url(../src/assets/subtle-prism.svg);
|
||||
mix-blend-mode: multiply;
|
||||
z-index: -1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
main::after {
|
||||
background: var(--page-background);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.flex > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.image {
|
||||
flex: 0 0 60vh;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 100%;
|
||||
border: 1vw solid #fff;
|
||||
box-shadow: var(--container-box-shadow);
|
||||
}
|
||||
|
||||
.headings {
|
||||
flex: 0 0 60vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.headings :where(h1, h2) {
|
||||
font-family: "Exo", sans-serif;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.headings h1 {
|
||||
font-size: var(--welcome-header-mainline-font-size);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.headings h2 {
|
||||
font-size: var(--welcome-header-subline-font-size);
|
||||
font-weight: 300;
|
||||
}
|
||||
1
env.d.ts
vendored
1
env.d.ts
vendored
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="vite/client" />
|
||||
30
index.html
30
index.html
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<link rel="favicon" href="favicon.png" type="image/png" />
|
||||
<link rel="icon" href="favicon.png" type="image/png" />
|
||||
<title>Sebin Nyshkim - Reference Page</title>
|
||||
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#22759d" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#195673" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@SebinNyshkim" />
|
||||
<meta name="twitter:creator" content="@SebinNyshkim" />
|
||||
<meta name="twitter:title" content="Sebin Nyshkim - Reference Page" />
|
||||
<meta name="twitter:description" content="The official reference page for Sebin Nyshkim with picture references and in-depth character descriptions" />
|
||||
<meta name="twitter:image" content="https://ref.sebin-nyshkim.net/sebin/preview.png" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Sebin Nyshkim - Reference Page" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:url" content="https://ref.sebin-nyshkim.net/sebin/" />
|
||||
<meta property="og:image" content="https://ref.sebin-nyshkim.net/sebin/preview.png" />
|
||||
<meta property="og:description" content="The official reference page for Sebin Nyshkim with picture references and in-depth character descriptions" />
|
||||
</head>
|
||||
<body>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
jsconfig.json
Normal file
0
jsconfig.json
Normal file
34448
package-lock.json
generated
34448
package-lock.json
generated
File diff suppressed because it is too large
Load diff
50
package.json
50
package.json
|
|
@ -1,38 +1,32 @@
|
|||
{
|
||||
"name": "sebin-reference",
|
||||
"version": "0.10.7",
|
||||
"version": "0.6.3",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build --force",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||
"format": "prettier --write src/"
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.4.38",
|
||||
"vue-router": "^4.4.3"
|
||||
"core-js": "^3.11.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"vue": "^2.6.12",
|
||||
"vue-scrollto": "^2.20.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.10.4",
|
||||
"@tsconfig/node20": "^20.1.4",
|
||||
"@types/node": "^20.16.3",
|
||||
"@vitejs/plugin-vue": "^5.1.3",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"@vue/eslint-config-typescript": "^13.0.0",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.28.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"npm-run-all2": "^6.2.2",
|
||||
"prettier": "^3.3.3",
|
||||
"sass": "^1.77.8",
|
||||
"typescript": "~5.5.0",
|
||||
"vite": "^5.4.2",
|
||||
"vite-imagetools": "^6.2.9",
|
||||
"vue-tsc": "^2.1.4"
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/eslint-config-prettier": "^6.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"image-webpack-loader": "^6.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"prettier": "^2.2.1",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<IfModule mod_rewrite.c>
|
||||
RewriteEngine On
|
||||
RewriteBase /
|
||||
RewriteRule ^index\.html$ - [L]
|
||||
RewriteCond %{REQUEST_FILENAME} !-f
|
||||
RewriteCond %{REQUEST_FILENAME} !-d
|
||||
RewriteRule . /sebin/index.html [L]
|
||||
</IfModule>
|
||||
19
public/index.html
Normal file
19
public/index.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="<%= htmlWebpackPlugin.options.links.favicon.rel %>" href="<%= htmlWebpackPlugin.options.links.favicon.href %>" type="<%= htmlWebpackPlugin.options.links.favicon.type %>">
|
||||
<link rel="<%= htmlWebpackPlugin.options.links.icon.rel %>" href="<%= htmlWebpackPlugin.options.links.icon.href %>" type="<%= htmlWebpackPlugin.options.links.icon.type %>">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div class="bubbles"></div>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/preview.jpg
Normal file
BIN
public/preview.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 377 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 MiB |
908
src/App.vue
908
src/App.vue
|
|
@ -1,99 +1,841 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, provide } from 'vue'
|
||||
import { RouterView } from 'vue-router'
|
||||
import { modalResultKey, nsfwKey, showModalKey } from '@/keys'
|
||||
import { version } from '../package.json'
|
||||
import RefModal from '@/components/RefModal.vue'
|
||||
import ButtonGroup from '@/components/ButtonGroup.vue'
|
||||
import Button from '@/components/RefButton.vue'
|
||||
import SiteHeader from '@/components/SiteHeader.vue'
|
||||
import SiteFooter from '@/components/SiteFooter.vue'
|
||||
import SiteNavigation from '@/components/SiteNavigation.vue'
|
||||
|
||||
const isNsfw = ref(false)
|
||||
const isConfirmedHorny = ref(false)
|
||||
|
||||
const nsfwmodal = ref<InstanceType<typeof RefModal>>()
|
||||
|
||||
const showModal = (): void => {
|
||||
if (!isConfirmedHorny.value) {
|
||||
nsfwmodal.value?.showModal()
|
||||
|
||||
setTimeout(() => {
|
||||
isNsfw.value = false
|
||||
}, 1)
|
||||
} else {
|
||||
isNsfw.value = !isNsfw.value
|
||||
}
|
||||
}
|
||||
|
||||
const modalResult = (value: boolean): void => {
|
||||
isNsfw.value = value
|
||||
isConfirmedHorny.value = value
|
||||
nsfwmodal.value?.close()
|
||||
}
|
||||
|
||||
provide(modalResultKey, modalResult)
|
||||
provide(nsfwKey, isNsfw)
|
||||
provide(showModalKey, showModal)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RefModal id="nsfw-warning" ref="nsfwmodal">
|
||||
<div id="app">
|
||||
<nsfw-warning v-show="isWarn">
|
||||
<template #heading>
|
||||
⚠️⚠️⚠️<br />
|
||||
Whoa, Nelly!
|
||||
</template>
|
||||
|
||||
<template #message>
|
||||
By enabling NSFW mode you confirm that you are of legal age to view adult content.
|
||||
By enabling NSFW mode you confirm that you are of legal age to view
|
||||
adult content.
|
||||
</template>
|
||||
|
||||
<template #buttons>
|
||||
<ButtonGroup col>
|
||||
<Button positive @click.prevent="modalResult(true)"> Yes, show me the goods 👀 </Button>
|
||||
<Button negative @click.prevent="modalResult(false)"> NO, STAHP 😱 </Button>
|
||||
</ButtonGroup>
|
||||
</template>
|
||||
</RefModal>
|
||||
<template #yes>Yes, show me the goods 👀</template>
|
||||
<template #no>NO, STAHP 😱</template>
|
||||
</nsfw-warning>
|
||||
|
||||
<SiteHeader>
|
||||
<!-- max 500px -->
|
||||
<picture>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=avif&quality=75&as=srcset
|
||||
"
|
||||
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
|
||||
type="image/avif"
|
||||
<ref-header
|
||||
mainHeading="Sebin Nyshkim"
|
||||
subHeading="Character Reference Page"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=webp&quality=100&as=srcset
|
||||
"
|
||||
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
class="nav-logo"
|
||||
srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=png&as=srcset"
|
||||
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
|
||||
alt="Sebin Avatar"
|
||||
/>
|
||||
</picture>
|
||||
|
||||
<SiteNavigation />
|
||||
</SiteHeader>
|
||||
|
||||
<main>
|
||||
<RouterView />
|
||||
<section id="general">
|
||||
<h2>General</h2>
|
||||
<data-table class="prose" :dataset="getSebinData.generic" />
|
||||
</section>
|
||||
|
||||
<section id="anatomy">
|
||||
<h2>Anatomy</h2>
|
||||
|
||||
<ref-figure>
|
||||
<template #img>
|
||||
<div>
|
||||
<img
|
||||
v-if="nsfw"
|
||||
src="@img/sebin-ref-body-NSFW.png"
|
||||
alt="Sebin Full Body Ref"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@img/sebin-ref-body-SFW.png"
|
||||
alt="Sebin Full Body Ref"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #caption>
|
||||
<label>Sebin Full Body Reference</label>
|
||||
</template>
|
||||
<template #copyright>
|
||||
<a href="https://twitter.com/draftgon">draftgon</a>
|
||||
</template>
|
||||
</ref-figure>
|
||||
|
||||
<data-table class="prose" :dataset="getSebinData.colors" />
|
||||
|
||||
<div class="prose">
|
||||
<quick-facts>
|
||||
<ul>
|
||||
<li>Bipedal plantigrade</li>
|
||||
<li>
|
||||
Red scales, yellow chest-plates running from underneath chin,
|
||||
over torso, between legs, underside of tail
|
||||
</li>
|
||||
<li>Athletic to body builder physique</li>
|
||||
<li>Sharp, black claws on fingers and toes</li>
|
||||
<li>Brown spikes running over back and top-side of tail</li>
|
||||
<li>Tail about 1 meter in length</li>
|
||||
</ul>
|
||||
</quick-facts>
|
||||
|
||||
<p>
|
||||
Sebin is a bipedal plantigrade. His body is mostly covered by red
|
||||
scales with yellow chest plates running from below his chin over his
|
||||
torso all the way down between his legs and underside of his tail.
|
||||
His physique is athletic to muscular. His fingers and toes are
|
||||
equipped sharp black claws. Brown spikes run along his spine down to
|
||||
the tip of his tail. His tail is about one meter in length.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 id="wings">Wings</h3>
|
||||
<div class="prose">
|
||||
<quick-facts>
|
||||
<ul>
|
||||
<li>Wingspan 3-4 meters</li>
|
||||
<li>Closed when on the ground</li>
|
||||
<li>Function like a second pair of arms</li>
|
||||
<li>Pointy talon on end of "hand"</li>
|
||||
</ul>
|
||||
</quick-facts>
|
||||
|
||||
<p>
|
||||
His wing span is around 3-4 meters. He has them closed when on the
|
||||
ground. His wings function like a second pair of arms, at which ends
|
||||
are hand-like limbs with a black talon on top and finger-like
|
||||
extensions, in between which are the membranes of his wings. He can
|
||||
use his wings to fly short distances. Longer distances become
|
||||
difficult due to fatigue of having to carry his own weight with his
|
||||
wings alone.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 id="head">Head</h3>
|
||||
<ref-figure>
|
||||
<template #img>
|
||||
<div>
|
||||
<img
|
||||
src="@img/sebin-ref-expressions.png"
|
||||
alt="Sebin's Expressions"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #caption>
|
||||
<label>Sebin's Expressions</label>
|
||||
</template>
|
||||
<template #copyright>
|
||||
<a href="https://twitter.com/draftgon">draftgon</a>
|
||||
</template>
|
||||
</ref-figure>
|
||||
|
||||
<div class="prose">
|
||||
<quick-facts>
|
||||
<ul>
|
||||
<li>
|
||||
Round pupils, green iris. Yellow spikes on cheeks, as well as
|
||||
for eyebrows
|
||||
</li>
|
||||
<li>Black horns with slight curve downwards</li>
|
||||
<li>Blue hair, different styles; short style preferred</li>
|
||||
<li>Long, pointy, movable ears</li>
|
||||
<li>Very sharp teeth</li>
|
||||
<li>Tongue with pointy tip</li>
|
||||
</ul>
|
||||
</quick-facts>
|
||||
|
||||
<p>
|
||||
He has round pupils instead of the slit ones typical for reptilians.
|
||||
He has short yellow spikes above his eyes that resemble eyebrows, as
|
||||
well as spikes along the jawline of his cheeks. He has black horns
|
||||
growing out of his head which are mostly straight but slightly curve
|
||||
downwards. His hair is blue and he wears it in varying styles. He
|
||||
has long pointy ears which he can move to determine the origin of
|
||||
sounds around him. He also uses them to express emotion. His teeth
|
||||
are very sharp. In his throat are glands that produce a mixture that
|
||||
allows him to breathe fire. His tongue has a pointy tip.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 id="upperbody">Upper Body</h3>
|
||||
<div class="prose">
|
||||
<quick-facts>
|
||||
<ul>
|
||||
<li>Strong upper body, lush pecs, defined abs, black nipples</li>
|
||||
<li>
|
||||
Any muscle mass from athletic to body builder is fine, with a
|
||||
preference towards body builder
|
||||
</li>
|
||||
</ul>
|
||||
</quick-facts>
|
||||
|
||||
<p>
|
||||
Sebin started working out at the age of 17. Being in top shape is
|
||||
very important to him. His favorite workouts are weight-lifting
|
||||
(dumbbells as well as barbells), lat pulldown, leg press, straight
|
||||
arm pulldown and cable pull. He works out three times a week with
|
||||
one day in between workout days for rest, switching body regions
|
||||
each workout day.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ref-figure>
|
||||
<template #img>
|
||||
<div>
|
||||
<img
|
||||
src="@img/upper-body-ref.jpg"
|
||||
alt="Sebin's upper body closeup"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #caption>
|
||||
<label>Sebin's upper body closeup</label>
|
||||
</template>
|
||||
<template #copyright>
|
||||
<a href="https://twitter.com/NidtheDragon">NidtheDragon</a>
|
||||
</template>
|
||||
</ref-figure>
|
||||
|
||||
<div class="prose">
|
||||
<p>
|
||||
Sebin is very focused on evenly distributed muscle mass but pays
|
||||
special attention to his back, chest and arms. This is so his fire
|
||||
breath doesn't get weak and he can throw fire projectiles farther. A
|
||||
strong back ensures his wings continue to carry him so he can stay
|
||||
airbourne for extended periods of time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Additional Muscle References</h3>
|
||||
<div class="prose" v-show="!nsfw">
|
||||
<div class="nsfw-bar">
|
||||
<div class="nsfw-bar__content flex flex--row flex--nowrap">
|
||||
<div>
|
||||
<strong>
|
||||
Some of these additional references are NSFW. Please enable
|
||||
NSFW mode to reveal them.
|
||||
</strong>
|
||||
</div>
|
||||
<nsfw-switch
|
||||
id="nsfw-switch-muscle"
|
||||
v-model="nsfw"
|
||||
@change="showWarning()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ref-gallery v-show="nsfw">
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref1.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/GrisserArt">Grisser</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref2.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref3.jpg" />
|
||||
<figcaption>
|
||||
By
|
||||
<a href="https://www.furaffinity.net/user/Marsel-Defender">
|
||||
Marsel-Defender
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref4.png" />
|
||||
<figcaption>
|
||||
By
|
||||
<a href="https://www.furaffinity.net/user/sirboburto">
|
||||
SirBoburto
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref5.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref6.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref7.jpg" />
|
||||
<figcaption>
|
||||
By
|
||||
<a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref8.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref9.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref10.jpg" />
|
||||
<figcaption>
|
||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref11.jpg" />
|
||||
<figcaption>
|
||||
By
|
||||
<a href="https://www.furaffinity.net/user/Marsel-Defender">
|
||||
Marsel-Defender
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</ref-gallery>
|
||||
|
||||
<h3 v-show="nsfw" id="penis">Penis</h3>
|
||||
<ref-figure v-show="nsfw">
|
||||
<template #img>
|
||||
<div>
|
||||
<img src="@img/sebin-ref-penis.png" alt="Sebin's manly parts" />
|
||||
</div>
|
||||
</template>
|
||||
<template #caption>
|
||||
<label>Sebin's manly parts</label>
|
||||
</template>
|
||||
<template #copyright>
|
||||
<a href="https://twitter.com/draftgon">draftgon</a>
|
||||
</template>
|
||||
</ref-figure>
|
||||
|
||||
<data-table class="prose" v-show="nsfw" :dataset="getSebinData.penis" />
|
||||
|
||||
<div class="prose" v-show="nsfw">
|
||||
<quick-facts>
|
||||
<ul>
|
||||
<li>Human-shaped with ridges</li>
|
||||
<li>Ring-like sheath surrounding shaft</li>
|
||||
<li>
|
||||
Extends from sheath when erect, lives inside sheath when not
|
||||
erect
|
||||
</li>
|
||||
<li>External balls</li>
|
||||
</ul>
|
||||
</quick-facts>
|
||||
|
||||
<p>
|
||||
Despite his majorly reptilian appearance he has nipples, a feature
|
||||
of the human side of his family, which also shows with his external
|
||||
testicles. Rather than a slit which houses his penis he has a
|
||||
pouch-like sheath, with the tip slightly peeking out of it when not
|
||||
aroused. His penis is mainly humanoid in shape but is surrounded by
|
||||
several ridges. He can take it out of its pouch while it's still
|
||||
soft (e.g. for passing water). When aroused his charcoal black shaft
|
||||
pushes out from the sheath, its base girded by the sheath like a
|
||||
ring.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="clothes">
|
||||
<h2>Clothing Styles</h2>
|
||||
|
||||
<div class="prose">
|
||||
<p>
|
||||
<strong>
|
||||
The following photos are for illustration purposes only. The
|
||||
clothing shown is not to be taken literally. The design may
|
||||
differ!
|
||||
</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Casual Wear</h3>
|
||||
<ref-gallery>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/casual/fullbody.png" alt="Full Body" />
|
||||
<figcaption>
|
||||
<p>
|
||||
Black tank top, flannell shirt, shorts (w/ dangling bands),
|
||||
sneakers
|
||||
</p>
|
||||
<p>
|
||||
By <a href="https://twitter.com/coffeerelated">coffeerelated</a>
|
||||
</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</ref-gallery>
|
||||
|
||||
<h3>Cold Weather</h3>
|
||||
<ref-gallery>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/cold/fullbody.png" alt="Full Body" />
|
||||
<figcaption>
|
||||
<p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
|
||||
<p>By <a href="https://twitter.com/lara_belem_">Lara Belém</a></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</ref-gallery>
|
||||
|
||||
<h3>Workout</h3>
|
||||
<ref-gallery>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/workout/fullbody.png" alt="Full Body" />
|
||||
<figcaption>
|
||||
<p>
|
||||
<strong>Full body:</strong> Snapback hat, tank top, fingerless
|
||||
gloves, shorts, sneakers
|
||||
</p>
|
||||
<p>By <a href="https://twitter.com/turquoize_art">Atlas</a></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/workout/closeup.jpg" alt="Close-up" />
|
||||
<figcaption>
|
||||
<p>
|
||||
<strong>Close-up:</strong> Snapback hat, headphones, tank top,
|
||||
fingerless gloves, shorts, smartwatch
|
||||
</p>
|
||||
<p>By <a href="https://twitter.com/purpledragonrei">Rei</a></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</ref-gallery>
|
||||
|
||||
<h3>"Doesn't need to leave the house today" Style</h3>
|
||||
<ref-gallery>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/lazy/pants.jpg" alt="Tank Top" />
|
||||
<figcaption>
|
||||
<p>Tracksuit pants (optional)</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/lazy/undies.jpg" alt="Shorts" />
|
||||
<figcaption>
|
||||
<p>Topless w/ jockstrap/boxer briefs</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</ref-gallery>
|
||||
</section>
|
||||
|
||||
<section id="abilities">
|
||||
<h2>Abilities</h2>
|
||||
<div class="prose">
|
||||
<p>
|
||||
Since Sebin is a fire dragon there’s a myriad of abilities he has at
|
||||
his disposal to defend himself.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Attacks</h3>
|
||||
|
||||
<div class="attacks">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img
|
||||
src="@img/attacks/sebin-fire_breath-hires.png"
|
||||
alt="Sebin Fire Breath"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p><strong>Fire Breath</strong></p>
|
||||
<p>
|
||||
Like most fire dragons, Sebin can breathe fire. In order to do
|
||||
this, he takes a deep breath to enrich the oxygen in his lungs
|
||||
with gases, which, together with special glands in his mouth,
|
||||
produce a combustible mixture. The resulting jet of fire,
|
||||
reaching several hundred degrees Celsius, spreads out on its way
|
||||
to its target, scorching everything in its path.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img
|
||||
src="@img/attacks/sebin-flame_toss-hires.png"
|
||||
alt="Sebin Flame Toss"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p><strong>Flame Toss</strong></p>
|
||||
<p>
|
||||
By spitting fire into his hands, Sebin can form it into a ball
|
||||
and use it as a projectile. His scales are fireproof and can
|
||||
withstand the high temperatures. Due to their high
|
||||
concentration, the projectiles explode upon impact. By combining
|
||||
two fireballs the explosion radius increases dramatically.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img
|
||||
src="@img/attacks/sebin-kindled_fist-hires.png"
|
||||
alt="Sebin Kindled Fist"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p><strong>Kindled Fist</strong></p>
|
||||
<p>
|
||||
Apart from throwing projectiles, Sebin can also use the
|
||||
fireballs to wrap his fists in fire. This allows him to inflict
|
||||
severe burns on his opponent with each blow. In addition, he can
|
||||
release the fire from his fists with aimed blows and hurl it at
|
||||
his opponents.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img
|
||||
src="@img/attacks/sebin-burning_twister-hires.png"
|
||||
alt="Sebin Burning Twister"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p><strong>Burning Twister</strong></p>
|
||||
<p>
|
||||
A technique used in aerial combat, Sebin uses his fire breath to
|
||||
engulf his body in flames while spinning to become a fire
|
||||
tornado that singes opponents.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Overdrive Form</h2>
|
||||
<ref-figure>
|
||||
<template #img>
|
||||
<div>
|
||||
<img
|
||||
src="@img/sebin-overdrive_ref-hires.jpg"
|
||||
alt="Sebin in Overdrive"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #caption>
|
||||
<label>Sebin in Overdrive</label>
|
||||
</template>
|
||||
<template #copyright>
|
||||
<a href="https://twitter.com/CVictorrosso">CVictorrosso</a>
|
||||
</template>
|
||||
</ref-figure>
|
||||
|
||||
<div class="prose">
|
||||
<p>
|
||||
Sebin can enter an Overdrive Form which greatly increases his
|
||||
strength and abilities but it comes at a cost.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
He enters Overdrive by engulfing himself in a pillar of flames which
|
||||
transforms his exterior physique. During Overdrive transformation
|
||||
his hair ignites and flickers with blue flames. The corners of his
|
||||
eyes flicker with long green flames. His arms and legs become part
|
||||
carbon black and are crossed by several glowing veins which pulsate
|
||||
like flowing lava. Fire in this form burns several degrees hotter
|
||||
than usual because his body becomes a living blast furnace, which is
|
||||
why his limbs have to be of more fire-proof material to withstand
|
||||
the increased heat.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To complete the transformation he inhales the flames from the pillar
|
||||
surrounding him which heats up his body from within. Even if Sebin
|
||||
is a fire dragon who can sustain high degrees of heat he is
|
||||
essentially overheating himself from the inside. Because of this he
|
||||
can't maintain this form for more than a few hours before he does
|
||||
permanent damage to his own body.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Direct body contact with Sebin during overdrive causes 3rd degree
|
||||
burns as he emits an extreme temperature, although less than he
|
||||
keeps inside his body. His immediate surroundings are likely to burn
|
||||
or melt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Attacks</h3>
|
||||
<div class="prose">
|
||||
<table>
|
||||
<tr>
|
||||
<td><strong>Fire Breath</strong> (improved)</td>
|
||||
<td>
|
||||
The reach of Sebin's Fire Breath increases as well as the
|
||||
frequency at which he can fire shots from his mouth.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Flame Toss</strong> (improved)</td>
|
||||
<td>
|
||||
Overdrive Form eliminates the need for Sebin to spit fire into
|
||||
his palms. It instead enables him to fire the shots directly
|
||||
from the palm of his hands, as the firey veins crossing his arms
|
||||
act as an orifice to do so. The explosion radius of the burning
|
||||
projectiles that explode on impact is greatly increased.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Kindled Fist</strong> (improved)</td>
|
||||
<td>
|
||||
As his arms and legs are infused with fire his punches and kicks
|
||||
exert trails of flames while doing so. Landing a punch or kick
|
||||
sears enemies.
|
||||
</td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<td><strong>Searing Discus</strong></td>
|
||||
<td>
|
||||
Overdrive allows Sebin to form rings of fire by igniting flames
|
||||
from his fingertips and swirling them in a circle motion. He can
|
||||
use them for both close quarters or ranged combat.
|
||||
</td>
|
||||
</tr> -->
|
||||
<tr>
|
||||
<td><strong>Combustion Flare</strong></td>
|
||||
<td>
|
||||
Clinking both of his wrists against each other like flints
|
||||
unleashes a devestating fire blast from both of his fire-infused
|
||||
hands. A secure foothold is needed to prevent Sebin from being
|
||||
thrown back by the recoil of the attack. Using this technique in
|
||||
the air is therefore highly risky.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Blazing Pandemonium</strong></td>
|
||||
<td>
|
||||
A heavy impact into the ground from a great height with both
|
||||
fists, tearing deep cracks in the ground around the impact
|
||||
crater. Combined with <strong><em>Kindled Fist</em></strong>
|
||||
the heat in Sebin's arms are forced through the newly created
|
||||
furrows, transforming the scene into an inferno.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Scorching Edge</strong></td>
|
||||
<td>
|
||||
A fiery blade towering several meters into the air that Sebin
|
||||
sends careening towards his enemies from his fire-infused legs
|
||||
with a backflip kick, leaving a swath of destruction in its
|
||||
wake. Upon impact the force of the attack is distributed
|
||||
sideways.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Circling Fire Shield</strong></td>
|
||||
<td>
|
||||
A rather defensive technique. By spinning around with stretched
|
||||
out arms Sebin creates fire balls, which he usually hurls
|
||||
towards enemies, that circle around his body diagonally. They
|
||||
act as a shield while he can still move his arms relatively
|
||||
freely. Enemies would be well advised to keep their distance to
|
||||
this spinning shield, as the fire balls will still explode on
|
||||
contact.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<SiteFooter>
|
||||
<p>v{{ version }} © {{ new Date().getFullYear() }} Sebin Nyshkim</p>
|
||||
<p>
|
||||
Background Pattern ©
|
||||
<a href="https://www.svgbackgrounds.com/">SVG Backgrounds</a>
|
||||
</p>
|
||||
</SiteFooter>
|
||||
<ref-footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QuickFacts from "@components/QuickFacts.vue";
|
||||
import DataTable from "@components/DataTable.vue";
|
||||
import RefGallery from "@components/Gallery.vue";
|
||||
import RefFigure from "@components/Figure.vue";
|
||||
import RefHeader from "@components/Header.vue";
|
||||
import RefFooter from "@components/Footer.vue";
|
||||
import NsfwSwitch from "@components/NsfwSwitch.vue";
|
||||
import NsfwWarning from "@components/NsfwWarning.vue";
|
||||
|
||||
import Sebin from "@mixins/Sebin.js";
|
||||
import Helper from "@mixins/Helper.js";
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
components: {
|
||||
QuickFacts,
|
||||
DataTable,
|
||||
RefGallery,
|
||||
RefFigure,
|
||||
RefHeader,
|
||||
RefFooter,
|
||||
NsfwSwitch,
|
||||
NsfwWarning,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nsfw: false,
|
||||
isWarn: false,
|
||||
isConfirmedHorny: false,
|
||||
version: require("../package.json").version,
|
||||
};
|
||||
},
|
||||
mixins: [Sebin, Helper],
|
||||
methods: {
|
||||
showWarning() {
|
||||
if (!this.isConfirmedHorny) {
|
||||
this.isWarn = true;
|
||||
|
||||
setTimeout(() => {
|
||||
this.nsfw = false;
|
||||
}, 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@scss/base.scss";
|
||||
@import "~normalize.css";
|
||||
|
||||
#app {
|
||||
color: $copy-color;
|
||||
font-size: 1.125em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
transition: all ease-in-out 0.25s;
|
||||
|
||||
@media (min-width: 50em) {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
@media (min-width: 125em) {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
max-width: 45rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media (min-width: 125em) {
|
||||
max-width: 55rem;
|
||||
}
|
||||
}
|
||||
|
||||
.prose {
|
||||
max-width: 45rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media (min-width: 125em) {
|
||||
max-width: 55rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq-mobile {
|
||||
h2,
|
||||
h3,
|
||||
p,
|
||||
.quickfacts {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
h2 {
|
||||
border-bottom: 0.0625em $copy-color solid;
|
||||
}
|
||||
|
||||
h3 {
|
||||
border-bottom: 0.125em $copy-color dotted;
|
||||
}
|
||||
}
|
||||
|
||||
.attacks {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
@include mq-desktop {
|
||||
max-width: 45rem;
|
||||
}
|
||||
|
||||
@media (min-width: 70em) {
|
||||
max-width: 70em;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex: 0 1 100%;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
|
||||
padding: 0.375em 0;
|
||||
|
||||
@include mq-desktop {
|
||||
flex-flow: row nowrap;
|
||||
|
||||
&:nth-child(even) {
|
||||
text-align: right;
|
||||
|
||||
.col {
|
||||
&:first-child {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 70em) {
|
||||
text-align: left;
|
||||
flex: 0 1 50%;
|
||||
|
||||
&:nth-child(even) {
|
||||
text-align: left;
|
||||
|
||||
.col {
|
||||
&:first-child {
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1 1 auto;
|
||||
|
||||
&:first-child {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
@include mq-desktop {
|
||||
flex: 0 0 15em;
|
||||
height: 15em;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include mq-desktop {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
|
@ -1,19 +0,0 @@
|
|||
/* dosis-regular-latin */
|
||||
@font-face {
|
||||
font-family: Dosis;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Dosis Regular"), local("Dosis-Regular"), url(dosis-regular-latin.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
font-display: swap;
|
||||
}
|
||||
/* dosis-bold-latin */
|
||||
@font-face {
|
||||
font-family: Dosis;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Dosis Bold"), local("Dosis-Bold"), url(dosis-bold-latin.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,37 +0,0 @@
|
|||
/* exo-light-latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local("Exo Light"), local("Exo-Light"), url(exo-light-latin.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
font-display: swap;
|
||||
}
|
||||
/* exo-black-latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: local("Exo Black"), local("Exo-Black"), url(exo-black-latin.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
font-display: swap;
|
||||
}
|
||||
/* exo-light-italic-latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: local("Exo Light Italic"), local("Exo-LightItalic"), url(exo-light-italic-latin.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
font-display: swap;
|
||||
}
|
||||
/* exo-black-italic-latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
src: local("Exo Black Italic"), local("Exo-BlackItalic"), url(exo-black-italic-latin.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
|
@ -1,10 +0,0 @@
|
|||
/* permanent-marker-regular-latin */
|
||||
@font-face {
|
||||
font-family: Permanent Marker;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Permanent Marker Regular"), local("PermanentMarker-Regular"), url(permanent-marker-regular-latin.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
|
@ -1,10 +0,0 @@
|
|||
/* zilla-slab-bold-latin */
|
||||
@font-face {
|
||||
font-family: Zilla Slab;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Zilla Slab Bold"), local("ZillaSlab-Bold"), url(zilla-slab-bold-latin.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
BIN
src/assets/img/attacks/sebin-burning_twister-hires.png
Normal file
BIN
src/assets/img/attacks/sebin-burning_twister-hires.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
BIN
src/assets/img/attacks/sebin-fire_breath-hires.png
Normal file
BIN
src/assets/img/attacks/sebin-fire_breath-hires.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
src/assets/img/attacks/sebin-flame_toss-hires.png
Normal file
BIN
src/assets/img/attacks/sebin-flame_toss-hires.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
src/assets/img/attacks/sebin-kindled_fist-hires.png
Normal file
BIN
src/assets/img/attacks/sebin-kindled_fist-hires.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
0
src/assets/refs/clothes/casual/fullbody.png → src/assets/img/clothes-ref/casual/fullbody.png
Normal file → Executable file
0
src/assets/refs/clothes/casual/fullbody.png → src/assets/img/clothes-ref/casual/fullbody.png
Normal file → Executable file
|
Before Width: | Height: | Size: 784 KiB After Width: | Height: | Size: 784 KiB |
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.7 MiB |
BIN
src/assets/img/clothes-ref/lazy/pants.jpg
Normal file
BIN
src/assets/img/clothes-ref/lazy/pants.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
src/assets/img/clothes-ref/lazy/undies.jpg
Normal file
BIN
src/assets/img/clothes-ref/lazy/undies.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
src/assets/img/clothes-ref/workout/closeup.jpg
Normal file
BIN
src/assets/img/clothes-ref/workout/closeup.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 734 KiB |
BIN
src/assets/img/clothes-ref/workout/closeup.png
Normal file
BIN
src/assets/img/clothes-ref/workout/closeup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
BIN
src/assets/img/muscle-ref/muscle-ref1.jpg
Normal file
BIN
src/assets/img/muscle-ref/muscle-ref1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 717 KiB |
BIN
src/assets/img/muscle-ref/muscle-ref10.jpg
Normal file
BIN
src/assets/img/muscle-ref/muscle-ref10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 432 KiB |
BIN
src/assets/img/muscle-ref/muscle-ref11.jpg
Normal file
BIN
src/assets/img/muscle-ref/muscle-ref11.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
BIN
src/assets/img/muscle-ref/muscle-ref2.jpg
Normal file
BIN
src/assets/img/muscle-ref/muscle-ref2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 657 KiB |
BIN
src/assets/img/muscle-ref/muscle-ref3.jpg
Normal file
BIN
src/assets/img/muscle-ref/muscle-ref3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 560 KiB |
BIN
src/assets/img/muscle-ref/muscle-ref4.png
Normal file
BIN
src/assets/img/muscle-ref/muscle-ref4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/img/muscle-ref/muscle-ref5.jpg
Normal file
BIN
src/assets/img/muscle-ref/muscle-ref5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
BIN
src/assets/img/muscle-ref/muscle-ref6.jpg
Normal file
BIN
src/assets/img/muscle-ref/muscle-ref6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 512 KiB |
BIN
src/assets/img/muscle-ref/muscle-ref7.jpg
Normal file
BIN
src/assets/img/muscle-ref/muscle-ref7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 867 KiB |
BIN
src/assets/img/muscle-ref/muscle-ref8.jpg
Normal file
BIN
src/assets/img/muscle-ref/muscle-ref8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
BIN
src/assets/img/muscle-ref/muscle-ref9.jpg
Normal file
BIN
src/assets/img/muscle-ref/muscle-ref9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 619 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 909 KiB After Width: | Height: | Size: 909 KiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 306 KiB After Width: | Height: | Size: 306 KiB |
|
Before Width: | Height: | Size: 752 KiB After Width: | Height: | Size: 752 KiB |
BIN
src/assets/img/upper-body-ref.jpg
Normal file
BIN
src/assets/img/upper-body-ref.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 551 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 524 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 656 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 589 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 752 KiB |
|
|
@ -1,78 +0,0 @@
|
|||
<svg xmlns='http://www.w3.org/2000/svg' width='100%'>
|
||||
<defs>
|
||||
<pattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'>
|
||||
<g fill-opacity='0.1'>
|
||||
<polygon fill='#444' points='90 150 0 300 180 300'/>
|
||||
<polygon points='90 150 180 0 0 0'/>
|
||||
<polygon fill='#AAA' points='270 150 360 0 180 0'/>
|
||||
<polygon fill='#DDD' points='450 150 360 300 540 300'/>
|
||||
<polygon fill='#999' points='450 150 540 0 360 0'/>
|
||||
<polygon points='630 150 540 300 720 300'/>
|
||||
<polygon fill='#DDD' points='630 150 720 0 540 0'/>
|
||||
<polygon fill='#444' points='810 150 720 300 900 300'/>
|
||||
<polygon fill='#FFF' points='810 150 900 0 720 0'/>
|
||||
<polygon fill='#DDD' points='990 150 900 300 1080 300'/>
|
||||
<polygon fill='#444' points='990 150 1080 0 900 0'/>
|
||||
<polygon fill='#DDD' points='90 450 0 600 180 600'/>
|
||||
<polygon points='90 450 180 300 0 300'/>
|
||||
<polygon fill='#666' points='270 450 180 600 360 600'/>
|
||||
<polygon fill='#AAA' points='270 450 360 300 180 300'/>
|
||||
<polygon fill='#DDD' points='450 450 360 600 540 600'/>
|
||||
<polygon fill='#999' points='450 450 540 300 360 300'/>
|
||||
<polygon fill='#999' points='630 450 540 600 720 600'/>
|
||||
<polygon fill='#FFF' points='630 450 720 300 540 300'/>
|
||||
<polygon points='810 450 720 600 900 600'/>
|
||||
<polygon fill='#DDD' points='810 450 900 300 720 300'/>
|
||||
<polygon fill='#AAA' points='990 450 900 600 1080 600'/>
|
||||
<polygon fill='#444' points='990 450 1080 300 900 300'/>
|
||||
<polygon fill='#222' points='90 750 0 900 180 900'/>
|
||||
<polygon points='270 750 180 900 360 900'/>
|
||||
<polygon fill='#DDD' points='270 750 360 600 180 600'/>
|
||||
<polygon points='450 750 540 600 360 600'/>
|
||||
<polygon points='630 750 540 900 720 900'/>
|
||||
<polygon fill='#444' points='630 750 720 600 540 600'/>
|
||||
<polygon fill='#AAA' points='810 750 720 900 900 900'/>
|
||||
<polygon fill='#666' points='810 750 900 600 720 600'/>
|
||||
<polygon fill='#999' points='990 750 900 900 1080 900'/>
|
||||
<polygon fill='#999' points='180 0 90 150 270 150'/>
|
||||
<polygon fill='#444' points='360 0 270 150 450 150'/>
|
||||
<polygon fill='#FFF' points='540 0 450 150 630 150'/>
|
||||
<polygon points='900 0 810 150 990 150'/>
|
||||
<polygon fill='#222' points='0 300 -90 450 90 450'/>
|
||||
<polygon fill='#FFF' points='0 300 90 150 -90 150'/>
|
||||
<polygon fill='#FFF' points='180 300 90 450 270 450'/>
|
||||
<polygon fill='#666' points='180 300 270 150 90 150'/>
|
||||
<polygon fill='#222' points='360 300 270 450 450 450'/>
|
||||
<polygon fill='#FFF' points='360 300 450 150 270 150'/>
|
||||
<polygon fill='#444' points='540 300 450 450 630 450'/>
|
||||
<polygon fill='#222' points='540 300 630 150 450 150'/>
|
||||
<polygon fill='#AAA' points='720 300 630 450 810 450'/>
|
||||
<polygon fill='#666' points='720 300 810 150 630 150'/>
|
||||
<polygon fill='#FFF' points='900 300 810 450 990 450'/>
|
||||
<polygon fill='#999' points='900 300 990 150 810 150'/>
|
||||
<polygon points='0 600 -90 750 90 750'/>
|
||||
<polygon fill='#666' points='0 600 90 450 -90 450'/>
|
||||
<polygon fill='#AAA' points='180 600 90 750 270 750'/>
|
||||
<polygon fill='#444' points='180 600 270 450 90 450'/>
|
||||
<polygon fill='#444' points='360 600 270 750 450 750'/>
|
||||
<polygon fill='#999' points='360 600 450 450 270 450'/>
|
||||
<polygon fill='#666' points='540 600 630 450 450 450'/>
|
||||
<polygon fill='#222' points='720 600 630 750 810 750'/>
|
||||
<polygon fill='#FFF' points='900 600 810 750 990 750'/>
|
||||
<polygon fill='#222' points='900 600 990 450 810 450'/>
|
||||
<polygon fill='#DDD' points='0 900 90 750 -90 750'/>
|
||||
<polygon fill='#444' points='180 900 270 750 90 750'/>
|
||||
<polygon fill='#FFF' points='360 900 450 750 270 750'/>
|
||||
<polygon fill='#AAA' points='540 900 630 750 450 750'/>
|
||||
<polygon fill='#FFF' points='720 900 810 750 630 750'/>
|
||||
<polygon fill='#222' points='900 900 990 750 810 750'/>
|
||||
<polygon fill='#222' points='1080 300 990 450 1170 450'/>
|
||||
<polygon fill='#FFF' points='1080 300 1170 150 990 150'/>
|
||||
<polygon points='1080 600 990 750 1170 750'/>
|
||||
<polygon fill='#666' points='1080 600 1170 450 990 450'/>
|
||||
<polygon fill='#DDD' points='1080 900 1170 750 990 750'/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect x='0' y='0' fill='url(#b)' width='100%' height='100%'/>
|
||||
</svg>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<template>
|
||||
<figure class="attack">
|
||||
<div class="attack__illustration">
|
||||
<slot name="image"></slot>
|
||||
</div>
|
||||
|
||||
<figcaption class="attack__text">
|
||||
<div class="attack__name">
|
||||
<slot name="name"></slot>
|
||||
</div>
|
||||
|
||||
<div class="attack__description">
|
||||
<slot name="desc"></slot>
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.attack {
|
||||
flex: var(--attack-item-flex);
|
||||
|
||||
display: flex;
|
||||
flex-flow: var(--attack-item-flex-flow);
|
||||
align-items: center;
|
||||
|
||||
margin: 0;
|
||||
padding: 0.375em 0;
|
||||
|
||||
&:nth-child(even) {
|
||||
text-align: var(--attack-item-nth-child-even-text-align);
|
||||
}
|
||||
|
||||
&:nth-child(even) &__illustration,
|
||||
&:nth-child(even) &__text {
|
||||
&:first-child {
|
||||
order: var(--attack-item-first-child-order);
|
||||
}
|
||||
}
|
||||
|
||||
&__illustration {
|
||||
flex: var(--attack-item-illustration-flex);
|
||||
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
flex: 1 1 auto;
|
||||
padding: var(--attack-item-text-padding);
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-weight: bold;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<div class="attacks">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.attacks {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
max-width: var(--attack-list-max-width);
|
||||
margin: auto;
|
||||
padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
interface Props {
|
||||
col?: boolean
|
||||
grid?: boolean
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="btn-group" :class="{ col: col, grid: grid }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.btn-group {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
|
||||
&.col {
|
||||
flex-flow: column nowrap;
|
||||
gap: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
> * {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
> * {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
flex: var(--button-group-flex);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { ColorDict } from '@/interfaces'
|
||||
|
||||
interface Props {
|
||||
colors: ColorDict[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<table class="color-table">
|
||||
<thead class="color-table__head">
|
||||
<tr class="color-table__row">
|
||||
<th class="color-table__heading name">Body part</th>
|
||||
<th class="color-table__heading value">Value</th>
|
||||
<th class="color-table__heading color">Color</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="color-table__body">
|
||||
<tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
|
||||
<td class="color-table__cell name">{{ color.name }}</td>
|
||||
<td class="color-table__cell value">{{ color.value }}</td>
|
||||
<td class="color-table__cell color" :style="{ 'background-color': color.value }"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.color-table {
|
||||
&__heading {
|
||||
&.name {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&__cell {
|
||||
&.name {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.value {
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.color {
|
||||
min-width: 10vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,37 +1,95 @@
|
|||
<script setup lang="ts">
|
||||
interface Props {
|
||||
headings: string[]
|
||||
data: string[][]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<table class="data-table">
|
||||
<thead class="data-table__head">
|
||||
<tr class="data-table__row">
|
||||
<th class="data-table__heading" v-for="(heading, idx) in headings" :key="idx">
|
||||
{{ heading }}
|
||||
<table class="datatable">
|
||||
<thead class="datatable__head">
|
||||
<tr class="datatable__row datatable__row--head">
|
||||
<th
|
||||
class="datatable__heading"
|
||||
v-for="(header, idx) in dataset.headers"
|
||||
:key="idx"
|
||||
>
|
||||
{{ header }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="data-table__body">
|
||||
<tr class="data-table__row" v-for="(row, idx) in data" :key="idx">
|
||||
<td class="data-table__cell" v-for="(cell, idx) in row" :key="idx">
|
||||
<tbody class="datatable__body">
|
||||
<tr class="datatable__row" v-for="(row, idx) in dataset.data" :key="idx">
|
||||
<td
|
||||
class="datatable__cell"
|
||||
v-for="(cell, idx) in row"
|
||||
:key="idx"
|
||||
:colspan="idx === 1 && !isHexValue(row[1]) ? 2 : 1"
|
||||
>
|
||||
{{ cell }}
|
||||
</td>
|
||||
<td
|
||||
v-if="isHexValue(row[1])"
|
||||
class="datatable__cell--colorpick"
|
||||
:style="`background-color: ${row[1]}`"
|
||||
></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.data-table {
|
||||
table-layout: fixed;
|
||||
<script>
|
||||
export default {
|
||||
name: "DataTable",
|
||||
props: {
|
||||
dataset: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isHexValue(value) {
|
||||
return /^#[0-9a-f]{6}$/i.test(value) ? value : false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
&__cell:first-child {
|
||||
<style lang="scss">
|
||||
@import "@scss/_variables.scss";
|
||||
|
||||
.datatable {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
&__heading,
|
||||
&__cell {
|
||||
padding: 0.25em 0.5em;
|
||||
|
||||
@media (min-width: 35em) {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
.datatable__row {
|
||||
background-color: rgba($bg-color-dark, 0.7);
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: rgba(lighten($bg-color-dark, 15%), 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
&--head {
|
||||
background-color: $bg-color-light;
|
||||
color: $copy-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__cell {
|
||||
&:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--colorpick {
|
||||
margin-top: 0.1em;
|
||||
border: 0.1em solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
50
src/components/Figure.vue
Normal file
50
src/components/Figure.vue
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<figure class="figure">
|
||||
<slot name="img"></slot>
|
||||
<figcaption class="figure__meta">
|
||||
<slot name="caption"></slot>
|
||||
<slot name="copyright"></slot>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@scss/_variables.scss";
|
||||
@import "@scss/_mixins.scss";
|
||||
|
||||
.figure {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
|
||||
@include mq-desktop {
|
||||
max-width: 70em;
|
||||
max-height: 80vh;
|
||||
}
|
||||
}
|
||||
|
||||
label,
|
||||
a {
|
||||
font-size: 0.8em;
|
||||
font-style: italic;
|
||||
color: $copy-color;
|
||||
}
|
||||
|
||||
label:after {
|
||||
display: inline;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
a:before {
|
||||
display: inline;
|
||||
content: "©";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue