diff --git a/README.md b/README.md new file mode 100644 index 0000000..457bcea --- /dev/null +++ b/README.md @@ -0,0 +1,42 @@ +# Tiny One Page + +Part of Tiny Components, this is one of many Components for Frontend Development. It used the Framework [RiotJS v4](https://riot.js.org/). + +This Component is a One Page Menu. + +## Usage + +```html + + + +``` + +## Animations + +Use the Class TinyOnePageAnimate to create your own Animations. You can inject +your Animation Class while Mounting the Component. + +```js +riot.mount('tiny-one-page', { + 'animate': new TinyOnePageHeightAnimate() +}); +``` + +## Options + +Easy, there is at this moment only one options for ScrollSmooth. + +```js +riot.mount('tiny-one-page', { + 'options': { + 'offset': 50 + } +}); +``` diff --git a/demo-386.js b/demo-386.js index 07914a3..6ffc979 100644 --- a/demo-386.js +++ b/demo-386.js @@ -6,5 +6,8 @@ riot.register('tiny-one-page', TinyOnePage); // adding component with animate object riot.mount('tiny-one-page', { - 'animate': new TinyOnePageHeightAnimate() + 'animate': new TinyOnePageHeightAnimate(), + 'options': { + 'offset': 70 + } }); diff --git a/demo-386.scss b/demo-386.scss index 0caec9c..5d0c9b1 100644 --- a/demo-386.scss +++ b/demo-386.scss @@ -6,11 +6,14 @@ */ $text-color: #fff; + $link-color: #fefe5b; $link-background-color: #008106; $background-color: #000084; $background-contrast-color: #bbbbbb; +$color__text: #bbbbbb; +$color__secondary: #00aaaa; /** * default elements @@ -23,12 +26,37 @@ body { font-family: 'PxPlus IBM VGA8', sans-serif; font-style: normal; font-size: 1.2rem; + line-height: 1.3; } a { text-decoration: none; + + &:focus { + outline: none; + } +} + +h1, h2, h3, h4, h5, h6 { + font-size: 18px; + font-weight: normal; + text-transform: uppercase; +} + +.site-header { + padding: 20px 20px; + margin: 20px 0 20px; + color: #000; + background: $color__secondary; + + h1, h2, h3, h4, h5, h6 { + margin: 0; + } } +main { + margin: 50px 0; +} /** * navigation @@ -90,16 +118,6 @@ a { } } - -/** - * - * - */ -main { - max-width: 600px; - margin: 2em auto 0; -} - /** * footer * @@ -119,22 +137,6 @@ footer { } } - -/** - * section - * - * - */ - -.section { - padding: 50px 0.8em; - line-height: 1.5; - - @media (min-width: 768px) { - padding: 50px 0; - } -} - /** * icons * diff --git a/dist/css/demo-386.css b/dist/css/demo-386.css index e21d6dc..c9ee960 100644 --- a/dist/css/demo-386.css +++ b/dist/css/demo-386.css @@ -1 +1 @@ -@font-face{font-family:PxPlus IBM VGA8;src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f);src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f?#iefix) format("embedded-opentype"),url(/fonts/PxPlus_IBM_VGA8.woff2?28087632ed5e0851a1ec27def2b1e73f) format("woff2"),url(/fonts/PxPlus_IBM_VGA8.woff?5f9b12f2cef3f405002438fafa0e41a6) format("woff"),url(/fonts/PxPlus_IBM_VGA8.ttf?8fa23fdc4e2cff030f42999bc1ede4b2) format("truetype"),url(/fonts/PxPlus_IBM_VGA8.svg?3000c157212c66cf53ad18f0d7b7a12f#PxPlus_IBM_VGA8) format("svg");font-weight:400;font-style:normal}body{color:#fff;background-color:#000084;font-family:PxPlus IBM VGA8,sans-serif;font-style:normal;font-size:1.2rem}a{text-decoration:none}.navbar{padding:10px;background-color:#bbb}@media (min-width:768px){.navbar{padding:0}}.navbar ul{list-style:none;padding:10px;margin:0;border:1px solid #000}@media (min-width:768px){.navbar ul{margin:0 0 0 10px;padding:0;border:none}}.navbar ul li{display:block;line-height:20px}@media (min-width:768px){.navbar ul li{display:inline-block}}.navbar ul li a{display:block;padding:4px 10px;color:#fff}@media (min-width:768px){.navbar ul li a{display:inline-block}}.navbar ul li.current a,.navbar ul li a:hover{color:#fff;background-color:#000}main{max-width:600px;margin:2em auto 0}footer{text-align:center;font-size:3rem;width:100%;background:#000;padding:.8em 0}footer i{color:#fff!important}.section{padding:50px .8em;line-height:1.5}@media (min-width:768px){.section{padding:50px 0}}[class*=" icon-tiny"],[class^=icon-tiny]{font-family:PxPlus IBM VGA8,sans-serif!important;font-style:normal;color:#fefe5b}.icon-tiny-one-page-open:after{content:"\2630"}.icon-tiny-one-page-close:after{content:"\2A2F"}.tiny-one-page__modal{position:fixed;top:0;left:0;width:100%;z-index:99;height:auto;max-height:0;overflow:hidden;transition:max-height .2s}@media (min-width:768px){.tiny-one-page__modal{max-height:none!important}}.tiny-one-page__button{position:fixed;top:0;right:0;font-size:1.8rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:.7em .8em;z-index:100}.tiny-one-page__button:focus,.tiny-one-page__button:hover{outline:none}.tiny-one-page__button:hover{cursor:pointer}@media (min-width:768px){.tiny-one-page__button{display:none}} \ No newline at end of file +@font-face{font-family:PxPlus IBM VGA8;src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f);src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f?#iefix) format("embedded-opentype"),url(/fonts/PxPlus_IBM_VGA8.woff2?28087632ed5e0851a1ec27def2b1e73f) format("woff2"),url(/fonts/PxPlus_IBM_VGA8.woff?5f9b12f2cef3f405002438fafa0e41a6) format("woff"),url(/fonts/PxPlus_IBM_VGA8.ttf?8fa23fdc4e2cff030f42999bc1ede4b2) format("truetype"),url(/fonts/PxPlus_IBM_VGA8.svg?3000c157212c66cf53ad18f0d7b7a12f#PxPlus_IBM_VGA8) format("svg");font-weight:400;font-style:normal}body{color:#fff;background-color:#000084;font-family:PxPlus IBM VGA8,sans-serif;font-style:normal;font-size:1.2rem;line-height:1.3}a{text-decoration:none}a:focus{outline:none}h1,h2,h3,h4,h5,h6{font-size:18px;font-weight:400;text-transform:uppercase}.site-header{padding:20px;margin:20px 0;color:#000;background:#0aa}.site-header h1,.site-header h2,.site-header h3,.site-header h4,.site-header h5,.site-header h6{margin:0}main{margin:50px 0}.navbar{padding:10px;background-color:#bbb}@media (min-width:768px){.navbar{padding:0}}.navbar ul{list-style:none;padding:10px;margin:0;border:1px solid #000}@media (min-width:768px){.navbar ul{margin:0 0 0 10px;padding:0;border:none}}.navbar ul li{display:block;line-height:20px}@media (min-width:768px){.navbar ul li{display:inline-block}}.navbar ul li a{display:block;padding:4px 10px;color:#fff}@media (min-width:768px){.navbar ul li a{display:inline-block}}.navbar ul li.current a,.navbar ul li a:hover{color:#fff;background-color:#000}footer{text-align:center;font-size:3rem;width:100%;background:#000;padding:.8em 0}footer i{color:#fff!important}[class*=" icon-tiny"],[class^=icon-tiny]{font-family:PxPlus IBM VGA8,sans-serif!important;font-style:normal;color:#fefe5b}.icon-tiny-one-page-open:after{content:"\2630"}.icon-tiny-one-page-close:after{content:"\2A2F"}.tiny-one-page__modal{position:fixed;top:0;left:0;width:100%;z-index:99;height:auto;max-height:0;overflow:hidden;transition:max-height .2s}@media (min-width:768px){.tiny-one-page__modal{max-height:none!important}}.tiny-one-page__button{position:fixed;top:0;right:0;font-size:1.8rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:.7em .8em;z-index:100}.tiny-one-page__button:focus,.tiny-one-page__button:hover{outline:none}.tiny-one-page__button:hover{cursor:pointer}@media (min-width:768px){.tiny-one-page__button{display:none}} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index f35200a..31aeb50 100644 --- a/dist/index.html +++ b/dist/index.html @@ -8,6 +8,7 @@ + @@ -19,42 +20,62 @@
-
-

One

-

- Lorem ipsum dolor amet tattooed prism activated charcoal, XOXO street art tacos small batch farm-to-table put a bird on it four loko vexillologist gluten-free. Direct trade mumblecore occupy fashion axe lo-fi. Plaid single-origin coffee asymmetrical typewriter fingerstache selvage try-hard. Offal glossier tacos man braid, readymade squid truffaut vexillologist thundercats franzen succulents portland photo booth. Trust fund raw denim heirloom, schlitz af pug succulents banh mi skateboard green juice fingerstache pop-up biodiesel +1 kombucha. Slow-carb wolf hexagon godard. -

-

- Humblebrag chia yuccie trust fund lyft. La croix viral subway tile cronut messenger bag. Letterpress godard affogato ugh. Narwhal neutra dreamcatcher thundercats brunch normcore selfies. -

-

- DIY neutra kinfolk cold-pressed. Taxidermy cold-pressed meh glossier disrupt, synth wayfarers portland kogi paleo organic squid. Put a bird on it bicycle rights banh mi biodiesel bitters cornhole gochujang chicharrones umami hell of quinoa kogi tousled cardigan poutine. Jianbing 90's kogi poke, af edison bulb cray hella everyday carry chicharrones bitters tote bag ennui asymmetrical. Salvia listicle etsy taxidermy mlkshk, dreamcatcher humblebrag banjo chambray fanny pack before they sold out ethical. Hot chicken cronut tilde, kale chips fixie ethical waistcoat small batch succulents hella. -

-
-
-

Two

-

- Lorem ipsum dolor amet tattooed prism activated charcoal, XOXO street art tacos small batch farm-to-table put a bird on it four loko vexillologist gluten-free. Direct trade mumblecore occupy fashion axe lo-fi. Plaid single-origin coffee asymmetrical typewriter fingerstache selvage try-hard. Offal glossier tacos man braid, readymade squid truffaut vexillologist thundercats franzen succulents portland photo booth. Trust fund raw denim heirloom, schlitz af pug succulents banh mi skateboard green juice fingerstache pop-up biodiesel +1 kombucha. Slow-carb wolf hexagon godard. -

-

- Humblebrag chia yuccie trust fund lyft. La croix viral subway tile cronut messenger bag. Letterpress godard affogato ugh. Narwhal neutra dreamcatcher thundercats brunch normcore selfies. -

-

- DIY neutra kinfolk cold-pressed. Taxidermy cold-pressed meh glossier disrupt, synth wayfarers portland kogi paleo organic squid. Put a bird on it bicycle rights banh mi biodiesel bitters cornhole gochujang chicharrones umami hell of quinoa kogi tousled cardigan poutine. Jianbing 90's kogi poke, af edison bulb cray hella everyday carry chicharrones bitters tote bag ennui asymmetrical. Salvia listicle etsy taxidermy mlkshk, dreamcatcher humblebrag banjo chambray fanny pack before they sold out ethical. Hot chicken cronut tilde, kale chips fixie ethical waistcoat small batch succulents hella. -

-
-
-

Three

-

- Lorem ipsum dolor amet tattooed prism activated charcoal, XOXO street art tacos small batch farm-to-table put a bird on it four loko vexillologist gluten-free. Direct trade mumblecore occupy fashion axe lo-fi. Plaid single-origin coffee asymmetrical typewriter fingerstache selvage try-hard. Offal glossier tacos man braid, readymade squid truffaut vexillologist thundercats franzen succulents portland photo booth. Trust fund raw denim heirloom, schlitz af pug succulents banh mi skateboard green juice fingerstache pop-up biodiesel +1 kombucha. Slow-carb wolf hexagon godard. -

-

- Humblebrag chia yuccie trust fund lyft. La croix viral subway tile cronut messenger bag. Letterpress godard affogato ugh. Narwhal neutra dreamcatcher thundercats brunch normcore selfies. -

-

- DIY neutra kinfolk cold-pressed. Taxidermy cold-pressed meh glossier disrupt, synth wayfarers portland kogi paleo organic squid. Put a bird on it bicycle rights banh mi biodiesel bitters cornhole gochujang chicharrones umami hell of quinoa kogi tousled cardigan poutine. Jianbing 90's kogi poke, af edison bulb cray hella everyday carry chicharrones bitters tote bag ennui asymmetrical. Salvia listicle etsy taxidermy mlkshk, dreamcatcher humblebrag banjo chambray fanny pack before they sold out ethical. Hot chicken cronut tilde, kale chips fixie ethical waistcoat small batch succulents hella. -

-
+
+
+
+
+
+

One

+
+

+ Lorem ipsum dolor amet tattooed prism activated charcoal, XOXO street art tacos small batch farm-to-table put a bird on it four loko vexillologist gluten-free. Direct trade mumblecore occupy fashion axe lo-fi. Plaid single-origin coffee asymmetrical typewriter fingerstache selvage try-hard. Offal glossier tacos man braid, readymade squid truffaut vexillologist thundercats franzen succulents portland photo booth. Trust fund raw denim heirloom, schlitz af pug succulents banh mi skateboard green juice fingerstache pop-up biodiesel +1 kombucha. Slow-carb wolf hexagon godard. +

+

+ Humblebrag chia yuccie trust fund lyft. La croix viral subway tile cronut messenger bag. Letterpress godard affogato ugh. Narwhal neutra dreamcatcher thundercats brunch normcore selfies. +

+

+ DIY neutra kinfolk cold-pressed. Taxidermy cold-pressed meh glossier disrupt, synth wayfarers portland kogi paleo organic squid. Put a bird on it bicycle rights banh mi biodiesel bitters cornhole gochujang chicharrones umami hell of quinoa kogi tousled cardigan poutine. Jianbing 90's kogi poke, af edison bulb cray hella everyday carry chicharrones bitters tote bag ennui asymmetrical. Salvia listicle etsy taxidermy mlkshk, dreamcatcher humblebrag banjo chambray fanny pack before they sold out ethical. Hot chicken cronut tilde, kale chips fixie ethical waistcoat small batch succulents hella. +

+
+
+
+
+
+
+
+

Two

+
+

+ Lorem ipsum dolor amet tattooed prism activated charcoal, XOXO street art tacos small batch farm-to-table put a bird on it four loko vexillologist gluten-free. Direct trade mumblecore occupy fashion axe lo-fi. Plaid single-origin coffee asymmetrical typewriter fingerstache selvage try-hard. Offal glossier tacos man braid, readymade squid truffaut vexillologist thundercats franzen succulents portland photo booth. Trust fund raw denim heirloom, schlitz af pug succulents banh mi skateboard green juice fingerstache pop-up biodiesel +1 kombucha. Slow-carb wolf hexagon godard. +

+

+ Humblebrag chia yuccie trust fund lyft. La croix viral subway tile cronut messenger bag. Letterpress godard affogato ugh. Narwhal neutra dreamcatcher thundercats brunch normcore selfies. +

+

+ DIY neutra kinfolk cold-pressed. Taxidermy cold-pressed meh glossier disrupt, synth wayfarers portland kogi paleo organic squid. Put a bird on it bicycle rights banh mi biodiesel bitters cornhole gochujang chicharrones umami hell of quinoa kogi tousled cardigan poutine. Jianbing 90's kogi poke, af edison bulb cray hella everyday carry chicharrones bitters tote bag ennui asymmetrical. Salvia listicle etsy taxidermy mlkshk, dreamcatcher humblebrag banjo chambray fanny pack before they sold out ethical. Hot chicken cronut tilde, kale chips fixie ethical waistcoat small batch succulents hella. +

+
+
+
+
+
+
+
+

Three

+
+

+ Lorem ipsum dolor amet tattooed prism activated charcoal, XOXO street art tacos small batch farm-to-table put a bird on it four loko vexillologist gluten-free. Direct trade mumblecore occupy fashion axe lo-fi. Plaid single-origin coffee asymmetrical typewriter fingerstache selvage try-hard. Offal glossier tacos man braid, readymade squid truffaut vexillologist thundercats franzen succulents portland photo booth. Trust fund raw denim heirloom, schlitz af pug succulents banh mi skateboard green juice fingerstache pop-up biodiesel +1 kombucha. Slow-carb wolf hexagon godard. +

+

+ Humblebrag chia yuccie trust fund lyft. La croix viral subway tile cronut messenger bag. Letterpress godard affogato ugh. Narwhal neutra dreamcatcher thundercats brunch normcore selfies. +

+

+ DIY neutra kinfolk cold-pressed. Taxidermy cold-pressed meh glossier disrupt, synth wayfarers portland kogi paleo organic squid. Put a bird on it bicycle rights banh mi biodiesel bitters cornhole gochujang chicharrones umami hell of quinoa kogi tousled cardigan poutine. Jianbing 90's kogi poke, af edison bulb cray hella everyday carry chicharrones bitters tote bag ennui asymmetrical. Salvia listicle etsy taxidermy mlkshk, dreamcatcher humblebrag banjo chambray fanny pack before they sold out ethical. Hot chicken cronut tilde, kale chips fixie ethical waistcoat small batch succulents hella. +

+
+
+
+