Bản mẫu:Wiki2021/Đầu trang/styles.css

/* .main-header */
.main-header {
    display: flex;
    flex-flow: wrap column;
    font-size: 1rem;
}

/* .main-header__left */
.main-header__left,
.main-header__right {
	flex: auto;
    display: flex;
    flex-flow: wrap column;
    justify-content: center;
    align-content: center;
}

.main-header__left {
    padding-top: 1.5em;
}

.main-header__title {
    margin: 0;
    padding: 0 1em;
	border-bottom: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 1.4em;
}

.main-header__slogan {
	padding-top: 0.5em;
}

/* .main-header__right */
.main-header__right {
    padding-bottom: 0.5em;
    font-size: 0.875em;
}

.main-header__count {
	padding: 1em 0 0.75em;
}

.main-header__shortcut {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* .main-header__bottom */
.main-header__bottom {
    display: none;
}

.main-header__bottom a {
    white-space: nowrap;
}

/* responsive */
@media (max-width: 575px) {
	/* .main-header__right */
	.main-header__shortcut li:nth-child(1),
	.main-header__shortcut li:nth-child(3) {
		display: none;
	}
}

@media (min-width: 576px) {
	/* .main-header */
	.main-header {
	    background-color: #f8f9fa;
	    border: 1px solid #e0e0e0;
	    box-shadow: 0px 2px 3px #eee;
	}
	
	/* .main-header__left */
	body:not(.skin-vector-search-vue) .main-header__title {
		font-size: 1.55em;
	}
	
	/* .main-header__right */
	.main-header__right {
    	padding: 0 1em 1.5em;
	}
	
	/* .main-header__bottom */
	.main-header__bottom {
		display: flex;
    	flex-flow: wrap column;
    	justify-content: center;
		align-content: center;
	    width: 100%;
	    background-color: #fff;
	    border-top: 1px solid #e0e0e0;
	    font-size: 0.875em;
	}
	
	.main-header__article-link,
	.main-header__help-link {
	    padding: 0.75em 2em;
		text-align: center;
	}
	
	.main-header__article-link {
		margin-bottom: -0.75em;
	}
}

@media (min-width: 1200px) {
	/* .main-header */
	.main-header {
		flex-direction: row;
    	background-image: url(//upload.wikimedia.org/wikipedia/commons/b/b6/Wikipedia_logo_letters_banner_2.svg);
	    background-position: right;
	    background-repeat: no-repeat;
	}
	
	/* .main-header__left */
	.main-header__left {
    	padding: 1.5em 0;
    	background-image: linear-gradient(to right, #f8f9fa 0%, #f8f9fa 80%, rgba(248,249,250,0) 100%);
	}
	
	/* .main-header__right */
	.main-header__right {
	    padding-bottom: 0;
	}
	
	/* .main-header__bottom */
	.main-header__bottom {
		flex-direction: row;
	}
	
	.main-header__article-link,
	.main-header__help-link {
		flex: 1;
	}
	
	.main-header__article-link {
		text-align: right;
		margin-bottom: 0;
	}
	
	.main-header__help-link {
		text-align: left;
	}
}