This is an automated email from the ASF dual-hosted git repository.
jiayu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/sedona.git
The following commit(s) were added to refs/heads/master by this push:
new 44ed6ba4cd [GH-1495] Fix homepage layout bug in mobile view (#1913)
44ed6ba4cd is described below
commit 44ed6ba4cd9caca3ca14876ca5c2e01cedacfedc
Author: Furqaan Khan <[email protected]>
AuthorDate: Wed Apr 9 14:45:03 2025 -0400
[GH-1495] Fix homepage layout bug in mobile view (#1913)
* make some parts of the home page mobile friendly
* better mobile friendliness and reduce margin to 5%
---
docs-overrides/main.html | 40 ++++++++++++++++++++++++++++++----------
1 file changed, 30 insertions(+), 10 deletions(-)
diff --git a/docs-overrides/main.html b/docs-overrides/main.html
index ed0b9639af..914e244d35 100644
--- a/docs-overrides/main.html
+++ b/docs-overrides/main.html
@@ -19,11 +19,31 @@
{% if page.is_homepage %}
<!-- {{ super() }} -->
<style>
-
.md-header{position:initial}.md-main__inner{margin-left:15%}.md-content{display:display}@media
screen and (min-width:60em){.md-sidebar--secondary{display:display}}@media
screen and (min-width:76.25em){.md-sidebar--primary{display:none}}
+
.md-header{position:initial}.md-main__inner{margin-left:5%}.md-content{display:display}@media
screen and (min-width:60em){.md-sidebar--secondary{display:display}}@media
screen and (min-width:76.25em){.md-sidebar--primary{display:none}}
.br {
display: block;
margin-bottom: 14em;
}
+ .responsive-container {
+ display: grid;
+ grid-template-columns: 44% 56%;
+ grid-gap: 20px;
+ }
+ .responsive-text {
+ grid-column: 1;
+ }
+ .responsive-img {
+ grid-column: 2;
+ }
+
+ @media (max-width: 490px) {
+ .responsive-container {
+ grid-template-columns: 100%;
+ }
+ .responsive-text , .responsive-img {
+ grid-column: 1;
+ }
+ }
</style>
<section class="tx-container">
<div class="md-grid md-typeset">
@@ -62,11 +82,11 @@
<div class="tx-hero__content">
<h1>High Speed</h1>
- <div style="width: 100%;">
- <div style="width: 45%; height: 160px; float: left;">
+ <div class="responsive-container">
+ <div class="responsive-text">
According to <a href="./community/publication/">our benchmark
and third-party research papers</a>, Sedona runs 2X - 10X faster than other
Spark-based geospatial data systems on computation-intensive query workloads.
</div>
- <div style="margin-left: 45%; height: 160px;">
+ <div class="responsive-img">
<figure>
<img src="image/jointime.png" width="350">
<figcaption>Execution time of spatial join with
polygons</figcaption>
@@ -79,11 +99,11 @@
<div class="tx-hero__content">
<h1>Low Memory Consumption</h1>
- <div style="width: 100%;">
- <div style="width: 45%; height: 160px; float: left;">
+ <div class="responsive-container">
+ <div class="responsive-text">
According to <a href="./community/publication/">our benchmark
and third-party research papers</a>, Sedona has 50% less peak memory
consumption than other Spark-based geospatial data systems for large-scale
in-memory query processing.
</div>
- <div style="margin-left: 45%; height: 160px;">
+ <div class="responsive-img">
<figure>
<img src="image/joinmem.png" width="350">
<figcaption>Peak memory consumption of spatial join with
polygons</figcaption>
@@ -96,11 +116,11 @@
<div class="tx-hero__content">
<h1>Ease of Use</h1>
- <div style="width: 100%;">
- <div style="width: 45%; height: 160px; float: left;">
+ <div class="responsive-container">
+ <div class="responsive-text">
Sedona offers Scala, Java, Spatial SQL, Python, and R APIs and
integrates them into underlying system kernels with care. You can simply create
spatial analytics and data mining applications and run them in any cloud
environments.
</div>
- <div style="margin-left: 45%; height: 160px;">
+ <div class="responsive-img">
<pre class="hljs" style="display: block; overflow-x: auto; background:
rgb(235, 248, 255); color: rgb(81, 109, 123); padding: 0.5em;"><span
class="hljs-keyword" style="color: rgb(107, 107, 184);">SELECT</span>
superhero.name
<span class="hljs-keyword" style="color: rgb(107, 107, 184);">FROM</span>
city, superhero
<span class="hljs-keyword" style="color: rgb(107, 107, 184);">WHERE</span>
ST_Contains(city.geom, superhero.geom)
