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