mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-29 04:20:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Update some styles to improve rendering on mobile

Browse source 
* Add active links for nav on mobile
* Smaller page margins for more edge to edge look
This commit is contained in:
Nate 2021-09-24 17:37:00 -04:00
parent d955be3ed5
commit dc2c235211
5 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
server/styles.css
View file

@ -55,6 +55,10 @@
display: flex;
}
.site-mobile-nav a.active {
font-weight: bold;
}
.text-columns-2 {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
@ -98,8 +102,8 @@
}
.checkbox__control {
width: 1.5rem;
height: 1.5rem;
width: 30px;
height: 30px;
}
.checkbox__control svg {
@ -114,8 +118,8 @@
.checkbox__input input {
opacity: 0;
width: 1.5rem;
height: 1.5rem;
width: 30px;
height: 30px;
}
.checkbox__input input:focus + .checkbox__control {

2
server/templates/community.hbs
View file

@ -1,6 +1,6 @@
{{#> layout }}
<div class="max-w-screen-lg p-10 mx-auto font-extralight text-main lg:p-20">
<div class="max-w-screen-lg p-5 mx-auto font-extralight text-main lg:p-20">
<h1 class="mb-10 font-display font-extralight">We’re building a community of passionate developers &amp; advocates.</h1>
<p class="mt-5 leading-relaxed">If you would like to get involved early, sign up for the our community below and we will let you know when it opens.</p>

18
server/templates/partials/layout.hbs
View file

@ -34,7 +34,7 @@
<body class="box-border font-light bg-black font-body text-main">
<main class="container flex flex-col mx-auto lg:bg-white lg:flex-none lg:grid lg:min-h-full lg:grid-cols-4 max-w-screen-2xl lg:gap-x-px text-gray-50">
<nav class="p-5 pt-10 pb-0 bg-black font-extralight lg:hidden">
<nav id="mobile-nav" class="p-5 pt-10 pb-5 bg-black font-extralight lg:hidden site-mobile-nav">
<div class="flex flex-row justify-between">
<a href="/" class="block hover:opacity-80">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -69,16 +69,16 @@
</a>
<a href="/community" class="mr-2 text-lg leading-relaxed">
Waitlist <span class="pt-1 mr-1 text-lg text-gray-500">·</span>
Waitlist
</a>
{{#if current_user}}
<a href="/releases" class="mr-2 text-lg leading-relaxed">
Releases <span class="pt-1 mr-1 text-lg text-gray-500">·</span>
<span class="pt-1 mr-1 text-lg text-gray-500">·</span> Releases
</a>
{{#if current_user.is_admin }}
<a href="/admin" class="inline-block mr-2 text-lg leading-relaxed">
Manage Users <span class="pt-1 mr-1 text-lg text-gray-500">·</span>
<span class="pt-1 mr-1 text-lg text-gray-500">·</span> Manage Users
</a>
{{/if}}
{{/if}}
@ -164,7 +164,7 @@
{{/if}}
</nav>
<div class="col-span-3 bg-black">
<div class="col-span-3 pb-20 bg-black">
{{> @partial-block}}
</div>
</main>
@ -180,6 +180,14 @@
link.classList.add('active');
}
}
const mnav = document.getElementById('mobile-nav');
const mlinks = mnav.getElementsByTagName('a');
const mcurrentPath = window.location.pathname;
for (const mlink of mlinks) {
if (mlink.getAttribute('href') === mcurrentPath) {
mlink.classList.add('active');
}
}
</script>
</html>

2
server/templates/releases.hbs
View file

@ -1,6 +1,6 @@
{{#> layout }}
<div class="max-w-screen-lg p-10 mx-auto font-extralight text-main lg:p-20">
<div class="max-w-screen-lg p-5 mx-auto font-extralight text-main lg:p-20">
{{#if current_user}}
<h1 class="mb-10 font-display font-extralight">Releases</h1>
<p class="mt-5 leading-relaxed">Zed is currently only available on macOS.</p>

2
server/templates/team.hbs
View file

@ -1,6 +1,6 @@
{{#> layout }}
<div class="max-w-screen-lg p-10 mx-auto font-extralight text-main lg:p-20">
<div class="max-w-screen-lg p-5 mx-auto font-extralight text-main lg:p-20">
<h1 class="mb-10 text-4xl text-white font-display font-extralight">
We think there’s a better way to write code–and we've been working for more than a decade to bring it into existence.
</h1>