API tools faq
paste
glenthemes

FAQ Page [01]

glenthemes
Apr 7th, 2019 (edited)
4,458
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.92 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------
  2. FAQ Page [01]
  3. Made by glenthemes
  4.  
  5. Initial release: 2019/04/08
  6. Last updated: 2023/10/17
  7.  
  8. What's new:
  9. ✱ cleaned up the code a little
  10. ✱ new guide!
  11.  
  12. TERMS OF USE:
  13. 1) Do not remove the page credit.
  14. 2) Do not repost/redistribute my themes.
  15. 3) Do not take parts of the code and use it as your own.
  16. 4) Do not use my themes as a base code.
  17. 5) Do not mix my themes together.
  18.  
  19. Please read the guide!
  20. ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
  21. https://docs.google.com/presentation/d/1GCoSQkmeSqPe4sgVbh6attsJ8q064Z-pIzJHBQWexSQ/edit?usp=sharing
  22. ------------------------------------------------------------------->
  23.  
  24. <!DOCTYPE html>
  25. <html lang="en">
  26.  
  27. <head>
  28.  
  29. <title>{Title}</title>
  30.  
  31. <link rel="shortcut icon" href="{Favicon}">
  32.  
  33. <!--------------------JAVASCRIPTS-------------------->
  34. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  35. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  36. <script>
  37. (function($){
  38. $(document).ready(function(){
  39. $("a[title]").style_my_tooltips({
  40. tip_follows_cursor:true,
  41. tip_delay_time:0,
  42. tip_fade_speed:250,
  43. attribute:"title"
  44. });
  45. });
  46. })(jQuery);
  47. </script>
  48.  
  49. <link href="https://fonts.googleapis.com/css?family=Inconsolata|Tenor+Sans|Chivo+Mono:300" rel="stylesheet">
  50.  
  51. <script src="//static.tumblr.com/gtjt4bo/jxSs2cboc/glenplayer0.js"></script>
  52.  
  53. <script src="//glen-themes.gitlab.io/faq-pages/01/tears-of-nines.js"></script>
  54.  
  55. <!-------------------------------------------------------------------->
  56.  
  57. <style type="text/css">
  58.  
  59. @font-face { font-family: "canela"; src: url('//glen-assets.github.io/fonts/Canela-Regular-Web.ttf'); }
  60.  
  61. /*--------------------TOOLTIPS--------------------*/
  62. #s-m-t-tooltip {
  63. padding:5px 10px;
  64. margin:20px;
  65. background-color:var(--Tooltip-Background);
  66. border:1px solid var(--Tooltip-Border);
  67. font-family:"tenor sans";
  68. font-size:var(--Tooltip-Font-Size);
  69. letter-spacing:.5px;
  70. text-transform:uppercase;
  71. color:var(--Tooltip-Text-Color);
  72. z-index:99;
  73. max-width:40vw;
  74. }
  75.  
  76. /*--------------------TUMBLR CONTROLS--------------------*/
  77. iframe#tumblr_controls, .iframe-controls--desktop {
  78. top:8px!important;
  79. right:8px!important;
  80. position:fixed!important;
  81.  
  82. transform:scale(0.8,0.8);
  83. -webkit-transform:scale(0.8,0.8);
  84.  
  85. transform-origin:100% 0;
  86. opacity:0.9;
  87. z-index:999999!important;
  88. }
  89.  
  90. .tmblr-iframe--follow-teaser, .follow-teaser, .iframe-controls--phone-mobile, .tmblr-iframe--app-cta-button {
  91. display:none!important;
  92. visibility:hidden!important;
  93. height:0!important;
  94. }
  95.  
  96. /*--------------------SCROLLBAR--------------------*/
  97. ::-webkit-scrollbar {
  98. width:13px;
  99. height:13px;
  100. background-color:var(--Background);
  101. }
  102.  
  103. ::-webkit-scrollbar-thumb {
  104. border-top:8px solid var(--Background);
  105. border-right:6px solid var(--Background);
  106. border-bottom:8px solid var(--Background);
  107. border-left:6px solid var(--Background);
  108. background-color:var(--Scrollbar-Thumb);
  109. }
  110.  
  111. ::-webkit-scrollbar-track {
  112. border-top:8px solid var(--Background);
  113. border-right:6px solid var(--Background);
  114. border-bottom:8px solid var(--Background);
  115. border-left:6px solid var(--Background);
  116. background-color:var(--Scrollbar-Track);
  117. }
  118.  
  119. ::-webkit-scrollbar-corner {
  120. background:var(--Background);
  121. }
  122.  
  123. /*----------- CUSTOMIZATION OPTIONS -----------*/
  124. :root {
  125. --Background:#10121F;
  126.  
  127. --Screen-Margin:100px;
  128.  
  129. /*----- MAIN TITLE -----*/
  130. --Title-Size:21px;
  131. --Title-Color:#d8d4d6;
  132. --Title-Text-Shadow:#10121F;
  133. --Title-Side-Gaps:20px;
  134. --Title-Bottom-Gap:24px;
  135. --Title-Border:#d8d4d6;
  136.  
  137. /*----- Q&A CONTAINER -----*/
  138. --FAQ-Section-Top-Gap:80px;
  139. --Container-Width:650px;
  140.  
  141. /*----- QUESTIONS -----*/
  142. --Question-Top-Gap:30px;
  143. --Q:#BEB8BB;
  144. --Q-Size:22px;
  145. --Q-Text-Shadow:#10121F;
  146. --Question-Lines:#8F8A8C;
  147. --Question-Text:#BEB8BB;
  148. --Question-Text-Shadow:#10121F;
  149.  
  150. /*----- ANSWERS -----*/
  151. --Answer-Top-Gap:30px;
  152. --Answer-Lines:#8F8A8C;
  153. --Answer-Text:#BEB8BB;
  154. --Answer-Text-Shadow:#10121F;
  155. --A:#BEB8BB;
  156. --A-Size:22px;
  157. --A-Text-Shadow:#10121F;
  158.  
  159. /*----- TEXT FORMATTING -----*/
  160. --Bold:#e6c6a3;
  161. --Italic:#dabca4;
  162.  
  163. --Links:#c0b492;
  164. --Links-Underline:#666;
  165.  
  166. /*----- MUSIC PLAYER -----*/
  167. --Music-Player-Edge-Distance:20px;
  168. --Music-Player-Color:#BEB8BB;
  169. --Music-Player-Buttons-Size:10px;
  170. --Music-Player-Note-Icon-Size:12px;
  171. --Music-Player-Text-Size:11px;
  172. --Music-Player-Text-Shadow:#10121F;
  173. --Music-Player-Gaps:9px;
  174.  
  175. /*---- CUSTOM LINKS (LEFT) ----*/
  176. --Custom-Links-Font-Size:10px;
  177. --Custom-Links-Color:#BEB8BB;
  178.  
  179. /*----- SCROLLBAR -----*/
  180. /* doesn't work on firefox */
  181. --Scrollbar-Track:#393738;
  182. --Scrollbar-Thumb:#989395;
  183.  
  184. /*----- TOOLTIPS -----*/
  185. /* hover text */
  186. --Tooltip-Background:#10121F;
  187. --Tooltip-Border:#686466;
  188. --Tooltip-Font-Size:9px;
  189. --Tooltip-Text-Color:#BEB8BB;
  190. }
  191.  
  192. /*--------------------BASICS--------------------*/
  193. body {
  194. /*--- PAGE BACKGROUND COLOR ---*/
  195. background-color:#10121F;
  196.  
  197. /*--- PAGE BACKGROUND IMAGE ---*/
  198. background-image:url('//rhizo.gitlab.io/random/images/iMrKRSd.png');
  199. background-attachment:fixed;
  200. background-repeat:no-repeat;
  201. background-position:center;
  202. background-size:cover;
  203.  
  204. color:#888;
  205. cursor:normal;
  206. font-family:inconsolata;
  207. line-height:1.6em;
  208. font-size:12px;
  209. text-align:left;
  210. }
  211.  
  212. blockquote {
  213. padding-left:10px;
  214. margin-left:5px;
  215. border-left:1px solid;
  216. border-color:#aaa;
  217. margin:10px;
  218. }
  219.  
  220. a {
  221. color:var(--Links);
  222. text-decoration:none;
  223. }
  224.  
  225. a, .sq {
  226. -webkit-transition: all 0.4s ease-in-out;
  227. -moz-transition: all 0.4s ease-in-out;
  228. -o-transition: all 0.4s ease-in-out;
  229. }
  230.  
  231. a[title] > * {
  232. pointer-events:none;
  233. }
  234.  
  235. b, strong {
  236. color:var(--Bold);
  237. }
  238.  
  239. i, em {
  240. color:var(--Italic);
  241. }
  242.  
  243. pre, code {
  244. white-space:pre-wrap;
  245. display:block;
  246. }
  247.  
  248. p:first-child {margin-top:0px;}
  249. p:last-child {margin-bottom:0px;}
  250.  
  251. /*--------------------CONTAINER--------------------*/
  252. #cont-h-1 {
  253. position:absolute;
  254. top:0;left:0;right:0;
  255. margin:0 auto;
  256. height:100vh;
  257. text-align:center;
  258. }
  259.  
  260. #cont-h-2 {display:inline-block;}
  261.  
  262. #box {margin-top:var(--Screen-Margin);}
  263.  
  264. /*-----TITLE-----*/
  265. #title-wrap, #title {
  266. position:relative;
  267. }
  268.  
  269. #title-wrap {
  270. display:inline-block;
  271. padding:0 calc((var(--Title-Side-Gaps) * 2) + var(--Title-Size));
  272. }
  273.  
  274. #title-wrap:after {
  275. content:"";
  276. position:absolute;
  277. margin-bottom:calc(0px - var(--Title-Bottom-Gap));
  278. bottom:0;left:0;
  279. width:100%;
  280. height:1px;
  281. background:-webkit-linear-gradient(left, transparent 0%, var(--Title-Border) 50%, transparent 100%);
  282. }
  283.  
  284. #title {
  285. font-family:canela;
  286. font-size:var(--Title-Size);
  287. text-transform:uppercase;
  288. letter-spacing:3px;
  289. color:var(--Title-Color);
  290. text-shadow:1px 1px 1px var(--Title-Text-Shadow);
  291. }
  292.  
  293. #title:before {
  294. content:".:";
  295. position:absolute;
  296. right:100%;
  297. margin-right:var(--Title-Side-Gaps);
  298. bottom:0;
  299. }
  300.  
  301. #title:after {
  302. content:":.";
  303. position:absolute;
  304. left:100%;
  305. margin-left:var(--Title-Side-Gaps);
  306. bottom:0;
  307. }
  308.  
  309. /*-----Q&A MAIN CONTAINER-----*/
  310. #contwrap {
  311. padding-top:var(--Title-Bottom-Gap);
  312. margin-bottom:var(--FAQ-Section-Top-Gap);
  313. width:var(--Container-Width);
  314. }
  315.  
  316. #contwrap > .one-question {
  317. max-width:calc((var(--Container-Width) / 2) + 70px);
  318. }
  319.  
  320. #contwrap > .one-answer {
  321. width:calc((var(--Container-Width) / 2) + 70px);
  322. }
  323.  
  324. #contwrap a {
  325. color:var(--Links);
  326. padding-bottom:0.25em;
  327. border-bottom:1px solid var(--Links-Underline);
  328. }
  329.  
  330. /*-----QUESTION STYLING-----*/
  331. .one-question {
  332. margin-top:var(--Question-Top-Gap);
  333. display:flex;
  334. }
  335.  
  336. .q-marker {
  337. margin-top:12px;
  338. font-family:canela;
  339. text-transform:uppercase;
  340. font-size:var(--Q-Size);
  341. color:var(--Q);
  342. text-shadow:1px 1px 1px var(--Q-Text-Shadow);
  343. }
  344.  
  345. .q-marker[dot]:after {
  346. content:".";
  347. margin-left:5px;
  348. }
  349.  
  350. .line-beef {
  351. margin-top:22px;
  352. margin-left:14px;
  353. width:18px;
  354. height:2px;
  355. background:var(--Question-Lines);
  356. }
  357.  
  358. .q-wrap {display:table;}
  359.  
  360. .cherry {
  361. width:10px;
  362. border-top:2px solid var(--Question-Lines);
  363. border-bottom:2px solid var(--Question-Lines);
  364. border-left:2px solid var(--Question-Lines);
  365. display:table-cell;
  366.  
  367. }
  368.  
  369. .question {
  370. padding:12px 10px;
  371. font-family:inconsolata;
  372. font-size:13px;
  373. color:var(--Question-Text);
  374. text-shadow:1px 1px 1px var(--Question-Text-Shadow);
  375. line-height:1.8em;
  376. text-align:left;
  377. display:table-cell;
  378. }
  379.  
  380. .donut {
  381. width:10px;
  382. border-top:2px solid var(--Question-Lines);
  383. border-bottom:2px solid var(--Question-Lines);
  384. border-right:2px solid var(--Question-Lines);
  385. display:table-cell;
  386. }
  387.  
  388. /*-----ANSWER STYLING-----*/
  389. .one-answer {
  390. margin-top:var(--Answer-Top-Gap);
  391. margin-left:calc((var(--Container-Width) / 2) - 70px);
  392. display:flex;
  393. }
  394.  
  395. .a-wrap {
  396. display:table;
  397. width:100%;
  398. }
  399.  
  400. .pancake {
  401. width:10px;
  402. border-top:2px solid var(--Answer-Lines);
  403. border-bottom:2px solid var(--Answer-Lines);
  404. border-left:2px solid var(--Answer-Lines);
  405. display:table-cell;
  406. }
  407.  
  408. .answer {
  409. padding:12px 10px;
  410. font-family:inconsolata;
  411. font-size:13px;
  412. color:var(--Answer-Text);
  413. text-shadow:1px 1px 1px var(--Answer-Text-Shadow);
  414. line-height:1.8em;
  415. text-align:center;
  416. display:table-cell;
  417. }
  418.  
  419. .queen {
  420. width:10px;
  421. border-top:2px solid var(--Answer-Lines);
  422. border-bottom:2px solid var(--Answer-Lines);
  423. border-right:2px solid var(--Answer-Lines);
  424. display:table-cell;
  425. }
  426.  
  427. .line-beer {
  428. align-self:flex-end;
  429. -webkit-align-self:flex-end;
  430. margin-bottom:22px;
  431. margin-right:16px;
  432. width:18px;
  433. height:2px;
  434. background:var(--Answer-Lines);
  435. }
  436.  
  437. .a-marker {
  438. align-self:flex-end;
  439. -webkit-align-self:flex-end;
  440. margin-bottom:12px;
  441. font-family:canela;
  442. text-transform:uppercase;
  443. font-size:var(--A-Size);
  444. color:var(--A);
  445. text-shadow:1px 1px 1px var(--A-Text-Shadow);
  446. }
  447.  
  448. .a-marker[dot]:after {
  449. content:".";
  450. margin-left:5px;
  451. }
  452.  
  453. /*-----CUSTOM LINKS-----*/
  454. #cl-a {
  455. position:fixed;
  456. top:0;left:0;margin-left:5vw;
  457. height:100vh;
  458. display:table;
  459. z-index:9;
  460. }
  461.  
  462. #cl-b {
  463. display:table-cell;
  464. vertical-align:middle;
  465. }
  466.  
  467. .customlink {
  468. padding:10px 0;
  469. display:flex;
  470. color:var(--Custom-Links-Color);
  471. }
  472.  
  473. .sq {
  474. align-self:center;
  475. -webkit-align-self:center;
  476. width:10px;
  477. height:10px;
  478. border:1px solid var(--Custom-Links-Color);
  479. border-radius:3px;
  480. }
  481.  
  482. .customlink:hover .sq {background:var(--Custom-Links-Color);}
  483.  
  484. .sq-a {
  485. margin-left:15px;
  486. margin-top:1px;
  487. font-family:canela;
  488. text-transform:uppercase;
  489. font-size:var(--Custom-Links-Font-Size);
  490. letter-spacing:2px;
  491. }
  492.  
  493. /*-------MUSIC PLAYER-------*/
  494. [music-player]{
  495. position:fixed;
  496. bottom:0;margin-bottom:var(--Music-Player-Edge-Distance);
  497. left:0;margin-left:var(--Music-Player-Edge-Distance);
  498. color:var(--Music-Player-Color);
  499. z-index:10;
  500. }
  501.  
  502. .note-icon {
  503. transform:perspective(0);
  504. margin-top:-0.5px;
  505. }
  506.  
  507. .note-icon svg {
  508. display:block;
  509. width:var(--Music-Player-Note-Icon-Size);
  510. height:var(--Music-Player-Note-Icon-Size);
  511. line-height:0;
  512. }
  513.  
  514. .music-title {
  515. font-family:"Chivo Mono";
  516. font-size:var(--Music-Player-Text-Size);
  517. letter-spacing:.3px;
  518. text-shadow:1px 1px 1px var(--Music-Player-Text-Shadow);
  519. }
  520.  
  521. </style>
  522.  
  523. </head>
  524.  
  525. <body>
  526.  
  527. <div id="cl-a">
  528. <div id="cl-b">
  529.  
  530. <!-----CUSTOM LINKS----->
  531. <a class="customlink" href="/">
  532. index
  533. </a>
  534.  
  535. <a class="customlink" href="/ask">
  536. message
  537. </a>
  538.  
  539. <a class="customlink" href="/archive">
  540. archive
  541. </a>
  542.  
  543. <!--PAGE CREDIT. PLS DO NOT REMOVE TY! :)-->
  544. <a class="customlink" href="//glenthemes.tumblr.com" title="page by glenthemes">
  545. credit
  546. </a>
  547.  
  548. </div><!--cl-b--><!--do not delete this line-->
  549. </div><!--cl-a--><!--do not delete this line-->
  550.  
  551.  
  552.  
  553. <!-------MUSIC PLAYER------->
  554. <div music-player btn-color="var(--Music-Player-Color)" btn-size="var(--Music-Player-Buttons-Size)" gap="var(--Music-Player-Gaps)" btn-style="filled">
  555. <div music-btn>
  556. <div btn-play></div>
  557. <div btn-pause hidden></div>
  558. </div>
  559.  
  560. <!-----MUSIC PLAYER SONG FILE----->
  561. <!--READ THIS: linktr.ee/direct_file_links-->
  562. <audio src="https://rhizo.gitlab.io/nier/Sound_of_Crumbling_Lies.mp3" volume="100%" type="audio"></audio>
  563.  
  564. <div class="note-icon"></div>
  565.  
  566. <div class="music-title">
  567. <!-----MUSIC PLAYER TITLE----->
  568. Sound of Crumbling Lies
  569. </div>
  570.  
  571. </div><!--end music-player-->
  572.  
  573.  
  574.  
  575. <div id="cont-h-1">
  576. <div id="cont-h-2">
  577. <div id="box">
  578.  
  579. <div id="title-wrap">
  580. <div id="title">
  581.  
  582. <!-----MAIN TITLE----->
  583. Questions
  584.  
  585. </div>
  586. </div>
  587.  
  588. <div id="contwrap">
  589. <!-----QUESTIONS AND ANSWERS----->
  590.  
  591. <!-- start a question -->
  592. <div class="one-question">
  593. <div class="q-marker" dot>Q</div>
  594. <div class="question">
  595. This is a sample question.
  596. <br/> <!--line break-->
  597. <b>bold</b>
  598. <br/> <!--line break-->
  599. <i>italic</i>
  600. <br/> <!--line break-->
  601. <a href="https://images.google.com">sample link</a>
  602. </div><!--don't delete this line-->
  603. </div><!--end a question-->
  604.  
  605. <!-- start an answer -->
  606. <div class="one-answer">
  607. <div class="answer">
  608.  
  609. And this is an answer
  610.  
  611. </div><!--don't delete this line-->
  612.  
  613. <div class="a-marker" dot>A</div>
  614. </div><!--end an answer-->
  615.  
  616. <!--=========================================-->
  617.  
  618. <!-- start a question -->
  619. <div class="one-question">
  620. <div class="q-marker" dot>Q</div>
  621. <div class="question">
  622. This is a sample question.
  623. </div><!--don't delete this line-->
  624. </div><!--end a question-->
  625.  
  626. <!-- start an answer -->
  627. <div class="one-answer">
  628. <div class="answer">
  629. And this is an answer
  630. </div><!--don't delete this line-->
  631.  
  632. <div class="a-marker" dot>A</div>
  633. </div><!--end an answer-->
  634.  
  635. <!--=========================================-->
  636.  
  637. <!--do not delete below this line-->
  638. </div><!--contwrap-->
  639. </div><!--box-->
  640. </div><!--cont-h-2-->
  641. </div><!--cont-h-1-->
  642.  
  643.  
  644. </body>
  645. </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!