Difference between revisions of "Team:Cornell NY/sidebarstyle"

 
(5 intermediate revisions by the same user not shown)
Line 39: Line 39:
 
}
 
}
 
.cd-section:nth-of-type(odd) {
 
.cd-section:nth-of-type(odd) {
−
   background-color: #3e3947;
+
   background-color: #ffffff;
−
}
+
−
.cd-section:nth-of-type(odd) p {
+
−
  color: #898099;
+
 
}
 
}
 +
 
.cd-section:nth-of-type(even) {
 
.cd-section:nth-of-type(even) {
−
   background-color: #745360;
+
   background-color: rgba(245, 245, 245, 0.45);
−
}
+
−
.cd-section:nth-of-type(even) p {
+
−
  color: #bda3ad;
+
−
}
+
−
.cd-section h1, .cd-section p {
+
−
  position: absolute;
+
−
  left: 50%;
+
−
  top: 50%;
+
−
  bottom: auto;
+
−
  right: auto;
+
−
  -webkit-transform: translateX(-50%) translateY(-50%);
+
−
  -moz-transform: translateX(-50%) translateY(-50%);
+
−
  -ms-transform: translateX(-50%) translateY(-50%);
+
−
  -o-transform: translateX(-50%) translateY(-50%);
+
−
  transform: translateX(-50%) translateY(-50%);
+
−
  width: 90%;
+
−
  max-width: 768px;
+
−
  text-align: center;
+
−
}
+
−
.cd-section h1 {
+
−
  color: white;
+
−
  font-weight: 300;
+
−
  text-transform: uppercase;
+
−
  font-size: 20px;
+
−
  font-size: 1.25rem;
+
−
}
+
−
.cd-section p {
+
−
  line-height: 1.6;
+
−
}
+
−
@media only screen and (min-width: 768px) {
+
−
  .cd-section h1 {
+
−
    font-size: 30px;
+
−
    font-size: 1.875rem;
+
−
  }
+
−
  .cd-section p {
+
−
    font-size: 20px;
+
−
    font-size: 1.25rem;
+
−
    line-height: 2;
+
−
  }
+
 
}
 
}
  
Line 118: Line 77:
 
   transform: translateY(-50%);
 
   transform: translateY(-50%);
 
   z-index: 1;
 
   z-index: 1;
 +
  background: rgba(255,255,255,0);
 
}
 
}
 
.no-touch #cd-vertical-nav li {
 
.no-touch #cd-vertical-nav li {
Line 143: Line 103:
 
}
 
}
 
.no-touch #cd-vertical-nav a:hover span {
 
.no-touch #cd-vertical-nav a:hover span {
−
   -webkit-transform: scale(1);
+
   -webkit-transform: scale(1.2);
−
   -moz-transform: scale(1);
+
   -moz-transform: scale(1.2);
−
   -ms-transform: scale(1);
+
   -ms-transform: scale(1.2);
−
   -o-transform: scale(1);
+
   -o-transform: scale(1.2);
−
   transform: scale(1);
+
   transform: scale(1.2);
 
}
 
}
 
.no-touch #cd-vertical-nav a:hover .cd-label {
 
.no-touch #cd-vertical-nav a:hover .cd-label {
Line 153: Line 113:
 
}
 
}
 
.no-touch #cd-vertical-nav a.is-selected .cd-dot {
 
.no-touch #cd-vertical-nav a.is-selected .cd-dot {
−
   background-color: white;
+
   background-color: #388E3C;
 
}
 
}
 
.no-touch #cd-vertical-nav .cd-dot {
 
.no-touch #cd-vertical-nav .cd-dot {
 
   position: relative;
 
   position: relative;
 
   /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
 
   /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
−
   top: 8px;
+
   top: 9px;
−
   height: 12px;
+
   height: 18px;
−
   width: 12px;
+
   width: 18px;
 
   border-radius: 50%;
 
   border-radius: 50%;
−
   background-color: #00695c;
+
   background-color: #C8E6C9;
 
   -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
 
   -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
 
   -moz-transition: -moz-transform 0.2s, background-color 0.5s;
 
   -moz-transition: -moz-transform 0.2s, background-color 0.5s;
Line 176: Line 136:
 
   margin-right: 10px;
 
   margin-right: 10px;
 
   padding: .4em .5em;
 
   padding: .4em .5em;
−
   color: white;
+
   color: #388E3C;
 
   font-size: 14px;
 
   font-size: 14px;
−
   font-size: 1.250rem;
+
   font-size: 1.500rem;
 
   -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
 
   -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
 
   -moz-transition: -moz-transform 0.2s, opacity 0.2s;
 
   -moz-transition: -moz-transform 0.2s, opacity 0.2s;

Latest revision as of 10:05, 19 October 2016

/* --------------------------------

Primary style

*/

html * { 

 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

}

  • , *:after, *:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

}

/* --------------------------------

Modules - reusable parts of our design

*/

.cd-img-replace { 

 /* replace text with a background-image */
 display: inline-block;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;

}

/* --------------------------------

Main components

*/

.cd-section { 

 min-height: 100%;
 position: relative;
 padding: 2em 0;

} .cd-section:nth-of-type(odd) { 

 background-color: #ffffff;

}

.cd-section:nth-of-type(even) { 

 background-color: rgba(245, 245, 245, 0.45);

}

.cd-scroll-down { 

 position: absolute;
 left: 50%;
 right: auto;
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 -o-transform: translateX(-50%);
 transform: translateX(-50%);
 bottom: 20px;
 width: 38px;
 height: 44px;
 background: url("../img/cd-arrow-bottom.svg") no-repeat center center;

}

/* No Touch devices */ .cd-nav-trigger { 

 display: none;

}

.no-touch #cd-vertical-nav { 

 position: fixed;
 right: 40px;
 top: 50%;
 bottom: auto;
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
 z-index: 1;
 background: rgba(255,255,255,0);

} .no-touch #cd-vertical-nav li { 

 text-align: right;

} .no-touch #cd-vertical-nav a { 

 display: inline-block;
 /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;

} .no-touch #cd-vertical-nav a:after { 

 content: "";
 display: table;
 clear: both;

} .no-touch #cd-vertical-nav a span { 

 float: right;
 display: inline-block;
 -webkit-transform: scale(0.6);
 -moz-transform: scale(0.6);
 -ms-transform: scale(0.6);
 -o-transform: scale(0.6);
 transform: scale(0.6);

} .no-touch #cd-vertical-nav a:hover span { 

 -webkit-transform: scale(1.2);
 -moz-transform: scale(1.2);
 -ms-transform: scale(1.2);
 -o-transform: scale(1.2);
 transform: scale(1.2);

} .no-touch #cd-vertical-nav a:hover .cd-label { 

 opacity: 1;

} .no-touch #cd-vertical-nav a.is-selected .cd-dot { 

 background-color: #388E3C;

} .no-touch #cd-vertical-nav .cd-dot { 

 position: relative;
 /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
 top: 9px;
 height: 18px;
 width: 18px;
 border-radius: 50%;
 background-color: #C8E6C9;
 -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
 -moz-transition: -moz-transform 0.2s, background-color 0.5s;
 transition: transform 0.2s, background-color 0.5s;
 -webkit-transform-origin: 50% 50%;
 -moz-transform-origin: 50% 50%;
 -ms-transform-origin: 50% 50%;
 -o-transform-origin: 50% 50%;
 transform-origin: 50% 50%;

} .no-touch #cd-vertical-nav .cd-label { 

 position: relative;
 margin-right: 10px;
 padding: .4em .5em;
 color: #388E3C;
 font-size: 14px;
 font-size: 1.500rem;
 -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
 -moz-transition: -moz-transform 0.2s, opacity 0.2s;
 transition: transform 0.2s, opacity 0.2s;
 opacity: 0;
 -webkit-transform-origin: 100% 50%;
 -moz-transform-origin: 100% 50%;
 -ms-transform-origin: 100% 50%;
 -o-transform-origin: 100% 50%;
 transform-origin: 100% 50%;

}

/* Touch devices */ .touch .cd-nav-trigger { 

 display: block;
 z-index: 2;
 position: fixed;
 bottom: 30px;
 right: 5%;
 height: 44px;
 width: 44px;
 border-radius: 0.25em;
 background: rgba(255, 255, 255, 0.9);

} .touch .cd-nav-trigger span { 

 position: absolute;
 height: 4px;
 width: 4px;
 background-color: #3e3947;
 border-radius: 50%;
 left: 50%;
 top: 50%;
 bottom: auto;
 right: auto;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);

} .touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after { 

 content: ;
 height: 100%;
 width: 100%;
 position: absolute;
 left: 0;
 background-color: inherit;
 border-radius: inherit;

} .touch .cd-nav-trigger span::before { 

 top: -9px;

} .touch .cd-nav-trigger span::after { 

 bottom: -9px;

}

.touch #cd-vertical-nav { 

 position: fixed;
 z-index: 1;
 right: 5%;
 bottom: 30px;
 width: 90%;
 max-width: 400px;
 max-height: 90%;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 -webkit-transform-origin: right bottom;
 -moz-transform-origin: right bottom;
 -ms-transform-origin: right bottom;
 -o-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 transition-property: transform;
 -webkit-transition-duration: 0.2s;
 -moz-transition-duration: 0.2s;
 transition-duration: 0.2s;
 border-radius: 0.25em;
 background-color: rgba(255, 255, 255, 0.9);

} .touch #cd-vertical-nav a { 

 display: block;
 padding: 1em;
 border-bottom: 1px solid rgba(62, 57, 71, 0.1);

} .touch #cd-vertical-nav a span:first-child { 

 display: none;

} .touch #cd-vertical-nav a.is-selected span:last-child { 

 color: #00695c;

} .touch #cd-vertical-nav.open { 

 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);

} .touch #cd-vertical-nav.open + .cd-nav-trigger { 

 background-color: transparent;

} .touch #cd-vertical-nav.open + .cd-nav-trigger span { 

 background-color: rgba(62, 57, 71, 0);

} .touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after { 

 background-color: #3e3947;
 height: 3px;
 width: 20px;
 border-radius: 0;
 left: -8px;

} .touch #cd-vertical-nav.open + .cd-nav-trigger span::before { 

 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 top: 1px;

} .touch #cd-vertical-nav.open + .cd-nav-trigger span::after { 

 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 transform: rotate(135deg);
 bottom: 0;

} .touch #cd-vertical-nav li:last-child a { 

 border-bottom: none;

}

@media only screen and (min-width: 768px) { 

 .touch .cd-nav-trigger, .touch #cd-vertical-nav {
   bottom: 40px;
 }

}