Permalink
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...
1 parent 3a5c954 commit ccb13aa2cf349319449502bedd1e7cb31d2d63a5 @Thibaut Thibaut committed Apr 13, 2012
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
@@ -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
@@ -30,10 +30,14 @@ <h1><a href="index.html">WebApp</a></h1>
</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
@@ -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;
}
@@ -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;
}
@@ -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>
@@ -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;
}
Oops, something went wrong.

0 comments on commit ccb13aa

Please sign in to comment.