Added new design

[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _author.scss

diff --git a/src/wolnelektury/static/2022/styles/layout/_author.scss b/src/wolnelektury/static/2022/styles/layout/_author.scss
new file mode 100644 (file)
index 0000000..2cbaa5c
--- /dev/null
+++ b/src/wolnelektury/static/2022/styles/layout/_author.scss
@@ -0,0 +1,143 @@
+.l-author {
+  width: 100%;
+  display: flex;
+  padding: 50px 0;
+  justify-content: space-between;
+
+  h2 {
+    margin: 0;
+    font-weight: 600;
+    font-size: 21.5px;
+    line-height: 140%;
+    border-bottom: 1px solid #D9D9D9;
+    padding-bottom: 15px;
+    padding-top: 5px;
+    letter-spacing: -0.01em;
+    color: #007880;
+    margin-bottom: 23px;
+  }
+
+  .row {
+    width: 100%;
+
+    &:nth-child(1) {
+
+      div {
+        display: flex;
+      }
+
+      h2 {
+        width: 100%;
+      }
+
+      .l-author__photo {
+        width: 100%;
+        max-width: 238px;
+      }
+    }
+
+    &:nth-child(2) {
+      max-width: 415px;
+      padding-top: 48px;
+      padding-left: 32px;
+    }
+  }
+}
+
+.l-author__info {
+  min-width: 364px;
+
+  h3 {
+    margin: 0;
+    font-weight: 600;
+    font-size: 31px;
+    line-height: 140%;
+    letter-spacing: -0.01em;
+    color: #007880;
+  }
+  p {
+    margin-top: 20px;
+    font-weight: normal;
+    font-size: 18px;
+    line-height: 150%;
+    color: #474747;
+  }
+}
+
+.l-author__photo {
+  margin: 0;
+  margin-right: 50px;
+  img {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+  figcaption {
+    margin-top: 5px;
+    font-weight: normal;
+    font-size: 15px;
+    line-height: 160%;
+    color: #808080;
+  }
+}
+
+.l-author__quotes {
+  background: #E1F1F2;
+  border-radius: 10px;
+  padding: 48px 32px 40px 32px;
+  position: relative;
+
+  &:before {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    content: $icon-quote;
+    top: 0;
+    transform: translateY(-50%);
+
+    font-family: '#{$icomoon-font-family}' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    color: white;
+    background-color: #007880;
+    font-size: 33px;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    position: absolute;
+  }
+}
+
+.l-author__quotes__slider {
+  display: flex;
+  div {
+    em {
+      font-style: italic;
+      font-weight: 300;
+      font-size: 28px;
+      line-height: 140%;
+      letter-spacing: -0.02em;
+      color: #083F4D;
+    }
+    p {
+      font-style: normal;
+      font-weight: normal;
+      font-size: 15px;
+      line-height: 160%;
+      color: #007880;
+    }
+  }
+}
+
+.l-author__quotes__slider__item {
+  max-width: 336px;
+  outline: 0;
+}