pgdog.git / summary / log / commit / refs
commit 577dfc8a5eaf7bee47d8a8202c982eafcf1aa921
Author: Lev Kokotov <lev.kokotov@gmail.com>
Date: Thu Feb 20 17:34:04 2025 +0000
Add container
web/index.html | 96 +++++++++++-----------
web/style.css | 254 ++++++++++++++++++++++++---------------------------------
web/style.scss | 24 +++++-
3 files changed, 179 insertions(+), 195 deletions(-)
diff --git a/web/index.html b/web/index.html
index 81b2ce38..81042420 100644
--- a/web/index.html
+++ b/web/index.html
@@ -30,57 +30,59 @@
</ul>
</nav>
<main class="pb-5">
- <header style="padding-top: 4rem;">
- <h1 class="flex text-center" style="font-size: 2.5rem;">
- Shard PostgreSQL automatically
- </h1>
- <p class="flex text-center subheading mt-2">
- PgDog is a load balancer and logical replication manager<br> that can (re)shard databases without downtime.
- </p>
- </header>
- <div class="flex mt-5">
- <a target="_blank" href="https://github.com/levkk/pgdog" class="btn primary flex" style="gap:10px;">
- <img src="github-mark.svg" height="16" width="16" class="github">
- <span>Download code</span>
- </a>
- <a target="_blank" href="/docs" class="btn secondary">
- Read documentation
- </a>
- </div>
- <div class="flex mt-5 mb-5">
- <video controls class="embed">
- <source src="demo.mp4">
- </video>
- </div>
- <div class="mt-5 mb-3">
- <h2 class="text-center font-primary fw-semibold">PgDog takes care of <br><span class="font-monospace">everything</span></h2>
- <p class="text-center subheading">Comprehensive by design, nothing is out of scope <br> when it comes
- to scaling PostgreSQL horizontally.</p>
- </div>
- <div class="grid gap-2">
- <div class="col">
- <h3 class="mb-1 font-primary fw-semibold">Route queries</h3>
- <p>Using the PostgreSQL parser, PgDog can inspect queries, extract the sharding column,
- and route them to the correct shard.</p>
+ <div class="container">
+ <header style="padding-top: 4rem;">
+ <h1 class="flex text-center" style="font-size: 2.5rem;">
+ Shard PostgreSQL automatically
+ </h1>
+ <p class="flex text-center subheading mt-2">
+ PgDog is a load balancer and logical replication manager<br> that can (re)shard databases without downtime.
+ </p>
+ </header>
+ <div class="flex mt-5">
+ <a target="_blank" href="https://github.com/levkk/pgdog" class="btn primary flex" style="gap:10px;">
+ <img src="github-mark.svg" height="16" width="16" class="github">
+ <span>Download code</span>
+ </a>
+ <a target="_blank" href="/docs" class="btn secondary">
+ Read documentation
+ </a>
</div>
- <div class="col">
- <h3 class="mb-1 font-primary fw-semibold">Shard existing databases</h3>
- <p>Databases are not greenfield projects. PgDog understands the PostgreSQL replication protocol and can read data directly from databases, splitting it between shards.</p>
+ <div class="flex mt-5 mb-5">
+ <video controls class="embed">
+ <source src="demo.mp4">
+ </video>
</div>
- <div>
- <h3 class="mb-1 font-primary fw-semibold">Scalable coordinator</h3>
- <p>PgDog speaks SQL. It can join results from multiple shards and load balance read queries across replicas. Applications don't know they are talking to a sharded cluster or require special drivers.</p>
+ <div class="mt-5 mb-3">
+ <h2 class="text-center font-primary fw-semibold">PgDog takes care of <br><span class="font-monospace">everything</span></h2>
+ <p class="text-center subheading">Comprehensive by design, nothing is out of scope <br> when it comes
+ to scaling PostgreSQL horizontally.</p>
</div>
- <div>
- <h3 class="mb-1 font-primary fw-semibold">Share-nothing architecture</h3>
- <p>There is no single point of failure. PgDog is controlled via configuration and doesn't have to talk to other nodes or databases.</p>
+ <div class="grid gap-2">
+ <div>
+ <h3 class="mb-1 font-primary fw-semibold">Route queries</h3>
+ <p>Using the PostgreSQL parser, PgDog can inspect queries, extract the sharding column,
+ and route them to the correct shard.</p>
+ </div>
+ <div>
+ <h3 class="mb-1 font-primary fw-semibold">Shard existing databases</h3>
+ <p>Databases are not greenfield projects. PgDog understands the PostgreSQL replication protocol and can read data directly from databases, splitting it between shards.</p>
+ </div>
+ <div>
+ <h3 class="mb-1 font-primary fw-semibold">Scalable coordinator</h3>
+ <p>PgDog speaks SQL. It can join results from multiple shards and load balance read queries across replicas. Applications don't know they are talking to a sharded cluster or require special drivers.</p>
+ </div>
+ <div>
+ <h3 class="mb-1 font-primary fw-semibold">Share-nothing architecture</h3>
+ <p>There is no single point of failure. PgDog is controlled via configuration and doesn't have to talk to other nodes or databases.</p>
+ </div>
</div>
- </div>
- <div class="mt-5 mb-5">
- <div class="flex">
- <a class="btn primary cta" href="https://forms.gle/xU9axyfz8yUQM3XSA" target="_blank">
- Request a demo
- </a>
+ <div class="mt-5 mb-5">
+ <div class="flex">
+ <a class="btn primary cta" href="https://forms.gle/xU9axyfz8yUQM3XSA" target="_blank">
+ Request a demo
+ </a>
+ </div>
</div>
</div>
</main>
diff --git a/web/style.css b/web/style.css
index ffe32973..299e8e18 100644
--- a/web/style.css
+++ b/web/style.css
@@ -2,35 +2,28 @@
display: flex;
justify-content: center;
align-items: center;
- gap: 1rem;
-}
-.flex.left {
- justify-content: flex-start;
-}
+ gap: 1rem; }
+ .flex.left {
+ justify-content: flex-start; }
html,
body {
font-family: "IBM Plex Sans", Arial, sans-serif;
- font-size: 1rem;
-}
+ font-size: 1rem; }
:root {
- --blue: rgb(7, 81, 207);
-}
+ --blue: rgb(7, 81, 207); }
nav {
height: 74px;
border-bottom: 1px solid black;
- background: white;
-}
-nav ul,
-nav li {
- list-style: none;
- font-family: "IBM Plex Mono", monospace;
-}
-nav ul {
- padding: 0;
-}
+ background: white; }
+ nav ul,
+ nav li {
+ list-style: none;
+ font-family: "IBM Plex Mono", monospace; }
+ nav ul {
+ padding: 0; }
h1,
h2,
@@ -38,241 +31,210 @@ h3,
h4,
h5 {
font-family: "IBM Plex Mono", monospace;
- color: hsl(217.8, 93.5%, 42%);
- text-rendering: geometricPrecision;
-}
+ color: #0751cf;
+ text-rendering: geometricPrecision; }
.fs-1 {
- font-size: 2em;
-}
+ font-size: 2em; }
.h1,
h1 {
- font-size: 2em;
-}
+ font-size: 2em; }
.fs-2 {
- font-size: 1.5em;
-}
+ font-size: 1.5em; }
.h2,
h2 {
- font-size: 1.5em;
-}
+ font-size: 1.5em; }
.fs-3 {
- font-size: 1.17em;
-}
+ font-size: 1.17em; }
.h3,
h3 {
- font-size: 1.17em;
-}
+ font-size: 1.17em; }
.fs-4 {
- font-size: 1em;
-}
+ font-size: 1em; }
.h4,
h4 {
- font-size: 1em;
-}
+ font-size: 1em; }
.fs-5 {
- font-size: 0.83em;
-}
+ font-size: 0.83em; }
.h5,
h5 {
- font-size: 0.83em;
-}
+ font-size: 0.83em; }
p.subheading {
font-size: 1.1rem;
- color: hsl(217.1, 12.1%, 33.9%);
- line-height: 1.4rem;
-}
+ color: #4c5461;
+ line-height: 1.4rem; }
.mt-1 {
- margin-top: 1rem;
-}
+ margin-top: 1rem; }
.mb-1 {
- margin-bottom: 1rem;
-}
+ margin-bottom: 1rem; }
.pt-1 {
- padding-top: 1rem;
-}
+ padding-top: 1rem; }
.pb-1 {
- padding-bottom: 1rem;
-}
+ padding-bottom: 1rem; }
.mt-2 {
- margin-top: 1.5rem;
-}
+ margin-top: 1.5rem; }
.mb-2 {
- margin-bottom: 1.5rem;
-}
+ margin-bottom: 1.5rem; }
.pt-2 {
- padding-top: 1.5rem;
-}
+ padding-top: 1.5rem; }
.pb-2 {
- padding-bottom: 1.5rem;
-}
+ padding-bottom: 1.5rem; }
.mt-3 {
- margin-top: 2rem;
-}
+ margin-top: 2rem; }
.mb-3 {
- margin-bottom: 2rem;
-}
+ margin-bottom: 2rem; }
.pt-3 {
- padding-top: 2rem;
-}
+ padding-top: 2rem; }
.pb-3 {
- padding-bottom: 2rem;
-}
+ padding-bottom: 2rem; }
.mt-4 {
- margin-top: 3rem;
-}
+ margin-top: 3rem; }
.mb-4 {
- margin-bottom: 3rem;
-}
+ margin-bottom: 3rem; }
.pt-4 {
- padding-top: 3rem;
-}
+ padding-top: 3rem; }
.pb-4 {
- padding-bottom: 3rem;
-}
+ padding-bottom: 3rem; }
.mt-5 {
- margin-top: 4rem;
-}
+ margin-top: 4rem; }
.mb-5 {
- margin-bottom: 4rem;
-}
+ margin-bottom: 4rem; }
.pt-5 {
- padding-top: 4rem;
-}
+ padding-top: 4rem; }
.pb-5 {
- padding-bottom: 4rem;
-}
+ padding-bottom: 4rem; }
.gap-1 {
- gap: 1rem;
-}
+ gap: 1rem; }
.gap-2 {
- gap: 1.5rem;
-}
+ gap: 1.5rem; }
.gap-3 {
- gap: 2rem;
-}
+ gap: 2rem; }
.gap-4 {
- gap: 3rem;
-}
+ gap: 3rem; }
.gap-5 {
- gap: 4rem;
-}
+ gap: 4rem; }
.text-left {
- text-align: left;
-}
+ text-align: left; }
.text-center {
- text-align: center;
-}
+ text-align: center; }
.text-right {
- text-align: right;
-}
+ text-align: right; }
a {
- color: black;
-}
-a:visited {
- color: black;
-}
-a.btn {
- padding: 12px;
- text-decoration: none;
- text-align: center;
-}
-a.btn.primary {
- border: 1px solid var(--blue);
- background: var(--blue);
- color: white;
-}
-a.btn.secondary:hover {
- text-decoration: underline;
-}
-a.btn.cta {
- padding: 18px;
- font-size: 1.2em;
-}
+ color: black; }
+ a:visited {
+ color: black; }
+ a.btn {
+ padding: 12px;
+ text-decoration: none;
+ text-align: center; }
+ a.btn.primary {
+ border: 1px solid var(--blue);
+ background: var(--blue);
+ color: white; }
+ a.btn.secondary:hover {
+ text-decoration: underline; }
+ a.btn.cta {
+ padding: 18px;
+ font-size: 1.2em; }
.embed {
border: 2px solid var(--blue);
border-radius: 12px;
- box-shadow: 6px 6px 0 rgba(7, 77, 207, 0.0588235294), -6px -6px 0 rgba(7, 77, 207, 0.0588235294);
+ box-shadow: 6px 6px 0 #074dcf0f, -6px -6px 0 #074dcf0f;
max-width: 100%;
- max-height: 100%;
-}
+ max-height: 100%; }
main {
padding: 0 1rem;
- background: color-mix(in oklab, hsl(214.3, 94.6%, 92.7%) 40%, transparent);
- min-height: 100vh;
-}
+ background: color-mix(in oklab, #dbeafe 40%, transparent);
+ min-height: 100vh; }
.grid {
display: grid;
place-items: start;
- grid-template-columns: repeat(2, 1fr);
-}
+ grid-template-columns: repeat(2, 1fr); }
@media all and (max-width: 500px) {
.grid {
- grid-template-columns: 1fr;
- }
+ grid-template-columns: 1fr; }
br {
- display: none;
- }
-}
+ display: none; } }
+
+@media all and (min-width: 576px) {
+ .container {
+ width: 540px;
+ margin: 0 auto; } }
+
+@media all and (min-width: 768px) {
+ .container {
+ width: 720px;
+ margin: 0 auto; } }
+
+@media all and (min-width: 992px) {
+ .container {
+ width: 960px;
+ margin: 0 auto; } }
+
+@media all and (min-width: 1200px) {
+ .container {
+ width: 1140px;
+ margin: 0 auto; } }
+
+@media all and (min-width: 1400px) {
+ .container {
+ width: 1320px;
+ margin: 0 auto; } }
+
.font-primary {
- font-family: "IBM Plex Sans", sans-serif;
-}
+ font-family: "IBM Plex Sans", sans-serif; }
.font-monospace {
- font-family: "IBM Plex Mono", monospfont-monospace;
-}
+ font-family: "IBM Plex Mono", monospfont-monospace; }
.fw-normal {
- font-weight: 400;
-}
+ font-weight: 400; }
.fw-semibold {
- font-weight: 500;
-}
+ font-weight: 500; }
.fw-bold {
- font-weight: 600;
-}
+ font-weight: 600; }
diff --git a/web/style.scss b/web/style.scss
index 3593e9b9..8adf1f48 100644
--- a/web/style.scss
+++ b/web/style.scss
@@ -110,7 +110,6 @@ $alignments: (left, center, right);
}
}
-
//
// Anchors.
//
@@ -181,6 +180,23 @@ main {
}
}
+$container: (
+ 576px: 540px,
+ 768px: 720px,
+ 992px: 960px,
+ 1200px: 1140px,
+ 1400px: 1320px,
+);
+
+@each $breakpoint, $width in $container {
+ @media all and (min-width: $breakpoint) {
+ .container {
+ width: $width;
+ margin: 0 auto;
+ }
+ }
+}
+
.font-primary {
font-family: "IBM Plex Sans", sans-serif;
}
@@ -189,7 +205,11 @@ main {
font-family: "IBM Plex Mono", monospfont-monospace;
}
-$weight: (normal: 400, semibold: 500, bold: 600);
+$weight: (
+ normal: 400,
+ semibold: 500,
+ bold: 600,
+);
@each $name, $weight in $weight {
.fw-#{$name} {
[parent: 884ebd6d2e71]