page 01: starkov

<!doctype html>

<!--------------------------------------------------------------------------
============================================================================
============================================================================


                ╭━╮╭━┳━━┳━━━┳━━━━┳╮╱╱╭━━━┳━━━━┳━━━┳━━━╮
                ┃┃╰╯┃┣┫┣┫╭━╮┃╭╮╭╮┃┃╱╱┃╭━━┫╭╮╭╮┃╭━╮┃╭━━╯
                ┃╭╮╭╮┃┃┃┃╰━━╋╯┃┃╰┫┃╱╱┃╰━━╋╯┃┃╰┫┃╱┃┃╰━━╮
                ┃┃┃┃┃┃┃┃╰━━╮┃╱┃┃╱┃┃╱╭┫╭━━╯╱┃┃╱┃┃╱┃┃╭━━╯
                ┃┃┃┃┃┣┫┣┫╰━╯┃╱┃┃╱┃╰━╯┃╰━━╮╱┃┃╱┃╰━╯┃╰━━╮
                ╰╯╰╯╰┻━━┻━━━╯╱╰╯╱╰━━━┻━━━╯╱╰╯╱╰━━━┻━━━╯


============================================================================

                               theme by merc
                            mistletoe / grisha

============================================================================
============================================================================

        - poppins by india type foundry
        - cappuccicons
            - https://cappuccicons.com/
        - filtering by magnusthemes

============================================================================

        REGARDING THIS THEME:

        - the theme for MISTLETOE THEMES was created
        by merc (mistletoe) for use on tumblr.com. please
        do not do the following:

            - replicate / reproduce
            - use as "inspiration"
            - frankenstein
                i.e. pick apart and use on your theme
            - steal the code

============================================================================

          basically, don't be /that/ asshole, alright? thanks.

============================================================================

                        !!! HOW TO EDIT THIS THEME !!!

          CTRL + F the phrase "EDIT THIS:" to edit.

          FILTERING

          - each "box" has a "group" assigned to it. make sure to edit
          the "group" part to be what you want it to be so that they are
          the same or the filtering will be by default (aka what it's already
          being sorted by)

============================================================================
============================================================================
--------------------------------------------------------------------------->



<html lang="en">
<head>
  <meta charset="utf-8">

  <!--- EDIT THIS: favicon / icon that displays in the tab --->
  <link rel="shortcut icon" href="https://i.postimg.cc/CLNWp3k2/c.png">

<!--- DO NOT EDIT --->

<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//dl.dropbox.com/s/4jdfup6iccopmej/smt.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>

<script>
$(document).ready(function() {
 var $container = $(".grid"); // the container with all the elements to filter inside
 var filters = {}; //should be outside the scope of the filtering function
 /* --- read the documentation on isotope.metafizzy.co for more options --- */
 var $grid = $container.isotope({
   itemSelector: ".item", // the elements to filter
   percentPosition: true // put true if you use percentage widths, otherwise put false
 });
 $(".option-set a").click(function(e) {
   var $this = $(this); // cache the clicked link
   var filterAttr = "data-filter-value";
   var filterValue = $this.attr(filterAttr); // cache the filter
   var $optionSet = $this.parents(".option-set"); // cache the parent element
   var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
   var filterGroup = filters[group];
   if (!filterGroup) {
     filterGroup = filters[group] = [];
   }
   var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
   var activeClass = "selected", // the class for active links
     exclClass = "exclusive"; // the class for exclusive groups
 comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
   var comboFilter = getComboFilter(filters);
   $grid.isotope({
     filter: comboFilter
   });
   $this.toggleClass(activeClass);
   e.preventDefault();
 });
});
</script>
<script src="//dl.dropbox.com/s/4jdfup6iccopmej/smt.js"></script>

  <!--- EDIT THIS: TITLES --->
  <title>Navigation</title>
  <meta name="description" content="Navigation">
  <meta name="author" content="Mistletoe">
  <!--- STOP EDITING HERE --->

  <style type="text/css">
/*** EDIT THIS: CHANGE YOUR COLORS HERE ***/

:root {
    --accent-color: #cfb57e; /* accent color */
    --background-color: #f5f5f5;
    --font-color: #656565;

}





iframe.tmblr-iframe {
    z-index:9999999!important;
    top:10px!important;
    right:10px!important;
    opacity:0.4;
    filter:invert(1) hue-rotate(180deg);
    -webkit-filter:invert(1) hue-rotate(180deg);
    -o-filter:invert(1) hue-rotate(180deg);
    -moz-filter:invert(1) hue-rotate(180deg);
    -ms-filter:invert(1) hue-rotate(180deg);
    transform:scale(0.6);
    transform-origin:100% 0;
    -webkit-transform:scale(0.6);
    -webkit-transform-origin:100% 0;
    -o-transform:scale(0.6);
    -o-transform-origin:100% 0;
    -moz-transform:scale(0.6);
    -moz-transform-origin:100% 0;
    -ms-transform:scale(0.6);
    -ms-transform-origin:100% 0;
    transition: opacity 0.6s ease-in-out;
    -moz-transition: opacity 0.6s ease-in-out;
    -webkit-transition: opacity 0.6s ease-in-out;
}

iframe.tmblr-iframe:hover { opacity:0.8!important; }
#s-m-t-tooltip{
    max-width:300px;
    z-index:10000000000000000000000000000000000;
    margin: 15px;
    padding: 5px;
    background: #cfb57e;
    font-family: poppins;
    font-size: 12px;
    text-transform: lowercase;
    letter-spacing: 2px;
    font-weight: 500;
    color: #fff;
    border: 1px solid #8f733a;
    border-radius: 3px;
    text-shadow: -1px -1px 0 #8f733a, 1px -1px 0 #8f733a, -1px 1px 0 #8f733a, 1px 1px 0 #8f733a;
    letter-spacing: 1.5px;
}


::-webkit-scrollbar {
  width: 11px;
  height: 11px;
  background-color: #e6e6e6;
}

::-webkit-scrollbar-thumb {
  background-color: #cfb57e;
}

::-webkit-scrollbar,
::-webkit-scrollbar-thumb {
  border: 5px solid #fff;
}

.tmblr-iframe, .iframe-controls–desktop {
    display:none !important;
}



#s-m-t-tooltip{
    max-width:300px;
    z-index:10000000000000000000000000000000000;
    margin: 15px;
    padding: 5px;
    background: var(--accent-color);
    font-family: poppins;
    font-size: 12px;
    text-transform: lowercase;
    letter-spacing: 2px;
    font-weight: 500;
    color: #fff;
    border: 1px solid #8f733a;
    border-radius: 3px;
    text-shadow: -1px -1px 0 #8f733a, 1px -1px 0 #8f733a, -1px 1px 0 #8f733a, 1px 1px 0 #8f733a;
    letter-spacing: 1.5px;
}


body {
    margin: 0px;
    background-color: var(--background-color);
    font: 11px 'poppins';
    color: var(--font-color);

}
#hide {
  background-color: var(--background-color);
  height: 10%;
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 0px;
  left: 0px;
  right: 0px;
}
#top, #left, #right, #bottom {
    position: fixed;
    z-index: 1001;
    background-color: #fff;
}
#top {
    left: 0px;
    right: 0px;
    top: 0px;
    height: 30px;
    width: 100vw;
}
#bottom {
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 30px;
    width: 100vw;
}
#left {
    float: left;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 30px;
    height: 100vh;
}
#right {
    float: right;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 30px;
    height: 100vh;
}
#notif a {
  color: #fff;
  text-decoration: none;
}
#notif span {
  font-size: 30px;
}
#notif {
    float: left;
    position: fixed;
    left: 0px;
    top: 10%;
    background-color: var(--accent-color);
    color: #fff;
    font: 35px 'poppins';
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    z-index: 1002;
    padding: 20px;
    height: 30px;
    width: 30px;
}
.quickNav {
  float: left;
  position: fixed;
  left: 70px;
  background-color: #fff;
  width: calc(100vw - 150px);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1001;
    top: 10%;
  padding: 26px;
}

.quickNav a {
  display: block;
  flex: 1;
  color: var(--font-color);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 12px;
  transition-duration: 0.5s;
  text-align: center;
}
.quickNav a:hover {
  letter-spacing: 4px;
}
.quickNav a span {
      background-image: -webkit-gradient(linear,left bottom,left top,color-stop(50%,#fdf5e5),color-stop(50%,transparent));
    background-image: -webkit-linear-gradient(bottom,#fdf5e5 50%,transparent 50%);
    background-image: linear-gradient(0deg,#fdf5e5 50%,transparent 50%);
}

.grid {
  margin: 13% 50px 50px;
}
@media screen and (max-width: 1028px) {
  .grid {
    margin-top: 15%;
  }
}
.grid h1 {
  margin: 0px;
  padding: 0px;
  line-height: 100%;
  font: 16pt 'poppins';
  font-weight: 500;
  margin-bottom: 20px;
}
.grid h1 span {
      background-image: -webkit-gradient(linear,left bottom,left top,color-stop(50%,#fdf5e5),color-stop(50%,transparent));
    background-image: -webkit-linear-gradient(bottom,#fdf5e5 50%,transparent 50%);
    background-image: linear-gradient(0deg,#fdf5e5 50%,transparent 50%);
}
.grid h3 {
 text-align: center;
}
.grid h3 span {

      background-image: -webkit-gradient(linear,left bottom,left top,color-stop(50%,#fdf5e5),color-stop(50%,transparent));
    background-image: -webkit-linear-gradient(bottom,#fdf5e5 50%,transparent 50%);
    background-image: linear-gradient(0deg,#fdf5e5 50%,transparent 50%);
}
.grid a {
  display: block;
  text-decoration: none;
  margin: 8px 10px 0px;
  background-color: #fbfbfb;
  border: 1px solid var(--background-color);
  padding: 5px;
  text-decoration: none;
  letter-spacing: 2px;
  font: 11px 'poppins';
  font-weight: 500;
  color: #929292;
  text-align: right;
  transition-duration: 0.5s;
  text-transform: lowercase;
}
.grid a:hover {
  letter-spacing: 4px;
  color: var(--font-color);
}
.grid .item {
  display: block;
  padding: 30px;
  background: #fff;
  width: 23%;
  float: left;
  margin: 1%;
  box-sizing: border-box;
}

.selected {
  color: #fff;
  border-bottom-color: #97c5e0;
  font-weight: bold;
}

h2 {
  margin: 0;
}

.log {
  position: absolute;
  right: 0;
  color: #999;
  padding: 10px;
  top: 50%;
}

#mistletoe {
    float: right;
    right: 20px;
    bottom: 20px;
    background-color: var(--accent-color);
    padding: 10px;
    border-radius: 100%;
    z-index: 1000001;
    position: fixed;
    font-size: 15px;
    height: 15px;
    width: 15px;
    text-align: center;
    line-height: 100%;
    color: #fff;
}
#mistletoe a i {
    color: #fff !important;
    text-decoration: none;
}
#mistletoe a {
    text-decoration: none;
}



  </style>
<script src="//pull.cappuccicons.com/cpf.js"></script>

<script>
        (function($){
    $(document).ready(function(){
    $("[title]").style_my_tooltips({
    tip_follows_cursor:true,
    tip_delay_time:130,
    tip_fade_speed:130,
    attribute:"title"
    });
    });
    })(jQuery);
</script>
</head>

<body>
<div id="mistletoe"><a href="https://mistletoe.tumblr.com" title="theme by mistletoe"><i class="cp cp-mistletoe"></i></a></div>
<div id="top"></div><div id="bottom"></div><div id="left"></div><div id="right"></div><div id="hide"></div>
<div id="notif">

<!--- EDIT THIS: YOUR BLOG URL GOES HERE--->
<a href="http://mistletoe.tumblr.com" title="back to blog">
  <!--- EDIT THIS ICON --->
  <span class="cp cp-mistletoe"></span>
</a>

</div>

<!--- NAVIGATION --->

<!--- EDIT THIS: change these to be your groups.

      *** PLEASE READ CAREFULLY ***

      --- this is your navigation panel

      DO NOT EDIT "group1".
      Edit ONLY where it says data-filter-value=".gen"> and so on.
      In this example, .gen, .cre, .res, and .rec are MY filter groups.
      CHANGE THESE VALUES TO MATCH WHAT YOU WANT.
      Change the titles to match your categories.
--->
<div class="quickNav filter option-set exclusive" data-filter-group="group1">
  <a href="#" data-filter-value="" class="selected"><span>clear filter</span></a>
  <a href="#" data-filter-value=".gen"><span>general</span></a>
  <a href="#" data-filter-value=".cre"><span>creations</span></a>
  <a href="#" data-filter-value=".res"><span>resources</span></a>
  <a href="#" data-filter-value=".rec"><span>recs</span></a>
</div>
<!--- END NAVIGATION --->


<div class="grid">

<!--- BOX 1 --->
  <div class="item res cre">

  <!--- EDIT THIS: filter group + links
        MUST be changed to at least ONE of your categories
        above, i have "res" AND "cre" so put a space between them
        but if it's just one category, only type one --->

   <!--- EDIT THIS: box title --->
   <h1><span>themes by merc</span></h1>
   <a href="http://mistletoe.tumblr.com/tagged/theme*">all themes</a> <!--- this is a LINK --->

   <!--- EDIT THIS: this is a subheading. change the heading. --->
   <h3><span>by type</span></h3>
   <!--- EDIT THIS: these are the links under your subheading. --->
   <a href="/">link name</a>
   <a href="/">link name</a>
   <a href="/">link name</a>
   <a href="/">link name</a>

   <!--- EDIT THIS: this is a subheading. change the heading. --->
   <h3><span>header type</span></h3>
   <!--- EDIT THIS: these are the links under your subheading. --->
   <a href="/">link name</a>
   <a href="/">link name</a>
  </div>
<!--- END BOX 1--->

<!--- BOX 2 --->
 <div class="item gen">
  <!--- EDIT THIS: filter group + links
        "gen" should be changed to your filter name --->

   <!--- EDIT THIS: box title --->

   <h1><span>quick links</span></h1>
   <a href="/">link name</a>
   <a href="/">link name</a>
   <a href="/">link name</a>
   <a href="/">link name</a>
  </div>

<!--- END BOX 2 --->

<!--- BOX 3 --->
 <div class="item res">
  <!--- EDIT THIS: filter group + links
        "res" should be changed to your filter name --->


   <!--- EDIT THIS: box title --->
   <h1><span>resources</span></h1>
   <a href="/">link name</a>
   <a href="/">link name</a>
   <a href="/">link name</a>
   <a href="/">link name</a>
  </div>
<!--- END BOX 3 --->


</body>
</html>