Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Update about box with new styling and more info.

And switched Sass' output style to "expanded" for better CSS readability.
  • Loading branch information...
commit ccb13aa2cf349319449502bedd1e7cb31d2d63a5 1 parent 3a5c954
@Thibaut authored
Showing with 1,634 additions and 368 deletions.
  1. +46 −5 1-top-bar/css/style.css
  2. +8 −4 1-top-bar/index.html
  3. +46 −6 1-top-bar/scss/style.scss
  4. +51 −9 10-search-dropdown/css/style.css
  5. +8 −4 10-search-dropdown/index.html
  6. +50 −10 10-search-dropdown/scss/style.scss
  7. +47 −6 11-ios-style-popover/css/style.css
  8. +8 −4 11-ios-style-popover/index.html
  9. +49 −8 11-ios-style-popover/scss/style.scss
  10. +48 −5 12-sliding-tags/css/style.css
  11. +7 −4 12-sliding-tags/index.html
  12. +51 −10 12-sliding-tags/scss/style.scss
  13. +47 −7 13-profile-popover/css/style.css
  14. +8 −4 13-profile-popover/index.html
  15. +50 −10 13-profile-popover/scss/style.scss
  16. +36 −9 14-to-do-list/css/style.css
  17. +12 −8 14-to-do-list/index.html
  18. +34 −11 14-to-do-list/scss/style.scss
  19. +46 −11 15-push-buttons/css/style.css
  20. +42 −36 15-push-buttons/index.html
  21. +34 −12 15-push-buttons/scss/style.scss
  22. +37 −6 16-social-app/css/style.css
  23. +12 −8 16-social-app/index.html
  24. +34 −7 16-social-app/scss/style.scss
  25. +45 −5 2-dark-navigation/css/style.css
  26. +8 −4 2-dark-navigation/index.html
  27. +49 −10 2-dark-navigation/scss/style.scss
  28. +48 −25 3-tabbed-navigation/css/style.css
  29. +8 −4 3-tabbed-navigation/index.html
  30. +50 −9 3-tabbed-navigation/scss/style.scss
  31. +48 −5 4-menu-notifications/css/style.css
  32. +8 −4 4-menu-notifications/index.html
  33. +49 −7 4-menu-notifications/scss/style.scss
  34. +48 −5 5-progress-bars/css/style.css
  35. +8 −4 5-progress-bars/index.html
  36. +47 −6 5-progress-bars/scss/style.scss
  37. +46 −6 6-little-calendar/css/style.css
  38. +8 −4 6-little-calendar/index.html
  39. +44 −7 6-little-calendar/scss/style.scss
  40. +46 −6 7-mini-dropdown-menu/css/style.css
  41. +8 −4 7-mini-dropdown-menu/index.html
  42. +44 −7 7-mini-dropdown-menu/scss/style.scss
  43. +49 −9 8-login-form/css/style.css
  44. +11 −8 8-login-form/index.html
  45. +49 −10 8-login-form/scss/style.scss
  46. +48 −5 9-3d-buttons/css/style.css
  47. +7 −4 9-3d-buttons/index.html
  48. +47 −6 9-3d-buttons/scss/style.scss
View
51 1-top-bar/css/style.css
@@ -58,6 +58,9 @@ table {
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
body {
background: #10abd7;
color: #404040;
@@ -74,6 +77,9 @@ body {
margin-right: auto;
}
+/* ========================================================
+ Top bar
+ ===================================================== */
header {
position: fixed;
top: 0;
@@ -200,16 +206,51 @@ header nav span {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.2);
}
+/* ========================================================
+ About
+ ===================================================== */
.about {
- margin: 50px 0;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #ccc;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
+ color: #095f78;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
}
.about a {
- color: #fff;
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #e8f3fc;
text-decoration: none;
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ border-radius: 2px;
}
.about a:hover {
- border-bottom: 1px solid #fff;
+ color: #095f78;
+ text-shadow: none;
+ background: #e8f3fc;
+}
+
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
12 1-top-bar/index.html
@@ -30,10 +30,14 @@
</header>
<section class="about">
- <p>
- <a href="http://www.webinterfacelab.com/snippets/top-bar" target="_parent">View Snippet</a> &ndash;
- <a href="http://www.webinterfacelab.com/snippets/top-bar.zip" target="_parent">Download Snippet</a> &ndash;
- <a href="https://github.com/Thibaut/Snippets/tree/master/1-top-bar/" target="_parent">View on Github</a>
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/top-bar" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/top-bar.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
+ Original PSD by <a href="http://www.premiumpixels.com/freebies/sticky-admin-bar-psd/" target="_blank" rel="nofollow">Orman Clark</a>
</p>
</section>
</body>
View
52 1-top-bar/scss/style.scss
@@ -9,6 +9,10 @@
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
+
$siteWidth: 540px;
$headerHeight: 37px;
@@ -40,6 +44,10 @@ body {
margin-right: auto;
}
+/* ========================================================
+ Top bar
+ ===================================================== */
+
header {
position: fixed;
top: 0;
@@ -131,16 +139,48 @@ header {
}
}
+/* ========================================================
+ About
+ ===================================================== */
+
.about {
- margin: 50px 0;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #ccc;
- text-shadow: 0 -1px rgba(0, 0, 0, .25);
+ color: darken($bodyBackgroundColor, 20%);
+ text-shadow: 0 1px rgba(255, 255, 255, .3);
+ background: rgba(0, 0, 0, .05);
+ border-radius: 3px;
a {
- color: #fff;
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #e8f3fc;
text-decoration: none;
-
- &:hover { border-bottom: 1px solid #fff; }
+ text-shadow: 0 -1px rgba(0, 0, 0, .2);
+ border-radius: 2px;
+
+ &:hover {
+ color: darken($bodyBackgroundColor, 20%);
+ text-shadow: none;
+ background: #e8f3fc;
+ }
+ }
+}
+
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
}
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
60 10-search-dropdown/css/style.css
@@ -58,6 +58,9 @@ table {
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
body {
background: #f7f7f7;
color: #404040;
@@ -91,6 +94,9 @@ input {
color: #555860;
}
+/* ========================================================
+ Search
+ ===================================================== */
.search {
position: relative;
margin: 0 auto;
@@ -225,19 +231,55 @@ input {
font-weight: 200;
}
+.lt-ie9 .search input {
+ line-height: 26px;
+}
+
+/* ========================================================
+ About
+ ===================================================== */
.about {
- margin: 230px 0 50px;
+ margin: 240px auto 50px;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #bbb;
- font-size: 14px;
- font-weight: 200;
- text-shadow: 0 1px #fff;
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.7);
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
}
-.about a:hover {
+.about a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
- border-bottom: 1px solid #1e7ad3;
+ border-radius: 2px;
+}
+.about a:hover {
+ color: #fff;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
}
-.lt-ie9 .search input {
- line-height: 26px;
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
12 10-search-dropdown/index.html
@@ -28,10 +28,14 @@
</section>
<section class="about">
- <p>
- <a href="http://www.webinterfacelab.com/snippets/search-dropdown" target="_parent">View Snippet</a> &ndash;
- <a href="http://www.webinterfacelab.com/snippets/search-dropdown.zip" target="_parent">Download Snippet</a> &ndash;
- <a href="https://github.com/Thibaut/Snippets/tree/master/10-search-dropdown/" target="_parent">View on Github</a>
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/search-dropdown" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/search-dropdown.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
+ Original PSD by <a href="http://365psd.com/day/2-253/" target="_blank" rel="nofollow">Blaze Pollard</a>
</p>
</section>
</body>
View
60 10-search-dropdown/scss/style.scss
@@ -9,6 +9,10 @@
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
+
$siteWidth: 640px;
body {
@@ -44,6 +48,10 @@ input {
color: #555860;
}
+/* ========================================================
+ Search
+ ===================================================== */
+
.search {
position: relative;
margin: 0 auto;
@@ -160,20 +168,52 @@ input {
font-weight: 200;
}
+.lt-ie9 {
+ .search input { line-height: 26px; }
+}
+
+/* ========================================================
+ About
+ ===================================================== */
+
.about {
- margin: 230px 0 50px;
+ margin: 240px auto 50px;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #bbb;
- font-size: 14px;
- font-weight: 200;
- text-shadow: 0 1px #fff;
-
- a:hover {
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, .7);
+ background: rgba(0, 0, 0, .05);
+ border-radius: 3px;
+
+ a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
- border-bottom: 1px solid #1e7ad3;
+ border-radius: 2px;
+
+ &:hover {
+ color: #fff;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+ }
}
}
-.lt-ie9 {
- .search input { line-height: 26px; }
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+ font-weight: 500;
+ }
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
53 11-ios-style-popover/css/style.css
@@ -58,6 +58,9 @@ table {
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
body {
background: #0ca3d2;
color: #404040;
@@ -88,6 +91,9 @@ a:hover {
margin: 0 auto;
}
+/* ========================================================
+ Popover
+ ===================================================== */
.popover {
position: relative;
z-index: 10;
@@ -210,16 +216,51 @@ a:hover {
display: block;
}
+/* ========================================================
+ About
+ ===================================================== */
.about {
- margin: 50px 0;
+ margin: 80px auto 20px;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #fff;
- text-shadow: 0 1px #2a85a1;
+ color: #045773;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
}
.about a {
- color: #cce7fa;
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #fff;
+ text-decoration: none;
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ border-radius: 2px;
}
.about a:hover {
- text-decoration: none;
- border-bottom: 1px solid #cce7fa;
+ color: #045773;
+ text-shadow: none;
+ background: #fff;
+}
+
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
12 11-ios-style-popover/index.html
@@ -27,10 +27,14 @@
</section>
<section class="about">
- <p>
- <a href="http://www.webinterfacelab.com/snippets/ios-style-popover" target="_parent">View Snippet</a> &ndash;
- <a href="http://www.webinterfacelab.com/snippets/ios-style-popover.zip" target="_parent">Download Snippet</a> &ndash;
- <a href="https://github.com/Thibaut/Snippets/tree/master/11-ios-style-popover/" target="_parent">View on Github</a>
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/ios-style-popover" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/ios-style-popover.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
+ Original PSD by <a href="http://365psd.com/day/2-202/" target="_blank" rel="nofollow">Morgan Knutson</a>
</p>
</section>
</body>
View
57 11-ios-style-popover/scss/style.scss
@@ -9,8 +9,11 @@
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
+
$siteWidth: 640px;
-$popoverZ: 10;
body {
background: #0ca3d2;
@@ -41,6 +44,12 @@ a {
.popover { margin: 0 auto; }
}
+/* ========================================================
+ Popover
+ ===================================================== */
+
+$popoverZ: 10;
+
.popover {
position: relative;
z-index: $popoverZ;
@@ -154,16 +163,48 @@ a {
.active a:after, a:active:after { display: block; }
}
+/* ========================================================
+ About
+ ===================================================== */
+
.about {
- margin: 50px 0;
+ margin: 80px auto 20px;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #fff;
- text-shadow: 0 1px #2a85a1;
-
- a { color: #cce7fa; }
+ color: #045773;
+ text-shadow: 0 1px rgba(255, 255, 255, .3);
+ background: rgba(0, 0, 0, .05);
+ border-radius: 3px;
- a:hover {
+ a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #fff;
text-decoration: none;
- border-bottom: 1px solid #cce7fa;
+ text-shadow: 0 -1px rgba(0, 0, 0, .2);
+ border-radius: 2px;
+
+ &:hover {
+ color: #045773;
+ text-shadow: none;
+ background: #fff;
+ }
}
+}
+
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+ }
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
53 12-sliding-tags/css/style.css
@@ -58,6 +58,9 @@ table {
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
body {
background: #eee;
color: #404040;
@@ -85,6 +88,9 @@ a:hover {
margin-top: 50px;
}
+/* ========================================================
+ Colors
+ ===================================================== */
.tags {
zoom: 1;
}
@@ -236,13 +242,50 @@ a:hover {
background-image: linear-gradient(top, #6aaeda, #4298d0);
}
+/* ========================================================
+ About
+ ===================================================== */
.about {
- margin: 50px 0;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #aaa;
- text-shadow: 0 1px #fff;
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.7);
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
}
-.about a:hover {
+.about a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
- border-bottom: 1px solid #1e7ad3;
+ border-radius: 2px;
+}
+.about a:hover {
+ color: #fff;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+}
+
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
11 12-sliding-tags/index.html
@@ -39,10 +39,13 @@
</section>
<section class="about">
- <p>
- <a href="http://www.webinterfacelab.com/snippets/sliding-tags" target="_parent">View Snippet</a> &ndash;
- <a href="http://www.webinterfacelab.com/snippets/sliding-tags.zip" target="_parent">Download Snippet</a> &ndash;
- <a href="https://github.com/Thibaut/Snippets/tree/master/12-sliding-tags/" target="_parent">View on Github</a>
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/sliding-tags" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/sliding-tags.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
</p>
</section>
</body>
View
61 12-sliding-tags/scss/style.scss
@@ -9,11 +9,11 @@
* http://www.opensource.org/licenses/mit-license.php
*/
-$siteWidth: 380px;
+/* ========================================================
+ Page
+ ===================================================== */
-$tagsHeight: 26px;
-$tagsDefaultColor: #eb6b22;
-$tagsColors: green #65bb34, blue #56a3d5;
+$siteWidth: 380px;
body {
background: #eee;
@@ -42,6 +42,14 @@ a {
@extend .container;
}
+/* ========================================================
+ Colors
+ ===================================================== */
+
+$tagsHeight: 26px;
+$tagsDefaultColor: #eb6b22;
+$tagsColors: green #65bb34, blue #56a3d5;
+
.tags {
@include clearfix;
@@ -137,14 +145,47 @@ a {
}
}
+/* ========================================================
+ About
+ ===================================================== */
+
.about {
- margin: 50px 0;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #aaa;
- text-shadow: 0 1px #fff;
-
- a:hover {
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, .7);
+ background: rgba(0, 0, 0, .05);
+ border-radius: 3px;
+
+ a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
- border-bottom: 1px solid #1e7ad3;
+ border-radius: 2px;
+
+ &:hover {
+ color: #fff;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+ }
}
+}
+
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+ }
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
54 13-profile-popover/css/style.css
@@ -58,6 +58,9 @@ table {
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
html, body {
min-height: 100%;
}
@@ -88,14 +91,16 @@ a:hover {
.main {
width: 640px;
- margin: 0 auto;
- padding-top: 130px;
+ margin: 150px auto 50px;
text-align: center;
}
.main .user {
text-align: left;
}
+/* ========================================================
+ Mini Profile
+ ===================================================== */
.user {
position: relative;
height: 32px;
@@ -250,16 +255,51 @@ a:hover {
border-left-color: rgba(255, 255, 255, 0.4);
}
+/* ========================================================
+ About
+ ===================================================== */
.about {
- margin: 50px 0;
+ margin: 80px auto 20px;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #fff;
- text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+ color: #045773;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
}
.about a {
+ padding: 1px 3px;
+ margin: 0 -1px;
color: #fff;
+ text-decoration: none;
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ border-radius: 2px;
}
.about a:hover {
- text-decoration: none;
- border-bottom: 1px solid #fff;
+ color: #045773;
+ text-shadow: none;
+ background: #fff;
+}
+
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
12 13-profile-popover/index.html
@@ -29,10 +29,14 @@
</section>
<section class="about">
- <p>
- <a href="http://www.webinterfacelab.com/snippets/animated-profile-popover" target="_parent">View Snippet</a> &ndash;
- <a href="http://www.webinterfacelab.com/snippets/animated-profile-popover.zip" target="_parent">Download Snippet</a> &ndash;
- <a href="https://github.com/Thibaut/Snippets/tree/master/13-profile-popover/" target="_parent">View on Github</a>
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/animated-profile-popover" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/animated-profile-popover.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
+ Original PSD by <a href="http://designmoo.com/4886/profile-tooltip/" target="_blank" rel="nofollow">Matthew Skiles</a>
</p>
</section>
</body>
View
60 13-profile-popover/scss/style.scss
@@ -10,7 +10,10 @@
*/
$siteWidth: 640px;
-$hoverColor: #5a70b0;
+
+/* ========================================================
+ Page
+ ===================================================== */
html, body { min-height: 100%; }
@@ -33,13 +36,18 @@ a {
.main {
width: $siteWidth;
- margin: 0 auto;
- padding-top: 130px;
+ margin: 150px auto 50px;
text-align: center;
.user { text-align: left; }
}
+/* ========================================================
+ Mini Profile
+ ===================================================== */
+
+$hoverColor: #5a70b0;
+
.user {
position: relative;
height: 32px;
@@ -164,16 +172,48 @@ a {
}
}
+/* ========================================================
+ About
+ ===================================================== */
+
.about {
- margin: 50px 0;
+ margin: 80px auto 20px;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #fff;
- text-shadow: 0 1px rgba(0, 0, 0, .3);
-
- a { color: #fff; }
+ color: #045773;
+ text-shadow: 0 1px rgba(255, 255, 255, .3);
+ background: rgba(0, 0, 0, .05);
+ border-radius: 3px;
- a:hover {
+ a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #fff;
text-decoration: none;
- border-bottom: 1px solid #fff;
+ text-shadow: 0 -1px rgba(0, 0, 0, .2);
+ border-radius: 2px;
+
+ &:hover {
+ color: #045773;
+ text-shadow: none;
+ background: #fff;
+ }
+ }
+}
+
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
}
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
45 14-to-do-list/css/style.css
@@ -310,19 +310,46 @@ a:hover {
About
===================================================== */
.about {
- margin-top: 60px;
+ margin: 80px auto 50px;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #aaa;
- text-shadow: 0 1px #fff;
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.7);
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
}
.about a {
- padding: 2px 6px;
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
+ text-decoration: none;
+ border-radius: 2px;
}
.about a:hover {
- position: relative;
color: #fff;
- text-decoration: none;
- text-shadow: 0 1px #145493;
- background: #1e7ad3;
- border-radius: 2px;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+}
+
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
20 14-to-do-list/index.html
@@ -34,14 +34,18 @@
<li class="next"><a href="index.html">Next <i class="icon-next"></i></a></li>
</ul>
</section>
-
- <section class="about">
- <p>
- <a href="http://www.webinterfacelab.com/snippets/simple-to-do-list" target="_parent">View Snippet</a> &ndash;
- <a href="http://www.webinterfacelab.com/snippets/simple-to-do-list.zip" target="_parent">Download Snippet</a> &ndash;
- <a href="https://github.com/Thibaut/Snippets/tree/master/14-to-do-list/" target="_parent">View on Github</a>
- </p>
- </section>
</div>
+
+ <section class="about">
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/simple-to-do-list" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/simple-to-do-list.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
+ Original PSD by <a href="http://drbl.in/bKOd" target="_blank" rel="nofollow">Facundo Gonzalez</a>
+ </p>
+ </section>
</body>
</html>
View
45 14-to-do-list/scss/style.scss
@@ -220,19 +220,42 @@ $icons: ('check', 0 0),
===================================================== */
.about {
- margin-top: 60px;
+ margin: 80px auto 50px;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #aaa;
- text-shadow: 0 1px #fff;
-
- a { padding: 2px 6px; }
-
- a:hover {
- position: relative;
- color: #fff;
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, .7);
+ background: rgba(0, 0, 0, .05);
+ border-radius: 3px;
+
+ a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
- text-shadow: 0 1px #145493;
- background: #1e7ad3;
border-radius: 2px;
+
+ &:hover {
+ color: #fff;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+ }
}
+}
+
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+ }
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
57 15-push-buttons/css/style.css
@@ -74,6 +74,17 @@ a:hover, a:active {
outline: none;
}
+.container {
+ zoom: 1;
+}
+.container:before, .container:after {
+ content: "";
+ display: table;
+}
+.container:after {
+ clear: both;
+}
+
.column {
position: relative;
z-index: 1;
@@ -443,22 +454,46 @@ a:hover, a:active {
About
===================================================== */
.about {
- clear: both;
- padding-top: 50px;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #aaa;
- text-shadow: 0 1px #fff;
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.7);
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
}
.about a {
- padding: 2px 6px;
- color: #1e7ad3;
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
+ border-radius: 2px;
}
.about a:hover {
- position: relative;
color: #fff;
- text-decoration: none;
- text-shadow: 0 1px #145493;
- background: #1e7ad3;
- border-radius: 2px;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+}
+
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
78 15-push-buttons/index.html
@@ -15,51 +15,57 @@
</head>
<body>
- <div class="column red">
- <a href="index.html" class="button red">Push</a>
- <a href="index.html" class="button red alt">Push</a>
- </div>
+ <div class="container">
+ <div class="column red">
+ <a href="index.html" class="button red">Push</a>
+ <a href="index.html" class="button red alt">Push</a>
+ </div>
- <div class="column blue">
- <a href="index.html" class="button blue">Push</a>
- <a href="index.html" class="button blue alt">Push</a>
- </div>
+ <div class="column blue">
+ <a href="index.html" class="button blue">Push</a>
+ <a href="index.html" class="button blue alt">Push</a>
+ </div>
- <div class="column green">
- <a href="index.html" class="button green">Push</a>
- <a href="index.html" class="button green alt">Push</a>
- </div>
+ <div class="column green">
+ <a href="index.html" class="button green">Push</a>
+ <a href="index.html" class="button green alt">Push</a>
+ </div>
- <div class="column cyan">
- <a href="index.html" class="button cyan">Push</a>
- <a href="index.html" class="button cyan alt">Push</a>
- </div>
+ <div class="column cyan">
+ <a href="index.html" class="button cyan">Push</a>
+ <a href="index.html" class="button cyan alt">Push</a>
+ </div>
- <div class="column brown">
- <a href="index.html" class="button brown">Push</a>
- <a href="index.html" class="button brown alt">Push</a>
- </div>
+ <div class="column brown">
+ <a href="index.html" class="button brown">Push</a>
+ <a href="index.html" class="button brown alt">Push</a>
+ </div>
- <div class="column pink">
- <a href="index.html" class="button pink">Push</a>
- <a href="index.html" class="button pink alt">Push</a>
- </div>
+ <div class="column pink">
+ <a href="index.html" class="button pink">Push</a>
+ <a href="index.html" class="button pink alt">Push</a>
+ </div>
- <div class="column purple">
- <a href="index.html" class="button purple">Push</a>
- <a href="index.html" class="button purple alt">Push</a>
- </div>
+ <div class="column purple">
+ <a href="index.html" class="button purple">Push</a>
+ <a href="index.html" class="button purple alt">Push</a>
+ </div>
- <div class="column gray">
- <a href="index.html" class="button gray">Push</a>
- <a href="index.html" class="button gray alt">Push</a>
+ <div class="column gray">
+ <a href="index.html" class="button gray">Push</a>
+ <a href="index.html" class="button gray alt">Push</a>
+ </div>
</div>
-
+
<section class="about">
- <p>
- <a href="http://www.webinterfacelab.com/snippets/multi-colored-push-buttons" target="_parent">View Snippet</a> &ndash;
- <a href="http://www.webinterfacelab.com/snippets/multi-colored-push-buttons.zip" target="_parent">Download Snippet</a> &ndash;
- <a href="https://github.com/Thibaut/Snippets/tree/master/15-push-buttons/" target="_parent">View on Github</a>
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/multi-colored-push-buttons" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/multi-colored-push-buttons.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
+ Original PSD by <a href="http://dribbble.com/shots/292708-Push-Button-PSD" target="_blank" rel="nofollow">Marian Mraz</a>
</p>
</section>
</body>
View
46 15-push-buttons/scss/style.scss
@@ -24,6 +24,10 @@ body {
a:hover, a:active { outline: none; }
+.container {
+ @include clearfix;
+}
+
.column {
position: relative;
z-index: 1;
@@ -137,24 +141,42 @@ $colors: red #d02e17,
===================================================== */
.about {
- clear: both;
- padding-top: 50px;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #aaa;
- text-shadow: 0 1px #fff;
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, .7);
+ background: rgba(0, 0, 0, .05);
+ border-radius: 3px;
a {
- padding: 2px 6px;
- color: #1e7ad3;
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
-
+ border-radius: 2px;
+
&:hover {
- position: relative;
color: #fff;
- text-decoration: none;
- text-shadow: 0 1px #145493;
- background: #1e7ad3;
- border-radius: 2px;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
}
}
+}
+
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+ }
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
43 16-social-app/css/style.css
@@ -322,15 +322,46 @@ a:hover {
About
===================================================== */
.about {
- margin-top: 50px;
+ margin: 80px auto 20px;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #fff;
- text-shadow: 0 1px #223d54;
+ color: #aaa;
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
}
.about a {
- color: #cce7fa;
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #fafafa;
+ text-decoration: none;
+ border-radius: 2px;
}
.about a:hover {
- text-decoration: none;
- border-bottom: 1px solid #cce7fa;
+ color: #111;
+ text-shadow: none;
+ background: #fafafa;
+}
+
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
20 16-social-app/index.html
@@ -62,14 +62,18 @@
</article>
</section>
</section>
-
- <section class="about">
- <p>
- <a href="http://www.webinterfacelab.com/snippets/mini-social-app" target="_parent">View Snippet</a> &ndash;
- <a href="http://www.webinterfacelab.com/snippets/mini-social-app.zip" target="_parent">Download Snippet</a> &ndash;
- <a href="https://github.com/Thibaut/Snippets/tree/master/16-social-app/" target="_parent">View on Github</a>
- </p>
- </section>
</div>
+
+ <section class="about">
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/mini-social-app" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/mini-social-app.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
+ Original PSD by <a href="http://www.blazrobar.com/2012/free-psd-files/mini-social-app-design/" target="_blank" rel="nofollow">Blaz Robar</a>
+ </p>
+ </section>
</body>
</html>
View
41 16-social-app/scss/style.scss
@@ -240,15 +240,42 @@ $sideColor: #59afd2;
===================================================== */
.about {
- margin-top: 50px;
+ margin: 80px auto 20px;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #fff;
- text-shadow: 0 1px #223d54;
-
- a { color: #cce7fa; }
+ color: #aaa;
+ text-shadow: 0 -1px rgba(0, 0, 0, .2);
+ background: rgba(0, 0, 0, .05);
+ border-radius: 3px;
- a:hover {
+ a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #fafafa;
text-decoration: none;
- border-bottom: 1px solid #cce7fa;
+ border-radius: 2px;
+
+ &:hover {
+ color: #111;
+ text-shadow: none;
+ background: #fafafa;
+ }
}
+}
+
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+ }
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
50 2-dark-navigation/css/style.css
@@ -58,6 +58,9 @@ table {
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
body {
background: #ecedef;
color: #404040;
@@ -73,6 +76,9 @@ body {
margin-right: auto;
}
+/* ========================================================
+ Header & Navigation
+ ===================================================== */
header {
padding-top: 100px;
background: #3d4144 url("../img/bg.png") 0 0 repeat;
@@ -174,16 +180,50 @@ nav li.yellow a, nav li.yellow a:active {
border-bottom-color: #c0bb30;
}
+/* ========================================================
+ About
+ ===================================================== */
.about {
- margin: 50px 0;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #bbb;
- text-shadow: 0 1px #fff;
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.7);
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
}
.about a {
- color: #1e7ad3;
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
+ border-radius: 2px;
}
.about a:hover {
- border-bottom: 1px solid #1e7ad3;
+ color: #fff;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+}
+
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
12 2-dark-navigation/index.html
@@ -30,10 +30,14 @@
</header>
<section class="about">
- <p>
- <a href="http://www.webinterfacelab.com/snippets/dark-navigation" target="_parent">View Snippet</a> &ndash;
- <a href="http://www.webinterfacelab.com/snippets/dark-navigation.zip" target="_parent">Download Snippet</a> &ndash;
- <a href="https://github.com/Thibaut/Snippets/tree/master/2-dark-navigation/" target="_parent">View on Github</a>
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/dark-navigation" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/dark-navigation.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
+ Original PSD by <a href="http://www.premiumpixels.com/freebies/dark-navigation-menu-psd/" target="_blank" rel="nofollow">Orman Clark</a>
</p>
</section>
</body>
View
59 2-dark-navigation/scss/style.scss
@@ -9,10 +9,11 @@
* http://www.opensource.org/licenses/mit-license.php
*/
-$siteWidth: 540px;
+/* ========================================================
+ Page
+ ===================================================== */
-$navHeight: 36px;
-$navBackgroundColor: #464b4c;
+$siteWidth: 540px;
body {
background: #ecedef;
@@ -29,6 +30,13 @@ body {
margin-right: auto;
}
+/* ========================================================
+ Header & Navigation
+ ===================================================== */
+
+$navHeight: 36px;
+$navBackgroundColor: #464b4c;
+
header {
padding-top: 100px;
background: #3d4144 url('../img/bg.png') 0 0 repeat;
@@ -90,16 +98,47 @@ nav {
li.yellow a, li.yellow a:active { border-bottom-color: #c0bb30; }
}
+/* ========================================================
+ About
+ ===================================================== */
+
.about {
- margin: 50px 0;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #bbb;
- text-shadow: 0 1px #fff;
-
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, .7);
+ background: rgba(0, 0, 0, .05);
+ border-radius: 3px;
+
a {
- color: #1e7ad3;
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
-
- &:hover { border-bottom: 1px solid #1e7ad3; }
+ border-radius: 2px;
+
+ &:hover {
+ color: #fff;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+ }
}
+}
+
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+ }
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
73 3-tabbed-navigation/css/style.css
@@ -58,6 +58,9 @@ table {
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
body {
background: #ecedef;
color: #404040;
@@ -70,26 +73,6 @@ body {
a {
color: #1e7ad3;
text-decoration: none;
- -webkit-transition-property: background, color;
- -moz-transition-property: background, color;
- -ms-transition-property: background, color;
- -o-transition-property: background, color;
- transition-property: background, color;
- -webkit-transition-duration: 0.1s;
- -moz-transition-duration: 0.1s;
- -ms-transition-duration: 0.1s;
- -o-transition-duration: 0.1s;
- transition-duration: 0.1s;
- -webkit-transition-timing-function: ease-out;
- -moz-transition-timing-function: ease-out;
- -ms-transition-timing-function: ease-out;
- -o-transition-timing-function: ease-out;
- transition-timing-function: ease-out;
- -webkit-transition-delay: 0;
- -moz-transition-delay: 0;
- -ms-transition-delay: 0;
- -o-transition-delay: 0;
- transition-delay: 0;
}
a:hover {
text-decoration: underline;
@@ -101,6 +84,9 @@ a:hover {
margin-right: auto;
}
+/* ========================================================
+ Header & Navigation
+ ===================================================== */
header {
padding-top: 60px;
background: #404040 url("../img/bg.png") 0 0 repeat;
@@ -226,13 +212,50 @@ nav .active a.icon span, nav a.icon:active span {
color: #222;
}
+/* ========================================================
+ About
+ ===================================================== */
.about {
- margin: 50px 0;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #bbb;
- text-shadow: 0 1px #fff;
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.7);
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
}
-.about a:hover {
+.about a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
- border-bottom: 1px solid #1e7ad3;
+ border-radius: 2px;
+}
+.about a:hover {
+ color: #fff;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+}
+
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
12 3-tabbed-navigation/index.html
@@ -45,10 +45,14 @@
</header>
<section class="about">
- <p>
- <a href="http://www.webinterfacelab.com/snippets/tabbed-navigation" target="_parent">View Snippet</a> &ndash;
- <a href="http://www.webinterfacelab.com/snippets/tabbed-navigation.zip" target="_parent">Download Snippet</a> &ndash;
- <a href="https://github.com/Thibaut/Snippets/tree/master/3-tabbed-navigation/" target="_parent">View on Github</a>
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/tabbed-navigation" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/tabbed-navigation.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
+ Original PSD by <a href="http://www.premiumpixels.com/freebies/simple-tabbed-navigation-psd/" target="_blank" rel="nofollow">Orman Clark</a>
</p>
</section>
</body>
View
59 3-tabbed-navigation/scss/style.scss
@@ -9,9 +9,11 @@
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
+
$siteWidth: 640px;
-$navHeight: 34px;
-$navBackgroundColor: #759aaf;
body {
background: #ecedef;
@@ -25,7 +27,6 @@ body {
a {
color: #1e7ad3;
text-decoration: none;
- @include transition((background, color), .1s, ease-out);
&:hover { text-decoration: underline; }
}
@@ -36,6 +37,13 @@ a {
margin-right: auto;
}
+/* ========================================================
+ Header & Navigation
+ ===================================================== */
+
+$navHeight: 34px;
+$navBackgroundColor: #759aaf;
+
header {
padding-top: 60px;
background: #404040 url('../img/bg.png') 0 0 repeat;
@@ -147,14 +155,47 @@ nav {
}
}
+/* ========================================================
+ About
+ ===================================================== */
+
.about {
- margin: 50px 0;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #bbb;
- text-shadow: 0 1px #fff;
-
- a:hover {
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, .7);
+ background: rgba(0, 0, 0, .05);
+ border-radius: 3px;
+
+ a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
- border-bottom: 1px solid #1e7ad3;
+ border-radius: 2px;
+
+ &:hover {
+ color: #fff;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+ }
}
+}
+
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+ }
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
53 4-menu-notifications/css/style.css
@@ -58,6 +58,9 @@ table {
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
body {
background: #ecedef url("../img/bg.png") 0 0 repeat;
color: #404040;
@@ -81,6 +84,9 @@ a:hover {
margin-right: auto;
}
+/* ========================================================
+ Header & Navigation
+ ===================================================== */
header {
margin-top: 50px;
}
@@ -213,13 +219,50 @@ nav .badge.red {
background-image: linear-gradient(top, #fc9f8a, #fa623f);
}
+/* ========================================================
+ About
+ ===================================================== */
.about {
- margin: 50px 0;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #bbb;
- text-shadow: 0 1px #fff;
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.7);
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
}
-.about a:hover {
+.about a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
- border-bottom: 1px solid #1e7ad3;
+ border-radius: 2px;
+}
+.about a:hover {
+ color: #fff;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+}
+
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
}
View
12 4-menu-notifications/index.html
@@ -29,10 +29,14 @@
</header>
<section class="about">
- <p>
- <a href="http://www.webinterfacelab.com/snippets/menu-with-notification-badges" target="_parent">View Snippet</a> &ndash;
- <a href="http://www.webinterfacelab.com/snippets/menu-with-notification-badges.zip" target="_parent">Download Snippet</a> &ndash;
- <a href="https://github.com/Thibaut/Snippets/tree/master/4-menu-notifications/" target="_parent">View on Github</a>
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/menu-with-notification-badges" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/menu-with-notification-badges.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
+ Original PSD by <a href="http://www.premiumpixels.com/freebies/menu-notification-badges-psd/" target="_blank" rel="nofollow">Orman Clark</a>
</p>
</section>
</body>
View
56 4-menu-notifications/scss/style.scss
@@ -9,8 +9,11 @@
* http://www.opensource.org/licenses/mit-license.php
*/
+/* ========================================================
+ Page
+ ===================================================== */
+
$siteWidth: 640px;
-$navHeight: 26px;
body {
background: #ecedef url('../img/bg.png') 0 0 repeat;
@@ -34,6 +37,12 @@ a {
margin-right: auto;
}
+/* ========================================================
+ Header & Navigation
+ ===================================================== */
+
+$navHeight: 26px;
+
header {
margin-top: 50px;
@extend .container;
@@ -133,14 +142,47 @@ nav {
}
}
+/* ========================================================
+ About
+ ===================================================== */
+
.about {
- margin: 50px 0;
+ margin: 80px auto;
+ padding: 15px 20px;
+ width: 300px;
text-align: center;
- color: #bbb;
- text-shadow: 0 1px #fff;
-
- a:hover {
+ color: #777;
+ text-shadow: 0 1px rgba(255, 255, 255, .7);
+ background: rgba(0, 0, 0, .05);
+ border-radius: 3px;
+
+ a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #1c74c8;
text-decoration: none;
- border-bottom: 1px solid #1e7ad3;
+ border-radius: 2px;
+
+ &:hover {
+ color: #fff;
+ text-shadow: 0 1px #0063A6;
+ background: #0090D2;
+ }
+ }
+}
+
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14