andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
atomiks
2018-02-26 00:22:14 +11:00
parent 767b720f10
commit da84f0af71
5 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/4d4edbda57043aeeabeac31d2dd12d0d.css vendored
View File

File diff suppressed because one or more lines are too long

14
dist/4d4edbda57043aeeabeac31d2dd12d0d.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@ -1,4 +1,4 @@
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>30 Seconds of CSS</title> <link rel="icon" type="image/png" sizes="32x32" href="cf2ed1ce6be4ba59eed1079db594cc6e.png"> <script src="4d4edbda57043aeeabeac31d2dd12d0d.js" defer=""></script> <link rel="stylesheet" href="4d4edbda57043aeeabeac31d2dd12d0d.css"></head> <body> <button class="back-to-top-button">↑</button> <aside class="sidebar"> <button class="hamburger hamburger--spin sidebar__menu" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <div class="sidebar__links"> <a class="sidebar__link" href="#clearfix">Clearfix</a> <a class="sidebar__link" href="#custom-text-selection">Custom text selection</a> <a class="sidebar__link" href="#easing-variables">Easing variables</a> <a class="sidebar__link" href="#etched-text">Etched text</a> <a class="sidebar__link" href="#gradient-text">Gradient text</a> <a class="sidebar__link" href="#hairline-border">Hairline border</a> <a class="sidebar__link" href="#horizontal-and-vertical-centering">Horizontal and vertical centering</a> <a class="sidebar__link" href="#mouse-cursor-gradient-tracking">Mouse cursor gradient tracking</a> <a class="sidebar__link" href="#overflow-scroll-gradient">Overflow scroll gradient</a> <a class="sidebar__link" href="#popout-menu">Popout menu</a> <a class="sidebar__link" href="#pretty-text-underline">Pretty text underline</a> <a class="sidebar__link" href="#shape-separator">Shape separator</a> <a class="sidebar__link" href="#system-font-stack">System font stack</a> <a class="sidebar__link" href="#triangle">Triangle</a> <a class="sidebar__link" href="#truncate-text">Truncate text</a> </div> </aside> <div class="content-wrapper"> <header class="header"> <div class="container"> <img class="header__logo" draggable="false" src="76f3fcef6c36c4d7c29fc6fcd102dfe3.png"> <h1 class="header__heading">30 Seconds of <strong class="header__css">CSS</strong></h1> <p class="header__description"> A curated collection of useful CSS snippets you can understand in 30 seconds or less. </p> </div> </header> <main class="main"> <div class="container"> <div class="snippet"> <h3 id="clearfix">Clearfix</h3> <p>Ensures that an element self-clears its children.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="clearfix"&gt;
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>30 Seconds of CSS</title> <link rel="icon" type="image/png" sizes="32x32" href="cf2ed1ce6be4ba59eed1079db594cc6e.png"> <script src="4d4edbda57043aeeabeac31d2dd12d0d.js" defer=""></script> <link rel="stylesheet" href="4d4edbda57043aeeabeac31d2dd12d0d.css"></head> <body> <button class="back-to-top-button">↑</button> <aside class="sidebar"> <button class="hamburger hamburger--spin sidebar__menu" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <div class="sidebar__links"> <a class="sidebar__link" href="#clearfix">Clearfix</a> <a class="sidebar__link" href="#custom-text-selection">Custom text selection</a> <a class="sidebar__link" href="#easing-variables">Easing variables</a> <a class="sidebar__link" href="#etched-text">Etched text</a> <a class="sidebar__link" href="#gradient-text">Gradient text</a> <a class="sidebar__link" href="#hairline-border">Hairline border</a> <a class="sidebar__link" href="#horizontal-and-vertical-centering">Horizontal and vertical centering</a> <a class="sidebar__link" href="#mouse-cursor-gradient-tracking">Mouse cursor gradient tracking</a> <a class="sidebar__link" href="#overflow-scroll-gradient">Overflow scroll gradient</a> <a class="sidebar__link" href="#popout-menu">Popout menu</a> <a class="sidebar__link" href="#pretty-text-underline">Pretty text underline</a> <a class="sidebar__link" href="#shape-separator">Shape separator</a> <a class="sidebar__link" href="#system-font-stack">System font stack</a> <a class="sidebar__link" href="#triangle">Triangle</a> <a class="sidebar__link" href="#truncate-text">Truncate text</a> </div> </aside> <div class="content-wrapper"> <header class="header"> <div class="container"> <img class="header__logo" draggable="false" src="76f3fcef6c36c4d7c29fc6fcd102dfe3.png"> <h1 class="header__heading">30 Seconds of <strong class="header__css">CSS</strong></h1> <p class="header__description"> A curated collection of useful CSS snippets you can understand in 30 seconds or less. </p> <a class="header__github-button" href="https://github.com/atomiks/30-seconds-of-css" data-size="large" data-count-href="/atomiks/30-seconds-of-css/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star atomiks/30-seconds-of-css on GitHub"> Star </a> </div> </header> <main class="main"> <div class="container"> <div class="snippet"> <h3 id="clearfix">Clearfix</h3> <p>Ensures that an element self-clears its children.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="clearfix"&gt;
&lt;div class="floated"&gt;float a&lt;/div&gt;
&lt;div class="floated"&gt;float b&lt;/div&gt;
&lt;div class="floated"&gt;float c&lt;/div&gt;

3
index.html
View File

@ -40,6 +40,9 @@
<p class="header__description">
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
</p>
<a class="header__github-button" href="https://github.com/atomiks/30-seconds-of-css" data-size="large" data-count-href="/atomiks/30-seconds-of-css/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star atomiks/30-seconds-of-css on GitHub">
Star
</a>
</div>
</header>
<main class="main">

6
src/css/components/header.scss
View File

@ -46,7 +46,7 @@
&__description {
font-size: 1.5rem;
max-width: 600px;
margin: 0 auto;
margin: 0 auto 1rem;
font-weight: 300;
letter-spacing: 0.4px;
}
@ -57,6 +57,10 @@
-webkit-text-fill-color: transparent;
font-size: 4rem;
}
&__github-button {
color: white;
}
}
@media (min-width: 579px) {