Difference between revisions of "Team:ColumbiaNYC/Resources/CSS:safetystyle"

Line 1: Line 1:
 
body {
 
body {
−
     background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
+
     background-image: linear-gradient(to top, #ecedee 0%, #eceeef 75%, #e7e8e9 100%);
 
     min-height: 100vh;
 
     min-height: 100vh;
 
     font: normal 16px sans-serif;
 
     font: normal 16px sans-serif;
 +
    padding: 60px 0;
 +
}
 +
 +
.container.gallery-container {
 +
    background-color: #fff;
 +
    color: #35373a;
 +
    min-height: 100vh;
 +
    border-radius: 20px;
 +
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
 
}
 
}
  
Line 10: Line 19:
 
     font-family: 'Droid Sans', sans-serif;
 
     font-family: 'Droid Sans', sans-serif;
 
     font-weight: bold;
 
     font-weight: bold;
−
    color: #58595a;
 
 
}
 
}
  
 
.gallery-container p.page-description {
 
.gallery-container p.page-description {
 
     text-align: center;
 
     text-align: center;
−
     margin: 30px auto;
+
    max-width: 800px;
 +
     margin: 25px auto;
 +
    color: #888;
 
     font-size: 18px;
 
     font-size: 18px;
−
    color: #85878c;
 
 
}
 
}
  
Line 24: Line 33:
 
}
 
}
  
−
.tz-gallery .thumbnail {
+
.tz-gallery .lightbox img {
−
     padding: 0;
+
     width: 100%;
 
     margin-bottom: 30px;
 
     margin-bottom: 30px;
−
    background-color: #fff;
+
     transition: 0.2s ease-in-out;
−
    border-radius: 4px;
+
     box-shadow: 0 2px 3px rgba(0,0,0,0.2);
−
    border: none;
+
−
     transition: 0.15s ease-in-out;
+
−
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
+
 
}
 
}
  
−
.tz-gallery .thumbnail:hover {
 
−
    transform: translateY(-10px) scale(1.02);
 
−
}
 
  
−
.tz-gallery .lightbox img {
+
.tz-gallery .lightbox img:hover {
−
     border-radius: 4px 4px 0 0;
+
     transform: scale(1.05);
 +
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
 
}
 
}
  
−
.tz-gallery .caption{
+
.tz-gallery img {
−
     padding: 26px 30px;
+
     border-radius: 4px;
−
    text-align: center;
+
 
}
 
}
  
−
.tz-gallery .caption h3 {
+
.baguetteBox-button {
−
     font-size: 14px;
+
     background-color: transparent !important;
−
    font-weight: bold;
+
−
    margin-top: 0;
+
 
}
 
}
  
−
.tz-gallery .caption p {
 
−
    font-size: 12px;
 
−
    color: #7b7d7d;
 
−
    margin: 0;
 
−
}
 
  
−
.baguetteBox-button {
+
@media(max-width: 768px) {
−
     background-color: transparent !important;
+
     body {
 +
        padding: 0;
 +
    }
 +
 
 +
    .container.gallery-container {
 +
        border-radius: 0;
 +
    }
 
}
 
}

Revision as of 04:09, 5 July 2017

body { 

   background-image: linear-gradient(to top, #ecedee 0%, #eceeef 75%, #e7e8e9 100%);
   min-height: 100vh;
   font: normal 16px sans-serif;
   padding: 60px 0;

}

.container.gallery-container { 

   background-color: #fff;
   color: #35373a;
   min-height: 100vh;
   border-radius: 20px;
   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);

}

.gallery-container h1 { 

   text-align: center;
   margin-top: 70px;
   font-family: 'Droid Sans', sans-serif;
   font-weight: bold;

}

.gallery-container p.page-description { 

   text-align: center;
   max-width: 800px;
   margin: 25px auto;
   color: #888;
   font-size: 18px;

}

.tz-gallery { 

   padding: 40px;

}

.tz-gallery .lightbox img { 

   width: 100%;
   margin-bottom: 30px;
   transition: 0.2s ease-in-out;
   box-shadow: 0 2px 3px rgba(0,0,0,0.2);

}


.tz-gallery .lightbox img:hover { 

   transform: scale(1.05);
   box-shadow: 0 8px 15px rgba(0,0,0,0.3);

}

.tz-gallery img { 

   border-radius: 4px;

}

.baguetteBox-button { 

   background-color: transparent !important;

}


@media(max-width: 768px) { 

   body {
       padding: 0;
   }

   .container.gallery-container {
       border-radius: 0;
   }

}