180 lines
2.5 KiB
CSS
180 lines
2.5 KiB
CSS
|
* {
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
font-family: 'Open Sans', sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html {
|
|||
|
|
background-color: #f2f2f2
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.copy-code-button {
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: block;
|
|||
|
|
margin: 1rem 0 -2px auto;
|
|||
|
|
font-size: 1.1rem !important
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* Блок для правильной вёрстки аудио/видео начало */
|
|||
|
|
/* Применяем 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,
|
|||
|
|
footer,
|
|||
|
|
main {
|
|||
|
|
grid-column-start: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.social-icons {
|
|||
|
|
grid-column-start: 3;
|
|||
|
|
grid-column-end: 5;
|
|||
|
|
justify-self: end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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:100em) {
|
|||
|
|
|
|||
|
|
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,
|
|||
|
|
main {
|
|||
|
|
grid-column-end: 7
|
|||
|
|
}
|
|||
|
|
}
|