Commit 6575d52a authored by sbiego's avatar sbiego

better working - not fully - full screen responsive button with a notification...

better working - not fully - full screen responsive button with a notification alert, changed colors and textures to page and added some shadows.
parent 33d75666
/*.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
#scroll::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
*/
::-webkit-scrollbar, ::-moz-scrollbar {
display: none;
}
@keyframes glow {
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 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% {left: -100%; opacity: 0;}
50% {left: -100%; opacity: 0:}
70% {opacity: 0;}
100% {left: 0; opacity: 1;}
}
#logo_svg {
/*animation: glow 3s ease infinite;*/
/*animation: rot 3s ease infinite alternate;*/
animation: wobbly 4.2s ease-in 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);
}
.page, footer {
background: #090909;
background-image: url('../../img/texture.png');
text-shadow: 0 1px 7px #000;
color: #fff;
}
.page-alternate {
background: #111;
background-image: url('../../img/texture_alternate.png');
box-shadow: 0 0 50px 0px #000 inset;
border-top: 4px solid #000;
border-bottom: 4px solid #000;
text-shadow: 0 1px 14px #000;
color: #fff;
}
.alert {
right: 50px;
left: 0;
position: fixed;
color: #fff;
z-index: 10000;
}
.alert-slide {
background-color: rgba(0, 0, 0, 0.9);
animation: slidein 1.5s ease;
}
#navigation-mobile, #navigation-mobile ul li {
background: rgba(0, 0, 0, 0.9);
border: none;
}
#fullscreen-button {
position: fixed;
top: 0;
right: 0;
width: 50px;
height: 40px;
z-index: 1099;
padding-top: 18px;
text-align: center;
font-size: 18px;
color: #FFFFFF;
}
@media (min-width: 768px) and (max-width: 979px) {
#fullscreen-button, #fullscreen-alert {
display: none;
}
}
#social ul li a {
background: none;
}
.item-thumbs {
box-shadow: 0 0 20px #000000;
}
......@@ -1193,7 +1193,7 @@ footer .credits {
position: absolute;
width: 100%;
height: 100%;
z-index: 700;
z-index: 300;
}
#jpreSlide{
......@@ -1380,69 +1380,3 @@ footer .credits {
-o-transition: none;
transition: none;
}
/* Custom CSS */
::-webkit-scrollbar {
display: none;
}
@keyframes glow {
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 rot {
0% {transform: rotate(10deg);}
50% {transform: rotate(-10deg);}
100%{transform: rotate(0deg);}
}
@keyframes wobbly {
0% {transform: translate(0,0);}
2% {transform: translate(0,12px);}
4% {transform: translate(0,-8px);}
6%{transform: translate(0,7px);}
8%{transform: translate(0,-5px);}
10%{transform: translate(0,0px);}
100%{transform: translate(0,0px);}
}
#logo_svg {
/*animation: glow 3s ease infinite;*/
/*animation: rot 3s ease infinite alternate;*/
animation: wobbly 4s ease-in 7;
}
#fullscreen-button {
position: fixed;
top: 0;
right: 0;
width: 50px;
height: 40px;
z-index: 1099;
padding-top: 18px;
text-align: center;
font-size: 18px;
color: #FFFFFF;
}
#home-slider .control-nav, #home-slider #nextslide, #home-slider #prevslide, #home-slider #nextsection {
background: rgba(0,0,0,0.5);
}
header .sticky-nav {
background: rgba(0,0,0,0.942);
}
.page {
background: #090909;
}
.page-alternate {
background: #111;
}
......@@ -18,7 +18,7 @@
font-size: 16px;
cursor: pointer;
border:none;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
......@@ -56,11 +56,11 @@
.button.button-block {
padding-right: 0;
padding-left: 0;
width: 100%;
width: 100%;
}
.button + .button {
margin-left: 10px;
margin-left: 10px;
}
/* ==================================================
......@@ -92,7 +92,7 @@
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
-webkit-transition: all 0.1s linear 0s;
-moz-transition: all 0.1s linear 0s;
-ms-transition: all 0.1s linear 0s;
......@@ -127,7 +127,7 @@
margin: -8px 0 0 0;
color: #23262C;
font-size: 18px;
-webkit-transition: all 0.1s linear 0s;
-moz-transition: all 0.1s linear 0s;
-ms-transition: all 0.1s linear 0s;
......@@ -141,7 +141,7 @@
.accordion-heading .accordion-toggle.active span,
.accordion-heading:hover .accordion-toggle.inactive span {
color: #FFFFFF;
color: #FFFFFF;
}
.accordion-heading.accordionize .accordion-toggle.active span,
......@@ -203,9 +203,9 @@
top: 2px;
right: -22px;
line-height: 20px;
color: #FFFFFF;
color: #FFFFFF;
text-shadow: none;
-webkit-transition: opacity 0.1s linear 0s;
-moz-transition: opacity 0.1s linear 0s;
-ms-transition: opacity 0.1s linear 0s;
......@@ -214,7 +214,7 @@
}
.alert .close:hover {
opacity: 1;
opacity: 1;
}
.alert-standard {
......@@ -496,7 +496,7 @@ blockquote small:before {
}
.info-block p {
margin-bottom: 0;
margin-bottom: 0;
}
.info-block a.button {
......@@ -553,17 +553,17 @@ blockquote small:before {
height: 70px;
background: #26292E;
-webkit-transition: all 400ms ease-out 0s;
-webkit-transition: all 400ms ease-out 0s;
-moz-transition: all 400ms ease-out 0s;
-o-transition: all 400ms ease-out 0s;
transition: all 400ms ease-out 0s;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
transform: rotateY(0deg);
}
.icons-example ul li a span {
......@@ -572,15 +572,15 @@ blockquote small:before {
color: #55606a;
font-size: 32px;
line-height: 70px;
opacity: 0.3;
filter: alpha(opacity=30);
-webkit-transition: all 400ms ease-out 0s;
-webkit-transition: all 400ms ease-out 0s;
-moz-transition: all 400ms ease-out 0s;
-o-transition: all 400ms ease-out 0s;
transition: all 400ms ease-out 0s;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
......@@ -590,8 +590,8 @@ blockquote small:before {
.icons-example ul li:hover a,
.icons-example ul li.active a {
background-color: #DE5E60;
background-color: #DE5E60;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
......@@ -604,10 +604,10 @@ blockquote small:before {
color: #FFFFFF;
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
\ No newline at end of file
}
This diff is collapsed.
This diff is collapsed.
......@@ -48,6 +48,9 @@
<link href="../brushed/css/supersized.css" rel="stylesheet">
<link href="../brushed/css/supersized.shutter.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../brushed/css/custom.css" rel="stylesheet">
<!-- Google Font -->
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900' rel='stylesheet' type='text/css'>
......@@ -75,6 +78,76 @@
</div>
<!-- End of Splash Screen -->
<!-- Fullscreen button !-->
<script>
function requestFullScreen() {
var el = document.body;
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen
|| el.mozRequestFullScreen || el.msRequestFullScreen;
if (requestMethod) {
// Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") {
// Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function toggleFullscreen(elem) {
elem = elem || document.documentElement;
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
document.getElementById("fullscreen-icon").className = "font-icon-resize-small";
document.getElementById("fullscreen-alert").style.visibility = "hidden";
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
document.getElementById("fullscreen-icon").className = "font-icon-resize-full";
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
</script>
<a id="fullscreen-button" href="#" onclick="toggleFullscreen()"><i id="fullscreen-icon" class="font-icon-resize-full"></i></a>
<!--<input type="button" value="click to go fullscreen" onclick="requestFullScreen()">!-->
<div id="fullscreen-alert" class="alert alert-slide fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
Per una migliore visione del sito <a href="#" onclick="toggleFullscreen()"><b>passa a schermo intero</b></a>, e usare il pulsante a destra per cambiare modalità o chiudi questa notifica.
</div>
<!-- end fullscreen button !-->
<!-- try scrollbars
<div class="scrollbar" id="scroll">
<div class="force-overflow"></div>
</div>!-->
<!-- Homepage Slider -->
<div id="home-slider">
<div class="overlay"></div>
......@@ -110,7 +183,6 @@
<!-- <div id="slidecaption" data-letters="vision">vision</div> !-->
</div>
<div class="control-nav">
<a id="prevslide" class="load-item"><i class="font-icon-arrow-simple-left"></i></a>
<a id="nextslide" class="load-item"><i class="font-icon-arrow-simple-right"></i></a>
......@@ -127,7 +199,7 @@
<a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
<div id="logo">
<a id="goUp" href="#home-slider" title="Brushed | Responsive One Page Template">Brushed Template</a>
<a id="goUp" href="#home-slider" title=".vision">-vision</a>
</div>
<nav id="menu">
......@@ -145,38 +217,6 @@
</header>
<!-- End Header -->
<!-- Fullscreen button !-->
<script>
function requestFullScreen() {
var el = document.body;
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen
|| el.mozRequestFullScreen || el.msRequestFullScreen;
if (requestMethod) {
// Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") {
// Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
<a id="fullscreen-button" href="#" onclick="requestFullScreen()"><i class="font-icon-resize-full"></i></a>
<!--<input type="button" value="click to go fullscreen" onclick="requestFullScreen()">!-->
<!-- end fullscreen button !-->
<!-- Our Work Section -->
<div id="work" class="page">
<div class="container">
......@@ -352,6 +392,7 @@
</div>
<!-- End Title Page -->
</div>
</div>
<!-- End About Section -->
......
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