From 5b3ff88b74f9f111ee1a57e6f08364b798b4c4db Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 6 Apr 2018 20:55:59 +0300 Subject: [PATCH] Added new landing page as static file --- docs/mini/flavor.scss | 176 ++++++++++++++++++++++++++++++++++++++++ static-parts/index.html | 156 +++++++++++++++++++++++++++++++++++ 2 files changed, 332 insertions(+) create mode 100644 static-parts/index.html diff --git a/docs/mini/flavor.scss b/docs/mini/flavor.scss index 6d3641d60..9a74715c7 100644 --- a/docs/mini/flavor.scss +++ b/docs/mini/flavor.scss @@ -464,3 +464,179 @@ button#disclaimer-close{ font-size: 0.85rem; background: 0; } + +// New styles for landing page + +#splash { + height: auto; + padding-bottom: 1.5rem; + background: linear-gradient(135deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%); + #logo { + margin-top: 0; + margin-left: -0.5rem; + padding-top: 2rem; + text-align: center; + font-size: 2.25rem; + line-height: 2; + img { + vertical-align: top; + height: 4.5rem; + } + } + #tagline { + text-align: center; + padding: 0.5rem 25%; + } + #doc-link { + text-align: center; + margin-left: -0.5rem; + > a { + background: transparent; + border: 0.0625rem solid rgba(17,17,17,0.95); + transition: all 0.3s; + &:hover, &:focus { + background: rgba(17,17,17,0.95); + color: #e86957; + } + } + } + @media screen and (max-width:767px){ + #logo { + font-size: 1.75rem; + img { + height: 3.5rem; + } + } + #tagline { + padding: 0.25rem 17.5%; + font-size: 0.875rem; + } + #doc-link { + font-size: 0.875rem; + } + } + @media screen and (max-width: 383px){ + #logo { + font-size: 1.5rem; + img { + height: 3rem; + } + } + #tagline { + padding: 0.125rem 5%; + } + } + @media screen and (max-width: 479px){ + #tagline #tagline-lg { + display: none; + } + } +} + +@media screen and (min-width: 768px) { + .col-md-offset-1 { + margin-left: 8.33333%; + } +} + +@media screen and (min-width: 1280px) { + .col-lg-offset-2 { + margin-left: 16.66667%; + } +} + +h2.index-section { + border-left: 0.3125rem solid #de4a6d; + padding-left: 0.625rem; + margin-top: 2rem; +} + +#license-icon { + text-align: center; + @media screen and (min-width: 768px){ + position: relative; + top: calc(50% - 40px); + } + > svg { + border: 0.03125rem solid #444; + border-radius: 100%; + padding: 0.5rem; + fill: #444; + } +} + +#license { + vertical-align: middle; +} + +.no-padding { + padding: 0; +} + +#in-numbers { + background: #111; //#3f88c5; //#e15554; + padding-top: 1.25rem; + @media screen and (max-width: 767px){ + padding-bottom: 1rem; + } + color: #fff; + svg { + fill: #fff; + } +} + +#snippet-count, #contrib-count, #commit-count, #test-count { + font-size: 1.5rem; +} + +ul#links { + list-style: none; + padding-left: 0; + li + li { + padding-top: 0.625rem; + } +} + +.pick:not(.selected) { + display: none; +} + +.pick.selected { + overflow: visible; + button.next { + position: absolute; + top: 50%; + right: -1rem; + > svg { + margin-right: -0.0625rem; + } + } + button.previous { + position: absolute; + top: 50%; + left: -1rem; + > svg { + margin-left: -0.0625rem; + } + } + button.previous, button.next { + border-radius: 100%; + background: #f8f8f8; + border: 0.03125rem solid #ddd; + width: 1.5rem; + height: 1.5rem; + padding: 0; + margin: 0; + transition: all 0.3s; + > svg { + fill: #888; + transition: all 0.3s; + } + &:hover, &:focus { + border-color: #aaa; + > svg { + fill: #444; + } + } + } +} diff --git a/static-parts/index.html b/static-parts/index.html new file mode 100644 index 000000000..6f2010aa6 --- /dev/null +++ b/static-parts/index.html @@ -0,0 +1,156 @@ + + + + + 30 seconds of code + + + + + + + + + + + +
+

logo 30 seconds of code

+

Curated collection of useful JavaScript snippets
that you can understand in 30 seconds or less.

+ +
+
+
+
+

Our philosophy

+

The core goal of 30 seconds of code is to provide a quality resource for beginner and advanced JavaScript developers alike. We want to help improve the JavaScript ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. The only catch, if you may, is that many of our snippets are not perfectly suited for large, enterprise applications and they might not be deemed production-ready.


+
+
+
+
+
+
+
+
+

In order for 30 seconds of code to be as accessible and useful as possible, all of the snippets in the collection are licensed under the CC0-1.0 License, meaning they are absolutely free to use in any project you like. If you like what we do, you can always credit us, but that is not mandatory.

+
+

+
+
+
+
+

Today's picks

+
+ +

bottomVisible

Returns true if the bottom of the page is visible, false otherwise.

Use scrollY, scrollHeight and clientHeight to determine if the bottom of the page is visible.

const bottomVisible = () =>
+  document.documentElement.clientHeight + window.scrollY >=
+  (document.documentElement.scrollHeight || document.documentElement.clientHeight);
+
bottomVisible(); // true
+
+

ary

Creates a function that accepts up to n arguments, ignoring any additional arguments.

Call the provided function, fn, with up to n arguments, using Array.slice(0,n) and the spread operator (...).

const ary = (fn, n) => (...args) => fn(...args.slice(0, n));
+
const firstTwoMax = ary(Math.max, 2);
+[[2, 6, 'a'], [8, 4, 6], [10]].map(x => firstTwoMax(...x)); // [6, 8, 10]
+
+
+
+
+
+
+
+
+
+ +

295
snippets


+
+
+ +

114
contributors


+
+
+ +

3028
commits

+
+
+ +

999
tests

+
+
+
+
+
+
+
+

Getting started

+
+
+
+
+
+

Related projects

+

The idea behind 30 seconds of code has inspired some people to create similar collections in other programming languages and environments. Here are the ones we like the most:

+
+
+
+
+
+

Top contributors

+

TODO using Github API


+
+
+
+
+

How to contribute

+

TODO


+
+
+
+ + + +