API tools faq
paste
Advertisement
southcodes

bones | quotes page

southcodes
Apr 28th, 2024 (edited)
1,090
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.90 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    
  3.     - page 'bones' by skye southcodes.tumblr.com
  4.     - modify as you please but please do not touch the credit
  5.     - any errors? need help? have questions? let me know!
  6.     southcodes.tumblr.com/inbox
  7.    
  8.     - normalize css by https://github.com/necolas
  9.     - fonts by google
  10.     - icon font by http://fontawesome.io/icons/
  11.     - isotope filters by https://isotope.metafizzy.co/
  12.  
  13.     how to customize filters tutorial: https://hendrixrph-blog.tumblr.com/post/131707989334/under-the-cut-is-a-tutorial-on-how-to-create-a
  14.    
  15.     you can edit the colors of each quote card directly in its html code
  16.  
  17.     if you add the class 'favorite' to your favorite quote cards they'll automatically be added to the 'favorites' filter and a little star will show up on the card
  18.  
  19. -->
  20. <!DOCTYPE html>
  21. <html>
  22. <head>
  23.     <title>{title}</title>
  24.    
  25.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  26.  
  27.    <link rel="shortcut icon" href="{favicon}">
  28.    <meta name="description" content="{MetaDescription}"/>
  29.  
  30.    <!-- fonts -->
  31.    <link rel="preconnect" href="https://fonts.googleapis.com">
  32.    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  33.    <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
  34.    
  35.    <!-- normalize -->
  36.    <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  37.    
  38. <style>
  39. :root {
  40.    --background:#fafafa;
  41.    --text:#333;
  42.    --links: #fa854f;
  43.    --links-hover: #cf4949;
  44.    --accents: coral;
  45.    --borders:#ddd;
  46. }
  47.  
  48. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  49. .tmblr-iframe:hover {opacity:.8;}
  50.  
  51. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
  52. ::-webkit-scrollbar {width:6px}
  53. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  54.  
  55. pre {font-family:consolas;
  56.  white-space: pre-wrap;       /* css-3 */
  57.  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  58.  white-space: -pre-wrap;      /* Opera 4- */
  59.  white-space: -o-pre-wrap;    /* Opera 7 */
  60.  word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  61.  
  62. * {margin: 0;padding: 0; box-sizing: border-box;}
  63. p {margin:1rem 0}
  64. body, figure{margin:0;padding:0}
  65. html{font: 14px 'Karla', sans-serif;}
  66. body {font-size:14px;color:var(--text);background:var(--background);}
  67. a {text-decoration: none;color:var(--links);word-break:break-word;}
  68. a:hover {color:var(--links-hover);}
  69. blockquote {margin:0;padding:0;}
  70. img {max-width:100%;height: auto;display: block;margin:0}
  71. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  72. ol, ul, li {list-style-type:none;margin:0;padding:0;}
  73.  
  74. #flex-container {
  75.    display: flex;
  76. }
  77.  
  78. /* aside  */
  79.  
  80. aside {
  81.    width: 22rem;
  82.    height: 100vh;  
  83.    overflow: auto;
  84.    text-align: right;
  85.    padding: 0 3rem;
  86. }
  87.  
  88. .header-image {
  89.    width: 9rem;
  90.    aspect-ratio: 1 / 1;
  91.    object-fit: cover;
  92.    border-radius: 100%;}
  93. figure.header-image {
  94.    margin:3rem auto;
  95.    border: .8rem solid white;
  96.    outline: 1px solid var(--borders);
  97. }
  98.  
  99. #container {
  100.    width: 100%;
  101.    padding: 1rem;
  102.    height: 100vh;
  103.    overflow: auto;
  104. }
  105.  
  106. /*  header  */
  107.  
  108. header {
  109.    margin:5rem 0;
  110. }
  111.  
  112. #page-title {
  113.    font-family: "Roboto Mono", monospace;
  114.    font-weight: 400;
  115.    display: inline-block;
  116.    vertical-align: middle;
  117.    margin:0 1.7rem 0 0;
  118.    letter-spacing: .03rem;
  119. }
  120.    
  121. #page-title a {color: var(--text);}
  122.  
  123. #page-title::first-letter {
  124.    font-weight: 700;
  125.    color: var(--accents);
  126.    font-size: 2.4rem;
  127. }
  128.  
  129. #tumblr-navigation {
  130.    display: inline-block;
  131.    vertical-align: middle;
  132. }
  133.  
  134. #tumblr-navigation li {
  135.    display: inline-block;
  136.    vertical-align: middle;
  137.    margin-right: 1rem;
  138.    font-size: 1.2rem;
  139. }
  140.  
  141. #description {
  142.    max-width: 40rem;
  143.    line-height: 135%;
  144.    letter-spacing: .03rem;
  145.    margin-top: 2rem;
  146.    font-size: 1.05rem;
  147. }
  148.  
  149. #main-navigation li{
  150.    font-weight: 600;
  151.    margin-right: 1.5rem;
  152.    display: inline-block;
  153. }
  154.  
  155. .quote-card {
  156.    position: relative;
  157.    width: calc(50% - 6rem);
  158.    margin:0 6rem 6rem 0;
  159.    background-color: var(--boxes-background);
  160.    border-top: 15px solid transparent;
  161.    border-radius: 3px;
  162.    font-size: 1.1rem;
  163.    line-height: 150%;
  164.    letter-spacing: .03rem;
  165. }
  166.  
  167. .quote-card.favorite:before {
  168.    content: '\f005';
  169.    position: absolute;
  170.    inset:-1.5rem auto auto -1rem;
  171.    font-family: 'Font awesome 5 free';
  172.    font-weight: 900;
  173.    font-size: 2rem;
  174.    color: var(--accents);
  175. }
  176.  
  177. .quote-content {padding: 1rem 2rem;}
  178.  
  179. .quote-footer {
  180.    display: flex;
  181.    justify-content: space-between;
  182.    padding: .7rem 3rem .7rem 1rem;
  183.    border: 1px solid var(--borders);
  184. }
  185.  
  186. .footer-fandom {font-weight: 600;}
  187.  
  188. .footer-timestamp {
  189.    font-size: .95rem;
  190.    letter-spacing: .04rem;
  191. }
  192.  
  193. .note-button {
  194.    position: absolute;
  195.    inset: auto -1rem -1rem auto;
  196.    width: 3rem;
  197.    height: 3rem;
  198.    border: 1px solid var(--borders);
  199.    border-radius: 100%;
  200.    outline: 0;
  201.    background-color: var(--background);
  202.    cursor: pointer;
  203.    transition-duration: .2s;
  204.    font-size: 1.3rem;
  205.    color: var(--links);
  206.    display: flex;
  207.    justify-content: center;
  208.    align-items: center;
  209. }
  210.  
  211. .rotate {transform: rotate(45deg);}
  212.  
  213. .note-content {
  214.    display: none;
  215.    width: 100%;
  216.    position: absolute;
  217.    z-index: 8;
  218.    padding: 1rem 2rem;
  219.    margin:1.5rem 0 0;
  220.    border-radius: 4px;
  221.    border: 1px solid var(--borders);
  222. }
  223.  
  224. #filters-title {
  225.    font-family: "Roboto Mono", monospace;
  226.    font-weight: 400;
  227.    font-size: 1.3rem;
  228.    letter-spacing: -.05rem;
  229.    margin-bottom: 1rem;
  230.    border-right: 3px solid var(--accents);
  231.    padding-right: 1rem;
  232. }
  233.  
  234. #filters-title::first-letter {
  235.    font-weight: 700;
  236.    color: var(--accents);
  237. }
  238.  
  239. .button-group {margin: 2rem 0 3.5rem;}
  240.  
  241. .fa-star {
  242.    color: var(--accents);
  243.    font-size: 1rem;
  244.    margin-left: .5rem;
  245. }
  246.  
  247. .group-title {margin-bottom: 1.5rem;}
  248.  
  249. .group-title:after {
  250.    font-family: 'Font awesome 5 free';
  251.    content: '\f111';
  252.    font-size: .5rem;
  253.    color: var(--accents);
  254.    vertical-align: middle;
  255.    margin-left: 1rem;
  256. }
  257.  
  258. .button-group button {
  259.    background-color: transparent;
  260.    border: 0;
  261.    outline: 0;
  262.    cursor: pointer;
  263.    display: block;
  264.    text-align: right;
  265.    width: 100%;
  266.    font-family: 'karla', sans-serif;
  267.    font-size: 1.1rem;
  268.    margin: 1rem 0;
  269.    transition-duration: .1s;
  270.    color:var(--text)
  271. }
  272.  
  273. .button-group button:hover {color: var(--links-hover);}
  274.  
  275. .is-checked {
  276.    font-weight: 600;
  277.    color: var(--accents)!important;
  278.    text-decoration: underline;
  279. }
  280.  
  281. /* MEDIA */
  282.  
  283. @media only screen and (min-width:0) and (max-width:1100px) {
  284.  
  285.    aside {
  286.        width: 18rem;
  287.        padding:0 1rem
  288.    }
  289.  
  290.    main {
  291.        max-width: 40rem;
  292.        margin: auto;
  293.    }
  294.  
  295.    .quote-card {
  296.        width: 100%;
  297.        margin: 0 0 6rem;
  298.    }
  299. }
  300.  
  301.  
  302. @media only screen and (min-width:1700px) and (max-width:9999px) {
  303.  
  304.    .quote-card {
  305.        width: calc(33% - 6rem);
  306.        margin:0 6rem 6rem 0;
  307.    }
  308. }
  309. </style>
  310.    
  311. </head>
  312. <body>
  313.  
  314. <section id="flex-container">
  315.    
  316. <aside>
  317.  
  318.    <figure class="header-image"><a href="/"><img src="IMAGE URL" alt="" class="header-image"></a>
  319.    </figure>
  320.  
  321.  
  322.    <section class="filters">
  323.  
  324.        <h2 id="filters-title">filters</h2>
  325.  
  326.        
  327.  
  328.        <nav class="button-group" data-filter-group="fav">
  329.  
  330.            <button class="button is-checked" data-filter="">all</button>
  331.            <button class="button" data-filter=".favorite">favorites <i class="fa-solid fa-star"></i></button>
  332.        </nav>
  333.  
  334.        
  335.  
  336.        <nav class="button-group" data-filter-group="one">
  337.  
  338.            <h3 class="group-title">filter title</h3>
  339.  
  340.            <button class="button is-checked" data-filter="">all</button>
  341.            <button class="button" data-filter=".one">one</button>
  342.            <button class="button" data-filter=".two">two</button>
  343.        </nav>
  344.  
  345.        <nav class="button-group" data-filter-group="two">
  346.  
  347.            <h3 class="group-title">filter title</h3>
  348.  
  349.            <button class="button is-checked" data-filter="">all</button>
  350.            <button class="button" data-filter=".three">three</button>
  351.            <button class="button" data-filter=".four">four</button>
  352.        </nav>
  353.  
  354.    </section><!--filters end-->
  355.    
  356. </aside>
  357.  
  358. <section id="container">
  359.  
  360. <header>
  361.  
  362.    <h1 id="page-title"><a href="/">page title</a></h1>
  363.  
  364.    <nav id="tumblr-navigation"><ul>
  365.        <li><a href=""><i class="fa-solid fa-home"></i></a></li>
  366.        <li><a href=""><i class="fa-solid fa-envelope"></i></a></li>
  367.    </ul></nav>
  368.  
  369.    <article id="description"><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste a explicabo ipsa est atque autem exercitationem voluptas sit, magni enim repellendus. Molestiae sunt officiis, amet accusamus vel eius possimus accusantium.</p></article>
  370.  
  371.    <nav id="main-navigation"><ul>
  372.        <li><a href="">link</a></li>
  373.        <li><a href="">link</a></li>
  374.        <li><a href="">link</a></li>
  375.    </ul></nav>
  376.    
  377. </header>
  378.  
  379. <main id="main">
  380.  
  381.    <section style=" border-top-color:BORDER TOP COLOR; background-color: BACKGROUND COLOR" class="quote-card one three">
  382.  
  383.        <article class="quote-content">
  384.            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id repellendus fugit iure corrupti maxime sed inventore fugiat commodi nesciunt. Nulla magni iure a, nisi neque officia voluptatum voluptas nam cupiditate?</p>
  385.        </article>
  386.  
  387.        <footer class="quote-footer" style="background-color: BACKGROUND COLOR;">
  388.            <li class="footer-fandom">fandom</li>
  389.            <li class="footer-timestamp">timestamp</li>
  390.        </footer>
  391.            
  392.        <button class="note-button"><i class="fa-solid fa-plus"></i></button>
  393.        
  394.        <div class="note-content" style="background-color:BACKGROUND COLOR;">
  395.            <p>comment</p>
  396.        </div>
  397.  
  398.    </section>
  399.        
  400.  
  401.    
  402.    <section style=" border-top-color:BORDER TOP COLOR; background-color: BACKGROUND COLOR" class="quote-card one two four">
  403.  
  404.        <article class="quote-content">
  405.            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id repellendus fugit iure corrupti maxime sed inventore fugiat commodi nesciunt. Nulla magni iure a, nisi neque officia voluptatum voluptas nam cupiditate?</p>
  406.        </article>
  407.  
  408.        <footer class="quote-footer" style="background-color: BACKGROUND COLOR;">
  409.            <li class="footer-fandom">fandom</li>
  410.            <li class="footer-timestamp">timestamp</li>
  411.        </footer>
  412.            
  413.        <button class="note-button"><i class="fa-solid fa-plus"></i></button>
  414.        
  415.        <div class="note-content" style="background-color:BACKGROUND COLOR;">
  416.            <p>comment</p>
  417.        </div>
  418.  
  419.    </section>
  420.        
  421.  
  422.    
  423.    <section style=" border-top-color:BORDER TOP COLOR; background-color: BACKGROUND COLOR" class="quote-card four two three">
  424.  
  425.        <article class="quote-content">
  426.            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id repellendus fugit iure corrupti maxime sed inventore fugiat commodi nesciunt. Nulla magni iure a, nisi neque officia voluptatum voluptas nam cupiditate?</p>
  427.        </article>
  428.  
  429.        <footer class="quote-footer" style="background-color: BACKGROUND COLOR;">
  430.            <li class="footer-fandom">fandom</li>
  431.            <li class="footer-timestamp">timestamp</li>
  432.        </footer>
  433.            
  434.        <button class="note-button"><i class="fa-solid fa-plus"></i></button>
  435.        
  436.        <div class="note-content" style="background-color:BACKGROUND COLOR;">
  437.            <p>comment</p>
  438.        </div>
  439.  
  440.    </section>
  441.        
  442.    
  443. </main>
  444.  
  445. </section>
  446.  
  447. </section>
  448.  
  449. <!-- do not touch -->
  450. <div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>
  451.  
  452.  
  453. <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  454.  
  455. <!-- isotope -->
  456. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  457.  
  458. <!-- icons font -->
  459. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  460.  
  461. <script>
  462.  
  463. $(document).ready( function() {
  464.  
  465. $('.note-button').click(function(){
  466.    $(this).next('.note-content').fadeToggle();
  467. });
  468.  
  469. $( ".note-button" ).on( "click", function() {
  470.  $( this ).toggleClass( "rotate" );
  471. });
  472.  
  473. // init Isotope
  474. var $grid = $('#main').isotope({
  475.   itemSelector: '.quote-card'
  476. });
  477. // store filter for each group
  478. var filters = {};
  479.  
  480. $('.filters').on( 'click', '.button', function() {
  481.   var $this = $(this);
  482.   // get group key
  483.   var $buttonGroup = $this.parents('.button-group');
  484.   var filterGroup = $buttonGroup.attr('data-filter-group');
  485.   // set filter for group
  486.   filters[ filterGroup ] = $this.attr('data-filter');
  487.   // combine filters
  488.   var filterValue = concatValues( filters );
  489.   // set filter for Isotope
  490.   $grid.isotope({ filter: filterValue });
  491. });
  492.  
  493. // change is-checked class on buttons
  494. $('.button-group').each( function( i, buttonGroup ) {
  495.   var $buttonGroup = $( buttonGroup );
  496.   $buttonGroup.on( 'click', 'button', function() {
  497.     $buttonGroup.find('.is-checked').removeClass('is-checked');
  498.     $( this ).addClass('is-checked');
  499.   });
  500. });
  501.  
  502. });
  503. // flatten object by concatting values
  504. function concatValues( obj ) {
  505. var value = '';
  506. for ( var prop in obj ) {
  507.   value += obj[ prop ];
  508. }
  509. return value;
  510. }
  511. </script>
  512. </body>
  513. </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!