feat: enhance CSS handling and optimize global styles

- Enabled PostCSS nesting with specific configuration for modern compatibility
- Added global CSS reset for consistent tap highlights across browsers
- Optimized package configuration for broader browser support
- Refactored and streamlined global CSS, removing redundant styles for better maintainability
- Integrated additional CSS import in component for modular styling approach

src/assets/global.css

@@ -1,3 +1,7 @@
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
 .site-title {
   view-transition-name: site-title;
   transition: 0.2s ease;
@@ -7,55 +11,6 @@
   transition: 0.2s ease;
 }
 
-[popover] {
-  display: none;
-  &:popover-open {
-    display: block;
-  }
-}
-
-.image-preview-wrap {
-  display: block;
-}
-
-.image-preview-button {
-  -webkit-appearance: none;
-  outline: none;
-  border: none;
-  background: transparent;
-  padding: 0;
-  margin-bottom: 16px;
-}
-
-.modal {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  z-index: 1000;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(20px);
-}
-
-.modal-img {
-  margin: auto;
-  max-width: calc(100% - 40px) !important;
-  max-height: calc(100% - 40px) !important;
-  border-radius: var(--media-border-radius);
-  border: 1px solid var(--border-color);
-  box-shadow: var(--shadows);
-  cursor: pointer;
-  object-fit: scale-down;
-}
-
-@media screen and (min-width: 600px) {
-  .modal-img {
-    max-width: calc(100% - 80px) !important;
-    max-height: calc(100% - 80px) !important;
-  }
-}
-
 .search-icon {
   position: absolute;
   top: 20px;
@@ -63,8 +18,10 @@
   width: 24px;
   height: 24px;
   padding: 4px;
+  appearance: none;
+  outline: none;
 
-  &::after {
+  &:after {
     content: '🔍';
     width: 100%;
     height: 100%;
@@ -81,6 +38,7 @@
 .search-icon:checked + .search-form {
   display: block !important;
 }
+
 .search-form {
   display: none;
   background: rgba(255, 255, 255, 0.75);