Tim1mike (обсуждение | вклад) мНет описания правки |
Tim1mike (обсуждение | вклад) мНет описания правки |
||
(не показано 160 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
/* Benefits */ | |||
#home-benefits { | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
justify-content: space-between; | justify-content: space-between; | ||
} | } | ||
. | .home-stats__value { | ||
font-size: 2.5rem; | |||
font-weight: 800; | |||
} | } | ||
. | .home-stats__unit { | ||
margin-top: 0.2rem; | |||
color: var( --color-base--subtle ); | |||
} | } | ||
/* Navigation */ | |||
#home-nav { | |||
margin-top: 2.4rem; | |||
} | } | ||
. | #home-nav .home-card__background:after { | ||
position: absolute; | |||
pointer-events: none; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
display: block; | |||
content: ""; | |||
} | } | ||
. | #home-nav .home-card__foreground { | ||
pointer-events: none; | |||
height: 100%; | |||
width: 100%; | |||
display: flex; | |||
align-items: center; | |||
padding: 0 15px; | |||
font-weight: 500; | |||
} | } | ||
/* Search */ | |||
. | .keyboard-text { | ||
padding: 0 5px; | |||
border: 1px solid; | |||
margin: 0 2px; | |||
border-radius: 4px; | |||
} | } | ||
/* OLD */ | |||
.mainpage-row { | |||
display: flex; | |||
width: 100%; | |||
flex-wrap: wrap; | |||
.mainpage- | |||
display: | |||
} | } | ||
#featured_article.card { | #featured_article.card { | ||
width: calc(100% / 3 - 0.4rem); | width: calc(100% / 3 - 0.4rem); | ||
min-width: calc(860px/ | min-width: calc(860px / 3 - 0.4rem); | ||
max-height: 400px; | |||
} | } | ||
# | #featured_article .card-image a img { | ||
object-fit: cover; | |||
width: 320px; | |||
height: 260px; | |||
} | } | ||
# | #featured_article .card-text { | ||
max-height: 120px; | |||
} | } | ||
.mainpage-navigation .card { | |||
width: calc(100%/4 - 0.4rem); | |||
min-width: calc(860px/4 - 0.4rem); | |||
} | } | ||
@media ( hover: none ) { | |||
.desktoponly { | |||
display: none; | |||
} | |||
} | } | ||
/* Breakpoints */ | |||
/* | /* @media ( max-width: 485px ) { | ||
.home-header__bg { | |||
right: 0; | |||
} | |||
} */ | |||
@media ( min-width: 682px ) { | |||
.home-header__search { | |||
text-align: center; | |||
} | |||
} | |||
} | } | ||
Строка 212: | Строка 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; | |||
} | |||
} | } |
Текущая версия от 22:03, 4 мая 2023
/* Benefits */
#home-benefits {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home-stats__value {
font-size: 2.5rem;
font-weight: 800;
}
.home-stats__unit {
margin-top: 0.2rem;
color: var( --color-base--subtle );
}
/* Navigation */
#home-nav {
margin-top: 2.4rem;
}
#home-nav .home-card__background:after {
position: absolute;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
content: "";
}
#home-nav .home-card__foreground {
pointer-events: none;
height: 100%;
width: 100%;
display: flex;
align-items: center;
padding: 0 15px;
font-weight: 500;
}
/* Search */
.keyboard-text {
padding: 0 5px;
border: 1px solid;
margin: 0 2px;
border-radius: 4px;
}
/* OLD */
.mainpage-row {
display: flex;
width: 100%;
flex-wrap: wrap;
}
#featured_article.card {
width: calc(100% / 3 - 0.4rem);
min-width: calc(860px / 3 - 0.4rem);
max-height: 400px;
}
#featured_article .card-image a img {
object-fit: cover;
width: 320px;
height: 260px;
}
#featured_article .card-text {
max-height: 120px;
}
.mainpage-navigation .card {
width: calc(100%/4 - 0.4rem);
min-width: calc(860px/4 - 0.4rem);
}
@media ( hover: none ) {
.desktoponly {
display: none;
}
}
/* Breakpoints */
/* @media ( max-width: 485px ) {
.home-header__bg {
right: 0;
}
} */
@media ( min-width: 682px ) {
.home-header__search {
text-align: center;
}
}
@media only screen and (max-width: 720px) {
.mainpage-row {
width: auto;
margin: 0 -20px;
padding: 0 20px;
overflow: auto;
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;
}
}