Yk The Drill Already

<!
--
"See the stars with me"
by @palemona
ver. 1.3 (23/03/2021)
Thnx for using my theme
please don't remove the credits
*Credits*
*background images made by me using a stars transparent gif found in giphy
*font is from dafont.com and belong to their respective authors
*tutorial of custom reblog and like buttons by shythemes
*Basecode by me because I didn't know basecodes exists so I made all from scratch
xd
*card image is only for demo purposes and belongs to their respective author
*modal (popup) by w3schools.com
-->
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta name="if:Show custom link" content="1"/>
<meta name="text:Custom link" content="hereisanurl"/>
<meta name="text:Custom linkname" content="Custom Link"/>
<meta name="if:Fixed nav" content="0"/>
<meta name="if:Pastel mode" content="0"/>
<meta name="if:Show tags" content="1"/>
<meta name="if:Show More tab" content="0"/>
<meta name="if:Show Ask" content="1" />
<meta name="select:Text Size" content="25px" />
<meta name="select:Columns Number" content="2" />
<meta name="if:Show Controls In Post" content="0" />
<meta name="if:Show Window Img" content="1" />
<meta name="text:More Tab" content="About/Links"/>
<meta name="text:More Links" content="https://twitter.com/, twitter,
https://www.youtube.com/, youtube,
https://seethestarswithme.tumblr.com/tagged/tags, tag, pasteanotherlink, another
link"/>
<meta name="text:Window Text" content="Another big big big text. Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
<meta name="image:Custom dialogue img"
content="https://gitlab.com/Palemona/tumblr-themes/-/raw/master/assets/
evangelion_station.jpeg" />
<style>
/******************GENERAL*****************/
@font-face {
font-family: 'pixelthin';
src:
url('https://dl.dropboxusercontent.com/s/5rhx0odgk2ibhim/thin_pixel-7.ttf');
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
{block:IfPastelMode}
color: #fff;
{/block:IfPastelMode}
{block:IfNotPastelMode}
color: #f2f2f2;
{/block:IfNotPastelMode}
}
html {
scroll-behavior: smooth;
}
body {
background-image:
url('https://66.media.tumblr.com/6f03d701a1b23c51ab31c6cd82baf4f9/4bdd19d397eb3a81-
19/s1280x1920/f8d45d9e3ce9e20dc41e6bc3a1f9af78e2f16599.gifv');
background-image: linear-gradient(
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2)
),
url('https://66.media.tumblr.com/0cf29aed774e66ca048960dd3c705be6/
tumblr_psaysi4fDX1qcwny6o1_1280.gif');
background-repeat: repeat-x;
background-attachment: fixed;
background-size: auto 100%;
a {
color: #fff;
color: #f2f2f2;
text-decoration: none;
}
a:hover, a:visted, a:active {

color: #fff;
color: #f2f2f2;
}
h1 {
font-weight: normal;
font-size: 100px;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 0;
line-height: 50px;
}
p {
margin: 0;
padding: 0;
}
#posts > li {
list-style-type: none;
}
/******************HEADER*****************/
header {
margin: 0 auto;
top: 0;
width: 100%;
margin-top: 40px;
}
#desc {
width: 860px;
margin: 0 auto;
background: #dbc6eb;
background: #5f1b7c;
font-size: 30px;
line-height: 25px;
border-style: double;
border-color: #f2f2f2;
padding: 5px 5px 5px 15px;
transition: 0.2s;
}
#footer {
text-align: right;
font-size: {select:Text Size};
.sticky {
position: {block:IfFixedNav}
fixed;
{/block:IfFixedNav}
{block:IfNotFixedNav}
static;
{/block:IfNotFixedNav}
top: 0;
width: 100%;
margin: 0 auto;
{block:Permalink}
position: static;
{/block:Permalink}
}
.toplinks a {
text-align: right;
padding: 1px 15px;
font-size: 30px;
}
.toplinks {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
margin-top: 30px;
.triangle {
font-size: 15px;
opacity: 0;
animation: none;
.fecha a:hover:before {
content: "▶ ";
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
font-size: 15px;
}
@keyframes blink{
0%{opacity: 0;}
50%{opacity: 0;}
100%{opacity: 1;}
}
#descontainer {
width: 100%;
padding-top: 30px;
z-index: 1;
}
/******************POSTS*****************/
.deschiki {
background: #b2b2db;
background: #8e5acd;
font-size: 25px;
box-sizing: content-box;
padding: 5px 5px 5px 10px;
margin: 10px 0px 40px 0px;
#postes {
margin: 20px auto;
display: flex;
justify-content: center;
page-break-inside: avoid;
break-inside: avoid;
width: 80%;
box-sizing: content-box;
#posts {
columns: {select:Columns Number};;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
{block:Permalink}
columns: 1;
{/block:Permalink}
.post img,
.photoset img {
width: 100%;
/* height: 100%;*/
}
.spotify_audio_player {
width: 100%;
max-height: 300px;
}
#youtube_iframe, .youtube_iframe {
width: 100%;
}
.post {
width: 100%;
line-height: 25px;
margin: 0 auto;
max-width: 400px;
{block:Permalink}
max-width: 80%;
{/block:Permalink}
}
.imgfixer img {
width: 200px;
height: auto;
margin: 0;
}
.fixer {
display: inline-block;
height: 100%;
width: 100%;
.textlayer{
box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2);
padding: 10px;
box-sizing: border-box;
}
.quote .deschiki {
padding: 5px 10px;
}
.quote .source {
line-height: 15px;
margin-bottom: 20px;
}
.caption {
}
.chat ul {
margin-left: 10px;
}
.text {
text-align: justify;
}
.foot {
}
.fecha {
text-align: right;
display: flex;
justify-content: space-between;
.tags {
text-align: right;
font-size: 20px;
}
.hi-tag {
opacity: 0.6;
}
.hi-tag:hover {
opacity: 0.8;
}
.asker-avatar {
width: 25px;
height: 25px;
margin-right: 10px;
}
.replies {
font-style: italic;
}
.pregunta {
margin-left: 25px;
}
.notas {
font-size: 20px;
}
.notas img {
width: 16px;
margin-right: 5px;
.notes li, .chat li {

}
.bigger {
font-size: 40px;
margin: 5px 0px 15px;
}
.credits {
font-size: 25px;
opacity: 0.5;
bottom: 0;
position: fixed;
left: 0;
.pagination {
text-align: right;
width: 200px;
margin: 0 auto;
font-size: 20px;
display: flex;
}
.triangle2:hover:before {
content: "▶";
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
font-size: 15px;
margin-left: 30px;
}
@media only screen and (max-width: 1024px) {

.post img {
width: 100%;
}
.photoset img {
width: 300px;
}
.post {
width: 100%;
}
#posts {
width: 90%;
margin: 0 auto;
}
#postes {
display: block;
}

#postes, #descontainer {
width: 95%;
margin: 0 auto;
}
#desc {
}
#posts {
columns: 1;
padding: 0;
}
.post, .post img, #desc {

width: 100%;
{block:Permalink}
max-width: 100%;
{/block:Permalink}
}
.deschiki {
width: initial;
}
header {
margin-top: 40px;
}

h1 {
font-size: 50px;
}
}
.notas img {
width: 16px;
margin-right: 5px;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background-color: #b2b2db;
}
::-webkit-scrollbar-thumb {
}
::-webkit-scrollbar-thumb:hover {
background: #e8d5f7;
}
::-webkit-scrollbar-track {
background-color: #5f1b7c;
}
::-webkit-scrollbar-thumb {
background: #6a5acd;
}
::-webkit-scrollbar-thumb:hover {
background: #8576e3;
}
/*Controls*/
#like_wrapper {
display: flex;
justify-content: center;
}
.controles3 {
display: flex;
width: 100%;
padding: 0;
}
.controles3 li {
text-align: right;
height: 25px;
}
.like .liked + svg path {

fill:#ec5a5a;
}
.fecha .like a{
display: -webkit-inline-box;
}
.fecha .reblog {
width: 70px;
}
.fecha .like{
width: 40px;
}
.fecha .notes {
width: 200px;
}
.like_button {
padding: 0px 5px;
}
{block:IfNotShowControlsInPost}
.fecha .like, .fecha .reblog{
display: none !important;
}
.controles3 {
}
{/block:IfNotShowControlsInPost}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.6);
}
.modal-content {
margin: 200px auto;
padding: 20px;
width: 80%;
max-width: 800px;
background: #5f1b7c;
line-height: 25px;
padding: 0;
transition: 0.2s;
display: flex;
}
.modal-content img {
width: 150px;
height: 100%;
}
.modal-content .avatar {
border-right-style: double;
.modal-content .message {
width: 100%;
display: flex;
flex-direction: column;
margin-top: 15px;
margin-left: 20px;
}

.modal-content .message {
margin-left: 10px;
}
}
.close {
color: #fff;
float: right;
padding-right: 10px;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #fff;
cursor: pointer;
}
#links_box {
display: flex;
flex-wrap: wrap;
margin: 20px 0px;
padding: 0;
#links_box li {
margin: 0px 10px;
}
#top_button{
display: none;
flex-direction: column;
align-items: center;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 105;
border: none;
outline: none;
cursor: pointer;
padding: 10px;
font-size: 20px;
background-color: transparent;
box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2);
</style>
</head>
<body onscroll="fixednav()">
<header>
<h1>{Title}</h1>
</header>
<script>
$(document).ready(function () {
$('.l1', this).hover(function (e) {
$('> .triangle', this).css("animation", e.type === "mouseenter" ?
"blink 1s linear infinite" : "none")
})
var bolds = document.getElementsByTagName("B");
for(var i = 0; i<bolds.length; i++){
bolds[i].style.letterSpacing = "3px";
}
});
</script>
<div id="descontainer">
<div id="desc">
{block:Description}
{Description}
<div class="toplinks">
<a class="l1" href="{BlogURL}"> <span class="a triangle">▶</span>
Home</a>
<a class="l1" href="/archive"><span class="b triangle">▶</span> Archive</a>
{block:IfShowAsk}
<a class="l1" href="/ask"><span class="c triangle">▶</span> Ask</a>
{/block:IfShowAsk}
{block:IfShowCustomLink}
<a class="l1" target='_blank' href="{text:Custom link}"> <span class="d
triangle">▶</span> {text:Custom linkname}</a>
{/block:IfShowCustomLink}
{block:IfShowMoreTab}
<a class="l1" href="#f" id="myBtn"><span class="e triangle">▶</span> {text:More
Tab}</a>
{/block:IfShowMoreTab}
</div>
</div>
</div>
<div id="postes">
<ul id="posts">

{block:Posts}
{block:Text}
<li class="post text">
<div class="fixer">
<div class="textlayer">
{block:Title}
<div class="bigger"><a
href="{Permalink}">{Title}</a></div>
{/block:Title}<div class="imgfixer">{Body}</div></div>
<div class="deschiki">
<div class="fecha">
<ol class="controles3">
<li class="like"><a href="#">{LikeButton color="white"
size="13"}</a></li>
<li class="reblog" ><a href="{ReblogURL}"
target="_blank">reblog</a></li>
<li class="notes"><a href="{Permalink}"

title="{ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {Year}">
{TimeAgo} {block:NoteCount} {NoteCountWithLabel}
{/block:NoteCount}
</a></li>
</ol>
</div>
{block:IfShowTags}
{block:HasTags}<div class="tags">
{block:Tags}
<a class="hi-tag" href="{TagURL}">#{Tag} </a>
{/block:Tags}
</div>
{/block:HasTags}
{/block:IfShowTags}
{block:IfNotShowTags}
{/block:IfNotShowTags}
</div>
<div class="notas">{block:PostNotes}{PostNotes}
{/block:PostNotes}
</div></div>
</li>
{/block:Text}

{block:Answer}
<li class="post text">
<div class="fixer">
<div class="textlayer">
{block:Title}
{/block:Title}<div class="imgfixer">{Body}</div>
<div class="question">
<span class="asker"><b>{Asker}:</b></span>
<div class="pregunta">
<div class="asker-question">{Question}</div>
</div>
</div>
{block:Answerer}
<div class="answer">
<div class="answerer">{Answerer}</div>
<div class="answerer-answer">{Answer}</div>
</div>
{/block:Answerer}
<div class="replies">
{Replies}
</div>
</div>
<div class="fecha">
size="13"}</a></li>

{/block:NoteCount}
</a></li>
</ol>
</div>
{block:IfShowTags}
{block:Tags}
{/block:Tags}
</div>
{/block:HasTags}
{/block:IfShowTags}
</div>
{/block:PostNotes}
</div></div>
</li>
{/block:Answer}

{block:Photo}
<li class="post photo">
<div class="fixer">
<a href="{Permalink}"><img src="{PhotoURL-500}"
alt="{PhotoAlt}"/></a>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
<div class="fecha">
size="13"}</a></li>

{/block:NoteCount}
</a></li>
</ol>
</div>
{block:IfShowTags}
{block:Tags}
{/block:Tags}
</div>
{/block:HasTags}
{/block:IfShowTags}
</div>
{/block:PostNotes}</div></div>
</li>
{/block:Photo}

{block:Panorama}
<li class="post panorama">
<div class="fixer">
{LinkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}
{block:Caption}
{/block:Caption}
<div class="fecha">
size="13"}</a></li>

{/block:NoteCount}
</a></li>
</ol>
</div>
{block:IfShowTags}
{block:Tags}
{/block:Tags}
</div>
{/block:HasTags}
{/block:IfShowTags}
</div>
{/block:PostNotes}</div>
</div>
</li>
{/block:Panorama}

{block:Photoset}
<li class="post photoset">
<div class="fixer">
{Photoset}
{block:Caption}
{/block:Caption}
<div class="fecha">
size="13"}</a></li>

{/block:NoteCount}
</a></li>
</ol>
</div>
{block:IfShowTags}
{block:Tags}
{/block:Tags}
</div>
{/block:HasTags}
{/block:IfShowTags}
</div>
</div>
</li>
{/block:Photoset}

{block:Quote}
<li class="post quote">
<div class="fixer">
<div class="bigger">"{Quote}"</div>
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
<div class="fecha">
size="13"}</a></li>

{/block:NoteCount}
</a></li>
</ol>
</div>
{block:IfShowTags}
{block:Tags}
{/block:Tags}
</div>
{/block:HasTags}
{/block:IfShowTags}
</div>
</div>
</li>
{/block:Quote}

{block:Link}
<li class="post link">
<div class="fixer">
{block:Description}
<div class="description">{Description}</div>
<div class="bigger"><a href="{URL}" class="link"
{Target}>{Name}</a></div>
<div class="fecha">
size="13"}</a></li>

{/block:NoteCount}
</a></li>
</ol>
</div>
{block:IfShowTags}
{block:Tags}
{/block:Tags}
</div>
{/block:HasTags}
{/block:IfShowTags}
</div>
</div>
</li>
{/block:Link}

{block:Chat}
<li class="post chat">
<div class="fixer">
{block:Title}
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label"><b>{Label}</b></span>
{/block:Label}{Line}
</li>
{/block:Lines}
</ul>
<div class="fecha">
size="13"}</a></li>

{/block:NoteCount}
</a></li>
</ol>
</div>
{block:IfShowTags}
{block:Tags}
{/block:Tags}
</div>
{/block:HasTags}
{/block:IfShowTags}
</div>
</div>
</li>
{/block:Chat}

{block:Video}
<li class="post video">
<div class="fixer">
{Video-400}
{block:Caption}
{/block:Caption}
<div class="fecha">
size="13"}</a></li>

{/block:NoteCount}
</a></li>
</ol>
</div>
{block:IfShowTags}
{block:Tags}
{/block:Tags}
</div>
{/block:HasTags}
{/block:IfShowTags}
</div>
</div>
</li>
{/block:Video}

{block:Audio}
<li class="post audio">
<div class="fixer">
{AudioEmbed-400}
{block:Caption}
{/block:Caption}
<div class="fecha">
size="13"}</a></li>

{/block:NoteCount}
</a></li>
</ol>
</div>
{block:IfShowTags}
{block:Tags}
{/block:Tags}
</div>
{/block:HasTags}
{/block:IfShowTags}
</div>
</div>
</li>
{/block:Audio}
{/block:Posts}
</ul>
</div>
<div id="footer">
{block:Pagination}
<div class="pagination textlayer">
<div style="width: 100px; text-align: right;">
{block:PreviousPage}
<a class="triangle2" href="{PreviousPage}"> Previous </a>
{/block:PreviousPage}
</div>
<div>
{block:NextPage}
<a class="triangle2" href="{NextPage}"> Next</a>
{/block:NextPage}
</div>
</div>
{/block:Pagination}
<br><span class="credits">⋆ by <a

href="https://palemona.tumblr.com/">@palemona ⋆</a></span>
</div>


<div id="myModal" class="modal">

<div class="modal-content">
{block:IfShowWindowImg}
<div class="avatar">
<img src="{image:Custom dialogue img}" />
</div>
{/block:IfShowWindowImg}
<div class="message">
<p>
<b>{Title}:</b><br/>
{text:Window Text}</p>
<ul id="links_box">
</ul>
</div>
<span class="close">×</span>
</div>
</div>
<script>
window.onscroll = function() {
scrollFunction();
fixednav();
};
var navbar = document.getElementById("descontainer");
var sticky = navbar.offsetTop;
function fixednav() {
var x = window.matchMedia("(min-width: 700px)");
if (x.matches) {
if (window.pageYOffset >= sticky) {

navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
}
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("top_button").style.display = "flex";
} else {
document.getElementById("top_button").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var raw = "{text:More Links}";

var links =raw.split(',');
var links_box = document.getElementById("links_box");
for(var i=0; i<links.length; i++){

if(i%2 == 0){
links_box.innerHTML += "<li><a class='l1' target='_blank'
href='"+links[i]+"' /><span class='triangle'>▶</span> "+links[i+1]+"</a></li>";
}
}
</script>
<button onclick="topFunction()" id="top_button" title="Go to top" style="display:

block;"><a href="#">▲</a></button>
</body>
</html>

Yk The Drill Already

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Yk The Drill Already

Uploaded by

Copyright:

Available Formats

<!

a:hover, a:visted, a:active {

.notes li, .chat li {

@media only screen and (max-width: 1024px) {

@media only screen and (max-width: 769px) {

.post, .post img, #desc {

@media only screen and (max-width: 450px) {

.like .liked + svg path {

@media only screen and (max-width: 769px) {

<li class="notes"><a href="{Permalink}"

<li class="notes"><a href="{Permalink}"

<li class="notes"><a href="{Permalink}"

<li class="notes"><a href="{Permalink}"

<li class="notes"><a href="{Permalink}"

<li class="notes"><a href="{Permalink}"

<li class="notes"><a href="{Permalink}"

<li class="notes"><a href="{Permalink}"

<li class="notes"><a href="{Permalink}"

<li class="notes"><a href="{Permalink}"

<br><span class="credits">⋆ by <a

if (window.pageYOffset >= sticky) {

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

var raw = "{text:More Links}";

for(var i=0; i<links.length; i++){

<button onclick="topFunction()" id="top_button" title="Go to top" style="display:

You might also like