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

   1 .l-article {
   2   color: $color-gray;
   3
   4   h2 {}
   5   h3 {
   6     font-weight: 600;
   7     font-size: 21.5px;
   8     line-height: 140%;
   9     border-bottom: 1px solid #D9D9D9;
  10     padding-bottom: 15px;
  11     padding-top: 5px;
  12     letter-spacing: -0.01em;
  13     color: #007880;
  14   }
  15   h4 {}
  16   p {
  17     font-weight: normal;
  18     font-size: 18px;
  19     line-height: 150%;
  20     color: #474747;
  21   }
  22   h4 {
  23     font-size: 18px;
  24     line-height: 150%;
  25     font-weight: bolder;
  26   }
  27
  28   .toc ol {
  29     padding: 0;
  30     list-style: none;
  31     margin-top: 0.25rem;
  32     margin-bottom: 0;
  33     li {
  34       font-size: 18px;
  35       line-height: 150%;
  36       font-weight: normal;
  37
  38     }
  39
  40     a {
  41         color: #007880;
  42     }
  43   }
  44
  45   video {
  46     margin-bottom: 30px;
  47   }
  48
  49   textarea[readonly] {
  50     margin-bottom: 30px;
  51     background: #052A33;
  52     border-radius: 10px;
  53     width: 100%;
  54     min-height: 119px;
  55     padding: 10px;
  56     resize: none;
  57     color: #92BD39;
  58     font-family: 'Consolas', monospace;
  59     font-style: normal;
  60     font-weight: 400;
  61     font-size: 16px;
  62     line-height: 150%;
  63   }
  64 }
  65
  66 .l-article__cols {
  67     @include rwd($break-flow) {
  68         display: flex;
  69         gap: 22px;
  70     }
  71
  72   .left-column,
  73   .right-column {
  74       padding: 0 16px;
  75
  76       @include rwd($break-flow) {
  77           width: 50%;
  78       }
  79
  80     p {
  81       margin-top: 0;
  82       margin-bottom: 30px;
  83       @include font-size(18px);
  84       line-height: 150%;
  85
  86       strong, b {
  87         font-weight: $semibold;
  88       }
  89
  90       a {
  91         color: $color-primary;
  92         &:hover {
  93           text-decoration: underline;
  94         }
  95       }
  96     }
  97
  98     h3 {
  99       margin-top: 0;
 100       margin-bottom: 30px;
 101       border-bottom: 0;
 102       padding-bottom: 0;
 103       font-weight: $semibold;
 104       @include font-size(25px);
 105       line-height: 140%;
 106       letter-spacing: -0.01em;
 107       color: #474747;
 108     }
 109
 110     h4 {
 111       display: flex;
 112       align-items: center;
 113       font-weight: $semibold;
 114       @include font-size(21px);
 115       line-height: 140%;
 116       letter-spacing: -0.01em;
 117       color: #474747;
 118
 119       img {
 120         margin-right: 15px;
 121       }
 122
 123       & + p {
 124         margin-top: 15px;
 125         margin-bottom: 50px;
 126       }
 127
 128       &:first-of-type {
 129         margin-top: 0;
 130       }
 131     }
 132
 133     ul, ol {
 134       li {
 135         font-weight: $regular;
 136         @include font-size(18px);
 137         line-height: 150%;
 138
 139         strong, b {
 140           font-weight: $semibold;
 141         }
 142
 143         a {
 144           color: $color-primary;
 145           &:hover {
 146             text-decoration: underline;
 147           }
 148         }
 149       }
 150     }
 151
 152     & > img {
 153       max-width: 100%;
 154       margin-bottom: 30px;
 155     }
 156   }
 157 }
 158
 159 .l-article__title {
 160   margin-top: 28px;
 161   margin-bottom: 38px;
 162   padding-bottom: 20px;
 163   border-bottom: 1px solid #D9D9D9;
 164   margin-left: 16px;
 165   margin-right: 16px;
 166   * {
 167     margin-top: 0;
 168     font-weight: $regular;
 169     @include font-size(37px);
 170     line-height: 130%;
 171     letter-spacing: -0.01em;
 172     color: #083F4D;
 173   }
 174 }
 175
 176
 177 .l-article__overlay {
 178   display: flex;
 179   flex-direction: column;
 180   overflow: hidden;
 181   position: relative;
 182   color: #474747;
 183
 184   &.is-active {
 185     &:after {
 186       content: "";
 187       display: block;
 188       position: absolute;
 189       bottom: 0; left: 0;
 190       width: 100%; height: 70px;
 191       background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
 192     }
 193   }
 194
 195   &.is-clicked {
 196     max-height: 100% !important;
 197     &:after { display: none; }
 198   }
 199 }
 200
 201 .l-article__lead {
 202   margin-top: 0;
 203   font-weight: $light;
 204   @include font-size(24px);
 205   font-family: $secondary-font;
 206   line-height: 166%;
 207 }
 208
 209 .l-article__read-more {
 210   border: 0;
 211   padding: 0;
 212   color: #007880;
 213   background-color: transparent;
 214   cursor: pointer;
 215   outline: 0;
 216   margin-top: 25px;
 217   &:hover {
 218     text-decoration: underline;
 219   }
 220 }