|
|
| 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%; |
