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