Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Better box-shadow defaults.

  • Loading branch information...
commit 069284d3fc6c3be817a81b1773d6091e8fa42ecd 1 parent f2a32e6
@WanderingMatt authored
View
478 public/stylesheets/screen.css
@@ -1,477 +1 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-
-body {
- line-height: 1;
-}
-
-ol, ul {
- list-style: none;
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-caption, th, td {
- text-align: left;
- font-weight: normal;
- vertical-align: middle;
-}
-
-q, blockquote {
- quotes: none;
-}
-q:before, q:after, blockquote:before, blockquote:after {
- content: "";
- content: none;
-}
-
-a img {
- border: none;
-}
-
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
- display: block;
-}
-
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
- display: block;
-}
-
-body {
- width: 100%;
- *zoom: 1;
-}
-body:before, body:after {
- content: "";
- display: table;
-}
-body:after {
- clear: both;
-}
-
-h1 {
- font-size: 20px;
- line-height: 20px;
- text-transform: uppercase;
-}
-h1 strong {
- display: block;
- font-weight: bold;
-}
-
-h2 {
- clear: both;
- color: rgba(0, 0, 0, 0.25);
- font-size: 11px;
- font-weight: bold;
- padding: 30px 0 60px 0;
- text-transform: uppercase;
-}
-
-h3 {
- color: #333;
- float: left;
- font-weight: bold;
-}
-
-h4 {
- color: #777;
- float: right;
-}
-
-html, body {
- background: #fff;
-}
-
-body {
- color: #444;
- font-family: "Helvetica Neue", Arial, sans-serif;
- font-size: 13px;
- line-height: 20px;
- text-align: center;
-}
-
-a {
- color: #4c489e;
- text-decoration: none;
-}
-
-header {
- padding: 60px 0 30px 0;
-}
-
-nav a {
- color: rgba(0, 0, 0, 0.5);
- display: -moz-inline-box;
- -moz-box-orient: vertical;
- display: inline-block;
- vertical-align: middle;
- *vertical-align: auto;
- font-size: 11px;
- font-weight: bold;
- padding: 5px;
- text-transform: uppercase;
- -moz-transition: all 0.25s;
- -webkit-transition: all 0.25s;
- -o-transition: all 0.25s;
- transition: all 0.25s;
-}
-nav a {
- *display: inline;
-}
-nav a:hover {
- color: rgba(0, 0, 0, 0.75);
-}
-
-.videos li {
- margin-bottom: 30px;
-}
-.videos .thumbnail {
- display: block;
- margin-bottom: 10px;
- position: relative;
-}
-.videos .thumbnail:after {
- bottom: 0;
- -moz-box-shadow: rgba(255, 255, 255, 0.3) 0 0 0 1px inset;
- -webkit-box-shadow: rgba(255, 255, 255, 0.3) 0 0 0 1px inset;
- -o-box-shadow: rgba(255, 255, 255, 0.3) 0 0 0 1px inset;
- box-shadow: rgba(255, 255, 255, 0.3) 0 0 0 1px inset;
- content: " ";
- display: block;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
-}
-.videos img {
- -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
- -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
- -o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
- box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
- display: block;
- max-width: 100%;
-}
-
-footer {
- font-size: 90%;
-}
-footer p {
- margin: 1em 0;
-}
-
-@media screen and (min-width: 720px) {
- .videos li {
- display: inline;
- float: left;
- width: 45.833%;
- margin: 0 2.083%;
- margin-bottom: 30px;
- }
-}
-@media screen and (min-width: 1024px) {
- #wrapper {
- padding: 0 10%;
- margin: 0 auto;
- max-width: 1024px;
- }
-
- header {
- position: relative;
- }
-
- nav {
- padding: 65px 0;
- position: absolute;
- top: 0;
- width: 100%;
- }
- nav li {
- display: inline;
- float: left;
- width: 29.167%;
- margin: 0 2.083%;
- }
- nav .contact {
- margin-left: 35.417%;
- }
-
- .videos li {
- display: inline;
- float: left;
- width: 29.167%;
- margin: 0 2.083%;
- margin-bottom: 30px;
- position: relative;
- }
- .videos li:hover hgroup {
- opacity: 1;
- }
- .videos hgroup {
- line-height: 15px;
- position: absolute;
- opacity: 0;
- -moz-transition: all 0.25s;
- -webkit-transition: all 0.25s;
- -o-transition: all 0.25s;
- transition: all 0.25s;
- width: 100%;
- }
-
- #about, #contact {
- display: none;
- }
-
- footer {
- clear: both;
- padding: 60px 0;
- }
-
- /* fancyBox v2.0.5 fancyapps.com | fancyapps.com/fancybox/#license */
- .fancybox-tmp iframe, .fancybox-tmp object {
- vertical-align: top;
- padding: 0;
- margin: 0;
- }
-
- .fancybox-wrap {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1002;
- }
-
- .fancybox-outer {
- position: relative;
- padding: 0;
- margin: 0;
- background: #f9f9f9;
- color: #444;
- text-shadow: none;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- }
-
- .fancybox-opened {
- z-index: 1003;
- }
-
- .fancybox-opened .fancybox-outer {
- -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
- -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
- }
-
- .fancybox-inner {
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
- position: relative;
- outline: none;
- overflow: hidden;
- }
-
- .fancybox-error {
- color: #444;
- font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
- margin: 0;
- padding: 10px;
- }
-
- .fancybox-image, .fancybox-iframe {
- display: block;
- width: 100%;
- height: 100%;
- border: 0;
- padding: 0;
- margin: 0;
- vertical-align: top;
- }
-
- .fancybox-image {
- max-width: 100%;
- max-height: 100%;
- }
-
- #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
- background-image: url("/images/fancybox/fancybox_sprite.png");
- }
-
- #fancybox-loading {
- position: fixed;
- top: 50%;
- left: 50%;
- margin-top: -22px;
- margin-left: -22px;
- background-position: 0 -108px;
- opacity: 0.8;
- cursor: pointer;
- z-index: 1010;
- }
-
- #fancybox-loading div {
- width: 44px;
- height: 44px;
- background: url("/images/fancybox/fancybox_loading.gif") center center no-repeat;
- }
-
- .fancybox-close {
- position: absolute;
- top: -18px;
- right: -18px;
- width: 36px;
- height: 36px;
- cursor: pointer;
- z-index: 1004;
- }
-
- .fancybox-nav {
- position: absolute;
- top: 0;
- width: 40%;
- height: 100%;
- cursor: pointer;
- background: transparent url("/images/fancybox/blank.gif");
- /* helps IE */
- z-index: 1003;
- }
-
- .fancybox-prev {
- left: 0;
- }
-
- .fancybox-next {
- right: 0;
- }
-
- .fancybox-nav span {
- position: absolute;
- top: 50%;
- width: 36px;
- height: 36px;
- margin-top: -18px;
- cursor: pointer;
- z-index: 1003;
- visibility: hidden;
- }
-
- .fancybox-prev span {
- left: 20px;
- background-position: 0 -36px;
- }
-
- .fancybox-next span {
- right: 20px;
- background-position: 0 -72px;
- }
-
- .fancybox-nav:hover span {
- visibility: visible;
- }
-
- .fancybox-tmp {
- position: absolute;
- top: -9999px;
- left: -9999px;
- padding: 0;
- overflow: visible;
- visibility: hidden;
- }
-
- /* Overlay helper */
- #fancybox-overlay {
- position: absolute;
- top: 0;
- left: 0;
- overflow: hidden;
- display: none;
- z-index: 1001;
- background: #000;
- }
-
- /* Title helper */
- .fancybox-title {
- visibility: hidden;
- font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
- position: relative;
- text-shadow: none;
- z-index: 1005;
- }
-
- .fancybox-opened .fancybox-title {
- visibility: visible;
- }
-
- .fancybox-title-float-wrap {
- position: absolute;
- bottom: 0;
- right: 50%;
- margin-bottom: -35px;
- z-index: 1003;
- text-align: center;
- }
-
- .fancybox-title-float-wrap .child {
- display: inline-block;
- margin-right: -100%;
- padding: 2px 20px;
- background: transparent;
- /* Fallback for web browsers that doesn't support RGBa */
- background: rgba(0, 0, 0, 0.8);
- -webkit-border-radius: 15px;
- -moz-border-radius: 15px;
- border-radius: 15px;
- text-shadow: 0 1px 2px #222;
- color: #FFF;
- font-weight: bold;
- line-height: 24px;
- white-space: nowrap;
- }
-
- .fancybox-title-outside-wrap {
- position: relative;
- margin-top: 10px;
- color: #fff;
- }
-
- .fancybox-title-inside-wrap {
- margin-top: 10px;
- }
-
- .fancybox-title-over-wrap {
- position: absolute;
- bottom: 0;
- left: 0;
- color: #fff;
- padding: 10px;
- background: #000;
- background: rgba(0, 0, 0, 0.8);
- }
-
- .fancybox-outer {
- background: #000;
- }
-}
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}body{width:100%;*zoom:1}body:before,body:after{content:"";display:table}body:after{clear:both}h1{font-size:20px;line-height:20px;text-transform:uppercase}h1 strong{display:block;font-weight:bold}h2{clear:both;color:rgba(0,0,0,0.25);font-size:11px;font-weight:bold;padding:30px 0 60px 0;text-transform:uppercase}h3{color:#333;float:left;font-weight:bold}h4{color:#777;float:right}html,body{background:#fff}body{color:#444;font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;line-height:20px;text-align:center}a{color:#4c489e;text-decoration:none}header{padding:60px 0 30px 0}nav a{color:rgba(0,0,0,0.5);display:-moz-inline-box;-moz-box-orient:vertical;display:inline-block;vertical-align:middle;*vertical-align:auto;font-size:11px;font-weight:bold;padding:5px;text-transform:uppercase;-moz-transition:all 0.25s;-webkit-transition:all 0.25s;-o-transition:all 0.25s;transition:all 0.25s}nav a{*display:inline}nav a:hover{color:rgba(0,0,0,0.75)}.videos li{margin-bottom:30px}.videos .thumbnail{display:block;margin-bottom:10px;position:relative}.videos .thumbnail:after{bottom:0;-moz-box-shadow:rgba(255,255,255,0.3) 0 0 0 1px inset;-webkit-box-shadow:rgba(255,255,255,0.3) 0 0 0 1px inset;-o-box-shadow:rgba(255,255,255,0.3) 0 0 0 1px inset;box-shadow:rgba(255,255,255,0.3) 0 0 0 1px inset;content:" ";display:block;left:0;position:absolute;right:0;top:0}.videos img{-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.8);-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.8);-o-box-shadow:0px 1px 3px rgba(0,0,0,0.8);box-shadow:0px 1px 3px rgba(0,0,0,0.8);display:block;max-width:100%}footer{font-size:90%}footer p{margin:1em 0}@media screen and (min-width: 720px){.videos li{display:inline;float:left;width:45.833%;margin:0 2.083%;margin-bottom:30px}}@media screen and (min-width: 1024px){#wrapper{padding:0 10%;margin:0 auto;max-width:1024px}header{position:relative}nav{padding:65px 0;position:absolute;top:0;width:100%}nav li{display:inline;float:left;width:29.167%;margin:0 2.083%}nav .contact{margin-left:35.417%}.videos li{display:inline;float:left;width:29.167%;margin:0 2.083%;margin-bottom:30px;position:relative}.videos li:hover hgroup{opacity:1}.videos hgroup{line-height:15px;position:absolute;opacity:0;-moz-transition:all 0.25s;-webkit-transition:all 0.25s;-o-transition:all 0.25s;transition:all 0.25s;width:100%}#about,#contact{display:none}footer{clear:both;padding:60px 0}/* fancyBox v2.0.5 fancyapps.com | fancyapps.com/fancybox/#license */.fancybox-tmp iframe,.fancybox-tmp object{vertical-align:top;padding:0;margin:0}.fancybox-wrap{position:absolute;top:0;left:0;z-index:1002}.fancybox-outer{position:relative;padding:0;margin:0;background:#f9f9f9;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.fancybox-opened{z-index:1003}.fancybox-opened .fancybox-outer{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}.fancybox-inner{width:100%;height:100%;padding:0;margin:0;position:relative;outline:none;overflow:hidden}.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:10px}.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%;border:0;padding:0;margin:0;vertical-align:top}.fancybox-image{max-width:100%;max-height:100%}#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url("/images/fancybox/fancybox_sprite.png")}#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:0.8;cursor:pointer;z-index:1010}#fancybox-loading div{width:44px;height:44px;background:url("/images/fancybox/fancybox_loading.gif") center center no-repeat}.fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:1004}.fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;background:transparent url("/images/fancybox/blank.gif");z-index:1003}.fancybox-prev{left:0}.fancybox-next{right:0}.fancybox-nav span{position:absolute;top:50%;width:36px;height:36px;margin-top:-18px;cursor:pointer;z-index:1003;visibility:hidden}.fancybox-prev span{left:20px;background-position:0 -36px}.fancybox-next span{right:20px;background-position:0 -72px}.fancybox-nav:hover span{visibility:visible}.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;padding:0;overflow:visible;visibility:hidden}#fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:1001;background:#000}.fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:1005}.fancybox-opened .fancybox-title{visibility:visible}.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:1003;text-align:center}.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;padding:2px 20px;background:transparent;background:rgba(0,0,0,0.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#FFF;font-weight:bold;line-height:24px;white-space:nowrap}.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}.fancybox-title-inside-wrap{margin-top:10px}.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;padding:10px;background:#000;background:rgba(0,0,0,0.8)}.fancybox-outer{background:#000}}
View
5 stylesheets/framework/_defaults.scss
@@ -19,8 +19,9 @@ $default-border-radius: 4px;
// box-shadow
-$default-box-shadow-color: rgba(0, 0, 0, .6);
-$default-box-shadow-v-offset: 2px;
+$default-box-shadow-color: rgba(0, 0, 0, .8);
+$default-box-shadow-v-offset: 1px;
+$default-box-shadow-blur: 3px;
// colors
View
18 views/index.html.erb
@@ -2,17 +2,17 @@
<h2>Music Videos</h2>
<ul>
<li>
- <a class="thumbnail image" rel="music" href="/images/thumbnail.jpg">
- <img src="http://placehold.it/720x405/333/fff&amp;text=Thumbnail" alt="Thumbnail" />
+ <a class="thumbnail video fancybox.iframe" rel="commercial" href="http://player.vimeo.com/video/38591304?title=0&amp;byline=0&amp;portrait=0&amp;color=136485" title="Caption">
+ <img src="http://placehold.it/720x405/aaa/fff&amp;text=Video" alt="Video thumbnail" />
</a>
<hgroup>
- <h3>Into the Spin</h3>
- <h4>Dessa</h4>
+ <h3>Testing a Vimeo Video</h3>
+ <h4>Client Name</h4>
</hgroup>
</li>
<li>
<a class="thumbnail image" rel="music" href="/images/thumbnail.jpg">
- <img src="http://placehold.it/720x405/333/fff&amp;text=Thumbnail" alt="Thumbnail" />
+ <img src="/images/thumbnail.jpg" alt="Into the Spin thumbnail" />
</a>
<hgroup>
<h3>Into the Spin</h3>
@@ -21,7 +21,7 @@
</li>
<li>
<a class="thumbnail image" rel="music" href="/images/thumbnail.jpg">
- <img src="http://placehold.it/720x405/333/fff&amp;text=Thumbnail" alt="Thumbnail" />
+ <img src="/images/thumbnail.jpg" alt="Into the Spin thumbnail" />
</a>
<hgroup>
<h3>Into the Spin</h3>
@@ -30,7 +30,7 @@
</li>
<li>
<a class="thumbnail image" rel="music" href="/images/thumbnail.jpg">
- <img src="http://placehold.it/720x405/333/fff&amp;text=Thumbnail" alt="Thumbnail" />
+ <img src="/images/thumbnail.jpg" alt="Into the Spin thumbnail" />
</a>
<hgroup>
<h3>Into the Spin</h3>
@@ -39,7 +39,7 @@
</li>
<li>
<a class="thumbnail image" rel="music" href="/images/thumbnail.jpg">
- <img src="http://placehold.it/720x405/333/fff&amp;text=Thumbnail" alt="Thumbnail" />
+ <img src="/images/thumbnail.jpg" alt="Into the Spin thumbnail" />
</a>
<hgroup>
<h3>Into the Spin</h3>
@@ -48,7 +48,7 @@
</li>
<li>
<a class="thumbnail image" rel="music" href="/images/thumbnail.jpg">
- <img src="http://placehold.it/720x405/333/fff&amp;text=Thumbnail" alt="Thumbnail" />
+ <img src="/images/thumbnail.jpg" alt="Into the Spin thumbnail" />
</a>
<hgroup>
<h3>Into the Spin</h3>

0 comments on commit 069284d

Please sign in to comment.
Something went wrong with that request. Please try again.