SowinskiBraeden/Weather-Program
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update CSS UI

Browse Source
This commit is contained in:
Nicholas Ngo committed 2022-05-17 10:15:21 -07:00
1 parent 314aeb8545
commit e11143ab87
2 files changed
+10 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+1 -1
View File
@@ -14,7 +14,7 @@
<body id="body"> <body id="body">
<div class="card"> <div class="card">
<div class="search"> <div class="search">
<input type="text" class="search-bar" placeholder="Search"> <input type="text" class="search-bar" placeholder="Search location">
<button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em" <button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em"
width="1.5em" xmlns="http://www.w3.org/2000/svg"> width="1.5em" xmlns="http://www.w3.org/2000/svg">
<path <path
style.css
+9 -9
View File
@@ -1,7 +1,7 @@
:root { :root {
--Rain: url("https://cdnb.artstation.com/p/assets/images/images/044/191/175/original/ryan-haight-kerry-park-rainy.gif?1639344501"); --Rain: url("https://cdnb.artstation.com/p/assets/images/images/044/191/175/original/ryan-haight-kerry-park-rainy.gif?1639344501");
--Clouds: url("https://64.media.tumblr.com/9ee59e8b2b137130d55209f48398878a/tumblr_pac4orsuyr1tlgv32o1_540.gif"); --Clouds: url("https://64.media.tumblr.com/9ee59e8b2b137130d55209f48398878a/tumblr_pac4orsuyr1tlgv32o1_540.gif");
--Drizzle: url("https://c.tenor.com/O5-9NwLytp4AAAAd/minimoss-pixel-art.gif"); --Drizzle: url("https://data.whicdn.com/images/314585703/original.gif");
--Clear: url("https://thumbs.gfycat.com/UnfoldedRedJaguarundi-max-1mb.gif"); --Clear: url("https://thumbs.gfycat.com/UnfoldedRedJaguarundi-max-1mb.gif");
--Snow: url("https://thumbs.gfycat.com/DecimalBabyishAmericancreamdraft-max-1mb.gif"); --Snow: url("https://thumbs.gfycat.com/DecimalBabyishAmericancreamdraft-max-1mb.gif");
--Thunderstorm: url("../images/thunderstorm.gif"); --Thunderstorm: url("../images/thunderstorm.gif");
@@ -24,8 +24,8 @@ body {
.card { .card {
background: #000000d0; background: #000000d0;
color: white; color: white;
padding: 2em; padding: 1.5em;
border-radius: 30px; border-radius: 40px;
width: 100%; width: 100%;
max-width: 420px; max-width: 420px;
margin: 1em; margin: 1em;
@@ -41,8 +41,8 @@ button {
margin: 0.5em; margin: 0.5em;
border-radius: 50%; border-radius: 50%;
border: none; border: none;
height: 44px; height: 50px;
width: 44px; width: 50px;
outline: none; outline: none;
background: #7c7c7c2b; background: #7c7c7c2b;
color: white; color: white;
@@ -58,7 +58,7 @@ input.search-bar {
background: #7c7c7c2b; background: #7c7c7c2b;
color: white; color: white;
font-family: inherit; font-family: inherit;
font-size: 105%; font-size: 120%;
width: calc(100% - 100px); width: calc(100% - 100px);
} }
@@ -68,7 +68,7 @@ button:hover {
h1.temp { h1.temp {
margin: 0; margin: 0;
margin-bottom: 0.4em; margin-bottom: 0.3em;
} }
.flex { .flex {
@@ -89,9 +89,9 @@ h1.temp {
.weather.loading:after { .weather.loading:after {
visibility: visible; visibility: visible;
content: "Input Location"; content: "";
color: white; color: white;
position: absolute; position: absolute;
top: 0; top: 0;
left: 20px; left: 30px;
} }