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   display: flex;
  68
  69   .left-column {
  70     padding-right: 27px;
  71   }
  72
  73   .right-column {
  74     padding-left: 27px;
  75   }
  76
  77   .left-column,
  78   .right-column {
  79     width: 50%;
  80
  81     p {
  82       margin-top: 0;
  83       margin-bottom: 30px;
  84       @include font-size(18px);
  85       line-height: 150%;
  86
  87       strong, b {
  88         font-weight: $semibold;
  89       }
  90
  91       a {
  92         color: $color-primary;
  93         &:hover {
  94           text-decoration: underline;
  95         }
  96       }
  97     }
  98
  99     h3 {
 100       margin-top: 0;
 101       margin-bottom: 30px;
 102       border-bottom: 0;
 103       padding-bottom: 0;
 104       font-weight: $semibold;
 105       @include font-size(25px);
 106       line-height: 140%;
 107       letter-spacing: -0.01em;
 108       color: #474747;
 109     }
 110
 111     h4 {
 112       display: flex;
 113       align-items: center;
 114       font-weight: $semibold;
 115       @include font-size(21px);
 116       line-height: 140%;
 117       letter-spacing: -0.01em;
 118       color: #474747;
 119
 120       img {
 121         margin-right: 15px;
 122       }
 123
 124       & + p {
 125         margin-top: 15px;
 126         margin-bottom: 50px;
 127       }
 128
 129       &:first-of-type {
 130         margin-top: 0;
 131       }
 132     }
 133
 134     ul, ol {
 135       li {
 136         font-weight: $regular;
 137         @include font-size(18px);
 138         line-height: 150%;
 139
 140         strong, b {
 141           font-weight: $semibold;
 142         }
 143
 144         a {
 145           color: $color-primary;
 146           &:hover {
 147             text-decoration: underline;
 148           }
 149         }
 150       }
 151     }
 152
 153     & > img {
 154       max-width: 100%;
 155       margin-bottom: 30px;
 156     }
 157   }
 158 }
 159
 160 .l-article__title {
 161   margin-top: 28px;
 162   margin-bottom: 38px;
 163   padding-bottom: 20px;
 164   border-bottom: 1px solid #D9D9D9;
 165   * {
 166     margin-top: 0;
 167     font-weight: $regular;
 168     @include font-size(37px);
 169     line-height: 130%;
 170     letter-spacing: -0.01em;
 171     color: #083F4D;
 172   }
 173 }
 174
 175
 176 .l-article__overlay {
 177   display: flex;
 178   flex-direction: column;
 179   overflow: hidden;
 180   position: relative;
 181   color: #474747;
 182
 183   &.is-active {
 184     &:after {
 185       content: "";
 186       display: block;
 187       position: absolute;
 188       bottom: 0; left: 0;
 189       width: 100%; height: 70px;
 190       background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
 191     }
 192   }
 193
 194   &.is-clicked {
 195     max-height: 100% !important;
 196     &:after { display: none; }
 197   }
 198 }
 199
 200 .l-article__lead {
 201   margin-top: 0;
 202   font-weight: $light;
 203   @include font-size(24px);
 204   font-family: $secondary-font;
 205   line-height: 166%;
 206 }
 207
 208 .l-article__read-more {
 209   border: 0;
 210   padding: 0;
 211   color: #007880;
 212   background-color: transparent;
 213   cursor: pointer;
 214   outline: 0;
 215   margin-top: 25px;
 216   &:hover {
 217     text-decoration: underline;
 218   }
 219 }