Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- - page 'bones' by skye southcodes.tumblr.com
- - modify as you please but please do not touch the credit
- - any errors? need help? have questions? let me know!
- southcodes.tumblr.com/inbox
- - normalize css by https://github.com/necolas
- - fonts by google
- - icon font by http://fontawesome.io/icons/
- - isotope filters by https://isotope.metafizzy.co/
- how to customize filters tutorial: https://hendrixrph-blog.tumblr.com/post/131707989334/under-the-cut-is-a-tutorial-on-how-to-create-a
- you can edit the colors of each quote card directly in its html code
- 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
- -->
- <!DOCTYPE html>
- <html>
- <head>
- <title>{title}</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="shortcut icon" href="{favicon}">
- <meta name="description" content="{MetaDescription}"/>
- <!-- fonts -->
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <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">
- <!-- normalize -->
- <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
- <style>
- :root {
- --background:#fafafa;
- --text:#333;
- --links: #fa854f;
- --links-hover: #cf4949;
- --accents: coral;
- --borders:#ddd;
- }
- .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
- .tmblr-iframe:hover {opacity:.8;}
- ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
- ::-webkit-scrollbar {width:6px}
- ::-webkit-scrollbar-track-piece{margin:5px 0;}
- pre {font-family:consolas;
- white-space: pre-wrap; /* css-3 */
- white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
- white-space: -pre-wrap; /* Opera 4- */
- white-space: -o-pre-wrap; /* Opera 7 */
- word-wrap: break-word;} /* Internet Explorer 5.5+ */
- * {margin: 0;padding: 0; box-sizing: border-box;}
- p {margin:1rem 0}
- body, figure{margin:0;padding:0}
- html{font: 14px 'Karla', sans-serif;}
- body {font-size:14px;color:var(--text);background:var(--background);}
- a {text-decoration: none;color:var(--links);word-break:break-word;}
- a:hover {color:var(--links-hover);}
- blockquote {margin:0;padding:0;}
- img {max-width:100%;height: auto;display: block;margin:0}
- hr {border:0;border-top:1px solid var(--borders);margin:0;}
- ol, ul, li {list-style-type:none;margin:0;padding:0;}
- #flex-container {
- display: flex;
- }
- /* aside */
- aside {
- width: 22rem;
- height: 100vh;
- overflow: auto;
- text-align: right;
- padding: 0 3rem;
- }
- .header-image {
- width: 9rem;
- aspect-ratio: 1 / 1;
- object-fit: cover;
- border-radius: 100%;}
- figure.header-image {
- margin:3rem auto;
- border: .8rem solid white;
- outline: 1px solid var(--borders);
- }
- #container {
- width: 100%;
- padding: 1rem;
- height: 100vh;
- overflow: auto;
- }
- /* header */
- header {
- margin:5rem 0;
- }
- #page-title {
- font-family: "Roboto Mono", monospace;
- font-weight: 400;
- display: inline-block;
- vertical-align: middle;
- margin:0 1.7rem 0 0;
- letter-spacing: .03rem;
- }
- #page-title a {color: var(--text);}
- #page-title::first-letter {
- font-weight: 700;
- color: var(--accents);
- font-size: 2.4rem;
- }
- #tumblr-navigation {
- display: inline-block;
- vertical-align: middle;
- }
- #tumblr-navigation li {
- display: inline-block;
- vertical-align: middle;
- margin-right: 1rem;
- font-size: 1.2rem;
- }
- #description {
- max-width: 40rem;
- line-height: 135%;
- letter-spacing: .03rem;
- margin-top: 2rem;
- font-size: 1.05rem;
- }
- #main-navigation li{
- font-weight: 600;
- margin-right: 1.5rem;
- display: inline-block;
- }
- .quote-card {
- position: relative;
- width: calc(50% - 6rem);
- margin:0 6rem 6rem 0;
- background-color: var(--boxes-background);
- border-top: 15px solid transparent;
- border-radius: 3px;
- font-size: 1.1rem;
- line-height: 150%;
- letter-spacing: .03rem;
- }
- .quote-card.favorite:before {
- content: '\f005';
- position: absolute;
- inset:-1.5rem auto auto -1rem;
- font-family: 'Font awesome 5 free';
- font-weight: 900;
- font-size: 2rem;
- color: var(--accents);
- }
- .quote-content {padding: 1rem 2rem;}
- .quote-footer {
- display: flex;
- justify-content: space-between;
- padding: .7rem 3rem .7rem 1rem;
- border: 1px solid var(--borders);
- }
- .footer-fandom {font-weight: 600;}
- .footer-timestamp {
- font-size: .95rem;
- letter-spacing: .04rem;
- }
- .note-button {
- position: absolute;
- inset: auto -1rem -1rem auto;
- width: 3rem;
- height: 3rem;
- border: 1px solid var(--borders);
- border-radius: 100%;
- outline: 0;
- background-color: var(--background);
- cursor: pointer;
- transition-duration: .2s;
- font-size: 1.3rem;
- color: var(--links);
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .rotate {transform: rotate(45deg);}
- .note-content {
- display: none;
- width: 100%;
- position: absolute;
- z-index: 8;
- padding: 1rem 2rem;
- margin:1.5rem 0 0;
- border-radius: 4px;
- border: 1px solid var(--borders);
- }
- #filters-title {
- font-family: "Roboto Mono", monospace;
- font-weight: 400;
- font-size: 1.3rem;
- letter-spacing: -.05rem;
- margin-bottom: 1rem;
- border-right: 3px solid var(--accents);
- padding-right: 1rem;
- }
- #filters-title::first-letter {
- font-weight: 700;
- color: var(--accents);
- }
- .button-group {margin: 2rem 0 3.5rem;}
- .fa-star {
- color: var(--accents);
- font-size: 1rem;
- margin-left: .5rem;
- }
- .group-title {margin-bottom: 1.5rem;}
- .group-title:after {
- font-family: 'Font awesome 5 free';
- content: '\f111';
- font-size: .5rem;
- color: var(--accents);
- vertical-align: middle;
- margin-left: 1rem;
- }
- .button-group button {
- background-color: transparent;
- border: 0;
- outline: 0;
- cursor: pointer;
- display: block;
- text-align: right;
- width: 100%;
- font-family: 'karla', sans-serif;
- font-size: 1.1rem;
- margin: 1rem 0;
- transition-duration: .1s;
- color:var(--text)
- }
- .button-group button:hover {color: var(--links-hover);}
- .is-checked {
- font-weight: 600;
- color: var(--accents)!important;
- text-decoration: underline;
- }
- /* MEDIA */
- @media only screen and (min-width:0) and (max-width:1100px) {
- aside {
- width: 18rem;
- padding:0 1rem
- }
- main {
- max-width: 40rem;
- margin: auto;
- }
- .quote-card {
- width: 100%;
- margin: 0 0 6rem;
- }
- }
- @media only screen and (min-width:1700px) and (max-width:9999px) {
- .quote-card {
- width: calc(33% - 6rem);
- margin:0 6rem 6rem 0;
- }
- }
- </style>
- </head>
- <body>
- <section id="flex-container">
- <aside>
- <figure class="header-image"><a href="/"><img src="IMAGE URL" alt="" class="header-image"></a>
- </figure>
- <section class="filters">
- <h2 id="filters-title">filters</h2>
- <nav class="button-group" data-filter-group="fav">
- <button class="button is-checked" data-filter="">all</button>
- <button class="button" data-filter=".favorite">favorites <i class="fa-solid fa-star"></i></button>
- </nav>
- <nav class="button-group" data-filter-group="one">
- <h3 class="group-title">filter title</h3>
- <button class="button is-checked" data-filter="">all</button>
- <button class="button" data-filter=".one">one</button>
- <button class="button" data-filter=".two">two</button>
- </nav>
- <nav class="button-group" data-filter-group="two">
- <h3 class="group-title">filter title</h3>
- <button class="button is-checked" data-filter="">all</button>
- <button class="button" data-filter=".three">three</button>
- <button class="button" data-filter=".four">four</button>
- </nav>
- </section><!--filters end-->
- </aside>
- <section id="container">
- <header>
- <h1 id="page-title"><a href="/">page title</a></h1>
- <nav id="tumblr-navigation"><ul>
- <li><a href=""><i class="fa-solid fa-home"></i></a></li>
- <li><a href=""><i class="fa-solid fa-envelope"></i></a></li>
- </ul></nav>
- <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>
- <nav id="main-navigation"><ul>
- <li><a href="">link</a></li>
- <li><a href="">link</a></li>
- <li><a href="">link</a></li>
- </ul></nav>
- </header>
- <main id="main">
- <section style=" border-top-color:BORDER TOP COLOR; background-color: BACKGROUND COLOR" class="quote-card one three">
- <article class="quote-content">
- <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>
- </article>
- <footer class="quote-footer" style="background-color: BACKGROUND COLOR;">
- <li class="footer-fandom">fandom</li>
- <li class="footer-timestamp">timestamp</li>
- </footer>
- <button class="note-button"><i class="fa-solid fa-plus"></i></button>
- <div class="note-content" style="background-color:BACKGROUND COLOR;">
- <p>comment</p>
- </div>
- </section>
- <section style=" border-top-color:BORDER TOP COLOR; background-color: BACKGROUND COLOR" class="quote-card one two four">
- <article class="quote-content">
- <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>
- </article>
- <footer class="quote-footer" style="background-color: BACKGROUND COLOR;">
- <li class="footer-fandom">fandom</li>
- <li class="footer-timestamp">timestamp</li>
- </footer>
- <button class="note-button"><i class="fa-solid fa-plus"></i></button>
- <div class="note-content" style="background-color:BACKGROUND COLOR;">
- <p>comment</p>
- </div>
- </section>
- <section style=" border-top-color:BORDER TOP COLOR; background-color: BACKGROUND COLOR" class="quote-card four two three">
- <article class="quote-content">
- <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>
- </article>
- <footer class="quote-footer" style="background-color: BACKGROUND COLOR;">
- <li class="footer-fandom">fandom</li>
- <li class="footer-timestamp">timestamp</li>
- </footer>
- <button class="note-button"><i class="fa-solid fa-plus"></i></button>
- <div class="note-content" style="background-color:BACKGROUND COLOR;">
- <p>comment</p>
- </div>
- </section>
- </main>
- </section>
- </section>
- <!-- do not touch -->
- <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>
- <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
- <!-- isotope -->
- <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
- <!-- icons font -->
- <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
- <script>
- $(document).ready( function() {
- $('.note-button').click(function(){
- $(this).next('.note-content').fadeToggle();
- });
- $( ".note-button" ).on( "click", function() {
- $( this ).toggleClass( "rotate" );
- });
- // init Isotope
- var $grid = $('#main').isotope({
- itemSelector: '.quote-card'
- });
- // store filter for each group
- var filters = {};
- $('.filters').on( 'click', '.button', function() {
- var $this = $(this);
- // get group key
- var $buttonGroup = $this.parents('.button-group');
- var filterGroup = $buttonGroup.attr('data-filter-group');
- // set filter for group
- filters[ filterGroup ] = $this.attr('data-filter');
- // combine filters
- var filterValue = concatValues( filters );
- // set filter for Isotope
- $grid.isotope({ filter: filterValue });
- });
- // change is-checked class on buttons
- $('.button-group').each( function( i, buttonGroup ) {
- var $buttonGroup = $( buttonGroup );
- $buttonGroup.on( 'click', 'button', function() {
- $buttonGroup.find('.is-checked').removeClass('is-checked');
- $( this ).addClass('is-checked');
- });
- });
- });
- // flatten object by concatting values
- function concatValues( obj ) {
- var value = '';
- for ( var prop in obj ) {
- value += obj[ prop ];
- }
- return value;
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement