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

Latest revision as of 05:18, 18 October 2016

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

Primary style

*/

, *::after, *::before {

 box-sizing: border-box;

}

/* html {

 font-size: 62.5%;

} */

/* a {

 color: #47b475;
 text-decoration: none;

} */

.cd-image-replace {

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

}

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

Navigation trigger - visible on small devices only

*/

.cd-nav-trigger {

 display: block;
 position: fixed;
 z-index: 2;
 bottom: 30px;
 right: 5%;
 height: 44px;
 width: 44px;
 border-radius: 0.25em;
 background: #47b475;
 /* reset button style */
 cursor: pointer;
 -webkit-appearance: none;
 -moz-appearance: none;
 -ms-appearance: none;
 -o-appearance: none;
 appearance: none;
 border: none;
 outline: none;

} .cd-nav-trigger span {

 /* central dot */
 position: absolute;
 height: 4px;
 width: 4px;
 background-color: #3a2c41;
 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%);

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

 /* bottom and top dots */
 content: ;
 position: absolute;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: #3a2c41;
 border-radius: inherit;

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

 top: -9px;

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

 bottom: -9px;

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

 .cd-nav-trigger {
   display: none;
 }

}

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

Vertical navigation

*/

.cd-vertical-nav {

 position: fixed;
 z-index: 1;
 right: 5%;
 bottom: 30px;
 width: 90%;
 max-width: 400px;
 max-height: 90%;
 overflow-y: auto;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
 -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-transition: -webkit-transform 0.2s;
 -moz-transition: -moz-transform 0.2s;
 transition: transform 0.2s;
 border-radius: 0.25em;
 background-color: #47b475;

} .cd-vertical-nav a {

 display: block;
 padding: 1em;
 color: #3a2c41;
 font-weight: bold;
 border-bottom: 1px solid rgba(58, 44, 65, 0.1);

} .cd-vertical-nav a.active {

 color: #47b475;

} .cd-vertical-nav.open {

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

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

 background-color: transparent;

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

 background-color: rgba(58, 44, 65, 0);

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

 /* transform dots in 'X' icon */
 height: 3px;
 width: 20px;
 border-radius: 0;
 left: -8px;

} .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;

} .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;

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

 .cd-vertical-nav {
   /* reset style */
   right: 0;
   top: 0;
   bottom: auto;
   height: 100vh;
   width: 90px;
   max-width: none;
   max-height: none;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
   background-color: transparent;
   /* vertically align its content*/
   display: table;
 }
 .cd-vertical-nav::before {
   /* this is the navigation background */
   content: ;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -ms-transform: translateX(100%);
   -o-transform: translateX(100%);
   transform: translateX(100%);
   -webkit-transition: -webkit-transform 0.4s;
   -moz-transition: -moz-transform 0.4s;
   transition: transform 0.4s;
 }
 .no-touch .cd-vertical-nav:hover::before, .touch .cd-vertical-nav::before {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);
 }
 .cd-vertical-nav ul {

/* vertically align

;

.cd-section {

 /* vertically align its content*/
 display: table;
 width: 100%;
 height: 100vh;
 background: #3a2c41;

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

 background-color: #70557e;

} .cd-section > div {

inside <section> */

 display: table-cell;
 vertical-align: middle;
 text-align: center;

} .cd-section h1, .cd-section h2 {

 width: 90%;
 margin: 0 auto;
 text-transform: uppercase;
 font-size: 2.4rem;
 line-height: 1.4;

} .cd-section h1 b, .cd-section h2 b {

 color: #584c5e;

}

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

 .cd-section h1, .cd-section h2 {
   font-size: 3rem;
 }

}

.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: 44px;
 height: 44px;
 background: url(../img/cd-arrow-bottom.svg) no-repeat center center;

}

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

no-js

*/

.no-js .cd-nav-trigger {

 display: none;

}

.no-js .cd-vertical-nav {

 position: static;
 height: auto;
 width: 100%;
 max-width: none;
 background-color: rgba(0, 0, 0, 0.8);
 border-radius: 0;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);

} .no-js .cd-vertical-nav::before {

 display: none;

} .no-js .cd-vertical-nav ul::after {

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

} .no-js .cd-vertical-nav li {

 display: inline-block;
 float: left;

} .no-js .cd-vertical-nav a {

 padding: 0 1em;
 margin: 1.5em 1em;
 color: #eaf2e3;

} .no-js .cd-vertical-nav a.active {

 color: #47b475;

} .no-js .cd-vertical-nav a::after, .no-js .cd-vertical-nav a::before {

 display: none;

} .no-js .cd-vertical-nav .label {

 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0);

}

@@ Line 1: / Line 1: @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section, main {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
 /* --------------------------------
@@ Line 57: / Line 9: @@
 }
-html {
+/* html {
    font-size: 62.5%;
-}
+} */
-a {
+/* a {
-   color: #c0a672;
+   color: #47b475;
    text-decoration: none;
-}
+} */
 .cd-image-replace {
@@ Line 89: / Line 41: @@
    width: 44px;
    border-radius: 0.25em;
-   background: rgba(234, 242, 227, 0.9);
+   background: #47b475;
    /* reset button style */
    cursor: pointer;
@@ Line 167: / Line 119: @@
    transition: transform 0.2s;
    border-radius: 0.25em;
-   background-color: rgba(234, 242, 227, 0.9);
+   background-color: #47b475;
 }
 .cd-vertical-nav a {
@@ Line 177: / Line 129: @@
 }
 .cd-vertical-nav a.active {
-   color: #c0a672;
+   color: #47b475;
 }
 .cd-vertical-nav.open {
@@ Line 324: / Line 276: @@
    }
    .cd-vertical-nav a.active::before, .no-touch .cd-vertical-nav a:hover::before {
-     background-color: #c0a672;
+     background-color: #47b475;
    }
    .cd-vertical-nav li:first-of-type a::after {
@@ Line 462: / Line 414: @@
    color: #584c5e;
 }
-.cd-section p {
-  margin: 1em auto 0;
-  line-height: 1.6;
-  width: 90%;
-  max-width: 680px;
-  color: rgba(234, 242, 227, 0.6);
-}
 @media only screen and (min-width: 800px) {
    .cd-section h1, .cd-section h2 {
      font-size: 3rem;
    }
-  .cd-section p {
-    font-size: 2rem;
-  }
 }
@@ Line 533: / Line 477: @@
 }
 .no-js .cd-vertical-nav a.active {
-   color: #c0a672;
+   color: #47b475;
 }
 .no-js .cd-vertical-nav a::after, .no-js .cd-vertical-nav a::before {