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   flex-direction: column;
   7   align-items: center;
   8
   9   @include rwd($break-flow) {
  10       flex-direction: row;
  11       align-items: flex-start;
  12   }
  13
  14   h2 {
  15     margin: 0;
  16     font-weight: 600;
  17     font-size: 21.5px;
  18     line-height: 140%;
  19     border-bottom: 1px solid #D9D9D9;
  20     padding-bottom: 15px;
  21     padding-top: 5px;
  22     letter-spacing: -0.01em;
  23     color: #007880;
  24     margin-bottom: 23px;
  25   }
  26
  27   .row {
  28     width: 100%;
  29
  30     &:nth-child(1) {
  31       > div {
  32           display: flex;
  33           flex-wrap: wrap;
  34
  35           @include rwd($break-wide) {
  36               flex-wrap: nowrap;
  37           }
  38       }
  39
  40       h2 {
  41         width: 100%;
  42       }
  43
  44       .l-author__photo {
  45           flex-shrink: 0;
  46           width: calc(50% - 24px);
  47           @include rwd($break-wide) {
  48               width: 238px;
  49           }
  50
  51           img {
  52               width:100%;
  53           }
  54       }
  55     }
  56
  57     &:nth-child(2) {
  58         max-width: 415px - 32px;
  59         padding-top: 48px;
  60         @include rwd($break-flow) {
  61             max-width: 415px;
  62             padding-left: 32px;
  63         }
  64     }
  65   }
  66 }
  67
  68 .l-author__info {
  69     display: contents;
  70     min-width: 364px;
  71     @include rwd($break-wide) {
  72         display: block;
  73     }
  74
  75   h3 {
  76     margin: 0;
  77     font-weight: 600;
  78     font-size: 31px;
  79     line-height: 140%;
  80     letter-spacing: -0.01em;
  81     color: #007880;
  82
  83     width: 40%;
  84   }
  85   p {
  86     margin-top: 20px;
  87     font-weight: normal;
  88     font-size: 18px;
  89     line-height: 150%;
  90     color: #474747;
  91   }
  92   h4 {
  93     font-size: 18px;
  94     line-height: 150%;
  95     font-weight: bolder;
  96     color: #474747;
  97   }
  98
  99   ul {
 100     padding: 0;
 101     list-style: none;
 102     margin-top: 0.25rem;
 103     margin-bottom: 0;
 104     li {
 105       font-size: 18px;
 106       line-height: 150%;
 107       font-weight: normal;
 108     }
 109   }
 110
 111   dt {
 112       float: left;
 113       clear: left;
 114       margin-right: .4em;
 115       font-weight: normal;
 116       font-size: 18px;
 117       line-height: 150%;
 118   }
 119   dd {
 120       margin-left: 0;
 121       font-weight: normal;
 122       font-size: 18px;
 123       line-height: 150%;
 124   }
 125 }
 126
 127 .l-author__photo {
 128     margin: 0;
 129     margin-right: 16px;
 130     @include rwd($break-wide) {
 131         margin-right: 50px;
 132     }
 133   img {
 134     border-radius: 10px;
 135     overflow: hidden;
 136   }
 137   figcaption {
 138     margin-top: 5px;
 139     font-weight: normal;
 140     font-size: 15px;
 141     line-height: 160%;
 142     color: #808080;
 143   }
 144 }
 145
 146 .l-author__quotes {
 147   background: #E1F1F2;
 148   border-radius: 10px;
 149   padding: 48px 32px 40px 32px;
 150   position: relative;
 151
 152   &:before {
 153     display: flex;
 154     align-items: center;
 155     justify-content: center;
 156     content: $icon-quote;
 157     top: 0;
 158     transform: translateY(-50%);
 159
 160     font-family: '#{$icomoon-font-family}' !important;
 161     speak: never;
 162     font-style: normal;
 163     font-weight: normal;
 164     font-variant: normal;
 165     text-transform: none;
 166     line-height: 1;
 167
 168     /* Better Font Rendering =========== */
 169     -webkit-font-smoothing: antialiased;
 170     -moz-osx-font-smoothing: grayscale;
 171
 172     color: white;
 173     background-color: #007880;
 174     font-size: 33px;
 175     width: 60px;
 176     height: 60px;
 177     border-radius: 50%;
 178     position: absolute;
 179   }
 180 }
 181
 182 .l-author__quotes__slider {
 183     display: flex;
 184 }
 185 .l-author__quotes {
 186   div {
 187     em {
 188       font-style: italic;
 189       font-weight: 300;
 190       font-size: 28px;
 191       line-height: 140%;
 192       letter-spacing: -0.02em;
 193       color: #083F4D;
 194
 195       p {
 196           font-size: inherit;
 197           line-height: inherit;
 198           margin-top: 0;
 199       }
 200     }
 201     > p {
 202       font-style: normal;
 203       font-weight: normal;
 204       font-size: 15px;
 205       line-height: 160%;
 206       color: #007880;
 207     }
 208   }
 209 }
 210
 211 .l-author__quotes__slider__item {
 212   max-width: 336px;
 213   outline: 0;
 214
 215   .verse-indent {
 216       padding-left: 1em;
 217       &.verse-indent-2 { padding-left: 1.1em; }
 218       &.verse-indent-3 { padding-left: 1.2em; }
 219       &.verse-indent-4 { padding-left: 1.3em; }
 220       &.verse-indent-5 { padding-left: 1.4em; }
 221       &.verse-indent-6 { padding-left: 1.5em; }
 222       &.verse-indent-7 { padding-left: 1.6em; }
 223       &.verse-indent-8 { padding-left: 1.7em; }
 224       &.verse-indent-9 { padding-left: 1.8em; }
 225       &.verse-indent-10 { padding-left: 1.9em; }
 226       &.verse-indent-11 { padding-left: 2em; }
 227       &.verse-indent-12 { padding-left: 2.1em; }
 228   }
 229   .verse-cont { padding-left: 2.1em; }
 230   .verse-p { padding-left: 1em; }
 231   .verse-right { text-align: right; }
 232   .verse-center { text-align: center; }
 233 }
 234
 235
 236 .l-author__header {
 237   display: flex;
 238   align-items: center;
 239   width: 100%;
 240   border-bottom: 1px solid #D9D9D9;
 241   padding-bottom: 22px;
 242
 243   figure {
 244     padding: 0;
 245     font-size: 0;
 246     width: 40px;
 247     height: 40px;
 248     overflow: hidden;
 249     display: flex;
 250     align-items: center;
 251     justify-content: center;
 252     border-radius: 50%;
 253     margin: 0 12px 0 0;
 254
 255     img {
 256       max-width: 100%;
 257     }
 258   }
 259
 260   h1 {
 261     font-weight: $bold;
 262     font-size: 37px;
 263     line-height: 130%;
 264     letter-spacing: -0.01em;
 265     color: #083F4D;
 266     margin: 0;
 267
 268     span {
 269       font-weight: $regular;
 270     }
 271   }
 272 }