fixed home font/new first

Author: sojs-coder

static/assets/styles/home.css

@@ -1,16 +1,23 @@
 .classic {
   --glow-color: gold;
 }
-.classic *{
+
+.classic * {
   transition: all 0.3s ease;
   transition-property: background-color, color;
 }
-.classic body {
+
+body {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body.classic {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   background-color: #ffffff;
   margin: 0;
   padding: 0;
 }
+
 .classic header h1 {
   text-align: center;
   color: #333;
@@ -32,28 +39,35 @@
 .classic header.shadow {
   box-shadow: 0px 0px 10px #333;
 }
+
 .classic .cards.loading {
   background-image: url("../images/loading.gif");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
 }
+
 .classic .card.loading {
   display: none;
 }
+
 .classic .cards.loading .inxxx {
   display: none;
 }
+
 .classic .cards.grid .inxxx.rows {
   display: none;
 }
+
 .classic .cards.rows .inxxx.grid {
   display: none;
 }
+
 .classic .cloud .card.grid {
   width: 510px;
   height: 350px;
 }
+
 .classic .card.grid:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
@@ -70,6 +84,7 @@
 .classic .card.rows .card-content {
   color: black;
 }
+
 .classic .card-links a {
   color: #fff;
 }
@@ -90,6 +105,7 @@
 .classic .card.grid .star-icon {
   color: rgba(255, 255, 255, 0.7);
 }
+
 .classic .card.grid .star-icon.pinned {
   color: gold;
   text-shadow: 0 0 5px black;
@@ -144,18 +160,21 @@
   filter: brightness(0.5);
 }
 
-.classic .new, .classic .updated {
+.new,
+.updated {
   order: -1;
   /* add a glowing gold shadow effect */
   box-shadow: 0 0 20px var(--glow-color);
   animation: glowing 1300ms infinite;
   border: 5px solid var(--glow-color);
   box-sizing: border-box;
 }
-.classic .new h2::after{
+
+.new h2::after {
   content: " (NEW)";
 }
-.classic .updated h2::after{
+
+.updated h2::after {
   content: " (UPDATED)";
 }
 
@@ -191,12 +210,14 @@
 .classic .dont-see {
   color: #333;
 }
+
 .classic body.dark .dont-see {
   color: #eee;
 }
 
 /* Mobile Styles */
 @media screen and (max-width: 768px) {
+
   /* Search adjustments */
   .classic .action-button-row button {
     margin-top: 20px !important;
@@ -206,6 +227,7 @@
   .classic .card-tags .tag {
     display: none;
   }
+
   .classic .card-links {
     display: none;
   }
@@ -241,9 +263,11 @@
 .classic .toggle-btn {
   background: #f0f0f0;
 }
+
 .classic .toggle-btn:hover {
   background: #e0e0e0;
 }
+
 .classic .dot {
   background-color: #333;
 }
@@ -257,137 +281,172 @@
 }
 
 .classic .profile-section {
-    background-color: #ffffff;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  background-color: #ffffff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
+
 .classic .achievements-section {
-    background-color: #ffffff;
+  background-color: #ffffff;
 }
+
 .classic .profile-info label {
-    color: #666;
+  color: #666;
 }
+
 .classic .profile-info input {
-    border: 1px solid #ddd;
-    background-color: #ffffff;
-    color: #000;
+  border: 1px solid #ddd;
+  background-color: #ffffff;
+  color: #000;
 }
+
 .classic .profile-info input:focus {
-    border-color: dodgerblue;
+  border-color: dodgerblue;
 }
+
 .classic #saveChanges {
-    background-color: dodgerblue;
-    color: white;
+  background-color: dodgerblue;
+  color: white;
 }
+
 .classic #saveChanges:hover {
-    background-color: #0066cc;
+  background-color: #0066cc;
 }
+
 .classic .achievement-card {
-    background-color: #fff;
-    border: 2px solid;
+  background-color: #fff;
+  border: 2px solid;
 }
+
 .classic .achievement-icon {
-    color: white;
+  color: white;
 }
+
 .classic .achievement-info h3 {
-    color: #333;
+  color: #333;
 }
+
 .classic .achievement-info p {
-    color: #666;
+  color: #666;
 }
+
 .classic .stats {
-    color: #000;
+  color: #000;
 }
+
 .classic .stat {
-    color: #000;
+  color: #000;
 }
+
 .classic .stat-title {
-    border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
 }
 
 .classic .current-weather {
-    background: white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+
 .classic #weather-chart-container {
-    background-color: #ffffff;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  background-color: #ffffff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
+
 .classic .forecast-day {
-    background: white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+
 .classic .temperature {
-    color: #1a73e8;
+  color: #1a73e8;
 }
+
 .classic .conditions {
-    color: #666;
+  color: #666;
 }
+
 .classic .date {
-    color: #444;
+  color: #444;
 }
 
 .classic h1 {
-    color: #111;
-    background-color: #fff;
+  color: #111;
+  background-color: #fff;
 }
+
 .classic h2 {
-    color: #444;
+  color: #444;
 }
+
 .classic #searchInput {
-    border: 1px solid #ccc;
-    background-color: #ffffff;
-    color: #000;
+  border: 1px solid #ccc;
+  background-color: #ffffff;
+  color: #000;
 }
+
 .classic #searchInput:focus {
-    border: 1px solid dodgerblue;
+  border: 1px solid dodgerblue;
 }
+
 .classic li {
-    border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
 }
+
 .classic li div.links a {
-    color: dodgerblue;
+  color: dodgerblue;
 }
+
 .classic a {
-    color: dodgerblue;
+  color: dodgerblue;
 }
+
 .classic a:hover {
-    color: dodgerblue;
+  color: dodgerblue;
 }
+
 .classic a:visited {
-    color: dodgerblue;
+  color: dodgerblue;
 }
+
 .classic .loading {
-    color: #666;
+  color: #666;
 }
+
 .classic .error {
-    color: #dc3545;
+  color: #dc3545;
 }
+
 .classic .loading-bar {
-    background-color: #f3f3f3;
-    border: 1px solid #ccc;
+  background-color: #f3f3f3;
+  border: 1px solid #ccc;
 }
+
 .classic .loading-bar-fill {
-    background-color: #000000;
+  background-color: #000000;
 }
 
 .classic body h1 {
-    color: black;
+  color: black;
 }
+
 .classic input[type="text"] {
-    background: #f0f0f0;
-    color: black;
-    border: 1px solid #ccc;
+  background: #f0f0f0;
+  color: black;
+  border: 1px solid #ccc;
 }
+
 .classic input[type="text"]::placeholder {
-    color: #666;
+  color: #666;
 }
+
 .classic input[type="text"]:focus {
-    border-color: dodgerblue;
+  border-color: dodgerblue;
 }
+
 .classic button {
-    background: dodgerblue;
-    color: white;
+  background: dodgerblue;
+  color: white;
 }
+
 .classic button:hover {
-    background: #0066cc;
-}
+  background: #0066cc;
+}