tegakituesday/tegakituesday.com
tegakituesday/tegakituesday.com
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Mockup welcome modal

Browse source
This commit is contained in:
Elnu 2023-06-19 12:34:27 -07:00
parent af9aa1b326
commit 839d6f80ab
3 changed files with 71 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
styles/sass/style.scss
View file

@ -120,4 +120,49 @@ a {
&.phrase {
color: #fab387;
}
}
.servers {
display: flex;
gap: 0.5em;
& > * {
display: flex;
flex-direction: column;
gap: 0.5em;
border: 2px solid;
border-radius: 0.5em;
padding: 0.5em;
width: 100%;
align-items: center;
text-align: center;
img {
width: 96px;
border-radius: 100%;
border: 2px solid;
}
.name {
display: flex;
flex-grow: 1;
align-items: center;
}
}
.recommended {
border-color: mediumseagreen;
.label-wrapper {
height: 0;
.label {
position: relative;
width: fit-content;
border: auto;
bottom: 0px;
background: mediumseagreen;
color: white;
font-weight: bold;
font-size: 0.75em;
text-transform: uppercase;
padding: 0 0.5em 0 0.5em;
border-radius: 2px;
}
}
}
}

1
templates/index.html.tera
View file

@ -8,6 +8,7 @@
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
{% include "modal" %}
<div id="content">
<nav>
<a><svg class="svg-inline" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path></svg></a>

25
templates/modal.html.tera Normal file
View file

@ -0,0 +1,25 @@
<dialog>
<h1>Welcome to Tegaki Tuesday!</h1>
<p>In order to participate in challenges, you must be a member of a participating Discord server.</p>
<h2>Join a participating server</h2>
<div class="servers">
<div class="recommended">
<img src="https://cdn.discordapp.com/icons/189571157446492161/a_5df28dc3a43bc6780cb084b2ad896a9f.webp?size=96" alt="Server icon">
<div class="name">English-Japanese Language Exchange</div>
<div class="label-wrapper">
<div class="label">Recommended</div>
</div>
</div>
<div>
<img src="https://cdn.discordapp.com/icons/116379774825267202/a_425c9b6640fdc30deb5f97eddcf8e6a7.webp?size=96" alt="Server icon">
<div class="name">日本語と英語 - JP & EN</div>
</div>
<div>
<img src="https://cdn.discordapp.com/icons/582147335476346880/677049f139f08cf670e20e8c5f0a656e.webp?size=96" alt="Server icon">
<div class="name">Yudai La Piñata</div>
</div>
</div>
</dialog>
<script>
document.querySelector("dialog").showModal();
</script>