Ligne 30 : |
Ligne 30 : |
| | | |
| .subtitle { display: none; } | | .subtitle { display: none; } |
− | .linkpreview {
| + | .linkpreview { |
− | height: 250px;
| + | height: 250px; |
− | width: 49.7%;
| + | width: 49.7%; |
− | display: inline-block;
| + | display: inline-block; |
− | margin-bottom: 20px;
| + | margin-bottom: 20px; |
− | vertical-align: top;
| + | vertical-align: top; |
− | font-family: Oxygen, Arial, 'Helvetica Neue', Helvetica, sans-serif;
| + | font-family: Oxygen, Arial, 'Helvetica Neue', Helvetica, sans-serif; |
− | scroll-snap-align: start;
| + | scroll-snap-align: start; |
− | }
| + | } |
− | @media (max-width: 750px) {
| + | @media (max-width: 750px) { |
− | .linkpreview {
| + | .linkpreview { width: 49%; } |
− | width: 49%;
| + | } |
− | }
| + | .linkpreview h3 { |
− | }
| + | font-size: 60%; |
− | .linkpreview h3 {
| + | text-transform: uppercase; |
− | font-size: 60%;
| + | margin-bottom: 0; |
− | text-transform: uppercase;
| + | font-weight: normal; |
− | margin-bottom: 0;
| + | } |
− | font-weight: normal;
| + | .linkpreview a { |
− | }
| + | font-size: 14px; |
− | .linkpreview a {
| + | text-decoration: none; |
− | font-size: 14px;
| + | color: black; |
− | text-decoration: none;
| + | font-style: italic; |
− | color: black;
| + | } |
− | font-style: italic;
| + | .linkpreview img { |
− | }
| + | width: 95%; |
− | .linkpreview img {
| + | height: 185px; |
− | width: 95%;
| + | object-fit: cover; |
− | height: 185px;
| + | } |
− | object-fit: cover;
| + | .tab label, .subtitle { |
− | }
| + | font-size: 110%; |
− | .tab label, .subtitle {
| + | font-weight: normal; |
− | font-size: 110%;
| + | font-variant: small-caps; |
− | font-weight: normal;
| + | font-family: Impact, Haettenschweiler, Arial Black; |
− | font-variant: small-caps;
| + | } |
− | font-family: Impact, Haettenschweiler, Arial Black;
| + | .contenttab { |
− | }
| + | padding-left: 3px; |
− | .contenttab {
| + | scroll-snap-type: y mandatory; |
− | padding-left: 3px;
| + | } |
− | scroll-snap-type: y mandatory;
| + | #tabs { |
− | }
| + | position: relative; |
− | #tabs {
| + | clear: both; |
− | position: relative;
| + | margin-left : auto; |
− | clear: both;
| + | margin-right: auto; |
− | margin-left : auto;
| + | max-width: 998px; |
− | margin-right: auto;
| + | } |
− | max-width: 998px;
| + | .tab { float: left; } |
− | }
| + | .tab label { |
− | .tab { float: left; }
| + | background: #c9adad; |
− | .tab label {
| + | padding: 5px 20px 5px 20px; |
− | background: #c9adad;
| + | border: 1px solid #ccc; |
− | padding: 5px 20px 5px 20px;
| + | margin-left: -1px; |
− | border: 1px solid #ccc;
| + | position: relative; |
− | margin-left: -1px;
| + | left: 1px; |
− | position: relative;
| + | cursor: pointer; |
− | left: 1px;
| + | } |
− | cursor: pointer;
| + | .tab [type=radio] { display: none; } |
− | }
| + | .content { |
− | .tab [type=radio] {
| + | position: absolute; |
− | display: none;
| + | top: 31px; |
− | }
| + | left: 0; |
− | .content {
| + | background: rgba(255, 255, 255, .4); |
− | position: absolute;
| + | right: 0; |
− | top: 31px;
| + | bottom: 0; |
− | left: 0;
| + | padding: 5px; |
− | background: rgba(255, 255, 255, .4);
| + | border: 1px solid #ccc; |
− | right: 0;
| + | } |
− | bottom: 0;
| + | .content > * { |
− | padding: 5px;
| + | opacity: 0; |
− | border: 1px solid #ccc;
| + | -webkit-transition: opacity 0.6s ease; |
− | }
| + | -moz-transition: opacity 0.6s ease; |
− | .content > * {
| + | -ms-transition: opacity 0.6s ease; |
− | opacity: 0;
| + | -o-transition: opacity 0.6s ease; |
− | -webkit-transition: opacity 0.6s ease;
| + | } |
− | -moz-transition: opacity 0.6s ease;
| + | [type=radio]:checked ~ label { |
− | -ms-transition: opacity 0.6s ease;
| + | background: rgba(255, 255, 255, 0.85); |
− | -o-transition: opacity 0.6s ease;
| + | border-bottom: 2px solid rgba(255, 255, 255, 0); |
− | }
| + | z-index: 2; |
− | [type=radio]:checked ~ label {
| + | } |
− | background: rgba(255, 255, 255, 0.85);
| + | [type=radio]:checked ~ label ~ .content { z-index: 1; } |
− | border-bottom: 2px solid rgba(255, 255, 255, 0);
| + | [type=radio]:checked ~ label ~ .content > * { opacity: 1; } |
− | z-index: 2;
| + | .contenttab { height: 260px; overflow-y: scroll; } |
− | }
| + | #tabs { min-height: 5980px; } |
− | [type=radio]:checked ~ label ~ .content { z-index: 1; }
| |
− | [type=radio]:checked ~ label ~ .content > * { opacity: 1; }
| |
− | .content { height: 5940px; }
| |
− | .contenttab { height: 5940px; }
| |
− | #tabs { min-height: 5980pxpx; }
| |
− | | |
| | | |
| | | |