glenthemes/pages
glenthemes
/
pages
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
pages/about-pages/04-Kuebiko

779 lines
21 KiB
Plaintext
Raw Permalink Normal View History

₊⁺✿˚
2022-07-22 04:15:12 +01:00
<!-----------------------------------------------------------------------
About Page [04]: Kuebiko
Made by glenthemes
Initial release: 2018/07/07
Re-release: 2020/08/01
₊⁺✿˚
2023-10-06 00:50:32 +01:00
Last updated: 2023/10/05
What's new:
✱ rehosted some assets
₊⁺✿˚
2022-07-22 04:15:12 +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.
Customization pointers:
🌼🌼🌼🌼🌼🌼🌼 = places to edit
------------------------------------------------------------------------>
₊⁺✿˚
2023-10-06 00:50:32 +01:00
<!DOCTYPE html lang="en">
₊⁺✿˚
2022-07-22 04:15:12 +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:50,
tip_fade_speed:0,
attribute:"title"
});
});
})(jQuery);
</script>
<link href="//fonts.googleapis.com/css?family=Darker+Grotesque:400,500|Padauk|Recursive|Monda|Libre+Franklin" rel="stylesheet">
₊⁺✿˚
2023-10-06 00:50:32 +01:00
<script src="//glen-themes.gitlab.io/abt-pages/04/kuebiko.js"></script>
₊⁺✿˚
2022-07-22 04:15:12 +01:00
<script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
<!-------------------------------------------------------------------->
<style type="text/css">
/*--------------------TOOLTIPS--------------------*/
#s-m-t-tooltip {
padding:7px 10px;
margin:22px;
max-width:var(--BioText-Width);
background-color:var(--Tooltips-BG);
font-family:padauk;
font-size:var(--Tooltips-Font-Size);
text-transform:uppercase;
letter-spacing:1.3px;
color:var(--Tooltips-Text);
line-height:1.69em;
z-index:99;
}
/*--------------------TUMBLR CONTROLS--------------------*/
iframe#tumblr_controls, .iframe-controls--desktop {
top:7px!important;
right:7px!important;
position:fixed!important;
transform:scale(0.8,0.8);
-webkit-transform:scale(0.8,0.8);
-moz-transform:scale(0.8,0.8);
-o-transform:scale(0.8,0.8);
-ms-transform:scale(0.8,0.8);
transform-origin:100% 0;
-webkit-transform-origin:100% 0;
-moz-transform-origin:100% 0;
-o-transform-origin:100% 0;
-ms-transform-origin:100% 0;
z-index:999999!important;
}
/*--------------------TEXT HIGHLIGHT--------------------*/
::selection {
background:var(--Text-On-Highlight-BG);
}
::-moz-selection {
background:var(--Text-On-Highlight-BG);
}
/*--------------------BASICS--------------------*/
body {
background-attachment:fixed;
line-height:1.6em;
font-size:12px;
overflow:hidden;
}
a {
color:var(--Links);
text-decoration:none;
-webkit-transition: all 0.269s ease-in-out;
-moz-transition: all 0.269s ease-in-out;
-o-transition: all 0.269s ease-in-out;
}
pre, code {
white-space:pre-wrap;
}
img {vertical-align:middle;}
* {
/*-------- CURSOR --------*/
/*-- 🌼🌼🌼🌼🌼🌼🌼 --*/
/* to remove the custom cursor, delete the line below */
₊⁺✿˚
2023-10-06 00:50:32 +01:00
cursor:url(https://glen-themes.gitlab.io/abt-pages/04/nier_cursor_5.png), auto;
₊⁺✿˚
2022-07-22 04:15:12 +01:00
}
/*------------ CUSTOMIZATION OPTIONS ------------*/
/*-- 🌼🌼🌼🌼🌼🌼🌼 --*/
/* all colors, sizes etc are edited inside :root
with the exception of the background color & image, edited below: */
body {
background-color:#fff; /* background color */
/* background image */
/* put the image url between the brackets */
/* do not remove the brackets or semicolon at the end */
background-image:url(//static.tumblr.com/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/qAaoy90vm/tumblr_static_c7ybwm57sv4k0s0kswccgoss0.png);
/* if you have a large full-screen background, change
"repeat" to "no-repeat" */
background-repeat:repeat;
}
:root {
/*-- 🌼🌼🌼🌼🌼🌼🌼 --*/
/*------- TOP LINKS -------*/
--TopLinks-Padding:12px;
--TopLinks-BG:#fbfbfb;
--TopLinks-Border:#f2f2f2;
--TopLinks-Color:#333;
--TopLinks-Font-Size:12px;
--TopLinks-BG-On-Hover:#121212;
--TopLinks-Border-On-Hover:#121212;
--TopLinks-Color-On-Hover:#eee;
--TopLinks-Spacing:15px;
/*------- MUSIC PLAYER -------*/
--Music-Player-BG:#fbfbfb;
--Music-Player-Border:#f2f2f2;
--Music-Controls-Color:#333;
--Music-Controls-Size:12px;
--TopLinks-Bottom-Gap:15px;
/*------- MAIN CONTAINER -------*/
--Container-BG:#fbfbfb;
--Container-Border:#f2f2f2;
--Container-Padding:22px;
--BioText-Width:420px;
/*------- TITLE -------*/
--Title-Font-Size:18px;
--Title-Color:#222;
--Title-Shadow-Color:#e4e4e4;
/*------- SUBTITLE -------*/
--Subtitle-Top-Gap:1px;
--Subtitle-Lines-Color:#777;
--Subtitle-Color:#666;
--Subtitle-Font-Size:11px;
--Subtitle-Bottom-Gap:14px;
/*------- BIO TEXT -------*/
--BioText-Font-Size:12px;
--BioText-Color:#666;
--BioText-Line-Height:1.85;
--Links:#000;
--Links-Bottom-Border:#ddd;
--Links-On-Hover:#000;
--Links-Bottom-Border-On-Hover:#ddd;
--Scrollbar-Thumb:#999;
--Scrollbar-Track:#f0f0f0;
/*------- QUOTE -------*/
--Quote-Section-Top-Gap:16px;
--Quotation-Mark-Size:30px;
--Quotation-Mark-Color:#151515;
--Quote-Border-Color:#151515;
--Quote-Text-Left-Gap:15px;
--Quote-Text-Color:#555;
--Quote-Text-Font-Size:12px;
--Quote-Line-Height:2.2;
--Quote-Source-Line:#aaa;
--Quote-Source-Line-Width:20px;
--Quote-Source-Line-Spacing:8px;
--Quote-Source-Font-Size:10px;
--Quote-Source-Color:#888;
/*------- CUSTOM LINKS -------*/
--CustomLinks-Top-Gap:16px;
--CustomLinks-Per-Row:4;
--CustomLinks-Padding:9px;
--CustomLinks-BG:#fafafa;
--CustomLinks-Border-Color:#f2f2f2;
--CustomLinks-Color:#222;
--CustomLinks-BG-On-Hover:#121212;
--CustomLinks-Border-On-Hover:#121212;
--CustomLinks-Color-On-Hover:#eee;
--CustomLinks-Font-Size:9px;
--CustomLinks-Spacing:4px;
--Gutter-Width:25px; /* space between sidebar and text */
/*------- RIGHT SIDEBAR IMAGE -------*/
--Sidebar-Image-Width:300px;
--Sidebar-Image-Height:420px;
/*------- MISC/OTHER -------*/
--Tooltips-BG:#151515;
--Tooltips-Text:#eee;
--Tooltips-Font-Size:10px;
--Text-On-Highlight-BG:#f2f2f2;
}
/*---------- OUTER "CONTAINER" ----------*/
#horizontal-a {
position:fixed;
top:0;left:0;right:0;
margin:0 auto;
height:100vh;
text-align:center;
z-index:-1;
}
#horizontal-b {
display:inline-block;
}
#vertigo-a {
height:100vh;
display:table;
}
#vertigo-b {
display:table-cell;
vertical-align:middle;
}
#enigma {
text-align:left;
}
/*---------- TOP BOXES ----------*/
#topstuff {
display:flex;
align-items:center;
margin-bottom:var(--TopLinks-Bottom-Gap);
}
/*---------- TOP LINKS ----------*/
.toplinks {
display:flex;
align-items:center;
}
.toplinks a {
margin-right:var(--TopLinks-Spacing);
padding:var(--TopLinks-Padding) calc(var(--TopLinks-Padding) * 1.69);
background:var(--TopLinks-BG);
border:1px solid var(--TopLinks-Border);
font-family:darker grotesque;
font-weight:500;
font-size:var(--TopLinks-Font-Size);
text-transform:uppercase;
letter-spacing:2px;
color:var(--TopLinks-Color);
line-height:1em;
}
.toplinks a:hover {
background:var(--TopLinks-BG-On-Hover);
border-color:var(--TopLinks-Border-On-Hover);
color:var(--TopLinks-Color-On-Hover);
}
/*---------- MUSIC PLAYER ----------*/
.la-musique {
width:calc((var(--TopLinks-Padding) * 2) + var(--TopLinks-Font-Size) + 1px);
height:calc((var(--TopLinks-Padding) * 2) + var(--TopLinks-Font-Size) + 1px);
}
.parmesan {
width:100%;
height:100%;
background:var(--Music-Player-BG);
border:1px solid var(--Music-Player-Border);
box-sizing:border-box;
}
.music-controls {
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
user-select:none;
}
.playy svg {
width:var(--Music-Controls-Size);
height:var(--Music-Controls-Size);
color:var(--Music-Controls-Color);
opacity:0.7;
}
.pausee {
display:none;
margin-top:1px;
font-size:calc(var(--Music-Controls-Size) - 3px);
color:var(--Music-Controls-Color);
line-height:1em;
}
.beff {display:none;}
.aff {display:block;}
/*---------- MAIN CONTAINER ----------*/
#iconteven {
padding:var(--Container-Padding);
background:var(--Container-BG);
border:1px solid var(--Container-Border);
display:table;
}
/*---------- LEFTSIDE ----------*/
#mainleft {
display:table-cell;
vertical-align:top;
width:var(--BioText-Width);
padding-right:var(--Gutter-Width);
}
.title {
font-family:darker grotesque;
font-weight:400;
font-size:var(--Title-Font-Size);
text-transform:uppercase;
letter-spacing:2.5px;
color:var(--Title-Color);
text-shadow:2px 2px 0px var(--Title-Shadow-Color);
line-height:1.69em;
}
.subtitle {
position:relative;
margin-top:calc(var(--Subtitle-Top-Gap) + (var(--Subtitle-Font-Size) / 2));
margin-bottom:var(--Subtitle-Bottom-Gap);
margin-left:calc(var(--Subtitle-Font-Size) * 2);
font-family:padauk;
font-size:var(--Subtitle-Font-Size);
text-transform:uppercase;
letter-spacing:2px;
color:var(--Subtitle-Color);
line-height:1em;
}
.subtitle:before {
content:"";
position:absolute;
margin-top:calc(var(--Subtitle-Font-Size) * -.5);
margin-left:calc(var(--Subtitle-Font-Size) * -2);
width:var(--Subtitle-Font-Size);
height:var(--Subtitle-Font-Size);
border-left:1px solid var(--Subtitle-Lines-Color);
border-bottom:1px solid var(--Subtitle-Lines-Color);
}
/*---------- BIO TEXT ----------*/
.bio-text {
width:calc(100% + 5px);
height:0px; /* won't actually be 0 */
overflow:hidden;
}
.the-text {
padding-top:2px;
padding-right:10px;
max-height:100%;
overflow-y:auto;
font-family:libre franklin;
font-size:var(--BioText-Font-Size);
letter-spacing:0.3px;
color:var(--BioText-Color);
line-height:var(--BioText-Line-Height);
text-align:justify;
}
.the-text a {
padding-bottom:2.5px;
border-bottom:1px solid var(--Links-Bottom-Border);
color:var(--Links);
}
.the-text a:hover {
border-color:var(--Links-Bottom-Border-On-Hover);
color:var(--Links-On-Hover);
}
.the-text::-webkit-scrollbar {
width:13px;
height:13px;
}
.the-text::-webkit-scrollbar-thumb {
background-color:var(--Scrollbar-Thumb);
border:6px solid var(--Container-BG);
}
.the-text::-webkit-scrollbar-track {
background:var(--Scrollbar-Track);
border:6px solid var(--Container-BG);
}
.the-text p:last-child {margin-bottom:0;}
/*---------- QUOTE ----------*/
.quote-sect {
margin-top:var(--Quote-Section-Top-Gap);
position:relative;
}
.quote-mark {
position:absolute;
width:var(--Quotation-Mark-Size);
height:var(--Quotation-Mark-Size);
background:var(--Container-BG);
border-radius:100%;
z-index:1;
}
.quote-svg svg {
}
.quote-text {
display:inline-block;
margin-left:calc((var(--Quotation-Mark-Size) / 2) - 1px);
padding-left:calc((var(--Quotation-Mark-Size) / 2) + var(--Quote-Text-Left-Gap) + 1px);
border-left:1px solid var(--Quote-Border-Color);
padding-right:var(--Quote-Text-Left-Gap);
font-family:recursive;
font-size:var(--Quote-Text-Font-Size);
color:var(--Quote-Text-Color);
line-height:var(--Quote-Line-Height);
text-align:left;
}
.quote-text p {
display:inline-block;
margin-top:3px;
}
.quote-text p:last-of-type {margin-bottom:-3px;}
.imdoingmybest {
display:table;
width:100%;
}
.quote-text span {
display:table-cell;
width:100%;
white-space:nowrap;
}
.quote-source {
display:table-cell;
vertical-align:middle;
}
.quote-source.right, .quote-source.inline {
display:table;
margin-left:auto;
}
.ergh {
position:absolute;
opacity:0;
}
.sausage {
display:flex;
align-items:center;
}
.q-line {
margin-right:var(--Quote-Source-Line-Spacing);
width:var(--Quote-Source-Line-Width);
height:1px;
background:var(--Quote-Source-Line);
}
.quote-source.inline .q-line {margin-top:-6px;}
.source-text {
font-family:padauk;
font-size:var(--Quote-Source-Font-Size);
text-transform:uppercase;
letter-spacing:1.5px;
color:var(--Quote-Source-Color);
line-height:1em;
white-space:nowrap;
}
.quote-source.inline .source-text {margin-top:-6px;}
/*---------- CUSTOM LINKS ----------*/
.customlinks {
margin-top:calc(var(--CustomLinks-Top-Gap) - var(--CustomLinks-Spacing));
margin-bottom:calc(var(--CustomLinks-Spacing) * -1);
margin-left:calc(var(--CustomLinks-Spacing) * -1);
width:calc(100% + (var(--CustomLinks-Spacing) * 2));
display:flex;
flex-wrap:wrap;
}
.customlinks a {
display:block;
margin:var(--CustomLinks-Spacing);
width:calc((100% / var(--CustomLinks-Per-Row)) - (var(--CustomLinks-Spacing) * 2));
box-sizing:border-box;
padding:var(--CustomLinks-Padding) calc(var(--CustomLinks-Padding) * 1.5);
background:var(--CustomLinks-BG);
border:1px solid var(--CustomLinks-Border-Color);
font-family:Monda;
font-size:var(--CustomLinks-Font-Size);
text-transform:uppercase;
letter-spacing:1.3px;
color:var(--CustomLinks-Color);
line-height:1.5em;
text-align:center;
}
.customlinks a:hover {
background:var(--CustomLinks-BG-On-Hover);
border-color:var(--CustomLinks-Border-On-Hover);
color:var(--CustomLinks-Color-On-Hover);
}
/*---------- RIGHT SIDEBAR IMAGE ----------*/
#sidebar {
display:table-cell;
vertical-align:top;
width:var(--Sidebar-Image-Width);
height:var(--Sidebar-Image-Height);
/*------- SIDEBAR IMAGE -------*/
/*-- 🌼🌼🌼🌼🌼🌼🌼 --*/
/* image url goes between brackets. do not remove brackets or semicolon */
background-image:url(//64.media.tumblr.com/13c8afc22302c8fa44a8268bdfed673f/8a31703dcece7b58-41/s1280x1920/a149e70bd96309aa7b19090bf9adfd6fe04eb7fd.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
</style>
</head>
<body>
<div id="horizontal-a">
<div id="horizontal-b">
<div id="vertigo-a">
<div id="vertigo-b">
<div id="enigma">
<div id="topstuff">
<!--------- TOP LINKS --------->
<!-- home, ask, archive, etc -->
<!-- 🌼🌼🌼🌼🌼🌼🌼 -->
<!-- url goes between quotation marks of href="" -->
<div class="toplinks">
<a href="/">index</a>
<a href="/ask">message</a>
<a href="/archive">archive</a>
<!-- pls do not remove the credit, thank you! *\(^o^)-＊ -->
<a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
</div><!--end toplinks-->
<!--------- MUSIC PLAYER --------->
<div class="la-musique">
<div class="parmesan">
<!----- MUSIC TITLE ----->
<!-- 🌼🌼🌼🌼🌼🌼🌼 -->
<!-- music title goes between quotation marks of title="''" -->
<a class="music-controls" title="'Blissful Death'">
<div class="playy">
<i data-feather="play"></i>
</div>
<div class="pausee">⌷⌷</div>
</a>
</div><!--parmesan-->
</div><!--la-musique-->
<!--------- MUSIC LINK --------->
<!-- 🌼🌼🌼🌼🌼🌼🌼 -->
<!--
HOW TO ADD YOUR OWN MUSIC: PLEASE READ:
linktr.ee/direct_file_links
Put the finalized url between the quotation marks of src=""
-->
₊⁺✿˚
2023-10-06 00:50:32 +01:00
<audio id="audio" src="https://rhizo.gitlab.io/nier/Blissful_Death.mp3" type="audio"></audio>
₊⁺✿˚
2022-07-22 04:15:12 +01:00
<!--end music player-->
</div><!--topstuff--><!--do not delete this line-->
<div id="iconteven">
<div id="mainleft">
<!--------- TITLE & SUBTITLE --------->
<div class="title">your title here</div>
<div class="subtitle">your subtitle here</div>
<div class="bio-text">
<div class="the-text">
<!--------- BIO TEXT --------->
<!-- height is autoatically generated -->
Biography text goes here.
<p>
Supports long text. Text that's too long will overflow, and a scrollbar will be added automatically.
<p>
NOTE: open your page in a new tab and refresh periodically to see your changes live. the editor panel isn't always accurate (especially the height of this text space).
</div><!--do not delete this line-->
</div><!--do not delete this line-->
<div class="quote-sect">
<div class="quote-mark">
<div class="quote-svg"></div>
</div>
<div class="quote-text">
<!--------- A QUOTE HERE --------->
<!-- 🌼🌼🌼🌼🌼🌼🌼 -->
<!-- do not remove the <p> & </p> -->
<!-- you CAN have multiple paragraphs but personally
I recommend 1-2 -->
<p>
We want our lives back, we want to get back to ‘normal’.
But life doesn’t care.
Now it is night again and I am waiting for
the dawn tomorrow.
</p>
<!--------- QUOTE SOURCE --------->
<!-- 🌼🌼🌼🌼🌼🌼🌼 -->
<!--
you have 3 choices for the positioning:
> position="left" : under the quote, on the left.
> position="right" : under the quote, on the right.
> position="inline" : on the same line as the quote,
on the right.
-->
<div class="quote-source ergh" position="inline">
<div class="sausage">
<div class="q-line"></div>
<!----- QUOTE SOURCE TEXT (THEIR NAME) ----->
<!-- 🌼🌼🌼🌼🌼🌼🌼 -->
<div class="source-text">Nayyirah Waheed</div>
</div>
</div>
</div><!--quote-text-->
</div><!--quote-sect-->
<!--------- CUSTOM LINKS --------->
<!-- 🌼🌼🌼🌼🌼🌼🌼 -->
<!--
> put the url between the quotation marks of href=""
> if your display text is too long to fit, you can change
the number of links per row. scroll up and search for
--CustomLinks-Per-Row
> feel free to add/delete as you want
-->
<div class="customlinks">
<a href="">link 1</a>
<a href="">link 2</a>
<a href="">link 3</a>
<a href="">link 4</a>
<a href="">link 5</a>
<a href="">link 6</a>
<a href="">link 7</a>
<a href="">link 8</a>
</div><!--customlinks--><!--do not delete this line-->
</div><!--mainleft-->
<!--------- RIGHT SIDEBAR IMAGE --------->
<!-- not changed here. scroll up and search for #sidebar -->
<div id="sidebar"></div>
</div><!--iconteven-->
</div><!--enigma-->
</div>
</div>
</div>
</div>
<script>feather.replace()</script>
</body>
</html>