|
|
Line 161: |
Line 161: |
| <section id="three" class="wrapper spotlight style3"> | | <section id="three" class="wrapper spotlight style3"> |
| <div class="inner"> | | <div class="inner"> |
− | <a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/3/35/Tokyotech.JPG" alt="" /></a> | + | <a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/3/35/Tokyotech.JPG" style="width:400px;height:100%;"> |
| <div class="content"> | | <div class="content"> |
| <h1 class="major"></h1> | | <h1 class="major"></h1> |
Line 1,912: |
Line 1,912: |
| } | | } |
| | | |
− | a.special:not(.button):before {
| + | a.special:not(.button):hover:before { |
− | -moz-transition: background-color 0.2s ease-in-out;
| + | |
− | -webkit-transition: background-color 0.2s ease-in-out;
| + | |
− | -ms-transition: background-color 0.2s ease-in-out;
| + | |
− | transition: background-color 0.2s ease-in-out;
| + | |
− | border-radius: 100%;
| + | |
− | border: solid 2px rgba(255, 255, 255, 0.125);
| + | |
− | content: '\f105';
| + | |
− | display: inline-block;
| + | |
− | font-size: 1.25em;
| + | |
− | height: 2em;
| + | |
− | line-height: 1.65em;
| + | |
− | margin-right: 0.85em;
| + | |
− | text-align: center;
| + | |
− | text-indent: 0.15em;
| + | |
− | vertical-align: middle;
| + | |
− | width: 2em;
| + | |
− | }
| + | |
− | | + | |
− | a.special:not(.button):hover:before {
| + | |
| background-color: rgba(255, 255, 255, 0.025); | | background-color: rgba(255, 255, 255, 0.025); |
| } | | } |
Line 2,026: |
Line 2,007: |
| } | | } |
| | | |
− | code { | + | |
− | background: rgba(255, 255, 255, 0.025);
| + | |
− | border-radius: 5px;
| + | |
− | border: solid 2px rgba(255, 255, 255, 0.125);
| + | |
− | font-family: "Courier New", monospace;
| + | |
− | font-size: 0.9em;
| + | |
− | margin: 0 0.25em;
| + | |
− | padding: 0.25em 0.65em;
| + | |
− | }
| + | |
− | | + | |
| pre { | | pre { |
| -webkit-overflow-scrolling: touch; | | -webkit-overflow-scrolling: touch; |
Line 2,116: |
Line 2,088: |
| input[type="tel"], | | input[type="tel"], |
| select, | | select, |
− | textarea { | + | |
− | -moz-appearance: none;
| + | |
− | -webkit-appearance: none;
| + | |
− | -ms-appearance: none;
| + | |
− | appearance: none;
| + | |
− | background: rgba(255, 255, 255, 0.025);
| + | |
− | border-radius: 5px;
| + | |
− | border: none;
| + | |
− | border: solid 2px rgba(255, 255, 255, 0.125);
| + | |
− | color: inherit;
| + | |
− | display: block;
| + | |
− | outline: 0;
| + | |
− | padding: 0 1em;
| + | |
− | text-decoration: none;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
| input[type="text"]:invalid, | | input[type="text"]:invalid, |
| input[type="password"]:invalid, | | input[type="password"]:invalid, |
Line 2,240: |
Line 2,196: |
| } | | } |
| | | |
− | input[type="checkbox"] + label:before, | + | |
− | input[type="radio"] + label:before {
| + | |
− | background: rgba(255, 255, 255, 0.025);
| + | |
− | border-radius: 5px;
| + | |
− | border: solid 2px rgba(255, 255, 255, 0.125);
| + | |
− | content: '';
| + | |
− | display: inline-block;
| + | |
− | height: 1.65em;
| + | |
− | left: 0;
| + | |
− | line-height: 1.58125em;
| + | |
− | position: absolute;
| + | |
− | text-align: center;
| + | |
− | top: 0;
| + | |
− | width: 1.65em;
| + | |
− | }
| + | |
| | | |
| input[type="checkbox"]:checked + label:before, | | input[type="checkbox"]:checked + label:before, |
Line 2,269: |
Line 2,211: |
| } | | } |
| | | |
− | input[type="checkbox"] + label:before { | + | |
− | border-radius: 5px;
| + | |
− | }
| + | |
| | | |
− | input[type="radio"] + label:before { | + | |
− | border-radius: 100%;
| + | |
− | }
| + | |
| | | |
| ::-webkit-input-placeholder { | | ::-webkit-input-placeholder { |
Line 2,304: |
Line 2,242: |
| /* Box */ | | /* Box */ |
| | | |
− | .box { | + | |
− | border-radius: 5px;
| + | |
− | border: solid 2px rgba(255, 255, 255, 0.125);
| + | |
− | margin-bottom: 2em;
| + | |
− | padding: 1.5em;
| + | |
− | }
| + | |
| | | |
| .box > :last-child, | | .box > :last-child, |
Line 2,317: |
Line 2,250: |
| } | | } |
| | | |
− | .box.alt { | + | |
− | border: 0;
| + | |
− | border-radius: 0;
| + | |
− | padding: 0;
| + | |
− | }
| + | |
| | | |
| /* Icon */ | | /* Icon */ |
Line 2,346: |
Line 2,275: |
| /* Image */ | | /* Image */ |
| | | |
− | .image { | + | |
− | border-radius: 5px;
| + | |
− | border: 0;
| + | |
− | display: inline-block;
| + | |
− | position: relative;
| + | |
− | }
| + | |
− | | + | |
− | .image img {
| + | |
− | border-radius: 5px;
| + | |
− | display: block;
| + | |
− | }
| + | |
| | | |
| .image.left, .image.right { | | .image.left, .image.right { |
Line 2,574: |
Line 2,493: |
| } | | } |
| | | |
− | ul.contact li:before {
| + | |
− | border-radius: 100%;
| + | |
− | border: solid 2px rgba(255, 255, 255, 0.125);
| + | |
− | display: inline-block;
| + | |
− | font-size: 0.8em;
| + | |
− | height: 2.5em;
| + | |
− | left: 0;
| + | |
− | line-height: 2.35em;
| + | |
− | position: absolute;
| + | |
− | text-align: center;
| + | |
− | top: 0;
| + | |
− | width: 2.5em;
| + | |
− | }
| + | |
| | | |
| ul.contact li:first-child { | | ul.contact li:first-child { |
Line 2,612: |
Line 2,519: |
| } | | } |
| | | |
− | ul.pagination li > .page {
| + | ul.pagination li > .page:hover { |
− | -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
| + | |
− | -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
| + | |
− | -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
| + | |
− | transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
| + | |
− | border-bottom: 0;
| + | |
− | border-radius: 5px;
| + | |
− | display: inline-block;
| + | |
− | height: 1.5em;
| + | |
− | line-height: 1.5em;
| + | |
− | margin: 0 0.125em;
| + | |
− | min-width: 1.5em;
| + | |
− | padding: 0 0.5em;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | | + | |
− | ul.pagination li > .page:hover {
| + | |
| background-color: rgba(255, 255, 255, 0.025); | | background-color: rgba(255, 255, 255, 0.025); |
| } | | } |
Line 2,756: |
Line 2,647: |
| input[type="button"], | | input[type="button"], |
| button, | | button, |
− | .button { | + | |
− | -moz-appearance: none;
| + | |
− | -webkit-appearance: none;
| + | |
− | -ms-appearance: none;
| + | |
− | appearance: none;
| + | |
− | -moz-transition: background-color 0.2s ease-in-out;
| + | |
− | -webkit-transition: background-color 0.2s ease-in-out;
| + | |
− | -ms-transition: background-color 0.2s ease-in-out;
| + | |
− | transition: background-color 0.2s ease-in-out;
| + | |
− | background-color: transparent;
| + | |
− | border-radius: 5px;
| + | |
− | border: 0;
| + | |
− | box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125);
| + | |
− | color: #ffffff !important;
| + | |
− | cursor: pointer;
| + | |
− | display: inline-block;
| + | |
− | font-family: Raleway, Helvetica, sans-serif;
| + | |
− | font-size: 0.8em;
| + | |
− | font-weight: 700;
| + | |
− | height: 3.75em;
| + | |
− | letter-spacing: 0.1em;
| + | |
− | line-height: 3.75em;
| + | |
− | padding: 0 2.25em;
| + | |
− | text-align: center;
| + | |
− | text-decoration: none;
| + | |
− | text-transform: uppercase;
| + | |
− | white-space: nowrap;
| + | |
− | }
| + | |
− | | + | |
| input[type="submit"]:hover, | | input[type="submit"]:hover, |
| input[type="reset"]:hover, | | input[type="reset"]:hover, |
Line 2,907: |
Line 2,770: |
| } | | } |
| | | |
− | .features article { | + | |
− | padding: 1.75em 1.75em 0.1em 1.75em ;
| + | |
− | background-color: #f2efe8;
| + | |
− | border-radius: 5px;
| + | |
− | margin: 1.5em 3em 1.5em 0;
| + | |
− | width: calc(50% - 1.5em);
| + | |
− | }
| + | |
| | | |
| .features article:nth-child(2n) { | | .features article:nth-child(2n) { |
Line 2,919: |
Line 2,776: |
| } | | } |
| | | |
− | .features article .image { | + | |
− | border-radius: 5px 5px 0 0;
| + | |
− | display: block;
| + | |
− | margin-bottom: 1.75em;
| + | |
− | margin-left: -1.75em;
| + | |
− | margin-top: -1.75em;
| + | |
− | position: relative;
| + | |
− | width: calc(100% + 3.5em);
| + | |
− | }
| + | |
− | | + | |
− | .features article .image img {
| + | |
− | border-radius: 5px 5px 0 0;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
| | | |
| @media screen and (max-width: 980px) { | | @media screen and (max-width: 980px) { |
Line 3,031: |
Line 2,875: |
| } | | } |
| | | |
− | #header nav a[href="#menu"] { | + | |
− | text-decoration: none;
| + | |
− | -moz-transition: background-color 0.2s ease-in-out;
| + | |
− | -webkit-transition: background-color 0.2s ease-in-out;
| + | |
− | -ms-transition: background-color 0.2s ease-in-out;
| + | |
− | transition: background-color 0.2s ease-in-out;
| + | |
− | border-radius: 5px;
| + | |
− | box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125);
| + | |
− | padding: 0 1.35em;
| + | |
− | }
| + | |
| | | |
| #header nav a[href="#menu"]:before { | | #header nav a[href="#menu"]:before { |
Line 3,091: |
Line 2,926: |
| } | | } |
| | | |
− | #header nav a[href="#menu"] { | + | |
− | box-shadow: none;
| + | |
− | padding: 0 1em;
| + | |
− | border-radius: 0;
| + | |
− | }
| + | |
− | | + | |
| #header nav a[href="#menu"]:hover, #header nav a[href="#menu"]:active { | | #header nav a[href="#menu"]:hover, #header nav a[href="#menu"]:active { |
| background-color: inherit; | | background-color: inherit; |
Line 3,172: |
Line 3,002: |
| } | | } |
| | | |
− | #menu .inner { | + | |
− | padding: 2.5em 1.5em 0.5em 1.5em ;
| + | |
− | -moz-transform: translateY(0.5em);
| + | |
− | -webkit-transform: translateY(0.5em);
| + | |
− | -ms-transform: translateY(0.5em);
| + | |
− | transform: translateY(0.5em);
| + | |
− | -moz-transition: opacity 0.35s ease, -moz-transform 0.35s ease;
| + | |
− | -webkit-transition: opacity 0.35s ease, -webkit-transform 0.35s ease;
| + | |
− | -ms-transition: opacity 0.35s ease, -ms-transform 0.35s ease;
| + | |
− | transition: opacity 0.35s ease, transform 0.35s ease;
| + | |
− | -webkit-overflow-scrolling: touch;
| + | |
− | background: #f2efe8;
| + | |
− | border-radius: 5px;
| + | |
− | display: block;
| + | |
− | max-width: 100%;
| + | |
− | opacity: 0;
| + | |
− | position: relative;
| + | |
− | width: 18em;
| + | |
− | }
| + | |
− | | + | |
| #menu h2 { | | #menu h2 { |
| border-bottom: solid 2px rgba(255, 255, 255, 0.125); | | border-bottom: solid 2px rgba(255, 255, 255, 0.125); |
Line 3,225: |
Line 3,036: |
| } | | } |
| | | |
− | #menu .links li a {
| + | |
− | border-radius: 5px;
| + | |
− | border: 0;
| + | |
− | display: block;
| + | |
− | font-family: Raleway, Helvetica, sans-serif;
| + | |
− | font-size: 0.8em;
| + | |
− | font-weight: 200;
| + | |
− | letter-spacing: 0.1em;
| + | |
− | line-height: 1.85em;
| + | |
− | padding: 0.75em 0;
| + | |
− | text-transform: uppercase;
| + | |
− | }
| + | |
| | | |
| #menu .links li a:hover { | | #menu .links li a:hover { |
Line 3,304: |
Line 3,104: |
| } | | } |
| | | |
− | #banner .logo .icon { | + | |
− | border-radius: 100%;
| + | |
− | border: solid 2px rgba(255, 255, 255, 0.125);
| + | |
− | cursor: default;
| + | |
− | display: inline-block;
| + | |
− | font-size: 2em;
| + | |
− | height: 2.25em;
| + | |
− | line-height: 2.25em;
| + | |
− | text-align: center;
| + | |
− | width: 2.25em;
| + | |
− | }
| + | |
| | | |
| #banner h2 { | | #banner h2 { |
Line 3,691: |
Line 3,481: |
| } | | } |
| | | |
− | .wrapper.spotlight .image {
| + | |
− | border-radius: 100%;
| + | |
− | margin: 0 3em 2em 0;
| + | |
− | width: 22em;
| + | |
− | overflow: hidden;
| + | |
− | -ms-flex: 1;
| + | |
− | }
| + | |
− | | + | |
− | .wrapper.spotlight .image img {
| + | |
− | border-radius: 100%;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
| | | |
| + | |
| .wrapper.spotlight .content { | | .wrapper.spotlight .content { |
| width: 100%; | | width: 100%; |