franca-theme-blog/static/css/style.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: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 {
    grid-column-end: 4;
  }

  main, #search, .social-icons {
    grid-column-end: 7
  }
}