Translators as authors.

[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
index fef1cf9..618b19a 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_author.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_author.scss
@@ -3,6 +3,13 @@
   display: flex;
   padding: 50px 0;
   justify-content: space-between;
   display: flex;
   padding: 50px 0;
   justify-content: space-between;

+  flex-direction: column;
+  align-items: center;
+
+  @include rwd($break-flow) {
+      flex-direction: row;
+      align-items: flex-start;
+  }

 
   h2 {
     margin: 0;
 
   h2 {
     margin: 0;


@@ -21,9 +28,13 @@
     width: 100%;
 
     &:nth-child(1) {
     width: 100%;
 
     &:nth-child(1) {

+      > div {
+          display: flex;
+          flex-wrap: wrap;

 
 

-      div {
-        display: flex;
+          @include rwd($break-wide) {
+              flex-wrap: nowrap;
+          }

       }
 
       h2 {
       }
 
       h2 {


@@ -31,21 +42,35 @@
       }
 
       .l-author__photo {
       }
 
       .l-author__photo {

-        width: 100%;
-        max-width: 238px;
+          flex-shrink: 0;
+          width: calc(50% - 24px);
+          @include rwd($break-wide) {
+              width: 238px;
+          }
+
+          img {
+              width:100%;
+          }

       }
     }
 
     &:nth-child(2) {
       }
     }
 
     &:nth-child(2) {

-      max-width: 415px;
-      padding-top: 48px;
-      padding-left: 32px;
+        max-width: 415px - 32px;
+        padding-top: 48px;
+        @include rwd($break-flow) {
+            max-width: 415px;
+            padding-left: 32px;
+        }

     }
   }
 }
 
 .l-author__info {
     }
   }
 }
 
 .l-author__info {

-  min-width: 364px;
+    display: contents;
+    min-width: 364px;
+    @include rwd($break-wide) {
+        display: block;
+    }    

 
   h3 {
     margin: 0;
 
   h3 {
     margin: 0;


@@ -54,6 +79,8 @@
     line-height: 140%;
     letter-spacing: -0.01em;
     color: #007880;
     line-height: 140%;
     letter-spacing: -0.01em;
     color: #007880;

+
+    width: 40%;

   }
   p {
     margin-top: 20px;
   }
   p {
     margin-top: 20px;


@@ -80,11 +107,29 @@
       font-weight: normal;
     }
   }
       font-weight: normal;
     }
   }

+
+  dt {
+      float: left;
+      clear: left;
+      margin-right: .4em;
+      font-weight: normal;
+      font-size: 18px;
+      line-height: 150%;
+  }
+  dd {
+      margin-left: 0;
+      font-weight: normal;
+      font-size: 18px;
+      line-height: 150%;
+  }

 }
 
 .l-author__photo {
 }
 
 .l-author__photo {

-  margin: 0;
-  margin-right: 50px;
+    margin: 0;
+    margin-right: 16px;
+    @include rwd($break-wide) {
+        margin-right: 50px;
+    }

   img {
     border-radius: 10px;
     overflow: hidden;
   img {
     border-radius: 10px;
     overflow: hidden;


@@ -144,8 +189,14 @@
       line-height: 140%;
       letter-spacing: -0.02em;
       color: #083F4D;
       line-height: 140%;
       letter-spacing: -0.02em;
       color: #083F4D;

+
+      p {
+          font-size: inherit;
+          line-height: inherit;
+          margin-top: 0;
+      }

     }
     }

-    p {
+    > p {

       font-style: normal;
       font-weight: normal;
       font-size: 15px;
       font-style: normal;
       font-weight: normal;
       font-size: 15px;


@@ -158,4 +209,62 @@
 .l-author__quotes__slider__item {
   max-width: 336px;
   outline: 0;
 .l-author__quotes__slider__item {
   max-width: 336px;
   outline: 0;

+
+  .verse-indent {
+      padding-left: 1em;
+      &.verse-indent-2 { padding-left: 1.1em; }
+      &.verse-indent-3 { padding-left: 1.2em; }
+      &.verse-indent-4 { padding-left: 1.3em; }
+      &.verse-indent-5 { padding-left: 1.4em; }
+      &.verse-indent-6 { padding-left: 1.5em; }
+      &.verse-indent-7 { padding-left: 1.6em; }
+      &.verse-indent-8 { padding-left: 1.7em; }
+      &.verse-indent-9 { padding-left: 1.8em; }
+      &.verse-indent-10 { padding-left: 1.9em; }
+      &.verse-indent-11 { padding-left: 2em; }
+      &.verse-indent-12 { padding-left: 2.1em; }
+  }
+  .verse-cont { padding-left: 2.1em; }
+  .verse-p { padding-left: 1em; }
+  .verse-right { text-align: right; }
+  .verse-center { text-align: center; }
+}
+
+
+.l-author__header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid #D9D9D9;
+  padding-bottom: 22px;
+
+  figure {
+    padding: 0;
+    font-size: 0;
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin: 0 12px 0 0;
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  h1 {
+    font-weight: $bold;
+    font-size: 37px;
+    line-height: 130%;
+    letter-spacing: -0.01em;
+    color: #083F4D;
+    margin: 0;
+
+    span {
+      font-weight: $regular;
+    }
+  }

 }
 }