minor fixes
[wolnelektury.git] / 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 }