Commit 2de8762b authored by sbiego's avatar sbiego

fixed fullscreen responsive display/hide, still not working at best with...

fixed fullscreen responsive display/hide, still not working at best with chromium. and minor style changes
parent cb8fae69
......@@ -53,10 +53,17 @@
}
@keyframes slidein {
0% {left: -100%; opacity: 0;}
50% {left: -100%; opacity: 0:}
0% {top: -100%; opacity: 0;}
50% {top: -100%; opacity: 0:}
70% {opacity: 0;}
100% {left: 0; opacity: 1;}
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;}
}
#logo_svg {
......@@ -77,25 +84,29 @@ header .sticky-nav {
background-image: url('../../img/texture.png');
text-shadow: 0 1px 7px #000;
color: #bbb;
border-top: 4px solid #000;
/*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: 4px solid #000;
text-shadow: 0 1px 14px #000;
color: #ccc;
/*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.9);
animation: slidein 1.5s ease;
right: 50px;
padding-right: 80px;
right: 0;
left: 0;
position: absolute;
color: #fff;
z-index: 10000;
z-index: 1999;
background: linear-gradient( 0deg, rgba(0,0,0,0), rgba(0,0,0,0.8) );
}
#navigation-mobile, #navigation-mobile ul li {
......@@ -104,19 +115,34 @@ header .sticky-nav {
}
#fullscreen-button {
float: right;
position: fixed;
top: 0;
right: 0;
width: 50px;
height: 40px;
z-index: 1099;
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;
}
@media (min-width: 768px) and (max-width: 979px) {
/* 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;
}
......@@ -132,3 +158,10 @@ header .sticky-nav {
.item-thumbs span {
text-shadow: none;
}
nav {
text-shadow: none;
}
.fancybox-skin {
background-color: #111;
}
......@@ -108,10 +108,10 @@
z-index: 9000;
background-image: none;
background-color: #26292E;
opacity: 0.5;
-webkit-transition: background 0.1s linear 0s, opacity 0.1s linear 0s;
-webkit-transition: background 0.1s linear 0s, opacity 0.1s linear 0s;
-moz-transition: background 0.1s linear 0s, opacity 0.1s linear 0s;
-o-transition: background 0.1s linear 0s, opacity 0.1s linear 0s;
transition: background 0.1s linear 0s, opacity 0.1s linear 0s;
......@@ -163,10 +163,10 @@
z-index: 8040;
background-image: none;
background-color: #26292E;
opacity: 0.5;
-webkit-transition: background 0.1s linear 0s, opacity 0.1s linear 0s;
-webkit-transition: background 0.1s linear 0s, opacity 0.1s linear 0s;
-moz-transition: background 0.1s linear 0s, opacity 0.1s linear 0s;
-o-transition: background 0.1s linear 0s, opacity 0.1s linear 0s;
transition: background 0.1s linear 0s, opacity 0.1s linear 0s;
......@@ -251,13 +251,13 @@
.fancybox-opened .fancybox-title h4{
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
margin-bottom: 10px;
}
.fancybox-opened .fancybox-title p{
font-size: 16px;
font-weight: 300;
margin-bottom: 0;
margin-bottom: 0;
}
.fancybox-title-float-wrap {
......@@ -310,18 +310,18 @@
.fancybox-nav:hover span,
.fancybox-close,
.fancybox-close:hover {
background: transparent;
background: transparent;
}
.fancybox-close i {
left: 70px;
top: 10px;
top: 10px;
}
}
@media (max-width: 320px) {
.fancybox-close i {
left: 30px;
top: 20px;
top: 20px;
}
}
\ No newline at end of file
}
@media (min-width: 768px) and (max-width: 979px) {
#menu {
display: none;
display: none;
}
#mobile-nav {
display: block;
float: right;
}
#menu-nav-mobile {
margin: 0;
}
header .sticky-nav #mobile-nav,
header .sticky-nav.stuck #mobile-nav {
margin-right: 20px;
margin-right: 20px;
}
#social-area #social ul li {
margin-left: 15px;
}
#social-area #social ul li a {
width: 50px;
height: 50px;
}
#social-area #social ul li a span {
font-size: 24px;
line-height: 50px;
}
#twitter-feed {
padding-top: 110px;
padding-bottom: 110px;
padding-bottom: 110px;
}
.info-block a.button {
margin-top: 20px;
position: inherit;
}
.info-text {
padding-right: 0;
padding-right: 0;
}
}
@media (min-width: 481px) and (max-width: 767px) {
#back-to-top {
display: none !important;
display: none !important;
}
#home-slider {
margin-left: -20px;
margin-right: -20px;
}
header .sticky-nav {
position: relative;
position: relative;
}
header .sticky-nav,
#navigation-mobile,
.page,
......@@ -69,48 +69,48 @@
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
padding-right: 20px;
}
header .sticky-nav #logo {
margin-left: 0;
}
header .sticky-nav.stuck #logo {
margin-left: 20px;
margin-left: 20px;
}
header .sticky-nav #menu {
margin-right: 0;
}
header .sticky-nav.stuck #menu {
margin-right: 20px;
margin-right: 20px;
}
#menu {
display: none;
display: none;
}
#mobile-nav {
display: block;
float: right;
}
#menu-nav-mobile {
margin-left: -20px;
margin-right: -20px;
margin-bottom: 0;
}
header .sticky-nav.stuck #mobile-nav {
margin-right: 20px;
margin-right: 20px;
}
.work-nav {
margin-bottom: 30px;
margin-bottom: 30px;
}
.type-work {
background: url(../img/filter-icon.png) no-repeat;
width: 16px;
......@@ -121,105 +121,105 @@
position: relative;
line-height: 10px;
}
.work-nav #filters,
.work-nav #filters li {
display: inline-block;
}
.work-nav #filters li {
margin:0 10px 0 0;
margin:0 10px 0 0;
}
.work-nav #filters li a {
font-size: 13px;
text-transform: uppercase;
text-transform: uppercase;
}
#about .profile {
margin-bottom: 30px;
margin-bottom: 30px;
}
#about .profile:last-child {
margin-bottom: 0;
margin-bottom: 0;
}
#response {
margin-bottom: 30px;
margin-bottom: 30px;
}
.contact-details {
border-top: 1px dashed #3C3F45;
padding-top: 30px;
text-align: center;
text-align: center;
}
#contact-form .submit {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
#social-area #social ul li:first-child,
#social-area #social ul li {
margin: 15px;
}
#social-area #social ul li a {
width: 50px;
height: 50px;
}
#social-area #social ul li a span {
font-size: 24px;
line-height: 50px;
}
#twitter-feed {
padding-top: 90px;
padding-bottom: 100px;
padding-bottom: 100px;
}
#ticker .tweet_list li {
font-size: 16px;
line-height: 24px;
}
#ticker .tweet_list .tweet_time a {
font-size: 13px;
margin-left: 5px;
margin-left: 5px;
}
.info-block a.button {
margin-top: 20px;
position: inherit;
display: block;
}
.info-text {
padding-right: 0;
padding-right: 0;
}
}
@media (max-width: 480px) {
#back-to-top {
display: none !important;
display: none !important;
}
#home-slider {
margin-left: -20px;
margin-right: -20px;
}
#home-slider ul#slide-list {
display: none;
display: none;
}
header .sticky-nav {
position: relative;
position: relative;
}
header .sticky-nav,
#navigation-mobile,
.page,
......@@ -229,53 +229,53 @@
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
padding-right: 20px;
}
header .sticky-nav #logo {
margin-left: 0;
}
header .sticky-nav.stuck #logo {
margin-left: 20px;
margin-left: 20px;
}
header .sticky-nav #menu {
margin-right: 0;
}
header .sticky-nav.stuck #menu {
margin-right: 20px;
margin-right: 20px;
}
#menu {
display: none;
display: none;
}
#mobile-nav {
display: block;
float: right;
}
#menu-nav-mobile {
margin-left: -20px;
margin-right: -20px;
margin-bottom: 0;
}
#navigation-mobile li a {
font-size: 14px;
padding: 12px 0;
}
header .sticky-nav.stuck #mobile-nav {
margin-right: 20px;
margin-right: 20px;
}
.work-nav {
margin-bottom: 30px;
margin-bottom: 30px;
}
.type-work {
background: url(../img/filter-icon.png) no-repeat;
width: 16px;
......@@ -286,88 +286,88 @@
position: relative;
line-height: 10px;
}
.work-nav #filters li:first-child {
margin-left: 0;
margin-left: 0;
}
.work-nav #filters,
.work-nav #filters li {
display: inline-block;
}
.work-nav #filters li {
margin:0 10px 0 0;
margin:0 10px 0 0;
}
.work-nav #filters li a {
font-size: 13px;
text-transform: uppercase;
text-transform: uppercase;
}
#about .profile {
margin-bottom: 30px;
margin-bottom: 30px;
}
#about .profile:last-child {
margin-bottom: 0;
margin-bottom: 0;
}
#response {
margin-bottom: 30px;
margin-bottom: 30px;
}
.contact-details {
border-top: 1px dashed #3C3F45;
padding-top: 30px;
text-align: center;
text-align: center;
}
#contact-form .submit {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
#social-area #social ul li:first-child,
#social-area #social ul li {
margin: 15px;
}
#social-area #social ul li a {
width: 50px;
height: 50px;
}
#social-area #social ul li a span {
font-size: 24px;
line-height: 50px;
}
#twitter-feed {
padding-top: 90px;
padding-bottom: 100px;
padding-bottom: 100px;
}
#ticker .tweet_list li {
font-size: 14px;
line-height: 22px;
}
#ticker .tweet_list .tweet_time a {
font-size: 12px;
margin-left: 3px;
margin-left: 3px;
}
.info-block a.button {
margin-top: 20px;
position: inherit;
display: block;
}
.info-text {
padding-right: 0;
padding-right: 0;
}
}
......@@ -375,14 +375,14 @@
#navigation-mobile li a {
padding: 20px 0;
}
.work-nav #filters li a {
font-size: 12px;
}
#twitter-feed {
padding-top: 90px;
padding-bottom: 120px;
padding-bottom: 120px;
}
}
......@@ -394,21 +394,19 @@
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
header #logo a {
background-image: url(../img/logo_@2x.png);
background-size: 96px 30px;
}
.menu-nav {
background-image: url(../img/menu-mobile_@2x.png);
/* CUSTOM DELETE FIX MOBILE MENU USING BRUSHED background-image: url(../img/menu-mobile_@2x.png);*/
background-size: 16px 32px;
}
.type-work {
background-image: url(../img/filter-icon_@2x.png);
background-size: 16px 16px;
}
}
brushed/img/logo_@2x.png

1.45 KB | W: | H:

brushed/img/logo_@2x.png

734 Bytes | W: | H:

brushed/img/logo_@2x.png
brushed/img/logo_@2x.png
brushed/img/logo_@2x.png
brushed/img/logo_@2x.png
  • 2-up
  • Swipe
  • Onion skin
brushed/img/menu-mobile_@2x.png

1.55 KB | W: | H:

brushed/img/menu-mobile_@2x.png

801 Bytes | W: | H:

brushed/img/menu-mobile_@2x.png
brushed/img/menu-mobile_@2x.png
brushed/img/menu-mobile_@2x.png
brushed/img/menu-mobile_@2x.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -20,10 +20,6 @@
<!-- Main Style -->
<link href="brushed/css/main.css" rel="stylesheet">
<!-- Supersized -->
<link href="brushed/css/supersized.css" rel="stylesheet">
<link href="brushed/css/supersized.shutter.css" rel="stylesheet">
<!-- Font Icons -->
<link href="brushed/css/fonts.css" rel="stylesheet">
......@@ -45,8 +41,6 @@
<link rel="icon" sizes="144x144" href="img/favicon144.png" type="image/x-icon">
<link rel="icon" sizes="256x256" href="img/favicon256.png" type="image/x-icon">
<!-- Modernizr -->
<script src="brushed/js/modernizr.js"></script>
<style> /* space credits to Alan Crissey, http://codepen.io/TheRealAlan/pen/gzqsy */
/* Animations */
......
......@@ -131,8 +131,6 @@
<div class="slider-text">
<!-- <a class="link link--kukuri" href="#">!-->
<svg id="logo_svg" height="220" width="220" viewBox="0 0 602.5 602.5" version="1.1">
<!--<text id="logowrite" font-size="60pt" opacity:".0" x="-33%" y="86%" fill="#fff">.vision</text>!-->
<path id="logopath" style="fill: #fff" opacity=".6" d="m301.25 0a301.25 301.25 0 0 0 -301.25 301.25 301.25 301.25 0 0 0 301.25 301.25 301.25 301.25 0 0 0 301.25 -301.25 301.25 301.25 0 0 0 -301.25 -301.25zm-182.14 134.01l0.01 0.01h376.12l23.72 50.83-324.05 0.69 96.57 184.67-23.72 37.28-148.65-273.48zm-8.47 10.17l157.12 288.72 111.82-186.37h45.74l-170.67 270.38-166.04-318.52 22.03-54.21zm410.01 50.82v0.01l-199.92 328.68h-57.61l179.14-285.63h-208.39l-22.02-42.36 308.8-0.7z"/>
......@@ -221,6 +219,8 @@
<li><a href="#filter" data-option-value=".icone">Icone</a></li>
<li><a href="#filter" data-option-value=".locandine">Locandine</a></li>
<li><a href="#filter" data-option-value=".loghi">Loghi</a></li>
<li><a href="#filter" data-option-value=".sfondi">Sfondi</a></li>
<li><a href="#filter" data-option-value=".vario">Vario</a></li>
</ul>
</nav>
<!-- End Filter -->
......
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