Search.

[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / components / _search.scss

diff --git a/src/wolnelektury/static/2022/styles/components/_search.scss b/src/wolnelektury/static/2022/styles/components/_search.scss
new file mode 100644 (file)
index 0000000..1063d6b
--- /dev/null
+++ b/src/wolnelektury/static/2022/styles/components/_search.scss
@@ -0,0 +1,136 @@
+.c-search-result-fragment {
+    display: block;
+    padding: 21px;
+    margin-top: 20px;
+    border: 1px solid #D9D9D9;
+    border-radius: 10px;
+    
+    .c-search-result-fragment-title {
+        display: block;
+        font-size: 21.5px;
+        line-height: 1.4em;
+        color: #474747;
+    }
+
+    .c-search-result-fragment-author {
+        display: block;
+        font-size: 15px;
+        line-height: 1.2em;
+        color: #808080;
+    }
+    
+    .c-search-result-fragment-text {
+        margin-top: 16px;
+        padding: 6px 12px;
+        display: block;
+        color: #474747;
+        background: #F2F2F2;
+        border-radius: 4px;
+        font-size: 18px;
+        line-height: 1.5em;
+
+        strong {
+            font-weight: normal;
+            background: #FFEA00;
+        }
+    }
+}
+
+
+.c-search-result {
+    margin: 20px 0;
+    padding: 0;
+    list-style: none;
+    font-size: 18px;
+    line-height: 27px;
+
+    &.c-search-result-author {
+        li {
+            padding-left: 52px;
+            figure {
+                font-size: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 40px;
+                height: 40px;
+                margin-left: -52px;
+                margin-right: 12px;
+                overflow: hidden;
+                border-radius: 50%;
+                img {
+                    width: 100%;
+                }
+            }
+        }
+    }
+
+    li {
+        margin-bottom: 5px;
+        a {
+            display: flex;
+            align-items: center;
+        }
+    }
+}
+
+
+.c-search-result-collection {
+    display: flex;
+    margin-top: 20px;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+
+
+.c-search-result-pd {
+    margin-top: 64px;
+    padding: 34px;
+    font-size: 18px;
+    line-height: 24px;
+    background: #E1F1F2;
+    border-radius: 10px;
+
+    h2 {
+        color: #007880;
+        font-size: 21px;
+        line-height: 30px;
+        font-weight: bold;
+        margin: 0;
+    }
+
+    p {
+        font-size: 18px;
+        line-height: 27px;
+    }
+    
+    > div {
+        display: flex;
+        gap: 20px;
+        margin-top: 26px;
+        > div {
+            background: white;
+            padding: 21px;
+            border-radius: 10px;
+            width: 343px;
+            a {
+                color: #474747;
+                line-height: 28px;
+            }
+
+            strong {
+                display: block;
+                margin-bottom: 10px;
+                color: #083F4D;
+                font-size: 25px;
+                line-height: 30px;
+            }
+
+            em {
+                font-style: normal;
+                font-weight: bold;
+            }
+        }
+    }
+}