franca-theme-blog/static/css/style.css

198 lines
2.8 KiB
CSS
Raw Normal View History

2023-07-22 13:18:15 +00:00
* {
word-wrap: break-word;
font-family: 'Open Sans', sans-serif;
}
html {
background-color: #f2f2f2
}
2023-07-28 18:05:28 +00:00
main, .sidebar, .lang {
padding-top: 2rem;
}
2023-07-22 13:18:15 +00:00
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%;
}
2023-07-25 07:45:30 +00:00
p.lang {
margin: 0;
}
2023-07-22 13:18:15 +00:00
/* Блок для правильной вёрстки аудио/видео начало */
/* Применяем 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);
}
2023-07-28 18:43:23 +00:00
header, .social-icons {
2023-07-25 07:45:30 +00:00
display: grid;
align-content: space-between;
2023-07-25 20:20:25 +00:00
grid-row-end: 2
2023-07-25 07:45:30 +00:00
}
2023-07-22 13:18:15 +00:00
header,
footer,
main {
grid-column-start: 2;
}
.social-icons {
grid-column-start: 3;
grid-column-end: 5;
2023-07-25 20:20:25 +00:00
align-self: start;
2023-07-22 13:18:15 +00:00
justify-self: end;
2023-07-25 20:20:25 +00:00
grid-row-end: 2
2023-07-22 13:18:15 +00:00
}
2023-07-25 07:45:30 +00:00
#search {
2023-07-25 20:38:32 +00:00
grid-column-start: 4;
2023-07-25 07:45:30 +00:00
grid-column-end: 5;
justify-self: end;
align-self: end;
grid-row-end: 2
}
2023-07-22 13:18:15 +00:00
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
2023-07-25 07:45:30 +00:00
}
2023-07-22 13:18:15 +00:00
}
@media screen and (max-width:50em) {
2023-07-25 07:45:30 +00:00
header {
grid-column-end: 4;
}
2023-07-25 20:20:25 +00:00
main, #search, .social-icons {
2023-07-22 13:18:15 +00:00
grid-column-end: 7
}
}