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     margin-left: 1em;
  34       font-size: 18px;
  35       font-weight: normal;
  36     li {
  37       line-height: 150%;
  38
  39     }
  40
  41     a {
  42         color: #007880;
  43     }
  44   }
  45
  46   video {
  47     margin-bottom: 30px;
  48   }
  49
  50   textarea[readonly] {
  51     margin-bottom: 30px;
  52     background: #052A33;
  53     border-radius: 10px;
  54     width: 100%;
  55     min-height: 119px;
  56     padding: 10px;
  57     resize: none;
  58     color: #92BD39;
  59     font-family: 'Consolas', monospace;
  60     font-style: normal;
  61     font-weight: 400;
  62     font-size: 16px;
  63     line-height: 150%;
  64   }
  65 }
  66
  67 .l-article__cols {
  68     @include rwd($break-flow) {
  69         display: flex;
  70         gap: 22px;
  71     }
  72
  73   .left-column,
  74   .right-column {
  75       padding: 0 16px;
  76
  77       @include rwd($break-flow) {
  78           width: 50%;
  79       }
  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   margin-left: 16px;
 166   margin-right: 16px;
 167   * {
 168     margin-top: 0;
 169     font-weight: $regular;
 170     @include font-size(37px);
 171     line-height: 130%;
 172     letter-spacing: -0.01em;
 173     color: #083F4D;
 174   }
 175 }
 176
 177
 178 .l-article__overlay {
 179   display: flex;
 180   flex-direction: column;
 181   overflow: hidden;
 182   position: relative;
 183   color: #474747;
 184
 185   &.is-active {
 186     &:after {
 187       content: "";
 188       display: block;
 189       position: absolute;
 190       bottom: 0; left: 0;
 191       width: 100%; height: 70px;
 192       background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
 193     }
 194   }
 195
 196   &.is-clicked {
 197     max-height: 100% !important;
 198     &:after { display: none; }
 199   }
 200 }
 201
 202 .l-article__lead {
 203   margin-top: 0;
 204   font-weight: $light;
 205   @include font-size(24px);
 206   font-family: $secondary-font;
 207   line-height: 166%;
 208 }
 209
 210 .l-article__read-more {
 211   border: 0;
 212   padding: 0;
 213   color: #007880;
 214   background-color: transparent;
 215   cursor: pointer;
 216   outline: 0;
 217   margin-top: 25px;
 218   &:hover {
 219     text-decoration: underline;
 220   }
 221 }
 222
 223 .infopage-blog {
 224     padding: 0;
 225     list-style: none;
 226     li {
 227         margin-bottom: .7em;
 228     }
 229 }
 230
 231
 232 .abstract {
 233     h2 {
 234         font-size: 1.1em;
 235         margin-top: 1.5em;
 236         margin-bottom: 0;
 237         font-weight: bold;
 238     }
 239     em.author-emphasis {
 240         font-weight: bold;
 241         font-style: normal;
 242     }
 243 }