Difference between revisions of "Team:Aix-Marseille/Template-CSS"
| Line 44: | Line 44: | ||
} | } | ||
| − | #toc { position: | + | #toc { position: fixed; |
left: 50%; | left: 50%; | ||
| − | |||
margin-left: 5em; | margin-left: 5em; | ||
margin-top: 2em; | margin-top: 2em; | ||
Revision as of 13:53, 7 September 2016
- top_title, #sideMenu, .action-view #content { display: none; }
- top_menu_14{height:auto;}
- globalWrapper { padding: 0; }
- { box-sizing: border-box; }
a { outline: 0; text-decoration: none; } a:hover, a:focus { text-decoration: none; } body { font-size: medium; font-weight: 500; color: #333;
background: #fff;
margin: 0; padding: 0; }
- HQ_page p {
font-family: inherit; font-size: inherit; text-align: inherit;
}
li { margin-bottom: 0; }
- content {
width: 100%; padding: 0; border: none; color: black; margin: 0; background-color: transparep default marginnt; position: static;
}
- amu-content {
font: medium 'Libre Baskerville', sans-serif;
font-weight: 500; color: #333;
line-height: normal;
display: flex; flex-direction: column; min-height: calc(100vh - 18px); }
- toc { position: fixed;
left: 50%; margin-left: 5em; margin-top: 2em; font: medium 'Raleway', sans-serif; background-color: #fff; border: 0; border-left: 1px solid #aaa; }
- toc #toctitle { text-align: left; }
- toc h2 { font-weight: 400; }
.content_wrapper, .first-page { flex: 1; position: relative; }
.page_content { width: 50%; margin: 0 2em; }
h1, h2, h3, h4, h5, h6 {
font: medium 'Raleway', sans-serif;
font-weight: 400;
font-style: normal;
color:inherit;
background:none;
margin:0;
padding:0;
border:0;
}
h1 { font-weight: 500; font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: .67em; margin: 2.33em 0; }
p { line-height: 1.5; margin: 1em 0;}
.headline {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
background: url(
) no-repeat center;
background-size: contain;
}
.headline h1 {
position: absolute;
top: 1em;
left: 1em;
text-align: center;
font-size: 1em;
margin: 0 auto;
}
.headline h1 a {
display: block;
font-weight: 500;
font-size: 5em;
background: rgba(0, 0, 0, 0.7);
color: #eee;
padding: 5px;
}
.headline h1 a:hover { background: rgba(0, 0, 0, 0.5); }
.headline h1 .text-muted { font-weight: 300; }
/* nav + * { margin-top: 3em; } */
/* sponsors */ header { height: calc(100vh - 3em); /* for fixed nav */ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
- sponsors { text-align: center; min-height: 20em; }
- sponsors ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin: 0; padding: 0; }
- sponsors li { display: inline-block; }
- sponsors img { height: 90px; margin: 1em; }
- fsdie { height: 127px !important; }
- idt { height: auto !important; }
- snapgene, #promega, #grosseron { height: 3em !important; }
.arrow-down { text-align: center; line-height: 0.5; } .arrow-down a { display: inline-block; text-decoration: none; font-size: 4em; color: #d33; -webkit-transition: 200ms -webkit-transform ease-out; transition: 200ms -webkit-transform ease-out; transition: 200ms transform ease-out; transition: 200ms transform ease-out, 200ms -webkit-transform ease-out; -webkit-animation: heartbeat 1300ms ease 0s infinite normal; animation: heartbeat 1300ms ease 0s infinite normal; position: relative; top: -0.5em; /* align vertically */ } .arrow-down a:hover { -webkit-animation: none; animation: none; color: #999; }
- sponsors img {
-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; filter: grayscale(100%); -webkit-filter: grayscale(100%); }
- sponsors img:hover {
filter: grayscale(0%); -webkit-filter: grayscale(0%); }
.featurette { font: medium 'Lato', sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; min-width: 300px; min-height: calc(100vh - 3em); color: #eee; background-blend-mode: luminosity; -webkit-transition: 80ms ease-out; transition: 80ms ease-out; } /* .featurette:before { background-repeat: no-repeat; }
- /
.featurette:hover, .featurette:focus { -webkit-box-flex: 3; -ms-flex-positive: 3; flex-grow: 3; background-color: transparent; font-size: 1.2em; }
.sec-col:hover > .featurette:not(:hover), .sec-col:focus > .featurette:not(:focus) { background-color: #000; font-size: 0.8em; }
.featurette .mw-editsection a { color: #ddf; }
.sec-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
.featurette .lead { font-size: 1.2em; font-weight: 700; }
.featurette h2 { font-size: 3em; font-weight: 300; margin: 0 auto; display: inline; }
.featurette h2 + div { margin-top:1em; }
.featurette h2, .featurette h2 + div { background-color: rgba(0, 0, 0, 0.3); padding: 5px; }
.featurette-science h2, .featurette-science h2 + div { background-color: rgba(255, 255, 255, 0.7); }
.featurette > div {
/*background-color: rgba(255, 255, 255, 0.7);*/
padding: 2em;
}
.text-muted { font-weight: 500; }
/* .featurette:before { -webkit-filter: grayscale(0%); filter: grayscale(0%); transition: all 0.5s ease-out; }
.featurette:hover:before { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
- /
.featurette h2, .featurette h2 + div { padding: 5px; }
.featurette h2 + div:first-child, .featurette h2 + div:last-child { padding-top: 0; padding-bottom: 0; }
/* .featurette-mine h2, .featurette-mine h2 + div { color: hsl(344.9,76.5%,72%); text-shadow: 1px 1px hsla(344.9,76.5%,78%, 0.3); }
.featurette-road h2, .featurette-road h2 + div { color: hsl(135.1,66.5%,68%); text-shadow: 1px 1px hsla(135.1,66.5%,98%, 0.3); }
.featurette-science h2, .featurette-science h2 + div { color: hsl(285.3,66.5%,38%); text-shadow: 1px 1px hsla(285.3,66.5%,88%, 0.3); }*/
.featurette-mine:hover h2, .featurette-mine:hover h2 + div, .featurette-mine:focus h2, .featurette-mine:focus h2 + div { color: #eee; text-shadow: none; background-color: hsl(344.9,66.5%,58%); }
.featurette-road:hover h2, .featurette-road:hover h2 + div, .featurette-road:focus h2, .featurette-road:focus h2 + div { color: #eee; text-shadow: none; background-color: hsl(135.1,66.5%,58%); }
.featurette-science:hover h2, .featurette-science:hover h2 + div, .featurette-science:focus h2, .featurette-science:focus h2 + div { color: #eee; text-shadow: none; background-color: hsl(285.3,66.5%,58%); }
.featurette-mine {
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.9)), url(
) no-repeat hsl(344.9,66.5%,58%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.9)), url() no-repeat hsl(344.9,66.5%,58%);
background-size: cover;
background-position: 50% 30%;
}
.featurette-mine:hover, .featurette-mine:focus {
background: url() no-repeat transparent;
background-size: cover;
background-position: 50% 30%; }
.featurette-road {
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.9)), url(
) no-repeat hsl(135.1,66.5%,58%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.9)), url() no-repeat hsl(135.1,66.5%,58%);
background-size: cover;
background-position: 50% 0%;
}
.featurette-road:hover, .featurette-road:focus {
background: url() no-repeat transparent;
background-size: cover;
background-position: 50% 0%; }
.featurette-science {
background: /*linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7)),*/ url(
) no-repeat hsl(285.3,66.5%,58%);
background-position: 20% 0%;
color: #333;
background-size: cover;
}
/*
* Navigation */
- target:before {
content:""; display:block; height:3em; margin:-3em 0 0; } footer { padding: 1em; } footer, nav { background-color: #333; color: #bbb; font-family: 'Raleway', sans-serif; } footer nav, nav li { color: #bbb } footer a, nav a { color: #eee; } nav a { display: block; } footer a:visited, nav a:visited { color: #eee; } footer a:hover, footer a:focus, nav a:hover, nav a:focus { color: #fff; } nav li a { -webkit-transition: background 200ms ease-out; transition: background 200ms ease-out; }
.navbar-toggle { display: none; } .navbar-collapse, .nav, nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; } .navbar-header { margin: 1em; } .navbar-collapse { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
nav.navbar ul { list-style-type: none; list-style-image: none; padding: 0; margin: 0; line-height: normal; } .nav > li { cursor: default; } .social li, .menu_item a { padding: 1em; }
nav .submenu { display: none; position: absolute; z-index: 3; background-color: rgba(51,51,51, 0.99) ; } .social, .social ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .menu_item > a { text-transform: uppercase; }
/*
* social icons and heartbeat */
@-webkit-keyframes heartbeat {
0% { -webkit-transform: scale(1); transform: scale(1); }
14% { -webkit-transform: scale(1.5); transform: scale(1.5); }
28% { -webkit-transform: scale(1); transform: scale(1); }
42% { -webkit-transform: scale(1.5); transform: scale(1.5); }
70% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes heartbeat {
0% { -webkit-transform: scale(1); transform: scale(1); }
14% { -webkit-transform: scale(1.5); transform: scale(1.5); }
28% { -webkit-transform: scale(1); transform: scale(1); }
42% { -webkit-transform: scale(1.5); transform: scale(1.5); }
70% { -webkit-transform: scale(1); transform: scale(1); }
}
.fa-facebook-square { font-size: 1.5em; color: #3b579d; } .fa-twitter-square { font-size: 1.5em; color: #4099ff; }
.social a:hover i {-webkit-animation: heartbeat 1300ms ease 0s infinite normal;animation: heartbeat 1300ms ease 0s infinite normal; color: #eee; }
.ss-hidden { position: static; width: auto; height: auto; padding: auto; margin: auto; overflow: auto; clip: auto; border: 0; }
@media all and (min-width: 40em) { nav { position: -webkit-sticky; position: sticky; z-index: 2; top: 20px; } nav a:hover, nav a:focus { color: #fff; } .menu_item:hover, .menu_item:focus { background-color: #999; color: #fff; }
nav ul.submenu li a:hover, nav ul.submenu li a:focus { background-color: rgb(153,153,153); color: #eee; }
nav .menu_item:hover .submenu , nav .submenu:target { display: block; } }
@media all and (max-width: 39.99em) { /* small screens */
.sec-col, .sec-col > .featurette { display: block; }
.navbar-collapse, .nav, nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
nav, nav .submenu, .headline, header .headline, .headline h1 { position: static; }
nav { text-align: center; }
nav .submenu { border: 2px dashed white; border-width: 1px 0; }
header { height: auto; } .headline { background-position: center top; padding-top: calc(100vw/3); } body { margin-top: 0; } .featurette { background-blend-mode: normal; } .ss-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .social, .social ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } .arrow-down { display: none } nav .menu_item:target .submenu { display: block; } }
