|
|
| Line 1: |
Line 1: |
| − | /*iGEM Barcelona UPF CRG Stylesheet */
| |
| | | | |
| − | /*Color variables*/
| |
| − |
| |
| − | :root {
| |
| − | --main-color: #f2f3f4;
| |
| − | --var1-color: #99CFB2;
| |
| − | --var2-color: #495F7F;
| |
| − | --hovered-color: #589EFF;
| |
| − | --menu-clicked-color: #AFAFB0;
| |
| − | }
| |
| − |
| |
| − | /*Defaults*/
| |
| − |
| |
| − | * {
| |
| − | font-family: "roboto_monoregular";
| |
| − | }
| |
| − |
| |
| − | /*Body Style*/
| |
| − |
| |
| − | body {
| |
| − | margin: 1em;
| |
| − | background-color: var(--main-color);
| |
| − | }
| |
| − |
| |
| − | /*Page Template*/
| |
| − |
| |
| − | .grid-container {
| |
| − | display: grid;
| |
| − | grid-template-areas: 'header' 'main' 'footer';
| |
| − | grid-gap: 1em;
| |
| − | }
| |
| − |
| |
| − | /*Main Areas*/
| |
| − |
| |
| − | .header {
| |
| − | grid-area: header;
| |
| − | }
| |
| − |
| |
| − | .main {
| |
| − | grid-area: main;
| |
| − | }
| |
| − |
| |
| − | .footer {
| |
| − | grid-area: footer;
| |
| − | grid-template-areas: 'contact_media copyright sponsors';
| |
| − | display: inline;
| |
| − | }
| |
| − |
| |
| − | /*navigation list*/
| |
| − |
| |
| − | #navlist {
| |
| − | padding: 7px 7px 10px 100px;
| |
| − | margin: 0px 0px 20px 0px;
| |
| − | text-align: center;
| |
| − | letter-spacing: 2px;
| |
| − | color: #3b444b;
| |
| − | background: #AFAFB0;
| |
| − | }
| |
| − |
| |
| − | #navlist li {
| |
| − | list-style: none;
| |
| − | margin: auto;
| |
| − | display: inline;
| |
| − | }
| |
| − |
| |
| − | #navlist li a {
| |
| − | padding: 5px 0.75em;
| |
| − | margin: auto;
| |
| − | padding: 4px 4px 4px 4px;
| |
| − | color: #fff;
| |
| − | background: #AFAFB0;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | #navlist li a:link {
| |
| − | color: #fff;
| |
| − | padding: 4px 4px 4px 4px;
| |
| − | background: #AFAFB0;
| |
| − | }
| |
| − |
| |
| − | #navlist li a:visited {
| |
| − | color: #fff;
| |
| − | padding: 4px 4px 4px 4px;
| |
| − | background: #589eff;
| |
| − | }
| |
| − |
| |
| − | #navlist li a:hover {
| |
| − | color: #000;
| |
| − | padding: 4px 4px 4px 4px;
| |
| − | background: #e6bdbd;
| |
| − | }
| |
| − |
| |
| − | #navlist li a#current {
| |
| − | color: #000;
| |
| − | padding: 4px 4px 4px 4px;
| |
| − | margin: 0 0 20 0;
| |
| − | background: #bba2c7
| |
| − | }
| |
| − |
| |
| − | ul {
| |
| − | list-style-type: none;
| |
| − | margin: auto;
| |
| − | overflow: hidden;
| |
| − | background-color: #333;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | li a, .dropbtn {
| |
| − | display: inline-block;
| |
| − | color: white;
| |
| − | text-align: left;
| |
| − | padding: 50px 16px;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | li a: hover,
| |
| − | .dropdown:hover .dropbtn {
| |
| − | position: absolute;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | li.dropdown {
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | .dropdown-content {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | background-color: #f9f9f9;
| |
| − | min-width: 160px;
| |
| − | box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
| |
| − | }
| |
| − |
| |
| − | .dropdown-content a {
| |
| − | color: black;
| |
| − | padding: 10px 16px;
| |
| − | text-decoration: none;
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | .dropdown-content a:hove {
| |
| − | background-color: #f1f1f1
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*Social Media*/
| |
| − |
| |
| − | .twitter {
| |
| − | grid-area: twitter;
| |
| − | }
| |
| − |
| |
| − | .instagram {
| |
| − | grid-area: instagram;
| |
| − | }
| |
| − |
| |
| − | /*General Styling*/
| |
| − |
| |
| − | .header>img,
| |
| − | .header>div {
| |
| − | display: inline-block;
| |
| − | vertical-align: middle;
| |
| − | }
| |
| − |
| |
| − | .footer>img {
| |
| − | vertical-align: middle;
| |
| − | }
| |
