/* ======================================================================================================== ---{ Project: TedGrafx.com One-Page ---{ Version: DEV ---{ Date: 04/2013 ---{ Author: Ted Graf ---{ Email: tedgrafx@gmail.com ---{ Last Modified: Ted Graf [ 04/05/2013 ] ---{ Copyright: 2013 TedGrafx ---{ Icons: Somacro via Deviant Art - http://vervex.deviantart.com/art/Somacro-32-300DPI-Social-Media-Icons-267955425 =========================================================================================================== */ /* === Resets: ============================================================================================ =========================================================================================================== */ html, body, table, tr, td, a, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, hr { font:400 100%/1.7 "minion-pro-1", "minion-pro-2", Georgia, Verdana, san-serif; margin:0; pading:0; } abbr, acronym { border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:inherit; cursor: help; } /* maxvoltar.com/archive/-webkit-font-smoothing */ html, a { -webkit-font-smoothing: antialiased; } /* === Overall font-size can be reduced or increased by modifying the value here: ========================= =========================================================================================================== */ html, body { background:rgba(46, 76, 112, 1) url(../images/bg-blue-noise.jpg) repeat left top; color:rgba(255, 255, 255, 0.7); letter-spacing:0.1em; text-align:center; width:100%; } a, a:link { border-bottom:1px solid rgba(255, 255, 255, 0.7); color:rgba(255, 255, 255, 0.7); font:700 95%/1.7 "minion-pro-1", "minion-pro-2"; text-decoration:none; } a:hover, a:active { border-bottom:1px solid rgba(255, 255, 255, 1); color:rgba(255, 255, 255, 1); } section h6 { display:none; } /* === Modal: ========================= =========================================================================================================== */ .modalDialog { position: absolute; color: #000; top: 0; right: 0; bottom: 0; left: 0; /* background: rgba(0,0,0,0.8); */ z-index: 99999; opacity:0; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { /* width: 400px; */ display:inline-block; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; /* border-radius: 10px; */ background: #fff; -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.8); -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.8); box-shadow: 0px 0px 20px rgba(0,0,0,0.8); } .close { /* background: #606061; */ color: #000; /* line-height: 25px; */ /* float: right; */ display:block; /* margin-bottom:1em; */ /* right: -12px; text-align: center; top: -10px; width: 24px; */ /* text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; */ } .close:hover { color:#454545; } /* === Meat And Potatoes: ================================================================================= =========================================================================================================== */ header { border-bottom:1px solid rgba(24, 47, 75, 1); margin:2em 2em 0 2em; } h1 { color:rgba(255, 255, 255, 0.7); font:400 1000%/1 "bebas-neue-1", "bebas-neue-2"; padding:0; } h2 { color:rgba(255, 255, 255, 1); font:400 200%/1.4 "crete-rounded-web-1", "crete-rounded-web-2"; margin-bottom:1em; } header h1 { border-bottom:1px solid rgba(24, 47, 75, 1); *letter-spacing:0; } header h2 { border-top:1px solid rgba(65, 99, 139, 1); margin-bottom:0.2em; } header img { border:6px solid rgba(255, 255, 255, 0.7); -webkit-border-radius:55px; border-radius:55px; height:103px; margin:0; vertical-align:middle; width:103px; } header #nav a.active { transition:scroll 2s ease-out 0s; -webkit-transition:scroll 2s ease-out 0s; /* Safari and Chrome */ } #content { margin:0 2em; } #work, #workexample, #print, #contact, #about { border-bottom:1px solid rgba(24, 47, 75, 1); border-top:1px solid rgba(65, 99, 139, 1); clear:both; overflow:hidden; padding:2em 0 5em; } h2 em { } .hashtag { color:rgba(255,255,255,1); } #workexample { border-bottom:0; } #workexample img { border:6px solid rgba(24, 47, 75, 1); display:inline-block; height:125px; width:225px; } p { margin-bottom:15px; } p em { font-weight:bold; } #work ul { display:table; margin:0 auto; max-width:78%; overflow:hidden; padding:0; text-align:center; width:100%; } #work ul ul { max-width:100%; } #work ul li { display:inline-block; list-style:none; margin:0 2em 3em; /* min-width:230px; width:230px; */ max-width:230px; vertical-align:top; } #work ul li:hover { color:rgba(255, 255, 255, 1); cursor:default; } #work ul li.first { } #work ul li.mid { margin:0 50px; } #work ul li.last { } #work a, #work a:link, #print a, #print a:link{ border:6px solid rgba(24, 47, 75, 1); display:inline-block; overflow:auto; text-decoration:none; } #work a:hover, #work a:active, #print a:hover, #print a:active { border:6px solid rgba(255, 255, 255, 0.5); text-decoration:none; } #work p a, #work p a:link, #print p a, #print p a:link { border:0; border-bottom:1px solid rgba(255, 255, 255, 0.7); color:rgba(255, 255, 255, 0.7); display:inline; } #work p a:hover, #work p a:active, #print p a:hover, #print p a:active { border:0; border-bottom:1px solid rgba(255, 255, 255, 1); color:rgba(255, 255, 255, 1); } #work ul li img, #print ul li img{ float:left; height:125px; width:225px; } #work ul li h3, #work ul li h4 { color:rgba(255, 255, 255, 1); font-weight:700; margin-bottom:0.1em; margin-left:5px; text-align:left; } #work ul li h4 { color:rgba(255, 255, 255, 0.9); font-size:90%; } #work ul li p, #work ul ul{ letter-spacing:0; line-height:1.3; margin-left:5px; padding:0; text-align:left; } #work ul ul li{ margin:0; padding-right:1em; } #work ul li p:hover { } #print ul { display:table; overflow:hidden; padding:0; text-align:center; width:100%; } #print ul li { display:inline-block; list-style:none; margin:0 20px; min-width:230px; width:230px; max-width:230px; vertical-align:top; } #print ul li:hover { color:rgba(255, 255, 255, 1); cursor:default; } #contact ul { display:table; line-height:4.5; overflow:hidden; padding:0; text-align:center; width:100%; } #contact ul li { display:inline-block; height:56px; margin:0 5px; text-indent:-999em; width:56px; vertical-align:middle; } #contact a, #contact a:link { border:0; display:block; height:56px; overflow:auto; text-decoration:none; width:56px; } #contact li.amazon a, #contact li.amazon a:link { background:url(/images/social_amazon.png) 50% 0 no-repeat; } #contact li.amazon a:hover, #contact li.amazon a:active { background-position:50% -56px; } #contact li.email a, #contact li.email a:link { background:url(/images/social_email.png) 50% 0 no-repeat; } #contact li.email a:hover, #contact li.email a:active { background-position:50% -56px; } #contact li.facebook a, #contact li.facebook a:link { background:url(/images/social_facebook.png) 50% 0 no-repeat; } #contact li.facebook a:hover, #contact li.facebook a:active { background-position:50% -56px; } #contact li.foursquare a, #contact li.foursquare a:link { background:url(/images/social_foursquare.png) 50% 0 no-repeat; } #contact li.foursquare a:hover, #contact li.foursquare a:active { background-position:50% -56px; } #contact li.google a, #contact li.google a:link { background:url(/images/social_google.png) 50% 0 no-repeat; } #contact li.google a:hover, #contact li.google a:active { background-position:50% -56px; } #contact li.instagram a, #contact li.instagram a:link { background:url(/images/social_instagram.png) 50% 0 no-repeat; } #contact li.instagram a:hover, #contact li.instagram a:active { background-position:50% -56px; } #contact li.klout a, #contact li.klout a:link { background:url(/images/social_klout.png) 50% 0 no-repeat; } #contact li.klout a:hover, #contact li.klout a:active { background-position:50% -56px; } #contact li.lastfm a, #contact li.lastfm a:link { background:url(/images/social_lastfm.png) 50% 0 no-repeat; } #contact li.lastfm a:hover, #contact li.lastfm a:active { background-position:50% -56px; } #contact li.linkedin a, #contact li.linkedin a:link { background:url(/images/social_linkedin.png) 50% 0 no-repeat; } #contact li.linkedin a:hover, #contact li.linkedin a:active { background-position:50% -56px; } #contact li.pinterest a, #contact li.pinterest a:link { background:url(/images/social_pinterest.png) 50% 0 no-repeat; } #contact li.pinterest a:hover, #contact li.pinterest a:active { background-position:50% -56px; } #contact li.spotify a, #contact li.spotify a:link { background:url(/images/social_spotify.png) 50% 0 no-repeat; } #contact li.spotify a:hover, #contact li.spotify a:active { background-position:50% -56px; } #contact li.tumblr a, #contact li.tumblr a:link { background:url(/images/social_tumblr.png) 50% 0 no-repeat; } #contact li.tumblr a:hover, #contact li.tumblr a:active { background-position:50% -56px; } #contact li.twitter a, #contact li.twitter a:link { background:url(/images/social_twitter.png) 50% 0 no-repeat; } #contact li.twitter a:hover, #contact li.twitter a:active { background-position:50% -56px; } #contact li.youtube a, #contact li.youtube a:link { background:url(/images/social_youtube.png) 50% 0 no-repeat; } #contact li.youtube a:hover, #contact li.youtube a:active { background-position:50% -56px; } #about { padding:2em 10em 5em; } #about p { margin:0 auto 2em; max-width:960px; } /* === Standard Devices Less than or equal to 480px: ======================================================== =========================================================================================================== */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { #content { margin:0; } header { margin:2em 0 0; } header h1 { font-size:700%; line-height:0.8; } header img { display:none; } #work, #print, #contact, #about { padding:2em 0 5em; } h2 em { display:none; } #work ul { display:table; } #work ul li.mid { margin:0 0 1em; } #work ul li { display:inline-block; margin:0 0 1em; } #work ul li p { font-size:100%; line-height:1.3; padding:0 0.5em; } #about p { margin:0 1em 2em; text-align:left; } } /* === Retina Devices Less than or equal to 480px: ======================================================== =========================================================================================================== */ @media only screen and (max-width: 480px), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) { #content { margin:0; } header { border-bottom:2px solid rgba(24, 47, 75, 1); margin:2em 0 0; } header h1 { border-bottom:2px solid rgba(24, 47, 75, 1); font-size:700%; line-height:0.8; } header h2 { border-top:2px solid rgba(65, 99, 139, 1); } header img { display:none; } #work, #print, #contact, #about { border-bottom:2px solid rgba(24, 47, 75, 1); border-top:2px solid rgba(65, 99, 139, 1); padding:2em 0 5em; width:100%; } #work h2, #contact h2, #about h2 { font-size:300%; } h2 em { display:none; } #work ul { display:table; } #work ul li.mid { margin:0 0 1em; } #work ul li { display:inline-block; margin:0 0 1em; width:100%; } #work ul li p { font-size:100%; line-height:1.3; padding:0 0.5em; } #contact ul { line-height:9; } #contact ul li { display:inline-block; height:112px; margin:0 5px; text-indent:-999em; width:112px; vertical-align:middle; } #contact a, #contact a:link { border:0; display:block; height:112px; overflow:auto; text-decoration:none; width:112px; } #contact li.twitter a, #contact li.twitter a:link { background:url(/images/social_twitter@2x.png) 50% -112px no-repeat; } #contact li.facebook a, #contact li.facebook a:link { background:url(/images/social_facebook@2x.png) 50% -112px no-repeat; } #contact li.google a, #contact li.google a:link { background:url(/images/social_google@2x.png) 50% -112px no-repeat; } #contact li.instagram a, #contact li.instagram a:link { background:url(/images/social_instagram@2x.png) 50% -112px no-repeat; } #contact li.email a, #contact li.email a:link { background:url(/images/social_email@2x.png) 50% -112px no-repeat; } #contact li.linkedin a, #contact li.linkedin a:link { background:url(/images/social_linkedin@2x.png) 50% -112px no-repeat; } #contact li.foursquare a, #contact li.foursquare a:link { background:url(/images/social_foursquare@2x.png) 50% -112px no-repeat; } #contact li.klout a, #contact li.klout a:link { background:url(/images/social_klout@2x.png) 50% -112px no-repeat; } #contact li.pinterest a, #contact li.pinterest a:link { background:url(/images/social_pinterest@2x.png) 50% -112px no-repeat; } #contact li.spotify a, #contact li.spotify a:link { background:url(/images/social_spotify@2x.png) 50% -112px no-repeat; } #contact li.lastfm a, #contact li.lastfm a:link { background:url(/images/social_lastfm@2x.png) 50% -112px no-repeat; } #contact li.youtube a, #contact li.youtube a:link { background:url(/images/social_youtube@2x.png) 50% -112px no-repeat; } #contact li.tumblr a, #contact li.tumblr a:link { background:url(/images/social_tumblr@2x.png) 50% -112px no-repeat; } #contact li.amazon a, #contact li.amazon a:link { background:url(/images/social_amazon@2x.png) 50% -112px no-repeat; } #about p { margin:0 1em 2em; text-align:left; } } /* === Retina Devices Less than or equal to 980px: ======================================================== =========================================================================================================== */ @media only screen and (max-width: 980px), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) { header h1 { color:rgba(255, 255, 255, 0.7); font:400 700%/1.1 "bebas-neue-1", "bebas-neue-2"; padding:0.1em 0; } #about { padding:2em 2em 5em; } #work ul { display:table; } #work ul li { display:inline-block; margin-bottom:1em; } }