API tools faq
paste
glenthemes

Character Page [06]: Raison D'être

glenthemes
Aug 8th, 2020 (edited)
4,914
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 59.06 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Character Page [06]: Raison D'être
  3.  
  4. NieR:Automata HUD Design by Hisayoshi Kijima.
  5. Re-imagined as a character page in CSS/JS/HTML by glenthemes
  6.  
  7. Initial release: 2020/08/08
  8. Last updated: 2025/03/01
  9.  
  10. What's new:
  11. ✱ updated honeybee icons sheet link
  12. ✱ images custom position bugfixing
  13.  
  14. TERMS OF USE:
  15. 1) Do not remove the page credit.
  16. 2) Do not repost/redistribute my themes.
  17. 3) Do not take parts of the code and use it as your own.
  18. 4) Do not use my themes as a base code.
  19. 5) Do not mix my themes together.
  20.  
  21. Customization pointers:
  22. 🍅🍅🍅🍅🍅🍅🍅 = places to edit
  23. 👇👇👇👇👇👇👇 = start of a section (e.g. start copy)
  24. ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ = end of a section (e.g. end copy)
  25.  
  26. Each character has 4 parts you need to edit:
  27. • their name in the character list (left box)
  28. • their name in the right box title
  29. • their image
  30. • their text (next to the image)
  31.  
  32. Look out for the tomatoes.
  33.  
  34. Guide:
  35. https://docs.google.com/document/d/19vZjf0CquloTNQsSLG5vSGAi1oOH8VkEP5i5YQrTnhA/edit?usp=sharing
  36. ------------------------------------------------------------------------>
  37.  
  38. <!DOCTYPE html>
  39. <html lang="en">
  40.  
  41. <head>
  42.  
  43. <title>{Title}</title>
  44.  
  45. <link rel="shortcut icon" href="{Favicon}">
  46.  
  47. <!--------------------JAVASCRIPTS-------------------->
  48. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  49. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  50. <script>
  51. (function($){
  52. $(document).ready(function(){
  53. $("a[title]").style_my_tooltips({
  54. tip_follows_cursor:true,
  55. tip_delay_time:69,
  56. tip_fade_speed:0,
  57. attribute:"title"
  58. });
  59. });
  60. })(jQuery);
  61. </script>
  62.  
  63. <link href="https://fonts.googleapis.com/css?family=Darker+Grotesque:400,500|Inter:300,400,500|Rubik:400" rel="stylesheet">
  64.  
  65. <link href="//honeybeeicons.gitlab.io/backup/icons.css" rel="stylesheet" crossorigin>
  66.  
  67. <script src="//glen-themes.gitlab.io/chara-pages/06/raison-d'etre.js"></script>
  68. <!------------------------------------------------->
  69.  
  70. <style type="text/css">
  71.  
  72. /*-------------TOOLTIPS-------------*/
  73. #s-m-t-tooltip {
  74. margin:20px;
  75. padding:6px 11px;
  76. background:var(--TopLinks-Accent-Color);
  77. font-family:inter;
  78. font-size:calc(var(--TopLinks-Font-Size) - 2.5px);
  79. text-transform:uppercase;
  80. letter-spacing:1px;
  81. color:var(--TopLinks-Background);
  82. z-index:99;
  83. line-height:1.75em;
  84. max-width:40vw;
  85. }
  86.  
  87. /*-------------TUMBLR CONTROLS-------------*/
  88. iframe#tumblr_controls, .iframe-controls--desktop {
  89. position:fixed!important;
  90. top:0!important;
  91. margin-top:calc(var(--Screen-Padding) * 0.8)!important;
  92. right:0!important;
  93. margin-right:calc(var(--Screen-Padding) * 0.8)!important;
  94.  
  95. transform:scale(0.75,0.75);
  96. -webkit-transform:scale(0.75,0.75);
  97. -moz-transform:scale(0.75,0.75);
  98. -o-transform:scale(0.75,0.75);
  99. -ms-transform:scale(0.75,0.75);
  100.  
  101. transform-origin:100% 0;
  102. -webkit-transform-origin:100% 0;
  103. -moz-transform-origin:100% 0;
  104. -o-transform-origin:100% 0;
  105. -ms-transform-origin:100% 0;
  106.  
  107. filter:sepia(100%) invert(100%) hue-rotate(180deg)!important;
  108. -webkit-filter:sepia(100%) invert(100%) hue-rotate(180deg)!important;
  109.  
  110. z-index:999999!important;
  111. }
  112.  
  113. .tmblr-iframe--follow-teaser, .follow-teaser, .iframe-controls--phone-mobile, .tmblr-iframe--app-cta-button {
  114. display:none!important;
  115. visibility:hidden!important;
  116. height:0!important;
  117. }
  118.  
  119. /*---------------TEXT HIGHLIGHT---------------*/
  120. ::selection {
  121. background:#BBD3FD;
  122. }
  123.  
  124. ::-moz-selection {
  125. background:#BBD3FD;
  126. }
  127.  
  128. /*---------------BASICS---------------*/
  129. body {
  130. background-attachment:fixed;
  131. line-height:1.6em;
  132. font-size:12px;
  133. text-align:left;
  134. overflow:hidden;
  135. }
  136.  
  137. a, a > span {
  138. text-decoration:none;
  139. -webkit-transition: all 0.153s ease-in-out;
  140. -moz-transition: all 0.153s ease-in-out;
  141. -o-transition: all 0.153s ease-in-out;
  142. }
  143.  
  144. pre, code {
  145. white-space:pre-wrap;
  146. }
  147.  
  148. img {vertical-align:middle;}
  149.  
  150. /*------------ CUSTOMIZATION OPTIONS ------------*/
  151. /*-- 🍅🍅🍅🍅🍅🍅🍅 --*/
  152.  
  153. /* all colors, dimensions etc are changed inside :root */
  154. /* EXCEPT the background color, changed below: */
  155.  
  156. body {
  157. background-color:#CDC8B0;
  158. }
  159.  
  160. :root {
  161. --Background:#CDC8B0;
  162.  
  163. --Background-Circle-Size:43vw;
  164. --Background-Circle-Spacing:1vh;
  165.  
  166. --Background-Lines-Length:60vw;
  167. --Background-Lines-Spacing:6vh;
  168.  
  169. --Background-Shapes-Color:#bbb7a4;
  170.  
  171. --Background-Shadow-Size:30vw;
  172. --Background-Shadow-Color:#3b3933;
  173. --Background-Shadow-Opacity:0.3;
  174. --Screen-Padding:32px;
  175.  
  176. --LeftBorder-Left-Width:10px;
  177. --LeftBorder-Right-Width:3px;
  178. --LeftBorder-Color:#B4AF9A;
  179. --LeftBorder-Right-Gap:26px;
  180.  
  181. /*------- TOP LINKS / CUSTOM LINKS -------*/
  182. --TopLinks-Width:136px; /* 140 */
  183. --TopLinks-Padding:8px;
  184. --TopLinks-Background:#B4AF9A;
  185. --TopLinks-Accent-Color:#49463E;
  186. --TopLinks-Border-Size:2px;
  187.  
  188. --TopLinks-Icon-Size:12px;
  189. --TopLinks-Icon-Padding:5px;
  190. --TopLinks-Icon-Right-Gap:7px;
  191.  
  192. --TopLinks-Font-Size:13px;
  193.  
  194. --TopLinks-Spacing:15px;
  195.  
  196. /*------- MAIN TITLE -------*/
  197. --Main-Title-Font-Size:26px;
  198. --Main-Title-Color:#49463E;
  199. --Main-Title-Shadow-Color:#B4AF9A;
  200.  
  201. --Hyphen-Width:12px;
  202. --Hyphen-Color:#49463E;
  203. --Hyphen-Spacing:10px;
  204.  
  205. --Smaller-Title-Font-Size:14px;
  206. --Smaller-Title-Color:#49463E;
  207.  
  208. /*------- CHARACTER LIST (LEFT BOX) -------*/
  209. --CharacterList-Box-Width:350px;
  210. --CharacterList-Box-Background:#DAD4BB;
  211. --CharacterList-Box-Shadow-Color:#bfbba9;
  212. --CharacterList-Box-Border-Size:2px;
  213. --CharacterList-Box-Border-Color:#bfbba9;
  214. --CharacterList-Scrollbar-Color:#B4AF9A;
  215.  
  216. --CharacterName-Padding:10px;
  217. --CharacterName-Accent-Color:#49463E;
  218. --CharacterName-Border-Size:2px;
  219.  
  220. --CharacterName-Box-Size:8px;
  221. --CharacterName-Box-Border-Size:1px;
  222. --CharacterName-Box-Right-Gap:10px;
  223.  
  224. --CharacterName-Font-Size:15px;
  225. --CharacterList-Row-Spacing:2px;
  226.  
  227. /*------- CHARACTER INFO BOX (RIGHT BOX) -------*/
  228. --InfoBox-Left-Gap:36px;
  229.  
  230. --InfoBox-Title-Padding:12px;
  231. --InfoBox-Title-Background:#b4af9a;
  232. --InfoBox-Title-Square-Right-Gap:9px;
  233. --InfoBox-Title-Font-Size:17px;
  234. --InfoBox-Title-Color:#49463E;
  235.  
  236. --InfoBox-Background:#DAD4BB;
  237. --InfoBox-Border-Size:2px;
  238. --InfoBox-Border-Color:#bfbba9;
  239. --InfoBox-Shadow-Color:#bfbba9;
  240.  
  241. --InfoBox-Image-Container-Width:245px;
  242. --InfoBox-Image-Vignette-Size:69px;
  243. --InfoBox-Image-Vignette-Color:#201e1b; /* only for non-fullsized images */
  244. --InfoBox-Text-Left-Gap:20px;
  245. --InfoBox-Bullet-Icon-Size:22px;
  246. --InfoBox-Bullet-Icon-Color:#49463E;
  247. --InfoBox-Bullet-Text-Spacing:14px;
  248. --InfoBox-Bullet-Row-Spacing:2.5px; /* does not support negative values */
  249.  
  250. --InfoBox-Text-Font-Size:14px;
  251. --InfoBox-Text-Color:#656055;
  252.  
  253. --Special-Text-Background:#C1BCA5;
  254. --Special-Text:#49463E;
  255.  
  256. --InfoBox-Text-Links:#201e1b; /* if any */
  257.  
  258. --InfoBox-Scrollbar-Color:#B4AF9A;
  259.  
  260. --Switch-Fade-Speed:169ms; /* number in milliseconds ONLY */
  261.  
  262. /*------- DECOR LINES (TOP & BOTTOM) -------*/
  263. --Decor-Lines-Thickness:2px;
  264. --Decor-Lines-Color:#747268;
  265.  
  266. --Decor-Lines-Stub-Width:0.67vw;
  267. --Decor-Lines-Stub-Height:2px;
  268.  
  269. --Decor-Lines-Dots-Top-Gap:-3px;
  270. --Decor-Lines-Dots-Size:2.5vw;
  271. --Decor-Lines-Dots-Color:#656156;
  272. --Decor-Lines-Dots-Spacing:0.9vw;
  273. }
  274.  
  275. /*--------- BACKGROUND SHAPES ---------*/
  276. /*----top left----*/
  277. .shrimp {
  278. position:absolute;
  279. top:0;margin-top:calc(var(--Background-Circle-Size) * -.5);
  280. left:0;margin-left:calc(var(--Background-Circle-Size) * -.5);
  281. width:var(--Background-Circle-Size);
  282. height:var(--Background-Circle-Size);
  283. border-radius:100%;
  284. border:2px solid var(--Background-Shapes-Color);
  285. z-index:-69;
  286. }
  287.  
  288. .scampi {
  289. position:absolute;
  290. top:0;margin-top:calc((var(--Background-Circle-Size) * -.5) + 2px);
  291. left:0;margin-left:calc((var(--Background-Circle-Size) * -.5) + 2px);
  292. width:calc(var(--Background-Circle-Size) + var(--Background-Circle-Spacing));
  293. height:calc(var(--Background-Circle-Size) + var(--Background-Circle-Spacing));
  294. border-radius:100%;
  295. border:2px solid var(--Background-Shapes-Color);
  296. }
  297.  
  298. .clam {
  299. position:absolute;
  300. top:0;
  301. left:0;
  302. width:var(--Background-Lines-Length);
  303. height:2px;
  304. background:var(--Background-Shapes-Color);
  305. transform:rotate(45deg);
  306. transform-origin:left;
  307. z-index:-69;
  308. }
  309.  
  310. .prawn {
  311. position:absolute;
  312. top:0;
  313. left:0;margin-left:var(--Background-Lines-Spacing);
  314. width:calc(var(--Background-Lines-Length) * 0.87);
  315. height:2px;
  316. background:var(--Background-Shapes-Color);
  317. transform:rotate(45deg);
  318. transform-origin:left;
  319. }
  320.  
  321. .haddock {
  322. position:absolute;
  323. top:0;
  324. left:0;margin-left:calc(var(--Background-Lines-Spacing) * -1);
  325. width:calc(var(--Background-Lines-Length) * 0.8);
  326. height:2px;
  327. background:var(--Background-Shapes-Color);
  328. transform:rotate(45deg);
  329. transform-origin:left;
  330. }
  331.  
  332. /*----bottom right----*/
  333. .carp {
  334. position:absolute;
  335. bottom:0;margin-bottom:calc(var(--Background-Circle-Size) * -.5);
  336. right:0;margin-right:calc(var(--Background-Circle-Size) * -.5);
  337. width:var(--Background-Circle-Size);
  338. height:var(--Background-Circle-Size);
  339. border-radius:100%;
  340. border:2px solid var(--Background-Shapes-Color);
  341. z-index:-69;
  342. }
  343.  
  344. .crayfish {
  345. position:absolute;
  346. bottom:0;margin-bottom:calc((var(--Background-Circle-Size) * -.5) + 2px);
  347. right:0;margin-right:calc((var(--Background-Circle-Size) * -.5) + 2px);
  348. width:calc(var(--Background-Circle-Size) + var(--Background-Circle-Spacing));
  349. height:calc(var(--Background-Circle-Size) + var(--Background-Circle-Spacing));
  350. border-radius:100%;
  351. border:2px solid var(--Background-Shapes-Color);
  352. }
  353.  
  354. .perch {
  355. position:absolute;
  356. bottom:0;
  357. right:0;
  358. width:var(--Background-Lines-Length);
  359. height:2px;
  360. background:var(--Background-Shapes-Color);
  361. transform:rotate(45deg);
  362. transform-origin:right;
  363. z-index:-69;
  364. }
  365.  
  366. .lamprey {
  367. position:absolute;
  368. bottom:0;
  369. right:0;margin-right:var(--Background-Lines-Spacing);
  370. width:calc(var(--Background-Lines-Length) * 0.87);
  371. height:2px;
  372. background:var(--Background-Shapes-Color);
  373. transform:rotate(45deg);
  374. transform-origin:right;
  375. }
  376.  
  377. .unagi {
  378. position:absolute;
  379. bottom:0;
  380. right:0;margin-right:calc(var(--Background-Lines-Spacing) * -1);
  381. width:calc(var(--Background-Lines-Length) * 0.8);
  382. height:2px;
  383. background:var(--Background-Shapes-Color);
  384. transform:rotate(45deg);
  385. transform-origin:right;
  386. }
  387.  
  388. /*---------- BACKGROUND SHADOW ----------*/
  389. #ohnines, #pod069 {
  390. position:fixed;
  391. top:0;
  392. width:var(--Background-Shadow-Size);
  393. height:100vh;
  394. pointer-events:none;
  395. opacity:var(--Background-Shadow-Opacity);
  396. mix-blend-mode:multiply;
  397. z-index:102;
  398. }
  399.  
  400. #ohnines {
  401. left:0;
  402. background:linear-gradient(to right, var(--Background-Shadow-Color), transparent 75%);
  403. }
  404.  
  405. #pod069 {
  406. right:0;
  407. background:linear-gradient(to left, var(--Background-Shadow-Color), transparent 75%);
  408. }
  409.  
  410. /*--------- TOP LINE ---------*/
  411. .decoline-top {
  412. position:fixed;
  413. left:0;
  414. top:0;margin-top:var(--Screen-Padding);
  415. width:100%;
  416. font-family:times;
  417. line-height:1em;
  418. }
  419.  
  420. .decoline-bot {
  421. position:fixed;
  422. left:0;
  423. bottom:0;
  424. margin-bottom:var(--Screen-Padding);
  425. width:100%;
  426. font-family:times;
  427. line-height:1em;
  428. }
  429.  
  430. .une-biere {
  431. width:100%;
  432. height:var(--Decor-Lines-Thickness);
  433. background:var(--Decor-Lines-Color);
  434. }
  435.  
  436. .mackerel {
  437. margin:0 auto;
  438. text-align:center;
  439. }
  440.  
  441. .sauce {
  442. display:inline-block;
  443. }
  444.  
  445. .bestfish {
  446. display:flex;
  447. margin-left:var(--Decor-Lines-Stub-Width);
  448. }
  449.  
  450. .bestfish span {
  451. margin-top:var(--Decor-Lines-Dots-Top-Gap);
  452. margin-left:var(--Decor-Lines-Dots-Spacing);
  453. margin-right:calc(var(--Decor-Lines-Dots-Spacing) + var(--Decor-Lines-Stub-Width));
  454. font-size:var(--Decor-Lines-Dots-Size);
  455. font-weight:bold;
  456. color:var(--Decor-Lines-Dots-Color);
  457. -webkit-user-select:none;
  458. -moz-user-select:none;
  459. -ms-user-select:none;
  460. user-select:none;
  461. cursor:default;
  462. line-height:0.8em;
  463. }
  464.  
  465. .bestfish span:first-child:before {
  466. content:"";
  467. position:absolute;
  468. margin-left:calc((var(--Decor-Lines-Stub-Width) * -1) - var(--Decor-Lines-Dots-Spacing));
  469. margin-top:calc(var(--Decor-Lines-Dots-Top-Gap) * -1);
  470. width:var(--Decor-Lines-Stub-Width);
  471. height:var(--Decor-Lines-Stub-Height);
  472. background:var(--Decor-Lines-Color);
  473. }
  474.  
  475. .bestfish span:after {
  476. content:"";
  477. position:absolute;
  478. margin-left:var(--Decor-Lines-Dots-Spacing);
  479. margin-top:calc(var(--Decor-Lines-Dots-Top-Gap) * -1);
  480. width:var(--Decor-Lines-Stub-Width);
  481. height:var(--Decor-Lines-Stub-Height);
  482. background:var(--Decor-Lines-Color);
  483. }
  484.  
  485. /*--------- TOP BAR ---------*/
  486. .halibut {
  487. display:table;
  488. margin-bottom:calc(var(--Screen-Padding) * 0.69);
  489. margin-left:var(--Screen-Padding);
  490. }
  491.  
  492. /*--------- LEFT BORDER ---------*/
  493. .tilapia {
  494. display:table-cell;
  495. width:calc(var(--LeftBorder-Left-Width) - var(--LeftBorder-Right-Width));
  496. border-left:var(--LeftBorder-Left-Width) solid var(--LeftBorder-Color);
  497. border-right:var(--LeftBorder-Right-Width) solid var(--LeftBorder-Color);
  498. }
  499.  
  500. /*---------TOP LINKS ---------*/
  501. .toplinks {
  502. margin-left:calc(var(--LeftBorder-Right-Gap) - 7px);
  503. width:calc(100vw - (var(--LeftBorder-Left-Width) * 2) - (var(--Screen-Padding) * 2));
  504. display:flex;
  505. flex-wrap:nowrap;
  506. }
  507.  
  508. .toplinks a {
  509. position:relative;
  510. display:flex;
  511. align-items:center;
  512. margin-left:var(--TopLinks-Spacing);
  513. width:var(--TopLinks-Width);
  514. padding:calc(var(--TopLinks-Padding) - var(--TopLinks-Border-Size)) var(--TopLinks-Padding);
  515. background:var(--TopLinks-Background);
  516. box-sizing:border-box;
  517. z-index:1;
  518. }
  519.  
  520. .toplinks a:first-of-type {margin-left:0;}
  521.  
  522. .toplinks .curse {
  523. position:absolute;
  524. left:0;
  525. margin-left:calc((var(--TopLinks-Icon-Size) + (var(--TopLinks-Icon-Padding) * 3) + var(--TopLinks-Border-Size)) * -1);
  526. width:calc(var(--TopLinks-Icon-Size) + (var(--TopLinks-Icon-Padding) * 2) + var(--TopLinks-Border-Size));
  527. height:calc(var(--TopLinks-Icon-Size) + (var(--TopLinks-Icon-Padding) * 2) + var(--TopLinks-Border-Size));
  528. opacity:0;
  529. -webkit-transition: all 0.069s ease-in;
  530. -moz-transition: all 0.069s ease-in;
  531. -o-transition: all 0.069s ease-in;
  532. }
  533.  
  534. .curse svg {
  535. width:100%;
  536. height:100%;
  537. }
  538.  
  539. .toplinks .curse svg [fill]{
  540. fill:var(--TopLinks-Accent-Color)
  541. }
  542.  
  543. .charalist svg [fill]{
  544. fill:var(--CharacterName-Accent-Color);
  545. }
  546.  
  547. .bio-text svg [fill]{
  548. fill:var(--InfoBox-Text-Color);
  549. }
  550.  
  551. .toplinks a:hover .curse {
  552. opacity:1;
  553. }
  554.  
  555. /*---- toplinks border hover ----*/
  556. .toplinks a:before {
  557. content:"";
  558. position:absolute;
  559. left:0;
  560. width:75%;
  561. height:100%;
  562. padding:var(--TopLinks-Border-Size) 0;
  563. border-top:var(--TopLinks-Border-Size) solid var(--TopLinks-Accent-Color);
  564. border-bottom:var(--TopLinks-Border-Size) solid var(--TopLinks-Accent-Color);
  565. opacity:0;
  566. -webkit-transition: all 0.069s ease-in;
  567. -moz-transition: all 0.069s ease-in;
  568. -o-transition: all 0.069s ease-in;
  569. }
  570.  
  571. .toplinks a:hover:before {
  572. width:100%;
  573. opacity:1;
  574. }
  575.  
  576. /*---- toplinks background hover ----*/
  577. .toplinks a:after {
  578. content:"";
  579. position:absolute;
  580. left:0;
  581. width:50%;
  582. height:100%;
  583. -webkit-transition: width 0.153s ease-in;
  584. -moz-transition: width 0.153s ease-in;
  585. -o-transition: width 0.153s ease-in;
  586. z-index:-1;
  587. }
  588.  
  589. .toplinks a:hover:after {
  590. width:100%;
  591. background:var(--TopLinks-Accent-Color);
  592. }
  593.  
  594. .toplinks .th {
  595. margin-right:var(--TopLinks-Icon-Right-Gap);
  596. padding:var(--TopLinks-Icon-Padding);
  597. background:var(--TopLinks-Accent-Color);
  598. font-size:var(--TopLinks-Icon-Size);
  599. color:var(--TopLinks-Background);
  600. }
  601.  
  602. .toplinks a:hover .th {
  603. background:var(--TopLinks-Background);
  604. color:var(--TopLinks-Accent-Color);
  605. }
  606.  
  607. .toplinks span {
  608. margin-top:-2.5px;
  609. font-family:darker grotesque;
  610. font-weight:500;
  611. font-size:var(--TopLinks-Font-Size);
  612. text-transform:uppercase;
  613. letter-spacing:1.5px;
  614. color:var(--TopLinks-Accent-Color);
  615. }
  616.  
  617. .toplinks a:hover span {
  618. color:var(--TopLinks-Background);
  619. }
  620.  
  621. /*--------- MAIN STUFF ---------*/
  622. #le-main {
  623. position:absolute;
  624. top:0;
  625. margin-top:calc((var(--Screen-Padding) * (1 + 0.42)) + ((var(--TopLinks-Padding) - var(--TopLinks-Border-Size)) * 2) + var(--TopLinks-Icon-Size) + (var(--TopLinks-Icon-Padding) * 2) + var(--Decor-Lines-Thickness) + var(--Decor-Lines-Stub-Height) + var(--Decor-Lines-Dots-Top-Gap) + var(--Decor-Lines-Dots-Size) + (var(--Screen-Padding) * 0.42)); /* im so sorry for this monstrosity */
  626. left:0;
  627. margin-left:var(--Screen-Padding);
  628. width:calc(100vw - (var(--Screen-Padding) * 2));
  629. height:calc(100vh - ((var(--Screen-Padding) * (1 + 0.42)) + ((var(--TopLinks-Padding) - var(--TopLinks-Border-Size)) * 2) + var(--TopLinks-Icon-Size) + (var(--TopLinks-Icon-Padding) * 2) + var(--Decor-Lines-Thickness) + var(--Decor-Lines-Stub-Height) + var(--Decor-Lines-Dots-Top-Gap) + var(--Decor-Lines-Dots-Size) + (var(--Screen-Padding) * 0.42)) - var(--Decor-Lines-Thickness) - var(--Decor-Lines-Stub-Height) - var(--Decor-Lines-Dots-Top-Gap) - var(--Decor-Lines-Dots-Size) - (var(--Screen-Padding) * 1.42)); /* i am once again sorry for this monstrosity */
  630. display:table;
  631. }
  632.  
  633. /*--------- MAIN TITLE ---------*/
  634. .main-title {
  635. margin-top:10px;
  636. margin-left:2px;
  637. margin-bottom:calc(var(--Screen-Padding) * 0.69);
  638. display:flex;
  639. align-items:center;
  640. color:var(--Main-Title-Color);
  641. }
  642.  
  643. .large {
  644. margin-top:-4px;
  645. font-family:darker grotesque;
  646. font-weight:400;
  647. font-size:var(--Main-Title-Font-Size);
  648. text-transform:uppercase;
  649. letter-spacing:2px;
  650. text-shadow:4px 4px 0px var(--Main-Title-Shadow-Color);
  651. }
  652.  
  653. .hyphen {
  654. margin-left:calc(var(--Hyphen-Spacing) + 2px);
  655. margin-right:var(--Hyphen-Spacing);
  656. width:var(--Hyphen-Width);
  657. height:1px;
  658. background:var(--Hyphen-Color);
  659. }
  660.  
  661. .smaller {
  662. margin-top:1px;
  663. font-family:Inter;
  664. font-weight:300;
  665. font-size:var(--Smaller-Title-Font-Size);
  666. text-transform:uppercase;
  667. letter-spacing:1.5px;
  668. color:var(--Smaller-Title-Color);
  669. }
  670.  
  671. /*--------- MAIN (LOWER) CONTAINER ---------*/
  672. .houh {
  673. width:100%;
  674. height:100%;
  675. display:table-row;
  676. }
  677.  
  678. .uhhh {
  679. width:100%;
  680. height:100%;
  681. display:flex;
  682. }
  683.  
  684. .bigleftbar {
  685. width:calc(var(--LeftBorder-Left-Width) - var(--LeftBorder-Right-Width));
  686. height:100%;
  687. border-left:var(--LeftBorder-Left-Width) solid var(--LeftBorder-Color);
  688. border-right:var(--LeftBorder-Right-Width) solid var(--LeftBorder-Color);
  689. }
  690.  
  691. /*--------- LEFT BOX / CHARACTER LIST ---------*/
  692. .leftbox {
  693. position:relative;
  694. margin-left:var(--LeftBorder-Right-Gap);
  695. width:var(--CharacterList-Box-Width);
  696. height:100%;
  697. background:var(--CharacterList-Box-Background);
  698. box-shadow:3px 3px 0px var(--CharacterList-Box-Shadow-Color);
  699. }
  700.  
  701. .imatsoup {
  702. display:flex;
  703. align-items:center;
  704. margin-top:calc(var(--CharacterList-Box-Border-Size) * 6);
  705. margin-left:calc(var(--CharacterList-Box-Border-Size) * 6);
  706. margin-bottom:calc(var(--CharacterList-Box-Border-Size) * 6);
  707. width:calc(100% - (var(--CharacterList-Box-Border-Size) * 12));
  708. }
  709.  
  710. .wait-its-all-soup {
  711. width:100%;
  712. height:var(--CharacterList-Box-Border-Size);
  713. background:var(--CharacterList-Box-Border-Color);
  714. }
  715.  
  716. .always-has-been {
  717. margin-left:calc(var(--CharacterList-Box-Border-Size) * 4);
  718. width:calc(var(--CharacterList-Box-Border-Size) * 2);
  719. height:calc(var(--CharacterList-Box-Border-Size) * 2);
  720. background:var(--CharacterList-Box-Border-Color);
  721. border-radius:100%;
  722. }
  723.  
  724. .tomatoe {
  725. position:absolute;
  726. display:flex;
  727. align-items:center;
  728. bottom:0;
  729. margin-bottom:calc(var(--CharacterList-Box-Border-Size) * 6);
  730. margin-left:calc(var(--CharacterList-Box-Border-Size) * 6);
  731. width:calc(100% - (var(--CharacterList-Box-Border-Size) * 12));
  732. }
  733.  
  734. .anchovy {
  735. position:absolute;
  736. margin-left:calc((var(--CharacterList-Box-Border-Size) * 6) - 100px);
  737. width:calc(100% - (var(--CharacterList-Box-Border-Size) * 6.5) + 100px);
  738. height:calc(100% - (var(--CharacterList-Box-Border-Size) * 28));
  739. overflow-y:auto;
  740. }
  741.  
  742. .anchovy::-webkit-scrollbar {
  743. width:calc(((var(--CharacterList-Box-Border-Size) * 6) * 2) + 2px);
  744. height:calc(((var(--CharacterList-Box-Border-Size) * 6) * 2) + 2px);
  745. background-color:var(--CharacterList-Box-Background);
  746. }
  747.  
  748. .anchovy::-webkit-scrollbar-thumb {
  749. border-left:calc(var(--CharacterList-Box-Border-Size) * 6) solid var(--CharacterList-Box-Background);
  750. border-right:calc(var(--CharacterList-Box-Border-Size) * 6) solid var(--CharacterList-Box-Background);
  751. background-color:var(--CharacterList-Scrollbar-Color);
  752. }
  753.  
  754. /*--------- CHARACTER LISTING ---------*/
  755. .arowana {
  756. margin-left:100px;
  757. padding-top:calc(var(--CharacterName-Border-Size) * 4);
  758. }
  759.  
  760. .charalist {
  761. margin-left:calc(var(--CharacterList-Box-Border-Size) * -6);
  762. margin-top:calc(var(--CharacterName-Border-Size) * -2);
  763. }
  764.  
  765. .charalist a {
  766. position:relative;
  767. display:flex;
  768. align-items:center;
  769. margin-top:var(--CharacterList-Row-Spacing);
  770. padding:calc(var(--CharacterName-Padding) - var(--CharacterName-Border-Size)) var(--CharacterName-Padding);
  771. box-sizing:border-box;
  772. cursor:pointer;
  773. z-index:1;
  774. }
  775.  
  776. .charalist a:first-of-type {margin-top:0;}
  777.  
  778. /*-------*/
  779. .active .curse {
  780. opacity:1!important;
  781. }
  782.  
  783. .active:before {
  784. width:100%!important;
  785. opacity:1!important;
  786. }
  787.  
  788. .active:after {
  789. width:100%!important;
  790. background:var(--CharacterName-Accent-Color)!important;
  791. }
  792.  
  793. .active .box {
  794. background:var(--CharacterList-Box-Background)!important;
  795. border-color:var(--CharacterList-Box-Background)!important;
  796. }
  797.  
  798. .active span {
  799. color:var(--CharacterList-Box-Background)!important;
  800. }
  801. /*------*/
  802.  
  803. .charalist .curse {
  804. position:absolute;
  805. left:0;
  806. margin-left:calc((var(--CharacterName-Box-Size) + (var(--CharacterName-Padding) * (1 + 1.75))) * -1);
  807. width:calc(var(--CharacterName-Box-Size) + (var(--CharacterName-Padding) * 1.75));
  808. height:calc(var(--CharacterName-Box-Size) + (var(--CharacterName-Padding) * 1.75));
  809. opacity:0;
  810. -webkit-transition: all 0.069s ease-in;
  811. -moz-transition: all 0.069s ease-in;
  812. -o-transition: all 0.069s ease-in;
  813. }
  814.  
  815. .curse svg {
  816. width:100%;
  817. height:100%;
  818. }
  819.  
  820. .charalist a:hover .curse {
  821. opacity:1;
  822. }
  823.  
  824. /*---- chara names border hover ----*/
  825. .charalist a:before {
  826. content:"";
  827. position:absolute;
  828. left:0;
  829. width:75%;
  830. height:100%;
  831. padding:var(--CharacterName-Border-Size) 0;
  832. border-top:var(--CharacterName-Border-Size) solid var(--CharacterName-Accent-Color);
  833. border-bottom:var(--CharacterName-Border-Size) solid var(--CharacterName-Accent-Color);
  834. opacity:0;
  835. -webkit-transition: all 0.069s ease-in;
  836. -moz-transition: all 0.069s ease-in;
  837. -o-transition: all 0.069s ease-in;
  838. }
  839.  
  840. .charalist a:hover:before {
  841. width:100%;
  842. opacity:1;
  843. }
  844.  
  845. /*---- chara names background hover ----*/
  846. .charalist a:after {
  847. content:"";
  848. position:absolute;
  849. left:0;
  850. width:50%;
  851. height:100%;
  852. -webkit-transition: width 0.153s ease-in;
  853. -moz-transition: width 0.153s ease-in;
  854. -o-transition: width 0.153s ease-in;
  855. z-index:-1;
  856. }
  857.  
  858. .charalist a:hover:after {
  859. width:100%;
  860. background:var(--CharacterName-Accent-Color);
  861. }
  862.  
  863. .charalist .box {
  864. margin-left:calc(var(--CharacterName-Border-Size) * 2.5);
  865. margin-right:var(--CharacterName-Box-Right-Gap);
  866. width:var(--CharacterName-Box-Size);
  867. height:var(--CharacterName-Box-Size);
  868. border:var(--CharacterName-Box-Border-Size) solid var(--CharacterName-Accent-Color);
  869. }
  870.  
  871. .charalist a:hover .box {
  872. background:var(--CharacterList-Box-Background);
  873. border-color:var(--CharacterList-Box-Background);
  874. }
  875.  
  876. .charalist span {
  877. margin-top:-2.5px;
  878. font-family:darker grotesque;
  879. font-weight:500;
  880. font-size:var(--CharacterName-Font-Size);
  881. text-transform:uppercase;
  882. letter-spacing:1.5px;
  883. color:var(--CharacterName-Accent-Color);
  884. }
  885.  
  886. .charalist a:hover span {
  887. color:var(--CharacterList-Box-Background);
  888. }
  889.  
  890. /*-------*/
  891. .highlight .curse {
  892. opacity:1!important;
  893. }
  894.  
  895. .highlight:before {
  896. width:100%!important;
  897. opacity:1!important;
  898. }
  899.  
  900. .highlight:after {
  901. width:100%!important;
  902. background:var(--TopLinks-Accent-Color)!important;
  903. }
  904.  
  905. .highlight .th {
  906. background:var(--TopLinks-Background)!important;
  907. color:var(--TopLinks-Accent-Color)!important;
  908. }
  909.  
  910. .highlight span {
  911. color:var(--TopLinks-Background)!important;
  912. }
  913. /*------*/
  914.  
  915. /*--------- RIGHT INFO BOX ---------*/
  916. .info-box {
  917. margin-left:var(--InfoBox-Left-Gap);
  918. flex:1;
  919. -ms-flex:1;
  920. box-shadow:3px 3px 0px var(--InfoBox-Shadow-Color);
  921. }
  922.  
  923. .koi {
  924. display:table;
  925. width:100%;
  926. height:100%;
  927. }
  928.  
  929. .box-title {
  930. display:flex;
  931. align-items:center;
  932. padding:var(--InfoBox-Title-Padding);
  933. background:var(--InfoBox-Title-Background);
  934. }
  935.  
  936. .boxkun {
  937. margin-right:var(--InfoBox-Title-Square-Right-Gap);
  938. width:var(--InfoBox-Title-Font-Size);
  939. height:var(--InfoBox-Title-Font-Size);
  940. background:var(--InfoBox-Title-Color);
  941. }
  942.  
  943. .title-text {
  944. margin-top:-1px;
  945. white-space:nowrap;
  946. }
  947.  
  948. .title-text span {
  949. font-family:darker grotesque;
  950. font-weight:500;
  951. font-size:var(--InfoBox-Title-Font-Size);
  952. text-transform:uppercase;
  953. letter-spacing:1.3px;
  954. color:var(--InfoBox-Title-Color);
  955. line-height:1em;
  956. display:none;
  957. }
  958.  
  959. .title-text span:first-child {display:block;}
  960.  
  961. .baskingshark {
  962. display:table-row;
  963. height:100%;
  964. }
  965.  
  966. .oilsardine {
  967. position:relative;
  968. width:100%;
  969. height:100%;
  970. background:var(--InfoBox-Background);
  971. display:table;
  972. }
  973.  
  974. .theres-only-soup {
  975. display:flex;
  976. align-items:center;
  977. padding-top:calc(var(--InfoBox-Border-Size) * 6);
  978. margin-left:calc(var(--InfoBox-Border-Size) * 6);
  979. margin-bottom:calc(var(--InfoBox-Border-Size) * 6);
  980. width:calc(100% - (var(--InfoBox-Border-Size) * 12));
  981. }
  982.  
  983. .why-are-you-buying-clothes {
  984. width:100%;
  985. height:var(--InfoBox-Border-Size);
  986. background:var(--InfoBox-Border-Color);
  987. }
  988.  
  989. .at-the-soup-store {
  990. margin-left:calc(var(--InfoBox-Border-Size) * 4);
  991. width:calc(var(--InfoBox-Border-Size) * 2);
  992. height:calc(var(--InfoBox-Border-Size) * 2);
  993. background:var(--InfoBox-Border-Color);
  994. border-radius:100%;
  995. }
  996.  
  997. .theres-more-soup {
  998. display:flex;
  999. align-items:center;
  1000. position:absolute;
  1001. bottom:0;margin-bottom:calc(var(--InfoBox-Border-Size) * 6);
  1002. margin-left:calc(var(--InfoBox-Border-Size) * 6);
  1003. width:calc(100% - (var(--InfoBox-Border-Size) * 12));
  1004. }
  1005.  
  1006. /*--------- INFO BOX IMAGE ---------*/
  1007. .arctic-char {
  1008. position:relative;
  1009. display:table-row;
  1010. width:100%;
  1011. height:100%;
  1012. }
  1013.  
  1014. .flounder {
  1015. position:absolute;
  1016. display:flex;
  1017. margin-left:calc(var(--InfoBox-Border-Size) * 6);
  1018. width:calc(100% - (var(--InfoBox-Border-Size) * 12));
  1019. height:calc(100% - (var(--InfoBox-Border-Size) * 14)); /* was 28 */
  1020. }
  1021.  
  1022. .image-container {
  1023. position:relative;
  1024. display:flex;
  1025. align-items:center;
  1026. justify-content:center;
  1027. margin-left:calc(var(--InfoBox-Border-Size) * 3);
  1028. width:var(--InfoBox-Image-Container-Width);
  1029. height:100%;
  1030. background-image:url(https://rhizo.gitlab.io/nier0/subtlepatterns_prism.png);
  1031. background-repeat:repeat;
  1032. background-position:center;
  1033. overflow:hidden;
  1034. }
  1035.  
  1036. .img-vignette {
  1037. box-shadow:0 0 var(--InfoBox-Image-Vignette-Size) var(--InfoBox-Image-Vignette-Color) inset;
  1038. }
  1039.  
  1040. .character-image {
  1041. position:absolute;
  1042. max-height:100%;
  1043. display:none;
  1044. -webkit-user-select:none;
  1045. -moz-user-select:none;
  1046. -ms-user-select:none;
  1047. user-select:none;
  1048. }
  1049.  
  1050. .info-text {
  1051. margin-left:var(--InfoBox-Text-Left-Gap);
  1052. margin-right:calc(var(--InfoBox-Border-Size) * -5.5);
  1053. font-family:Rubik;
  1054. font-size:var(--InfoBox-Text-Font-Size);
  1055. letter-spacing:0.3px;
  1056. width:calc(100% - var(--InfoBox-Image-Container-Width));
  1057. height:100%;
  1058. color:var(--InfoBox-Text-Color);
  1059. line-height:1.73em;
  1060. text-align:justify;
  1061. overflow-y:auto;
  1062. overflow-x:hidden;
  1063. padding-right:calc(var(--InfoBox-Border-Size) * 3);
  1064. opacity:0;
  1065. }
  1066.  
  1067. .opacity {
  1068. opacity:1!important;
  1069. }
  1070.  
  1071. .info-text, .opacity {
  1072. transition:opacity var(--Switch-Fade-Speed) ease-in-out;
  1073. }
  1074.  
  1075. .info-text::-webkit-scrollbar {
  1076. width:calc(((var(--InfoBox-Border-Size) * 6) * 2) + 2px);
  1077. height:calc(((var(--InfoBox-Border-Size) * 6) * 2) + 2px);
  1078. background-color:var(--InfoBox-Background);
  1079. }
  1080.  
  1081. .info-text::-webkit-scrollbar-thumb {
  1082. border-left:calc(var(--InfoBox-Border-Size) * 6) solid var(--InfoBox-Background);
  1083. border-right:calc(var(--InfoBox-Border-Size) * 6) solid var(--InfoBox-Background);
  1084. background-color:var(--InfoBox-Scrollbar-Color);
  1085. }
  1086.  
  1087. .bio-text {
  1088. display:none;
  1089. padding-top:3px;
  1090. }
  1091.  
  1092. .bio-text:first-of-type {display:block;}
  1093.  
  1094. .bio-text table {
  1095. border-spacing:0 var(--InfoBox-Bullet-Row-Spacing);
  1096. margin:calc(var(--InfoBox-Bullet-Row-Spacing) * -1) 0;
  1097. line-height:1.69em;
  1098. }
  1099.  
  1100. .bio-text .curse {
  1101. margin-top:calc(((((var(--InfoBox-Text-Font-Size) - 2.5px) * 1.69) + 2px) - var(--InfoBox-Bullet-Icon-Size)) / 2);
  1102. margin-right:calc(var(--Info-Bullet-Text-Spacing) * -0.25);
  1103. width:var(--InfoBox-Bullet-Icon-Size);
  1104. height:var(--InfoBox-Bullet-Icon-Size);
  1105. }
  1106.  
  1107. .bio-text td {
  1108. padding-right:var(--InfoBox-Bullet-Text-Spacing);
  1109. vertical-align:top;
  1110. }
  1111.  
  1112. .bio-text td[label] {
  1113. padding-top:2px;
  1114. font-family:inter;
  1115. font-weight:500;
  1116. text-transform:uppercase;
  1117. letter-spacing:1px;
  1118. font-size:calc(var(--InfoBox-Text-Font-Size) - 2.5px);
  1119. }
  1120.  
  1121. .bio-text td:last-of-type {padding-right:0;}
  1122.  
  1123. .bio-text special {
  1124. display:inline-block;
  1125. margin:0 2px;
  1126. padding:1.5px 7px;
  1127. background:var(--Special-Text-Background);
  1128. font-family:inter;
  1129. font-weight:400;
  1130. font-size:calc(var(--InfoBox-Text-Font-Size) - 1.5px);
  1131. text-transform:uppercase;
  1132. letter-spacing:1px;
  1133. color:var(--Special-Text);
  1134. }
  1135.  
  1136. .bio-text blockquote {
  1137. margin:0;
  1138. padding-left:calc(var(--InfoBox-Border-Size) * 8);
  1139. border-left:var(--InfoBox-Border-Size) solid var(--InfoBox-Border-Color);
  1140. }
  1141.  
  1142. .bio-text a {
  1143. padding-bottom:1px;
  1144. border-bottom:1px solid var(--InfoBox-Border-Color);
  1145. color:var(--InfoBox-Text-Links);
  1146. }
  1147.  
  1148. .bio-text p:last-of-type {margin-bottom:0}
  1149.  
  1150. /*----------------*/
  1151.  
  1152. </style>
  1153.  
  1154. </head>
  1155.  
  1156. <body>
  1157. <!-- if you don't want the background circles & lines, -->
  1158. <!-- delete starting from here -->
  1159. <div class="shrimp"></div>
  1160. <div class="scampi"></div>
  1161. <div class="clam"></div>
  1162. <div class="prawn"></div>
  1163. <div class="haddock"></div>
  1164.  
  1165. <div class="carp"></div>
  1166. <div class="crayfish"></div>
  1167. <div class="perch"></div>
  1168. <div class="lamprey"></div>
  1169. <div class="unagi"></div>
  1170. <!-- to here-->
  1171.  
  1172.  
  1173. <div class="decoline-top">
  1174. <div class="halibut">
  1175. <div class="tilapia"></div>
  1176.  
  1177. <div class="toplinks">
  1178.  
  1179. <!--------- TOP LINKS / CUSTOM LINKS --------->
  1180. <!-- 🍅🍅🍅🍅🍅🍅🍅 -->
  1181. <!--
  1182. • grey notes indicated start and end of a link
  1183. • link URL goes between quote marks of href=""
  1184.  
  1185. • to change the icon, go to: honeybeeicons.gitlab.io/backup/icons-list
  1186. select one that you like. copy the name
  1187. replace it with e.g.: home-o
  1188. do not remove the hyphen (-) after the 2nd "th"
  1189.  
  1190. • link display text goes between <span> and </span>
  1191. • please do not remove the credit! *\^o^)/°
  1192. -->
  1193.  
  1194. <!------- start of a link ------->
  1195. <!-- 👇👇👇👇👇👇👇 -->
  1196.  
  1197. <a href="/"> <!-- link url -->
  1198. <div class="curse"></div>
  1199. <i class="th th-home-o"></i> <!-- icon -->
  1200. <span>index</span> <!-- link text -->
  1201. </a>
  1202. <!------- end of a link ------->
  1203. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1204. <!--------------------->
  1205.  
  1206.  
  1207.  
  1208. <!------- start of a link ------->
  1209. <!-- 👇👇👇👇👇👇👇 -->
  1210.  
  1211. <a href="/ask"> <!-- link url -->
  1212. <div class="curse"></div>
  1213. <i class="th th-envelope-o"></i> <!-- icon -->
  1214. <span>message</span> <!-- link text -->
  1215. </a>
  1216. <!------- end of a link ------->
  1217. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1218. <!--------------------->
  1219.  
  1220.  
  1221.  
  1222. <!------- start of a link ------->
  1223. <!-- 👇👇👇👇👇👇👇 -->
  1224.  
  1225. <a href="/archive"> <!-- link url -->
  1226. <div class="curse"></div>
  1227. <i class="th th-folder-3-o"></i> <!-- icon -->
  1228. <span>archive</span> <!-- link text -->
  1229. </a>
  1230. <!------- end of a link ------->
  1231. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1232. <!--------------------->
  1233.  
  1234.  
  1235.  
  1236. <!-- if you want to add links, pls put them before the credit! -->
  1237.  
  1238. <a href="//glenthemes.tumblr.com" title="coded by glenthemes">
  1239. <div class="curse"></div>
  1240. <i class="th th-settings-o"></i>
  1241. <span>credit</span>
  1242. </a>
  1243. </div><!--toplinks-->
  1244. </div><!--halibut-->
  1245.  
  1246. <div class="une-biere"></div>
  1247. <div class="mackerel">
  1248. <div class="sauce">
  1249. <div class="bestfish">
  1250. <span>∵</span><span>∵</span><span>∵</span><span>∵</span><span>∵</span>
  1251. <span>∵</span><span>∵</span><span>∵</span><span>∵</span><span>∵</span>
  1252. <span>∵</span><span>∵</span><span>∵</span><span>∵</span><span>∵</span>
  1253. <span>∵</span><span>∵</span><span>∵</span><span>∵</span><span>∵</span>
  1254. <span>∵</span><span>∵</span><span>∵</span>
  1255. </div>
  1256. </div><!--sauce-->
  1257. </div><!--mackerel-->
  1258. </div><!--decoline-top-->
  1259.  
  1260.  
  1261. <div id="le-main">
  1262. <div class="main-title">
  1263.  
  1264. <!------- MAIN TITLE (TOP LEFT) ------->
  1265. <!-- title does NOT change with character -->
  1266. <!-- 🍅🍅🍅🍅🍅🍅🍅 -->
  1267.  
  1268. <div class="large">glory to mankind</div> <!-- larger text -->
  1269. <div class="hyphen"></div>
  1270. <div class="smaller">unit data</div> <!-- smaller text after hyphen -->
  1271.  
  1272. </div><!--do not delete this line-->
  1273.  
  1274.  
  1275.  
  1276. <div class="houh">
  1277. <div class="uhhh">
  1278. <div class="bigleftbar"></div>
  1279. <div class="leftbox">
  1280. <div class="imatsoup">
  1281. <div class="wait-its-all-soup"></div>
  1282. <div class="always-has-been"></div>
  1283. </div>
  1284.  
  1285. <div class="anchovy">
  1286. <div class="arowana">
  1287. <div class="charalist">
  1288.  
  1289. <!----- CHARACTER LIST (LEFT BOX) ----->
  1290. <!-- 🍅🍅🍅🍅🍅🍅🍅 -->
  1291. <!--
  1292. Instructions:
  1293. • each character needs their own ID
  1294. this is set between the quotation marks of:
  1295.  
  1296. character-id="THEIRNAME"
  1297.  
  1298. • this ID can be named anything (it doesn't have
  1299. to be numbers, but I just used numbers as an
  1300. example here), but keep in mind that you will
  1301. have to use it again later
  1302.  
  1303. • multiple characters cannot share the same ID;
  1304. the naming must be unique to each character.
  1305.  
  1306. • the ID will help you keep track of which
  1307. character you're editing, especially if you
  1308. have a lot of text later
  1309. -->
  1310.  
  1311.  
  1312. <!---- start a character name ---->
  1313. <!-- 👇👇👇👇👇👇👇 -->
  1314.  
  1315. <a character-id="1"> <!-- character ID -->
  1316. <div class="curse"></div>
  1317. <div class="box"></div>
  1318. <span>YoRHa No.2 Type B</span> <!-- character name -->
  1319. </a>
  1320. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1321. <!--------------------->
  1322. <!---- end a character name ---->
  1323.  
  1324.  
  1325.  
  1326.  
  1327. <!---- start a character name ---->
  1328. <!-- 👇👇👇👇👇👇👇 -->
  1329.  
  1330. <a character-id="2"> <!-- character ID -->
  1331. <div class="curse"></div>
  1332. <div class="box"></div>
  1333. <span>YoRHa No.9 Type S</span> <!-- character name -->
  1334. </a>
  1335. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1336. <!--------------------->
  1337. <!---- end a character name ---->
  1338.  
  1339.  
  1340.  
  1341.  
  1342. <!---- start a character name ---->
  1343. <!-- 👇👇👇👇👇👇👇 -->
  1344.  
  1345. <a character-id="3"> <!-- character ID -->
  1346. <div class="curse"></div>
  1347. <div class="box"></div>
  1348. <span>YoRHa Type A No. 2</span> <!-- character name -->
  1349. </a>
  1350. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1351. <!--------------------->
  1352. <!---- end a character name ---->
  1353.  
  1354.  
  1355.  
  1356.  
  1357. <!---- start a character name ---->
  1358. <!-- 👇👇👇👇👇👇👇 -->
  1359.  
  1360. <a character-id="4"> <!-- character ID -->
  1361. <div class="curse"></div>
  1362. <div class="box"></div>
  1363. <span>Mackerel</span> <!-- character name -->
  1364. </a>
  1365. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1366. <!--------------------->
  1367. <!---- end a character name ---->
  1368.  
  1369.  
  1370. </div><!--end charalist--><!--do not delete this line-->
  1371. </div><!--do not delete this line-->
  1372. </div><!--do not delete this line-->
  1373.  
  1374.  
  1375. <div class="tomatoe">
  1376. <div class="wait-its-all-soup"></div>
  1377. <div class="always-has-been"></div>
  1378. </div>
  1379. </div><!--charalist-->
  1380.  
  1381.  
  1382.  
  1383.  
  1384.  
  1385. <!-------- CHARACTER INFO BOX (RIGHT BOX) -------->
  1386. <div class="info-box">
  1387. <div class="koi">
  1388. <div class="box-title">
  1389. <div class="boxkun"></div>
  1390.  
  1391. <div class="title-text">
  1392.  
  1393. <!------- CHARACTER NAME ------->
  1394. <!-- (right box) -->
  1395. <!-- 🍅🍅🍅🍅🍅🍅🍅 -->
  1396.  
  1397. <!--
  1398. • use the character-id="" that you assigned earlier
  1399. • text just before </span> is the display text
  1400. -->
  1401.  
  1402. <span character-id="1">YoRHa No.2 Type B</span>
  1403. <span character-id="2">YoRHa No.9 Type S</span>
  1404. <span character-id="3">YoRHa Type A No.2</span>
  1405. <span character-id="4">Mackerel</span>
  1406.  
  1407. </div><!--title-text-->
  1408. </div><!--box-title-->
  1409.  
  1410.  
  1411.  
  1412. <div class="baskingshark">
  1413. <div class="oilsardine">
  1414. <div class="theres-only-soup">
  1415. <div class="why-are-you-buying-clothes"></div>
  1416. <div class="at-the-soup-store"></div>
  1417. </div>
  1418.  
  1419.  
  1420.  
  1421. <div class="arctic-char">
  1422. <div class="flounder">
  1423. <div class="image-container">
  1424.  
  1425. <!-------- CHARACTER IMAGES -------->
  1426. <!-- 🍅🍅🍅🍅🍅🍅🍅 -->
  1427. <!--
  1428. ⭐ LEGEND: -------------------------------------------
  1429.  
  1430. • character-id="..." <-- ID assigned from earlier
  1431.  
  1432. • class="character-image" <-- don't touch this line
  1433.  
  1434. • src="..." <-- image URL
  1435.  
  1436. • type="full_sized" <-- if your image is a full-sized
  1437. image, and you want it to fill
  1438. up the container.
  1439.  
  1440. remove if your image is a
  1441. transparent render
  1442.  
  1443. ⭐ POSITIONING --------------------------------------
  1444.  
  1445. • top <-- image aligns to the top
  1446. • top="10px" <-- image shifts from the top by 10px
  1447. (10px is just an example)
  1448.  
  1449. • bottom <-- image aligns to the bottom
  1450. • bottom="10px" <-- image shift from bottom by 10px
  1451. (10px is just an example)
  1452.  
  1453. • same goes for left & right
  1454.  
  1455. --------------------------------------
  1456.  
  1457. • width="70%" <-- image is 70% of container width
  1458. (70% is just an example)
  1459.  
  1460. usually if you put a height, the
  1461. width doesn't need to be specified
  1462.  
  1463. • height="70%" <-- image is 70% of container height
  1464. (70% is just an example)
  1465.  
  1466. usually if you put a width, the
  1467. height doesn't need to be specified
  1468.  
  1469. --------------------------------------
  1470.  
  1471. • you can also do a combination of positions, like:
  1472.  
  1473. top left
  1474. bottom right
  1475.  
  1476. just make sure they're separated with a space.
  1477.  
  1478. ⭐ KEEP IN MIND -------------------------------------
  1479.  
  1480. • all images are automatically centered
  1481.  
  1482. • adding positions isn't necessary but you can add
  1483. these adjustments if you like
  1484.  
  1485. • be careful not to leave any quotation marks open
  1486. • don't remove the pointy bracket at the end: >
  1487.  
  1488.  
  1489. -->
  1490. <!-- 🍅🍅🍅🍅🍅🍅🍅 -->
  1491.  
  1492.  
  1493.  
  1494.  
  1495. <!---- start a character image ---->
  1496. <!-- 👇👇👇👇👇👇👇 -->
  1497.  
  1498. <img character-id="1"
  1499. class="character-image" src="https://rhizo.gitlab.io/nier0/2B.jpeg" type="full_sized" top>
  1500.  
  1501. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1502. <!----------------------->
  1503. <!---- end a character image ---->
  1504.  
  1505.  
  1506.  
  1507.  
  1508.  
  1509.  
  1510. <!---- start a character image ---->
  1511. <!-- 👇👇👇👇👇👇👇 -->
  1512.  
  1513. <img character-id="2"
  1514. class="character-image" src="https://rhizo.gitlab.io/nier0/9S.jpeg" type="full_sized" right>
  1515.  
  1516. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1517. <!----------------------->
  1518. <!---- end a character image ---->
  1519.  
  1520.  
  1521.  
  1522.  
  1523.  
  1524.  
  1525. <!---- start a character image ---->
  1526. <!-- 👇👇👇👇👇👇👇 -->
  1527.  
  1528. <img character-id="3"
  1529. class="character-image" src="https://rhizo.gitlab.io/nier0/A2.jpeg" type="full_sized" left="69px">
  1530.  
  1531. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1532. <!----------------------->
  1533. <!---- end a character image ---->
  1534.  
  1535.  
  1536.  
  1537.  
  1538.  
  1539. <!---- start a character image ---->
  1540. <!-- 👇👇👇👇👇👇👇 -->
  1541.  
  1542.  
  1543. <img character-id="4"
  1544. class="character-image" src="https://rhizo.gitlab.io/nier0/mackerel.png" height="36%">
  1545.  
  1546. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1547. <!----------------------->
  1548. <!---- end a character image ---->
  1549.  
  1550.  
  1551. </div><!--image-container-->
  1552.  
  1553.  
  1554.  
  1555.  
  1556.  
  1557.  
  1558. <div class="info-text">
  1559. <!------- CHARACTER BIOGRAPHY TEXT ------->
  1560. <!-- 🍅🍅🍅🍅🍅🍅🍅 -->
  1561. <!--
  1562. • for character-id="", insert what you had assigned
  1563. previously for the same character
  1564.  
  1565. • I've included the structure of 3 bullet point rows,
  1566. followed by long main text, but you don't have to
  1567. do this for every character
  1568.  
  1569. • feel free to add/delete rows as fit
  1570.  
  1571. • remember to change the character-id at the start
  1572. if you add more charaters!
  1573.  
  1574. ---------------------------------------
  1575.  
  1576. • <p> is a paragraph break
  1577. • <br> is a line break
  1578. -->
  1579.  
  1580.  
  1581. <!------ START A CHARACTER'S INFO ------>
  1582. <!-- 👇👇👇👇👇👇👇 -->
  1583.  
  1584. <div character-id="1" class="bio-text">
  1585. <!---- start bullet points ---->
  1586. <table>
  1587. <!-- 👇 start one row -->
  1588. <tr>
  1589. <td><div class="curse"></div>
  1590. <td label>label text
  1591. <td>detail text
  1592. </tr>
  1593. <!-- ⏹️ end one row -->
  1594.  
  1595.  
  1596. <!-- 👇 start one row -->
  1597. <tr>
  1598. <td><div class="curse"></div>
  1599. <td label>label text
  1600. <td>detail text
  1601. </tr>
  1602. <!-- ⏹️ end one row -->
  1603.  
  1604.  
  1605. <!-- 👇 start one row -->
  1606. <tr>
  1607. <td><div class="curse"></div>
  1608. <td label>label text
  1609. <td>detail text
  1610. </tr>
  1611. <!-- ⏹️ end one row -->
  1612. </table>
  1613. <!---- end bullet points ---->
  1614.  
  1615. <p>
  1616.  
  1617. This character is <special>awesome</special>!
  1618.  
  1619. </div><!--do not delete this line-->
  1620. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1621.  
  1622. <!------ END A CHARACTER'S INFO ------>
  1623.  
  1624.  
  1625.  
  1626.  
  1627.  
  1628.  
  1629.  
  1630.  
  1631.  
  1632. <!------ START A CHARACTER'S INFO ------>
  1633. <!-- 👇👇👇👇👇👇👇 -->
  1634.  
  1635. <div character-id="2" class="bio-text">
  1636. <!---- start bullet points ---->
  1637. <table>
  1638. <!-- 👇 start one row -->
  1639. <tr>
  1640. <td><div class="curse"></div>
  1641. <td label>label text
  1642. <td>detail text
  1643. </tr>
  1644. <!-- ⏹️ end one row -->
  1645.  
  1646.  
  1647. <!-- 👇 start one row -->
  1648. <tr>
  1649. <td><div class="curse"></div>
  1650. <td label>label text
  1651. <td>detail text
  1652. </tr>
  1653. <!-- ⏹️ end one row -->
  1654.  
  1655.  
  1656. <!-- 👇 start one row -->
  1657. <tr>
  1658. <td><div class="curse"></div>
  1659. <td label>label text
  1660. <td>detail text
  1661. </tr>
  1662. <!-- ⏹️ end one row -->
  1663. </table>
  1664. <!---- end bullet points ---->
  1665.  
  1666. <p>
  1667.  
  1668. This character is <special>awesome</special>!
  1669.  
  1670. </div><!--do not delete this line-->
  1671. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1672.  
  1673. <!------ END A CHARACTER'S INFO ------>
  1674.  
  1675.  
  1676.  
  1677.  
  1678.  
  1679.  
  1680.  
  1681.  
  1682.  
  1683. <!------ START A CHARACTER'S INFO ------>
  1684. <!-- 👇👇👇👇👇👇👇 -->
  1685.  
  1686. <div character-id="3" class="bio-text">
  1687. <!---- start bullet points ---->
  1688. <table>
  1689. <!-- 👇 start one row -->
  1690. <tr>
  1691. <td><div class="curse"></div>
  1692. <td label>label text
  1693. <td>detail text
  1694. </tr>
  1695. <!-- ⏹️ end one row -->
  1696.  
  1697.  
  1698. <!-- 👇 start one row -->
  1699. <tr>
  1700. <td><div class="curse"></div>
  1701. <td label>label text
  1702. <td>detail text
  1703. </tr>
  1704. <!-- ⏹️ end one row -->
  1705.  
  1706.  
  1707. <!-- 👇 start one row -->
  1708. <tr>
  1709. <td><div class="curse"></div>
  1710. <td label>label text
  1711. <td>detail text
  1712. </tr>
  1713. <!-- ⏹️ end one row -->
  1714. </table>
  1715. <!---- end bullet points ---->
  1716.  
  1717. <p>
  1718.  
  1719. This character is <special>awesome</special>!
  1720.  
  1721. </div><!--do not delete this line-->
  1722. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1723.  
  1724. <!------ END A CHARACTER'S INFO ------>
  1725.  
  1726.  
  1727.  
  1728.  
  1729.  
  1730.  
  1731.  
  1732.  
  1733.  
  1734. <!------ START A CHARACTER'S INFO ------>
  1735. <!-- 👇👇👇👇👇👇👇 -->
  1736.  
  1737. <div character-id="4" class="bio-text">
  1738. <!---- start bullet points ---->
  1739. <table>
  1740. <!-- 👇 start one row -->
  1741. <tr>
  1742. <td><div class="curse"></div>
  1743. <td label>label text
  1744. <td>detail text
  1745. </tr>
  1746. <!-- ⏹️ end one row -->
  1747.  
  1748.  
  1749. <!-- 👇 start one row -->
  1750. <tr>
  1751. <td><div class="curse"></div>
  1752. <td label>label text
  1753. <td>detail text
  1754. </tr>
  1755. <!-- ⏹️ end one row -->
  1756.  
  1757.  
  1758. <!-- 👇 start one row -->
  1759. <tr>
  1760. <td><div class="curse"></div>
  1761. <td label>label text
  1762. <td>detail text
  1763. </tr>
  1764. <!-- ⏹️ end one row -->
  1765. </table>
  1766. <!---- end bullet points ---->
  1767.  
  1768. <p>
  1769.  
  1770. This character is <special>awesome</special>!
  1771.  
  1772. </div><!--do not delete this line-->
  1773. <!-- ⏹️⏹️⏹️⏹️⏹️⏹️⏹️ -->
  1774.  
  1775. <!------ END A CHARACTER'S INFO ------>
  1776.  
  1777.  
  1778.  
  1779.  
  1780.  
  1781.  
  1782.  
  1783.  
  1784. </div><!--end all text--><!--don't remove this line-->
  1785. <!--do not delete below this line-->
  1786. </div><!--flounder-->
  1787. </div><!--arctic-char-->
  1788.  
  1789. <div class="theres-more-soup">
  1790. <div class="why-are-you-buying-clothes"></div>
  1791. <div class="at-the-soup-store"></div>
  1792. </div>
  1793. </div><!--oilsardine-->
  1794. </div><!--baskingshark-->
  1795.  
  1796. </div><!--koi-->
  1797. </div><!--info-box-->
  1798. </div><!--uhhh-->
  1799. </div><!--houh-->
  1800. </div><!--le-main-->
  1801.  
  1802.  
  1803. <div class="decoline-bot">
  1804. <div class="une-biere"></div>
  1805. <div class="4">
  1806. <div class="sauce">
  1807. <div class="bestfish">
  1808. <span>∵</span><span>∵</span><span>∵</span><span>∵</span><span>∵</span>
  1809. <span>∵</span><span>∵</span><span>∵</span><span>∵</span><span>∵</span>
  1810. <span>∵</span><span>∵</span><span>∵</span><span>∵</span><span>∵</span>
  1811. <span>∵</span><span>∵</span><span>∵</span><span>∵</span><span>∵</span>
  1812. <span>∵</span><span>∵</span><span>∵</span>
  1813. </div>
  1814. </div>
  1815. </div>
  1816. </div>
  1817.  
  1818.  
  1819. <div id="ohnines"></div>
  1820. <div id="pod069"></div>
  1821.  
  1822. </body>
  1823.  
  1824. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!