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

Revision as of 17:37, 9 October 2016 (view source) T.Chari (Talk | contribs) (Created page with "→‎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,...")		Revision as of 17:43, 9 October 2016 (view source) T.Chari (Talk | contribs) Newer edit →
Line 59:		Line 59:
	html {		html {
	font-size: 62.5%;		font-size: 62.5%;
−	}
−
−	body {
−	font-size: 1.6rem;
−	font-family: "Sintony", sans-serif;
−	color: #eaf2e3;
−	background-color: #3a2c41;
−	-webkit-font-smoothing: antialiased;
−	-moz-osx-font-smoothing: grayscale;
	}		}

---

Revision as of 17:43, 9 October 2016

/* 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; }

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

Primary style

---

*/

• , *::after, *::before {

 box-sizing: border-box;

}

html {

 font-size: 62.5%;

}

a {

 color: #c0a672;
 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: rgba(234, 242, 227, 0.9);
 /* 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: rgba(234, 242, 227, 0.9);

} .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: #c0a672;

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

inside <nav>*/ display: table-cell; vertical-align: middle; text-align: center; } .cd-vertical-nav a { position: relative; padding: 3em 0 0; margin: 1.4em auto; border-bottom: none; font-size: 1.2rem; color: #eaf2e3; } .cd-vertical-nav a.active { color: #eaf2e3; } .cd-vertical-nav a::before, .cd-vertical-nav a::after { /* used to create the filled circle and the background icon */ content: ; position: absolute; left: 50%; /* Force Hardware Acceleration */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .cd-vertical-nav a::before { /* filled circle */ top: 0; height: 32px; width: 32px; border-radius: 50%; background: #eaf2e3; -webkit-transform: translateX(-50%) scale(0.25); -moz-transform: translateX(-50%) scale(0.25); -ms-transform: translateX(-50%) scale(0.25); -o-transform: translateX(-50%) scale(0.25); transform: translateX(-50%) scale(0.25); -webkit-transition: -webkit-transform 0.4s, background-color 0.2s; -moz-transition: -moz-transform 0.4s, background-color 0.2s; transition: transform 0.4s, background-color 0.2s; } .cd-vertical-nav a::after { /* icon */ opacity: 0; top: 8px; height: 16px; width: 16px; background: url(../img/cd-nav-icons.svg) no-repeat; -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: -webkit-transform 0.4s 0s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s 0s, opacity 0.1s 0.3s; transition: transform 0.4s 0s, opacity 0.1s 0.3s; } .cd-vertical-nav a.active::before, .no-touch .cd-vertical-nav a:hover::before { background-color: #c0a672; } .cd-vertical-nav li:first-of-type a::after { /* change icon using image sprites */ background-position: 0px -48px; /* fix bug with transitions - set scale(0.01) rather than scale(0) */ -webkit-transform: translateX(-50%) translateY(4.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(4.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(4.5em) scale(0.01); -o-transform: translateX(-50%) translateY(4.5em) scale(0.01); transform: translateX(-50%) translateY(4.5em) scale(0.01); } .cd-vertical-nav li:first-of-type a::before { -webkit-transform: translateX(-50%) translateY(4.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(4.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(4.5em) scale(0.25); -o-transform: translateX(-50%) translateY(4.5em) scale(0.25); transform: translateX(-50%) translateY(4.5em) scale(0.25); } .cd-vertical-nav li:nth-of-type(2) a::after { background-position: 0px -32px; -webkit-transform: translateX(-50%) translateY(1.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(1.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(1.5em) scale(0.01); -o-transform: translateX(-50%) translateY(1.5em) scale(0.01); transform: translateX(-50%) translateY(1.5em) scale(0.01); } .cd-vertical-nav li:nth-of-type(2) a::before { -webkit-transform: translateX(-50%) translateY(1.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(1.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(1.5em) scale(0.25); -o-transform: translateX(-50%) translateY(1.5em) scale(0.25); transform: translateX(-50%) translateY(1.5em) scale(0.25); } .cd-vertical-nav li:nth-of-type(3) a::after { background-position: 0px -16px; -webkit-transform: translateX(-50%) translateY(-1.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(-1.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(-1.5em) scale(0.01); -o-transform: translateX(-50%) translateY(-1.5em) scale(0.01); transform: translateX(-50%) translateY(-1.5em) scale(0.01); } .cd-vertical-nav li:nth-of-type(3) a::before { -webkit-transform: translateX(-50%) translateY(-1.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(-1.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(-1.5em) scale(0.25); -o-transform: translateX(-50%) translateY(-1.5em) scale(0.25); transform: translateX(-50%) translateY(-1.5em) scale(0.25); } .cd-vertical-nav li:nth-of-type(4) a::after { background-position: 0px 0px; -webkit-transform: translateX(-50%) translateY(-4.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(-4.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(-4.5em) scale(0.01); -o-transform: translateX(-50%) translateY(-4.5em) scale(0.01); transform: translateX(-50%) translateY(-4.5em) scale(0.01); } .cd-vertical-nav li:nth-of-type(4) a::before { -webkit-transform: translateX(-50%) translateY(-4.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(-4.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(-4.5em) scale(0.25); -o-transform: translateX(-50%) translateY(-4.5em) scale(0.25); transform: translateX(-50%) translateY(-4.5em) scale(0.25); } .cd-vertical-nav .label { display: block; /* Force Hardware Acceleration */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -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 a::before, .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav li:nth-of-type(n) a::before, .touch .cd-vertical-nav li:nth-of-type(n) a::after { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); /* set a rotation to fix bug on Firefox - http://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/ */ -moz-transform: translateX(-50%) scale(1) rotate(0.02deg); } .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav a::after { opacity: 1; -webkit-transition: -webkit-transform 0.4s, opacity 0s; -moz-transition: -moz-transform 0.4s, opacity 0s; transition: transform 0.4s, opacity 0s; } .no-touch .cd-vertical-nav:hover .label, .touch .cd-vertical-nav .label { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } /* -------------------------------- Content Sections - basic style

---

*/

.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 {

/* vertically align
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;
} .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;
 }
}
.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: #c0a672;
} .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);
}