|
|
Line 49: |
Line 49: |
| | | |
| article, | | article, |
− | nav,
| |
| section { | | section { |
| display: block; | | display: block; |
Line 80: |
Line 79: |
| | | |
| @media (max-width: 900px) { | | @media (max-width: 900px) { |
− | .section-nav,
| |
− | .section-nav ul,
| |
− | .section-nav ul ul,
| |
− | .section-nav li a,
| |
− | .section-nav-marker {
| |
− | display: none;
| |
− | visibility: hidden;
| |
− | }
| |
− |
| |
| #text { | | #text { |
| padding: 2em; | | padding: 2em; |
Line 102: |
Line 92: |
| svg:not(:root) { | | svg:not(:root) { |
| overflow: hidden; | | overflow: hidden; |
− | }
| |
− |
| |
− | .section-nav {
| |
− | position: fixed;
| |
− | left: 1.5em;
| |
− | top: 5em;
| |
− | padding: 5em 1em 5em 0;
| |
− | width: 14.5em;
| |
− | font-size: 18px;
| |
− | line-height: 2;
| |
− | padding-bottom: 50em;
| |
− | }
| |
− |
| |
− | #abr {
| |
− | font-size: 15px;
| |
− | }
| |
− |
| |
− | .section-nav-marker {
| |
− | border-right: 1px solid #efefef;
| |
− | max-height: 25em;
| |
− | }
| |
− |
| |
− | @media (max-height: 600px) {
| |
− | .section-nav {
| |
− | padding: 2em 1em 12em 1em;
| |
− | }
| |
− | }
| |
− |
| |
− | @media (max-height: 500px) {
| |
− | .section-nav,
| |
− | .section-nav ul,
| |
− | .section-nav ul ul,
| |
− | .section-nav li a,
| |
− | .section-nav-marker {
| |
− | display: none;
| |
− | visibility: hidden;
| |
− | }
| |
− | }
| |
− |
| |
− | .section-nav ul {
| |
− | list-style: none;
| |
− | padding: 0;
| |
− | margin: 0;
| |
− | }
| |
− |
| |
− | .section-nav ul ul {
| |
− | padding-left: 2em;
| |
− | }
| |
− |
| |
− | .section-nav li a {
| |
− | display: inline-block;
| |
− | color: #aaa;
| |
− | text-decoration: none;
| |
− | -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
| |
− | transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
| |
− | }
| |
− |
| |
− | .section-nav li.visible > a {
| |
− | color: rgba(155,30,30);
| |
− | font-weight: 500;
| |
− | -webkit-transform: translate(5px);
| |
− | transform: translate(5px);
| |
− | }
| |
− |
| |
− | .section-nav li a:hover {
| |
− | color: rgba(155,30,30,.8);
| |
− | font-weight: 550;
| |
− | }
| |
− |
| |
− | .section-nav-marker {
| |
− | position: absolute;
| |
− | top: 0;
| |
− | left: 0;
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | z-index: -1;
| |
| } | | } |
| | | |