Difference between revisions of "Template:Sheffield/style/front"

Line 221: Line 221:
 
@media( max-width:767px) {
 
@media( max-width:767px) {
 
         #music {
 
         #music {
−
         width:250px;
+
         width:300px;
−
         height:100px;
+
         height:200px;
 
         z-index:100;
 
         z-index:100;
 
         top:50%;
 
         top:50%;
 
         left:50%;
 
         left:50%;
−
         margin-top:-50px;
+
         margin-top:-100px;
−
         margin-left:-125px;
+
         margin-left:-150px;
 
         position:fixed;
 
         position:fixed;
 
         padding:10px;
 
         padding:10px;
Line 236: Line 236:
 
         }
 
         }
 
#music audio {
 
#music audio {
−
         width:150px;
+
         width:250px;
 
         margin:10px;
 
         margin:10px;
 
       }
 
       }

Revision as of 10:20, 19 October 2016

  1. front {

width:100%; height:100vh; background-size: 100% 100%; background-color: }

.back-video { 

   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   z-index: -100;

}

.fullscreen-bg { 

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
   filter: grayscale(100%);
   opacity: 0.5;
   filter: alpha(opacity=50);

}

.front-img { height:80%; margin-top:120px; z-index:2; margin-left: auto; 

   margin-right: auto;
   display:block;

}

.left-box { height:100vh; width:100px; float:left; position: relative; }

.left-but { background-color:#a94442; opacity:0.75; border-radius:5px; margin-left:100px; width:300px; height:120px; position: absolute; top: 50%; transform: translate(0, -50%); line-height:90px; text-align:center; 

       cursor:pointer;

}

.left-but h1{ font-size:40px; color:white; border:#752E2D 7px solid; border-radius:5px; margin:10px; }

.right-box { height:100vh; width:100px; float:right; position: relative; 

       margin-top:0px;
       border:none;

}

.right-but { background-color:#0091c2; opacity:0.75; border-radius:5px; right:100px; width:300px; height:120px; position: absolute; top: 50%; transform: translate(0, -50%); line-height:90px; text-align:center; float:left; 

       cursor:pointer;

}

.right-but h1{ font-size:40px; color:white; border:#00678A 7px solid; margin:10px; border-radius:5px; }

.phone { 

      display:none;
      }

.close-jumbo h3,.close-music h3 { 

       border:5px solid #eac100;
       padding:10px;
       width:300px;
       cursor:pointer;
       color: #C4AE00;
   font-size: 40px;
     }
  1. music {
       width:600px;
       height:300px;
       z-index:100;
       background-color:rgba(52, 50, 50, 0.85);
       border:#eac100 2px solid;
       border-radius:5px;
       top:50%;
       left:50%;
       margin-top:-150px;
       margin-left:-300px;
       position:fixed;
       padding:20px;
       text-align:center;
       }
  1. music audio {
       width:500px;
       margin:20px;
      }

@media (min-aspect-ratio: 16/9) { 

 .fullscreen-bg {
   height: 300%;
   top: -100%;
 }

}

@media (max-aspect-ratio: 16/9) { 

 .fullscreen-bg {
   width: 300%;
   left: -100%;
 }

}

@media (min-width:992px) and (max-width:1199px) { 

       .left-but {
          margin-left:25px;
          }
       .right-but {
          right:25px;
       }
      .right-but h1,.left-but h1{

font-size:30px; 

       }
      .right-but, .left-but {
            height:90px;
            width:250px;
        }

}

@media (max-width:991px) { 

     .tablet {
         display:none;
         }
     .phone {
         display:inline-block;
        }
     .left-but,.right-but {
         position:static;
         transform:none;
         
         margin-top:50px;
       }
     .left-but {
         float:left;
         margin-left:5vh;
         }
     .right-but {
         float:right;
             margin-right:5vh;
        }

}

@media (min-width:768px) and (max-width:991px) { 

      .right-but h1,.left-but h1{

font-size:30px; 

             border-width:5px;
       }
      .right-but, .left-but {
            height:90px;
            width:250px;
        }

}

@media (min-width:601px) and (max-width:767px) { 

       .right-but h1,.left-but h1{

font-size:25px; 

             border-width:3px;
       }
      .right-but, .left-but {
            height:80px;
            width:200px;
        }
       .front-img {
             margin-top:50px;
             width:95%;
             margin-left:2vh;
             }
       .left-but {
            margin-left:2vh;
            }
      .right-but {
            margin-rightt:2vh;
            }

} @media( max-width:767px) { 

       #music {
       width:300px;
       height:200px;
       z-index:100;
       top:50%;
       left:50%;
       margin-top:-100px;
       margin-left:-150px;
       position:fixed;
       padding:10px;
       text-align:center;
       }
  1. music p {
       font-size:15px;
       }
  1. music audio {
       width:250px;
       margin:10px;
      }

}

@media (max-width:600px) { 

      .right-but h1,.left-but h1{

font-size:20px; 

             border-width:3px;
       }
      .right-but, .left-but {
            height:70px;
            width:130px;
        }
      .left-but {
            margin-left:2vh;
            }
      .right-but {
            margin-rightt:2vh;
            }

       .front-img {
             margin-top:50px;
             width:95%;
             margin-left:2vh;
             }
     #shield .close-jumbo h3,#shield .close-music h3 {
       border:5px solid #eac100;
       padding:10px;
       width:150px;
       font-size:20px;
     }

}