View difference between Paste ID: wzLcQZU0 and XNfgiTuy

 <!DOCTYPE html>
 <head>
 
 <!--
 
     NETWORK III
         by alydae
 
-        released: may 20, 2018
+
-        last updated: november 19, 2024
+
             - direct questions to enchantedthemes.tumblr.com
 
     thank you for using!!!
 
 -->
 
 <title>members</title>
 <link rel="shortcut icon" href="{Favicon}">
 
 <!-- scripts - DO NOT TOUCH -->
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
 <script src="https://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>
 
 <!-- custom font -->
 
 <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
 
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
 <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
 
-<link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
+
 
 
 @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; }
 }
 
 @-ms-keyframes fadein {
     from { opacity:0; }
     to   { opacity:1; }
 }
 
 @-o-keyframes fadein {
     from { opacity:0; }
     to   { opacity:1; }
 }
 
 /*-- selection --*/
 
 ::-moz-selection { background:#eee; color:#222; }
 ::selection { background:#eee; color:#222; }
 
-::-moz-selection { background:var(--accent); color:var(--title); }
+
-::selection { background:var(--accent); color:var(--title); }
+
 ::-webkit-scrollbar {
     width:1px;
     height:2px;
 }
 
 ::-webkit-scrollbar-thumb { background-color:#aaa; } /* scrollbar colour */
 
 /*-- tooltips --*/
-::-webkit-scrollbar-thumb { background-color:var(--text); }
+
 #s-m-t-tooltip {
     color:#666;
     background-color:#fafafa;
     font-size:8px;
-    color:var(--text);
+
-    background-color:var(--accent);
+
-    font-size:calc(var(--font-size) - 2px);
+
     text-align:center;
     position:absolute;
     padding:0px 5px 0px 5px;
     margin-top:30px;
     border:1px solid #eee;
     z-index:9999;
 }
-    border:1px solid var(--borders);
+
 /*-- tumblr controls --*/
 
 .tmblr-iframe, .iframe-controls–desktop {
     display:none !important;
 }
 
-    display:none!important;
+
 
 body {
-/*-- change all variables here --*/
+    color:#666; /* text colour */
     background-color:#fff; /* background colour */
-:root {
+
-    --background:#fff;
+
-    --accent:#fafafa;
+    font-size:10px;
-    --text:#666;
+
-    --links:#444;
+
-    --links-hover:#bad1e7;
+
-    --title:#222;
+
-    --borders:#eee;
+
-    --font-size:10px;
+
     -webkit-animation: fadein 1.5s;
     -moz-animation: fadein 1.5s;
     -o-animation: fadein 1.5s;
     animation: fadein 1.5s;
 }
-    color:var(--text);
+
-    background-color:var(--background);
+
     text-decoration:none;
     color:#444; /* links colour */
-    font-size:var(--font-size);
+
     -moz-transition-duration: 0.6s;
     -webkit-transition-duration: 0.6s;
     -o-transition-duration: 0.6s;
 }
 
 a:hover {
     color:#bad0f1; /* links hover colour */
     cursor:pointer;
     transition-duration: 0.6s;
     -moz-transition-duration: 0.6s;
     -webkit-transition-duration: 0.6s;
     -o-transition-duration: 0.6s;
 }
 
-    color:var(--links);
+b, strong { font-weight:700; color:#444; }
 i, em { font-style:italic; }
 
 /*-- sidebar --*/
 
 #sidebar {
     position:fixed;
     top:0;
-    color:var(--links-hover);
+
     height:100vh;
     width:64px;
     z-index:999!important;
     background:#fafafa; /* sidebar background colour */
     border-right:1px solid #eee;
 }
 
-b, strong { font-weight:700; color:var(--title); }
+
 
 #sidelinks a {
     display:block;
     font-size:14px;
     line-height:100%;
     height:14px;
     width:14px;
     padding:10px;
     margin:15px;
     border-radius:100%;
     background:#fff; /*sidebar links background colour */
-    background:var(--accent);
+    border:1px solid #eee;
-    border-right:1px solid var(--borders);
+
 
 .hover .hovertext {
     width:auto;
     background:#bad0f1;
     color:#fff; /* sidebar links text colour */
     font-size:10px; /* sidebar links font size */
-    font-size:calc(var(--font-size) + 4px);
+
     font-weight:700;
     letter-spacing:0.5px;
     padding:3px 7px 3px 7px;
     position:absolute;
     margin-top:-3px;
     margin-left:40px;
-    background:var(--background);
+
-    border:1px solid var(--borders);
+
     transition:opacity 0.6s;
 }
 
 .hover:hover .hovertext { opacity:1; transition:opacity 0.6s; }
-    background:var(--links-hover);
+
-    color:var(--background);
+
-    font-size:var(--font-size);
+
     position:absolute;
     top:50%;
     right:100%;
     margin-top:-8px;
     border-width:8px;
     border-style:solid;
     border-color:transparent #bad0f1 transparent transparent; /*link hover colour */
 }
 
 /*-- header --*/
 
 header {
     margin:100px auto 50px;
     width:300px;
     text-align:center;
 }
 
 #icon {
     margin:0 auto;
     width:50px;
     height:50px;
 }
-    border-color:transparent var(--links-hover) transparent transparent;
+
 #icon img { width:50px; height:50px; border-radius:100%; }
 
 #title {
     margin:20px 0px 5px 0px;
     font-size:16px;
     font-weight:700;
     text-transform:uppercase;
     letter-spacing:1px;
     color:#000; /*title colour*/
 }
 
 /*--filters--*/
 
 #sort { margin-top:20px; }
 
 #sort ul {
     display:block;
     list-style:none;
     padding-left:0px;
     margin-top:0;
-    font-size:calc(var(--font-size) + 6px);
+
 }
 
 #sort li { display:inline; list-style:none; }
-    color:var(--title);
+#sort li a.selected { font-weight:600; color:#222; } /* selected filter colour */
 
 #sort a {
     display:inline;
     margin-right:10px;
     font-style:italic;
     text-transform:lowercase;
 }
 
 #sort b {
     text-transform:uppercase;
     letter-spacing:0.5px;
     margin-right:10px;
 }
 
 /*-- content --*/
-#sort li a.selected { font-weight:600; color:var(--title); }
+
 #content {
     margin:0 auto;
     margin-bottom:100px;
     width:calc((280px + 40px + 2px) * 3);
     /* ((box width + 2*margin + 2*border width) * number of columns) */
 }
 
 .box {
     width:280px; /* image width x 2 + 30px */
     height:125px; /* image height */
     margin:20px;
     float:left;
     background:#fafafa; /*box background colour */
     border:1px solid #eee;
 }
 
 .name {
     width:30px;
     height:125px; /* image height */
     position:absolute;
     background:#fff;
 }
 
 .name h1 {
     transform-origin:180% 260%;
     transform:rotate(-90deg);
     text-transform:uppercase;
     font-size:12px;
-    background:var(--accent);
+
-    border:1px solid var(--borders);
+
 }
 
 .box img {
     position:absolute;
     width:125px; /* image width */
     height:125px; /* image height */
-    line-height:30px;
+
-    transform:rotate(90deg);
+
-    transform-origin:top left;
+
 .url {
     position:absolute;
     margin-left:155px;
-	width:105px; /* image height - 20px */
+
-    float:right;
+
-    margin-top:-30px;
+
-    margin-right:-95px;
+
-	padding-left:20px;
+    background:#fff; /*url background colour */
-    transform:rotate(-180deg);
+
-    transform-origin:center center;
+
-    text-align:left;
+    border-bottom:1px solid #eee;
 }
-    font-size:calc(var(--font-size) + 2px);
+
 .desc {
     position:absolute;
-	background:var(--background);
+
     margin-top:25px;
     width:125px;
     height:100px;
 }
 
 .t {
     text-align:center;
     line-height:160%;
     margin-top:10px;
     margin-left:10px;
     margin-bottom:10px;
     padding-right:10px;
     max-height:80px;
     overflow-Y:scroll;
     margin-top:calc(20% + 25px);
     transform:translateY(-50%);
-    background:var(--background);
+
 
 /*-- credit - DO NOT TOUCH --*/
-    border-bottom:1px solid var(--borders);
+
-	z-index:9;
+
     bottom:15px;
     right:20px;
     position:fixed;
 }
 
 
 </style>
 </head>
 
 
 <body>
 
 
 <div id="sidebar">
     <div id="sidelinks">
     <!-- this is where your sidebar links are. feel free to add more. icons can be found at https://linearicons.com/free -->
         <a class="hover" href="/"><span class="lnr lnr-home"></span><span class="hovertext">index</span></a>
         <a class="hover" href="/ask"><span class="lnr lnr-envelope"></span><span class="hovertext">message</span></a>
         <a class="hover" href=""><span class="lnr lnr-menu"></span><span class="hovertext">link</span></a>
         <!-- do not remove this one!!! -->
         <a class="hover" href="http://enchantedthemes.tumblr.com"><span class="lnr lnr-code"></span><span class="hovertext">credit</span></a>
     </div>
 </div>
 
 
 <header>
-	font-size:10px;
+    <div id="icon"><img src="{PortraitURL-64}"/></div>
     <div id="title">members</div>
     <!-- delete this section if you don't want a description-->
     <div class="d">optional description.</div>
-	text-transform:uppercase;
+
 
 <!-- HOW TO CUSTOMISE THE FILTERS
 template for new filter groups:
     <ul class="filter option-set" data-filter-group="group1">
     <b>category:</b>
         <li><a href="#" data-filter-value="" class="selected">all</a></li>
         <li><a href="#" data-filter-value=".filter">filter name</a></li>
         <li><a href="#" data-filter-value=".filter">filter name</a></li>
     </ul>
 
 template for new filter:
-    <!-- this is where your sidebar links are. feel free to add more. icons can be found at https://linearicons.com/free. -->
+
 
 in order to make your filters match your books/tv shows/fic/whatever, you only need to change the '.filter' and 'filter name' part. the 'category' line is optional.
 for example, if I wanted to make my media filter by favourites only, my code would look like this
     <li><a href="#" data-filter-value=".fave">favourites</a></li>
-        <a class="hover" href="https://enchantedthemes.tumblr.com"><span class="lnr lnr-code"></span><span class="hovertext">credit</span></a>
+
 
 it is essential that you do not change any other part, including the 'exclusive' in the first filter group, as well as the first filter in every group.
     <li><a href="#" data-filter-value="" class="selected">all</a></li>
 -->
 
-	<!-- the default is your icon. if you want to change it, remove {PortraitURL-128} and replace it with the image url of the one you want -->
+
-    <div id="icon"><img src="{PortraitURL-128}"/></div>
+
-    <div id="title">members</div> <!-- title -->
+
         <li><a href="#" data-filter-value="" class="selected">all</a></li>
         <li><a href="#" data-filter-value=".filter">filter name</a></li>
         <li><a href="#" data-filter-value=".filter">filter name</a></li>
     </ul>
     <ul class="filter option-set" data-filter-group="group2">
     <b>category:</b>
         <li><a href="#" data-filter-value="" class="selected">all</a></li>
         <li><a href="#" data-filter-value=".filter">filter name</a></li>
         <li><a href="#" data-filter-value=".filter">filter name</a></li>
     </ul>
 
     <ul class="filter option-set" data-filter-group="group3">
     <b>category:</b>
         <li><a href="#" data-filter-value="" class="selected">all</a></li>
         <li><a href="#" data-filter-value=".filter">filter name</a></li>
         <li><a href="#" data-filter-value=".filter">filter name</a></li>
     </ul>
 </div>
 
 </header>
 
 
 <div id="content">
 
 <!-- HOW TO ADD MORE AND FILTERS TO EACH MEMBER BOX
 template:
 <div class="box">
     <div class="name"><h1>name</h1></div>
     <img src=""/>
     <div class="url"><a href="">@username</a></div>
     <div class="desc">
         <div class="t">description</div>
     </div>
 </div>
 
 to add the filters, add the same name that you used above in the '.filter' but without the dot in front. you can add as many as you want but the 'box' in the beginning MUST stay there.
 
 for example, if you wanted to have the filters 'admin' and 'blue' together for one box, the filters should look like this
 	<div class="box admin blue">
 note how media is still there in front.
 
 if you do not want the text on hover, just delete these lines from the book/tv show/fic/whatever in question.
     <div class="overlay">
         <div class="desc">desc</div>
     </div>
 
 if you do not want an image and overlay, delete these lines from the book/tv/show/fic/whatever in question
     <img src=""/>
     <div class="overlay">
         <div class="desc">desc</div>
     </div>
 -->
 
 <div class="box">
     <div class="name"><h1>name</h1></div>
     <img src=""/>
     <div class="url"><a href="">@username</a></div>
     <div class="desc">
         <div class="t">description</div>
     </div>
 </div>
 
 <div class="box">
     <div class="name"><h1>name</h1></div>
     <img src=""/>
     <div class="url"><a href="">@username</a></div>
     <div class="desc">
         <div class="t">description</div>
     </div>
 </div>
 
 <div class="box">
     <div class="name"><h1>name</h1></div>
     <img src=""/>
     <div class="url"><a href="">@username</a></div>
     <div class="desc">
         <div class="t">description</div>
     </div>
 </div>
 
 <div class="box">
     <div class="name"><h1>name</h1></div>
     <img src=""/>
     <div class="url"><a href="">@username</a></div>
     <div class="desc">
         <div class="t">description</div>
     </div>
 </div>
 
 <div class="box">
     <div class="name"><h1>name</h1></div>
     <img src=""/>
     <div class="url"><a href="">@username</a></div>
     <div class="desc">
         <div class="t">description</div>
     </div>
 </div>
 
 <div class="box">
     <div class="name"><h1>name</h1></div>
     <img src=""/>
     <div class="url"><a href="">@username</a></div>
     <div class="desc">
         <div class="t">description</div>
     </div>
 </div>
 
 </div>
 
 <!-- credit - DO NOT TOUCH -->
 
 <div class="credit">
     <a href="http://enchantedthemes.tumblr.com" title="alydae">A.</a>
 </div>
 
 
 </body>
 
 
 <!-- combination filters by @magnusthemes -->
 <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 = $("#content");
  var filters = {};
  var $grid = $container.isotope({
    itemSelector: ".box",
    percentPosition: false
  });
-    <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
+
    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>
 
 
 </html>