Weather and Category

web/data/head.html

@@ -25,7 +25,7 @@
 }
 
 body {
-  font-size: 1.5em;
+  font-size: 1.2em;
   margin: 0 auto;
   overflow-x: hidden;
   background-color: black;
@@ -159,14 +159,11 @@ h1#title {
 
 .hed {
   background-color: #0B173B;
-  text-decoration: none;
   color: white;
   border-radius: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-top: 5px;
-  padding-bottom: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   gap: 5%;
   transition: background-color 0.5s var(--ease);
@@ -187,7 +184,6 @@ h1#title {
   gap: 10px;
   text-decoration: none;
 }
-
 .article_content > a {
   color: white;
   text-decoration: none;
@@ -266,14 +262,78 @@ pre.article_content {
   font-size: 8;
 }
 
+#small-menu{
+    display: none;
+  }
+
+.menu{
+  width: 100%;
+  text-decoration: none;
+  color: white;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.menu > a {
+  color: white;
+  gap: 10px;
+  text-decoration: none;
+}
+.home-text{
+  display: none;
+}
+
 
 @media only screen and (max-width: 600px) {
+  #small-menu{
+    display: block;
+  }
+  .fa-home{
+    display: none;
+  }
+  .home-text{
+    display: block;
+  }
+
+  .menu{
+    display: none;
+  }
+  .menu.show-menu{
+    width: 100%;
+    text-decoration: none;
+    color: white;
+    display: grid;
+    transition: background-color 0.5s var(--ease);
+  }
+  .hed{
+    padding-top: 5px;
+    padding-bottom: 5px;
+    height: fit-content;
+    display: grid;
+    gap: 0 ;
+  }
+  .menu.show-menu > a{
+    text-decoration: none;
+    border-image: linear-gradient(90deg, rgba(8, 8, 8, 1) 0%, rgba(179, 150, 121, 1) 21%, rgba(0, 0, 0, 1) 37%, rgba(98, 87, 75, 1) 63%, rgba(0, 0, 0, 1) 100%);
+  }
+  .home-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 10px; 
+  height: 10px; 
+  background-color: #0B173B;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.5s var(--ease);
+}
 
   #weather {
     display: grid;
     margin-bottom: 4%;
   }
-
   .weather-widget {
     width: 90vw;
     height: 20px;
@@ -303,8 +363,8 @@ html {
 }
 
 .arr-pr-nx svg {
-  width: 60px;
-  height: 60px;
+  width: 40px;
+  height: 40px;
   margin: 0 1rem;
   cursor: pointer;
   overflow: visible;
@@ -359,8 +419,8 @@ html {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 60px; 
-  height: 60px; 
+  width: 40px; 
+  height: 40px; 
   background-color: #0B173B;
   border-radius: 50%;
   cursor: pointer;
@@ -381,8 +441,6 @@ html {
   color: #FF0000;
 }
 
-
-  
     </style>
 </head>
 {{end}}