update: add the package page

public/style.css

@@ -5,43 +5,157 @@ main {
   padding: 40px 10% 0% 10%;
 }
 
-.search {
-  display: flex;
-  color: var(--bright-main);
-  background: var(--dark-second);
-  border: solid 1px var(--bright-main);
-  flex-direction: column;
-  padding: 30px;
-  gap: 10px;
+.package-main {
+  padding: 40px 20% 0% 20%;
 }
 
-.status {
+.package {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.package tr {
+  font-size: 15px;
+}
+
+.package th {
+  padding: 10px;
+  border: 1px solid var(--bright-third);
+  background: var(--dark-second);
+  color: var(--bright-second);
+  text-align: left;
+  flex-grow: 4;
+}
+
+.package th {
   color: var(--bright-main);
+  font-weight: 400;
+  font-size: 16px;
+}
+
+.package th a {
+  color: var(--bright-second);
+}
+
+.package th a:hover {
+  color: var(--bright-main);
+}
+
+.package tr th:first-child {
+  font-weight: 900;
+  width: 20%;
+}
+
+.package tr th:last-child {
+  font-weight: 400;
+  font-style: italic;
+}
+
+.package-name th {
+  background: var(--dark-third);
+  border: 1px solid var(--bright-second);
+}
+
+.detail {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 18px;
 }
 
-form {
-  flex-direction: row;
-  justify-content: space-around;
+.detail h3 {
+  font-size: 30px;
+  color: var(--bright-main);
+}
+
+.detail .links {
   display: flex;
+  flex-direction: row;
+}
+
+.detail .links a {
+  border: solid 1px var(--bright-third);
+  background: var(--dark-second);
+  color: var(--bright-second);
+  font-size: 16px;
+  padding: 7px 10px;
+}
+
+.detail .links a:hover {
+  border: solid 1px var(--bright-second);
+  color: var(--bright-main);
+}
+
+.checkbox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   gap: 5px;
 }
 
-form input {
-  flex-grow: 4;
+form {
+  display: flex;
+  flex-direction: row;
+  color: var(--bright-main);
+  background: var(--dark-second);
+  border: solid 1px var(--bright-second);
+  padding: 30px;
+  gap: 10px;
+}
+
+form .search {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 0 0 80%;
+}
+
+@media only screen and (max-width: 1500px) {
+  form .search {
+    flex: 0 0 70%;
+  }
+}
+
+@media only screen and (max-width: 1000px) {
+  form .search {
+    flex: 0 0 60%;
+  }
+}
+
+form .search input {
   font-size: 15px;
   color: white;
   background: var(--dark-main);
   padding: 10px;
   outline: none;
-  flex-grow: 4;
   border: solid 1px var(--bright-third);
 }
 
-form select {
+form .search .status{
+  color: var(--bright-main);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+@media only screen and (max-width: 900px) {
+  form .search .status{
+    flex-direction: column;
+    align-items: left;
+    gap: 5px;
+  }
+}
+
+form .options {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+form .options select {
   appearance: none;
   flex-grow: 1;
   font-size: 15px;
@@ -52,7 +166,7 @@ form select {
   cursor: pointer;
   display: grid;
   border: none;
-  width: 10%;
+  width: 100%;
   border: solid 1px var(--bright-third);
 
   margin: 0;      
@@ -77,17 +191,17 @@ form select {
   background-repeat: no-repeat;
 }
 
-table {
+.list {
   margin-top: 20px;
   border-collapse: collapse;
   width: 100%;
 }
 
-table tr {
+.list tr {
   font-size: 15px;
 }
 
-table th, table td {
+.list th, .list td {
   padding: 10px;
   border: 1px solid var(--bright-second);
   background: var(--dark-second);
@@ -96,15 +210,19 @@ table th, table td {
   flex-grow: 4;
 }
 
-table td a {
+.list td a {
   color: var(--bright-second);
 }
 
-table th {
+.list td a:hover {
+  color: var(--bright-main);
+}
+
+.list th {
   font-weight: 900;
   color: var(--bright-main);
 }
 
-table td {
+.list td {
   font-style: italic;
 }