src/wolnelektury/static/2022/styles/components/_search.scss

   1 .c-search-result-fragment {
   2     display: block;
   3     padding: 21px;
   4     margin-top: 20px;
   5     border: 1px solid #D9D9D9;
   6     border-radius: 10px;
   7
   8     .c-search-result-fragment-title {
   9         display: block;
  10         font-size: 21.5px;
  11         line-height: 1.4em;
  12         color: #474747;
  13     }
  14
  15     .c-search-result-fragment-author {
  16         display: block;
  17         font-size: 15px;
  18         line-height: 1.2em;
  19         color: #808080;
  20     }
  21
  22     .c-search-result-fragment-text {
  23         margin-top: 16px;
  24         padding: 6px 12px;
  25         display: block;
  26         color: #474747;
  27         background: #F2F2F2;
  28         border-radius: 4px;
  29         font-size: 18px;
  30         line-height: 1.5em;
  31
  32         strong {
  33             font-weight: normal;
  34             background: #FFEA00;
  35         }
  36     }
  37 }
  38
  39
  40 .c-search-result {
  41     margin: 20px 0;
  42     padding: 0;
  43     list-style: none;
  44     font-size: 18px;
  45     line-height: 27px;
  46
  47     &.c-search-result-author {
  48         li {
  49             padding-left: 52px;
  50             figure {
  51                 font-size: 0;
  52                 display: flex;
  53                 align-items: center;
  54                 justify-content: center;
  55                 width: 40px;
  56                 height: 40px;
  57                 margin-left: -52px;
  58                 margin-right: 12px;
  59                 overflow: hidden;
  60                 border-radius: 50%;
  61                 img {
  62                     width: 100%;
  63                 }
  64             }
  65         }
  66     }
  67
  68     li {
  69         margin-bottom: 5px;
  70         a {
  71             display: flex;
  72             align-items: center;
  73         }
  74     }
  75 }
  76
  77
  78 .c-search-result-collection {
  79     display: flex;
  80     margin-top: 20px;
  81     gap: 20px;
  82     flex-wrap: wrap;
  83 }
  84
  85
  86
  87 .c-search-result-pd {
  88     margin-top: 64px;
  89     padding: 34px;
  90     font-size: 18px;
  91     line-height: 24px;
  92     background: #E1F1F2;
  93     border-radius: 10px;
  94
  95     h2 {
  96         color: #007880;
  97         font-size: 21px;
  98         line-height: 30px;
  99         font-weight: bold;
 100         margin: 0;
 101     }
 102
 103     p {
 104         font-size: 18px;
 105         line-height: 27px;
 106     }
 107
 108     > div {
 109         display: flex;
 110         flex-wrap: wrap;
 111         gap: 20px;
 112         margin-top: 26px;
 113         > div {
 114             background: white;
 115             padding: 21px;
 116             border-radius: 10px;
 117             width: 343px;
 118             a {
 119                 color: #474747;
 120                 line-height: 28px;
 121             }
 122
 123             strong {
 124                 display: block;
 125                 margin-bottom: 10px;
 126                 color: #083F4D;
 127                 font-size: 25px;
 128                 line-height: 30px;
 129             }
 130
 131             em {
 132                 font-style: normal;
 133                 font-weight: bold;
 134             }
 135         }
 136     }
 137 }