diff --git a/index.html b/index.html
index dd8f102..9dbbd0f 100644
--- a/index.html
+++ b/index.html
@@ -1,52 +1,52 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <title>DevTips Starter Kit</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="shortcut icon" href="assets/img/favicons/favicon.ico">
- <link rel="stylesheet" href="style.css" />
-</head>
-<body>
+ <head>
+ <title>DevTips Starter Kit</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="shortcut icon" href="assets/img/favicons/favicon.ico">
+ <link rel="stylesheet" href="style.css"/>
+ </head>
+ <body>
-<div class="page-home">
+ <div class="page-home">
- <section>
- <h1 class="page-title">DevTips<br>Starter Kit</h1>
- <p>Ground zero for your next project.</p>
+ <section>
+ <h1 class="page-title">DevTips<br>Starter Kit</h1>
+ <p>Ground zero for your next project.</p>
- <a href="https://github.com/DevTips/DevTips-Starter-Kit/archive/master.zip" class="button button-download">Download Now</a>
+ <a href="https://github.com/DevTips/DevTips-Starter-Kit/archive/master.zip" class="button button-download">Download Now</a>
- <a class="fork-tag" href="https://github.com/DevTips/DevTips-Starter-Kit">Fork Me on GitHub</a>
+ <a class="fork-tag" href="https://github.com/DevTips/DevTips-Starter-Kit">Fork Me on GitHub</a>
- </section>
+ </section>
- <section>
+ <section>
- <article>
- <h4>Watch the Video</h4>
- <div class="flex-video-wrap">
- <div class="flex-video">
- <iframe src="https://www.youtube.com/embed/F3u7whqIxrc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
- </div>
- </div>
- </article>
+ <article>
+ <h4>Watch the Video</h4>
+ <div class="flex-video-wrap">
+ <div class="flex-video">
+ <iframe src="https://www.youtube.com/embed/F3u7whqIxrc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
+ </div>
+ </div>
+ </article>
- <article>
- <p>Brought to you by</p>
- <div class="name-lockup">
- <img class="avatar" src="https://yt3.ggpht.com/-47U43a3eNW0/AAAAAAAAAAI/AAAAAAAAAAA/fWgb7mKcn6k/s176-c-k-no/photo.jpg">
- <div class="name">
- <strong>Travis Neilson</strong>
- <br>
- <a href="https://twitter.com/DevTipsShow">@DevTipsShow</a>
- </div>
- </div>
- </article>
+ <article>
+ <p>Brought to you by</p>
+ <div class="name-lockup">
+ <img class="avatar" src="https://yt3.ggpht.com/-47U43a3eNW0/AAAAAAAAAAI/AAAAAAAAAAA/fWgb7mKcn6k/s176-c-k-no/photo.jpg">
+ <div class="name">
+ <strong>Travis Neilson</strong>
+ <br>
+ <a href="https://twitter.com/DevTipsShow">@DevTipsShow</a>
+ </div>
+ </div>
+ </article>
- </section>
+ </section>
- <pre>
+ <pre>
DevTips-Starter-Kit
| -- assets/
| | -- css/
@@ -75,9 +75,9 @@ <h4>Watch the Video</h4>
| -- index.html
</pre>
-</div>
+ </div>
-<script src="assets/js/jquery-2.1.4.min.js"></script>
-<script src="assets/js/functions.js" type="text/javascript"></script>
-</body>
+ <script src="assets/js/jquery-2.1.4.min.js"></script>
+ <script src="assets/js/functions.js" type="text/javascript"></script>
+ </body>
</html>
diff --git a/style.css b/style.css
index 3e379a7..78a7c5d 100644
--- a/style.css
+++ b/style.css
@@ -1,408 +1,374 @@
@font-face {
- font-family: 'Fira Sans';
- font-style: normal;
- font-weight: 400;
- src: local("Fira Sans"), local("FiraSans-Regular"), url(http://fonts.gstatic.com/s/firasans/v5/EjsrzDkQUQCDwsBtLpcVQZBw1xU1rKptJj_0jans920.woff2) format("woff2");
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }
+ font-family: 'Fira Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: local("Fira Sans"), local("FiraSans-Regular"), url(http://fonts.gstatic.com/s/firasans/v5/EjsrzDkQUQCDwsBtLpcVQZBw1xU1rKptJj_0jans920.woff2) format("woff2");
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
@font-face {
- font-family: 'Fira Sans';
- font-style: normal;
- font-weight: 700;
- src: local("Fira Sans Bold"), local("FiraSans-Bold"), url(http://fonts.gstatic.com/s/firasans/v5/DugPdSljmOTocZOR2CItOhampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }
+ font-family: 'Fira Sans';
+ font-style: normal;
+ font-weight: 700;
+ src: local("Fira Sans Bold"), local("FiraSans-Bold"), url(http://fonts.gstatic.com/s/firasans/v5/DugPdSljmOTocZOR2CItOhampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
@font-face {
- font-family: 'Fira Mono';
- font-style: normal;
- font-weight: 400;
- src: local("Fira Mono"), local("FiraMono"), url(http://fonts.gstatic.com/s/firamono/v3/SlRWfq1zeqXiYWAN-lnG-pBw1xU1rKptJj_0jans920.woff2) format("woff2");
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }
+ font-family: 'Fira Mono';
+ font-style: normal;
+ font-weight: 400;
+ src: local("Fira Mono"), local("FiraMono"), url(http://fonts.gstatic.com/s/firamono/v3/SlRWfq1zeqXiYWAN-lnG-pBw1xU1rKptJj_0jans920.woff2) format("woff2");
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
-html {
- font-family: sans-serif;
- -ms-text-size-adjust: 100%;
- -webkit-text-size-adjust: 100%; }
+html {
+ font-family: sans-serif;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+}
body {
- margin: 0; }
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
- display: block; }
-
-audio,
-canvas,
-progress,
-video {
- display: inline-block;
- vertical-align: baseline; }
-
+ margin: 0;
+ padding: 0;
+ background: lavender;
+}
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+ display: block;
+}
+audio, canvas, progress, video {
+ display: inline-block;
+ vertical-align: baseline;
+}
audio:not([controls]) {
- display: none;
- height: 0; }
-
-[hidden],
-template {
- display: none; }
-
+ display: none;
+ height: 0;
+}
+[hidden], template {
+ display: none;
+}
a {
- background-color: transparent; }
-
-a:active,
-a:hover {
- outline: 0; }
-
+ background-color: transparent;
+}
+a:active, a:hover {
+ outline: 0;
+}
abbr[title] {
- border-bottom: 1px dotted; }
-
-b,
-strong {
- font-weight: bold; }
-
+ border-bottom: 1px dotted;
+}
+b, strong {
+ font-weight: bold;
+}
dfn {
- font-style: italic; }
-
+ font-style: italic;
+}
h1 {
- font-size: 2em;
- margin: 0.67em 0; }
-
+ font-size: 2em;
+ margin: 0.67em 0;
+}
mark {
- background: #ff0;
- color: #000; }
-
+ background: #ff0;
+ color: #000;
+}
small {
- font-size: 80%; }
-
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline; }
-
+ font-size: 80%;
+}
+sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
sup {
- top: -0.5em; }
-
+ top: -0.5em;
+}
sub {
- bottom: -0.25em; }
-
+ bottom: -0.25em;
+}
img {
- border: 0; }
-
+ border: 0;
+}
svg:not(:root) {
- overflow: hidden; }
-
+ overflow: hidden;
+}
figure {
- margin: 1em 40px; }
-
+ margin: 1em 40px;
+}
hr {
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- height: 0; }
-
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+}
pre {
- overflow: auto; }
-
-code,
-kbd,
-pre,
-samp {
- font-family: monospace, monospace;
- font-size: 1em; }
-
-button,
-input,
-optgroup,
-select,
-textarea {
- color: inherit;
- font: inherit;
- margin: 0; }
-
+ overflow: auto;
+}
+code, kbd, pre, samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+button, input, optgroup, select, textarea {
+ color: inherit;
+ font: inherit;
+ margin: 0;
+}
button {
- overflow: visible; }
-
-button,
-select {
- text-transform: none; }
-
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
- -webkit-appearance: button;
- cursor: pointer; }
-
-button[disabled],
-html input[disabled] {
- cursor: default; }
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border: 0;
- padding: 0; }
-
+ overflow: visible;
+}
+button, select {
+ text-transform: none;
+}
+button, html input[type="button"], input[type="reset"], input[type="submit"] {
+ -webkit-appearance: button;
+ cursor: pointer;
+}
+button[disabled], html input[disabled] {
+ cursor: default;
+}
+button::-moz-focus-inner, input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
input {
- line-height: normal; }
-
-input[type="checkbox"],
-input[type="radio"] {
- box-sizing: border-box;
- padding: 0; }
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
- height: auto; }
-
+ line-height: normal;
+}
+input[type="checkbox"], input[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+}
+input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
input[type="search"] {
- -webkit-appearance: textfield;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box; }
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none; }
-
+ -webkit-appearance: textfield;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
fieldset {
- border: 1px solid #c0c0c0;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em; }
-
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
legend {
- border: 0;
- padding: 0; }
-
+ border: 0;
+ padding: 0;
+}
textarea {
- overflow: auto; }
-
+ overflow: auto;
+}
optgroup {
- font-weight: bold; }
-
+ font-weight: bold;
+}
table {
- border-collapse: collapse;
- border-spacing: 0; }
-
-td,
-th {
- padding: 0; }
-
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+td, th {
+ padding: 0;
+}
body {
- background-color: white;
- font-size: 14px;
- line-height: 1.6;
- font-family: "Fira Sans", sans-serif;
- color: #666;
- -webkit-font-smoothing: antialiased;
- -webkit-text-size-adjust: 100%; }
-
+ background-color: white;
+ font-size: 14px;
+ line-height: 1.6;
+ font-family: "Fira Sans", sans-serif;
+ color: #666;
+ -webkit-font-smoothing: antialiased;
+ -webkit-text-size-adjust: 100%;
+}
::selection {
- background: #FFF498; }
-
+ background: #FFF498;
+}
::-moz-selection {
- background: #FFF498; }
-
+ background: #FFF498;
+}
img::selection {
- background: transparent; }
-
+ background: transparent;
+}
img::-moz-selection {
- background: transparent; }
-
+ background: transparent;
+}
body {
- -webkit-tap-highlight-color: #FFF498; }
-
+ -webkit-tap-highlight-color: #FFF498;
+}
a {
- color: #0074D9;
- text-decoration: none;
- outline: 0; }
- a:hover, a:focus {
- color: #40a6ff; }
-
-.gigantic, .huge, .large, .bigger, .big,
-h1, h2, h3, h4, h5, h6 {
- color: #222;
- font-weight: bold; }
-
+ color: #0074D9;
+ text-decoration: none;
+ outline: 0;
+}
+a:hover, a:focus {
+ color: #40a6ff;
+}
+.gigantic, .huge, .large, .bigger, .big, h1, h2, h3, h4, h5, h6 {
+ color: #222;
+ font-weight: bold;
+}
.gigantic {
- font-size: 110px;
- line-height: 1.09;
- letter-spacing: -2px; }
-
+ font-size: 110px;
+ line-height: 1.09;
+ letter-spacing: -2px;
+}
.huge, h1 {
- font-size: 68px;
- line-height: 1.05;
- letter-spacing: -1px; }
-
+ font-size: 68px;
+ line-height: 1.05;
+ letter-spacing: -1px;
+}
.large, h2 {
- font-size: 42px;
- line-height: 1.14; }
-
+ font-size: 42px;
+ line-height: 1.14;
+}
.bigger, h3 {
- font-size: 26px;
- line-height: 1.38; }
-
+ font-size: 26px;
+ line-height: 1.38;
+}
.big, h4 {
- font-size: 22px;
- line-height: 1.38; }
-
+ font-size: 22px;
+ line-height: 1.38;
+}
.small, small {
- font-size: 10px;
- line-height: 1.2; }
-
+ font-size: 10px;
+ line-height: 1.2;
+}
p {
- margin: 0 0 20px 0; }
-
+ margin: 0 0 20px 0;
+}
em {
- font-style: italic; }
-
+ font-style: italic;
+}
strong {
- font-weight: bold; }
-
+ font-weight: bold;
+}
hr {
- border: solid #ddd;
- border-width: 1px 0 0;
- clear: both;
- margin: 10px 0 30px;
- height: 0; }
-
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
- display: inline-block;
- height: 38px;
- padding: 0 30px;
- color: #555;
- text-align: center;
- font-size: 11px;
- font-weight: 600;
- line-height: 38px;
- letter-spacing: 0.1rem;
- text-transform: uppercase;
- text-decoration: none;
- white-space: nowrap;
- background-color: transparent;
- border-radius: 4px;
- border: 1px solid #bbb;
- cursor: pointer;
- box-sizing: border-box; }
- .button:hover, .button:active, .button:focus,
- button:hover,
- button:active,
- button:focus,
- input[type="submit"]:hover,
- input[type="submit"]:active,
- input[type="submit"]:focus,
- input[type="reset"]:hover,
- input[type="reset"]:active,
- input[type="reset"]:focus,
- input[type="button"]:hover,
- input[type="button"]:active,
- input[type="button"]:focus {
+ border: solid #ddd;
+ border-width: 1px 0 0;
+ clear: both;
+ margin: 10px 0 30px;
+ height: 0;
+}
+.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
+ display: inline-block;
+ height: 38px;
+ padding: 0 30px;
+ color: #555;
+ text-align: center;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 38px;
+ letter-spacing: 0.1rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: transparent;
+ border-radius: 4px;
+ border: 1px solid #bbb;
+ cursor: pointer;
+ box-sizing: border-box;
+}
+.button:hover, .button:active, .button:focus, button:hover, button:active, button:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus, input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus, input[type="button"]:hover, input[type="button"]:active, input[type="button"]:focus {
color: #333;
border-color: #888;
- outline: 0; }
-
+ outline: 0;
+}
.name-lockup {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center; }
-
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
.avatar {
- width: 80px;
- height: 80px;
- border-radius: 50%;
- margin-right: 10px;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0; }
-
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ margin-right: 10px;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+}
.fork-tag {
- position: absolute;
- top: 10px;
- right: -10px;
- background: #0074D9;
- color: white;
- padding: 2px 6px;
- transition: all 0.3s ease-in-out;
- transform-origin: top right; }
- .fork-tag:hover {
+ position: absolute;
+ top: 10px;
+ right: -10px;
+ background: #0074D9;
color: white;
- animation: wiggle 0.4s linear 1; }
-
+ padding: 2px 6px;
+ transition: all 0.3s ease-in-out;
+ transform-origin: top right;
+}
+.fork-tag:hover {
+ color: white;
+ animation: wiggle 0.4s linear 1;
+}
@keyframes wiggle {
- 0% {
- transform: rotate(0deg); }
- 20% {
- transform: rotate(8deg); }
- 50% {
- transform: rotate(-8deg); }
- 80% {
- transform: rotate(8deg); }
- 100% {
- transform: rotate(0deg); } }
+ 0% {
+ transform: rotate(0deg);
+ }
+ 20% {
+ transform: rotate(8deg);
+ }
+ 50% {
+ transform: rotate(-8deg);
+ }
+ 80% {
+ transform: rotate(8deg);
+ }
+ 100% {
+ transform: rotate(0deg);
+ }
+}
.flex-video {
- height: 0;
- margin-bottom: 0.88889rem;
- overflow: hidden;
- padding-bottom: 56%;
- position: relative; }
-
-.flex-video iframe,
-.flex-video object,
-.flex-video embed,
-.flex-video video {
- height: 100%;
- position: absolute;
- top: 0;
- width: 100%;
- left: 0; }
-
+ height: 0;
+ margin-bottom: 0.88889rem;
+ overflow: hidden;
+ padding-bottom: 56%;
+ position: relative;
+}
+.flex-video iframe, .flex-video object, .flex-video embed, .flex-video video {
+ height: 100%;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ left: 0;
+}
body {
- margin: 10px;
- background-color: #ddd;
- overflow-x: hidden; }
-
+ margin: 10px;
+ background-color: #ddd;
+ overflow-x: hidden;
+}
.page-home {
- text-align: center; }
- .page-home section {
+ text-align: center;
+}
+.page-home section {
max-width: 600px;
margin: 50px auto;
padding: 40px;
position: relative;
background-color: rgba(255, 255, 255, 0.7);
- box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); }
- .page-home section:first-child {
- background-image: url(../img/tools.png);
- background-position: center; }
- .page-home section h1 {
- font-weight: 700;
- line-height: 1;
- margin: 20px 0;
- letter-spacing: 1px; }
- .page-home img {
- max-width: 100%; }
- .page-home .flex-video-wrap {
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+}
+.page-home section:first-child {
+ background-image: url(../img/tools.png);
+ background-position: center;
+}
+.page-home section h1 {
+ font-weight: 700;
+ line-height: 1;
+ margin: 20px 0;
+ letter-spacing: 1px;
+}
+.page-home img {
+ max-width: 100%;
+}
+.page-home .flex-video-wrap {
max-width: 640px;
display: inline-block;
- width: 100%; }
- .page-home pre {
+ width: 100%;
+}
+.page-home pre {
text-align: left;
font-family: "Fira Mono", monospace;
font-size: 30px;
@@ -411,16 +377,19 @@ body {
top: -50px;
left: -50px;
z-index: -1;
- pointer-events: none; }
- @media (max-width: 500px) {
- .page-home pre {
- font-size: 20px; } }
- .page-home article {
- margin-bottom: 50px; }
- .page-home article:last-child {
- margin-bottom: 0px; }
-
-
+ pointer-events: none;
+}
+@media (max-width: 500px) {
+ .page-home pre {
+ font-size: 20px;
+ }
+}
+.page-home article {
+ margin-bottom: 50px;
+}
+.page-home article:last-child {
+ margin-bottom: 0px;
+}
body {
- background: lavender;
+ background: lavender;
}