From 94c7642cc25a83875e334ffd94d92785ef4a4207 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20=C5=9Aled=C5=BA?= Date: Thu, 22 Aug 2024 21:44:28 +0200 Subject: [PATCH] Fix spacing in demo tiles --- index.html | 83 +++++++++++++++++++++++++++++++----------------------- styles.css | 22 +++++++++++++++ 2 files changed, 70 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index d533935..39aea43 100644 --- a/index.html +++ b/index.html @@ -80,53 +80,66 @@

A batteries-included WebRTC implementation for the El
- -
Recognizer
-
A simple app performing real-time image recognition.
-
-
    -
  • Phoenix Framework
    • -
  • Elixir WebRTC
    • -
  • Elixir Nx
    • -
+
+ +
Recognizer
+
A simple app performing real-time image recognition.
+
+
+
+
    +
  • Phoenix Framework
    • +
  • Elixir WebRTC
    • +
  • Elixir Nx
    • +
+
+ +
Check it out!
+
- -
Check it out!
-
- -
Broadcaster
-
WHIP/WHEP Twitch-like real-time streaming service with a built-in streaming - panel. +
+ +
Broadcaster
+
WHIP/WHEP Twitch-like real-time streaming service with a built-in streaming + panel. +
-
-
    -
  • Phoenix Framework
    • -
  • Elixir WebRTC
    • -
+
+
+
    +
  • Phoenix Framework
    • +
  • Elixir WebRTC
    • +
+
+ +
Check it out!
+
- -
Check it out!
-
- -
Nexus
-
A single-room video conferencing app.
-
-
    -
  • Phoenix Framework
    • -
  • Elixir WebRTC
    • -
+
+ +
Nexus
+
A single-room Google Meet-like video conferencing app. +
+
+
+
+
    +
  • Phoenix Framework
    • +
  • Elixir WebRTC
    • +
+
+ +
Check it out!
+
- -
Check it out!
-
diff --git a/styles.css b/styles.css index cf35125..7279924 100644 --- a/styles.css +++ b/styles.css @@ -315,6 +315,20 @@ a:visited { box-shadow: 6px 6px 4px rgba(210, 207, 253, 0.5); } +.demo-top { + display: flex; + flex-direction: column; + gap: 13px; + align-items: center; + justify-content: center; +} + +.demo-bottom { + display: flex; + flex-direction: column; + gap: 13px; +} + .demo-img { width: 60px; height: 60px; @@ -605,6 +619,14 @@ a:visited { padding: 55px 30px 55px 30px; } + .demo-top { + gap: 25px; + } + + .demo-bottom { + gap: 20px; + } + .demo-img { width: 81px; height: 65px;