Skip to content

Instantly share code, notes, and snippets.

@venusthms
Last active March 9, 2021 11:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save venusthms/30592eca8b8f00880eb0582a05005160 to your computer and use it in GitHub Desktop.
Save venusthms/30592eca8b8f00880eb0582a05005160 to your computer and use it in GitHub Desktop.
Page 14 // Nova
<!DOCTYPE html>
<head>
<!-- THEME BY @LEEJORDAN / @VENUSTHMS
do not remove the credit
-------------------------------------------------------------------------
- terms of use: venusthms.tumblr.com/terms
- message me if you got any problems or questions about the code
- you'll find instructions about customization through out the code
- filter tutorial & controls fix by @cyantists
- icon font: https://feathericons.com/
---------------------------------------------------------------------->
<title>members</title><link rel="shortcut icon" href="{Favicon}">
<!---- scripts: no need to edit ---->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Karla|Roboto+Mono:400,700" rel="stylesheet"><link href="//dl.dropbox.com/s/4rmswptv2h7043v/venus.css" rel="stylesheet"><script src="//venusthms.github.io/pages/credit/credit.js"></script><script src="//venusthms.github.io/pages/credit/color.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//venusthms.github.io/pages/nova/nova.js"></script><script src="//venusthms.github.io/pages/feather.js"></script>
<link href="http://static.tumblr.com/4gatuv1/X8Poxwvz8/style-my-tooltips.css" rel="stylesheet" type="text/css" /><script src="http://static.tumblr.com/4gatuv1/Aneoxwvz8/jquery.style-my-tooltips.js"></script><script>!function(t){t(document).ready(function(){t("a[title]").style_my_tooltips({tip_follows_cursor:!0,tip_delay_time:200,tip_fade_speed:300})})}(jQuery);</script>
<script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script><script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>
<script>$(document).ready(function(){
var $grid = $(".grid"); $grid.imagesLoaded(function() {
$grid.masonry({
itemSelector: ".item",
columnWidth: 270, /* needs to be 20 more than item width */
horizontalOrder: true,
fitWidth: true
})
});
$(".button").click(function(){
$(this).addClass("selected");
$(".button").not($(this)).removeClass("selected");
var ssf = $(this).attr("filter");
$(".item." + ssf).show();
$(".item").not("." + ssf).hide();
$grid.masonry();
});
$grid.on( 'click', '.item', function() {
$(this).toggleClass('superlong');
// trigger layout after item size changes
$grid.masonry('layout');
});
});</script>
<style type="text/css">
/* colors */
:root {
--background: #f5f5f5;
--header: #fff;
--items: #fff;
--border: #f6f6f6;
--text: #222!important;
--links: #222;
--links-hover: #666;
}
/* fonts */
body {font-family: 'karla';font-size: 12px;}
h1, .item .url {font-family: 'Roboto Mono', monospace;}
/* cursor */
.button, .long, a {cursor:pointer;}
/* header*/
.intro { /*content*/
width: 30%;
margin: 10vh auto -10px auto; /*first number = position from top*/
text-align: justify;
}
.intro img { /*icon*/
width: 25px;
height: 25px;
border-radius: 100%;
margin-right: 10px;
}
nav {right: 10px;top: 10px;} /*navigation*/
.button.selected {text-decoration: line-through;} /*selected filter*/
/*items*/
.item {width: 250px;height: auto;} /* need to change js (at the top) as well */
.item img, .desc, .url span {width: 220px} /*keep 30 less than item*/
.desc, .item .url {text-align: left;}
.long {height: 30px;} /*length after which text gets cut off*/
.long:after {content: '. . . more';} /*text after cut out*/
</style>
<link rel="stylesheet" type="text/css"href="//venusthms.github.io/pages/nova/style.css"/>
</head>
<body>
<!--- header starts --->
<header>
<nav> <!--- links --->
<a href="https://www.tumblr.com/follow/{name}" title="follow"><i data-feather="plus"></i></a>
<a href="/" title="return"><i data-feather="x"></i></a>
</nav>
<div class="intro"><!--- header content --->
<img src="{PortraitURL-64}" /> <!--replace {PortraitURL-64} with an image url if you don't want your icon there -->
<h1>title here</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo</p>
<div class="filters"><!--- filters --->
<div class="button selected" filter="item">show all</div>
<div class="button" filter="filter1">filter one</div>
<div class="button" filter="filter2">filter two</div>
<div class="button" filter="filter3">filter three</div>
</div>
</div>
</header>
<!--- header ends --->
<!--- grid starts --->
<div class="grid">
<!--- edit the filters: replace filter1/filter2/etc with the filter names you set above (<div class="button" filter="THISISYOURFILTERNAME">filter one</div>) but do NOT delete 'item' --->
<!--- item starts --->
<div class="item filter1">
<img src="https://images.unsplash.com/photo-1462743708072-4ed3a4a860be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=690&q=80" />
<div class="desc">
<h1>Name Here</h1>
<p>Description Here</p>
</div>
<div class="url"><span><a href="/">@url here</a></span></div>
</div>
<!--- item ends: copy & paste as needed --->
<!----- DO NOT EDIT AFTER THIS LINE ---->
</div>
<div class="vt"><a href="https://venusthms.tumblr.com/" title="venusthms"><img src="https://i.imgur.com/PxFLRpM.png"></img></a></div>
<script>feather.replace()</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment