198 lines
2.8 KiB
CSS
198 lines
2.8 KiB
CSS
* {
|
||
word-wrap: break-word;
|
||
font-family: 'Open Sans', sans-serif;
|
||
}
|
||
|
||
html {
|
||
background-color: #f2f2f2
|
||
}
|
||
|
||
main, .sidebar, .lang {
|
||
padding-top: 2rem;
|
||
}
|
||
|
||
article,
|
||
section {
|
||
font-size: 1.3rem !important;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
|
||
background-color: white;
|
||
overflow: auto
|
||
}
|
||
|
||
pre {
|
||
margin: 0 !important;
|
||
border-radius: 0 !important;
|
||
padding: .7rem !important;
|
||
font-weight: 500;
|
||
overflow: auto
|
||
}
|
||
|
||
blockquote {
|
||
font-family: Lato;
|
||
font-size: 1.2rem;
|
||
line-height: 1.5;
|
||
color: #555;
|
||
text-align: left;
|
||
border-left: 4px solid #ccc;
|
||
padding: 1rem;
|
||
margin: 1rem 0;
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
button {
|
||
padding: 0.5rem;
|
||
border: 0.1;
|
||
}
|
||
|
||
/* images settings */
|
||
|
||
/* img {
|
||
max-width: 100%;
|
||
height: auto
|
||
} */
|
||
|
||
.post-image,
|
||
.home-image {
|
||
float: left;
|
||
padding-right: 1rem;
|
||
}
|
||
|
||
.post-image {
|
||
width: 50%;
|
||
}
|
||
|
||
.home-image {
|
||
width: 30%;
|
||
}
|
||
|
||
p.lang {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Блок для правильной вёрстки аудио/видео начало */
|
||
/* Применяем max-width для замещаемых элементов и контролов формы. */
|
||
img,
|
||
video,
|
||
audio,
|
||
canvas,
|
||
input,
|
||
select,
|
||
button,
|
||
progress {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Заставляем поля с типом file и submit переносить текст */
|
||
input[type="file"],
|
||
input[type="submit"] {
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/* Чиним прогрессбар и поле-ползунок */
|
||
progress,
|
||
input[type="range"] {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Фиксим поля с типом Number в Firefox */
|
||
@supports (--moz-appearance: none) {
|
||
input[type="number"] {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* Блок для аудио/видео конец */
|
||
|
||
|
||
|
||
@media screen and (max-width:50em) {
|
||
.home-image {
|
||
width: 50%;
|
||
}
|
||
|
||
.sidebar {
|
||
display: none
|
||
}
|
||
}
|
||
|
||
/* gird settings */
|
||
|
||
body {
|
||
display: grid;
|
||
grid-gap: 1rem;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
}
|
||
|
||
header, .social-icons {
|
||
display: grid;
|
||
align-content: space-between;
|
||
grid-row-end: 2
|
||
}
|
||
|
||
header,
|
||
footer,
|
||
main {
|
||
grid-column-start: 2;
|
||
}
|
||
|
||
.social-icons {
|
||
grid-column-start: 3;
|
||
grid-column-end: 5;
|
||
align-self: start;
|
||
justify-self: end;
|
||
grid-row-end: 2
|
||
}
|
||
|
||
#search {
|
||
grid-column-start: 4;
|
||
grid-column-end: 5;
|
||
justify-self: end;
|
||
align-self: end;
|
||
grid-row-end: 2
|
||
}
|
||
|
||
footer,
|
||
main {
|
||
grid-column-end: 5
|
||
}
|
||
|
||
.sidebar {
|
||
grid-column-start: 5;
|
||
grid-column-end: 6
|
||
}
|
||
|
||
main,
|
||
.sidebar {
|
||
grid-row-start: 2
|
||
}
|
||
|
||
@media screen and (max-width:79em) {
|
||
|
||
header,
|
||
footer,
|
||
main {
|
||
grid-column-start: 1
|
||
}
|
||
|
||
footer,
|
||
.sidebar {
|
||
grid-column-end: 7
|
||
}
|
||
|
||
header {
|
||
grid-column-end: 3
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width:50em) {
|
||
|
||
header {
|
||
grid-column-end: 4;
|
||
}
|
||
|
||
main, #search, .social-icons {
|
||
grid-column-end: 7
|
||
}
|
||
} |