₊⁺✿˚

This commit is contained in:
HT 2022-07-22 04:33:54 +01:00
parent 5f5b3f510c
commit 07942ac247
1 changed files with 793 additions and 0 deletions

793
redirect-pages/01-Komorebi Normal file
View File

@ -0,0 +1,793 @@
<!-----------------------------------------------------------------------
Redirect Page [01]: Komorebi
Made by glenthemes
Initial release: 2020/05/20
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.
INSTALLATION & GUIDE:
docs.google.com/document/d/18wRmcBsBUKIJvnddK97Dc1AyLppSaPqa6X-DTFLF9J4/edit?usp=sharing
Customization pointers:
🍎🍎🍎🍎🍎🍎🍎 = places to edit
Credits:
glenthemes.tumblr.com/acnh-crd
------------------------------------------------------------------------>
<!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:50,
tip_fade_speed:0,
attribute:"title"
});
});
})(jQuery);
</script>
<link href="//fonts.googleapis.com/css?family=Nunito|Balsamiq+Sans" rel="stylesheet">
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="//glenthemes.s3.eu-west-2.amazonaws.com/redirect-pages/01/komorebi.js"></script>
<!------------------------------------------------->
<style type="text/css">
/*--------------------TOOLTIPS--------------------*/
#s-m-t-tooltip {
padding:5px 10px;
margin:20px;
background-color:var(--Links-Blob-Background);
border-radius:5px;
font-family:nunito;
font-size:calc(var(--Links-Font-Size) - 5px);
text-transform:uppercase;
letter-spacing:1px;
color:var(--Links);
z-index:99;
max-width:40vw;
}
/*--------------------TUMBLR CONTROLS--------------------*/
iframe#tumblr_controls, .iframe-controls--desktop {
top:8px!important;
right:40px!important;
position:fixed!important;
transform:scale(0.7,0.7);
-webkit-transform:scale(0.7,0.7);
-moz-transform:scale(0.7,0.7);
-o-transform:scale(0.7,0.7);
-ms-transform:scale(0.7,0.7);
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:99!important;
}
.glenjadot {
position:fixed;
display:flex;
align-items:center;
justify-content:center;
top:0;margin-top:20px;
right:0;margin-right:20px;
width:12px;
height:12px;
border-radius:100%;
border:1px solid var(--Links-Blob-Background);
}
.bloop {
width:9px;
height:9px;
background:var(--Links-Blob-Background);
border-radius:100%;
}
/*--------------------TEXT HIGHLIGHT--------------------*/
::selection {
background:#BBD3FD;
}
::-moz-selection {
background:#BBD3FD;
}
/*--------------------BASICS--------------------*/
body {
background-attachment:fixed;
font-family:Balsamiq Sans;
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;
cursor:pointer;
}
pre, code {
white-space:pre-wrap;
}
img {vertical-align:middle;}
/*---------- CUSTOMIZATION OPTIONS ----------*/
/*--🍎🍎🍎🍎🍎🍎🍎--*/
body {
background-color:#d69d80; /* background color edited here */
}
.background-image {
display:none;
position:fixed;
top:0;left:0;
width:100%;
height:100%;
/* background image is set here */
background-image:url(//cdn.discordapp.com/attachments/382037367940448256/712470211629940777/acfihing_3c.png);
/* put the url between brackets. do not remove semicolon */
background-repeat:no-repeat;
background-size:cover;
z-index:-1;
}
/* ALL OTHER COLORS, SIZES ETC EDITED BELOW */
/*--🍎🍎🍎🍎🍎🍎🍎--*/
:root {
/* clock [bottom left] */
--Clock-Font-Size:15px;
--Clock-Text:#fefae5;
--Clock-Line:#fefae5;
--Clock-Line-Gap:9px;
--Weekday-Background:#fefae5;
--Weekday-Padding:10px;
--Weekday-Text:#3c3c3c;
/* main cloud/bubble [center] */
--Bubble-Width:380px;
--Bubble-Height:120px;
--Bubble-Background:#fefae5;
--Bubble-Border:#f5dabd;
--Bubble-Border-Size:15.5px;
--Bubble-Font-Size:15px;
--Bubble-Text:#35323c;
--Typewriter-Speed:36; /* number ONLY. in milliseconds
if don't want a typewriter effect,
ctrl+F typewriter="yes" and change yes to no
*/
/* cloud/bubble name [top left] */
--Name-Font-Size:11px;
--Name:#827562;
--Name-Background:#fefae5;
--Name-Padding:13px;
--Name-Positioning-X:18px;
--Name-Positioning-Y:-7px;
/* popup-ish links blob box */
--Links-Blob-Width:auto;
--Links-Blob-Background:#ffebd2;
--Links-Blob-Padding:18px;
--Links-Cursor-Size:28px;
--Links:#4e474a;
--Links-Font-Size:13px;
--Links-Bottom-Border:#fdc690;
--Links-Spacing:0px;
--Links-Blob-Position-X:-30px;
--Links-Blob-Position-Y:-12px;
/* custom links [bottom right] */
--Corner-Links-Outer-Padding:7px;
--Corner-Links-Background:#ffebd2;
--Corner-Links-Symbol-Size:13px;
--Corner-Links-Symbol-Color:#ffebd2;
--Corner-Links-Symbol-Background:#4e474a;
--Corner-Links-Symbol-Padding:5px;
--Corner-Links-Symbol-Right-Gap:7px;
--Corner-Links-Font-Size:12px;
--Corner-Links-Text:#4e474a;
--Corner-Links-Spacing:12px;
--Corner-Links-Background-Hover:#6f5e68;
--Corner-Links-Symbol-Hover:#6f5e68;
--Corner-Links-Symbol-Background-Hover:#ffebd2;
--Corner-Links-Text-Hover:#ffebd2;
/* other */
--Window-Margin-Bottom:52px;
--Window-Margin-Sides:42px;
}
/*------------ CLOCK [BOTTOM LEFT] ------------*/
.clock {
display:none;
position:fixed;
bottom:0;margin-bottom:var(--Window-Margin-Bottom);
left:0;margin-left:var(--Window-Margin-Sides);
padding:0 3px;
font-family:Balsamiq Sans!important;
color:var(--Clock-Text);
}
.clock > * {
margin:auto;
}
.timeandshit {
padding:0 13px;
font-size:calc(var(--Clock-Font-Size) + 5px);
letter-spacing:2px;
text-align:center;
}
.am-pm {
font-size:var(--Clock-Font-Size);
}
.divider {
margin:var(--Clock-Line-Gap) auto;
width:100%;
height:2px;
border-radius:2px;
background:var(--Clock-Line);
}
.date {
display:flex;
align-items:center;
justify-content:center;
padding:0 3px;
}
.weekday {
display:inline-block;
padding:var(--Weekday-Padding);
background:var(--Weekday-Background);
border-radius:var(--Clock-Font-Size);
font-size:calc(var(--Clock-Font-Size) - 1px);
color:var(--Weekday-Text);
line-height:.9em;
}
.monthday {
margin-left:10px;
font-size:calc(var(--Clock-Font-Size) + 1px);
}
/*------------ BLOB CLOUDS ------------*/
#cent-a {
position:fixed;
bottom:0;left:0;right:0;
text-align:center;
z-index:-1;
}
#cent-b {
display:inline-block;
}
.thestuff {
position:relative;
margin-bottom:var(--Window-Margin-Bottom);
animation:blorg 0.9s linear 0s;
}
.blobsquad {
position:relative;
margin-bottom:-5px;
}
/* top bubble */
.bub-top {
margin-bottom:calc(var(--Bubble-Height) * -0.6);
width:var(--Bubble-Width);
height:var(--Bubble-Height);
background:var(--Bubble-Border);
clip-path:ellipse(50% 50% at 50% 50%);
display:flex;
align-items:center;
justify-content:center;
}
.lemon {
width:calc(var(--Bubble-Width) - (var(--Bubble-Border-Size) * 2));
height:calc(var(--Bubble-Height) - (var(--Bubble-Border-Size) * 2));
background:var(--Bubble-Background);
clip-path:ellipse(50% 50% at 50% 50%);
}
/* bottom bubble */
.bub-bot {
margin-left:auto;
margin-right:10px;
width:calc(var(--Bubble-Width) * 0.9);
height:calc(var(--Bubble-Height) * 0.9);
background:var(--Bubble-Border);
clip-path:ellipse(50% 50% at 50% 50%);
display:flex;
justify-content:center;
}
.cheese {
margin-top:-5px;
margin-left:-3px;
width:calc((var(--Bubble-Width) * 0.9) - (var(--Bubble-Border-Size) * 1.5));
height:calc((var(--Bubble-Height) * 0.9) - var(--Bubble-Border-Size) + 5px);
background:var(--Bubble-Background);
clip-path:ellipse(50% 50% at 50% 50%);
}
/* bubble text container */
.deja {
position:absolute;
top:0;margin-top:calc(var(--Bubble-Border-Size) * 2);
margin-left:calc(var(--Bubble-Border-Size) * 5);
width:calc(var(--Bubble-Width) - (var(--Bubble-Border-Size) * 10));
height:calc((var(--Bubble-Height) * 1.3) - (var(--Bubble-Border-Size) * 4));
display:table;
overflow:hidden;
}
.vu {
display:table-cell;
vertical-align:middle;
}
/* bubble text */
.bub-text {
font-size:var(--Bubble-Font-Size);
color:var(--Bubble-Text);
line-height:1.7em;
animation:appear 1s linear 0s;
}
.text-area {
position:absolute;
visibility:hidden;
}
.nt {
position:relative;
visibility:visible;
}
/* name/badge (top left) */
.potatoe {
position:relative;
text-align:left;
z-index:1;
}
.name-badge {
position:absolute;
margin-left:var(--Name-Positioning-X);
bottom:0;margin-bottom:calc(((var(--Name-Font-Size) + var(--Name-Padding)) * -1) + var(--Name-Positioning-Y));
padding:var(--Name-Padding);
background:var(--Name-Background);
clip-path:ellipse(50% 85% at 50% 50%);
font-size:var(--Name-Font-Size);
text-transform:uppercase;
letter-spacing:1px;
word-spacing:1px;
color:var(--Name);
line-height:1.05em;
transform:rotate(-12deg);
}
/*------------ [POPUP-ish] LINKS ------------*/
.links-blob {
display:none;
position:absolute;
bottom:0;
margin-bottom:calc((var(--Bubble-Height) + (var(--Bubble-Border-Size) * 1)) + var(--Links-Blob-Position-Y));
right:0;margin-right:calc((var(--Bubble-Border-Size) * -1) + var(--Links-Blob-Position-X));
width:var(--Links-Blob-Width);
padding:var(--Links-Blob-Padding);
background:var(--Links-Blob-Background);
border-radius:var(--Links-Blob-Padding);
z-index:2;
animation:blorg 0.5s linear 0s;
}
@keyframes blorg {
0% {
opacity:0;
}
25% {
opacity:1;
transform:scale(1.069);
}
69% {
opacity:1;
transform:scale(1);
}
}
.one-link {
display:flex;
align-items:center;
margin:var(--Links-Spacing) 0;
animation:appear .7s linear 0s;
}
@keyframes appear {
0% {
opacity:0;
}
69% {
opacity:0;
}
100% {
opacity:1;
}
}
.one-link:first-of-type {margin-top:0;}
.one-link:last-of-type {margin-bottom:0;}
.c-hold {
margin-top:2px;
margin-left:calc((var(--Links-Blob-Padding) + (var(--Links-Cursor-Size) / 1.5)) * -1);
margin-right:calc(var(--Links-Cursor-Size) * 0.5);
width:calc(var(--Links-Cursor-Size) * 1.25);
}
.cursor {
width:var(--Links-Cursor-Size);
opacity:0;
}
@keyframes point {
50% {
margin-left:calc(var(--Links-Cursor-Size) * 0.269);
}
}
.one-link:hover .cursor {
opacity:1;
animation:point 0.69s linear 0s infinite;
}
.one-link span {
padding:0 2px;
margin-right:calc(var(--Links-Cursor-Size) * 0.5);
font-size:var(--Links-Font-Size);
color:var(--Links);
line-height:1.7em;
box-shadow:transparent 0px calc((var(--Links-Font-Size) * 1.7) / -2) 0px inset;
}
.one-link:hover span {
box-shadow:var(--Links-Bottom-Border) 0px calc((var(--Links-Font-Size) * 1.7) / -2) 0px inset;
}
.one-link, .one-link span, .one-link:hover {
-webkit-transition: box-shadow 0.25s ease-in-out;
-moz-transition: box-shadow 0.25s ease-in-out;
-o-transition: box-shadow 0.25s ease-in-out;
}
/*------------ CUSTOM LINKS [BOTTOM RIGHT] ------------*/
.corner-links {
position:fixed;
bottom:0;margin-bottom:var(--Window-Margin-Bottom);
right:0;margin-right:var(--Window-Margin-Sides);
display:flex;
align-items:center;
}
.one-cornerlink {
display:flex;
align-items:center;
margin-left:var(--Corner-Links-Spacing);
padding:var(--Corner-Links-Outer-Padding) calc(var(--Corner-Links-Outer-Padding) * 1.5);
background:var(--Corner-Links-Background);
border-radius:var(--Corner-Links-Outer-Padding);
line-height:1em;
}
.one-cornerlink, .one-cornerlink > *, .one-cornerlink > *:hover {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
}
.one-cornerlink:hover {
background:var(--Corner-Links-Background-Hover);
}
.one-cornerlink i {
margin-right:var(--Corner-Links-Symbol-Right-Gap);
padding:var(--Corner-Links-Symbol-Padding);
background:var(--Corner-Links-Symbol-Background);
border-radius:100%;
font-size:var(--Corner-Links-Symbol-Size);
width:var(--Corner-Links-Symbol-Size);
height:var(--Corner-Links-Symbol-Size);
color:var(--Corner-Links-Symbol-Color);
}
.one-cornerlink:hover i {
color:var(--Corner-Links-Symbol-Hover);
background:var(--Corner-Links-Symbol-Background-Hover);
}
.one-cornerlink span, .one-cornerlink span > * {
font-size:var(--Corner-Links-Font-Size);
color:var(--Corner-Links-Text);
}
.one-cornerlink:hover span, .one-cornerlink:hover span > * {
color:var(--Corner-Links-Text-Hover);
}
</style>
</head>
<body>
<!-- background image is NOT edited here -->
<!-- look for .background-image (go up) -->
<div class="background-image"></div>
<a class="glenjadot" href="//glenthemes.tumblr.com" title="coded by glenthemes">
<div class="bloop"></div>
</a>
<div class="clock">
<div class="timeandshit">
<!--🍎🍎🍎🍎🍎🍎🍎-->
<!----------- TIME ----------->
<!--
Step 1: go to //24timezones.com/clock-widget/text
Step 2: choose your time zone
Step 3: DO NOT touch the other options
Step 4: in the "your website" box, just type google.com
Step 5: click "Get Code"
Step 6: Replace the following. Done!
Note: if you use clocks from any other sites, they may break
-->
<!--paste start point-->
<a href="//24timezones.com/current_time/united_kingdom_manchester_clock.php" style="text-decoration: none" class="clock24" id="tz24-1589998133-c216152-eyJob3VydHlwZSI6MTIsInNob3dkYXRlIjoiMCIsInNob3dzZWNvbmRzIjoiMCIsInNob3d0aW1lem9uZSI6IjEiLCJ0eXBlIjoiZCIsImxhbmciOiJlbiJ9" title="time in Manchester" target="_blank" rel="nofollow">Manchester</a>
<script type="text/javascript" src="//w.24timezones.com/l.js" async></script>
<!--paste end point-->
</div><!--do not delete this line-->
<div class="divider"></div>
<div class="date">
<div class="weekday">
<!--🍎🍎🍎🍎🍎🍎🍎-->
<!----------- WEEKDAY / DAY OF WEEK ----------->
<!--
Step 1: REFRESH //24timezones.com/clock-widget/text
Step 2: choose your time zone
Step 3: in "Show date", select "YES, SHOW DATE"
Step 4: do not touch other options
Step 5: in the "your website" box, just type google.com
Step 6: click "Get Code"
Step 7: Replace the following. Done!
Note: you CANNOT use the same code as you pasted above
(the clock will disappear if you do)
you must refresh the clock website and generate a new code
-->
<!--paste start point-->
<a href="//24timezones.com/current_time/united_kingdom_manchester_clock.php" style="text-decoration: none" class="clock24" id="tz24-1589998712-c216152-eyJob3VydHlwZSI6MTIsInNob3dkYXRlIjoiMSIsInNob3dzZWNvbmRzIjoiMCIsInNob3d0aW1lem9uZSI6IjEiLCJ0eXBlIjoiZCIsImxhbmciOiJlbiJ9" title="World Time :: Manchester" target="_blank" rel="nofollow">Current time in Manchester</a>
<script type="text/javascript" src="//w.24timezones.com/l.js" async></script>
<!--paste end point-->
</div><!--do not delete this line-->
<div class="monthday">
<!--🍎🍎🍎🍎🍎🍎🍎-->
<!----------- DATE NUMBER + MONTH ----------->
<!--
Step 1: REFRESH //24timezones.com/clock-widget/text
Step 2: choose your time zone
Step 3: in "Show date", select "YES, SHOW DATE"
Step 4: do not touch other options
Step 5: in the "your website" box, just type google.com
Step 6: click "Get Code"
Step 7: Replace the following. Done!
Note: you CANNOT use the same code as you pasted above
(the clock will disappear if you do)
you must refresh the clock website and generate a new code
-->
<!--paste start point-->
<a href="//24timezones.com/current_time/united_kingdom_manchester_clock.php" style="text-decoration: none" class="clock24" id="tz24-1589998903-c216152-eyJob3VydHlwZSI6MTIsInNob3dkYXRlIjoiMSIsInNob3dzZWNvbmRzIjoiMCIsInNob3d0aW1lem9uZSI6IjEiLCJ0eXBlIjoiZCIsImxhbmciOiJlbiJ9" title="Manchester clock" target="_blank" rel="nofollow">Current time in Manchester</a>
<script type="text/javascript" src="//w.24timezones.com/l.js" async></script>
<!--paste end point-->
</div><!--do not delete this line-->
</div><!--date-->
</div><!--clock-->
<div id="cent-a">
<div id="cent-b">
<div class="thestuff">
<div class="potatoe">
<!--🍎🍎🍎🍎🍎🍎🍎-->
<!---------- YOUR NAME ---------->
<!-- (topleft of cloud -->
<div class="name-badge">your name</div>
</div>
<div class="blobsquad">
<div class="bub-top">
<div class="lemon"></div>
</div>
<div class="bub-bot">
<div class="cheese"></div>
</div>
<div class="deja">
<div class="vu">
<!--🍎🍎🍎🍎🍎🍎🍎-->
<!---------- MAIN CLOUD/BUBBLE TEXT ---------->
<!--
Use <br> for a line break
To disable typewriter effect, change "yes" to "no"
Note: you may not see the text in the tumblr preview.
open your blog page in a new tab to see the changes
-->
<div class="text-area bub-text" typewriter="yes">This villager has moved!<br>What would you like to do?
</div><!--do not delete this line-->
<div id="feed" class="bub-text"></div>
</div>
</div>
</div><!--blobsquad-->
<div class="links-blob">
<!--🍎🍎🍎🍎🍎🍎🍎-->
<!---------- CLOUD/BUBBLE LINKS ---------->
<!--
link url goes between quotes marks of href=""
display text goes between <span> </span>
-->
<!--start one link-->
<a class="one-link" href="">
<div class="c-hold"><img class="cursor" src="//cdn.discordapp.com/attachments/382037367940448256/712491717781356615/ac_cursor_w.png"></div>
<span>Blob link 1.</span>
</a>
<!--end one link-->
<!--start one link-->
<a class="one-link" href="">
<div class="c-hold"><img class="cursor" src="//cdn.discordapp.com/attachments/382037367940448256/712491717781356615/ac_cursor_w.png"></div>
<span>Blob link 2.</span>
</a>
<!--end one link-->
</div><!--links-blob-->
</div><!--thestuff-->
</div><!--bubble-end1-->
</div><!--bubble-end2-->
<div class="corner-links">
<!--🍎🍎🍎🍎🍎🍎🍎-->
<!-------- CUSTOM LINKS [BOTTOM RIGHT] -------->
<!--
instructions for changing symbols/icons:
Step 1: go to fontawesome.com/icons
Step 2: type in / search for an icon you want
Step 3: click it; you will see something that starts with <i class
Step 4: click it to copy, then paste it below
link url goes between quotes marks of href=""
-->
<!--start one link-->
<a class="one-cornerlink" href="">
<i class="fab fa-steam-symbol"></i>
<span>Link text</span>
</a>
<!--end one link-->
<!--start one link-->
<a class="one-cornerlink" href="">
<i class="fab fa-discord"></i>
<span>Link text</span>
</a>
<!--end one link-->
</div><!--do not delete this line-->
</body>
</html>