layout updates

This commit is contained in:
Nate 2021-09-20 10:34:18 -04:00
parent 493fb4fc24
commit 893ff2f26f
6 changed files with 107 additions and 63 deletions

View file

@ -1,41 +1,61 @@
/* This file is compiled to /assets/styles/tailwind.css via script/tailwind */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;1,200;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;0,600;1,100;1,300;1,600&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;1,200;1,300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;0,600;1,100;1,300;1,600&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-size: 125%;
text-rendering: geometricPrecision;
}
h1 {
@apply text-4xl;
@apply tracking-tighter;
}
h2 {
@apply text-3xl;
@apply tracking-tighter;
}
h3 {
@apply text-2xl;
@apply tracking-tighter;
}
h4 {
@apply text-xl;
}
.underline, .hover\:underline:hover {
text-underline-offset: 4px;
html {
font-size: 125%;
text-rendering: geometricPrecision;
}
h1 {
@apply text-4xl;
@apply tracking-tighter;
}
h2 {
@apply text-3xl;
@apply tracking-tighter;
}
h3 {
@apply text-2xl;
@apply tracking-tighter;
}
h4 {
@apply text-xl;
}
.underline,
.hover\:underline:hover {
text-underline-offset: 4px;
}
@media screen and (min-width: 1124px) {
.text-columns-2 {
column-count: 2;
column-gap: 3rem;
}
/* This fixes scrollbar jump */
@media screen and (min-width: 960px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
}
.text-columns-2 {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.text-columns-2 p {
break-inside: avoid;
}
/* This fixes scrollbar jump */
@media screen and (min-width: 960px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
}
}
}

View file

@ -4,4 +4,17 @@
Sorry, we encountered a {{status}} error: {{reason}}.
</div>
</div>
<div class="max-w-screen-lg mx-auto text-main font-extralight p-20">
<article class="max-w-xl">
<h1 class="text-white text-4xl font-display font-extralight mb-10">Sorry, we encountered a {{status}} error:</h1>
<p class="leading-7">
{{reason}}
</p>
<p class="leading-7">
Try refreshing or going <a href="/">home</a>.
</p>
</article>
</div>
{{/layout}}

View file

@ -1,18 +1,20 @@
{{#> layout }}
<div class="max-w-screen-lg mx-auto text-main font-extralight p-20">
<h1 class="text-white text-4xl font-display font-extralight mb-10">Meet Zed&mdash;A lightning fast code editor written natively in Rust.</h1>
<p class="leading-7">
Level up your development process with:
<ul class="mt-2 ml-8 list-disc leading-8">
<li>a <a href="/tech#rust>" class="underline">lightning fast</a> code editor</li>
<li>real time collaboration on any work tree</li>
<li>powerful code annotation tools</li>
<li>the ability to rewind time to any point</li>
</ul>
</p>
<p class="mt-5 leading-7">Early access to Zed will open up mid-2022 for small teams and individuals in our <a class="underline" href="/community">community</a>.</p>
<a href="/story" class="underline inline-block border border-white mt-10 mb-10 p-5">Read our story.</a>
<article class="max-w-xl">
<h1 class="text-white text-4xl font-display font-extralight mb-10">Introducing Zed&mdash;A lightning fast code editor written natively in Rust.</h1>
<p class="leading-7">
Level up your development process with:
<ul class="mt-2 ml-8 list-disc leading-8">
<li>a <a href="/tech#rust>" class="underline">lightning fast</a> code editor</li>
<li>real time collaboration on any work tree</li>
<li>powerful code annotation tools</li>
<li>the ability to rewind time to any point</li>
</ul>
</p>
<p class="mt-5 leading-7">Early access to Zed will open up mid-2022 for small teams and individuals in our <a class="underline" href="/community">community</a>.</p>
<a href="/story" class="underline inline-block border border-white mt-10 mb-10 p-5">Read our story.</a>
</article>
</div>
{{/layout}}

View file

@ -55,7 +55,7 @@
<!-- If user is at least an insider -->
{{#if current_user}}
<div class="font-mono flex flex-col mt-10">
<p class="text-xs opacity-25 tracking-widest uppercase">Insider Zone</p>
<p class="text-xs opacity-50 tracking-widest uppercase">Insiders</p>
<a href="/updates" class="text-base lowercase no-underline hover:underline mt-2">
Updates
</a>
@ -67,9 +67,9 @@
<!-- AND If user is an admin -->
{{#if current_user.is_admin }}
<div class="font-mono flex flex-col mt-10">
<p class="text-xs opacity-25 uppercase">Admin Zone</p>
<p class="text-xs opacity-50 tracking-widest uppercase">Admin</p>
<a href="/admin" class="inline-block text-base lowercase no-underline hover:underline mt-2">
Admin
Users &amp Signups
</a>
</div>
{{/if}}
@ -78,7 +78,7 @@
<!-- TODO: Dropdown is linked to #avatar, just using it for now. Come back and clean up later -->
<p id="avatar" class="text-base lowercase no-underline hover:underline">@{{current_user.github_login}}</p>
<form id="sign_out" action="/sign_out" method="post">
<button class="text-base opacity-25 lowercase no-underline hover:underline mt-2">Sign out</button>
<button class="text-xs opacity-50 lowercase no-underline hover:underline mt-2">Sign out</button>
</form>
</div>

View file

@ -2,25 +2,33 @@
<div class="max-w-screen-lg mx-auto font-thin p-20">
<h1 class="text-white text-4xl font-display font-extralight mb-10">The Team</h1>
<div class="text-sm grid grid-cols-2 gap-x-10 gap-y-20">
<article class="bg-black">
<div class="text-sm">
<article class="bg-black mb-10">
<div class="content">
<h3 class="font-display font-extralight">Nathan Sobo</h3>
<p class="mt-4 leading-7">Nathan joined GitHub in late 2011 to build the <a href="https://atom.io" class="underline">Atom text editor</a>, and he led the Atom team until 2018.</p>
<h3 class="font-display font-extralight mb-2">Nathan Sobo</h3>
<div class="text-columns-2">
<p class="leading-7 mt-3 mb-3">Nathan joined GitHub in late 2011 to build the <a href="https://atom.io" class="underline">Atom text editor</a>, and he led the Atom team until 2018.</p>
<p class="mt-4 leading-7">He also co-led development of <a href="https://teletype.atom.io" class="underline">Teletype for Atom</a>, pioneering one of the first production uses of conflict-free replicated data types for collaborative text editing.</p>
<p class="mt-4 leading-7">He's been dreaming about building the worlds best text editor since he graduated from college, and is excited to finally have the knowledge, tools, and resources to achieve this vision.</p>
<p class="leading-7 mt-3 mb-3">He also co-led development of <a href="https://teletype.atom.io" class="underline">Teletype for Atom</a>, pioneering one of the first production uses of conflict-free replicated data types for collaborative text editing.</p>
<p class="leading-7 mt-3 mb-3">He's been dreaming about building the worlds best text editor since he graduated from college, and is excited to finally have the knowledge, tools, and resources to achieve this vision.</p>
<p class="lowercase leading-7 mt-3 mb-3"><a class="opacity-50 hover:opacity-80" href="https://github.com/nathansobo">Github</a> · <a class="opacity-50 hover:opacity-80" href="https://twitter.com/nathansobo">Twitter</a></p>
</div>
</div>
</article>
<article class="bg-black">
<h3 class="font-display font-extralight">Antonio Scandurra</h3>
<p class="mt-4 leading-7">Antonio joined the Atom team in 2014 while still in university after his outstanding open source contributions caught the attention of the team.</p>
<article class="bg-black mb-10">
<div class="content">
<h3 class="font-display font-extralight mb-2">Antonio Scandurra</h3>
<div class="text-columns-2">
<p class="leading-7 mt-3 mb-3">Antonio joined the Atom team in 2014 while still in university after his outstanding open source contributions caught the attention of the team.</p>
<p class="mt-4 leading-7">He later joined Nathan in architecting <a href="https://teletype.atom.io" class="underline">Teletype for Atom</a> and researching the foundations of what has turned into Zed.</p>
<p class="mt-4 leading-7">For the last two years, hes become an expert in distributed systems and conflict-free replicated data types through the development of a real-time, distributed, conflict-free database implemented in Rust for <a href="https://ditto.live" class="underline">Ditto</a>.</p>
<p class="leading-7 mt-3 mb-3">He later joined Nathan in architecting <a href="https://teletype.atom.io" class="underline">Teletype for Atom</a> and researching the foundations of what has turned into Zed.</p>
<p class="leading-7 mt-3 mb-3">For the last two years, hes become an expert in distributed systems and conflict-free replicated data types through the development of a real-time, distributed, conflict-free database implemented in Rust for <a href="https://ditto.live" class="underline">Ditto</a>.</p>
</div>
</div>
</article>
<article class="bg-black">

View file

@ -5,12 +5,13 @@
{{#if current_user}}
{{#if releases}}
<h1 class="font-display font-extralight mb-10">Updates</h1>
{{!-- <h1 class="font-display font-extralight mb-10">Updates</h1> --}}
{{#each releases}}
<article id="{{name}}" class="prose">
<h2 class="font-display font-extralight">{{name}}&mdash;<a class="underline mt-5 leading-7" href="/releases/{{tag_name}}/{{assets.0.name}}">Download</a></h2>
<div class="mt-5">
<article id="{{name}}" class="mb-20">
<h1 class="font-display font-extralight mb-2">{{name}}</h1>
<a class="underline text-sm opacity-50 hover:opacity-80" href="/releases/{{tag_name}}/{{assets.0.name}}">Download</a>
<div class="mt-10 type-prose">
{{{body}}}
</div>
<div class="mt-5">