aegle — network i

<!DOCTYPE html>
<head>

<!--

                            aegle — network i
                             by divinethemes


› do not steal any part of this code
› edit however you want, but only for personal use
› send any questions to divinethemes.tumblr.com/ask
› thank you for using! <3

                                 —

› ctrl/command + f,  type "#ede1cf" and replace with desired                      color to change all the link hover colors at once
› your customize page may show scrolling instead of the hover effect bc the window that your page is displayed on now is too small to fit three columns - check your actual blog if you think something is wrong
› if you change any of the widths of the member elements (icon, desc, etc.) pls note that it may affect how they'll fit on smaller/bigger screens
    ›  i will not assist with redjusting sizes since they have already been made        to be fit on (hopefully) all screen sizes

-->

<title>members — {Name}</title>
<link rel="shortcut icon" href="{Favicon}">

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<!-- tooltips script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

<!--font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<!-- honeybee icons by @themehive -->
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">

<style type="text/css">

@keyframes fadein {from {opacity:0;}to {opacity:1;}}
@-moz-keyframes fadein {from {opacity:0;}to {opacity:1;}}
@-webkit-keyframes fadein {from {opacity:0;}to {opacity:1;}}
@-o-keyframes fadein {from {opacity:0;}to {opacity: 1;}}

/*-- scrollbar --*/
::-webkit-scrollbar {
    width:6px;
    background:#fafafa; /* scrollbar bg color - i recommend making it the same as the desc bg */
}

::-webkit-scrollbar-thumb {
    background:#ede1cf; /* scrollbar color */
}

::-webkit-scrollbar,::-webkit-scrollbar-thumb {
    border:5px solid #fafafa; /* make this same as desc bg if you change that color */
    border-left:none;
}

/*-- selection --*/
::-moz-selection { background:#eaeaea; color:#222; }
::selection { background:#eaeaea; color:#222; }

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

/*-- tooltips --*/
#s-m-t-tooltip {
    position:absolute;
    padding:0px 5px 0px 5px;
    margin-top:30px;
    color:#444;
    background-color:#fafafa;
    font-family:'Fira Sans', sans-serif;
    font-size:9.5px;
    font-style:italic;
    text-transform:lowercase;
    text-align:center;
    border:1px solid #eee;
    letter-spacing:0.5px;
    z-index:999999;
}

/*--general--*/
body {
    background-color:#fff;
    font-family:'Fira Sans', sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:190%;
    text-decoration:none;
    color:#555;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
}

body, * {
    cursor:auto;
}

a {
    text-decoration:none;
    color:#999; /* link color */
    -webkit-transition:0.4s ease-in;
    -moz-transition:0.4s ease-in;
    -o-transition:0.4s ease-in;
}

a:hover {
    color:#ede1cf; /* link hover color */
    text-decoration:none;
    cursor:pointer;
    -webkit-transition:0.4s ease-in;
    -moz-transition:0.4s ease-in;
    -o-transition:0.4s ease-in;
}

b, strong {
    font-weight:700;
    color:#222;
}

i, em {
    font-style:italic;
}

blockquote {
    padding-left:10px;
    border-left:1px solid #eee;
    margin:0px;
}

/*-- credit // no touch you mortal (except the hover color) --*/
.c {
    position:fixed;
    bottom:15px;
    right:20px;
    font-size:10.5px;
    -webkit-transition:0.7s ease-in;
    -moz-transition:0.7s ease-in;
    -o-transition:0.7s ease-in;
}

.c a {
    color:#555;
}

.c a:hover {
    color:#ede1cf; /* you can change this */
}

.c:hover {
    transform:rotate(540deg);
    -webkit-transition:0.7s ease-in;
    -moz-transition:0.7s ease-in;
    -o-transition:0.7s ease-in;
}

.c i:hover {
    cursor:pointer;
}

/*-- header --*/
#header {
    position:relative;
    margin:60px auto 50px auto;
    text-align:center;
}

#header h1 {
    font-family:'Playfair Display', serif;
    font-size:16px;
    letter-spacing:1px;
    text-transform:lowercase;
    font-weight:600;
    font-style:normal;
}

#header img {
    width:50px;
    height:50px;
    border-radius:50%;
    background:#fafafa;
    border:1px solid #eee;
    padding:6px;
    margin:auto;
}

.links {
    width:366px;
    margin:auto;
}

.links a {
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    font-style:italic;
    font-size:12px;
    display:inline-block;
    padding:5px 8px 8px 8px;
    width:45px;
    line-height:200%;
    margin:-3px;
    text-align:center;
}

.links a:before {
    content:'';
    display:block;
    width:0;
    float:right;
    height:2px;
    margin-top:-6px;
    background:#ede1cf; /* header link hover top border */
    transition: width .5s;
}

.links a:after {
    content:'';
    display:block;
    width:0;
    height:2px;
    margin-bottom:-9px;
    background:#ede1cf; /* header link hover bottom border */
    transition: width .5s;
}

.links a:hover:before, .links a:hover:after {
    width: 100%;
}

.hdesc {
    margin:0 auto 15px auto;
    width:330px; /* you may want to change according to the number of links
                    (link width + 16px - 6px) * # of links */
}

/*-- members --*/
#members {
    position:relative;
    width:calc((280px + 60px) * 3); /* (box width + margin*2) * # of columns */
    margin:0 auto;
}

.member {
    float:left;
    width:280px;
    height:150px;
    margin:30px;
}

.member:nth-last-child(1) {
    margin-bottom:250px; /* increase/decrease this depending on the longest length of a desc in the last row */
}

.left {
    float:left;
    width:110px;
    height:110px;
    margin-top:5px;
    display:inline;
}

.left img {
    width:110px;
    height:110px;
    border-radius:4px;
    display:inline;
    margin-right:15px;
}

h1 {
    margin-top:6px;
    text-align:center;
    font-family:'Karla', sans-serif;
    font-weight:500;
    font-style:italic;
    font-size:15px;
    letter-spacing:0.5px;
}

.desc {
    float:right;
    width:125px;
    height:88px; /* change max-height to the same value */
    max-height:88px; /* and if you change go down to the media queries and follow instructions */
    padding:10px;
    margin-top:5px;
    background:#fafafa; /* desc backgound color */
    border-radius:4px;
    border:1px solid #eee; /* desc box border color */
    text-align:justify;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:5; /* if you do change the height of the desc change this to whatever new number of lines there are */
    -webkit-box-orient:vertical;
    transition: max-height 0.25s ease-out; /* don't change this! */
}

.desc a {
    border-bottom:1px solid #eee; /* desc link border bottom color */
}

.desc a:hover {
    border-bottom:1px solid #ede1cf; /* desc link border bottom hover color */
}

.member:hover .desc {
    height:auto;
    display:-webkit-box;
    -webkit-line-clamp:99999999;
    -webkit-box-orient:vertical;
    min-height:88px;
    max-height:5000px;
    transition: max-height 3.5s ease-in;
    opacity:0.99;
}

.url {
    text-align:center;
    margin-top:4px;
}

.url a {
    font-size:11px;
    font-style:italic;
    letter-spacing:0.3px;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    display:inline-block;
}

.url a:hover {
    color:#999;
}

.url a:before, .url a:after {
    content:'';
    display:block;
    width:0;
    height:1px;
    background:#ede1cf; /* url hover border top and bottom color */
    transition:width .5s;
}

.url a:before {
    margin-top:-1px;
}

.url a:after {
    float:right;
    margin-bottom:-1px;
}

.url a:hover:before, .url a:hover:after {
    width: 100%;
}

/*-- media queries --*/
@media only screen
and (max-width: 960px){
html, body {
  overflow-x: hidden;
  max-width:100vw;
}
body {
  position: relative;
}
}

@media only screen
and (max-width : 600px){
#members {
    width:100vw;
}
}

@media only screen
and (max-width: 960px)
and (min-width: 601px) {
#members {
    width:calc((280px + 60px) * 2);
}
}

@media only screen
and (min-width: 1700px) {
#members {
    width:calc((280px + 60px) * 4);
}
}

@media only screen
and (max-width : 600px) {
.member:nth-last-child {
    margin-bottom:60px;
}
.member {
    float:none;
    position:relative;
    margin:60px auto;
}
}

@media only screen
and (max-width : 960px) {
.desc {
    overflow:auto;
    display: -webkit-box;
    -webkit-line-clamp:9999999999;
    -webkit-box-orient:vertical;
}
/* change height and max-height to the same value as you did above */
.member:hover .desc {
    height:88px;
    max-height:88px;
    overflow:auto;
}
}

@media only screen
and (max-width: 960px)
and (min-width: 601px) {
.member:nth-last-child {
    margin-bottom:30px;
}
}

@media only screen
and (min-width: 961px) {
.member:hover, .left img:hover, .desc:hover, .member h1:hover {
    cursor:help;
}
}


</style>
</head>

<body>

<!-- header start ------------------------------------------------------------->
<div id="header">
<img src="{PortraitURL-64}"/> <!-- replace {PortraitURL-64} w/ an image url or your default icon will show up -->
<h1>members</h1>

<div class="hdesc">
a description here perhaps
</div>

<!-- header links -->
<div class="links">
<a href="/">index</a>
<a href="/ask">ask</a>
<a href="">alpha</a>
<a href="">beta</a>
<a href="">gamma</a>
<a href="http://divinethemes.tumblr.com">credit</a>
</div>

</div>
<!-- header end --------------------------------------------------------------->


<!-- member template :

<div  class="member">
<div class="left">
    <img src="icon image url here"/>
    <div class="url"><a href="url here">username/url</a></div>
</div>
    <h1>name</h1>

<div class="desc">
description here
</div>
</div>


members start ----------------------------------------------------------------->
<div id="members">


<div  class="member">
<div class="left">
    <img src="icon image url here"/>
    <div class="url"><a href="url here">username/url</a></div>
</div>
    <h1>name</h1>

<div class="desc">
description here
</div>
</div>


<div  class="member">
<div class="left">
    <img src="icon image url here"/>
    <div class="url"><a href="url here">username/url</a></div>
</div>
    <h1>name</h1>

<div class="desc">
description here
</div>
</div>


<div  class="member">
<div class="left">
    <img src="icon image url here"/>
    <div class="url"><a href="url here">username/url</a></div>
</div>
    <h1>name</h1>

<div class="desc">
description here
</div>
</div>


</div>
<!-- members end -------------------------------------------------------------->


<!-- credit // no touch you mortal -->
<div class="c"><a title="divine themes" target="_blank" href="http://divinethemes.tumblr.com"><i class="fas fa-crown"></i></a>
</div>


</body>
</html>