API tools faq
paste
Advertisement
chaaostheory

PAGE 04: CRAZY KIDS

chaaostheory
Jul 27th, 2018
1,591
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.19 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <!-- page 004: crazy kids @chaaostheory
  6.  
  7. edit to your hearts content, i'd just prefer you'd leave the credit in
  8. -->
  9.  
  10.  
  11. <head>
  12.  
  13. <title>{title}</title>
  14.  
  15. <link rel="shortcut icon" href="{favicon}">
  16.  
  17. <!--fonts-->
  18. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
  19.  
  20. <!-- fontawesome-->
  21. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  22.  
  23. <!--tool tips-->
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  25. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js" type="text/javascript"></script>
  26. <script>
  27. (function($){
  28. $(document).ready(function(){
  29. $("[title]").style_my_tooltips({tip_delay_time:20});
  30. });
  31. })(jQuery);
  32. </script>
  33.  
  34.  
  35. <!-- hint.css-->
  36. <link href="https://static.tumblr.com/ewjs2wm/ek2pau39z/hint.css" rel="stylesheet" type="text/css">
  37.  
  38.  
  39. <!-- isotope filtering by hendrixrph-->
  40. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script><script type="text/javascript">
  41. $(document).ready( function() {
  42. // init Isotope
  43. var $grid = $('.grid').isotope({
  44. itemSelector: '.grid-item'
  45. });
  46.  
  47. // store filter for each group
  48. var filters = {};
  49.  
  50. $('.filters').on( 'click', '.button', function() {
  51. var $this = $(this);
  52. // get group key
  53. var $buttonGroup = $this.parents('.button-group');
  54. var filterGroup = $buttonGroup.attr('data-filter-group');
  55. // set filter for group
  56. filters[ filterGroup ] = $this.attr('data-filter');
  57. // combine filters
  58. var filterValue = concatValues( filters );
  59. // set filter for Isotope
  60. $grid.isotope({ filter: filterValue });
  61. });
  62.  
  63. // change is-checked class on buttons
  64. $('.button-group').each( function( i, buttonGroup ) {
  65. var $buttonGroup = $( buttonGroup );
  66. $buttonGroup.on( 'click', 'button', function() {
  67. $buttonGroup.find('.is-checked').removeClass('is-checked');
  68. $( this ).addClass('is-checked');
  69. });
  70. });
  71.  
  72. });
  73.  
  74. // flatten object by concatting values
  75. function concatValues( obj ) {
  76. var value = '';
  77. for ( var prop in obj ) {
  78. value += obj[ prop ];
  79. }
  80. return value;
  81. }
  82. </script>
  83.  
  84. <!-- tippy.js by @atomiks-->
  85. <script src="https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js"></script>
  86.  
  87. <script>
  88. (function($){
  89. $(document).ready(function(){
  90. tippy('.name [title]', {
  91. zIndex: 99999,
  92. arrow: true,
  93. arrowType: 'sharp',
  94. arrowTransform: 'scaleX(0.75)',
  95. inertia: true,
  96. placement: 'top',
  97. size: 'small',
  98. animation: 'scale',
  99. offset: '0, 5',
  100. });
  101. });
  102. })(jQuery);
  103. </script>
  104.  
  105. <script>
  106. (function($){
  107. $(document).ready(function(){
  108. tippy('.sidelink [title]', {
  109. zIndex: 99999,
  110. arrow: true,
  111. arrowType: 'sharp',
  112. arrowTransform: 'scaleX(0.75)',
  113. inertia: true,
  114. placement: 'top',
  115. size: 'small',
  116. animation: 'scale',
  117. offset: '0, 0',
  118. });
  119. });
  120. })(jQuery);
  121. </script>
  122.  
  123. <script>
  124. (function($){
  125. $(document).ready(function(){
  126. tippy('.links [title]', {
  127. zIndex: 99999,
  128. arrow: true,
  129. arrowType: 'sharp',
  130. arrowTransform: 'scaleX(0.75)',
  131. inertia: true,
  132. placement: 'bottom',
  133. size: 'small',
  134. animation: 'scale',
  135. offset: '0, 0',
  136. });
  137. });
  138. })(jQuery);
  139. </script>
  140.  
  141. <style>
  142.  
  143. iframe.tmblr-iframe {
  144. opacity:0;
  145. display:none!important;}
  146.  
  147. ::-webkit-scrollbar {
  148. width:2px;
  149. border-radius: 5px;
  150. height: auto;
  151. padding:2px
  152.  
  153. }
  154. ::-webkit-scrollbar-thumb {
  155. background-color:#ddd;
  156. border-radius: 5px;
  157. padding:2px;
  158. }
  159.  
  160. /* tippy body styling */
  161. .tippy-tooltip {
  162. border-radius:0px;
  163. font-size:7px;
  164. text-transform:uppercase;
  165. font-family:'open sans', sans-serif;
  166. font-weight:500;
  167. color:#000;
  168. background:#fff;
  169. border:1px solid #555;
  170.  
  171. }
  172.  
  173. /*tippy arrow styling*/
  174.  
  175. /*tippy arrow outline*/
  176. .tippy-popper[x-placement^=top] .tippy-tooltip .tippy-arrow {
  177. border-top: 7px solid #555; /* your color here */
  178. }
  179.  
  180. .tippy-popper[x-placement^=bottom] .tippy-tooltip .tippy-arrow {
  181. border-bottom: 7px solid #555; /* your color here */
  182. }
  183.  
  184. .tippy-popper[x-placement^=right] .tippy-tooltip .tippy-arrow {
  185. border-right: 7px solid #555; /* your color here */
  186. }
  187.  
  188.  
  189. .tippy-popper[x-placement^=left] .tippy-tooltip .tippy-arrow {
  190. border-left: 7px solid #555; /* your color here */
  191. }
  192.  
  193. /* tippy arrow color */
  194. .tippy-poper[x-placement^=top]:before, .tippy-arrow:before {
  195. content: "";
  196. position: absolute;
  197. z-index: -1;
  198. border: 4px solid #fff;
  199. top:-12px;
  200. left:-4px;
  201. -webkit-transform: rotate(-45deg);
  202. transform: rotate(-45deg);
  203. }
  204.  
  205. .tippy-popper[x-placement^=bottom] .tippy-tooltip.bottom-theme .tippy-arrow:before {
  206. content: "";
  207. position: absolute;
  208. z-index: -1;
  209. border: 4px solid #fff;
  210. top:4px;
  211. left:-4px;
  212. -webkit-transform: rotate(-45deg);
  213. transform: rotate(-45deg);
  214. }
  215.  
  216. /* base styling */
  217.  
  218. body {
  219. height:100%;
  220. font-family:open sans, sans-serif;
  221. background-image:url('https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/rN0W64K4ipau8gxv/light-gray-background-soft-fifteen-shades-of-grey-smooth-background-with-the-addition-of-a-bit-of-noise_be-2qbqqkl_thumbnail-full01.png');
  222. background-size:cover;
  223. background-attachment: fixed;
  224. overflow-x:hidden;
  225. }
  226.  
  227.  
  228. a {
  229. color:#000;
  230. }
  231.  
  232. span {
  233. background: buttonface;
  234. padding:2px;
  235. font-size:11px;
  236. display:inline-block;
  237. float:right;
  238. font-weight:400;
  239. margin-right:10px;
  240. }
  241.  
  242. h1 {
  243. background-color:rgba(255,255,255,0.8);
  244. padding:5px;
  245. font-weight:800;
  246. margin-top:5px;
  247. margin-bottom:-35px;
  248. text-align:justify;
  249.  
  250. }
  251.  
  252. h2 {
  253. color:#000;
  254. background-color:rgba(255,255,255,0.8);
  255. padding:5px;
  256. width:auto;
  257. display: inline-block;
  258. font-size:20px;
  259.  
  260. }
  261.  
  262. /*sidebar styling */
  263.  
  264. .sidebar {
  265. position:fixed;
  266. top:0;
  267. left:0;
  268. width:300px;
  269. height:100%;
  270. padding:5px 10px;
  271. }
  272.  
  273. .sidelink {
  274. font-size:13px;
  275. margin-top:40px;
  276. }
  277.  
  278. .sidelink a {
  279. background:rgba(255,255,255,0.8);
  280. border-radius:100%;
  281. padding:2px 3px 2px 3px;
  282. -webkit-transition: 0.5s; /* Safari */
  283. transition: 0.5s;
  284. }
  285.  
  286. .sidelink a:hover {
  287. background:#000;
  288. color:rgba(255,255,255,0.8);
  289. -webkit-transition: 0.5s; /* Safari */
  290. transition: 0.5s;
  291. }
  292.  
  293. /* grid styling */
  294.  
  295. .bg {
  296. background-color: rgba(255,255,255,0.8);
  297. padding-left: 20px;
  298. margin-left: 340px;
  299. margin-top: -10px;
  300. position: absolute;
  301. width: calc( 100% - 340px);
  302. height: 101%;
  303. overflow-x:hidden;
  304. }
  305.  
  306. .grid {
  307. margin-top:0;
  308. height:100%;
  309. overflow-x:hidden;
  310. }
  311.  
  312. .grid-item {
  313. width:200px;
  314. height:200px;
  315. padding:3px;
  316. margin:10px;
  317. text-align:center;
  318. line-height:100px
  319. position: absolute;
  320. border-radius:100%;
  321. box-shadow:3px 3px 10px #000;
  322. }
  323.  
  324. .grid-item img {
  325. width:190px;
  326. border-radius:100%;
  327. margin-top:1px;
  328. border:4px solid #fff;
  329. }
  330.  
  331. .filters {
  332. margin-top:40px;
  333. }
  334.  
  335. .filters button {
  336. border:none;
  337. text-transform:uppercase;
  338. display:inline block;
  339. -webkit-transition: 0.3s; /* Safari */
  340. transition: 0.3s;
  341. }
  342.  
  343. .filters button:hover, .is-checked {
  344. color: #000;
  345. background:#fff;
  346. outline: none!important;
  347. -webkit-transition: 0.3s; /* Safari */
  348. transition: 0.3s;
  349. }
  350.  
  351. .filters .is-checked {
  352. font-style: italic;
  353. }
  354.  
  355. /* grid items */
  356.  
  357. .img {
  358. padding: 7px;
  359. width: 100%;
  360. height: 100%;
  361. overflow: hidden;
  362. position: relative;
  363. text-align:center;
  364. }
  365.  
  366. .hover {
  367. width:100%;
  368. height:150px;
  369. margin-top:-170px;
  370. opacity:0;
  371. -webkit-transition: 0.5s; /* Safari */
  372. transition: 0.5s;
  373.  
  374. }
  375.  
  376. .hover:hover {
  377. opacity:1;
  378. -webkit-transition: 0.9s; /* Safari */
  379. transition: 0.9s;
  380.  
  381. }
  382.  
  383. .name {
  384. background-color:#fff;
  385. border:1px solid #555;
  386. display: inline-block;
  387. position: relative;
  388. width:auto;
  389. padding:5px;
  390. font-style:italic;
  391. top:40px;
  392. cursor:default;
  393. }
  394.  
  395. .links {
  396. margin-top:50px;
  397. }
  398.  
  399. .links a {
  400. background-color:#fff;
  401. border:1px solid #555;
  402. padding:2px;
  403. }
  404.  
  405. /* credit */
  406.  
  407. .credit{
  408. position:fixed;
  409. margin-left:calc(100% - 40px);
  410. top:95%
  411. }
  412.  
  413. .credit a{
  414. color:#000;
  415. background:rgba(255,255,255, 0.5);
  416. border-radius:100%;
  417. padding:2px 3px;
  418. font-size:20px;
  419. -webkit-transition: 1s; /* Safari */
  420. transition: 1s;
  421. }
  422.  
  423. .credit a:hover{
  424. color:#fff;
  425. background:rgba(0,0,0, 0.5);
  426. -webkit-transition: 1s; /* Safari */
  427. transition: 1s;
  428. }
  429.  
  430.  
  431. </style>
  432.  
  433. </head>
  434.  
  435. <body>
  436.  
  437. <!-- sidebar-->
  438. <div class="sidebar">
  439. <!-- links -->
  440. <div class="sidelink">
  441. <a href="/" title="home"><i class="fa fa-home fa-fw"></i></a>
  442. <a href="/ask" title="ask"><i class="far fa-envelope fa-fw"></i></a>
  443. <a href="/about" title="abt"><i class="fas fa-user-circle fa-fw"></i></a>
  444. <a href="/navigation" title="nav"><i class="fas fa-map fa-fw"></i></a>
  445. </div>
  446. <!--title-->
  447. <h1>crazy kids</h1>
  448. <span>- a muse masterlist</span>
  449.  
  450. <!-- filters-->
  451. <div class="filters">
  452.  
  453. <!--
  454. how to do isotope filters: quick & dirty
  455.  
  456. basically you add whatever feature you want to filter by using data-filter. it'll always be in the form data-filter=".value".
  457.  
  458. you can add these filters to the grid items by adding it to the grid item class. so, it'd look like <div class="grid-item value value2 etc">...</div> and it'll sort by all of that shit.
  459.  
  460. if you need more info, googles your friend. look at the examples below. look at other isotope filtering pages.
  461. -->
  462.  
  463. <div class="button-group" data-filter-group="group"><h2>group</h2><br>
  464. <button class="button is-checked" data-filter="">all</button>
  465. <button class="button" data-filter=".one">one</button>
  466. <button class="button" data-filter=".two">two</button>
  467. <button class="button" data-filter=".three">three</button>
  468. </div>
  469.  
  470. <div class="button-group" data-filter-group="gender"><h2>gender</h2><br>
  471. <button class="button is-checked" data-filter="">all</button>
  472. <button class="button" data-filter=".m">male</button>
  473. <button class="button" data-filter=".f">female</button>
  474. <button class="button" data-filter=".nb">non-binary</button>
  475. </div>
  476.  
  477. <div class="button-group" data-filter-group="affilation"><h2>affiliation</h2><br>
  478. <button class="button is-checked" data-filter="">all</button>
  479. <button class="button" data-filter=".group">group</button>
  480. <button class="button" data-filter=".indie">indie</button>
  481. <button class="button" data-filter=".1x1">1x1</button>
  482. </div>
  483.  
  484. <div class="button-group" data-filter-group="status"><h2>status</h2><br>
  485. <button class="button is-checked" data-filter="">all</button>
  486. <button class="button" data-filter=".open">open</button>
  487. <button class="button" data-filter=".closed">closed</button>
  488. </div>
  489.  
  490. </div>
  491. <!-- end filters-->
  492.  
  493. </div>
  494. <!-- end sidebar-->
  495. <div class="bg">
  496. <!-- start grid-->
  497.  
  498. <div class="grid">
  499.  
  500. <!-- start character-->
  501. <div class="grid-item one nb group closed" style="background-image:url('https://placehold.it/300');">
  502. <div clas="img">
  503. <img src="https://placehold.it/300">
  504.  
  505. <div class="hover">
  506. <div class="name"><a title="fc: faceclaim">first last</a></div>
  507. <div class="links">
  508. <a href="#" data-tippy-theme="bottom" title="tag"><i class="fab fa-slack-hash fa-fw"></i></a>
  509. <a href="#" data-tippy-theme="bottom" title="about"><i class="fas fa-user-circle fa-fw"></i></a>
  510. <a href="#" data-tippy-theme="bottom" title="blog"><i class="fas fa-code fa-fw"></i></a>
  511. </div>
  512. </div>
  513.  
  514. </div>
  515. </div>
  516. <!-- end character-->
  517.  
  518. <!-- start character-->
  519. <div class="grid-item two female indie open" style="background-image:url('https://placehold.it/300');">
  520. <div clas="img">
  521. <img src="https://placehold.it/300">
  522.  
  523. <div class="hover">
  524. <div class="name"><a title="fc: faceclaim">first last</a></div>
  525. <div class="links">
  526. <a href="#" data-tippy-theme="bottom" title="tag"><i class="fab fa-slack-hash fa-fw"></i></a>
  527. <a href="#" data-tippy-theme="bottom" title="about"><i class="fas fa-user-circle fa-fw"></i></a>
  528. <a href="#" data-tippy-theme="bottom" title="blog"><i class="fas fa-code fa-fw"></i></a>
  529. </div>
  530. </div>
  531.  
  532. </div>
  533. </div>
  534. <!-- end character-->
  535.  
  536.  
  537.  
  538.  
  539. </div>
  540. <!-- end grid-->
  541.  
  542. </div>
  543.  
  544.  
  545. <!-- CREDIT // would be nice if u left intact -->
  546. <div class="credit">
  547. <a href="http://chaaostheory.tumblr.com" class="hint--left" aria-label="@chaaostheory"><i class="fas fa-feather-alt fa-fw" aria-hidden="true"></i></a>
  548. </div>
  549.  
  550. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!