Difference between revisions of "Template:Lanzhou/CSS"
| Line 4: | Line 4: | ||
font-style: normal; | font-style: normal; | ||
font-weight: 400; | font-weight: 400; | ||
| − | src: local('Material Icons'), local('MaterialIcons-Regular'), url(MaterialIcons-Regular. | + | src: local('Material Icons'), local('MaterialIcons-Regular'), url(MaterialIcons-Regular.woff) format('woff'); |
} | } | ||
Revision as of 08:57, 22 August 2017
/* fallback */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(MaterialIcons-Regular.woff) format('woff'); }
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
/* Main */ .surface{ display: flex; align-items: center; justify-content: center; width: 200px; height: 100px; padding: 1rem; cursor: pointer; user-select: none; -webkit-user-select: none; } /* General */
- , :after, :before{
box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section{ display: block; } a, a:active, a:hover, a:link, a:visited{ font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: .875rem; font-weight: 400; letter-spacing: .04em; line-height: 1.25rem; color: rgba(0, 0, 0, 0.87); font-family: Roboto Mono; } nav ul{ list-style-type: none; } li{ list-style: none; padding-bottom: 8px; } body{ display: -webkit-box; display: -ms-flexbox; /* display: flex; */ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: calc(100vh + 192px); }
- to-top{
display: none; position: fixed; bottom: 1rem; right: 1rem; } .page__content, .footer__content{ max-width: 1312px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; } /* Navigation */ .mdc-drawer-scroll-lock{ overflow: initial; } .mdc-temporary-drawer__header .logo{ display: block; width: 100px; height: 100px; margin-right: 12px; border-radius: 100px; } .mdc-temporary-drawer__header .logo-name{ color: white; font-size: 16px; } /* Page */ .page__content{ width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: 150px; } .page__article{ height: auto; max-width: 760px; } .page__drawer{ position: fixed; width: 304px; height: auto; margin-right: 24px; border: 0; } .page__drawer + .page__article, .story{ width: calc(100% - 328px); } .page__article{ position: relative; left: 328px; } .story{ position: initial; left: 0; max-width: initial; } .story-image{ position: initial; } .page__drawer-list{ font-weight: 500; } .page__drawer-list__link{ display: inline-block; padding: 8px 0; } .page__drawer-list__link, .page__drawer-list__link:hover, .page__drawer-list__link:link, .page__drawer-list__link:active, .page__drawer-list__link:visited{ text-decoration: none; } .page__drawer-list__link--active{ color: black; font-weight: 600 !important; border-bottom: 1px black solid; } .page__article__citations{ padding: 0; } .page__article__citation__item{ color: #4F4F4F; } .team-page{ display: block; } .team-cards{ padding: 0; } .team-cards .mdc-card{ max-width: 21.875rem; } /* Footer */ .footer{ font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: .875rem; font-weight: 400; letter-spacing: .04em; line-height: 1.25rem; background: #fafafa; height: 192px; margin-top: 144px; } .footer ul{ padding: 0; } .footer__content{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 32px; height: 100%; } .footer__logo{ display: inline-block; font-size: 1.5em; font-weight: 400; opacity: .5; } .footer__links{ display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; left: -8px; list-style-type: none; margin-left: 0; } .footer__links li{ margin-left: 24px; } .footer__links li:first-child{ margin-left: 0px; } .footer__link{ font-family: Roboto, sans-serif; color: rgba(0, 0, 0, 0.87); padding: 8px; text-decoration: none; } .footer__link:active, .footer__link:hover, .footer__link:link, .footer__link:visited{ font-family: Roboto; } .footer__link-container--right{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right; } .footer__made-with-desktop{ display: initial; } .footer__made-with-mobile{ display: none; } /* Media */ @media (min-width: 1200px){ #to-top{ bottom: 3rem; right: 5rem; } } @media (max-width: 1312px) and (min-width: 721px){ .page__content, .footer__content{ max-width: 1400px; width: 100%; padding-left: 60px; padding-right: 60px; } } @media (max-width: 720px){ .footer{ height: 114px; margin-top: 120px; } .footer__content{ padding-bottom: 12px; padding-top: 24px; } .footer__link{ font-size: .75rem; } .footer__link:active, .footer__link:hover, .footer__link:link, .footer__link:visited{ font-size: .75rem; } .footer__made-with-desktop{ display: none; } .footer__made-with-mobile{ display: inline-block; } }
