Permalink
Browse files

CSS cleanup - it's not 2009 anymore

  • Loading branch information...
1 parent 6ffc751 commit 9a94e2fd37d5ec8ecb37468d5631e7fd7106aaa7 @infertux committed Jan 25, 2013
Showing with 28 additions and 88 deletions.
  1. +27 −87 css/style.css
  2. +1 −1 index.html
View
@@ -53,11 +53,6 @@ img {
vertical-align: middle;
}
-em {
- font-style: italic; /* works only on FF with a custom font */
- color: #eee;
-}
-
footer {
clear: both;
font-size: x-small;
@@ -74,15 +69,13 @@ footer a {
blockquote {
margin: 0;
padding: 1em;
+ transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
- -moz-transition: all 500ms ease-in-out;
- -o-transition: all 500ms ease-in-out;
}
blockquote:hover {
+ transform: scale(1.1);
-webkit-transform: scale(1.1);
- -moz-transform: scale(1.1);
- -o-transform: scale(1.1);
}
blockquote p {
@@ -146,21 +139,13 @@ nav {
top: -90px;
left: 100px;
border-radius: 220px / 120px;
- -moz-border-radius: 220px / 120px;
- -webkit-border-radius: 220px 120px;
- -o-border-radius: 220px / 120px;
background: #075698;
- background: linear-gradient(center top , #2e88c4, #075698);
- background: -moz-linear-gradient(center top , #2e88c4, #075698);
- background: -webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));
- background: -o-linear-gradient(center top , #2e88c4, #075698);
+ background: linear-gradient(#2e88c4, #075698);
+ background: -webkit-linear-gradient(#2e88c4, #075698);
}
#twitter:hover {
box-shadow: 10px -10px 5px #26d;
- -moz-box-shadow: 10px -10px 5px #26d;
- -webkit-box-shadow: 10px -10px 5px #26d;
- -o-box-shadow: 10px -10px 5px #26d;
}
/* creates the larger circle */
@@ -173,9 +158,6 @@ nav {
height: 30px;
background: #075698;
border-radius: 30px;
- -moz-border-radius: 30px;
- -webkit-border-radius: 30px;
- -o-border-radius: 30px;
}
/* creates the smaller circle */
@@ -188,31 +170,20 @@ nav {
height: 15px;
background: #075698;
border-radius: 15px;
- -moz-border-radius: 15px;
- -webkit-border-radius: 15px;
- -o-border-radius: 15px;
}
#github {
position: relative;
top: -160px;
left: 280px;
border-radius: 10px;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- -o-border-radius: 10px;
background: #861dc7;
- background: linear-gradient(top, #a96fcc, #861dc7);
- background: -moz-linear-gradient(top, #a96fcc, #861dc7);
- background: -webkit-gradient(linear, left top, left bottom, from(#a96fcc), to(#861dc7));
- background: -o-linear-gradient(top, #a96fcc, #861dc7);
+ background: linear-gradient(#a96fcc, #861dc7);
+ background: -webkit-linear-gradient(#a96fcc, #861dc7);
}
#github:hover {
box-shadow: 10px -10px 5px #95c;
- -moz-box-shadow: 10px -10px 5px #95c;
- -webkit-box-shadow: 10px -10px 5px #95c;
- -o-box-shadow: 10px -10px 5px #95c;
}
/* creates the larger triangle */
@@ -243,87 +214,56 @@ nav {
#blog {
position: relative;
- top: 100px;
+ top: 120px;
left: 330px;
- border-radius: 220px / 120px;
- -moz-border-radius: 220px / 120px;
- -webkit-border-radius: 220px 120px;
- -o-border-radius: 220px / 120px;
+ border-radius: 110px / 120px;
background: #5a8f00;
- background: linear-gradient(top, #b8db29, #5a8f00);
- background: -moz-linear-gradient(top, #b8db29, #5a8f00);
- background: -webkit-gradient(linear, left top, left bottom, from(#b8db29), to(#5a8f00));
- background: -o-linear-gradient(top, #b8db29, #5a8f00);
+ background: linear-gradient(#b8db29, #5a8f00);
+ background: -webkit-linear-gradient(#b8db29, #5a8f00);
}
#blog:hover {
box-shadow: 10px -10px 5px #690;
- -moz-box-shadow: 10px -10px 5px #690;
- -webkit-box-shadow: 10px -10px 5px #690;
- -o-box-shadow: 10px -10px 5px #690;
}
-/* creates part of the curve */
+/* creates the larger triangle */
#blog:before {
content: "\00a0";
position: absolute;
bottom: -30px;
- right: 50%;
+ left: 30px;
width: 0;
- height: 30px;
- border-right: 60px solid #5a8f00;
- background: #5a8f00; /* need this for webkit - bug in handling of border-radius */
- border-bottom-right-radius: 80px 50px;
- -moz-border-radius-bottomright: 80px 50px;
- -webkit-border-bottom-right-radius: 80px 50px;
- -o-border-bottom-right-radius: 80px 50px;
- /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
- transform: translate(0, -2px);
- -moz-transform: translate(0, -2px);
- -webkit-transform: translate(0, -2px);
- -o-transform: translate(0, -2px);
-}
-
-/* creates part of the curved pointy bit */
+ height: 0;
+ border-width: 0 0 30px 50px;
+ border-style: solid;
+ border-color: transparent #5a8f00;
+}
+
+/* creates the smaller triangle */
#blog:after {
content: "\00a0";
position: absolute;
bottom: -30px;
- right: 50%;
- width: 60px;
- height: 30px;
- background: #000;
- border-bottom-right-radius: 40px 50px;
- -moz-border-radius-bottomright: 40px 50px;
- -webkit-border-bottom-right-radius: 40px 50px;
- -o-border-bottom-right-radius: 40px 50px;
- /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
- transform: translate(-40px, -2px);
- -moz-transform: translate(-30px, -2px);
- -webkit-transform: translate(-30px, -2px);
- -o-transform: translate(-30px, -2px);
+ left: 30px;
+ width: 0;
+ height: 0;
+ border-width: 0 0 30px 20px;
+ border-style: solid;
+ border-color: transparent #000;
}
#labs {
position: relative;
top: 190px;
left: 0px;
border-radius: 10px;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- -o-border-radius: 10px;
background: #f9d835;
- background: linear-gradient(top, #f9d835, #f3961c);
- background: -moz-linear-gradient(top, #f9d835, #f3961c);
- background: -webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
- background: -o-linear-gradient(top, #f9d835, #f3961c);
+ background: linear-gradient(#f9d835, #f3961c);
+ background: -webkit-linear-gradient(#f9d835, #f3961c);
}
#labs:hover {
box-shadow: 10px -10px 5px #e91;
- -moz-box-shadow: 10px -10px 5px #e91;
- -webkit-box-shadow: 10px -10px 5px #e91;
- -o-box-shadow: 10px -10px 5px #e91;
}
/* creates triangle */
View
@@ -55,7 +55,7 @@
<footer>
Valid <a href="http://validator.w3.org/check?uri=http://www.infertux.com/">HTML5</a> |
- <del>Almost</del> valid <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.infertux.com/&amp;profile=css3&amp;usermedium=all">CSS3</a> |
+ Valid <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.infertux.com/&amp;profile=css3&amp;usermedium=all">CSS3</a> |
Valid <a href="http://uptime.infertux.com/98395">uptime</a>
</footer>
</body>

0 comments on commit 9a94e2f

Please sign in to comment.