Search.
[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         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         gap: 20px;
111         margin-top: 26px;
112         > div {
113             background: white;
114             padding: 21px;
115             border-radius: 10px;
116             width: 343px;
117             a {
118                 color: #474747;
119                 line-height: 28px;
120             }
121
122             strong {
123                 display: block;
124                 margin-bottom: 10px;
125                 color: #083F4D;
126                 font-size: 25px;
127                 line-height: 30px;
128             }
129
130             em {
131                 font-style: normal;
132                 font-weight: bold;
133             }
134         }
135     }
136 }