summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--static/peach.css60
-rw-r--r--templates/search.tmpl6
2 files changed, 63 insertions, 3 deletions
diff --git a/static/peach.css b/static/peach.css
index 63210fe..a25aa66 100644
--- a/static/peach.css
+++ b/static/peach.css
@@ -3,6 +3,7 @@
* SPDX-License-Identifier: ISC
*/
+/** peach **/
@font-face {
font-family: Roboto;
src: url('/static/font/RobotoFlex-Regular.ttf');
@@ -32,6 +33,8 @@ body {
}
}
+
+/** weather **/
.header-container,
.main-container {
display: flex;
@@ -109,3 +112,60 @@ body {
font-size: 0.8em;
color: rgb(150,150,150)
}
+
+
+/** search **/
+.search-container .search-form {
+ display: flex;
+ flex-direction: row;
+ column-gap: 15px;
+ align-items: center;
+}
+
+.search-container .search-form .search-box {
+ flex-basis: 70%;
+}
+
+.search-container .search-form .search-box .location {
+ width: 100%;
+ font-size: 2em;
+ border: 2px solid rgb(0,0,0);
+}
+
+.search-container .search-form .btn-block .search-btn {
+ cursor: pointer;
+ border: none;
+ background-color: rgb(255,255,255);
+ color: rgb(0,0,0);
+ font-size: 2.8em;
+}
+
+.message-container {
+ font-size: 1.2em;
+}
+
+.message-container p {
+ margin: 5px 0 5px 0;
+}
+
+.search-result-container {
+ display: flex;
+ flex-direction: column;
+ row-gap: 6px;
+}
+
+.search-result-container .item {
+ font-size: 1.8em;
+}
+
+.search-result-container .location-name a {
+ text-decoration: none;
+ color: rgb(0,0,0);
+ font-weight: 600;
+ padding: 3px 5px 5px 5px;
+}
+
+.search-result-container .location-name a:hover {
+ transition: background-color 0.3s linear;
+ background-color: rgb(245,245,245);
+}
diff --git a/templates/search.tmpl b/templates/search.tmpl
index a6d7cff..9f211d6 100644
--- a/templates/search.tmpl
+++ b/templates/search.tmpl
@@ -13,13 +13,13 @@
<div class="root-container">
<div class="search-container">
- <form method="post">
+ <form method="post" class="search-form">
<div class="search-box">
<input type="text" class="location" placeholder="us city"
value="{{ .Location }}" name="location" required>
</div>
- <div class="search-btn">
- <input type="submit" value="search">
+ <div class="btn-block">
+ <input type="submit" class="search-btn" value="➮">
</div>
</form>
</div>