added support for mobile browsers

1vishen · Oct 29, 2023 · 3e8146b · 3e8146b
1 parent d4e956c
commit 3e8146b
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 45 deletions.
diff --git a/images/favicon.ico b/images/favicon.ico
diff --git a/index.html b/index.html
@@ -11,6 +11,8 @@
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;700&display=swap" rel="stylesheet">
 
+ <link rel="icon" type="image/x-icon" href="images/favicon.ico">
+
  <link rel="stylesheet" href="styles/main-style.css">
  <link rel="stylesheet" href="styles/hover-styles.css">
 
@@ -53,7 +55,8 @@
  <div class="date-info">
  <img class="date-icon" src="images/animated/calendar3.svg">
  <p class="date-time-info"><span id="date-info-t">&#183 </span> <span id="month-info-t">&#183 </span>,
- <span id="day-info-t">&#183</span></p>
+ <span id="day-info-t">&#183</span>
+ </p>
  </div>
 
 
@@ -115,47 +118,39 @@
  <div class="future-weather">
 
  <div class="week-info">
- <p class="week-day">Friday</p>
- <p class="min-max-temp"> Min:&nbsp <span id="minTemp">&#183 &#183 &#183</span>&nbsp&deg;C /
- Max:&nbsp<span id="maxTemp">&#183 &#183 &#183</span>&nbsp&deg;C</p>
- </div>
-
- <div class="underline"></div>
-
- <div class="week-info">
- <p class="week-day">Saturday</p>
- <p class="min-max-temp"> Min:&nbsp<span id="minTemp1">&#183 &#183 &#183</span>&nbsp&deg;C /
+ <p class="week-day" id="week-day-1">&#183 &#183 &#183</p>
+ <p class="min-max-temp"> Min:&nbsp <span id="minTemp1">&#183 &#183 &#183</span>&nbsp&deg;C /
  Max:&nbsp<span id="maxTemp1">&#183 &#183 &#183</span>&nbsp&deg;C</p>
  </div>
 
  <div class="underline"></div>
 
  <div class="week-info">
- <p class="week-day">Sunday</p>
- <p class="min-max-temp"> Min:&nbsp <span id="minTemp2">&#183 &#183 &#183</span>&nbsp&deg;C /
+ <p class="week-day" id="week-day-2">&#183 &#183 &#183</p>
+ <p class="min-max-temp"> Min:&nbsp<span id="minTemp2">&#183 &#183 &#183</span>&nbsp&deg;C /
  Max:&nbsp<span id="maxTemp2">&#183 &#183 &#183</span>&nbsp&deg;C</p>
  </div>
 
  <div class="underline"></div>
 
  <div class="week-info">
- <p class="week-day">Monday</p>
+ <p class="week-day" id="week-day-3">&#183 &#183 &#183</p>
  <p class="min-max-temp"> Min:&nbsp <span id="minTemp3">&#183 &#183 &#183</span>&nbsp&deg;C /
  Max:&nbsp<span id="maxTemp3">&#183 &#183 &#183</span>&nbsp&deg;C</p>
  </div>
 
  <div class="underline"></div>
 
  <div class="week-info">
- <p class="week-day">Tuesday</p>
+ <p class="week-day" id="week-day-4">&#183 &#183 &#183</p>
  <p class="min-max-temp"> Min:&nbsp <span id="minTemp4">&#183 &#183 &#183</span>&nbsp&deg;C /
  Max:&nbsp<span id="maxTemp4">&#183 &#183 &#183</span>&nbsp&deg;C</p>
  </div>
 
  <div class="underline"></div>
 
  <div class="week-info">
- <p class="week-day">Wednesday</p>
+ <p class="week-day" id="week-day-5">&#183 &#183 &#183</p>
  <p class="min-max-temp"> Min:&nbsp <span id="minTemp5">&#183 &#183 &#183</span>&nbsp&deg;C /
  Max:&nbsp<span id="maxTemp5">&#183 &#183 &#183</span>&nbsp&deg;C</p>
  </div>
@@ -171,6 +166,7 @@
 
  <script src="trakt-app.js"></script>
 
+
 </body>
 
-</html>
+</html>
diff --git a/styles/hover-styles.css b/styles/hover-styles.css
@@ -109,4 +109,57 @@
  border: none;
 
  color: rgb(15, 23, 42);
+}
+
+
+/* Media query for mobile devices */
+@media (max-width: 768px) {
+
+ .logo:hover {
+ width: 25px;
+ }
+
+ .app-name:hover {
+ width: 90px;
+ font-size: 15px;
+ }
+
+ .github-link:hover {
+ width: 50px;
+ font-size: 15px;
+ }
+
+ .weather-info-main:hover {
+ display: flex;
+ flex-direction: column;
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .current-weather:hover {
+ width: 100%;
+ }
+
+ .detailed-info:hover {
+ display: block;
+ width: 100%;
+ }
+
+ .info-card:hover,
+ .info-card-2:hover {
+ width: 100%;
+ margin-bottom: 10px;
+ }
+
+ .future-weather:hover {
+ width: 100%;
+ }
+}
+
+/* Media query for tablets */
+@media (min-width: 768px) and (max-width: 1075px) {
+
+ .min-max-temp:hover {
+ white-space: nowrap; /* Prevent text from wrapping to the next line*/
+ }
 }
diff --git a/styles/main-style.css b/styles/main-style.css
@@ -281,8 +281,6 @@ p {
  padding-right: 10px;
 
  width: 100%;
-
-
 }
 
 .week-day {
@@ -343,4 +341,56 @@ p {
  border: none;
 
  color: rgb(15, 23, 42);
+}
+
+/* Media query for mobile devices */
+@media (max-width: 768px) {
+
+ .logo {
+ width: 25px;
+ }
+
+ .app-name {
+ width: 90px;
+ font-size: 15px;
+ }
+
+ .github-link {
+ width: 50px;
+ font-size: 15px;
+ }
+
+ .weather-info-main {
+ display: flex;
+ flex-direction: column;
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .current-weather {
+ width: 100%;
+ }
+
+ .detailed-info {
+ display: block;
+ width: 100%;
+ }
+
+ .info-card,
+ .info-card-2 {
+ width: 100%;
+ margin-bottom: 10px;
+ }
+
+ .future-weather {
+ width: 100%;
+ }
+}
+
+/* Media query for tablets */
+@media (min-width: 768px) and (max-width: 1121px) {
+
+ .min-max-temp {
+ white-space: nowrap; /* Prevent text from wrapping to the next line*/
+ }
 }