API tools faq
paste
Advertisement
glenthemes

Character Page [06]: Raison D'être

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