Skip to content

Commit

Permalink
Fix spacing in demo tiles
Browse files Browse the repository at this point in the history
  • Loading branch information
@mickel8
mickel8 committed Aug 22, 2024
1 parent d6069d7 commit 94c7642
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 35 deletions.
83 changes: 48 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,53 +80,66 @@ <h1 class="hero-copy-font">A batteries-included WebRTC implementation for the El
<div class="demos-tiles">
<div class="shadow-box">
<div class="demo">
<img class="demo-img" src="./img/recognizer.svg" />
<div class="demo-title">Recognizer</div>
<div class="demo-desc">A simple app performing real-time image recognition.</div>
<div class="demo-stack">
<ul>
<li><span>Phoenix Framework</span></li>
<li><span>Elixir WebRTC</span></li>
<li><span>Elixir Nx</span></li>
</ul>
<div class="demo-top">
<img class="demo-img" src="./img/recognizer.svg" />
<div class="demo-title">Recognizer</div>
<div class="demo-desc">A simple app performing real-time image recognition.</div>
</div>
<div class="demo-bottom">
<div class="demo-stack">
<ul>
<li><span>Phoenix Framework</span></li>
<li><span>Elixir WebRTC</span></li>
<li><span>Elixir Nx</span></li>
</ul>
</div>
<a href="https://recognizer.elixir-webrtc.org">
<div class="demo-button">Check it out!</div>
</a>
</div>
<a href="https://recognizer.elixir-webrtc.org">
<div class="demo-button">Check it out!</div>
</a>
</div>
</div>
<div class="shadow-box">
<div class="demo">
<img class="demo-img" src="./img/broadcaster.svg" />
<div class="demo-title">Broadcaster</div>
<div class="demo-desc">WHIP/WHEP Twitch-like real-time streaming service with a built-in streaming
panel.
<div class="demo-top">
<img class="demo-img" src="./img/broadcaster.svg" />
<div class="demo-title">Broadcaster</div>
<div class="demo-desc">WHIP/WHEP Twitch-like real-time streaming service with a built-in streaming
panel.
</div>
</div>
<div class="demo-stack">
<ul>
<li><span>Phoenix Framework</span></li>
<li><span>Elixir WebRTC</span></li>
</ul>
<div class="demo-bottom">
<div class="demo-stack">
<ul>
<li><span>Phoenix Framework</span></li>
<li><span>Elixir WebRTC</span></li>
</ul>
</div>
<a href="https://broadcaster.elixir-webrtc.org">
<div class="demo-button">Check it out!</div>
</a>
</div>
<a href="https://broadcaster.elixir-webrtc.org">
<div class="demo-button">Check it out!</div>
</a>
</div>
</div>
<div class="shadow-box">
<div class="demo">
<img class="demo-img" src="./img/nexus.svg" />
<div class="demo-title">Nexus</div>
<div class="demo-desc">A single-room video conferencing app.</div>
<div class="demo-stack">
<ul>
<li><span>Phoenix Framework</span></li>
<li><span>Elixir WebRTC</span></li>
</ul>
<div class="demo-top">
<img class="demo-img" src="./img/nexus.svg" />
<div class="demo-title">Nexus</div>
<div class="demo-desc">A single-room Google Meet-like video conferencing app.
</div>
</div>
<div class="demo-bottom">
<div class="demo-stack">
<ul>
<li><span>Phoenix Framework</span></li>
<li><span>Elixir WebRTC</span></li>
</ul>
</div>
<a href="https://nexus.elixir-webrtc.org">
<div class="demo-button">Check it out!</div>
</a>
</div>
<a href="https://nexus.elixir-webrtc.org">
<div class="demo-button">Check it out!</div>
</a>
</div>
</div>
</div>
Expand Down
22 changes: 22 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 94c7642

Please sign in to comment.