diff --git a/site/_sass/_font-awesome.scss b/site/_sass/_font-awesome.scss index 48f37c34..afdd60c3 100644 --- a/site/_sass/_font-awesome.scss +++ b/site/_sass/_font-awesome.scss @@ -29,10 +29,7 @@ left: 0.5em; opacity: 0; font-size: 0.8em; - -webkit-transition: opacity 0.2s ease-in-out 0.1s; - -moz-transition: opacity 0.2s ease-in-out 0.1s; - -o-transition: opacity 0.2s ease-in-out 0.1s; - transition: opacity 0.2s ease-in-out 0.1s; + @include transition(opacity 0.2s ease-in-out 0.1s); } h2:hover .header-link, h3:hover .header-link, diff --git a/site/_sass/_mixins.scss b/site/_sass/_mixins.scss new file mode 100644 index 00000000..5b9bb435 --- /dev/null +++ b/site/_sass/_mixins.scss @@ -0,0 +1,38 @@ +@mixin box-shadow($shadow...) { + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + box-shadow: $shadow; +} + +@mixin border-radius($radius...) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} + +@mixin border-top-left-radius($radius...) { + -webkit-border-top-left-radius: $radius; + -moz-border-radius-topleft: $radius; + border-top-left-radius: $radius; +} + +@mixin border-top-right-radius($radius...) { + -webkit-border-top-right-radius: $radius; + -moz-border-radius-topright: $radius; + border-top-right-radius: $radius; +} + +@mixin transition($transition...) { + -webkit-transition: $transition; + -moz-transition: $transition; + -o-transition: $transition; + transition: $transition; +} + +@mixin user-select($select...) { + -webkit-user-select: $select; /* Chrome all / Safari all */ + -moz-user-select: $select; /* Firefox all */ + -ms-user-select: $select; /* IE 10+ */ + -o-user-select: $select; + user-select: $select; +} diff --git a/site/_sass/_style.scss b/site/_sass/_style.scss index b9299283..f1e1ff14 100644 --- a/site/_sass/_style.scss +++ b/site/_sass/_style.scss @@ -11,9 +11,7 @@ body { color: #ddd; background-color: #333; border-top: 5px solid #fc0; - -webkit-box-shadow: inset 0 3px 30px rgba(0,0,0,.3); - -moz-box-shadow: inset 0 3px 30px rgba(0,0,0,.3); - box-shadow: inset 0 3px 30px rgba(0,0,0,.3); + @include box-shadow(inset 0 3px 30px rgba(0,0,0,.3)); text-shadow: 0 1px 3px rgba(0,0,0,.5); } @@ -68,24 +66,17 @@ nav { margin-right: 10px; a { - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + @include border-radius(5px); font-weight: 900; font-size: 14px; padding: 0.5em 1em; text-shadow: none; text-transform: uppercase; - -webkit-transition: all .25s; - -moz-transition: all .25s; - -o-transition: all .25s; - transition: all .25s; + @include transition(all .25s); &:hover { background-color: #252525; - -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); - -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); - box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); + @include box-shadow(inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1)); text-shadow: 0 1px 3px rgba(0,0,0,.5); } } @@ -95,9 +86,7 @@ nav { a { background-color: #fc0; color: #222; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); - box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); + @include box-shadow(inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5)); text-shadow: 0 1px 0 rgba(255,255,255,.3); } } @@ -122,9 +111,7 @@ nav { font-size: 14px; font-weight: 900; padding: 5px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + @include border-radius(5px); } li { @@ -138,9 +125,7 @@ nav { a { background-color: #fc0; color: #222; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); - box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); + @include box-shadow(inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5)); text-shadow: 0 1px 0 rgba(255,255,255,.3); } } @@ -188,10 +173,7 @@ footer { margin-left: 5px; opacity: .8; padding: 1px; - -webkit-transition: opacity .2s; - -moz-transition: opacity .2s; - -o-transition: opacity .2s; - transition: opacity .2s; + @include transition(opacity .2s); } } @@ -225,9 +207,7 @@ footer { background-color: #3F1F1F; color: #fff; margin: 60px 0; - -webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,.4); - -moz-box-shadow: inset 0 3px 10px rgba(0,0,0,.4); - box-shadow: inset 0 3px 10px rgba(0,0,0,.4); + @include box-shadow(inset 0 3px 10px rgba(0,0,0,.4)); .content { padding: 0; } @@ -276,12 +256,8 @@ footer { text-align: center; margin: 0 20px; padding: 5px 0; - -webkit-border-radius: 5px 5px 0 0; - -moz-border-radius: 5px 5px 0 0; - border-radius: 5px 5px 0 0; - -webkit-box-shadow: 0 3px 10px rgba(0,0,0,.5); - -moz-box-shadow: 0 3px 10px rgba(0,0,0,.5); - box-shadow: 0 3px 10px rgba(0,0,0,.5); + @include border-radius(5px 5px 0 0); + @include box-shadow(0 3px 10px rgba(0,0,0,.5)); font: 400 16px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); @@ -301,12 +277,8 @@ footer { text-shadow: none; margin: 0 20px; background-color: #3d3d3d; - -webkit-border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; - -webkit-box-shadow: 0 5px 30px rgba(0,0,0,.3); - -moz-box-shadow: 0 5px 30px rgba(0,0,0,.3); - box-shadow: 0 5px 30px rgba(0,0,0,.3); + @include border-radius(0 0 5px 5px); + @include box-shadow(0 5px 30px rgba(0,0,0,.3)); } .line { @@ -319,11 +291,7 @@ footer { .path { color: #87ceeb; - -webkit-user-select: none; /* Chrome all / Safari all */ - -moz-user-select: none; /* Firefox all */ - -ms-user-select: none; /* IE 10+ */ - -o-user-select: none; - user-select: none; + @include user-select(none); } .prompt { @@ -347,9 +315,7 @@ footer { .pane { background-color: #444; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; + @include border-radius(10px); text-shadow: none; position: relative; padding: 0 20px 30px; @@ -405,14 +371,10 @@ footer { article { background-color: #444; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; + @include border-radius(10px); padding: 20px; margin: 0 10px; - -webkit-box-shadow: 0 3px 10px rgba(0,0,0,.1); - -moz-box-shadow: 0 3px 10px rgba(0,0,0,.1); - box-shadow: 0 3px 10px rgba(0,0,0,.1); + @include box-shadow(0 3px 10px rgba(0,0,0,.1)); font-size: 16px; } @@ -499,13 +461,9 @@ aside { text-transform: uppercase; font-weight: 700; padding: 8px 12px 10px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + @include border-radius(5px); /*border: 1px solid #333;*/ - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); - -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); - box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); + @include box-shadow(0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5)); background-color: #777; } @@ -570,13 +528,9 @@ article h2:first-child { margin-top: 0; } margin-left: -30px; padding: 6px 10px 8px; padding-left: 50px; - -webkit-border-radius: 0 5px 5px 0; - -moz-border-radius: 0 5px 5px 0; - border-radius: 0 5px 5px 0; + @include border-radius(0 5px 5px 0); position: relative; - -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3); - -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3); - box-shadow: 0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3); + @include box-shadow(0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3)); background-color: #9e2812; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzllMjgxMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZjBkMGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background-image: -webkit-gradient(linear, left top, left bottom, from(#9e2812), to(#6f0d0d)); @@ -617,9 +571,7 @@ article h2:first-child { margin-top: 0; } } .avatar { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + @include border-radius(3px); display: inline-block; vertical-align: middle; } @@ -636,13 +588,9 @@ article h2:first-child { margin-top: 0; } .news article + article { margin-top: -10px; - -webkit-border-radius: 0 0 10px 10px; - -moz-border-radius: 0 0 10px 10px; - border-radius: 0 0 10px 10px; + @include border-radius(0 0 10px 10px); border-top: 1px solid #555; - -webkit-box-shadow: 0 -1px 0 #2f2f2f; - -moz-box-shadow: 0 -1px 0 #2f2f2f; - box-shadow: 0 -1px 0 #2f2f2f; + @include box-shadow(0 -1px 0 #2f2f2f); } /* Code Highlighting */ @@ -670,18 +618,10 @@ h5 > code, .note > code { background-color: #333; color: #fff; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - -webkit-box-shadow: inset 0 1px 10px rgba(0,0,0,.3), + @include border-radius(5px); + @include box-shadow(inset 0 1px 10px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.1), - 0 -1px 0 rgba(0,0,0,.5); - -moz-box-shadow: inset 0 1px 10px rgba(0,0,0,.3), - 0 1px 0 rgba(255,255,255,.1), - 0 -1px 0 rgba(0,0,0,.5); - box-shadow: inset 0 1px 10px rgba(0,0,0,.3), - 0 1px 0 rgba(255,255,255,.1), - 0 -1px 0 rgba(0,0,0,.5); + 0 -1px 0 rgba(0,0,0,.5)); } .note code { @@ -706,10 +646,7 @@ h1, h2, h3, h4, h5, h6 { margin: 0; } a { color: #fc0; text-decoration: none; - -webkit-transition: all .25s; - -moz-transition: all .25s; - -o-transition: all .25s; - transition: all .25s; + @include transition(all .25s); &:hover { color: #f90; } } @@ -767,21 +704,13 @@ table { width: 100%; background-color: #555; margin: .5em 0; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3); - -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3); - box-shadow: 0 1px 3px rgba(0,0,0,.3); + @include border-radius(5px); + @include box-shadow(0 1px 3px rgba(0,0,0,.3)); } thead { - -webkit-border-top-left-radius: 5px; - -moz-border-radius-topleft: 5px; - border-top-left-radius: 5px; - -webkit-border-top-right-radius: 5px; - -moz-border-radius-topright: 5px; - border-top-right-radius: 5px; + @include border-top-left-radius(5px); + @include border-top-right-radius(5px); color: #fff; background-color: #3a3a3a; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhM2EzYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTFlMWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); @@ -794,20 +723,14 @@ thead { th { position: relative; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); - box-shadow: inset 0 1px 0 rgba(255,255,255,.1); + @include box-shadow(inset 0 1px 0 rgba(255,255,255,.1)); &:first-child { - -webkit-border-top-left-radius: 5px; - -moz-border-radius-topleft: 5px; - border-top-left-radius: 5px; + @include border-top-left-radius(5px); } &:last-child { - -webkit-border-top-right-radius: 5px; - -moz-border-radius-topright: 5px; - border-top-right-radius: 5px; + @include border-top-right-radius(5px); } } } @@ -827,9 +750,7 @@ th { tbody td { border-top: 1px solid #747474; border-top: 1px solid rgba(0,0,0,.1); - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); - box-shadow: inset 0 1px 0 rgba(255,255,255,.1); + @include box-shadow(inset 0 1px 0 rgba(255,255,255,.1)); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); @@ -873,13 +794,9 @@ code.output { margin-left: -30px; padding: 20px 20px 24px; padding-left: 50px; - -webkit-border-radius: 0 5px 5px 0; - -moz-border-radius: 0 5px 5px 0; - border-radius: 0 5px 5px 0; + @include border-radius(0 5px 5px 0); position: relative; - -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3); - -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3); - box-shadow: 0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3); + @include box-shadow(0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3)); background-color: #7e6d42; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdlNmQ0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1YzRlMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background-image: -webkit-gradient(linear, left top, left bottom, from(#7e6d42), to(#5c4e35)); diff --git a/site/css/screen.scss b/site/css/screen.scss index bca8c2bb..a539851a 100644 --- a/site/css/screen.scss +++ b/site/css/screen.scss @@ -1,8 +1,9 @@ --- --- +@import "mixins"; @import "normalize"; @import "gridism"; @import "style"; @import "pygments"; -@import "font-awesome" +@import "font-awesome";