3.6.0

Updated engine switcher on desktop
Minor tweaks to search bar and results
Updated classes and ids for easier editing and reference in the future
Updated and simplified meta-tags

css/index.css

@@ -25,7 +25,7 @@ body {
     height: 100%;
 }
 
-/* Search Bar and Logo Container Div */
+/* Search Bar and Logo Container */
     .maindiv {
         margin: auto;
         position: relative;
@@ -62,17 +62,64 @@ body {
         margin: 10px;
         top: 0;
         left: 0;
+        animation: 0.5s ease-out 0s 1 slideInFromTop;
     }
 
     .engine-swticher a {
         padding: 5px;
-        font-size: 20px;
+        font-size: 15px;
         color: var(--text-color);
         text-decoration: none;
     }
 
+    #primary {
+        color: var(--primary-color);
+        font-size: 20px;
+    }
+
+    .engine-swticher a:hover {
+        color: var(--secondary-color);
+        font-size: 20px;
+    }
+
+/* Mobile engine switcher */
+    .m-engine-switcher {
+        display: none; /* Initially hide the toggle container */
+        position: absolute;
+        justify-content: center;
+        top: 15px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-radius: 50px;
+        z-index: 1000;
+        width: 80%;
+        padding: 0 10px;
+    }
+
+    .toggle-btn {
+        display: inline-block;
+        padding: 10px 20px;
+        color: var(--text-color);
+        text-decoration: none;
+        border-radius: 20px;
+        border-width: 5px;
+        transition: background-color 0.3s ease;
+        text-align: center;
+        box-sizing: border-box;
+    }
+
+    #m-primary {
+        background-color: var(--primary-color);
+        color: var(--text-color);
+        box-shadow: 0 0 10px black;
+    }
+
+    .toggle-btn:hover {
+        background-color: var(--secondary-color);
+    }
+
 /* Notification Center */
-    .engine-swticher-2 {
+    .notification-zone {
         position: fixed;
         margin-top: 15px;
         margin-right: 10px;
@@ -83,7 +130,7 @@ body {
         z-index: 1000; /* Ensure it is on top of other elements */
     }
 
-    .engine-swticher-2 .item {
+    .notification-zone .item {
         position: relative;
         color: var(--text-color); /* Text color */
         padding: 10px;
@@ -94,13 +141,14 @@ body {
         width: 100%; /* Full width of the container */
         box-sizing: border-box; /* Include padding and border in the width */
         display: block; /* Ensure items are initially visible */
+        box-shadow: 0 0 10px black;
     }
 
-    .engine-swticher-2 .item.hidden {
+    .notification-zone .item.hidden {
         display: none; /* Hide items with the 'hidden' class */
     }
 
-    .engine-swticher-2 .item .close-btn {
+    .notification-zone .item .close-btn {
         position: absolute;
         top: 5px;
         right: 5px;
@@ -113,8 +161,9 @@ body {
     }
 
 /* Corner Box */
-    .games-found {
+    .corner-box {
         display: flex;
+        max-width: 20%;
         bottom: 0;
         left: 0;
         flex-direction: column;
@@ -124,7 +173,7 @@ body {
         position: fixed;
     }
 
-    .games-found a {
+    .corner-box a {
         padding: 5px;
         font-size: 16px;
         width: 20%;
@@ -149,28 +198,35 @@ body {
         text-decoration: none;
     }
 
+    .terms a:hover {
+        color: var(--secondary-color);
+        font-size: 20px;
+    }
+
 /* Search Box */
     /* search button */
     .gsc-search-button .gsc-search-button-v2 {
         border-radius: 50%;
         border-color: var(--primary-color);
         background-color: var(--primary-color);
-        height: 45px;
+        height: 50px;
-        width: 45px;
+        width: 50px;
         margin: auto;
         padding:10px !important;
         box-shadow: 0 0 10px black;
     }
-    /* search input box */
+    /* search input box, includes input field */ 
     .gsc-input-box input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
-        border-radius: 20px !important; /* rounded corner */
-        border-color: var(--primary-color) !important;
-        border-width: 5px !important;
         background-color: var(--bg-color) !important; /* inner background colour */
         color: var(--text-color);
-        font-family: 'Roboto';
         font-size: 20px;
     }
+    /* search input box, excludes input field */ 
+    .gsc-input-box, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
+        border-radius: 50px !important; /* rounded corner */
+        border-color: var(--primary-color) !important;
+        border-width: 5px !important;
+    }
     /* searchbox outer shadow */
     .gsc-input-box {
         box-shadow: 0 0 10px black;
@@ -180,7 +236,6 @@ body {
         background-color: transparent !important;
         border-color: transparent !important;
     }
-
     /* gets rid of 'x results in x seconds' text */
     .gsc-result-info {
         display: none;
@@ -189,11 +244,6 @@ body {
     .gsc-thumbnail {
         display: none;
     }
-    /* results pagination design */
-    .gsc-cursor-page {
-        font-size: 1.5em;
-        padding: 5px 10px !important;
-    }
     /* gets rid of description gathered from indexed results */
     .gs-snippet {
         display: none;
@@ -207,15 +257,10 @@ body {
         display: none;
     }
     /* colours result titles white (including visited results) */
-    .gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
+    .gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b, a.gs-title:visited {
         color: var(--text-color) !important;
         font-size: 20px;
     }
-    /* styles URL under result titles */
-    .gs-promotion .gs-visibleUrl, .gs-webResult .gs-visibleUrl {
-        color: green !important;
-        font-size: 15px;
-    }
     /* colouring of search result background and border */
     .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
         background-color: var(--bg-color) !important;
@@ -236,7 +281,11 @@ body {
         padding: 5px 10px !important;
         margin: 5px;
     }
-
+    /* results pagination design */
+    .gsc-cursor-page {
+        font-size: 1.5em;
+        padding: 5px 10px !important;
+    }
     /* Styles active page pagination switcher */
     .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
         border-color: var(--primary-color) !important;
@@ -275,32 +324,26 @@ body {
         border: none !important;
         border-bottom: none !important;
     }
-    /* changes colour of scrollable gradient in mobile view */
+    /* styles inactive refinement tabs */
-    .gsc-refinementsGradient {
-        background: linear-gradient(to left,var(--primary-color),rgba(255,255,255,0)) !important;
-    }
-    /* styles inactive filter tabs */
     .gsc-tabHeader.gsc-tabhInactive, .gsc-refinementHeader.gsc-refinementhInactive {
         color: var(--text-color) !important;
         border-color: var(--bg-color) !important;
         background-color: var(--bg-color) !important;
     }
-    /* styles active filter tabs */
+    /* styles active refinement tabs */
     .gsc-tabHeader.gsc-tabhActive, .gsc-refinementHeader.gsc-refinementhActive {
         color: var(--primary-color) !important;
         border-color: var(--primary-color) !important;
         background-color: var(--bg-color) !important;
     }
     /* styles tags on search results */
-    .gsc-control-cse .gsc-table-result {
+    .gsc-control-cse .gsc-table-result span {
-        font-family: Roboto !important;
+        display: none;
-        background: white !important;
+    }
-        border-radius: 3px !important;
+    a.gs-label {
-        margin: 5px auto !important;
+        float: right;
-        padding: 0 5px !important;
+        color: var(--text-color) !important;
-        width: fit-content !important;
+        text-decoration: none !important;
-        float: left !important;
-        margin-left: 3px !important;
     }
     /* colours url on search results */
     .gs-webResult div.gs-visibleUrl {
@@ -315,41 +358,6 @@ body {
         display: none !important;
     }
 
-    /* Mobile engine switcher */
-    .toggle-container {
-        display: none; /* Initially hide the toggle container */
-        position: absolute;
-        justify-content: center;
-        top: 15px;
-        left: 50%;
-        transform: translateX(-50%);
-        border-radius: 50px;
-        z-index: 1000;
-        width: 80%;
-        padding: 0 10px;
-    }
-    
-    .toggle-btn {
-        display: inline-block;
-        padding: 10px 20px;
-        color: var(--text-color);
-        text-decoration: none;
-        border-radius: 20px;
-        border-width: 5px;
-        transition: background-color 0.3s ease;
-        text-align: center;
-        box-sizing: border-box;
-    }
-    
-    #primary {
-        background-color: var(--primary-color);
-        color: var(--text-color);
-    }
-    
-    .toggle-btn:hover {
-        background-color: var(--secondary-color);
-    }
-
 /* Screen-size dependant options */
     @media (max-width: 1000px) {
         .maindiv {
@@ -368,20 +376,16 @@ body {
             display: none;
         }
 
-        .toggle-container {
+        .m-engine-switcher {
             display: flex;
         }
 
-        .engine-switcher-2 {
+        .notification-zone {
             display: none;
         }
 
-        .engine-swticher-2 .item {
+        /* search input box, excludes input field */ 
-            display: none;
+        .gsc-input-box, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
-        }
-
-        /* search input box */
-        .gsc-input-box input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
             border-radius: 50px !important; /* rounded corner */
             margin-right: 5px !important;
         }
@@ -394,7 +398,7 @@ body {
             display: none !important;
         }
 
-        .games-found {
+        .corner-box {
             display: none;
         }
     }

index.html

@@ -8,37 +8,45 @@
 
     <link rel="stylesheet" href="css/index.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <meta property="og:type" content="website">
-    <meta property="twitter:title" content="Rave Game Search">
-    <meta property="og:title" content="Rave Game Search">
-    <meta property="twitter:card" content="summary">
-    <meta property="twitter:description" content="Find the safest free download links to your favorite Video Games">
-    <meta property="og:description" content="Find the safest free download links to your favorite Video Games">
-    <meta property="twitter:image" content="https://ravegamesearch.pages.dev/img/ravesearch.png">
-    <meta property="og:image" content="https://ravegamesearch.pages.dev/img/ravesearch.png">
-    <meta property="description" content="Find the safest free download links to your favorite Video Games">
     <link href="img/favicon.png" rel="shortcut icon">
+
+    <meta name="title" content="Rave Game Search"/>
+    <meta name="description" content="Find the safest free download links to your favourite Video Games"/>
     <meta name="theme-color" content="#F63F4D">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="https://ravegamesearch.pages.dev/"/>
+    <meta property="og:title" content="Rave Game Search"/>
+    <meta property="og:description" content="Find the safest free download links to your favourite Video Games"/>
+    <meta property="og:image" content="https://ravegamesearch.pages.dev/img/ravesearch.png"/>
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image"/>
+    <meta property="twitter:url" content="https://ravegamesearch.pages.dev/"/>
+    <meta property="twitter:title" content="Rave Game Search"/>
+    <meta property="twitter:description" content="Find the safest free download links to your favourite Video Games"/>
+    <meta property="twitter:image" content="https://ravegamesearch.pages.dev/img/ravesearch.png"/>
 </head>
 <body>
     <div class="container">
         
-        <!-- Engine Switcher -->
+        <!-- Desktop Engine Switcher -->
         <div class="engine-swticher">
-            <a href="https://ravegamesearch.pages.dev">> Game Search</a>
+            <a href="https://ravegamesearch.pages.dev" id="primary">Game Search</a>
             <a href="https://ravebooksearch.com">Book Search</a>
             <a href="https://ravesoftwaresearch.pages.dev">Software Search</a>
         </div>
 
         <!-- Mobile engine switcher -->
-        <div class="toggle-container">
+        <div class="m-engine-switcher">
-            <a href="https://ravegamesearch.pages.dev" id="primary" class="toggle-btn">Games</a>
+            <a href="https://ravegamesearch.pages.dev" id="m-primary" class="toggle-btn">Games</a>
             <a href="https://ravebooksearch.com" class="toggle-btn">Books</a>
             <a href="https://ravesoftwaresearch.pages.dev" class="toggle-btn">Software</a>
         </div>
 
         <!-- Notification Centre -->
-        <div class="engine-swticher-2">
+        <div class="notification-zone">
             <!-- First Item: Donation message and button-->
             <div class="item">
                 <div id="donate-button-container">
@@ -76,7 +84,7 @@
                 let hiddenItems = JSON.parse(localStorage.getItem("hiddenItems")) || [];
     
                 // Get all items
-                const items = document.querySelectorAll(".engine-swticher-2 .item");
+                const items = document.querySelectorAll(".notification-zone .item");
     
                 // Loop through items and add 'hidden' class if in hiddenItems array
                 items.forEach(item => {
@@ -86,7 +94,7 @@
                 });
     
                 // Add click event listener to close buttons
-                const closeButtons = document.querySelectorAll(".engine-swticher-2 .close-btn");
+                const closeButtons = document.querySelectorAll(".notification-zone .close-btn");
                 closeButtons.forEach(button => {
                     button.addEventListener("click", function() {
                         const item = this.parentNode;
@@ -150,8 +158,8 @@
     </div>
 
     <!-- Bottom Left Corner Box, formerly Games Found Counter -->
-    <div class="games-found">
+    <div class="corner-box">
-        <a></a>
+        <img src="">
     </div>
 
     <!-- Terms of Use, Privacy Policy and GitHub Link -->