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   h4 {
  66     font-size: 18px;
  67     line-height: 150%;
  68     font-weight: bolder;
  69     color: #474747;
  70   }
  71
  72   ul {
  73     padding: 0;
  74     list-style: none;
  75     margin-top: 0.25rem;
  76     margin-bottom: 0;
  77     li {
  78       font-size: 18px;
  79       line-height: 150%;
  80       font-weight: normal;
  81     }
  82   }
  83
  84   dt {
  85       float: left;
  86       clear: left;
  87       margin-right: .4em;
  88       font-weight: normal;
  89       font-size: 18px;
  90       line-height: 150%;
  91   }
  92   dd {
  93       margin-left: 0;
  94       font-weight: normal;
  95       font-size: 18px;
  96       line-height: 150%;
  97   }
  98 }
  99
 100 .l-author__photo {
 101   margin: 0;
 102   margin-right: 50px;
 103   img {
 104     border-radius: 10px;
 105     overflow: hidden;
 106   }
 107   figcaption {
 108     margin-top: 5px;
 109     font-weight: normal;
 110     font-size: 15px;
 111     line-height: 160%;
 112     color: #808080;
 113   }
 114 }
 115
 116 .l-author__quotes {
 117   background: #E1F1F2;
 118   border-radius: 10px;
 119   padding: 48px 32px 40px 32px;
 120   position: relative;
 121
 122   &:before {
 123     display: flex;
 124     align-items: center;
 125     justify-content: center;
 126     content: $icon-quote;
 127     top: 0;
 128     transform: translateY(-50%);
 129
 130     font-family: '#{$icomoon-font-family}' !important;
 131     speak: never;
 132     font-style: normal;
 133     font-weight: normal;
 134     font-variant: normal;
 135     text-transform: none;
 136     line-height: 1;
 137
 138     /* Better Font Rendering =========== */
 139     -webkit-font-smoothing: antialiased;
 140     -moz-osx-font-smoothing: grayscale;
 141
 142     color: white;
 143     background-color: #007880;
 144     font-size: 33px;
 145     width: 60px;
 146     height: 60px;
 147     border-radius: 50%;
 148     position: absolute;
 149   }
 150 }
 151
 152 .l-author__quotes__slider {
 153   display: flex;
 154   div {
 155     em {
 156       font-style: italic;
 157       font-weight: 300;
 158       font-size: 28px;
 159       line-height: 140%;
 160       letter-spacing: -0.02em;
 161       color: #083F4D;
 162
 163       p {
 164           font-size: inherit;
 165           line-height: inherit;
 166           margin-top: 0;
 167       }
 168     }
 169     > p {
 170       font-style: normal;
 171       font-weight: normal;
 172       font-size: 15px;
 173       line-height: 160%;
 174       color: #007880;
 175     }
 176   }
 177 }
 178
 179 .l-author__quotes__slider__item {
 180   max-width: 336px;
 181   outline: 0;
 182 }
 183
 184
 185 .l-author__header {
 186   display: flex;
 187   align-items: center;
 188   width: 100%;
 189   border-bottom: 1px solid #D9D9D9;
 190   padding-bottom: 22px;
 191
 192   figure {
 193     padding: 0;
 194     font-size: 0;
 195     width: 40px;
 196     height: 40px;
 197     overflow: hidden;
 198     display: flex;
 199     align-items: center;
 200     justify-content: center;
 201     border-radius: 50%;
 202     margin: 0 12px 0 0;
 203
 204     img {
 205       max-width: 100%;
 206     }
 207   }
 208
 209   h1 {
 210     font-weight: $bold;
 211     font-size: 37px;
 212     line-height: 130%;
 213     letter-spacing: -0.01em;
 214     color: #083F4D;
 215     margin: 0;
 216
 217     span {
 218       font-weight: $regular;
 219     }
 220   }
 221 }