diff --git a/engines/qwant/image.php b/engines/qwant/image.php index 4a3857f..209b9a9 100644 --- a/engines/qwant/image.php +++ b/engines/qwant/image.php @@ -51,8 +51,20 @@ $alt = $result["alt"]; $url = $result["url"]; + $parsed_url = parse_url($url); + $host = $parsed_url['host']; + + // Extract the domain name from the host + $url_trunc = preg_replace('/^www\./', '', $host); + echo ""; + echo "
"; echo ""; + echo "
"; + echo ""; + echo "$url_trunc"; + echo "

$alt

"; + echo "
"; echo "
"; } diff --git a/static/css/styles.css b/static/css/styles.css index 92bf365..edf91c8 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -315,6 +315,7 @@ a:hover, margin-top: 1px; font-weight: 500; margin-bottom: 8px; + width: fit-content; } .special-result-container a { @@ -345,15 +346,55 @@ 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: 12rem; + 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; } .image-result-container img { @@ -364,7 +405,6 @@ a[title] { vertical-align: bottom; } - .git-container { right: 0; }