├── .gitignore
├── CNAME
├── LICENSE
├── README.md
├── _config.yml
├── _data
    ├── dinosaurs.yml
    └── philosophers.yml
├── _includes
    ├── examples
    │   ├── hashTabber-example-code-html.liquid
    │   ├── hashTabber-example-code-js-options.liquid
    │   ├── hashTabber-example-code-js-run.liquid
    │   ├── hashTabber-example-naked.liquid
    │   ├── hashTabber-example-sandstone.liquid
    │   └── hashTabber-example-theme-blank.liquid
    ├── html-begin.liquid
    ├── html-end.liquid
    ├── img
    │   └── hashtabber-logo.svg
    ├── page-footer.liquid
    └── page-header.liquid
├── _layouts
    └── default.liquid
├── assets
    ├── config.rb
    ├── css
    │   └── main.css
    ├── img
    │   └── favicon.ico
    ├── js
    │   ├── libraries
    │   │   └── hashTabber.js
    │   └── script.js
    └── scss
    │   ├── _config.scss
    │   ├── base
    │       ├── _normalize.scss
    │       ├── _print.scss
    │       └── _typography.scss
    │   ├── helpers
    │       ├── _columns.scss
    │       ├── _functions.scss
    │       └── _mixins.scss
    │   ├── layout
    │       ├── _content.scss
    │       ├── _footer.scss
    │       └── _header.scss
    │   ├── libraries
    │       └── _hashTabber.scss
    │   ├── main.scss
    │   ├── modules
    │       ├── _buttons.scss
    │       └── _page-navigation.scss
    │   └── themes
    │       └── _hashTabber-sandstone.scss
├── humans.txt
├── index.html
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | ## Jekyll site output
2 | _site
3 | 
4 | ## ignore compass cache
5 | .sass-cache
6 | 
7 | ## please do
8 | .wild-trilobites


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | hashtabber.magicznyleszek.xyz


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | CC0 1.0 Universal
  2 | 
  3 | Statement of Purpose
  4 | 
  5 | The laws of most jurisdictions throughout the world automatically confer
  6 | exclusive Copyright and Related Rights (defined below) upon the creator and
  7 | subsequent owner(s) (each and all, an "owner") of an original work of
  8 | authorship and/or a database (each, a "Work").
  9 | 
 10 | Certain owners wish to permanently relinquish those rights to a Work for the
 11 | purpose of contributing to a commons of creative, cultural and scientific
 12 | works ("Commons") that the public can reliably and without fear of later
 13 | claims of infringement build upon, modify, incorporate in other works, reuse
 14 | and redistribute as freely as possible in any form whatsoever and for any
 15 | purposes, including without limitation commercial purposes. These owners may
 16 | contribute to the Commons to promote the ideal of a free culture and the
 17 | further production of creative, cultural and scientific works, or to gain
 18 | reputation or greater distribution for their Work in part through the use and
 19 | efforts of others.
 20 | 
 21 | For these and/or other purposes and motivations, and without any expectation
 22 | of additional consideration or compensation, the person associating CC0 with a
 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
 25 | and publicly distribute the Work under its terms, with knowledge of his or her
 26 | Copyright and Related Rights in the Work and the meaning and intended legal
 27 | effect of CC0 on those rights.
 28 | 
 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be
 30 | protected by copyright and related or neighboring rights ("Copyright and
 31 | Related Rights"). Copyright and Related Rights include, but are not limited
 32 | to, the following:
 33 | 
 34 |   i. the right to reproduce, adapt, distribute, perform, display, communicate,
 35 |   and translate a Work;
 36 | 
 37 |   ii. moral rights retained by the original author(s) and/or performer(s);
 38 | 
 39 |   iii. publicity and privacy rights pertaining to a person's image or likeness
 40 |   depicted in a Work;
 41 | 
 42 |   iv. rights protecting against unfair competition in regards to a Work,
 43 |   subject to the limitations in paragraph 4(a), below;
 44 | 
 45 |   v. rights protecting the extraction, dissemination, use and reuse of data in
 46 |   a Work;
 47 | 
 48 |   vi. database rights (such as those arising under Directive 96/9/EC of the
 49 |   European Parliament and of the Council of 11 March 1996 on the legal
 50 |   protection of databases, and under any national implementation thereof,
 51 |   including any amended or successor version of such directive); and
 52 | 
 53 |   vii. other similar, equivalent or corresponding rights throughout the world
 54 |   based on applicable law or treaty, and any national implementations thereof.
 55 | 
 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of,
 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
 59 | and Related Rights and associated claims and causes of action, whether now
 60 | known or unknown (including existing as well as future claims and causes of
 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum
 62 | duration provided by applicable law or treaty (including future time
 63 | extensions), (iii) in any current or future medium and for any number of
 64 | copies, and (iv) for any purpose whatsoever, including without limitation
 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
 66 | the Waiver for the benefit of each member of the public at large and to the
 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver
 68 | shall not be subject to revocation, rescission, cancellation, termination, or
 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work
 70 | by the public as contemplated by Affirmer's express Statement of Purpose.
 71 | 
 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be
 73 | judged legally invalid or ineffective under applicable law, then the Waiver
 74 | shall be preserved to the maximum extent permitted taking into account
 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
 76 | is so judged Affirmer hereby grants to each affected person a royalty-free,
 77 | non transferable, non sublicensable, non exclusive, irrevocable and
 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in
 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration
 80 | provided by applicable law or treaty (including future time extensions), (iii)
 81 | in any current or future medium and for any number of copies, and (iv) for any
 82 | purpose whatsoever, including without limitation commercial, advertising or
 83 | promotional purposes (the "License"). The License shall be deemed effective as
 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the
 85 | License for any reason be judged legally invalid or ineffective under
 86 | applicable law, such partial invalidity or ineffectiveness shall not
 87 | invalidate the remainder of the License, and in such case Affirmer hereby
 88 | affirms that he or she will not (i) exercise any of his or her remaining
 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims
 90 | and causes of action with respect to the Work, in either case contrary to
 91 | Affirmer's express Statement of Purpose.
 92 | 
 93 | 4. Limitations and Disclaimers.
 94 | 
 95 |   a. No trademark or patent rights held by Affirmer are waived, abandoned,
 96 |   surrendered, licensed or otherwise affected by this document.
 97 | 
 98 |   b. Affirmer offers the Work as-is and makes no representations or warranties
 99 |   of any kind concerning the Work, express, implied, statutory or otherwise,
100 |   including without limitation warranties of title, merchantability, fitness
101 |   for a particular purpose, non infringement, or the absence of latent or
102 |   other defects, accuracy, or the present or absence of errors, whether or not
103 |   discoverable, all to the greatest extent permissible under applicable law.
104 | 
105 |   c. Affirmer disclaims responsibility for clearing rights of other persons
106 |   that may apply to the Work or any use thereof, including without limitation
107 |   any person's Copyright and Related Rights in the Work. Further, Affirmer
108 |   disclaims responsibility for obtaining any necessary consents, permissions
109 |   or other rights required for any use of the Work.
110 | 
111 |   d. Affirmer understands and acknowledges that Creative Commons is not a
112 |   party to this document and has no duty or obligation with respect to this
113 |   CC0 or use of the Work.
114 | 
115 | For more information, please see
116 | <http://creativecommons.org/publicdomain/zero/1.0/>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # hashTabber
 2 | 
 3 | This is a simple JavaScript plugin for hashchange-driven tabbed navigation system. I was constantly in need of those, so I finally made a kinda-plugin.
 4 | 
 5 | You can read more at [hashtabber.magicznyleszek.xyz](http://hashtabber.magicznyleszek.xyz).
 6 | 
 7 | 
 8 | ## Contact
 9 | 
10 | You can contact me at [leszek@magicznyleszek.xyz](mailto:leszek@magicznyleszek.xyz).
11 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
 1 | # description
 2 | name: "HashTabber"
 3 | description: "A simple JavaScript plugin for hashchange-driven tabbed navigation"
 4 | keywords: "vanilla, javascript, plugin, hashchange, tab, navigation"
 5 | author: "Leszek Pietrzak"
 6 | 
 7 | # address settings
 8 | baseurl: http://hashtabber.magicznyleszek.xyz
 9 | permalink: /post/:title
10 | 
11 | # site configuration
12 | encoding: UTF-8
13 | markdown: rdiscount
14 | future: true
15 | paginate: 9000
16 | 


--------------------------------------------------------------------------------
/_data/dinosaurs.yml:
--------------------------------------------------------------------------------
 1 | - name: Trilobite
 2 |   slug: trilobite
 3 |   url: http://en.wikipedia.org/wiki/Trilobite
 4 |   description: "Trilobites are a well-known fossil group of extinct marine arthropods that form the class Trilobita. Trilobites form one of the earliest known groups of arthropods. The first appearance of trilobites in the fossil record defines the base of the Atdabanian stage of the Early Cambrian period (521 million years ago), and they flourished throughout the lower Paleozoic era before beginning a drawn-out decline to extinction when, during the Devonian, all trilobite orders except Proetida died out. Trilobites finally disappeared in the mass extinction at the end of the Permian about 250 million years ago. The trilobites were among the most successful of all early animals, roaming the oceans for over 270 million years."
 5 | 
 6 | - name: Velociraptor
 7 |   slug: velociraptor
 8 |   url: http://en.wikipedia.org/wiki/Velociraptor
 9 |   description: "Velociraptor is a genus of dromaeosaurid theropod dinosaur that lived approximately 75 to 71 million years ago during the later part of the Cretaceous Period.Two species are currently recognized, although others have been assigned in the past. The type species is V. mongoliensis; fossils of this species have been discovered in Mongolia. A second species, V. osmolskae, was named in 2008 for skull material from Inner Mongolia, China."
10 | 
11 | - name: Pterosaur
12 |   slug: pterosaur
13 |   url: http://en.wikipedia.org/wiki/Pterosaur
14 |   description: "Pterosaurs were flying reptiles of the clade or order Pterosauria. They existed from the late Triassic to the end of the Cretaceous Period (228 to 66 million years ago). Pterosaurs are the earliest vertebrates known to have evolved powered flight. Their wings were formed by a membrane of skin, muscle, and other tissues stretching from the ankles to a dramatically lengthened fourth finger. Early species had long, fully toothed jaws and long tails, while later forms had a highly reduced tail, and some lacked teeth. Many sported furry coats made up of hair-like filaments known as pycnofibres, which covered their bodies and parts of their wings. Pterosaurs spanned a wide range of adult sizes, from the very small Nemicolopterus to the largest known flying creatures of all time, including Quetzalcoatlus and Hatzegopteryx."
15 | 
16 | - name: Lambeosaurus magnicristatus
17 |   slug: lambeosaurus
18 |   url: http://en.wikipedia.org/wiki/Lambeosaurus_magnicristatus
19 |   description: "Lambeosaurus is a genus of hadrosaurid dinosaur that lived about 76 to 75 million years ago, in the Late Cretaceous period (Campanian) of North America. This bipedal/quadrupedal, herbivorous dinosaur is known for its distinctive hollow cranial crest, which in the best-known species resembled a hatchet. Several possible species have been named, from Canada, the United States, and Mexico, but only the two Canadian species are currently recognized as valid."
20 | 
21 | - name: Eoraptor
22 |   slug: eoraptor
23 |   url: http://en.wikipedia.org/wiki/Eoraptor
24 |   description: "Eoraptor was one of the world's earliest dinosaurs that lived ca. 231.4 million years ago, during the latter part of the Triassic Period in Western Gondwana, what is now the northwestern region of Argentina. It was a small sized (1 m (3.3 ft) long), lightly-built, ground-dwelling, two-legged bipedal saurischian, close to the ancestry of both theropods and sauropodomorphs. It is known from several well-preserved skeletons. When first described in 1993, it was considered to be one of the earliest, if not the earliest known dinosaur. Eoraptor has heterodont dentition, suggesting that it was omnivorous, and that this feeding strategy had evolved early on in dinosaurs."


--------------------------------------------------------------------------------
/_data/philosophers.yml:
--------------------------------------------------------------------------------
 1 | - name: Baruch Spinoza
 2 |   slug: spinoza
 3 |   url: http://en.wikipedia.org/wiki/Baruch_Spinoza
 4 |   description: "Baruch Spinoza (/bəˈruːk spɪˈnoʊzə/; born Benedito de Espinosa; 24 November 1632 – 21 February 1677) — later Benedict de Spinoza — was a Dutch philosopher. The breadth and importance of Spinoza's work was not fully realized until years after his death. By laying the groundwork for the 18th century Enlightenment and modern biblical criticism, including modern conceptions of the self and, arguably, the universe, he came to be considered one of the great rationalists of 17th-century philosophy. His magnum opus, the posthumous Ethics, in which he opposed Descartes's mind–body dualism, has earned him recognition as one of Western philosophy's most important thinkers. In the Ethics, \"Spinoza wrote the last indisputable Latin masterpiece, and one in which the refined conceptions of medieval philosophy are finally turned against themselves and destroyed entirely.\" Philosopher Georg Wilhelm Friedrich Hegel said of all contemporary philosophers, \"You are either a Spinozist or not a philosopher at all.\""
 5 | 
 6 | - name: Socrates
 7 |   slug: socrates
 8 |   url: http://en.wikipedia.org/wiki/Socrates
 9 |   description: "Socrates (/ˈsɒkrətiːz/;[2] Greek: Σωκράτης, Ancient Greek pronunciation: [sɔːkrátɛːs], Sōkrátēs; 470/469 BC – 399 BC) was a classical Greek (Athenian) philosopher. Credited as one of the founders of Western philosophy, he is an enigmatic figure known chiefly through the accounts of later classical writers, especially the writings of his students Plato and Xenophon and the plays of his contemporary Aristophanes. Many would claim that Plato's dialogues are the most comprehensive accounts of Socrates to survive from antiquity."
10 | 
11 | - name: Friedrich Nietzsche
12 |   slug: nietzsche
13 |   url: http://en.wikipedia.org/wiki/Friedrich_Nietzsche
14 |   description: "Friedrich Wilhelm Nietzsche (/ˈniːtʃə/ or /ˈnitʃi/; German: [ˈfʁiːdʁɪç ˈvɪlhɛlm ˈniːt͡sʃə]; 15 October 1844 – 25 August 1900) was a German philologist, philosopher, cultural critic, poet and composer. He wrote several critical texts on religion, morality, contemporary culture, philosophy and science, displaying a fondness for metaphor, irony and aphorism."
15 | 
16 | - name: Marquis de Sade
17 |   slug: desade
18 |   url: http://en.wikipedia.org/wiki/Marquis_de_Sade
19 |   description: "Donatien Alphonse François de Sade (2 June 1740 – 2 December 1814), better known as the Marquis de Sade (French: [maʁki də sad]), was a French aristocrat, revolutionary politician, philosopher and writer, famous for his libertine sexuality. His works include novels, short stories, plays, dialogues and political tracts; in his lifetime some were published under his own name, while others appeared anonymously and Sade denied being their author. He is best known for his erotic works, which combined philosophical discourse with pornography, depicting sexual fantasies with an emphasis on violence, criminality and blasphemy against the Catholic Church. He was a proponent of extreme freedom, unrestrained by morality, religion or law. The words \"sadism\" and \"sadist\" are derived from his name."


--------------------------------------------------------------------------------
/_includes/examples/hashTabber-example-code-html.liquid:
--------------------------------------------------------------------------------
 1 | &lt;ol class="hashTabber-nav" data-hashtabber-id="foo"&gt;
 2 |     &lt;li&gt;&lt;a&gt;First item&lt;/a&gt;&lt;/li&gt;
 3 |     &lt;li&gt;&lt;a&gt;Second item&lt;/a&gt;&lt;/li&gt;
 4 |     &lt;li&gt;&lt;a&gt;Third item&lt;/a&gt;&lt;/li&gt;
 5 | &lt;/ol&gt;
 6 | &lt;ol class="hashTabber-data" data-hashtabber-id="foo"&gt;
 7 |     &lt;li&gt;This is the first item content.&lt;/li&gt;
 8 |     &lt;li&gt;This is the second item content.&lt;/li&gt;
 9 |     &lt;li&gt;This is the third item content.&lt;/li&gt;
10 | &lt;/ol&gt;


--------------------------------------------------------------------------------
/_includes/examples/hashTabber-example-code-js-options.liquid:
--------------------------------------------------------------------------------
1 | var tabber = new HashTabber(options = {
2 |     classActive: 'active',
3 |     classData: 'hashTabber-data',
4 |     classNav: 'hashTabber-nav',
5 |     dataDefault: 'data-hashtabber-default',
6 |     dataId: 'data-hashtabber-id',
7 |     dataPair: 'data-hashtabber-pair',
8 | });


--------------------------------------------------------------------------------
/_includes/examples/hashTabber-example-code-js-run.liquid:
--------------------------------------------------------------------------------
1 | var tabber = new HashTabber();
2 | tabber.run();


--------------------------------------------------------------------------------
/_includes/examples/hashTabber-example-naked.liquid:
--------------------------------------------------------------------------------
 1 | <ol class="hashTabber-nav" data-hashtabber-id="philosophers">
 2 |     {% for philosopher in site.data.philosophers %}
 3 |         <li>
 4 |             <a>{{ philosopher.name }}</a>
 5 |         </li>
 6 |     {% endfor %}
 7 | </ol><!--
 8 | --><ol class="hashTabber-data" data-hashtabber-id="philosophers">
 9 |     {% for philosopher in site.data.philosophers %}
10 |         <li>
11 |             <p>{{ philosopher.description }}</p>
12 |         </li>
13 |     {% endfor %}
14 | </ol>


--------------------------------------------------------------------------------
/_includes/examples/hashTabber-example-sandstone.liquid:
--------------------------------------------------------------------------------
 1 | <section class="hashTabber-sandstone-wrapper">
 2 |     <ol class="hashTabber-nav hashTabber-sandstone" data-hashtabber-id="dinosaurs" data-hashtabber-default="pterosaur">
 3 |         <h2>Species:</h2>
 4 |         {% for dinosaur in site.data.dinosaurs %}
 5 |             <li data-hashtabber-pair="{{ dinosaur.slug }}">
 6 |                 <a>{{ dinosaur.name }}</a>
 7 |             </li>
 8 |         {% endfor %}
 9 |     </ol><!--
10 |  --><ol class="hashTabber-data hashTabber-sandstone" data-hashtabber-id="dinosaurs">
11 |         {% for dinosaur in site.data.dinosaurs %}
12 |             <li data-hashtabber-pair="{{ dinosaur.slug }}">
13 |                 <article>
14 |                     <h3>{{ dinosaur.name}}</h3>
15 |                     <p>{{ dinosaur.description }}</p>
16 |                     <p><a href="{{ dinosaur.url }}" target="_blank">Read more about {{ dinosaur.name }}</a></p>
17 |                 </article>
18 |             </li>
19 |         {% endfor %}
20 |     </ol>
21 | </section>


--------------------------------------------------------------------------------
/_includes/examples/hashTabber-example-theme-blank.liquid:
--------------------------------------------------------------------------------
 1 | ol.hashTabber-nav.hashTabber-themename {
 2 |     > li {
 3 |         &.active {
 4 |             a {
 5 |                 &:hover {
 6 |                 }
 7 |             }
 8 |         }
 9 |         > a {
10 |             &:hover {
11 |             }
12 |         }
13 |     }
14 | }
15 | ol.hashTabber-data.hashTabber-themename {
16 |     > li {
17 |         &.active {
18 |         }
19 |     }
20 | }


--------------------------------------------------------------------------------
/_includes/html-begin.liquid:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html class="pterodactylus crushed my algorithms" lang="en">
 3 | 
 4 | <head>
 5 | 
 6 |     <!-- stuff -->
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="cleartype" content="on">
 9 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
10 | 
11 |     <!-- info -->
12 |     <title>{{ site.name }}</title>
13 |     <meta name="keywords" content="{{ site.keywords }}">
14 |     <meta name="description" content="{{ site.description }}">
15 |     <meta name="author" content="{{ site.author }}">
16 |     <link rel="author" href="{{ site.baseurl }}/humans.txt">
17 |     <link rel="home" href="{{ site.baseurl }}">
18 | 
19 |     <!-- style & viewport -->
20 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
21 |     <link href="{{ site.baseurl }}/assets/css/main.css?version=6" media="all" rel="stylesheet">
22 | 
23 |     <!-- icons -->
24 |     <link rel="icon" href="{{ site.baseurl }}/assets/img/favicon.ico?version=6">
25 |     
26 |     <!-- fonts -->
27 |     <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic&subset=latin,latin-ext" rel="stylesheet">
28 |     <link href="http://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
29 |     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
30 |     
31 |     <!-- Google site verification -->
32 |     <meta name="google-site-verification" content="OfxcwNfD-FCORJa6mPrRp_M1SWtECePAuVbDpi9wiww">
33 | 
34 | </head>
35 | 
36 | <body>
37 | 


--------------------------------------------------------------------------------
/_includes/html-end.liquid:
--------------------------------------------------------------------------------
 1 |     <!-- js libraries -->
 2 |     <script src="{{ site.baseurl }}/assets/js/libraries/hashTabber.js"></script>
 3 |     
 4 |     <!-- custom script -->
 5 |     <script src="{{ site.baseurl }}/assets/js/script.js"></script>
 6 | 
 7 | </body>
 8 | 
 9 | <!-- Google Analytics -->
10 | <script>
11 |     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
12 |     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
13 |     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
14 |     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
15 |     ga('create', 'UA-49618039-1', 'magicznyleszek.xyz');
16 |     ga('send', 'pageview');
17 | </script>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/_includes/img/hashtabber-logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
2 |     <path d="M80.223,285.321h13.253c2.039,0,3.693,1.653,3.693,3.693v21.654c0,2.039,1.653,3.693,3.693,3.693h15.894 c2.039,0,3.693-1.653,3.693-3.693v-21.654c0-2.039,1.653-3.693,3.693-3.693h13.254c2.039,0,3.693,1.653,3.693,3.693v70.612 c0,2.039-1.653,3.693-3.693,3.693h-13.254c-2.039,0-3.693-1.653-3.693-3.693v-23.574c0-2.039-1.653-3.693-3.693-3.693h-15.894 c-2.039,0-3.693,1.653-3.693,3.693v23.574c0,2.039-1.653,3.693-3.693,3.693H80.223c-2.039,0-3.693-1.653-3.693-3.693v-70.612 C76.53,286.975,78.184,285.321,80.223,285.321z M180.92,325.497c4.364-0.769,3.877-7.263-0.555-7.296 c-0.052,0-0.105-0.001-0.158-0.001c-3.556,0-7.274,1.138-11.959,3.415c-1.783,0.866-3.937,0.175-4.873-1.572l-3.779-7.055 c-0.961-1.793-0.299-4.047,1.499-4.999c7.395-3.913,15.019-6.109,23.192-6.109c15.6,0,24.959,8.399,24.959,28.079v29.666 c0,2.039-1.653,3.693-3.693,3.693h-10.223c-1.694,0-3.171-1.153-3.582-2.797l-0.741-2.963h-0.479c-4.8,4.32-10.08,7.199-16.56,7.199 c-11.279,0-17.999-8.639-17.999-18.479C155.97,335.291,163.413,328.582,180.92,325.497z M181.169,348.919 c2.817,0,4.621-1.181,6.404-2.977c0.674-0.679,1.035-1.609,1.035-2.565v-2.203c0-2.433-2.314-4.188-4.666-3.566 c-6.193,1.638-8.294,4.234-8.294,6.992C175.648,347.359,177.568,348.919,181.169,348.919z M226.349,346.567 c1.136-1.584,3.31-2.006,4.962-0.971c4.369,2.74,8.318,4.042,11.777,4.042c4.319,0,6-1.199,6-3.6c0-3.12-5.521-4.56-11.52-6.96 c-6.96-2.76-15.12-7.919-15.12-17.759c0-11.76,9.6-19.439,23.76-19.439c7.921,0,13.975,2.566,18.79,5.633 c1.824,1.162,2.304,3.611,1.011,5.345l-4.756,6.383c-1.139,1.528-3.25,1.926-4.882,0.941c-3.327-2.007-6.532-3.183-9.443-3.183 c-3.479,0-5.28,0.96-5.28,3.36c0,3.12,5.28,4.319,11.28,6.479c7.199,2.64,15.359,7.199,15.359,17.999 c0,11.28-8.88,19.919-25.679,19.919c-6.474,0-14.143-2.388-20.129-6.157c-1.784-1.123-2.219-3.541-0.991-5.254L226.349,346.567z M283.261,279.802h13.253c2.039,0,3.693,1.653,3.693,3.693v15.575c0,0.114-0.005,0.228-0.016,0.342l-0.191,2.05 c-0.278,2.989,2.91,4.997,5.531,3.533c3.219-1.797,7.08-3.114,11.715-3.114c13.199,0,18.719,9.6,18.719,24.479v33.266 c0,2.039-1.653,3.693-3.693,3.693H319.02c-2.039,0-3.693-1.653-3.693-3.693V329c0-7.68-1.92-9.6-6-9.6 c-3.305,0-5.365,1.244-7.864,3.426c-0.799,0.698-1.256,1.717-1.256,2.778v34.021c0,2.039-1.653,3.693-3.693,3.693h-13.253 c-2.039,0-3.693-1.653-3.693-3.693v-76.131C279.568,281.455,281.222,279.802,283.261,279.802z M359.873,302.601h-13.253 c-2.039,0-3.693-1.653-3.693-3.693v-9.894c0-2.039,1.653-3.693,3.693-3.693h54.533c2.039,0,3.693,1.653,3.693,3.693v9.894 c0,2.039-1.653,3.693-3.693,3.693h-13.254c-2.039,0-3.693,1.653-3.693,3.693v53.332c0,2.039-1.653,3.693-3.693,3.693h-13.254 c-2.039,0-3.693-1.653-3.693-3.693v-53.332C363.565,304.254,361.912,302.601,359.873,302.601z M431.717,325.497 c4.364-0.769,3.877-7.263-0.555-7.296c-0.052,0-0.105-0.001-0.158-0.001c-3.556,0-7.274,1.138-11.959,3.415 c-1.783,0.866-3.937,0.175-4.873-1.572l-3.779-7.055c-0.961-1.793-0.299-4.047,1.499-4.999c7.395-3.913,15.019-6.109,23.192-6.109 c15.6,0,24.959,8.399,24.959,28.079v29.666c0,2.039-1.653,3.693-3.693,3.693h-10.223c-1.694,0-3.171-1.153-3.582-2.797l-0.741-2.963 h-0.479c-4.8,4.32-10.08,7.199-16.56,7.199c-11.279,0-17.999-8.639-17.999-18.479C406.767,335.291,414.21,328.582,431.717,325.497z M431.966,348.919c2.817,0,4.621-1.181,6.404-2.977c0.674-0.679,1.035-1.609,1.035-2.565v-2.203c0-2.433-2.314-4.188-4.666-3.566 c-6.193,1.638-8.294,4.234-8.294,6.992C426.445,347.359,428.365,348.919,431.966,348.919z M478.618,279.802h13.253 c2.039,0,3.693,1.653,3.693,3.693v15.644c0,0.068-0.002,0.136-0.006,0.205l-0.063,1.137c-0.157,2.832,2.781,4.727,5.34,3.502 c2.861-1.37,5.935-2.102,9.008-2.102c14.16,0,23.399,12,23.399,30.358c0,20.76-12.239,32.519-24.959,32.519 c-5.279,0-10.56-2.64-15.119-7.919h-0.48l-0.963,3.713c-0.422,1.629-1.892,2.766-3.575,2.766h-9.529 c-2.039,0-3.693-1.653-3.693-3.693v-76.131C474.926,281.455,476.579,279.802,478.618,279.802z M503.244,347.959 c4.8,0,8.88-3.84,8.88-15.359c0-9.84-2.88-13.92-8.399-13.92c-2.712,0-4.881,0.907-7.135,3.194 c-0.668,0.677-1.025,1.606-1.025,2.557v18.811c0,1.26,0.629,2.457,1.703,3.116C499.187,347.534,501.216,347.959,503.244,347.959z M549.416,279.802h13.253c2.039,0,3.693,1.653,3.693,3.693v15.644c0,0.068-0.002,0.136-0.006,0.205l-0.063,1.137 c-0.157,2.832,2.781,4.727,5.34,3.502c2.861-1.37,5.935-2.102,9.008-2.102c14.16,0,23.399,12,23.399,30.358 c0,20.76-12.239,32.519-24.959,32.519c-5.28,0-10.56-2.64-15.119-7.919h-0.48l-0.963,3.713c-0.422,1.629-1.892,2.766-3.575,2.766 h-9.529c-2.039,0-3.693-1.653-3.693-3.693v-76.131C545.724,281.455,547.377,279.802,549.416,279.802z M574.042,347.959 c4.8,0,8.88-3.84,8.88-15.359c0-9.84-2.88-13.92-8.399-13.92c-2.712,0-4.88,0.907-7.135,3.194c-0.668,0.677-1.025,1.606-1.025,2.557 v18.811c0,1.26,0.629,2.457,1.703,3.116C569.985,347.534,572.014,347.959,574.042,347.959z M642.201,301.881 c17.759,0,26.159,12.959,26.159,29.039c0,1.817-0.122,3.511-0.29,4.929c-0.218,1.848-1.803,3.23-3.664,3.23h-25.242 c-3.238,0-4.891,3.858-2.689,6.232c2.625,2.83,6.39,3.848,10.765,3.848c3.11,0,6.08-0.697,9.229-2.092 c1.746-0.773,3.797-0.075,4.716,1.599l3.331,6.067c0.981,1.787,0.332,4.035-1.453,5.019c-5.962,3.288-13.019,5.005-18.703,5.005 c-17.52,0-30.959-11.52-30.959-31.438C613.402,313.881,627.562,301.881,642.201,301.881z M646.483,326.6 c2.655,0,4.519-2.754,3.394-5.159c-1.12-2.392-3.328-3.96-7.196-3.96c-2.779,0-5.292,0.936-7.101,3.162 c-1.936,2.381-0.146,5.957,2.922,5.957H646.483z M684.534,303.32h9.893c1.842,0,3.403,1.358,3.657,3.182l0.996,7.138h0.479 c4.44-8.16,11.16-11.76,17.039-11.76c1.437,0,2.623,0.072,3.635,0.201c2.116,0.271,3.567,2.258,3.171,4.353l-2.031,10.731 c-0.373,1.973-2.25,3.257-4.234,2.956c-0.974-0.148-2.006-0.243-3.18-0.243c-4.185,0-9.273,2.478-12.204,9.401 c-0.188,0.444-0.275,0.927-0.275,1.409v28.936c0,2.039-1.653,3.693-3.693,3.693h-13.253c-2.039,0-3.693-1.653-3.693-3.693v-52.613 C680.841,304.974,682.494,303.32,684.534,303.32z M400,40.242v10c0,2.761-2.239,5-5,5h-10c-2.761,0-5-2.239-5-5v-10 c0-2.761-2.239-5-5-5h-10c-2.761,0-5,2.239-5,5v10c0,2.761-2.239,5-5,5h-10c-2.761,0-5-2.239-5-5v-10c0-2.761-2.239-5-5-5h-10 c-2.761,0-5,2.239-5,5v10c0,2.761-2.239,5-5,5h-10c-2.761,0-5,2.239-5,5v10c0,2.761,2.239,5,5,5h10c2.761,0,5,2.239,5,5v10 c0,2.761-2.239,5-5,5h-10c-2.761,0-5,2.239-5,5v10c0,2.761,2.239,5,5,5h10c2.761,0,5,2.239,5,5v10c0,2.761-2.239,5-5,5h-10 c-2.761,0-5,2.239-5,5v90c0,2.761,2.239,5,5,5h95h40h20h35c2.761,0,5-2.239,5-5v-155v-20v-15c0-2.761-2.239-5-5-5h-90 C402.239,35.242,400,37.481,400,40.242z M345,75.242h10c2.761,0,5,2.239,5,5v10c0,2.761-2.239,5-5,5h-10c-2.761,0-5-2.239-5-5v-10 C340,77.481,342.239,75.242,345,75.242z M340,130.242v-10c0-2.761,2.239-5,5-5h10c2.761,0,5,2.239,5,5v10c0,2.761-2.239,5-5,5h-10 C342.239,135.242,340,133.004,340,130.242z M395,135.242h-10c-2.761,0-5-2.239-5-5v-10c0-2.761,2.239-5,5-5h10c2.761,0,5,2.239,5,5 v10C400,133.004,397.761,135.242,395,135.242z M395,95.242h-10c-2.761,0-5-2.239-5-5v-10c0-2.761,2.239-5,5-5h10 c2.761,0,5,2.239,5,5v10C400,93.004,397.761,95.242,395,95.242z M475,75.242h-10c-2.761,0-5,2.239-5,5v130c0,2.761-2.239,5-5,5h-10 c-2.761,0-5-2.239-5-5v-130c0-2.761-2.239-5-5-5h-10c-2.761,0-5-2.239-5-5v-10c0-2.761,2.239-5,5-5h50c2.761,0,5,2.239,5,5v10 C480,73.004,477.761,75.242,475,75.242z"/>
3 | </svg>


--------------------------------------------------------------------------------
/_includes/page-footer.liquid:
--------------------------------------------------------------------------------
1 | <footer class="page-footer" role="contentinfo">
2 |     
3 |     <small>Made by: <a href="http://leszekpietrzak.com">Leszek Pietrzak</a></small>
4 | 
5 | </footer>


--------------------------------------------------------------------------------
/_includes/page-header.liquid:
--------------------------------------------------------------------------------
 1 | <header class="page-header" role="banner">
 2 |     <a href="{{ site.baseurl }}" class="page-logo">
 3 |         {% include img/hashtabber-logo.svg %}
 4 |     </a>
 5 |     <nav class="page-main-navigation" id="menu" role="navigation">
 6 |         <a href="#menu" class="open"><i class="fa fa-bars fa-fw"></i></a>
 7 |         <a href="#close" class="close"><i class="fa fa-times fa-fw"></i></a>
 8 |         <ol class="page-main-navigation-list">
 9 |             <li><a href="#menu-overview">Overview</a></li>
10 |             <li><a href="#menu-getting-started">Getting started</a></li>
11 |             <li><a href="#menu-options">Options</a></li>
12 |             <li><a href="#menu-themes">Themes</a></li>
13 |             <li><a href="#menu-examples">Examples</a></li>
14 |             <li><a href="#menu-license">License</a></li>
15 |         </ol>
16 |     </nav>
17 | </header>
18 | 


--------------------------------------------------------------------------------
/_layouts/default.liquid:
--------------------------------------------------------------------------------
 1 | {% include html-begin.liquid %}
 2 | {% include page-header.liquid %}
 3 | 
 4 |     <section class="page-content" role="main">
 5 |         
 6 |         {{ content }}
 7 | 
 8 |     </section>
 9 | 
10 | {% include page-footer.liquid %}
11 | {% include html-end.liquid %}


--------------------------------------------------------------------------------
/assets/config.rb:
--------------------------------------------------------------------------------
 1 | # Require any additional compass plugins here.
 2 | 
 3 | # Set this to the root of your project when deployed:
 4 | http_path = "/"
 5 | css_dir = "css"
 6 | sass_dir = "scss"
 7 | images_dir = "img"
 8 | javascripts_dir = "js"
 9 | 
10 | # You can select your preferred output style here (can be overridden via the command line):
11 | output_style = :compressed
12 | 
13 | # To enable relative paths to assets via compass helper functions. Uncomment:
14 | # relative_assets = true
15 | 
16 | # To disable debugging comments that display the original location of your selectors. Uncomment:
17 | # line_comments = false
18 | 
19 | 
20 | # If you prefer the indented syntax, you might want to regenerate this
21 | # project again passing --syntax sass, or you can uncomment this:
22 | # preferred_syntax = :sass
23 | # and then run:
24 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
25 | 


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
1 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}ol.hashTabber-nav,ol.hashTabber-data{list-style:none;margin:0;padding:0}ol.hashTabber-data>li{display:none}ol.hashTabber-data>li.active{display:block}body{min-height:100%;padding:1rem}a{color:#00b464;outline:none;text-decoration:none}a:visited{color:#00b464}a:hover{color:#4cca92}p a,ol a,ul a,blockquote a{border-bottom:0.125rem solid #00b464}p a:hover,ol a:hover,ul a:hover,blockquote a:hover{border-color:transparent}nav ul,nav ol{list-style:none;margin:0;padding:0}:focus{outline-color:#00b464;outline-style:auto;outline-width:0.25rem}::-moz-focus-inner{border:0}img,embed,object,video{max-width:100%}::selection{color:#fff;background-color:#00b464}::-moz-selection{color:#fff;background-color:#00b464}@media print{.noprint{display:none}*{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote,tr,img{page-break-inside:avoid}thead{display:table-header-group}img{max-width:100% !important}h1,h2,h3,h4,h5,h6{page-break-after:avoid}p,h2,h3,h4,h5,h6{orphans:3;widows:3}}html{font:400 20px/1.5 "Source Sans Pro",sans-serif;color:#0c0a09}@media screen and (min-width: 1281px){html{font-size:24px}}@media screen and (max-width: 641px){html{font-size:16px}}h1,h2,h3,h4,h5,h6{line-height:1}h1:not(:first-child),h2:not(:first-child),h3:not(:first-child),h4:not(:first-child),h5:not(:first-child),h6:not(:first-child){margin-top:3rem}h1 a,h1 a:hover,h2 a,h2 a:hover,h3 a,h3 a:hover,h4 a,h4 a:hover,h5 a,h5 a:hover,h6 a,h6 a:hover{text-decoration:none}h1{font-size:3rem}h1.page-title{font-size:4.5rem;font-weight:700;padding:3rem 0 4.5rem;letter-spacing:-0.125rem;color:#00b464;text-shadow:#095 0 0.125rem 0}@media screen and (max-width: 641px){h1.page-title{font-size:3rem;text-shadow:#095 0 0.0625rem 0}}a.page-logo{display:block;width:80%;height:auto;margin:0 auto}a.page-logo svg{max-height:100%}a.page-logo svg path{fill:#00b464}a.page-logo:hover svg path{fill:#4cca92}h2{font-size:2rem}h3{font-size:1.5rem}p:not(:first-child),pre:not(:first-child),section.example:not(:first-child){margin-top:1.5rem}ul,ol{margin-left:1.5rem}ul{list-style-type:disc}ol{list-style-type:decimal}strong{font-weight:bold}em{font-style:italic}code{font-family:"Source Code Pro",monospace;font-size:0.75rem;background-color:#f2f0ef;border:0.0625rem solid #cbc5c1;padding:0 0.125rem;-webkit-border-radius:0.25rem;-moz-border-radius:0.25rem;-ms-border-radius:0.25rem;-o-border-radius:0.25rem;border-radius:0.25rem}pre code{display:block;width:100%;overflow-x:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0.5rem}small,sub,sup{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}hr{display:inline-block;vertical-align:middle;margin:0;padding:0;border:0;width:100%;height:0.125rem;background-color:#000}header.page-header{max-width:48rem;margin:1rem auto}section.page-content{max-width:48rem;margin:auto}section.example{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;width:100%;vertical-align:top;border:0.125rem solid #0c0a09;padding:0.25rem}footer.page-footer{max-width:48rem;margin:auto;padding:4.5rem 0 1.5rem}a.fake-button{color:#fff;background-color:#00b464;line-height:2rem;padding:0 0.5rem;display:inline-block;text-decoration:none;border-bottom:0.125rem solid #095;-webkit-border-radius:0.25rem;-moz-border-radius:0.25rem;-ms-border-radius:0.25rem;-o-border-radius:0.25rem;border-radius:0.25rem}a.fake-button:hover{background-color:#4cca92;border-color:#095}a.fake-button.fake-button-big{font-size:1.5rem;line-height:3rem;padding:0 0.75rem}nav.page-main-navigation{top:0;right:0;position:fixed;z-index:2;font-size:1rem;-webkit-transition:right 0.3s;-moz-transition:right 0.3s;-o-transition:right 0.3s;transition:right 0.3s}nav.page-main-navigation:target{right:10rem}nav.page-main-navigation:target a.open{display:none}nav.page-main-navigation:target a.close{display:block}nav.page-main-navigation ol{height:auto;margin:0;top:0;left:0;position:absolute}nav.page-main-navigation ol li{display:block}nav.page-main-navigation ol li a{width:10rem}nav.page-main-navigation ol li:last-child a{border-bottom:0.125rem solid #095;-webkit-border-radius:0 0 0 0.25rem;-moz-border-radius:0 0 0 0.25rem;-ms-border-radius:0 0 0 0.25rem;-o-border-radius:0 0 0 0.25rem;border-radius:0 0 0 0.25rem}nav.page-main-navigation a{color:#fff;background-color:#00b464;line-height:2rem;padding:0 0.5rem;display:block;text-decoration:none;text-align:left}nav.page-main-navigation a:hover{background-color:#4cca92}nav.page-main-navigation a.close,nav.page-main-navigation a.open{top:0;right:0;position:absolute;border-bottom:0.125rem solid #095;-webkit-border-radius:0 0 0 0.25rem;-moz-border-radius:0 0 0 0.25rem;-ms-border-radius:0 0 0 0.25rem;-o-border-radius:0 0 0 0.25rem;border-radius:0 0 0 0.25rem}nav.page-main-navigation a.close{display:none}.hashTabber-sandstone-wrapper{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;width:100%;vertical-align:top;background-color:#f2f0ef;padding:1rem}ol.hashTabber-nav.hashTabber-sandstone,ol.hashTabber-data.hashTabber-sandstone{list-style:none;margin:0;padding:0}ol.hashTabber-nav.hashTabber-sandstone{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;width:20%;vertical-align:top}@media screen and (max-width: 641px){ol.hashTabber-nav.hashTabber-sandstone{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;width:100%;vertical-align:top;margin-bottom:0.75rem}}ol.hashTabber-nav.hashTabber-sandstone>h2{font-size:0.875rem;text-transform:uppercase;padding:0.75rem 0.5rem 0.25rem 0.5rem;color:#443c37}ol.hashTabber-nav.hashTabber-sandstone>li{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;width:100%;vertical-align:top}ol.hashTabber-nav.hashTabber-sandstone>li:not(:first-child){margin-top:0.2rem}ol.hashTabber-nav.hashTabber-sandstone>li.active a{background-color:#fff;color:#0c0a09;border-color:#cbc5c1}ol.hashTabber-nav.hashTabber-sandstone>li.active a:hover{background-color:#fff;color:#443c37;border-color:#cbc5c1}ol.hashTabber-nav.hashTabber-sandstone>li>a{display:block;-webkit-border-radius:0.25rem 0 0 0.25rem;-moz-border-radius:0.25rem 0 0 0.25rem;-ms-border-radius:0.25rem 0 0 0.25rem;-o-border-radius:0.25rem 0 0 0.25rem;border-radius:0.25rem 0 0 0.25rem;padding:0.5rem 0.75rem;text-decoration:none;color:#fff;background-color:#7d6e64;border-bottom:0.125rem solid #443c37;font-size:0.875rem}ol.hashTabber-nav.hashTabber-sandstone>li>a:hover{background-color:#443c37;border-color:#0c0a09}@media screen and (max-width: 641px){ol.hashTabber-nav.hashTabber-sandstone>li>a{-webkit-border-radius:0.25rem;-moz-border-radius:0.25rem;-ms-border-radius:0.25rem;-o-border-radius:0.25rem;border-radius:0.25rem}}ol.hashTabber-data.hashTabber-sandstone{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;width:80%;vertical-align:top;-webkit-border-radius:0.25rem;-moz-border-radius:0.25rem;-ms-border-radius:0.25rem;-o-border-radius:0.25rem;border-radius:0.25rem;background-color:#fff;padding:1rem 1.5rem 1.5rem 1rem;border-bottom:0.125rem solid #cbc5c1;min-height:20rem}@media screen and (max-width: 641px){ol.hashTabber-data.hashTabber-sandstone{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;width:100%;vertical-align:top}}ol.hashTabber-data.hashTabber-sandstone>li h3{padding-bottom:0.5rem;border-bottom:0.125rem solid #f2f0ef}
2 | 


--------------------------------------------------------------------------------
/assets/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/magicznyleszek/hashtabber/5a0c1c3a72074ddba0e33c8a2bd2e7147e8c2c78/assets/img/favicon.ico


--------------------------------------------------------------------------------
/assets/js/libraries/hashTabber.js:
--------------------------------------------------------------------------------
  1 | // --------------------------------------------------
  2 | // HashTabber v2.2 by leszek@magicznyleszek.xyz
  3 | // http://hashtabber.magicznyleszek.xyz
  4 | // License CC0 1.0
  5 | // --------------------------------------------------
  6 | 
  7 | 
  8 | // --------------------------------------------------
  9 | // Class managing helper functions
 10 | // --------------------------------------------------
 11 | 
 12 | function hasClass(el, cl) {
 13 |     return el.className && new RegExp('(\\s|^)' + cl + '(\\s|$)').test(el.className);
 14 | }
 15 | function addClass(el, cl) {
 16 |     if (!hasClass(el, cl)) { el.className += ' ' + cl; }
 17 | }
 18 | function removeClass(el, cl) {
 19 |     var reg = new RegExp('(\\s|^)' + cl + '(\\s|$)');
 20 |     el.className = el.className.replace(reg, ' ').replace(/(^\s*)|(\s*$)/g, '');
 21 | }
 22 | function toggleClass(el, cl) {
 23 |     if (hasClass(el, cl)) { removeClass(el, cl); } else { addClass(el, cl); }
 24 | }
 25 | 
 26 | 
 27 | // --------------------------------------------------
 28 | // main HashTabber creator function
 29 | // --------------------------------------------------
 30 | 
 31 | function HashTabber(customOptions) {
 32 |     this.options = {
 33 |         classActive: 'active',
 34 |         classData: 'hashTabber-data',
 35 |         classNav: 'hashTabber-nav',
 36 |         dataDefault: 'data-hashtabber-default',
 37 |         dataId: 'data-hashtabber-id',
 38 |         dataPair: 'data-hashtabber-pair'
 39 |     };
 40 |     // check if there are any custom options
 41 |     if (customOptions) {
 42 |         // go through all the options and set new values if provided
 43 |         if (customOptions.classActive) { this.options.classActive = customOptions.classActive; }
 44 |         if (customOptions.classData) { this.options.classData = customOptions.classData; }
 45 |         if (customOptions.classNav) { this.options.classNav = customOptions.classNav; }
 46 |         if (customOptions.dataDefault) { this.options.dataDefault = customOptions.dataDefault; }
 47 |         if (customOptions.dataId) { this.options.dataId = customOptions.dataId; }
 48 |         if (customOptions.dataPair) { this.options.dataPair = customOptions.dataPair; }
 49 |     }
 50 |     this.helpers = {
 51 |         hashProber: function () {
 52 |             // get hash from window location and remove # character
 53 |             var hash = String(window.location.hash.replace('#', ''));
 54 |             var outcome = false;
 55 |             // if hash not empty
 56 |             // split it to array of parameters by "=" and "&"
 57 |             if (hash.length !== 0) {
 58 |                 outcome = hash.split(/\=|&/);
 59 |             }
 60 |             return outcome;
 61 |         },
 62 |         idsGiver: function (options) {
 63 |             var a, b, c, d;
 64 |             var tabberId;
 65 |             var tabberDefault;
 66 |             var tabName;
 67 |             var navList;
 68 |             var navLiChildren;
 69 |             var dataList;
 70 |             var tabbers = document.querySelectorAll('.' + options.classNav);
 71 |             // loop through every instance of hashTabber (nav)
 72 |             for (a = 0; a < tabbers.length; a += 1) {
 73 |                 // get current tabber id and default tab
 74 |                 tabberId = tabbers[a].getAttribute(options.dataId);
 75 |                 tabberDefault = '0';
 76 |                 tabName = '';
 77 |                 // check if -default html data is set
 78 |                 if (tabbers[a].getAttribute(options.dataDefault)) {
 79 |                     tabberDefault = tabbers[a].getAttribute(options.dataDefault);
 80 |                 }
 81 |                 // loop through every nav element of current tabber
 82 |                 navList = tabbers[a].querySelectorAll('.' + options.classNav + '>li');
 83 |                 for (b = 0; b < navList.length; b += 1) {
 84 |                     // set current item name to loop index
 85 |                     // or custom -pair name if given
 86 |                     tabName = String(b);
 87 |                     if (navList[b].getAttribute(options.dataPair)) {
 88 |                         tabName = navList[b].getAttribute(options.dataPair);
 89 |                     }
 90 |                     // loop through all child nodes of li
 91 |                     // check for the first a node and add #link to it
 92 |                     navLiChildren = navList[b].childNodes;
 93 |                     for (c = 0; c < navLiChildren.length; c += 1) {
 94 |                         if (navLiChildren[c].nodeName === 'A') {
 95 |                             navLiChildren[c].setAttribute('href', '#' + tabberId + '=' + tabName);
 96 |                         }
 97 |                     }
 98 |                     // set default to active
 99 |                     if (tabName === tabberDefault) {
100 |                         addClass(navList[b], options.classActive);
101 |                     }
102 |                 }
103 |                 // find corresponding data element and lopp through its children
104 |                 dataList = document.querySelectorAll('.' + options.classData + '[' + options.dataId + '="' + tabberId + '"]' + '>li');
105 |                 for (d = 0; d < dataList.length; d += 1) {
106 |                     // set current item name to loop index
107 |                     // or custom -pair name if given
108 |                     tabName = String(d);
109 |                     if (dataList[d].getAttribute(options.dataPair)) {
110 |                         tabName = dataList[d].getAttribute(options.dataPair);
111 |                     }
112 |                     // set default to active
113 |                     if (tabName === tabberDefault) {
114 |                         addClass(dataList[d], options.classActive);
115 |                     }
116 |                 }
117 |             }
118 |             return true;
119 |         },
120 |         tabSwiper: function (options, hashArray) {
121 |             var a, b, c;
122 |             var parameter;
123 |             var value;
124 |             var tabName;
125 |             var tabberNavList;
126 |             var tabberDataList;
127 |             // loop through all hash parameters (every second item)
128 |             for (a = 0; a < hashArray.length; a += 2) {
129 |                 // set the parameter and value
130 |                 parameter = hashArray[a];
131 |                 value = hashArray[a + 1];
132 |                 tabName = '';
133 |                 // check if hashlink exists in nav element
134 |                 if (document.querySelectorAll('.' + options.classNav + ' a[href*="#' + parameter + '=' + value + '"]').length > 0) {
135 |                     // get the current tabber nav and data lists
136 |                     tabberNavList = document.querySelectorAll('.' + options.classNav + '[' + options.dataId + '="' + parameter + '"]' + '>li');
137 |                     tabberDataList = document.querySelectorAll('.' + options.classData + '[' + options.dataId + '="' + parameter + '"]' + '>li');
138 |                     // clear active class of all nav elements and give it to the target one
139 |                     for (b = 0; b < tabberNavList.length; b += 1) {
140 |                         // set current item name to loop index
141 |                         // or custom -pair name if given
142 |                         tabName = String(b);
143 |                         if (tabberNavList[b].getAttribute(options.dataPair)) {
144 |                             tabName = tabberNavList[b].getAttribute(options.dataPair);
145 |                         }
146 |                         // change classes
147 |                         if (tabName === value) {
148 |                             addClass(tabberNavList[b], options.classActive);
149 |                         } else {
150 |                             removeClass(tabberNavList[b], options.classActive);
151 |                         }
152 |                     }
153 |                     // clear active class of all data elements and give it to the target one
154 |                     for (c = 0; c < tabberDataList.length; c += 1) {
155 |                         // set current item name to loop index
156 |                         // or custom -pair name if given
157 |                         tabName = String(c);
158 |                         if (tabberDataList[c].getAttribute(options.dataPair)) {
159 |                             tabName = tabberDataList[c].getAttribute(options.dataPair);
160 |                         }
161 |                         // change classes
162 |                         if (tabName === value) {
163 |                             addClass(tabberDataList[c], options.classActive);
164 |                         } else {
165 |                             removeClass(tabberDataList[c], options.classActive);
166 |                         }
167 |                     }
168 |                 }
169 |             }
170 |             return true;
171 |         }
172 |     };
173 |     this.run = function () {
174 |         var that = this;
175 |         // create ids for every link element in hashTabber navigation
176 |         that.helpers.idsGiver(that.options);
177 |         // run for the first time on page load
178 |         that.helpers.tabSwiper(that.options, that.helpers.hashProber());
179 |         // add listener to hash change
180 |         window.onhashchange = function () {
181 |             that.helpers.tabSwiper(that.options, that.helpers.hashProber());
182 |         };
183 |         return true;
184 |     };
185 |     return true;
186 | }
187 | 


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
 1 | function projectInterface() {
 2 |     // --------------------------------------------------
 3 |     // declare a public run function
 4 |     // with all private stuff initialized inside of it
 5 |     // --------------------------------------------------
 6 | 
 7 |     this.run = run;
 8 |     function run() {
 9 |         var tabber = new HashTabber();
10 |         tabber.run();
11 |     }
12 | 
13 | }
14 | 
15 | 
16 | // --------------------------------------------------
17 | // create a public object and start its run function
18 | // --------------------------------------------------
19 | 
20 | var hashTabberSoundsLikeDrugs = new projectInterface();
21 | // run functions
22 | hashTabberSoundsLikeDrugs.run();


--------------------------------------------------------------------------------
/assets/scss/_config.scss:
--------------------------------------------------------------------------------
 1 | // --------------------------------------------------
 2 | // modular scale
 3 | // 4, 5, 8, 10, 16, 20, 32, 40, 64, 80, 128, 160, 256, 320, 512, 640, 1024, 1280, 2048, 2560
 4 | // --------------------------------------------------
 5 | 
 6 | $scaleMain: 16;
 7 | $scaleSecondary: 20;
 8 | $scaleFraction: 1/2;
 9 | $scaleFractionInverse: 1/$scaleFraction;
10 | 
11 | 
12 | // --------------------------------------------------
13 | // fonts
14 | // --------------------------------------------------
15 | 
16 | $source: "Source Sans Pro", sans-serif;
17 | $code: "Source Code Pro", monospace;
18 | 
19 | $baseFontWeight: 400;
20 | $baseFontSize: 20px;
21 | $baseLineHeight: 1.5;
22 | $baseFontFamily: $source;
23 | 
24 | $fontSizeBig: 24px;
25 | $fontSizeSmall: 16px;
26 | 
27 | 
28 | // --------------------------------------------------
29 | // colors
30 | // --------------------------------------------------
31 | 
32 | $black: rgb(0,0,0);
33 | $white: rgb(255,255,255);
34 | 
35 | $jade: rgb(0,180,100);
36 | $jadeDark: shade($jade, 15);
37 | $jadeLight: tint($jade, 30);
38 | 
39 | $sandstone: rgb(125,110,100);
40 | $sandstoneDark: shade($sandstone, 45);
41 | $sandstoneDarker: shade($sandstone, 90);
42 | $sandstoneLight: tint($sandstone, 60);
43 | $sandstoneLighter: tint($sandstone, 90);
44 | 
45 | 
46 | // --------------------------------------------------
47 | // breakpoints and content widths settings
48 | // --------------------------------------------------
49 | 
50 | $breakBig: 1281px;
51 | $breakSmall: 641px;
52 | 
53 | 
54 | // --------------------------------------------------
55 | // speed
56 | // --------------------------------------------------
57 | 
58 | $fast: 0.3s;
59 | $slow: 1s;


--------------------------------------------------------------------------------
/assets/scss/base/_normalize.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |     min-height: 100%;
 3 |     padding: 1rem;
 4 | }
 5 | 
 6 | a {
 7 |     color: $jade;
 8 |     outline: none;
 9 |     text-decoration: none;
10 |     &:visited {
11 |         color: $jade;
12 |     }
13 |     &:hover {
14 |         color: $jadeLight;
15 |     }
16 | }
17 | 
18 | p a, ol a, ul a, blockquote a {
19 |     border-bottom: 0.125rem solid $jade;
20 |     &:hover {
21 |         border-color: transparent;
22 |     }
23 | }
24 | 
25 | nav ul, nav ol {
26 |     list-style: none;
27 |     margin: 0;
28 |     padding: 0;
29 | }
30 | 
31 | :focus {
32 |     outline-color: $jade;
33 |     outline-style: auto;
34 |     outline-width: 0.25rem;
35 | }
36 | 
37 | ::-moz-focus-inner {
38 |     border: 0;
39 | }
40 | 
41 | img, embed, object, video {
42 |     max-width: 100%;
43 | }
44 | 
45 | ::selection {
46 |     color: $white;
47 |     background-color: $jade;
48 | }
49 | 
50 | ::-moz-selection {
51 |     color: $white;
52 |     background-color: $jade;
53 | }


--------------------------------------------------------------------------------
/assets/scss/base/_print.scss:
--------------------------------------------------------------------------------
 1 | @media print {
 2 |     .noprint {
 3 |         display: none;
 4 |     }
 5 |     * {
 6 |         background: transparent !important;
 7 |         color: rgb(0,0,0) !important; // Black prints faster
 8 |         box-shadow: none !important;
 9 |         text-shadow: none !important;
10 |     }
11 |     a, a:visited {
12 |         text-decoration: underline;
13 |     }
14 |     a[href]:after {
15 |         content: " (" attr(href) ")";
16 |     }
17 |     abbr[title]:after {
18 |         content: " (" attr(title) ")";
19 |     }
20 |     // Don't show links for javascript or internal links
21 |     a[href^="javascript:"]:after, a[href^="#"]:after {
22 |         content: "";
23 |     }
24 |     pre, blockquote, tr, img {
25 |         page-break-inside: avoid;
26 |     }
27 |     thead {
28 |         display: table-header-group;
29 |     }
30 |     img {
31 |         max-width: 100% !important;
32 |     }
33 |     h1, h2, h3, h4, h5, h6 {
34 |         page-break-after: avoid;
35 |     }
36 |     p, h2, h3, h4, h5, h6 {
37 |         orphans: 3;
38 |         widows: 3;
39 |     }
40 | }


--------------------------------------------------------------------------------
/assets/scss/base/_typography.scss:
--------------------------------------------------------------------------------
  1 | html {
  2 |     font: 400 #{$baseFontSize}/#{$baseLineHeight} $baseFontFamily;
  3 |     color: $sandstoneDarker;
  4 |     @media screen and (min-width: #{$breakBig}) {
  5 |         font-size: $fontSizeBig;
  6 |     }
  7 |     @media screen and (max-width: #{$breakSmall}) {
  8 |         font-size: $fontSizeSmall;
  9 |     }
 10 | }
 11 | 
 12 | 
 13 | h1, h2, h3, h4, h5, h6 {
 14 |     line-height: 1;
 15 |     &:not(:first-child) {
 16 |         margin-top: 3rem;
 17 |     }
 18 |     a, a:hover {
 19 |         text-decoration: none;
 20 |     }
 21 | }
 22 | 
 23 | h1 {
 24 |     font-size: 3rem;
 25 |     &.page-title {
 26 |         font-size: 4.5rem;
 27 |         font-weight: 700;
 28 |         padding: 3rem 0 4.5rem;
 29 |         letter-spacing: -0.125rem;
 30 |         color: $jade;
 31 |         @include text-shadow($jadeDark 0 0.125rem 0);
 32 |         @media screen and (max-width: #{$breakSmall}) {
 33 |             font-size: 3rem;
 34 |             @include text-shadow($jadeDark 0 0.0625rem 0);
 35 |         }
 36 |     }
 37 | }
 38 | 
 39 | a.page-logo {
 40 |     display: block;
 41 |     width: 80%;
 42 |     height: auto;
 43 |     margin: 0 auto;
 44 |     svg {
 45 |         max-height: 100%;
 46 |         path {
 47 |             fill: $jade;
 48 |         }
 49 |     }
 50 |     &:hover {
 51 |         svg path {
 52 |             fill: $jadeLight;
 53 |         }
 54 |     }
 55 | }
 56 | 
 57 | h2 {
 58 |     font-size: 2rem;
 59 | }
 60 | 
 61 | h3 {
 62 |     font-size: 1.5rem;
 63 | }
 64 | 
 65 | p, pre, section.example {
 66 |     &:not(:first-child) {
 67 |         margin-top: $baseLineHeight * 1rem;
 68 |     }
 69 | }
 70 | 
 71 | blockquote {
 72 |     
 73 | }
 74 | 
 75 | ul, ol {
 76 |     margin-left: 1.5rem;
 77 | }
 78 | 
 79 | ul {
 80 |     list-style-type: disc;
 81 | }
 82 | 
 83 | ol {
 84 |     list-style-type: decimal;
 85 | }
 86 | 
 87 | strong {
 88 |     font-weight: bold;
 89 | }
 90 | 
 91 | em {
 92 |     font-style: italic;
 93 | }
 94 | 
 95 | code {
 96 |     font-family: $code;
 97 |     font-size: 0.75rem;
 98 |     background-color: $sandstoneLighter;
 99 |     border: 0.0625rem solid $sandstoneLight;
100 |     padding: 0 0.125rem;
101 |     @include border-radius(0.25rem);
102 | }
103 | 
104 | pre {
105 |     code {
106 |         display: block;
107 |         width: 100%;
108 |         overflow-x: auto;
109 |         @include box-sizing(border-box);
110 |         padding: 0.5rem;
111 |     }
112 | }
113 | 
114 | small, sub, sup {
115 |     font-size: 75%;
116 | }
117 | 
118 | sub, sup {
119 |     line-height: 0;
120 |     position: relative;
121 |     vertical-align: baseline;
122 | }
123 | 
124 | sup {
125 |     top: -0.5em;
126 | }
127 | 
128 | sub {
129 |     bottom: -0.25em;
130 | }
131 | 
132 | hr {
133 |     display: inline-block;
134 |     vertical-align: middle;
135 |     margin: 0;
136 |     padding: 0;
137 |     border: 0;
138 |     width: 100%;
139 |     height: 0.125rem;
140 |     background-color: $black;
141 | }


--------------------------------------------------------------------------------
/assets/scss/helpers/_columns.scss:
--------------------------------------------------------------------------------
 1 | // --------------------------------------------------
 2 | // Simple column system build with inline-blocks and percents.
 3 | // Use the </end><!-- comment --><start> hack to truncate the white space.
 4 | // --------------------------------------------------
 5 | 
 6 | 
 7 | // --------------------------------------------------
 8 | // setup
 9 | // --------------------------------------------------
10 | 
11 | $columns: 16;
12 | 
13 | 
14 | // --------------------------------------------------
15 | // define a single or simple-fraction column
16 | // --------------------------------------------------
17 | 
18 | @mixin column($amount:$columns, $context:$columns) {
19 |     @include box-sizing(border-box);
20 |     display: inline-block;
21 |     width: $amount * (100 / $context) * 1%;
22 |     vertical-align: top;
23 | }
24 | 
25 | 
26 | // --------------------------------------------------
27 | // create an empty space on the left
28 | // --------------------------------------------------
29 | 
30 | @mixin push-left($offset:1, $context:$columns) {
31 |     margin-left: $offset * (100 / $context) * 1%;
32 | }
33 | 
34 | 
35 | // --------------------------------------------------
36 | // create an empty space on the right
37 | // --------------------------------------------------
38 | 
39 | @mixin push-right($offset:1, $context:$columns) {
40 |     margin-right: $offset * (100 / $context) * 1%;
41 | }


--------------------------------------------------------------------------------
/assets/scss/helpers/_functions.scss:
--------------------------------------------------------------------------------
 1 | // --------------------------------------------------
 2 | // function to strip units from value
 3 | // --------------------------------------------------
 4 | 
 5 | @function parseInt($n) {
 6 |     @return $n / ($n * 0 + 1);
 7 | }
 8 | 
 9 | 
10 | // --------------------------------------------------
11 | // function for converting to rem value
12 | // uses $baseFontSize
13 | // --------------------------------------------------
14 | 
15 | @function rem($value) {
16 |     $root: parseInt($baseFontSize);
17 |     $val: parseInt($value);
18 |     $return: ();
19 |     @if unit($value) == "px" {
20 |         $return: append($return, ($val / $root + rem));
21 |     } @else {
22 |         $return: append($return, ($val * $root + px));
23 |     }
24 |     @return $return;
25 | }


--------------------------------------------------------------------------------
/assets/scss/helpers/_mixins.scss:
--------------------------------------------------------------------------------
 1 | // --------------------------------------------------
 2 | // positioning shorthand
 3 | // @include absolute(top 10px right 30px);
 4 | // --------------------------------------------------
 5 | 
 6 | @mixin position($position, $args) {
 7 |     // look for these offsets
 8 |     $offsets: top right bottom left;
 9 |     @each $offset in $offsets {
10 |         // check if offset found in $args
11 |         $i: index($args, $offset);
12 |         // check if offset was found
13 |         // check if offset is withing list range
14 |         // check if offset value is valid
15 |         @if $i
16 |         and $i + 1 <= length($args)
17 |         and type-of( nth($args, $i + 1) ) == number {
18 |             // assign value to offset
19 |             #{$offset}: nth($args, $i + 1);
20 |         }
21 |     }
22 |     position: $position;
23 | }
24 | 
25 | @mixin absolute($args) {
26 |     @include position(absolute, $args);
27 | }
28 | 
29 | @mixin fixed($args) {
30 |     @include position(fixed, $args);
31 | }
32 | 
33 | 
34 | // --------------------------------------------------
35 | // for cross-browser styling of placeholders
36 | // --------------------------------------------------
37 | 
38 | @mixin input-placeholder {
39 |     &:-moz-placeholder { @content; }
40 |     &::-moz-placeholder { @content; }
41 |     &:-ms-input-placeholder { @content; }
42 |     &::-webkit-input-placeholder { @content; } 
43 | }
44 | 
45 | 
46 | // --------------------------------------------------
47 | // vertical gradient shorthand for my bad memory
48 | // --------------------------------------------------
49 | 
50 | @mixin gradient($colorTop, $colorBottom) {
51 |     @include background-image(linear-gradient($colorTop, $colorBottom));
52 | }


--------------------------------------------------------------------------------
/assets/scss/layout/_content.scss:
--------------------------------------------------------------------------------
 1 | section.page-content {
 2 |     max-width: rem(960px);
 3 |     margin: auto;
 4 | }
 5 | 
 6 | section.example {
 7 |     @include column();
 8 |     border: 0.125rem solid $sandstoneDarker;
 9 |     padding: 0.25rem;
10 | }


--------------------------------------------------------------------------------
/assets/scss/layout/_footer.scss:
--------------------------------------------------------------------------------
1 | footer.page-footer {
2 |     max-width: rem(960px);
3 |     margin: auto;
4 |     padding: 4.5rem 0 1.5rem;
5 | }


--------------------------------------------------------------------------------
/assets/scss/layout/_header.scss:
--------------------------------------------------------------------------------
1 | header.page-header {
2 |     max-width: rem(960px);
3 |     margin: rem(20px) auto;
4 | }


--------------------------------------------------------------------------------
/assets/scss/libraries/_hashTabber.scss:
--------------------------------------------------------------------------------
 1 | // --------------------------------------------------
 2 | // hashTabber basic styles
 3 | // Basically it is better to create kinda-theme class
 4 | // insted of changing this document
 5 | // --------------------------------------------------
 6 | 
 7 | ol.hashTabber-nav, ol.hashTabber-data {
 8 |     list-style: none;
 9 |     margin: 0;
10 |     padding: 0;
11 | }
12 | 
13 | ol.hashTabber-data {
14 |     > li {
15 |         display: none;
16 |         &.active {
17 |             display: block;
18 |         }
19 |     }
20 | }


--------------------------------------------------------------------------------
/assets/scss/main.scss:
--------------------------------------------------------------------------------
 1 | // --------------------------------------------------
 2 | // Start with the config and base styles and then build up the rest.
 3 | // And remember about The Inception Rule: "don’t go more than four levels deep"
 4 | // --------------------------------------------------
 5 | 
 6 | 
 7 | // --------------------------------------------------
 8 | // main config with color pallette and other variables
 9 | // --------------------------------------------------
10 | 
11 | @import "config";
12 | 
13 | 
14 | // --------------------------------------------------
15 | // third party libraries
16 | // --------------------------------------------------
17 | 
18 | @import "compass/reset";
19 | @import "compass/css3";
20 | @import "libraries/hashTabber";
21 | 
22 | 
23 | // --------------------------------------------------
24 | // base resets, fonts and normalizations
25 | // --------------------------------------------------
26 | 
27 | @import "base/normalize";
28 | @import "base/print";
29 | @import "base/typography";
30 | 
31 | 
32 | // --------------------------------------------------
33 | // helpers and tools used across the project
34 | // --------------------------------------------------
35 | 
36 | @import "helpers/columns";
37 | @import "helpers/functions";
38 | @import "helpers/mixins";
39 | 
40 | 
41 | // --------------------------------------------------
42 | // main sections of the layout
43 | // --------------------------------------------------
44 | 
45 | @import "layout/header";
46 | @import "layout/content";
47 | @import "layout/footer";
48 | 
49 | 
50 | // --------------------------------------------------
51 | // small modules
52 | // --------------------------------------------------
53 | 
54 | @import "modules/buttons";
55 | @import "modules/page-navigation";
56 | 
57 | 
58 | // --------------------------------------------------
59 | // specific themes for big and third party modules
60 | // --------------------------------------------------
61 | 
62 | @import "themes/hashTabber-sandstone";


--------------------------------------------------------------------------------
/assets/scss/modules/_buttons.scss:
--------------------------------------------------------------------------------
 1 | a.fake-button {
 2 |     color: $white;
 3 |     background-color: $jade;
 4 |     line-height: 2rem;
 5 |     padding: 0 0.5rem;
 6 |     display: inline-block;
 7 |     text-decoration: none;
 8 |     border-bottom: 0.125rem solid $jadeDark;
 9 |     @include border-radius(0.25rem);
10 |     &:hover {
11 |         background-color: $jadeLight;
12 |         border-color: $jadeDark;
13 |     }
14 |     &.fake-button-big {
15 |         font-size: 1.5rem;
16 |         line-height: 3rem;
17 |         padding: 0 0.75rem;
18 |     }
19 | }


--------------------------------------------------------------------------------
/assets/scss/modules/_page-navigation.scss:
--------------------------------------------------------------------------------
 1 | nav.page-main-navigation {
 2 |     @include fixed(top 0 right 0);
 3 |     z-index: 2;
 4 |     font-size: 1rem;
 5 |     @include single-transition(right, $fast);
 6 |     &:target {
 7 |         right: 10rem;
 8 |         a.open {
 9 |             display: none;
10 |         }
11 |         a.close {
12 |             display: block;
13 |         }
14 |     }
15 |     ol {
16 |         height: auto;
17 |         margin: 0;
18 |         @include absolute(top 0 left 0);
19 |         li {
20 |             display: block;
21 |             a {
22 |                 width: 10rem;
23 |             }
24 |             &:last-child a {
25 |                 border-bottom: 0.125rem solid $jadeDark;
26 |                 @include border-radius(0 0 0 0.25rem);
27 |             }
28 |         }
29 |     }
30 |     a {
31 |         color: $white;
32 |         background-color: $jade;
33 |         line-height: 2rem;
34 |         padding: 0 0.5rem;
35 |         display: block;
36 |         text-decoration: none;
37 |         text-align: left;
38 |         &:hover {
39 |             background-color: $jadeLight;
40 |         }
41 |     }
42 |     a.close, a.open {
43 |         @include absolute(top 0 right 0);
44 |         border-bottom: 0.125rem solid $jadeDark;
45 |         @include border-radius(0 0 0 0.25rem);
46 |     }
47 |     a.close {
48 |         display: none;
49 |     }
50 | }


--------------------------------------------------------------------------------
/assets/scss/themes/_hashTabber-sandstone.scss:
--------------------------------------------------------------------------------
 1 | .hashTabber-sandstone-wrapper {
 2 |     @include column();
 3 |     background-color: $sandstoneLighter;
 4 |     padding: 1rem;
 5 | }
 6 | 
 7 | ol.hashTabber-nav.hashTabber-sandstone, ol.hashTabber-data.hashTabber-sandstone {
 8 |     list-style: none;
 9 |     margin: 0;
10 |     padding: 0;
11 | }
12 | 
13 | ol.hashTabber-nav.hashTabber-sandstone {
14 |     @include column(1,5);
15 |     @media screen and (max-width: #{$breakSmall}) {
16 |         @include column();
17 |         margin-bottom: 0.75rem;
18 |     }
19 |     > h2 {
20 |         font-size: 0.875rem;
21 |         text-transform: uppercase;
22 |         padding: 0.75rem 0.5rem 0.25rem 0.5rem;
23 |         color: $sandstoneDark;
24 |     }
25 |     > li {
26 |         @include column();
27 |         &:not(:first-child) {
28 |             margin-top: 0.2rem;
29 |         }
30 |         &.active {
31 |             a {
32 |                 background-color: $white;
33 |                 color: $sandstoneDarker;
34 |                 border-color: $sandstoneLight;
35 |                 &:hover {
36 |                     background-color: $white;
37 |                     color: $sandstoneDark;
38 |                     border-color: $sandstoneLight;
39 |                 }
40 |             }
41 |         }
42 |         > a {
43 |             display: block;
44 |             @include border-radius(0.25rem 0 0 0.25rem);
45 |             padding: 0.5rem 0.75rem;
46 |             text-decoration: none;
47 |             color: $white;
48 |             background-color: $sandstone;
49 |             border-bottom: 0.125rem solid $sandstoneDark;
50 |             font-size: 0.875rem;
51 |             &:hover {
52 |                 background-color: $sandstoneDark;
53 |                 border-color: $sandstoneDarker;
54 |             }
55 |             @media screen and (max-width: #{$breakSmall}) {
56 |                 @include border-radius(0.25rem);
57 |             }
58 |         }
59 |     }
60 | }
61 | 
62 | ol.hashTabber-data.hashTabber-sandstone {
63 |     @include column(4,5);
64 |     @include border-radius(0.25rem);
65 |     background-color: $white;
66 |     padding: 1rem 1.5rem 1.5rem 1rem;
67 |     border-bottom: 0.125rem solid $sandstoneLight;
68 |     min-height: rem(400px);
69 |     @media screen and (max-width: #{$breakSmall}) {
70 |         @include column();
71 |     }
72 |     > li {
73 |         h3 {
74 |             padding-bottom: 0.5rem;
75 |             border-bottom: 0.125rem solid $sandstoneLighter;
76 |         }
77 |     }
78 | }


--------------------------------------------------------------------------------
/humans.txt:
--------------------------------------------------------------------------------
 1 | ## TEAM
 2 | 
 3 | Everything: Leszek Pietrzak
 4 | Site: leszekpietrzak.com
 5 | Email: leszek@magicznyleszek.xyz
 6 | Location: Warsaw, Poland
 7 | 
 8 | ## THANKS
 9 | 
10 | Tom Preston-Werner, Nick Quaranto: jekyllrb.com
11 | Dave Gandy: fontawesome.io
12 | Christopher Eppstein: compass-style.org
13 | Chris Armstrong: goldilocksapproach.com
14 | 
15 | ## SITE
16 | 
17 | Last update: 2014/03/31
18 | Language: English
19 | Software: Sublime Text 2


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: default
  3 | ---
  4 | 
  5 | 
  6 | <h2>Overview<a href="#menu-overview" name="menu-overview"> <small><i class="fa fa-link"></i></small></a></h2>
  7 | 
  8 | <p>This is a simple JavaScript plugin for a hashchange-driven tabbed content switcher. Personally I'm not a tabsphiliac, but I needed those a few times recently and decided to make a semi-universal solution.</p>
  9 | 
 10 | <p><a href="https://github.com/magicznyleszek/hashtabber" class="fake-button fake-button-big">View on GitHub <i class="fa fa-fw fa-github"></i></a></p>
 11 | 
 12 | <p><a href="https://github.com/magicznyleszek/hashtabber/archive/v2.2.zip" class="fake-button fake-button-big">Download v2.2 <i class="fa fa-fw fa-download"></i></a></p>
 13 | 
 14 | <p>Quick run-down of features:</p>
 15 | 
 16 | <ul>
 17 |     <li>Vanilla JavaScript</li>
 18 |     <li>SCSS stylesheet</li>
 19 |     <li>Switching tabs with <code>#foo=bar</code> links</li>
 20 |     <li>Multiple simultaneous HashTabbers</li>
 21 |     <li>Flexible <code>-nav</code> & <code>-data</code> structure</li>
 22 |     <li>
 23 |         Tested and working on those browsers:
 24 |         <ul>
 25 |             <li>Chrome 4+ (iOS 33+)</li>
 26 |             <li>Firefox 4+</li>
 27 |             <li>Opera 12+</li>
 28 |             <li>Safari 5+ (iOS 7+)</li>
 29 |             <li>IE 8+</li>
 30 |         </ul>
 31 |     </li>
 32 | </ul>
 33 | 
 34 | 
 35 | <h2>Getting started<a href="#menu-getting-started" name="menu-getting-started"> <small><i class="fa fa-link"></i></small></a></h2>
 36 | 
 37 | <p>You will need those two files:</p>
 38 | 
 39 | <ul>
 40 |     <li><code>hashTabber.js</code> &ndash; with a single object inside and four helper functions; so you could as well just paste it to your script.js to avoid an unnecessary HTML request</li>
 41 |     <li><code>_hashTabber.scss</code> &ndash; 20-something lines of code that would be best to just @include in your global.scss</li>
 42 | </ul>
 43 | 
 44 | <p>Build a html HashTabber section with this basic setup:</p>
 45 | 
 46 | <pre><code lang="html">{% include examples/hashTabber-example-code-html.liquid %}</code></pre>
 47 | 
 48 | <p>Important things for the whole thing to work are:</p>
 49 | 
 50 | <ul>
 51 |     <li><strong>data attribute</strong> &ndash; the script will be pairing <code>ol.hashTabber-nav</code> and <code>ol.hashTabber-data</code> elements that share the <code>data-hashtabber-id</code> attribute value, and will use it to generate links for tabs</li>
 52 |     <li><strong>children</strong> &ndash; the script assumes that <code>ol.hashTabber-nav</code> and <code>ol.hashTabber-data</code> both have immediate child nodes <code>li</code>, and pairs up two of them with the same index or a special <a href="#menu-options">pair-name</a> attribute</li>
 53 |     <li><strong>links</strong> &ndash; every navigation list element <code>ol.hashTabber-nav > li</code> needs to have an immediate child node <code>a</code> for <code>#foo=tab</code> hrefs creation</li>
 54 | </ul>
 55 | 
 56 | <p>Then just run the damn thing:</p>
 57 | 
 58 | <pre><code lang="javascript">{% include examples/hashTabber-example-code-js-run.liquid %}</code></pre>
 59 | 
 60 | <p>If the content changes after HashTabber was triggered, you can just use the <code>.run()</code> method again.</p>
 61 | 
 62 | 
 63 | <h2>Options<a href="#menu-options" name="menu-options"> <small><i class="fa fa-link"></i></small></a></h2>
 64 | 
 65 | <p>For some special situations you can define any of the options for classes and data attributes names through the <code>hashTabber()</code> <code>options</code> object parameter:</p>
 66 | 
 67 | <pre><code lang="javascript">{% include examples/hashTabber-example-code-js-options.liquid %}</code></pre>
 68 | 
 69 | <p>You can define some special options through the HTML data attributes:</p>
 70 | 
 71 | <ul>
 72 |     <li><code>data-hashtabber-default</code> &ndash; defined for <code>ol.hashTabber-nav</code> changes the default tab from 0 to given value (a number or a pair-name)</li>
 73 |     <li><code>data-hashtabber-pair</code> &ndash; defined for two <code>li</code>s from both <code>ol</code>s gives them a special <code>#foo=name</code> link instead of a standard numerical one</li>
 74 | </ul>
 75 | 
 76 | 
 77 | <h3>Hidden features</h3>
 78 | 
 79 | <p>It's also worth to mention, that:</p>
 80 | 
 81 | <ul>
 82 |     <li>Both <code>ol</code>s could contain countless different nodes (<code>h2</code> for example), as the script takes into account only <code>li</code>s inside of them</li>
 83 |     <li>Both <code>ol</code>s could be placed within completely diffrent HTML nodes, as the script uses the <code>data-hashtabber-id</code> attribute to pair them</li>
 84 |     <li>You can chain parameters in links: <code>#foo=2&bar=1&fum=baz&qux=2&zot=3</code>, to switch tabs for all instances of HashTabber simultaneously</li>
 85 | </ul>
 86 | 
 87 | 
 88 | <h2>Themes<a href="#menu-themes" name="menu-themes"> <small><i class="fa fa-link"></i></small></a></h2>
 89 | 
 90 | <p>This is something rather varied, but with theming, I would personally go with an additional <code>hashTabber-themename</code> class for both <code>ol</code>s. This blank example could be a good start:</p>
 91 | 
 92 | <pre><code lang="scss">{% include examples/hashTabber-example-theme-blank.liquid %}</code></pre>
 93 | 
 94 | 
 95 | <h2>Examples<a href="#menu-examples" name="menu-examples"> <small><i class="fa fa-link"></i></small></a></h2>
 96 | 
 97 | <p>Below is an example with basic theming applied. Notice that you could use an outside <a href="#dinosaurs=velociraptor">#dinosaurs=velociraptor</a> link to change the tab.</p>
 98 | 
 99 | <section class="example">{% include examples/hashTabber-example-sandstone.liquid %}</section>
100 | 
101 | <p>This is a naked (unthemed) script in work:</p>
102 | 
103 | <section class="example">{% include examples/hashTabber-example-naked.liquid %}</section>
104 | 
105 | 
106 | <h2>License<a href="#menu-license" name="menu-license"> <small><i class="fa fa-link"></i></small></a></h2>
107 | 
108 | <p><a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0 Universal</a> (it's public domain)</p>
109 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hashtabber",
 3 |   "version": "2.2.0",
 4 |   "description": "This is a simple JavaScript plugin for hashchange-driven tabbed navigation system. I was constantly in need of those, so I finally made a kinda-plugin.",
 5 |   "main": "assets/js/libraries/hashTabber.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/magicznyleszek/hashtabber.git"
12 |   },
13 |   "keywords": [
14 |     "navigation",
15 |     "Javascript",
16 |     "tab",
17 |     "tabs",
18 |     "hash",
19 |     "js"
20 |   ],
21 |   "author": "Leszek Pietrzak <leszek@magicznyleszek.xyz>",
22 |   "license": "CC0-1.0",
23 |   "bugs": {
24 |     "url": "https://github.com/magicznyleszek/hashtabber/issues"
25 |   },
26 |   "homepage": "http://hashtabber.magicznyleszek.xyz/"
27 | }
28 | 


--------------------------------------------------------------------------------