";
foreach($results as $result)
@@ -51,15 +50,12 @@
$thumbnail = $result["thumbnail"];
echo "
";
}
diff --git a/engines/google/text.php b/engines/google/text.php
index 9102f63..c5270b1 100644
--- a/engines/google/text.php
+++ b/engines/google/text.php
@@ -140,26 +140,20 @@
$response = $special["special_response"]["response"];
$source = $special["special_response"]["source"];
- echo "
";
+ echo "
";
if (array_key_exists("image", $special["special_response"]))
{
$image_url = $special["special_response"]["image"];
echo "";
}
-
- echo "
";
-
+ echo $response;
if ($source)
echo "
$source";
- echo "
$response
";
-
- echo "
";
+ echo "";
array_shift($results);
}
- echo "
";
- echo "
";
echo "
";
foreach($results as $result)
diff --git a/engines/qwant/image.php b/engines/qwant/image.php
index 2d62fb4..d5b7a16 100644
--- a/engines/qwant/image.php
+++ b/engines/qwant/image.php
@@ -42,7 +42,6 @@
function print_image_results($results)
{
- echo "
";
echo "
"; // .next-page-button-wrapper
+ echo "
";
}
-
- echo "
"; // .result-container-inner (text.php->print_x_results)
- echo "
"; // .result-container
?>
diff --git a/static/css/themes/amoled.css b/static/css/amoled.css
similarity index 100%
rename from static/css/themes/amoled.css
rename to static/css/amoled.css
diff --git a/static/css/themes/auto.css b/static/css/auto.css
similarity index 100%
rename from static/css/themes/auto.css
rename to static/css/auto.css
diff --git a/static/css/themes/dark.css b/static/css/dark.css
similarity index 100%
rename from static/css/themes/dark.css
rename to static/css/dark.css
diff --git a/static/css/themes/darker.css b/static/css/darker.css
similarity index 100%
rename from static/css/themes/darker.css
rename to static/css/darker.css
diff --git a/static/css/themes/discord.css b/static/css/discord.css
similarity index 100%
rename from static/css/themes/discord.css
rename to static/css/discord.css
diff --git a/static/css/themes/github_night.css b/static/css/github_night.css
similarity index 100%
rename from static/css/themes/github_night.css
rename to static/css/github_night.css
diff --git a/static/css/themes/google.css b/static/css/google.css
similarity index 100%
rename from static/css/themes/google.css
rename to static/css/google.css
diff --git a/static/css/themes/gruvbox.css b/static/css/gruvbox.css
similarity index 100%
rename from static/css/themes/gruvbox.css
rename to static/css/gruvbox.css
diff --git a/static/css/themes/light.css b/static/css/light.css
similarity index 100%
rename from static/css/themes/light.css
rename to static/css/light.css
diff --git a/static/css/themes/night_owl.css b/static/css/night_owl.css
similarity index 100%
rename from static/css/themes/night_owl.css
rename to static/css/night_owl.css
diff --git a/static/css/themes/nord.css b/static/css/nord.css
similarity index 100%
rename from static/css/themes/nord.css
rename to static/css/nord.css
diff --git a/static/css/themes/startpage.css b/static/css/startpage.css
similarity index 100%
rename from static/css/themes/startpage.css
rename to static/css/startpage.css
diff --git a/static/css/styles.css b/static/css/styles.css
index b4175fe..3b56ac0 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,19 +1,3 @@
-/* Layout variables */
-:root {
- --footer-height: 51px;
-}
-
-/* Color variables */
-:root {
- /*
- TODO: Variables here were magic colors
- found scattered around in the primary CSS.
- Move them to in their respective themes
- in the future :v
- */
- --element-border-focus: #5f6368;
-}
-
html {
color: var(--main-fg);
background-color: var(--main-bg);
@@ -56,28 +40,12 @@ a:hover,
}
.search-container {
- /* Make the search container take up 100% of the screen height
- And cooperate with the footer */
- height: calc(100vh - var(--footer-height));
-
- /* Flex properties for correct alignment */
- display: flex;
- flex-direction: column;
-
- /* Align text & items in the middle */
text-align: center;
- justify-content: center;
- align-items: center;
-
- /* Gap between elements */
- gap: 1rem
+ margin-top: 10%;
}
.search-container h1 {
font-size: 70px;
-
- /* Remove unnecessary margin */
- margin-bottom: 0;
}
.search-container input,
@@ -85,34 +53,11 @@ a:hover,
width: 500px;
color: var(--search-container-text-color);
background-color: var(--search-container-background-color);
+ padding: 10px;
font-size: inherit;
font-family: sans-serif;
border: 1px solid var(--search-container-background-border);
border-radius: 25px;
-
- /* Give a wider padding on the X axis to look more appealing */
- padding: 10px 16px;
-}
-
-/* Input focus style for accessibility */
-.search-container input:focus,
-.sub-search-container input:focus {
- border: 1px solid var(--element-border-focus);
-}
-
-/* Make sure that we can differentiate the placeholder
- from real input */
-.search-container input::placeholder,
-.sub-search-container input::placeholder {
- font-style: italic;
-}
-
-/* Make the search button wrapper a flexbox */
-.search-button-wrapper {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 1rem;
}
.search-button-wrapper button,
@@ -123,7 +68,12 @@ a:hover,
font-size: 14px;
border: 1px solid var(--main-bg);
border-radius: 4px;
- padding: 10px 16px;
+ padding: 13px 10px 13px 10px;
+}
+
+.search-button-wrapper button {
+
+ margin: 30px 60px 0px 60px;
}
.sub-search-container {
@@ -166,7 +116,7 @@ a:hover,
.search-button-wrapper button:hover,
.misc-container button:hover {
- border: 1px solid var(--element-border-focus);
+ border: 1px solid #5f6368;
cursor: pointer;
}
@@ -222,85 +172,37 @@ a:hover,
padding: 5px;
font-size: inherit;
font-family: inherit;
- border: 1px solid var(--element-border-focus);
+ border: 1px solid #5f6368;
border-radius: 5px;
float: right;
}
-.result-container {
- display: flex;
- flex-direction: row-reverse;
- gap: 2rem;
- width: fit-content;
- padding: calc(var(--footer-height) + 2rem) 170px;
- padding-top: 1rem;
- box-sizing: border-box;
-}
-
-.result-container-inner {
- display: flex;
- flex-direction: column;
-}
-
-/* Allow the video wrapper to be a bit bigger */
-.result-container[data-type="2"] .text-result-wrapper {
- max-width: 700px;
-}
-
-#time {
- font-size: 13px;
- opacity: 0.65;
- order: 0;
-}
-
-.image-result-container,
-.text-result-container {
- order: 1;
-}
-
+.text-result-container,
+#time,
.next-page-button-wrapper {
- order: 2;
+ margin-left: 170px;
}
.text-result-container {
- margin-bottom: 2rem;
- display: flex;
- flex-direction: column;
- gap: 1rem;
+ margin-bottom: 100px;
}
.special-result-container {
- padding: 18px;
+ padding: 10px;
border: 1px solid var(--special-result-border);
width: 500px;
border-radius: 8px;
background: var(--special-text-background);
color: var(--special-text-color);
- height: fit-content;
- box-sizing: border-box;
-
- /* New layout */
- display: flex;
- flex-direction: row;
- gap: 1.5rem;
+ margin-left: 840px;
+ margin-top: 0px;
+ position: absolute;
}
-.special-result-container-inner {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-}
-
-.special-result-container-inner p {
- font-size: 16px;
- margin: 0;
- color: var(--main-fg);
-}
-
-
.text-result-wrapper {
max-width: 550px;
word-wrap: break-word;
+ margin-bottom: 35px;
}
.text-result-wrapper a {
@@ -308,12 +210,9 @@ a:hover,
color: var(--result-fg);
}
-.video-thumbnail {
- min-height: 96px;
- max-height: 96px;
- background-color: var(--search-container-background-color);
+.video-img {
+ height: 115px;
border-radius: 12px;
- aspect-ratio: 4 / 3;
}
.text-result-wrapper h2 {
@@ -321,27 +220,33 @@ a:hover,
color: var(--result-link-fg);
padding-top: 5px;
margin-top: 1px;
- font-weight: 500;
- margin-bottom: 8px;
- width: fit-content;
}
.special-result-container a {
display: flex;
+ margin-top: 10px;
font-size: 14px;
}
.special-result-container img {
display: flex;
max-width: 60%;
- max-height: 64px;
+ max-height: 200px;
+ padding-bottom: 10px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.next-page-button-wrapper {
+ margin-top: -50px;
+ margin-bottom: 100px;
}
.next-page-button-wrapper button {
border: none;
background-color: inherit;
color: var(--result-link-fg);
- font-size: 16px;
+ font-size: 18px;
margin-right: 8px;
}
@@ -354,55 +259,15 @@ a:hover,
flex-wrap: wrap;
grid-gap: 1.5rem;
justify-items: center;
+ margin-left: 9%;
+ margin-right: 9%;
padding: 0;
margin-bottom: 50px;
}
a[title] {
flex-grow: 1;
- height: fit-content;
-
- display: flex;
- flex-direction: column;
-
- gap: 1rem;
-}
-
-a[title] .image-wrapper {
- min-height: 12rem;
- width: 100%;
- background-color: var(--search-container-background-color);
- border-radius: 8px;
-}
-
-a[title] img {
- max-height: 12rem;
- border-radius: 8px;
-}
-
-a[title] .image-properties {
- display: flex;
- flex-direction: column;
- gap: 4px;
-}
-
-.image-properties .image-url {
- font-size: 13px;
- color: var(--result-fg);
-}
-
-.image-properties .image-title {
- font-size: 18px;
- font-weight: 500;
- color: var(--result-link-fg);
- width: fit-content;
- margin: 0;
-
- /* Trunc */
- max-width: 300px;
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
+ height: 12rem;
}
.image-result-container img {
@@ -413,18 +278,6 @@ a[title] .image-properties {
vertical-align: bottom;
}
-.video-link {
- display: inline-flex;
- flex-direction: row;
- align-items: flex-start;
- gap: 1rem;
-}
-
-.video-link .video-img {
- max-height: 96px;
- background-color: var(--search-container-background-color);
- border-radius: 8px;
-}
.git-container {
right: 0;
@@ -444,7 +297,6 @@ a[title] .image-properties {
padding-bottom: 15px;
border-top: 1px solid var(--border);
text-align: center;
- max-height: var(--footer-height);
}
.git-container a {
@@ -477,16 +329,11 @@ a[title] .image-properties {
color: #ff79c6;
}
-@media only screen and (max-width: 1422px) {
- /* Move the special result to the top of the page, under the #time element */
- .result-container {
- flex-direction: column;
- gap: 1rem;
- }
-
+@media only screen and (max-width: 1320px) {
.special-result-container {
- max-width: 550px;
- margin: 0;
+ position: relative;
+ float: none;
+ margin-left: 165px;
}
}
@@ -504,12 +351,10 @@ a[title] .image-properties {
width: 80%;
}
- .search-button-wrapper {
- flex-direction: column;
- }
-
.search-button-wrapper button {
- width: 100%;
+ display: table-row;
+ margin: 30px 0px 0px 0px;
+ width: 80%;
}
.image-result-container {
@@ -591,6 +436,7 @@ a[title] .image-properties {
position: relative;
float: none;
max-width: 90%;
+ margin-left: 10px;
width: auto;
}
@@ -611,21 +457,10 @@ a[title] .image-properties {
margin-top: 10%;
}
- .special-result-container {
- margin: 0;
- max-width: 550px;
-
- /* Make the layout a column */
- flex-direction: column;
- }
-
- .special-result-container img {
- max-width: 64px;
- }
-
- .result-container {
- /* Remove the giant padding from the container */
- padding: calc(var(--footer-height) + 2rem) 25px;
- padding-top: 1rem;
+ .text-result-container,
+ #time,
+ .next-page-button-wrapper {
+ margin-left: 20px;
+ max-width: 90%;
}
}