git.iko.soy/urbit.org
on master help sign in
responsive front page
3b0680dGavin Atkinson
sass/_main.scss+1−13
compare with master
unifiedsplit
@@ -144,7 +144,7 @@ footer nav {
144body.essay {
144body.essay {
145 h1 {
145 h1 {
146 font-size: 1rem;
146 font-size: 1rem;
147− font-weight: 400;
147+ font-weight: 500;
148 max-width: 95vw;
148 max-width: 95vw;
149 }
149 }
150 &:not(.bg-white) {
150 &:not(.bg-white) {
@@ -552,15 +552,3 @@ hr {
552 overflow: hidden;
552 overflow: hidden;
553 z-index:-99;
553 z-index:-99;
554}
554}
555−
556−.ul-black {
557− border-bottom: 1px solid black;
558−}
559−
560−.ul-blue {
561− border-bottom: 1px solid #4330fc;
562−}
563−
564−.ul-green {
565− border-bottom: 1px solid #2aa779;
566−}
sass/grid.scss+19−1
@@ -5,7 +5,25 @@
5 display: grid;
5 display: grid;
6 grid-template-columns: repeat(12, [col-start] 1fr);
6 grid-template-columns: repeat(12, [col-start] 1fr);
7 grid-auto-rows: auto;
7 grid-auto-rows: auto;
8− column-gap: 64px;
8+ column-gap: 16px;
9+
10+ // scaling below desktop
11+ // @media all and (max-width: 60em) {
12+ // column-gap: 16px;
13+ // }
14+
15+ @media screen and (min-width: 34.375em) {
16+ column-gap: 32px;
17+ }
18+ // @media screen and (min-width: 46.875em) and (max-width: 60em) {
19+ // column-gap: 64px;
20+ // }
21+
22+ @media screen and (min-width: 60em) {
23+ column-gap: 64px;
24+ }
25+
26+
9 }
27 }
10
28
11 .grid8 {
29 .grid8 {
templates/index.html+129−79
@@ -1,8 +1,8 @@
1{% extends "base.html" %}
1{% extends "base.html" %}
2<!--External links are differentiated on home page.-->
2<!--External links are differentiated on home page.-->
3{% block templatestyles %}
3{% block templatestyles %}
4−a[href*="//"]:not([href*="{{config.base_url | safe}}"])::after {
4+<!-- a[href*="//"]:not([href*="{{config.base_url | safe}}"])::after {
5−content: " ↗";
5+content: " ↗"; -->
6}
6}
7{% endblock templatestyles %}
7{% endblock templatestyles %}
8{% block bodyclasses %}class="index"{% endblock bodyclasses %}
8{% block bodyclasses %}class="index"{% endblock bodyclasses %}
@@ -12,103 +12,153 @@ content: " ↗";
12{% block content %}
12{% block content %}
13
13
14<section class="full p0 vid-insert-wrap full-bleed">
14<section class="full p0 vid-insert-wrap full-bleed">
15−
16 <video class="vid-insert bg-black" autoplay muted loop>
15 <video class="vid-insert bg-black" autoplay muted loop>
17 <source
16 <source
18 src="https://storage.googleapis.com/media.urbit.org/site/sea30-1440.mp4"
17 src="https://storage.googleapis.com/media.urbit.org/site/sea30-1440.mp4"
19− type="video/mp4">
18+ type="video/mp4"
19+ />
20 Your browser does not support the video tag.
20 Your browser does not support the video tag.
21 </video>
21 </video>
22
22
23− <div class='grid12' style='height: 100%; width:100%;'>
23+ <div class="grid12" style="height: 100%; width:100%;">
24− <div class='full c3-10-lg flex items-center align-center z10 white'>
24+ <div class="full c2-7-md c3-7-lg flex items-center align-center z10 white">
25 Urbit is your last computer.
25 Urbit is your last computer.
26 </div>
26 </div>
27 </div>
27 </div>
28 <!-- VIMEO VERSION KEPT AS SHIM -->
28 <!-- VIMEO VERSION KEPT AS SHIM -->
29− <!-- <iframe src="https://player.vimeo.com/video/365353672?background=1"
29+ <!-- <iframe src="https://player.vimeo.com/video/365353672?background=1"
30 class="w-100 ma0 h-100" frameborder="0" allow="autoplay;fullscreen" allowfullscreen="" style="
30 class="w-100 ma0 h-100" frameborder="0" allow="autoplay;fullscreen" allowfullscreen="" style="
31 "></iframe> -->
31 "></iframe> -->
32</section>
32</section>
33
33
34−<nav class="home full c3-11-lg mt6 grid12">
34+<!-- <nav class="full-bleed full grid12"> -->
35− <section class="full mb6">
36− <div>
37− It's a simple, durable computer you own 100% and forever.
38− </div>
39− </section>
40− <aside class="full half-1-md half-1-lg mb6">
41− <ul>
42− <li><a class='ul-black' href="/understanding-urbit/">Introduction</a></li>
43− <li class=""><a class="blue2 ul-blue" href="/docs">Docs</a></li>
44− <li><a class="green2 ul-green" href="/install">Install</a></li>
45− </ul>
46− </aside>
47−</nav>
48
35
49−<article class="full-bleed full grid12 mt6">
36+<section class="full c2-7-md c3-7-lg mt6">
50− <nav class="full grid12 mt4 mb6">
37+ <p class="lh-copy mt1 mb4">
51− <section class="full c3-7-lg">
38+ It's a simple, durable computer you own 100% and forever.
52− <h1 class="mb3">Understand Urbit</h1>
39+ </p>
53− <p class="lh-copy mt1 mb4">For a quick explanation of what Urbit is and how Urbit works, see the <a href="/understanding-urbit">introduction</a>.
54− If you're more technical, feel free to skip ahead to the <a href="/understanding-urbit/technical-overview">technical overview.</a></p>
55− <ul class="full c4-7-lg">
56− <li class="mt2"><a class="b--black bb" href="/understanding-urbit/">Introduction</a></li>
57− {% set posts = get_section(path="understanding-urbit/_index.md") %}
58− {% for page in posts.pages %}
59− <li class="mt2"><a class="b--black bb" href="{{ page.permalink }}">{{ page.title }}</a></li>
60− {% endfor %}
61− </ul>
62− </section>
40+</section>
63
41
64− <section class="full c7-11-lg">
42+<section class="full c2-7-md c3-7-lg mt6">
65− <h1 class="mb3">Learn More</h1>
43+ <ul class="list">
66− <p class="lh-copy mt1 mb4">For a quick explanation of what Urbit is and how Urbit works, see the <a href="/understanding-urbit">introduction</a>.
67− If you're more technical, feel free to skip ahead to the <a href="/understanding-urbit/technical-overview">technical overview.</a></p>
68− <ul class="full c4-7-lg">
44+ <li class="">
69− <li class="mt2"><a class="b--black bb" href="/understanding-urbit/">Introduction</a></li>
45+ <a class="bb b--black" href="/understanding-urbit/">Introduction</a>
70− {% set posts = get_section(path="understanding-urbit/_index.md") %}
46+ </li>
71− {% for page in posts.pages %}
47+ <li class="mt3">
72− <li class="mt2"><a class="b--black bb" href="{{ page.permalink }}">{{ page.title }}</a></li>
48+ <a class="blue2 bb b--blue" href="/docs">Docs</a>
73− {% endfor %}
49+ </li>
50+ <li class="mt3">
51+ <a class="green2 bb b--green" href="/install">Install</a>
52+ </li>
74− </ul>
53+ </ul>
75− </section>
54+</section>
76
55
77− <section class="c3-7-lg mt6">
56+<section class="full c2-7-md c3-7-lg mt6">
78− <h1 class="mb3">Follow Us</h1>
57+ <h1 class="mb3">Understand Urbit</h1>
79− <p class="lh-copy mt1 mb4">Urbit is actively being built, explored, and experimented with.
58+ <p class="lh-copy mt1 mb4">
80− To follow our progress you can:
59+ For a quick explanation of what Urbit is and how Urbit works, see the
81− </p>
60+ <a class="b--black bb" href="/understanding-urbit">
82− <ul>
61+ introduction
83− <li class="mt2">Follow us on <a href="https://twitter.com/urbit">Twitter</a></li>
62+ </a>. If you're more technical, feel free to skip ahead to the
84− <li class="mt2">Explore the code on <a href="https://github.com/urbit/urbit">GitHub</a></li>
63+ <a class="b--black bb" href="/understanding-urbit/technical-overview">
85− <li class="mt2">Ask questions in our <a href="https://discord.gg/bkEX6EU">Discord</a></li>
64+ technical overview.
86− </ul>
65+ </a>
87− <p class="lh-copy">or boot Urbit and join <code class="db">~dopzod/urbit-help</code></p>
66+ </p>
67+ <ul class="list">
68+ <li class="mt3">
69+ <a class="b--black bb" href="/understanding-urbit/">Introduction</a>
70+ </li>
71+ {% set posts = get_section(path="understanding-urbit/_index.md") %} {%
72+ for page in posts.pages %}
73+ <li class="mt3">
74+ <a
75+ class="b--black bb"
76+ href="{{ page.permalink }}">
77+ {{ page.title }}
78+ </a>
79+ </li>
80+ {% endfor %}
81+ </ul>
88− </section>
82+</section>
89
83
84+<section class="full c7-12-md c7-11-lg mt6">
85+ <h1 class="mb3">Learn More</h1>
86+ <ul class="list">
87+ <li class="mt3">
88+ <a class="b--black bb" href="/essays">Essays</a>
89+ </li>
90+ <li class="mt3">
91+ <a class="b--black bb" href="/updates/">Updates</a>
92+ </li>
93+ <li class="mt3">
94+ <a class="b--black bb" href="/media">Media</a>
95+ </li>
96+ <li class="mt3">
97+ <a class="b--black bb" href="/faq/">FAQ</a>
98+ </li>
99+ </ul>
100+</section>
101+
102+<section class="full c2-7-md c3-7-lg mv6">
103+ <h1 class="mb3">Follow Us</h1>
104+ <p class="lh-copy mt1 mb4">
105+ Urbit is actively being built, explored, and experimented with. To
106+ follow our progress you can:
107+ </p>
108+ <ul class="list">
109+ <li class="mt2">
110+ Follow us on <a class="b--black bb" href="https://twitter.com/urbit">Twitter</a>
111+ </li>
112+ <li class="mt2">
113+ Explore the code on
114+ <a class="b--black bb" href="https://github.com/urbit/urbit">GitHub</a>
115+ </li>
116+ <li class="mt2">
117+ Ask questions in our <a class="b--black bb" href="https://discord.gg/bkEX6EU">Discord</a>
118+ </li>
119+ </ul>
120+ <p class="lh-copy">
121+ or boot Urbit and join <code class="db">~dopzod/urbit-help</code>
122+ </p>
123+</section>
124+
90− <aside class="full c7-11-lg mt6" id="newsletter-subscribe-top">
125+<section class="full c7-12-md c7-11-lg mv6" id="newsletter-subscribe-top">
91− <h1 class="mb3">Stay Up to Date</h1>
126+ <h1 class="mb3">Stay Up to Date</h1>
92− <p class="lh-copy mt1 mb3">
127+ <p class="lh-copy mt1 mb3">
93− We send regular updates about our project. Enter your email to get them.
128+ We send regular updates about our project. Enter your email to get them.
94− </p>
129+ </p>
95− <iframe name="nothing" style="display:none;"></iframe>
130+ <iframe name="nothing" style="display:none;"></iframe>
131+ <form
96− <form action="https://urbit.us11.list-manage.com/subscribe/post?u=972a03db9e0c6c25bb58de8c8&amp;amp;id=be143888d2"
132+ action="https://urbit.us11.list-manage.com/subscribe/post?u=972a03db9e0c6c25bb58de8c8&amp;amp;id=be143888d2"
133+ method="post"
134+ id="mc-embedded-subscribe-form"
97− method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form"
135+ name="mc-embedded-subscribe-form"
136+ class="validate form"
98− target="_blank" novalidate>
137+ target="_blank"
138+ novalidate>
99− <div class="input-group" id="mc_embed_signup_scroll">
139+ <div class="input-group" id="mc_embed_signup_scroll">
100− <div class="mc-field-group w-100 relative">
140+ <div class="mc-field-group w-100 relative">
141+ <input
101− <input class="bg-white black b--black ba pa3 w-100 mb2 br0" type="email" name="EMAIL" id="mce-EMAIL"
142+ class="bg-white black b--black ba pa3 w-100 mb2 br0"
143+ type="email"
144+ name="EMAIL"
145+ id="mce-EMAIL"
102− placeholder="your@email.com">
146+ placeholder="your@email.com"/>
147+ <button
103− <button id="mc-embedded-subscribe" class="dib bn absolute"
148+ id="mc-embedded-subscribe"
149+ class="dib bn absolute bg-transparent"
104− style="font-family: 'Inter UI', san-serif; right: 3px; top: 15px; -webkit-appearance: none;" type="submit"
150+ style="font-family: 'Inter UI', san-serif; right: 3px; top: 15px; -webkit-appearance: none;"
151+ type="submit"
152+ name="subscribe"
105− name="subscribe" onclick="_paq.push(['trackEvent', 'Mailing List', 'Subscribe'])"><span class="fr pr1">-></span>
153+ onclick="_paq.push(['trackEvent', 'Mailing List', 'Subscribe'])">
154+ <span class="fr pr1">-></span>
106 </button>
155 </button>
107 </div>
156 </div>
157+ </div>
108− </form>
158+ </form>
109− </aside>
159+</section>
110
160
111− </nav>
161+ <!-- </nav> -->
112−</article>
162+<!-- </article> -->
113{% include "partials/footer.html" %}
163{% include "partials/footer.html" %}
114{% endblock content %}
164{% endblock content %}