page 04: cotton candy navi

<!DOCTYPE html>
<head>
<title>navigation</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!---

    cotton candy navi by SAGE / https://demontimes.tumblr.com

    - search "edit here"
    - feel free to send me an ask if you have any questions!

    CREDITS:
    - phosphor icons / https://phosphoricons.com/
    - tippy.js tooltips / https://atomiks.github.io/tippyjs/
    - google fonts / https://fonts.google.com/

--->

<!----- GOOGLE FONTS ---->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">

<!---- ICONS ---->
<script src="https://unpkg.com/phosphor-icons"></script>
<script src="https://unpkg.com/[email protected]"></script>

<!---- TOOLTIPS ---->

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>

<!----- CSS ----->

<style type="text/css">

/*--- EDIT HERE ---*/

:root {
  /*--- COLORS ---*/
  --background: #eee;
  --content-background: #f4f4f4;
  --text: #7b7b7b;
  --link: #df7cb7;
  --accent: #c67ca8;
  --title: #e2a3c9;
  --borders: #dadada;

  /*--- FONTS ---*/
  --body-font: 'Karla';
  --font-size: 15px;

  /*--- BOX HEIGHTS (boxes will also scroll automatically) ---*/
  --link-height:180px;
  --icon-height:60px;
}

/*----- TOOLTIPS -----*/

.tippy-tooltip.custom-theme {
    background-color: var(--title);
    color: var(--background);
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing:.2em;
    font-size: 0.8em;
    border-radius:5px;
    border:1px solid var(--borders);
    margin: 5px 0;
}

/*---- SCROLLBAR ----- */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: var(--content-background);
}

::-webkit-scrollbar-track {
    background-color: var(--content-background);
    border-radius: 5px;}

::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    min-height: 15px;
    min-width: 15px;
    border-radius: 5px;
}

body {
    font-family: var(--body-font), sans-serif;
    font-size: var(--font-size);
    color: var(--text);
    background-color: var(--background);
    line-height: 160%;
    letter-spacing: 0.2px;
    word-wrap: break-word;
}

a {
    color: var(--link);
    text-decoration:none;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

a:hover {
    color: var(--accent);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

p {margin-top: 1.2em;}

h2 {font-size:1.1em;letter-spacing:1px;color:var(--title);}

small {font-size: 0.9em;}
big {font-size: 1.1em;}
b, bold, strong {color: var(--title);}

blockquote {
    padding: 0 0 0 1em;
    border-left: 1px solid var(--borders);
    margin: 1em 0 1em 1em;
}

li {list-style-type:circle;}
li::marker {color:var(--accent);}

.tmblr-iframe-compact .tmblr-iframe--unified-controls {
    z-index: 999999999!important;
    opacity:0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
    opacity:1;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

/*---- SIDE LINKS ----*/

#side-links {
    position:fixed;
    height:100vh;
    width:60px;
    background:var(--background);
    border-right:1px solid var(--borders);
    left: 0;
    right: 0;
    top: 0;
    z-index:10000000000000000000001;
}

#side-links img {
    position:fixed;
    top:20px;
    left:9px;
    border-radius:100%;
    width:35px;
    height:35px;
    padding:2px;
    background:var(--title);
    border:1px solid var(--borders);
}

#side-links nav {
    transform:translateY(-50%);
    margin-top:50vh;
}

#side-links nav i {
    font-size:1.2em;
    color:var(--background);
    background:var(--accent);
    padding:8px;
    border-radius:30px;
    margin:10px;
    border:1px solid var(--borders);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

#side-links nav i:hover {
    color:var(--accent);
    background:var(--background);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

#side-links .nav-cr {
    position:fixed;
    bottom:10px;
}

.nav-cr i {
    font-size:1.2em;
    color:var(--background);
    background:var(--title);
    padding:8px;
    border-radius:30px;
    margin:10px;
    border:1px solid var(--borders);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.nav-cr i:hover {
    color:var(--title);
    background:var(--background);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

/*----- CONTENT -----*/

#content {
    position:relative;
    margin-left:70px;
    margin-bottom:50px;
    margin-top:50px;
    padding-bottom:20px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

#info-wrap {
    width:900px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

#info {
    width:44%;
    padding:20px;
}

.top-wrap {
    width:100%;
    display:flex;
    justify-content:space-evenly;
    flex-wrap:wrap;
}

.bottom-wrap {
    width:100%;
    display:flex;
    justify-content:space-evenly;
    flex-wrap:wrap;
}

.title {
    text-align:center;
    margin-bottom:.5em;
}

.title b {
    display:inline-block;
    vertical-align:top;
    margin-top:10px;
    font-size:1.3em;
    font-weight:bold;
    color:var(--title);
}

.title i {
    font-size:1.4em;
    color:var(--accent);
    padding:.5em;
}

.subtitle {
    display:inline-block;
    font-size:1.1em;
    font-weight:bold;
    color:var(--title);
    margin:.5em;
}

.linkwrap {
    border-radius:5px;
    background:var(--content-background);
    border:1px solid var(--borders);
    padding:1em;
    height:var(--link-height);
    overflow:auto;
}

.linkwrap a {
  display: inline-block;
  position: relative;
  border-bottom:2px solid var(--borders);
}

.linkwrap a:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -2px;
  left: 0;
  background:var(--link);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.linkwrap a:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.linkblock {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:wrap;
}

.linkblock li {
    list-style-type:none;
    margin:.5em;
}

.iconwrap {
    border-radius:5px;
    background:var(--content-background);
    border:1px solid var(--borders);
    padding:1em;
    height:var(--icon-height);
    overflow:auto;
}

.iconblock {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
}

.iconblock i {
    font-size:1.3em;
    padding:8px;
    margin:.5em;
    border-radius:100%;
    background:var(--link);
    color:var(--content-background);
    border:1px solid var(--borders);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.iconblock i:hover {
    background:var(--content-background);
    color:var(--link);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

/*---- RESPONSIVENESS ----*/

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

    .tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;}
    #info {width:100%;}
    .top-wrap, .bottom-wrap {flex-wrap:wrap;justify-content:center;}
    .linkwrap, .iconwrap {height:auto;}
    .iconblock {justify-content:space-around;}
}

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

    #content {margin:auto;}
    #side-links {display:none;}
    tumblr_controls, .tmblr-iframe{display:none!important;}
}

</style>
</head>
<body>

<!----- EDIT HERE ---->

<!--- SIDEBAR --->
<div id="side-links">
    <img src="{portraiturl-64}">
    <nav>
        <a title="home" href="/"><i class="ph-house"></i></a>
        <a title="message" href="/"><i class="ph-chat-circle"></i></a>
        <a title="link" href="/"><i class="ph-flower"></i></a>
        <a title="link" href="/"><i class="ph-flower-lotus"></i></a>
        <a title="link" href="/"><i class="ph-sparkle"></i></a>
        <a title="link" href="/"><i class="ph-butterfly"></i></a>
    </nav>
<!-- CREDIT: DON'T TOUCH -->
    <div class="nav-cr">
        <a title="page by sage" href="https://demontimes.tumblr.com"><i class="ph-ghost"></i></a>
    </div>
</div>

<!--- main content --->
<div id="content">
<div id="info-wrap">

<div class="top-wrap">

<!--- start of link boxes

- format for links:

        <div class="linkblock">
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </div>
- if you want a subtitle put it right above <div class="linkblock">

- format if you want an entirely new link box:

    <div id="info">
    <div class="title"><i class="ph-star"></i><b>heading</b></div>
        <div class="linkwrap">

        <div class="subtitle">subtitle here</div>
        <div class="linkblock">
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </div>

        <div class="subtitle">subtitle</div>
        <div class="linkblock">
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </div>

        </div>
    </div>

---->
    <div id="info">
    <div class="title"><i class="ph-cookie"></i><b>heading</b></div>
        <div class="linkwrap">

        <div class="subtitle">subtitle</div>
        <div class="linkblock">
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </div>

        <div class="subtitle">subtitle</div>
        <div class="linkblock">
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </div>

        </div>
    </div>

    <div id="info">
    <div class="title"><i class="ph-cloud"></i><b>heading</b></div>
        <div class="linkwrap">

        <div class="subtitle">subtitle</div>
        <div class="linkblock">
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </div>

        <div class="subtitle">subtitle</div>
        <div class="linkblock">
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </div>

        </div>
    </div>

    <div id="info">
    <div class="title"><i class="ph-planet"></i><b>heading</b></div>
        <div class="linkwrap">

        <div class="subtitle">subtitle</div>
        <div class="linkblock">
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </div>

        <div class="subtitle">subtitle</div>
        <div class="linkblock">
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </div>
        </div>
    </div>

    <div id="info">
    <div class="title"><i class="ph-moon-stars"></i><b>heading</b></div>
        <div class="linkwrap">

        <div class="subtitle">subtitle</div>
        <div class="linkblock">
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </div>

        <div class="subtitle">subtitle</div>
        <div class="linkblock">
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </div>
        </div>
    </div>

<!---- new link boxes go above this line --->
</div>

<div class="bottom-wrap">

<!---- start of icon boxes

- feel free to change the icons to whatever you want
- format for new icon boxes:

    <div id="info">
    <div class="title"><i class="ph-star"></i><b>heading</b></div>
    <div class="iconwrap">

        <div class="iconblock">
            <a href="/"><i class="ph-tag"></i></a>
            <a href="/"><i class="ph-tag"></i></a>
        </div>
    </div>
    </div>
--->
    <div id="info">
    <div class="title"><i class="ph-mountains"></i><b>heading</b></div>
    <div class="iconwrap">

        <div class="iconblock">
            <a href="/"><i class="ph-tag"></i></a>
            <a href="/"><i class="ph-tag"></i></a>
            <a href="/"><i class="ph-tag"></i></a>
            <a href="/"><i class="ph-tag"></i></a>
        </div>
    </div>
    </div>

    <div id="info">
    <div class="title"><i class="ph-sun-horizon"></i><b>heading</b></div>
    <div class="iconwrap">

        <div class="iconblock">
            <a href="/"><i class="ph-tag"></i></a>
            <a href="/"><i class="ph-tag"></i></a>
            <a href="/"><i class="ph-tag"></i></a>
            <a href="/"><i class="ph-tag"></i></a>
        </div>
    </div>
    </div>

<!---- new icon boxes go above this line ---->
</div>

</div>
</div>


<script>

// tooltips

tippy('[title]', {
    theme: 'custom',
    arrow: false,
    followCursor: true,
    delay: 100,
    placement: 'top',
    zIndex: 9999999999,
    maxWidth: 400,

    content(reference) {
      const title = reference.getAttribute('title');
      reference.removeAttribute('title');
      return title;
    },
 });

</script>


</body>
</html>