oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Download Patch File Download Diff File Expand all files Collapse all files
server/styles.css
+8 -4
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 {
server/templates/community.hbs
+1 -1
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>
server/templates/partials/layout.hbs
+13 -5
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>
server/templates/releases.hbs
+1 -1
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>
server/templates/team.hbs
+1 -1
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>