|
|
(не показано 79 промежуточных версий этого же участника) |
Строка 1: |
Строка 1: |
| /* Commons */
| |
|
| |
| .home-grid {
| |
| display: grid;
| |
| grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );
| |
| grid-auto-rows: minmax( 4rem, auto );
| |
| grid-gap: 0.625rem;
| |
| }
| |
|
| |
| .home-grid a.external {
| |
| background-image: none;
| |
| }
| |
|
| |
| .home-card {
| |
| position: relative;
| |
| padding: 15px;
| |
| background: var( --background-color-dp-02 );
| |
| border-radius: 8px;
| |
| box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
| |
| }
| |
|
| |
| .home-card table.timeline {
| |
| margin-top: 0.2rem;
| |
| }
| |
|
| |
| .home-card--col2 {
| |
| grid-column: span 2;
| |
| }
| |
|
| |
| .home-card--row3 {
| |
| grid-row: span 3;
| |
| }
| |
|
| |
| .home-card--row4 {
| |
| grid-row: span 4;
| |
| }
| |
|
| |
| .home-card--row8 {
| |
| grid-row: span 8 / auto;
| |
| }
| |
|
| |
| .home-card__label {
| |
| color: var( --color-base--subtle );
| |
| font-size: 0.8125rem;
| |
| letter-spacing: 0.75px;
| |
| }
| |
|
| |
| h3.home-card__header {
| |
| margin-top: 0;
| |
| font-size: 1rem;
| |
| color: white;
| |
| }
| |
|
| |
| .home-card__header a {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| }
| |
|
| |
| .home-card__header a:after {
| |
| content: '▶';
| |
| font-size: 0.8125rem;
| |
| }
| |
|
| |
| .home-card__background {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| border-radius: 8px;
| |
| }
| |
|
| |
| .home-card__background img {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover;
| |
| object-position: center;
| |
| transition: transform .2s ease;
| |
| }
| |
|
| |
| .home-card:hover .home-card__background img {
| |
| transform: scale( 1.1 );
| |
| }
| |
|
| |
| .home-card__foreground {
| |
| position: absolute;
| |
| }
| |
|
| |
| .home-card__foreground .home-card__label {
| |
| color: #bababa;
| |
| }
| |
|
| |
| .home-card__foreground .home-card__header {
| |
| color: #fff;
| |
| }
| |
|
| |
| .home-card p {
| |
| margin-top: 0.2rem;
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| .home-card.home-card--button {
| |
| padding: 0;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .home-card--button a {
| |
| display: flex;
| |
| height: 100%;
| |
| align-items: center;
| |
| padding: 0 15px;
| |
| background: transparent;
| |
| color: #fff;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .home-card--button .home-card__background a {
| |
| padding: 0;
| |
| }
| |
|
| |
| .home-link {
| |
| display: grid;
| |
| margin-top: 6px;
| |
| font-size: 0.875rem;
| |
| font-weight: 500;
| |
| grid-gap: 6px;
| |
| text-align: center;
| |
| }
| |
|
| |
| .home-link__button {
| |
| display: flex;
| |
| }
| |
|
| |
| .home-link__button a {
| |
| flex-grow: 1;
| |
| padding: 0.3rem 0.6rem;
| |
| border: 1px solid;
| |
| border-color: var( --border-color-base );
| |
| background: var( --background-color-framed );
| |
| border-radius: 12px;
| |
| color: var( --color-base--emphasized );
| |
| }
| |
|
| |
| .home-link__button a:hover {
| |
| background: var( --background-color-framed--hover );
| |
| }
| |
|
| |
| .home-link__button a:active {
| |
| background: var( --background-color-framed--active );
| |
| }
| |
|
| |
| #home-content {
| |
| margin-top: 1.6rem;
| |
| }
| |
|
| |
| /* Header */
| |
|
| |
| .home-header {
| |
| margin-top: 1.6rem;
| |
| height:50vh;
| |
| display: flex;
| |
| flex-direction: column;
| |
| justify-content: center;
| |
| flex-wrap: wrap;
| |
| }
| |
|
| |
| .home-header__column {
| |
| position: relative;
| |
| box-sizing: border-box;
| |
| max-width: 60%;
| |
| }
| |
|
| |
| .home-header__title {
| |
| margin-top: 0;
| |
| font-size: 48px;
| |
| }
| |
|
| |
| .home-header .home-header__subtitle {
| |
| margin-top: 0.4rem;
| |
| color: var( --color-base--subtle );
| |
| }
| |
|
| |
| .home-header__bg {
| |
| margin: auto;
| |
| pointer-events: none;
| |
| }
| |
|
| |
| /* Benefits */ | | /* Benefits */ |
|
| |
|
Строка 193: |
Строка 5: |
| flex-direction: column; | | flex-direction: column; |
| justify-content: space-between; | | justify-content: space-between; |
| margin: 40px 0;
| |
| }
| |
|
| |
| .home-benefits__stats {
| |
| display: flex;
| |
| }
| |
|
| |
| .home-stats {
| |
| flex-grow: 1;
| |
| line-height: 1;
| |
| } | | } |
|
| |
|
Строка 243: |
Строка 45: |
|
| |
|
| /* Search */ | | /* Search */ |
|
| |
| .home-search {
| |
| max-width: 600px;
| |
| padding: 0.6rem 0.8rem;
| |
| border: 1px solid;
| |
| border-color: var( --border-color-base );
| |
| margin: 0.8rem auto 0 auto;
| |
| background: var( --background-color-dp-04 );
| |
| border-radius: 100px;
| |
| box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
| |
| color: var( --color-base--subtle );
| |
| cursor: pointer;
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
|
| .keyboard-text { | | .keyboard-text { |
Строка 263: |
Строка 51: |
| margin: 0 2px; | | margin: 0 2px; |
| border-radius: 4px; | | border-radius: 4px; |
| }
| |
|
| |
| @media ( min-width: 682px ) {
| |
| .home-header__search {
| |
| text-align: center;
| |
| }
| |
| }
| |
|
| |
| @media ( hover: none ) {
| |
| .desktoponly {
| |
| display: none;
| |
| }
| |
| }
| |
|
| |
| /* FEATURED */
| |
|
| |
| #home-featured {
| |
| overflow: hidden;
| |
| }
| |
|
| |
| #home-featured .home-card__background a {
| |
| display: block;
| |
| height: 100%;
| |
| }
| |
|
| |
| #home-featured .home-card__background:after {
| |
| position: absolute;
| |
| pointer-events: none;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| display: block;
| |
| height: 60%;
| |
| background: linear-gradient( to top, #000, transparent );
| |
| border-radius: 0 0 8px 8px;
| |
| content: '';
| |
| }
| |
|
| |
| #home-featured .home-card__foreground {
| |
| pointer-events: none;
| |
| right: 15px;
| |
| bottom: 15px;
| |
| left: 15px;
| |
| } | | } |
|
| |
|
Строка 314: |
Строка 59: |
| width: 100%; | | width: 100%; |
| flex-wrap: wrap; | | flex-wrap: wrap; |
| }
| |
|
| |
| .mainpage-element {
| |
| margin: 0 0.2rem 0.4rem 0.2rem;
| |
| display: flex;
| |
| flex-grow: 1;
| |
| flex-direction: column;
| |
| justify-content: space-between;
| |
| box-sizing: border-box;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .card {
| |
| margin: 0 0.2rem 0.4rem 0.2rem;
| |
| display: flex;
| |
| flex-grow: 1;
| |
| flex-direction: column;
| |
| justify-content: space-between;
| |
| box-sizing: border-box;
| |
| overflow: hidden;
| |
| border: transparent;
| |
| border-radius: 8px;
| |
| }
| |
|
| |
| .card-text {
| |
| padding: 20px;
| |
| }
| |
|
| |
| .card-caption {
| |
| font-size: 0.875rem;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .card:hover .card-image a img {
| |
| transform: scale(1.1);
| |
| }
| |
|
| |
| .card h3 {
| |
| margin-top: 10px;
| |
| line-height: 1.4;
| |
| }
| |
|
| |
| .byline {
| |
| margin: 0 0 0.2rem 0;
| |
| color: #808080;
| |
| font-size: 0.825rem;
| |
| }
| |
|
| |
| .card p {
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| .card-button {
| |
| background: #72777d;
| |
| transition: background 0.2s ease,
| |
| opacity 0.2s ease;
| |
| }
| |
|
| |
| .card-button:hover {
| |
| opacity: 0.8;
| |
| }
| |
|
| |
| .card-button a {
| |
| padding: 0.6rem;
| |
| display: block;
| |
| color: white;
| |
| text-align: center;
| |
| font-size: 0.875rem;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .card-link ul {
| |
| margin: 0;
| |
| padding: 1.2rem 1.2rem 1.2rem 2.8rem;
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| .card-image {
| |
| overflow: hidden;
| |
| } | | } |
|
| |
|
Строка 411: |
Строка 77: |
| } | | } |
|
| |
|
| #wikimeat_intro.card {
| | .mainpage-navigation .card { |
| width: calc(100% / 6 * 5 - 0.4rem);
| | width: calc(100%/4 - 0.4rem); |
| flex-direction: row;
| | min-width: calc(860px/4 - 0.4rem); |
| } | | } |
|
| |
|
| #wikimeat_intro .card-image {
| | @media ( hover: none ) { |
| width: 50%;
| | .desktoponly { |
| overflow: hidden; | | display: none; |
| | } |
| } | | } |
|
| |
|
| #wikimeat_intro .card-image img {
| | /* Breakpoints */ |
| height: 100%;
| |
| width: auto;
| |
| position: relative;
| |
| }
| |
|
| |
|
| #discord.card,
| | /* @media ( max-width: 485px ) { |
| #contribute.card {
| | .home-header__bg { |
| width: calc(100% / 3 - 0.4rem);
| | right: 0; |
| min-width: calc(860px/4 - 0.4rem); | | } |
| } | | } */ |
|
| |
|
| #contribute .card-button {
| | @media ( min-width: 682px ) { |
| background: #c1272d;
| | .home-header__search { |
| }
| | text-align: center; |
| | | } |
| #discord .card-button {
| |
| background: #697ec4;
| |
| }
| |
| | |
| #wiki_stats.card,
| |
| #wiki_stats.mainpage-element {
| |
| width: calc(100% / 3 - 0.4rem);
| |
| min-width: calc(860px / 3 - 0.4rem);
| |
| text-align: center;
| |
| }
| |
| | |
| .overlay-foreground {
| |
| margin-top: -20px;
| |
| z-index: 1;
| |
| position: relative;
| |
| }
| |
| | |
| .overlay-background {
| |
| background: white; | |
| width: 100vw;
| |
| height: 100vh;
| |
| position: fixed;
| |
| top: 0;
| |
| left: 0;
| |
| z-index: 0;
| |
| }
| |
| | |
| .mainpage-navigation .card {
| |
| width: calc(100%/4 - 0.4rem);
| |
| min-width: calc(860px/4 - 0.4rem);
| |
| }
| |
| | |
| .mainpage-navigation .card-caption {
| |
| padding: 0.4rem;
| |
| padding-bottom: 20px;
| |
| text-align: center;
| |
| } | | } |
|
| |
|
Строка 483: |
Строка 110: |
| flex-wrap: nowrap; | | flex-wrap: nowrap; |
| } | | } |
| | } |
| | |
| | @media only screen and ( max-width: 800px ) { |
| | .home-header { |
| | flex-direction: column-reverse; |
| | } |
| | .home-header__column { |
| | padding: 0 20px; |
| | } |
| | } |
| | |
| | @media only screen and (max-width: 980px) { |
| | #home-banner { |
| | display: none; |
| | } |
| } | | } |