src/wolnelektury/static/2022/styles/layout/_author.scss

   1 .l-author {
   2   width: 100%;
   3   display: flex;
   4   padding: 50px 0;
   5   justify-content: space-between;
   6
   7   h2 {
   8     margin: 0;
   9     font-weight: 600;
  10     font-size: 21.5px;
  11     line-height: 140%;
  12     border-bottom: 1px solid #D9D9D9;
  13     padding-bottom: 15px;
  14     padding-top: 5px;
  15     letter-spacing: -0.01em;
  16     color: #007880;
  17     margin-bottom: 23px;
  18   }
  19
  20   .row {
  21     width: 100%;
  22
  23     &:nth-child(1) {
  24
  25       div {
  26         display: flex;
  27       }
  28
  29       h2 {
  30         width: 100%;
  31       }
  32
  33       .l-author__photo {
  34         width: 100%;
  35         max-width: 238px;
  36       }
  37     }
  38
  39     &:nth-child(2) {
  40       max-width: 415px;
  41       padding-top: 48px;
  42       padding-left: 32px;
  43     }
  44   }
  45 }
  46
  47 .l-author__info {
  48   min-width: 364px;
  49
  50   h3 {
  51     margin: 0;
  52     font-weight: 600;
  53     font-size: 31px;
  54     line-height: 140%;
  55     letter-spacing: -0.01em;
  56     color: #007880;
  57   }
  58   p {
  59     margin-top: 20px;
  60     font-weight: normal;
  61     font-size: 18px;
  62     line-height: 150%;
  63     color: #474747;
  64   }
  65   dd, dt {
  66     font-weight: normal;
  67     font-size: 18px;
  68     line-height: 150%;
  69     color: #474747;
  70   }
  71   dt {
  72       float: left;
  73       clear: left;
  74       margin-right: .4em;
  75   }
  76   dd {
  77       margin-left: 0;
  78   }
  79 }
  80
  81 .l-author__photo {
  82   margin: 0;
  83   margin-right: 50px;
  84   img {
  85     border-radius: 10px;
  86     overflow: hidden;
  87   }
  88   figcaption {
  89     margin-top: 5px;
  90     font-weight: normal;
  91     font-size: 15px;
  92     line-height: 160%;
  93     color: #808080;
  94   }
  95 }
  96
  97 .l-author__quotes {
  98   background: #E1F1F2;
  99   border-radius: 10px;
 100   padding: 48px 32px 40px 32px;
 101   position: relative;
 102
 103   &:before {
 104     display: flex;
 105     align-items: center;
 106     justify-content: center;
 107     content: $icon-quote;
 108     top: 0;
 109     transform: translateY(-50%);
 110
 111     font-family: '#{$icomoon-font-family}' !important;
 112     speak: never;
 113     font-style: normal;
 114     font-weight: normal;
 115     font-variant: normal;
 116     text-transform: none;
 117     line-height: 1;
 118
 119     /* Better Font Rendering =========== */
 120     -webkit-font-smoothing: antialiased;
 121     -moz-osx-font-smoothing: grayscale;
 122
 123     color: white;
 124     background-color: #007880;
 125     font-size: 33px;
 126     width: 60px;
 127     height: 60px;
 128     border-radius: 50%;
 129     position: absolute;
 130   }
 131 }
 132
 133 .l-author__quotes__slider {
 134   display: flex;
 135   div {
 136     em {
 137       font-style: italic;
 138       font-weight: 300;
 139       font-size: 28px;
 140       line-height: 140%;
 141       letter-spacing: -0.02em;
 142       color: #083F4D;
 143
 144       p {
 145           font-size: inherit;
 146           line-height: inherit;
 147           margin-top: 0;
 148       }
 149     }
 150     > p {
 151       font-style: normal;
 152       font-weight: normal;
 153       font-size: 15px;
 154       line-height: 160%;
 155       color: #007880;
 156     }
 157   }
 158 }
 159
 160 .l-author__quotes__slider__item {
 161   max-width: 336px;
 162   outline: 0;
 163 }