diff --git a/.gitignore b/.gitignore index a4679031e..9b5ed5ec8 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,5 @@ testem.log Thumbs.db version.properties + +paligo-styles/style.css* diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss index 5716dfb76..1ef853960 100644 --- a/apps/red-ui/src/assets/styles/red-variables.scss +++ b/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; diff --git a/paligo-styles/header.scss b/paligo-styles/header.scss new file mode 100644 index 000000000..62bb961fc --- /dev/null +++ b/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; + } +} diff --git a/paligo-styles/homepage.scss b/paligo-styles/homepage.scss new file mode 100644 index 000000000..37b51b1ca --- /dev/null +++ b/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; + } +} diff --git a/paligo-styles/search.scss b/paligo-styles/search.scss new file mode 100644 index 000000000..4ce6cd720 --- /dev/null +++ b/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; +} diff --git a/paligo-styles/style.scss b/paligo-styles/style.scss new file mode 100644 index 000000000..907341ff6 --- /dev/null +++ b/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; +}