pages/faq-pages/01-faq

645 lines
14 KiB
Plaintext
Raw Permalink Normal View History

2023-10-17 20:36:38 +01:00
<!------------------------------------------------------------------
2022-07-22 04:20:18 +01:00
FAQ Page [01]
Made by glenthemes
Initial release: 2019/04/08
2023-10-17 20:36:38 +01:00
Last updated: 2023/10/17
What's new:
✱ cleaned up the code a little
✱ new guide!
2022-07-22 04:20:18 +01:00
TERMS OF USE:
1) Do not remove the page credit.
2) Do not repost/redistribute my themes.
3) Do not take parts of the code and use it as your own.
4) Do not use my themes as a base code.
5) Do not mix my themes together.
Please read the guide!
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
2023-10-17 20:36:38 +01:00
https://docs.google.com/presentation/d/1GCoSQkmeSqPe4sgVbh6attsJ8q064Z-pIzJHBQWexSQ/edit?usp=sharing
------------------------------------------------------------------->
2022-07-22 04:20:18 +01:00
2023-05-13 00:29:51 +01:00
<!DOCTYPE html>
<html lang="en">
2022-07-22 04:20:18 +01:00
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<!--------------------JAVASCRIPTS-------------------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:250,
attribute:"title"
});
});
})(jQuery);
</script>
2023-10-17 20:36:38 +01:00
<link href="https://fonts.googleapis.com/css?family=Inconsolata|Tenor+Sans|Chivo+Mono:300" rel="stylesheet">
2022-07-22 04:20:18 +01:00
2023-10-17 20:36:38 +01:00
<script src="//static.tumblr.com/gtjt4bo/jxSs2cboc/glenplayer0.js"></script>
2022-07-22 04:20:18 +01:00
2023-10-17 20:36:38 +01:00
<script src="//glen-themes.gitlab.io/faq-pages/01/tears-of-nines.js"></script>
2022-07-22 04:20:18 +01:00
<!-------------------------------------------------------------------->
<style type="text/css">
@font-face { font-family: "canela"; src: url('//glen-assets.github.io/fonts/Canela-Regular-Web.ttf'); }
/*--------------------TOOLTIPS--------------------*/
#s-m-t-tooltip {
padding:5px 10px;
margin:20px;
background-color:var(--Tooltip-Background);
border:1px solid var(--Tooltip-Border);
2023-10-17 20:36:38 +01:00
font-family:"tenor sans";
font-size:var(--Tooltip-Font-Size);
letter-spacing:.5px;
2022-07-22 04:20:18 +01:00
text-transform:uppercase;
2023-10-17 20:36:38 +01:00
color:var(--Tooltip-Text-Color);
2022-07-22 04:20:18 +01:00
z-index:99;
max-width:40vw;
}
/*--------------------TUMBLR CONTROLS--------------------*/
iframe#tumblr_controls, .iframe-controls--desktop {
top:8px!important;
right:8px!important;
position:fixed!important;
transform:scale(0.8,0.8);
-webkit-transform:scale(0.8,0.8);
transform-origin:100% 0;
2023-10-17 20:36:38 +01:00
opacity:0.9;
2022-07-22 04:20:18 +01:00
z-index:999999!important;
}
2023-10-17 20:36:38 +01:00
.tmblr-iframe--follow-teaser, .follow-teaser, .iframe-controls--phone-mobile, .tmblr-iframe--app-cta-button {
display:none!important;
visibility:hidden!important;
height:0!important;
}
2022-07-22 04:20:18 +01:00
/*--------------------SCROLLBAR--------------------*/
::-webkit-scrollbar {
width:13px;
height:13px;
background-color:var(--Background);
}
::-webkit-scrollbar-thumb {
border-top:8px solid var(--Background);
border-right:6px solid var(--Background);
border-bottom:8px solid var(--Background);
border-left:6px solid var(--Background);
background-color:var(--Scrollbar-Thumb);
}
::-webkit-scrollbar-track {
border-top:8px solid var(--Background);
border-right:6px solid var(--Background);
border-bottom:8px solid var(--Background);
border-left:6px solid var(--Background);
background-color:var(--Scrollbar-Track);
}
2023-10-17 20:36:38 +01:00
::-webkit-scrollbar-corner {
background:var(--Background);
}
/*----------- CUSTOMIZATION OPTIONS -----------*/
2022-07-22 04:20:18 +01:00
:root {
--Background:#10121F;
2023-10-17 20:36:38 +01:00
--Screen-Margin:100px;
/*----- MAIN TITLE -----*/
--Title-Size:21px;
--Title-Color:#d8d4d6;
2022-07-22 04:20:18 +01:00
--Title-Text-Shadow:#10121F;
2023-10-17 20:36:38 +01:00
--Title-Side-Gaps:20px;
--Title-Bottom-Gap:24px;
2022-07-22 04:20:18 +01:00
--Title-Border:#d8d4d6;
2023-10-17 20:36:38 +01:00
/*----- Q&A CONTAINER -----*/
--FAQ-Section-Top-Gap:80px;
--Container-Width:650px;
/*----- QUESTIONS -----*/
--Question-Top-Gap:30px;
2022-07-22 04:20:18 +01:00
--Q:#BEB8BB;
2023-10-17 20:36:38 +01:00
--Q-Size:22px;
2022-07-22 04:20:18 +01:00
--Q-Text-Shadow:#10121F;
--Question-Lines:#8F8A8C;
--Question-Text:#BEB8BB;
--Question-Text-Shadow:#10121F;
2023-10-17 20:36:38 +01:00
/*----- ANSWERS -----*/
--Answer-Top-Gap:30px;
2022-07-22 04:20:18 +01:00
--Answer-Lines:#8F8A8C;
--Answer-Text:#BEB8BB;
--Answer-Text-Shadow:#10121F;
--A:#BEB8BB;
2023-10-17 20:36:38 +01:00
--A-Size:22px;
2022-07-22 04:20:18 +01:00
--A-Text-Shadow:#10121F;
2023-10-17 20:36:38 +01:00
/*----- TEXT FORMATTING -----*/
--Bold:#e6c6a3;
--Italic:#dabca4;
2022-07-22 04:20:18 +01:00
2023-10-17 20:36:38 +01:00
--Links:#c0b492;
--Links-Underline:#666;
/*----- MUSIC PLAYER -----*/
--Music-Player-Edge-Distance:20px;
--Music-Player-Color:#BEB8BB;
--Music-Player-Buttons-Size:10px;
--Music-Player-Note-Icon-Size:12px;
--Music-Player-Text-Size:11px;
--Music-Player-Text-Shadow:#10121F;
--Music-Player-Gaps:9px;
/*---- CUSTOM LINKS (LEFT) ----*/
--Custom-Links-Font-Size:10px;
--Custom-Links-Color:#BEB8BB;
/*----- SCROLLBAR -----*/
/* doesn't work on firefox */
2022-07-22 04:20:18 +01:00
--Scrollbar-Track:#393738;
--Scrollbar-Thumb:#989395;
2023-10-17 20:36:38 +01:00
/*----- TOOLTIPS -----*/
/* hover text */
2022-07-22 04:20:18 +01:00
--Tooltip-Background:#10121F;
2023-10-17 20:36:38 +01:00
--Tooltip-Border:#686466;
--Tooltip-Font-Size:9px;
--Tooltip-Text-Color:#BEB8BB;
2022-07-22 04:20:18 +01:00
}
/*--------------------BASICS--------------------*/
body {
2023-10-17 20:36:38 +01:00
/*--- PAGE BACKGROUND COLOR ---*/
background-color:#10121F;
/*--- PAGE BACKGROUND IMAGE ---*/
background-image:url('//rhizo.gitlab.io/random/images/iMrKRSd.png');
2022-07-22 04:20:18 +01:00
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
2023-10-17 20:36:38 +01:00
2022-07-22 04:20:18 +01:00
color:#888;
cursor:normal;
font-family:inconsolata;
line-height:1.6em;
font-size:12px;
text-align:left;
}
blockquote {
padding-left:10px;
margin-left:5px;
border-left:1px solid;
border-color:#aaa;
margin:10px;
}
a {
color:var(--Links);
text-decoration:none;
}
a, .sq {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
2023-10-17 20:36:38 +01:00
a[title] > * {
pointer-events:none;
}
2022-07-22 04:20:18 +01:00
b, strong {
2023-10-17 20:36:38 +01:00
color:var(--Bold);
2022-07-22 04:20:18 +01:00
}
2023-10-17 20:36:38 +01:00
i, em {
color:var(--Italic);
}
2022-07-22 04:20:18 +01:00
pre, code {
white-space:pre-wrap;
display:block;
}
2023-10-17 20:36:38 +01:00
p:first-child {margin-top:0px;}
2022-07-22 04:20:18 +01:00
p:last-child {margin-bottom:0px;}
/*--------------------CONTAINER--------------------*/
#cont-h-1 {
position:absolute;
top:0;left:0;right:0;
margin:0 auto;
height:100vh;
text-align:center;
}
#cont-h-2 {display:inline-block;}
2023-10-17 20:36:38 +01:00
#box {margin-top:var(--Screen-Margin);}
2022-07-22 04:20:18 +01:00
/*-----TITLE-----*/
2023-10-17 20:36:38 +01:00
#title-wrap, #title {
position:relative;
}
2022-07-22 04:20:18 +01:00
2023-10-17 20:36:38 +01:00
#title-wrap {
2022-07-22 04:20:18 +01:00
display:inline-block;
2023-10-17 20:36:38 +01:00
padding:0 calc((var(--Title-Side-Gaps) * 2) + var(--Title-Size));
}
#title-wrap:after {
content:"";
position:absolute;
margin-bottom:calc(0px - var(--Title-Bottom-Gap));
bottom:0;left:0;
width:100%;
height:1px;
background:-webkit-linear-gradient(left, transparent 0%, var(--Title-Border) 50%, transparent 100%);
}
#title {
2022-07-22 04:20:18 +01:00
font-family:canela;
2023-10-17 20:36:38 +01:00
font-size:var(--Title-Size);
2022-07-22 04:20:18 +01:00
text-transform:uppercase;
letter-spacing:3px;
2023-10-17 20:36:38 +01:00
color:var(--Title-Color);
2022-07-22 04:20:18 +01:00
text-shadow:1px 1px 1px var(--Title-Text-Shadow);
}
2023-10-17 20:36:38 +01:00
#title:before {
content:".:";
position:absolute;
right:100%;
margin-right:var(--Title-Side-Gaps);
bottom:0;
}
#title:after {
content:":.";
position:absolute;
left:100%;
margin-left:var(--Title-Side-Gaps);
bottom:0;
2022-07-22 04:20:18 +01:00
}
/*-----Q&A MAIN CONTAINER-----*/
#contwrap {
2023-10-17 20:36:38 +01:00
padding-top:var(--Title-Bottom-Gap);
margin-bottom:var(--FAQ-Section-Top-Gap);
width:var(--Container-Width);
2022-07-22 04:20:18 +01:00
}
#contwrap > .one-question {
2023-10-17 20:36:38 +01:00
max-width:calc((var(--Container-Width) / 2) + 70px);
2022-07-22 04:20:18 +01:00
}
#contwrap > .one-answer {
2023-10-17 20:36:38 +01:00
width:calc((var(--Container-Width) / 2) + 70px);
}
#contwrap a {
color:var(--Links);
padding-bottom:0.25em;
border-bottom:1px solid var(--Links-Underline);
2022-07-22 04:20:18 +01:00
}
/*-----QUESTION STYLING-----*/
.one-question {
2023-10-17 20:36:38 +01:00
margin-top:var(--Question-Top-Gap);
2022-07-22 04:20:18 +01:00
display:flex;
}
.q-marker {
margin-top:12px;
font-family:canela;
text-transform:uppercase;
2023-10-17 20:36:38 +01:00
font-size:var(--Q-Size);
2022-07-22 04:20:18 +01:00
color:var(--Q);
text-shadow:1px 1px 1px var(--Q-Text-Shadow);
}
2023-10-17 20:36:38 +01:00
.q-marker[dot]:after {
content:".";
margin-left:5px;
}
2022-07-22 04:20:18 +01:00
.line-beef {
margin-top:22px;
margin-left:14px;
width:18px;
height:2px;
background:var(--Question-Lines);
}
.q-wrap {display:table;}
.cherry {
width:10px;
border-top:2px solid var(--Question-Lines);
border-bottom:2px solid var(--Question-Lines);
border-left:2px solid var(--Question-Lines);
display:table-cell;
}
.question {
padding:12px 10px;
font-family:inconsolata;
font-size:13px;
color:var(--Question-Text);
text-shadow:1px 1px 1px var(--Question-Text-Shadow);
line-height:1.8em;
text-align:left;
display:table-cell;
}
.donut {
width:10px;
border-top:2px solid var(--Question-Lines);
border-bottom:2px solid var(--Question-Lines);
border-right:2px solid var(--Question-Lines);
display:table-cell;
}
/*-----ANSWER STYLING-----*/
.one-answer {
2023-10-17 20:36:38 +01:00
margin-top:var(--Answer-Top-Gap);
margin-left:calc((var(--Container-Width) / 2) - 70px);
2022-07-22 04:20:18 +01:00
display:flex;
}
.a-wrap {
display:table;
width:100%;
}
.pancake {
width:10px;
border-top:2px solid var(--Answer-Lines);
border-bottom:2px solid var(--Answer-Lines);
border-left:2px solid var(--Answer-Lines);
display:table-cell;
}
.answer {
padding:12px 10px;
font-family:inconsolata;
font-size:13px;
color:var(--Answer-Text);
text-shadow:1px 1px 1px var(--Answer-Text-Shadow);
line-height:1.8em;
text-align:center;
display:table-cell;
}
.queen {
width:10px;
border-top:2px solid var(--Answer-Lines);
border-bottom:2px solid var(--Answer-Lines);
border-right:2px solid var(--Answer-Lines);
display:table-cell;
}
.line-beer {
align-self:flex-end;
-webkit-align-self:flex-end;
margin-bottom:22px;
margin-right:16px;
width:18px;
height:2px;
background:var(--Answer-Lines);
}
.a-marker {
align-self:flex-end;
-webkit-align-self:flex-end;
margin-bottom:12px;
font-family:canela;
text-transform:uppercase;
2023-10-17 20:36:38 +01:00
font-size:var(--A-Size);
2022-07-22 04:20:18 +01:00
color:var(--A);
text-shadow:1px 1px 1px var(--A-Text-Shadow);
}
2023-10-17 20:36:38 +01:00
.a-marker[dot]:after {
content:".";
margin-left:5px;
}
2022-07-22 04:20:18 +01:00
/*-----CUSTOM LINKS-----*/
#cl-a {
position:fixed;
top:0;left:0;margin-left:5vw;
height:100vh;
display:table;
z-index:9;
}
#cl-b {
display:table-cell;
vertical-align:middle;
}
2023-10-17 20:36:38 +01:00
.customlink {
2022-07-22 04:20:18 +01:00
padding:10px 0;
display:flex;
2023-10-17 20:36:38 +01:00
color:var(--Custom-Links-Color);
2022-07-22 04:20:18 +01:00
}
.sq {
align-self:center;
-webkit-align-self:center;
width:10px;
height:10px;
2023-10-17 20:36:38 +01:00
border:1px solid var(--Custom-Links-Color);
2022-07-22 04:20:18 +01:00
border-radius:3px;
}
2023-10-17 20:36:38 +01:00
.customlink:hover .sq {background:var(--Custom-Links-Color);}
2022-07-22 04:20:18 +01:00
.sq-a {
margin-left:15px;
margin-top:1px;
font-family:canela;
text-transform:uppercase;
2023-10-17 20:36:38 +01:00
font-size:var(--Custom-Links-Font-Size);
2022-07-22 04:20:18 +01:00
letter-spacing:2px;
}
/*-------MUSIC PLAYER-------*/
2023-10-17 20:36:38 +01:00
[music-player]{
position:fixed;
bottom:0;margin-bottom:var(--Music-Player-Edge-Distance);
left:0;margin-left:var(--Music-Player-Edge-Distance);
color:var(--Music-Player-Color);
z-index:10;
2022-07-22 04:20:18 +01:00
}
2023-10-17 20:36:38 +01:00
.note-icon {
transform:perspective(0);
margin-top:-0.5px;
2022-07-22 04:20:18 +01:00
}
2023-10-17 20:36:38 +01:00
.note-icon svg {
display:block;
width:var(--Music-Player-Note-Icon-Size);
height:var(--Music-Player-Note-Icon-Size);
line-height:0;
2022-07-22 04:20:18 +01:00
}
2023-10-17 20:36:38 +01:00
.music-title {
font-family:"Chivo Mono";
font-size:var(--Music-Player-Text-Size);
letter-spacing:.3px;
text-shadow:1px 1px 1px var(--Music-Player-Text-Shadow);
2022-07-22 04:20:18 +01:00
}
</style>
</head>
<body>
<div id="cl-a">
<div id="cl-b">
<!-----CUSTOM LINKS----->
2023-10-17 20:36:38 +01:00
<a class="customlink" href="/">
index
</a>
2022-07-22 04:20:18 +01:00
2023-10-17 20:36:38 +01:00
<a class="customlink" href="/ask">
message
</a>
2022-07-22 04:20:18 +01:00
2023-10-17 20:36:38 +01:00
<a class="customlink" href="/archive">
archive
</a>
2022-07-22 04:20:18 +01:00
<!--PAGE CREDIT. PLS DO NOT REMOVE TY! :)-->
2023-10-17 20:36:38 +01:00
<a class="customlink" href="//glenthemes.tumblr.com" title="page by glenthemes">
credit
</a>
2022-07-22 04:20:18 +01:00
</div><!--cl-b--><!--do not delete this line-->
</div><!--cl-a--><!--do not delete this line-->
<!-------MUSIC PLAYER------->
2023-10-17 20:36:38 +01:00
<div music-player btn-color="var(--Music-Player-Color)" btn-size="var(--Music-Player-Buttons-Size)" gap="var(--Music-Player-Gaps)" btn-style="filled">
<div music-btn>
<div btn-play></div>
<div btn-pause hidden></div>
</div>
<!-----MUSIC PLAYER SONG FILE----->
<!--READ THIS: linktr.ee/direct_file_links-->
<audio src="https://rhizo.gitlab.io/nier/Sound_of_Crumbling_Lies.mp3" volume="100%" type="audio"></audio>
<div class="note-icon"></div>
<div class="music-title">
<!-----MUSIC PLAYER TITLE----->
Sound of Crumbling Lies
</div>
</div><!--end music-player-->
2022-07-22 04:20:18 +01:00
<div id="cont-h-1">
<div id="cont-h-2">
<div id="box">
2023-10-17 20:36:38 +01:00
<div id="title-wrap">
<div id="title">
<!-----MAIN TITLE----->
Questions
</div>
</div>
2022-07-22 04:20:18 +01:00
<div id="contwrap">
<!-----QUESTIONS AND ANSWERS----->
2023-10-17 20:36:38 +01:00
<!-- start a question -->
2022-07-22 04:20:18 +01:00
<div class="one-question">
2023-10-17 20:36:38 +01:00
<div class="q-marker" dot>Q</div>
<div class="question">
This is a sample question.
<br/> <!--line break-->
<b>bold</b>
<br/> <!--line break-->
<i>italic</i>
<br/> <!--line break-->
<a href="https://images.google.com">sample link</a>
</div><!--don't delete this line-->
</div><!--end a question-->
2022-07-22 04:20:18 +01:00
2023-10-17 20:36:38 +01:00
<!-- start an answer -->
2022-07-22 04:20:18 +01:00
<div class="one-answer">
2023-10-17 20:36:38 +01:00
<div class="answer">
And this is an answer
</div><!--don't delete this line-->
<div class="a-marker" dot>A</div>
</div><!--end an answer-->
<!--=========================================-->
2022-07-22 04:20:18 +01:00
2023-10-17 20:36:38 +01:00
<!-- start a question -->
2022-07-22 04:20:18 +01:00
<div class="one-question">
2023-10-17 20:36:38 +01:00
<div class="q-marker" dot>Q</div>
<div class="question">
This is a sample question.
</div><!--don't delete this line-->
</div><!--end a question-->
2022-07-22 04:20:18 +01:00
2023-10-17 20:36:38 +01:00
<!-- start an answer -->
2022-07-22 04:20:18 +01:00
<div class="one-answer">
2023-10-17 20:36:38 +01:00
<div class="answer">
And this is an answer
</div><!--don't delete this line-->
<div class="a-marker" dot>A</div>
</div><!--end an answer-->
<!--=========================================-->
2022-07-22 04:20:18 +01:00
<!--do not delete below this line-->
</div><!--contwrap-->
</div><!--box-->
</div><!--cont-h-2-->
</div><!--cont-h-1-->
</body>
</html>