Skip to content

Commit

Permalink
feat!: Update application style.
Browse files Browse the repository at this point in the history
  • Loading branch information
@abiddiscombe
abiddiscombe committed Oct 20, 2024
1 parent 17df106 commit 9ad6793
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 101 deletions.
28 changes: 14 additions & 14 deletions src/_regions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,91 +4,91 @@ function lookup(regionKey: string) {
return {
id: regionKey,
name: "Tokyo",
emoji: "",
emoji: "🇯🇵",
};

case "asia-south1":
return {
id: regionKey,
name: "Mumbai",
emoji: "",
emoji: "🇮🇳",
};

case "asia-southeast1":
return {
id: regionKey,
name: "Singapore",
emoji: "",
emoji: "🇸🇬",
};

case "australia-southeast1":
return {
id: regionKey,
name: "Sydney",
emoji: "",
emoji: "🇦🇺",
};

case "me-west1":
return {
id: regionKey,
name: "Tel Aviv",
emoji: "",
emoji: "🇮🇱",
};

case "europe-west2":
return {
id: regionKey,
name: "London",
emoji: "",
emoji: "🇬🇧",
};

case "europe-west3":
return {
id: regionKey,
name: "Frankfurt",
emoji: "",
emoji: "🇩🇪",
};

case "europe-west4":
return {
id: regionKey,
name: "Netherlands",
emoji: "",
name: "the Netherlands",
emoji: "🇳🇱",
};

case "southamerica-east1":
return {
id: regionKey,
name: "São Paulo",
emoji: "",
emoji: "🇧🇷",
};

case "us-east4":
return {
id: regionKey,
name: "North Virginia",
emoji: "",
emoji: "🇺🇸",
};

case "us-south1":
return {
id: regionKey,
name: "Texas",
emoji: "",
emoji: "🇺🇸",
};

case "us-west2":
return {
id: regionKey,
name: "California",
emoji: "",
emoji: "🇺🇸",
};

default:
return {
id: regionKey,
name: "Your PC",
emoji: "",
emoji: "💻",
};
}
}
Expand Down
Binary file removed src/static/deno.jpg
View file
Binary file not shown.
115 changes: 50 additions & 65 deletions src/static/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,19 @@ body {
background-color: var(--body-bg);
}

a {
color: var(--body-fg);
}

a:hover {
color: var(--body-sfg);
text-decoration-thickness: 2px;
}

a:visited {
color: var(--body-fg);
}

/* header */

header {
Expand All @@ -38,13 +51,12 @@ header {
header > h1 {
margin: 0;
padding: 0;
font-size: 1.2em;
font-weight: normal;
color: var(--body-fg);
user-select: none;
font-size: 1rem;
font-weight: 500;
color: var(--body-sfg);
}

header > nav > ul {
header > ul {
margin: 0;
padding: 0;
list-style-type: none;
Expand All @@ -53,91 +65,64 @@ header > nav > ul {
align-items: center;
}

header > nav > ul > li > a {
header > ul > li > a {
margin: 0;
padding: 1em 0;
font-size: 0.9em;
text-decoration: none;
color: var(--body-fg);
}

header > nav > ul > li > a:hover {
color: var(--body-sfg);
text-decoration: underline;
font-size: 0.95rem;
}

/* main */

main {
margin: 0;
padding: 1.4em;
padding: 2em;
display: grid;
place-items: center;
}

main > section {
display: flex;
flex-direction: column;
align-items: start;
gap: 2em;
}

main > section > img {
padding: 0;
max-height: 8em;
border-radius: 4em;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
user-select: none;
}

@media screen and (min-width: 900px) {
main > section {
padding-bottom: 3em;
align-items: center;
flex-direction: row;
gap: 6em;
}

main > section > img {
max-height: 22em;
border-radius: 20em;
border: 1px solid var(--body-fg);
}
}

@media (prefers-color-scheme: dark) {
main > section > img {
box-shadow: 7px 10px 33px -3px rgba(127, 0, 255, 0.5);
-webkit-box-shadow: 7px 10px 33px -3px rgba(127, 0, 255, 0.5);
-moz-box-shadow: 7px 10px 33px -3px rgba(127, 0, 255, 0.5);
}
}

main > section > div {
max-width: 26em;
text-align: left;
main > div {
max-width: 32em;
padding: 0 0 2em 0;
}

main > section > div > p {
main > div > h2 {
margin: 0;
margin-top: 1em;
padding: 0;
padding: 0 0 1em 0;
font-size: 1rem;
font-weight: 400;
color: var(--body-fg);
}

main > section > div > p > span {
main > div > h2 > span {
display: block;
margin-top: 0.2em;
margin-bottom: 0.2em;
font-size: 3em;
font-weight: 600;

font-size: 4rem;
font-weight: 800;
color: var(--body-sfg);
background: -webkit-linear-gradient(#e100ff, #7f00ff);
background: -webkit-linear-gradient(#ff416c, #ff4b2b);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

main > section > div > p > strong {
main > div > p {
margin: 0;
padding: 0 0 1em 0;
font-weight: 400;
line-height: 1.24rem;
color: var(--body-fg);
}

main > div > p > a, main > div > p > a:hover, main > div > p > a:visited {
color: var(--body-fg);
}

main > div > p > a:hover {
text-decoration-thickness: 2px;
}

main > div > p > strong {
font-weight: 500;
color: var(--body-sfg);
}
26 changes: 12 additions & 14 deletions src/templates/layouts/basic.eta
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,18 @@
<body>
<header>
<h1>Deno Finder</h1>
<nav>
<ul>
<li>
<a target='_blank' href="https://deno.com/deploy/docs/regions">
Region List
</a>
</li>
<li>
<a target='_blank' href="https://github.com/abiddiscombe/deno-finder">
View Source
</a>
</li>
</ul>
</nav>
<ul>
<li>
<a target='_blank' href="https://deno.com/deploy/docs/regions">
Region List
</a>
</li>
<li>
<a target='_blank' href="https://github.com/abiddiscombe/deno-finder">
GitHub
</a>
</li>
</ul>
</header>
<%~ it.body %>
</body>
Expand Down
13 changes: 5 additions & 8 deletions src/templates/main.eta
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
<% layout("./layouts/basic.eta") %>

<main>
<section>
<img src="/static/deno.jpg" alt="Deno dinosaur against a starry sky." />
<div>
<p>Your nearest Deno Deploy region is... <span><%= it.location.name%></span> <code>aka <%= it.location.id %></code></p>
<p>This instance on Deno Deploy has been alive for <strong><%= Math.floor(it.timeAlive) %></strong> seconds and has served <strong><%= it.requests.totalSession %></strong><%= it.requests.totalSession === 1 ? ' request' : ' requests' %>.</p>
<p>Deno Finder has received <strong><%= it.requests.totalGlobal%></strong> requests in the last 24 hours, with ~ <strong><%= it.requests.percentageViaRegion%></strong>% coming from your region.</p>
</div>
</section>
<div>
<h2>Greetings from... <span><%= it.location.name%>!</span></h2>
<p>You've just recieved data from part of the <a href="https://deno.com/deploy" target="_blank">Deno Deploy</a> network hosted in <%= it.location.name%> (<%= it.location.id %>). This instance has been active for <strong><%= Math.floor(it.timeAlive) %></strong> seconds and has served <strong><%= it.requests.totalSession %></strong><%= it.requests.totalSession === 1 ? ' request' : ' individual requests' %>.</p>
<p>Deno Finder has received <strong><%= it.requests.totalGlobal%></strong> requests in the last 24 hours. <strong><%= it.requests.percentageViaRegion%></strong>% of these have been handled by infrastructure in <%= it.location.name%> <%= it.location.emoji%>.</p>
</div>
</main>

0 comments on commit 9ad6793

Please sign in to comment.