₊⁺✿˚
This commit is contained in:
parent
235b9a70e9
commit
13121c918d
|
|
@ -0,0 +1,548 @@
|
|||
<!-----------------------------------------------------------------------
|
||||
FAQ Page [01]
|
||||
Made by glenthemes
|
||||
|
||||
Initial release: 2019/04/08
|
||||
Last updated: 2021/10/21
|
||||
|
||||
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!
|
||||
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
|
||||
//docs.google.com/document/d/1LgHqBkkbW5OrwRq9Edi93KmVDBOkN93IwHBxbfRbwzM
|
||||
|
||||
Please stick to the terms
|
||||
RIP Commander you will be remembered
|
||||
------------------------------------------------------------------------>
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
|
||||
<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>
|
||||
|
||||
<link href="//fonts.googleapis.com/css?family=Inconsolata|Montserrat:200,300,400|Nunito|Open+Sans|Playfair+Display|Source+Code+Pro|El+Messiri" rel="stylesheet">
|
||||
|
||||
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#title-border').width($('#title').width());
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-------------------------------------------------------------------->
|
||||
|
||||
<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);
|
||||
font-family:canela;
|
||||
font-size:9px;
|
||||
letter-spacing:1px;
|
||||
text-transform:uppercase;
|
||||
color:var(--Tooltip-Text);
|
||||
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;
|
||||
z-index:999999!important;
|
||||
}
|
||||
|
||||
/*--------------------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);
|
||||
}
|
||||
|
||||
/*--------------------COLORS--------------------*/
|
||||
:root {
|
||||
--Background:#10121F;
|
||||
|
||||
--Title:#d8d4d6;
|
||||
--Title-Text-Shadow:#10121F;
|
||||
--Title-Border:#d8d4d6;
|
||||
--Q:#BEB8BB;
|
||||
--Q-Text-Shadow:#10121F;
|
||||
--Question-Lines:#8F8A8C;
|
||||
--Question-Text:#BEB8BB;
|
||||
--Question-Text-Shadow:#10121F;
|
||||
|
||||
--Answer-Lines:#8F8A8C;
|
||||
--Answer-Text:#BEB8BB;
|
||||
--Answer-Text-Shadow:#10121F;
|
||||
--A:#BEB8BB;
|
||||
--A-Text-Shadow:#10121F;
|
||||
|
||||
--Links:#e9e9e9;
|
||||
|
||||
--Custom-Links:#BEB8BB;
|
||||
|
||||
--Scrollbar-Track:#393738;
|
||||
--Scrollbar-Thumb:#989395;
|
||||
|
||||
--Music-Player:#BEB8BB;
|
||||
|
||||
--Tooltip-Background:#10121F;
|
||||
--Tooltip-Border:#8F8A8C;
|
||||
--Tooltip-Text:#BEB8BB;
|
||||
}
|
||||
|
||||
/*--------------------BASICS--------------------*/
|
||||
body {
|
||||
background:#10121F url('//i.imgur.com/iMrKRSd.png');
|
||||
background-attachment:fixed;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
background-size:cover;
|
||||
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;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
i, em {color:;}
|
||||
|
||||
pre, code {
|
||||
white-space:pre-wrap;
|
||||
display:block;
|
||||
}
|
||||
|
||||
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;}
|
||||
|
||||
#box {margin-top:14vh;}
|
||||
|
||||
|
||||
/*-----TITLE-----*/
|
||||
#title:before {content:".:"}
|
||||
#title:after {content:":."}
|
||||
#title:before, #title:after {margin:20px;}
|
||||
|
||||
#title {
|
||||
display:inline-block;
|
||||
font-family:canela;
|
||||
font-size:21px;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:3px;
|
||||
color:var(--Title);
|
||||
text-shadow:1px 1px 1px var(--Title-Text-Shadow);
|
||||
}
|
||||
|
||||
#title-border {
|
||||
margin:24px auto auto auto;
|
||||
height:1px;
|
||||
background:-webkit-linear-gradient(left, transparent 0%, var(--Title-Border) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
/*-----Q&A MAIN CONTAINER-----*/
|
||||
#contwrap {
|
||||
padding-top:8px;
|
||||
margin-bottom:14vh;
|
||||
width:650px;
|
||||
}
|
||||
|
||||
#contwrap > .one-question {
|
||||
max-width:calc((650px / 2) + 70px);
|
||||
}
|
||||
|
||||
#contwrap > .one-answer {
|
||||
width:calc((650px / 2) + 70px);
|
||||
}
|
||||
|
||||
/*-----QUESTION STYLING-----*/
|
||||
.one-question {
|
||||
margin-top:30px;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.q-marker {
|
||||
margin-top:12px;
|
||||
font-family:canela;
|
||||
text-transform:uppercase;
|
||||
font-size:22px;
|
||||
letter-spacing:5px;
|
||||
color:var(--Q);
|
||||
text-shadow:1px 1px 1px var(--Q-Text-Shadow);
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-top:30px;
|
||||
margin-left:calc((650px / 2) - 70px);
|
||||
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;
|
||||
font-size:22px;
|
||||
letter-spacing:5px;
|
||||
color:var(--A);
|
||||
text-shadow:1px 1px 1px var(--A-Text-Shadow);
|
||||
}
|
||||
|
||||
/*-----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;
|
||||
}
|
||||
|
||||
#customlinks {
|
||||
padding:10px 0;
|
||||
display:flex;
|
||||
color:var(--Custom-Links);
|
||||
}
|
||||
|
||||
.sq {
|
||||
align-self:center;
|
||||
-webkit-align-self:center;
|
||||
width:10px;
|
||||
height:10px;
|
||||
border:1px solid var(--Custom-Links);
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
#customlinks:hover .sq {background:var(--Custom-Links);}
|
||||
|
||||
.sq-a {
|
||||
margin-left:15px;
|
||||
margin-top:1px;
|
||||
font-family:canela;
|
||||
text-transform:uppercase;
|
||||
font-size:10px;
|
||||
letter-spacing:2px;
|
||||
}
|
||||
|
||||
/*-------MUSIC PLAYER-------*/
|
||||
#glenplayer02 {
|
||||
position:fixed;
|
||||
bottom:0;margin-bottom:20px;
|
||||
left:0;margin-left:20px;
|
||||
display:flex;
|
||||
z-index:99;
|
||||
}
|
||||
#glenplayer02 a {text-decoration:none;}
|
||||
|
||||
#glenplayer02 > div {
|
||||
align-self:center;
|
||||
-webkit-align-self:center;
|
||||
}
|
||||
|
||||
.music-controls {
|
||||
user-select:none;
|
||||
-webkit-user-select:none;
|
||||
width:13px;
|
||||
font-size:13px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.playy, .pausee {color:var(--Music-Player);}
|
||||
|
||||
.pausee {display:none;}
|
||||
|
||||
.sonata {
|
||||
margin-left:10px;
|
||||
color:var(--Music-Player);
|
||||
}
|
||||
|
||||
.labeltext {
|
||||
margin-left:8px;
|
||||
font-family:courier new;
|
||||
font-size:9px;
|
||||
color:var(--Music-Player);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="cl-a">
|
||||
<div id="cl-b">
|
||||
|
||||
<!-----CUSTOM LINKS----->
|
||||
<a id="customlinks" href="/">
|
||||
<div class="sq"></div>
|
||||
<div class="sq-a">index</div>
|
||||
</a><!--end one custom link-->
|
||||
|
||||
<a id="customlinks" href="/ask">
|
||||
<div class="sq"></div>
|
||||
<div class="sq-a">message</div>
|
||||
</a><!--end one custom link-->
|
||||
|
||||
<a id="customlinks" href="/archive">
|
||||
<div class="sq"></div>
|
||||
<div class="sq-a">archive</div>
|
||||
</a><!--end one custom link-->
|
||||
|
||||
<!--PAGE CREDIT. PLS DO NOT REMOVE TY! :)-->
|
||||
<a id="customlinks" href="//glenthemes.tumblr.com" title="page by glenthemes">
|
||||
<div class="sq"></div>
|
||||
<div class="sq-a">credit</div>
|
||||
</a><!--end one custom link-->
|
||||
|
||||
</div><!--cl-b--><!--do not delete this line-->
|
||||
</div><!--cl-a--><!--do not delete this line-->
|
||||
|
||||
|
||||
|
||||
<!-------MUSIC PLAYER------->
|
||||
<div id="glenplayer02">
|
||||
<div class="music-controls" onclick="songstart();">
|
||||
<div class="playy">►</div>
|
||||
<div class="pausee">❚❚</div>
|
||||
</div>
|
||||
<div class="sonata">♫</div>
|
||||
<div class="labeltext">Sound of Crumbling Lies</div>
|
||||
</div><!--end music player-->
|
||||
|
||||
<!--MUSIC .MP3 URL GOES BETWEEN QUOTATION MARKS OF src=""-->
|
||||
<!--pls view: linktr.ee/direct_file_links-->
|
||||
<audio id="tune" src="https://cdn.discordapp.com/attachments/900670626774265886/900756675160571934/Sound_of_Crumbling_Lies.mp3" type="audio"></audio>
|
||||
|
||||
|
||||
|
||||
<div id="cont-h-1">
|
||||
<div id="cont-h-2">
|
||||
<div id="box">
|
||||
|
||||
<div id="title">Questions</div> <!-----MAIN TITLE----->
|
||||
<div id="title-border"></div>
|
||||
|
||||
<div id="contwrap">
|
||||
<!-----QUESTIONS AND ANSWERS----->
|
||||
<div class="one-question">
|
||||
<div class="q-marker">Q.</div>
|
||||
<div class="line-beef"></div>
|
||||
<div class="q-wrap">
|
||||
<div class="cherry"></div>
|
||||
<div class="question">This is a sample question.</div>
|
||||
<div class="donut"></div>
|
||||
</div><!--q-wrap-->
|
||||
</div><!--end one-question-->
|
||||
|
||||
<div class="one-answer">
|
||||
<div class="a-wrap">
|
||||
<div class="pancake"></div>
|
||||
<div class="answer">And this is an answer.</div>
|
||||
<div class="queen"></div>
|
||||
</div><!--a-wrap-->
|
||||
<div class="line-beer"></div>
|
||||
<div class="a-marker">A.</div>
|
||||
</div><!--end one answer-->
|
||||
|
||||
<div class="one-question">
|
||||
<div class="q-marker">Q.</div>
|
||||
<div class="line-beef"></div>
|
||||
<div class="q-wrap">
|
||||
<div class="cherry"></div>
|
||||
<div class="question">This is a sample question.</div>
|
||||
<div class="donut"></div>
|
||||
</div><!--q-wrap-->
|
||||
</div><!--end one-question-->
|
||||
|
||||
<div class="one-answer">
|
||||
<div class="a-wrap">
|
||||
<div class="pancake"></div>
|
||||
<div class="answer">And this is an answer.</div>
|
||||
<div class="queen"></div>
|
||||
</div><!--a-wrap-->
|
||||
<div class="line-beer"></div>
|
||||
<div class="a-marker">A.</div>
|
||||
</div><!--end one answer-->
|
||||
|
||||
<!--do not delete below this line-->
|
||||
</div><!--contwrap-->
|
||||
</div><!--box-->
|
||||
</div><!--cont-h-2-->
|
||||
</div><!--cont-h-1-->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue