Create a new version of paste:

<!-----------------------------------------------------------------------
About Page [04]: Kuebiko
Made by glenthemes

Initial release: 2018/07/07
Re-release: 2020/08/01
Last updated: 2023/10/05

What's new:
✱ rehosted some assets

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
------------------------------------------------------------------------>
 
<!DOCTYPE html 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: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">

<script src="//glen-themes.gitlab.io/abt-pages/04/kuebiko.js"></script>

<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 */
    
    cursor:url(https://glen-themes.gitlab.io/abt-pages/04/nier_cursor_5.png), auto;
}

/*------------ 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=""
            -->
            
            <audio id="audio" src="https://rhizo.gitlab.io/nier/Blissful_Death.mp3" type="audio"></audio>
            
            <!--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>