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   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
  46 .l-article__overlay {
  47   display: flex;
  48   flex-direction: column;
  49   overflow: hidden;
  50   position: relative;
  51   color: #474747;
  52
  53   &.is-active {
  54     &:after {
  55       content: "";
  56       display: block;
  57       position: absolute;
  58       bottom: 0; left: 0;
  59       width: 100%; height: 70px;
  60       background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  61     }
  62   }
  63
  64   &.is-clicked {
  65     max-height: 100% !important;
  66     &:after { display: none; }
  67   }
  68 }
  69
  70 .l-article__lead {
  71   margin-top: 0;
  72   font-weight: $light;
  73   @include font-size(24px);
  74   font-family: $secondary-font;
  75   line-height: 166%;
  76 }
  77
  78 .l-article__read-more {
  79   border: 0;
  80   padding: 0;
  81   color: #007880;
  82   background-color: transparent;
  83   cursor: pointer;
  84   outline: 0;
  85   margin-top: 25px;
  86   &:hover {
  87     text-decoration: underline;
  88   }
  89 }