Template:Lanzhou/CSS

/* Variable */ /* Function */ .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: 0;

}

  1. mw-content-text {
 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);
 margin: 0;
 overflow-x: hidden;

}

  1. 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;

} .mdc-temporary-drawer .multi-nav-icon { 

 position: absolute;
 right: 16px;
 top: 0.5em;
 transition: 0.5s;

} .mdc-temporary-drawer .multi-nav-icon-rotate { 

 transform: rotate(180deg);

} .mdc-temporary-drawer .sub-nav { 

 display: none;

} .mdc-temporary-drawer .sub-nav .mdc-list-item { 

 background-color: #F7F7F7;
 padding-left: 3em;
 font-size: 0.8em;
 line-height: 1em;

} /* Page */ .page__content { 

 width: 100%;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
 margin-top: 120px;

} .page__article { 

 height: auto;

} .page__drawer { 

 position: fixed;
 width: 304px;
 height: auto;
 margin-right: 24px;
 border: 0;

} .page__drawer + .page__article, .story { 

 width: calc(100% - 328px);

}

  1. page__drawer-mobile-container {
 display: none;
 position: fixed;
 top: 56px;
 width: 100%;
 z-index: 1;
 background-color: #3f51b5;

}

  1. page__drawer-mobile-container nav {
 justify-content: center;

}

  1. page__drawer-mobile-container nav a {
 padding-top: 1em;
 padding-bottom: 1em;
 letter-spacing: 0.04em;
 line-height: 1.5rem;
 font-weight: 700;

} .page__article { 

 position: relative;
 left: 328px;

} .page__article .mdc-typography--headline { 

 border-style: solid;
 border-width: 0 0 0 8px;
 border-color: #3f51b5;
 padding-left: 0.5em;

} .page__article .page__article__list { 

 max-width: 700px;
 padding: 1em 1em 1em 3em;
 border: 1px solid rgba(0, 0, 0, 0.1);

} .page__article .page__article__list li { 

 list-style: inherit;

} .story { 

 position: initial;
 left: 0;
 max-width: initial;

} .story-image { 

 position: initial;

} .page__drawer-list { 

 padding: 0;
 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 { 

 margin-bottom: 1em;
 color: #4F4F4F;

} .team-page { 

 display: block;

} .team-cards { 

 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 margin-top: 16px;
 padding: 0;

} .team-cards .mdc-layout-grid__cell { 

 height: 21.875rem;
 max-width: 360px;
 min-width: 320px;
 flex-grow: 1;
 padding-bottom: 16px;

} .team-cards .mdc-card { 

 position: relative;
 width: 100%;
 height: 100%;
 padding-top: 240px;
 background-size: cover;
 background-color: #CACACA;
 background-position: center;
 background-repeat: no-repeat;
 justify-content: flex-start;
 transition: .8s;

} .team-cards .mdc-card section { 

 background: rgba(0, 0, 0, 0.5);
 margin-top: 0px;
 transition: .8s;

} .team-cards .mdc-card h1, .team-cards .mdc-card h2 { 

 transition: .8s;

} .team-cards .mdc-card .mdc-card__supporting-text { 

 height: 278px;

} .team-cards .mdc-card:hover { 

 padding-top: 20px;

} .team-cards .mdc-card:hover section { 

 background-color: rgba(255, 255, 255, 0.9);
 color: black;

} .team-cards .mdc-card:hover h1, .team-cards .mdc-card:hover h2 { 

 color: black;

} .team-cards .mdc-card:hover .scroll { 

 overflow: overlay;

} .team-cards .mdc-card #contacts { 

 padding: 8px 16px;

} .team-cards .mdc-card #contacts ul { 

 display: -webkit-flex;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 align-content: space-around;
 padding: 0;
 margin: 0;

} .team-cards .mdc-card #contacts ul li { 

 width: 88px;
 margin: 5px 5px 5px 5px;
 padding: 0px;
 flex-grow: 1;
 box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
 border-radius: 2px;
 transition: .5s;

} .team-cards .mdc-card #contacts ul li:hover { 

 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

} .team-cards .mdc-card #contacts ul li a { 

 display: block;
 width: 100%;
 height: 100%;
 color: white;
 font-size: 1em;
 line-height: 2em;
 text-decoration: none;
 text-align: center;

} .team-cards .mdc-card #contacts ul li a i { 

 margin-right: 10px;
 color: white;

} /* HP */ .timeline { 

 width: 100%;
 padding: 0;

} .timeline li { 

 position: relative;
 width: 8px;
 background-color: #ff4081;
 margin-left: auto;
 margin-right: auto;
 padding-top: 48px;
 padding-bottom: 48px;

} .timeline li::after { 

 content: ;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 36px;
 height: 36px;
 background-color: #757de8;
 border: 18px solid #ff4081;
 border-radius: 50%;
 transform: translate(-50%, -50%);
 transition: 1s;

} .timeline li .mdc-card { 

 position: relative;
 max-width: 21.875rem;
 min-width: 280px;
 visibility: visible;
 overflow: visible;
 background-color: #757de8;
 opacity: 0;
 transition: 1s;

} .timeline li .mdc-card::before { 

 position: absolute;
 content: ;
 width: 0;
 height: 0;
 top: 50%;
 transform: translateY(-50%);
 border-style: solid;

} .timeline li .mdc-card section, .timeline li .mdc-card h1, .timeline li .mdc-card h2 { 

 color: white;

} .timeline li:nth-child(odd) .mdc-card { 

 left: calc(100% + 36px);
 transform: translateX(200px);

} .timeline li:nth-child(odd) .mdc-card::before { 

 left: -16px;
 border-width: 8px 16px 8px 0;
 border-color: transparent #757de8 transparent transparent;

} .timeline li:nth-child(even) .mdc-card { 

 right: 316px;
 transform: translateX(-200px);

} .timeline li:nth-child(even) .mdc-card::before { 

 right: -16px;
 border-width: 8px 0 8px 16px;
 border-color: transparent transparent transparent #757de8;

} .timeline .inview::after { 

 border-width: 0px;

} .timeline .inview .mdc-card { 

 transform: none !important;
 opacity: 1;

} /* 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__link-container--right a { 

 padding-right: 0;

} .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: 768px) { 

 .page__drawer {
   width: 100px;
   margin-right: 12px;
 }
 .page__article {
   position: relative;
   left: 112px;
 }
 .page__drawer + .page__article,
 .story {
   width: calc(100% - 112px);
 }
 .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;
 }
 #to-top {
   bottom: 3rem;
   right: 2rem;
 }

} @media (max-width: 660px) { 

 .timeline li {
   margin-left: 22px;
 }
 .timeline li .mdc-card {
   min-width: 240px;
   transform: translateX(10px) !important;
 }
 .timeline li:nth-child(even) .mdc-card {
   left: calc(100% + 36px);
   right: 0;
 }
 .timeline li:nth-child(even) .mdc-card::before {
   left: -16px;
   border-width: 8px 16px 8px 0;
   border-color: transparent #757de8 transparent transparent;
 }
 .page__drawer {
   display: none;
 }
 .page__article {
   width: 100% !important;
   left: 0;
 }
 #page__drawer-mobile-container {
   display: table;
 }

} @media (max-width: 360px) { 

 .page__content,
 .footer__content {
   padding-left: 12px;
   padding-right: 12px;
 }
 .footer__links li {
   margin-left: 6px;
 }
 .timeline li .mdc-card {
   min-width: 228px;
 }

}