From dcc89a85b77fd314ac3564b6a1ba4e24d8ef0a15 Mon Sep 17 00:00:00 2001 From: Ayo Isaiah Date: Wed, 21 Aug 2019 10:01:23 +0100 Subject: [PATCH] Initial commit --- assets/style.css | 173 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 12 ++++ main.go | 1 + 3 files changed, 186 insertions(+) create mode 100644 assets/style.css create mode 100644 index.html create mode 100644 main.go diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..0b1a130 --- /dev/null +++ b/assets/style.css @@ -0,0 +1,173 @@ +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +:root { + --light-green: #00ff00; + --dark-green: #003b00; + --dark-grey: #777; + --light-grey: #dadce0; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; +} + +a { + text-decoration: none; + color: #333; +} + +a:hover { + text-decoration: underline; +} + +a.button { + border: 2px solid #004400; + color: var(--dark-green); + border-radius: 4px; + padding: 6px 24px; + font-size: 14px; + font-weight: 400; +} + +a.button:hover { + text-decoration: none; + background-color: var(--dark-green); + color: var(--light-green); +} + +header { + width: 100%; + height: 50px; + position: fixed; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: space-between; + background-color: var(--light-green); + padding: 5px 10px; + align-items: center; +} + +.logo { + color: #002200; +} + +form { + height: calc(100% - 10px); +} + +.search-input { + width: 500px; + height: 100%; + border-radius: 4px; + border-color: transparent; + background-color: var(--dark-green); + color: var(--light-green); + font-size: 16px; + line-height: 1.4; + padding-left: 5px; +} + +.container { + width: 100%; + max-width: 720px; + margin: 0 auto; + padding: 80px 20px 40px; +} + +.result-count { + color: var(--dark-grey); + text-align: center; + margin-bottom: 15px; +} + +.search-results { + list-style: none; +} + +.news-article { + display: flex; + align-items: flex-start; + margin-bottom: 30px; + border: 1px solid var(--light-grey); + padding: 15px; + border-radius: 4px; + justify-content: space-between; +} + +.article-image { + width: 200px; + flex-grow: 0; + flex-shrink: 0; + margin-left: 20px; +} + +.title { + margin-bottom: 15px; +} + +.description { + color: var(--dark-grey); + margin-bottom: 15px; +} + +.metadata { + display: flex; + color: var(--dark-green); + font-size: 14px; +} + +.published-date::before { + content: '\0000a0\002022\0000a0'; + margin: 0 3px; +} + +.pagination { + margin-top: 20px; +} + +.previous-page { + margin-right: 20px; +} + +@media screen and (max-width: 550px) { + header { + flex-direction: column; + height: auto; + padding-bottom: 10px; + } + + .logo { + display: inline-block; + margin-bottom: 10px; + } + + form, .search-input { + width: 100%; + } + + .github-button { + display: none; + } + + .title { + font-size: 18px; + } + + .description { + font-size: 14px; + } + + .article-image { + display: none; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..408ff9f --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + + News App Demo + + + + + diff --git a/main.go b/main.go new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/main.go @@ -0,0 +1 @@ +