Commit d4f01075 authored by sbiego's avatar sbiego

beautyfied css and html, added chrome mobile bar color support

parent 0173eef2
This diff is collapsed.
This diff is collapsed.
......@@ -21,225 +21,298 @@
transparent)
}
*/
/*::-webkit-scrollbar {
display: none;
}*/
@keyframes lightup {
0% {opacity: 0; /*height: 20%;*/}
2% {opacity: 0.8;}
8% {opacity: 0.2;}
15% {opacity: 0.9; /*height: 100%;*/}
90% {opacity: 1;}
94% {opacity: 0.7;}
98% {opacity: 0.9;}
100% {opacity: 0.1;}
0% {
opacity: 0;
/*height: 20%;*/
}
2% {
opacity: 0.8;
}
8% {
opacity: 0.2;
}
15% {
opacity: 0.9;
/*height: 100%;*/
}
90% {
opacity: 1;
}
94% {
opacity: 0.7;
}
98% {
opacity: 0.9;
}
100% {
opacity: 0.1;
}
}
@keyframes glow {
0% {/*text-shadow: 0 0 0px rgba(255,255,255, 0);*/
box-shadow: 5px 5px 2px #e22d5d}
50% {/*text-shadow: 0 0 20px rgba(255,255,255, 1);*/
box-shadow: 5px 5px 100px 10px #e22d5d}
100% {/*text-shadow: 0 0 0px rgba(255,255,255, 0);*/
box-shadow: 5px 5px 2px #e22d5d}
0% {
/*text-shadow: 0 0 0px rgba(255,255,255, 0);*/
box-shadow: 5px 5px 2px #e22d5d
}
50% {
/*text-shadow: 0 0 20px rgba(255,255,255, 1);*/
box-shadow: 5px 5px 100px 10px #e22d5d
}
100% {
/*text-shadow: 0 0 0px rgba(255,255,255, 0);*/
box-shadow: 5px 5px 2px #e22d5d
}
}
@keyframes rot {
0% {transform: rotate(10deg);}
50% {transform: rotate(-10deg);}
100%{transform: rotate(0deg);}
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes wobbly {
0% {transform: translate(0,0);}
4% {transform: translate(0,12px);}
6% {transform: translate(0,-8px);}
8% {transform: translate(0,7px);}
10% {transform: translate(0,-5px);}
12% {transform: translate(0,0px);}
100%{transform: translate(0,0px);}
0% {
transform: translate(0, 0);
}
4% {
transform: translate(0, 12px);
}
6% {
transform: translate(0, -8px);
}
8% {
transform: translate(0, 7px);
}
10% {
transform: translate(0, -5px);
}
12% {
transform: translate(0, 0px);
}
100% {
transform: translate(0, 0px);
}
}
@keyframes slidein {
0% {top: -100%; opacity: 0;}
50% {top: -100%; opacity: 0:}
70% {opacity: 0;}
100% {top: 0; opacity: 1;}
0% {
top: -100%;
opacity: 0;
}
50% {
top: -100%;
opacity: 0:
}
70% {
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
@keyframes slideout {
0% {top: 0; opacity: 1;}
50% {top: 0; opacity: 1:}
70% {opacity: 1;}
100% {top: 100%; opacity: 0;}
0% {
top: 0;
opacity: 1;
}
50% {
top: 0;
opacity: 1:
}
70% {
opacity: 1;
}
100% {
top: 100%;
opacity: 0;
}
}
#nextsection {
animation: glow 3s infinite;
animation: glow 3s infinite;
}
#logo_svg {
position: relative;
bottom: -100%;
/*animation: glow 3s ease infinite;*/
/*animation: rot 3s ease infinite alternate;*/
animation: wobbly 4.2s 6;
position: relative;
bottom: -100%;
/*animation: glow 3s ease infinite;*/
/*animation: rot 3s ease infinite alternate;*/
animation: wobbly 4.2s 6;
}
#home-slider .control-nav, #home-slider #nextslide, #home-slider #prevslide, #home-slider #nextsection, #back-to-top {
background: rgba(0,0,0,0.5);
background: rgba(0, 0, 0, 0.5);
}
header .sticky-nav {
background: rgba(0,0,0,0.942);
background: rgba(0, 0, 0, 0.942);
}
body {
overflow-x: hidden;
overflow-x: hidden;
}
.page, footer {
background: #111;
background-image: url('img/texture.png');
text-shadow: 0 1px 10px #000;
color: #bbb;
/*border-top: 3px dashed rgba(50, 50, 50, 0.3);*/
border-top: 3px solid rgba(0,0,0,.6);
background: #111;
background-image: url('img/texture.png');
text-shadow: 0 1px 10px #000;
color: #bbb;
/*border-top: 3px dashed rgba(50, 50, 50, 0.3);*/
border-top: 3px solid rgba(0, 0, 0, .6);
}
.page-alternate {
background: #111;
/*background-image: url('../../img/texture_alternate.png');*/
/*box-shadow: 0 2px 30px 0px #000 inset;*/
/*border-top: 3px dashed rgba(0, 0, 0, 0.4);*/
border-top: 3px solid rgba(0,0,0,.5);
/*text-shadow: 0 1px 14px #000;*/
color: #bbb;
background: #111;
/*background-image: url('../../img/texture_alternate.png');*/
/*box-shadow: 0 2px 30px 0px #000 inset;*/
/*border-top: 3px dashed rgba(0, 0, 0, 0.4);*/
border-top: 3px solid rgba(0, 0, 0, .5);
/*text-shadow: 0 1px 14px #000;*/
color: #bbb;
}
.alert-slide {
background-color: rgba(0, 0, 0, 0.5);
animation: slidein 1.5s ease;
padding-right: 40px;
right: 0;
left: 0;
position: absolute;
color: #fff;
z-index: 1999;
background: linear-gradient( 0deg, rgba(0,0,0,0), rgba(0,0,0,0.5) );
text-shadow: 0 2px 3px rgba(0,0,0,0.6);
background-color: rgba(0, 0, 0, 0.5);
animation: slidein 1.5s ease;
padding-right: 40px;
right: 0;
left: 0;
position: absolute;
color: #fff;
z-index: 1999;
background: linear-gradient( 0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}
#navigation-mobile, #navigation-mobile ul li {
background: rgba(0, 0, 0, 0.9);
border: none;
background: rgba(0, 0, 0, 0.9);
border: none;
}
#fullscreen-button {
float: right;
position: fixed;
top: 0;
right: 0;
width: 50px;
height: 40px;
padding-top: 18px;
z-index: 2000;
text-align: center;
font-size: 18px;
color: #bbb;
color: rgba(255,255,255,0.4);
transform: rotate(90deg);
float: right;
position: fixed;
top: 0;
right: 0;
width: 50px;
height: 40px;
padding-top: 18px;
z-index: 2000;
text-align: center;
font-size: 18px;
color: #bbb;
color: rgba(255, 255, 255, 0.4);
transform: rotate(90deg);
}
#fullscreen-button:hover {
color: #FFFFFF;
color: #FFFFFF;
}
/* remove fullscreen-button and fullscreen-alert in mobile */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx),
screen and (max-width: 981px) {
#fullscreen-button, #fullscreen-alert {
display: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), screen and (max-width: 981px) {
#fullscreen-button, #fullscreen-alert {
display: none;
}
}
#social ul li a {
background: none;
background: none;
}
.item-thumbs {
box-shadow: none;
box-shadow: none;
}
.item-thumbs span {
text-shadow: none;
text-shadow: none;
}
nav {
text-shadow: none;
text-shadow: none;
}
.fancybox-skin {
background-color: #111;
background-color: #111;
}
#home-slider .overlay{
opacity: 0.3;
#home-slider .overlay {
opacity: 0.3;
}
.item-thumbs .hover-wrap .overlay-img, .accordion-heading:hover .accordion-toggle, .accordion-heading:hover .accordion-toggle.inactive, .button:hover, .button:active, .button:focus, #home-slider #nextslide:hover, #home-slider #prevslide:hover, #home-slider #nextsection:hover, #back-to-top:hover, #home-slider ul#slide-list li.current-slide a, #home-slider ul #slide-list li.current-slide a:hover, #social ul li a:hover, .fancybox-next span:hover, .fancybox-prev span:hover, .fancybox-close:hover {
background-color: #e22d5d;
.item-thumbs .hover-wrap .overlay-img, .accordion-heading:hover .accordion-toggle, .accordion-heading:hover .accordion-toggle.inactive, .button:hover, .button:active, .button:focus, #home-slider #nextslide:hover, #home-slider #prevslide:hover, #home-slider #nextsection:hover, #back-to-top:hover, #home-slider ul#slide-list li.current-slide a, #home-slider ul #slide-list li.current-slide a:hover, #social ul li a:hover, .fancybox-next span:hover, .fancybox-prev span:hover, .fancybox-close:hover {
background-color: #e22d5d;
}
.work-nav #filters li a.selected, a, nav#menu #menu-nav li.current a, nav#menu #menu-nav li a:hover {
color: #e22d5d;
color: #e22d5d;
}
blockquote {
border-left-color: #e22d5d;
border-left-color: #e22d5d;
}
.title-page .title-description {
font-size: 15pt;
color: #ffffff;
font-size: 15pt;
color: #ffffff;
}
/* thumbnails fix */
.item-thumbs a + img {
width: 200px;
height: auto;
.item-thumbs a+img {
width: 200px;
height: auto;
}
.item-thumbs.span3 {
margin: 2.7%;
width: 200px;
border-radius: 3px;
box-shadow: 0 2px 30px #000;
/*border: 6px solid #fff;*/
transition: all 0.5s;
margin: 2.7%;
width: 200px;
border-radius: 3px;
box-shadow: 0 2px 30px #000;
/*border: 6px solid #fff;*/
transition: all 0.5s;
}
.item-thumbs .hover-wrap .overlay-img {
background-color: black;
background-color: black;
}
[class*="span"] {
margin: 0;
margin: 0;
}
.fancybox-nav span, .fancybox-item.fancybox-close span{
width: 38px;
height: 38px;
/*padding: 5px 0 4px 0;*/
background-color: rgba(0, 0, 0, 0.5);
opacity: .8;
.fancybox-nav span, .fancybox-item.fancybox-close span {
width: 38px;
height: 38px;
/*padding: 5px 0 4px 0;*/
background-color: rgba(0, 0, 0, 0.5);
opacity: .8;
}
.fancybox-item.fancybox-close {
width: 38px;
height: 38px;
width: 38px;
height: 38px;
}
/*
.fancybox-opened .fancybox-title h4, .button_title h4 {
background-color: #111;
......
@keyframes lightup{0%{opacity:0}2%{opacity:.8}8%{opacity:.2}15%{opacity:.9}90%{opacity:1}94%{opacity:.7}98%{opacity:.9}100%{opacity:.1}}@keyframes glow{0%{box-shadow:5px 5px 2px #e22d5d}50%{box-shadow:5px 5px 100px 10px #e22d5d}100%{box-shadow:5px 5px 2px #e22d5d}}@keyframes rot{0%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}100%{transform:rotate(0deg)}}@keyframes wobbly{0%{transform:translate(0,0)}4%{transform:translate(0,12px)}6%{transform:translate(0,-8px)}8%{transform:translate(0,7px)}10%{transform:translate(0,-5px)}12%{transform:translate(0,0px)}100%{transform:translate(0,0px)}}@keyframes slidein{0%{top:-100%;opacity:0}50%{top:-100%;opacity:0:}70%{opacity:0}100%{top:0;opacity:1}}@keyframes slideout{0%{top:0;opacity:1}50%{top:0;opacity:1:}70%{opacity:1}100%{top:100%;opacity:0}}#nextsection{animation:glow 3s infinite}#logo_svg{position:relative;bottom:-100%;animation:wobbly 4.2s 6}#home-slider .control-nav,#home-slider #nextslide,#home-slider #prevslide,#home-slider #nextsection,#back-to-top{background:rgba(0,0,0,0.5)}header .sticky-nav{background:rgba(0,0,0,0.942)}body{overflow-x:hidden}.page,footer{background:#111;background-image:url('img/texture.png');text-shadow:0 1px 10px #000;color:#bbb;border-top:3px solid rgba(0,0,0,.6)}.page-alternate{background:#111;border-top:3px solid rgba(0,0,0,.5);color:#bbb}.alert-slide{background-color:rgba(0,0,0,0.5);animation:slidein 1.5s ease;padding-right:40px;right:0;left:0;position:absolute;color:#fff;z-index:1999;background:linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0.5));text-shadow:0 2px 3px rgba(0,0,0,0.6)}#navigation-mobile,#navigation-mobile ul li{background:rgba(0,0,0,0.9);border:0}#fullscreen-button{float:right;position:fixed;top:0;right:0;width:50px;height:40px;padding-top:18px;z-index:2000;text-align:center;font-size:18px;color:#bbb;color:rgba(255,255,255,0.4);transform:rotate(90deg)}#fullscreen-button:hover{color:#fff}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (-moz-min-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:2dppx),screen and (max-width:981px){#fullscreen-button,#fullscreen-alert{display:none}}#social ul li a{background:0}.item-thumbs{box-shadow:none}.item-thumbs span{text-shadow:none}nav{text-shadow:none}.fancybox-skin{background-color:#111}#home-slider .overlay{opacity:.3}.item-thumbs .hover-wrap .overlay-img,.accordion-heading:hover .accordion-toggle,.accordion-heading:hover .accordion-toggle.inactive,.button:hover,.button:active,.button:focus,#home-slider #nextslide:hover,#home-slider #prevslide:hover,#home-slider #nextsection:hover,#back-to-top:hover,#home-slider ul#slide-list li.current-slide a,#home-slider ul #slide-list li.current-slide a:hover,#social ul li a:hover,.fancybox-next span:hover,.fancybox-prev span:hover,.fancybox-close:hover{background-color:#e22d5d}.work-nav #filters li a.selected,a,nav#menu #menu-nav li.current a,nav#menu #menu-nav li a:hover{color:#e22d5d}blockquote{border-left-color:#e22d5d}.title-page .title-description{font-size:15pt;color:#fff}.item-thumbs a+img{width:200px;height:auto}.item-thumbs.span3{margin:2.7%;width:200px;border-radius:3px;box-shadow:0 2px 30px #000;transition:all .5s}.item-thumbs .hover-wrap .overlay-img{background-color:black}[class*="span"]{margin:0}.fancybox-nav span,.fancybox-item.fancybox-close span{width:38px;height:38px;background-color:rgba(0,0,0,0.5);opacity:.8}.fancybox-item.fancybox-close{width:38px;height:38px}
\ No newline at end of file
@keyframes lightup{0%{opacity:0}2%{opacity:.8}8%{opacity:.2}15%,98%{opacity:.9}90%{opacity:1}94%{opacity:.7}100%{opacity:.1}}@keyframes glow{0%,100%{box-shadow:5px 5px 2px #e22d5d}50%{box-shadow:5px 5px 100px 10px #e22d5d}}@keyframes rot{0%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}100%{transform:rotate(0)}}@keyframes wobbly{0%,100%,12%{transform:translate(0,0)}4%{transform:translate(0,12px)}6%{transform:translate(0,-8px)}8%{transform:translate(0,7px)}10%{transform:translate(0,-5px)}}@keyframes slidein{0%{top:-100%;opacity:0}50%{top:-100%;opacity:0:}70%{opacity:0}100%{top:0;opacity:1}}@keyframes slideout{0%{top:0;opacity:1}50%{top:0;opacity:1:}70%{opacity:1}100%{top:100%;opacity:0}}#nextsection{animation:glow 3s infinite}#logo_svg{position:relative;bottom:-100%;animation:wobbly 4.2s 6}#back-to-top,#home-slider #nextsection,#home-slider #nextslide,#home-slider #prevslide,#home-slider .control-nav{background:rgba(0,0,0,.5)}header .sticky-nav{background:rgba(0,0,0,.942)}body{overflow-x:hidden}.page,footer{background:url(img/texture.png) #111;text-shadow:0 1px 10px #000;color:#bbb;border-top:3px solid rgba(0,0,0,.6)}.page-alternate{background:#111;border-top:3px solid rgba(0,0,0,.5);color:#bbb}.alert-slide{animation:slidein 1.5s ease;padding-right:40px;right:0;left:0;position:absolute;color:#fff;z-index:1999;background:linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,.5));text-shadow:0 2px 3px rgba(0,0,0,.6)}#navigation-mobile,#navigation-mobile ul li{background:rgba(0,0,0,.9);border:none}#fullscreen-button{float:right;position:fixed;top:0;right:0;width:50px;height:40px;padding-top:18px;z-index:2000;text-align:center;font-size:18px;color:#bbb;color:rgba(255,255,255,.4);transform:rotate(90deg)}#fullscreen-button:hover{color:#FFF}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (-moz-min-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:2dppx),screen and (max-width:981px){#fullscreen-alert,#fullscreen-button{display:none}}#social ul li a{background:0 0}.item-thumbs{box-shadow:none}.item-thumbs span,nav{text-shadow:none}.fancybox-skin{background-color:#111}#home-slider .overlay{opacity:.3}#back-to-top:hover,#home-slider #nextsection:hover,#home-slider #nextslide:hover,#home-slider #prevslide:hover,#home-slider ul #slide-list li.current-slide a:hover,#home-slider ul#slide-list li.current-slide a,#social ul li a:hover,.accordion-heading:hover .accordion-toggle,.accordion-heading:hover .accordion-toggle.inactive,.button:active,.button:focus,.button:hover,.fancybox-close:hover,.fancybox-next span:hover,.fancybox-prev span:hover,.item-thumbs .hover-wrap .overlay-img{background-color:#e22d5d}.work-nav #filters li a.selected,a,nav#menu #menu-nav li a:hover,nav#menu #menu-nav li.current a{color:#e22d5d}blockquote{border-left-color:#e22d5d}.title-page .title-description{font-size:15pt;color:#fff}.item-thumbs a+img{width:200px;height:auto}.item-thumbs.span3{margin:2.7%;width:200px;border-radius:3px;box-shadow:0 2px 30px #000;transition:all .5s}.item-thumbs .hover-wrap .overlay-img{background-color:#000}[class*=span]{margin:0}.fancybox-item.fancybox-close span,.fancybox-nav span{width:38px;height:38px;background-color:rgba(0,0,0,.5);opacity:.8}.fancybox-item.fancybox-close{width:38px;height:38px}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment