Paligo styles for homepage & search results

.gitignore

@@ -39,3 +39,5 @@ testem.log
 Thumbs.db
 
 version.properties
+
+paligo-styles/style.css*

apps/red-ui/src/assets/styles/red-variables.scss

@@ -9,6 +9,7 @@ $grey-5: #d3d5da;
 $grey-6: #f0f1f4;
 $grey-7: #9398a0;
 $grey-8: #f9fafb;
+$grey-9: #f5f5f7;
 
 $blue-1: #4875f7;
 $blue-2: #48c9f7;

paligo-styles/header.scss

@@ -0,0 +1,59 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+
+.portal-header {
+    z-index: 1;
+    height: 450px;
+
+    h1 {
+        font-size: 64px;
+        font-weight: 300;
+        line-height: 87px;
+        margin-top: 68px;
+        margin-bottom: 40px;
+    }
+
+    .portal-search {
+        max-width: 600px;
+        margin: auto;
+        position: relative;
+
+        .search-field {
+            width: 100%;
+            border: 1px solid $grey-5;
+            border-radius: 8px;
+            background-color: $white;
+        }
+
+        .search-field::placeholder {
+            opacity: 0.7;
+        }
+
+        .search-field,
+        .search-field::placeholder {
+            color: $accent;
+            font-size: 14px;
+            line-height: 18px;
+        }
+
+        .btn {
+            position: absolute;
+            right: 0;
+            padding: 11px 18px;
+            background-color: transparent;
+            color: $accent;
+            cursor: pointer;
+            border-radius: 0 8px 8px 0;
+
+            &:hover {
+                background-color: $primary;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .portal-header h1 {
+        font-size: 42px;
+        line-height: 57px;
+    }
+}

paligo-styles/homepage.scss

@@ -0,0 +1,81 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+
+.portal-publications,
+.featured-content-label {
+    display: none;
+}
+
+.portal-contents {
+    margin-top: 100px;
+
+    .inner {
+        margin: 0;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 24px;
+
+        &::before {
+            content: none;
+        }
+    }
+}
+
+.publication-contents {
+    padding: 24px 40px;
+    border: 1px solid $grey-4;
+    width: 100%;
+    margin: 0;
+    background-color: $white;
+    border-radius: 4px;
+
+    &:first-child {
+        grid-column: 1 / span 2;
+    }
+
+    h4.featured-title {
+        color: $accent;
+        font-size: 26px;
+        font-weight: 300;
+        letter-spacing: 0;
+        line-height: 36px;
+        margin: 0;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+
+    li {
+        margin: 4px 0;
+
+        &:first-child {
+            margin-top: 20px;
+        }
+
+        &:last-child {
+            margin-bottom: 40px;
+        }
+
+        a {
+            color: $primary;
+            font-size: 16px;
+            line-height: 22px;
+        }
+    }
+
+    h4 span,
+    li::before {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .portal-contents .inner {
+        grid-template-columns: 1fr;
+    }
+
+    .publication-contents:first-child {
+        grid-column: auto;
+    }
+}

paligo-styles/search.scss

@@ -0,0 +1,58 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+
+.portal-search-result {
+    background-color: $grey-9;
+}
+
+.search-container {
+    padding-bottom: 100px;
+
+    h2 {
+        font-size: 42px;
+        font-weight: 300;
+        line-height: 57px;
+    }
+}
+
+.portal-search-result {
+    padding: 0;
+    margin-top: 80px;
+}
+
+ul.searchresults {
+    border: 1px solid $grey-4;
+    background-color: $white;
+    border-radius: 4px;
+    margin-top: 32px;
+
+    .search-highlight {
+        font-style: normal;
+    }
+}
+
+li.searchresultitem {
+    margin: 0 32px;
+    border-bottom: 1px solid $grey-4;
+    padding: 32px 8px;
+}
+
+.searchresultitem.selected-searchresultitem {
+    background-color: transparent;
+    border-radius: 0;
+}
+
+.searchresulttitle {
+    font-size: 26px;
+    font-weight: 300;
+    line-height: 36px;
+    color: $accent;
+}
+
+.searchresultsnippet {
+    margin: 16px 0;
+    color: $accent;
+}
+
+.search-result-breadcrumbs {
+    color: $primary;
+}

paligo-styles/style.scss

@@ -0,0 +1,23 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+@import '../apps/red-ui/src/assets/styles/red-mixins';
+@import 'header';
+@import 'homepage';
+@import 'search';
+
+body {
+    color: $accent;
+    background-color: $grey-9;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    pre {
+        margin: 0;
+    }
+
+    @include scroll-bar;
+}