Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-----------------------------------------------------------------------
- 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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement