on master help sign in
responsive front page
commit3b0680d7d468f413a8950e271ea9b20918e2f939 authorGavin Atkinson <gvnatknsn@protonmail.com> dateThu 10 Oct 2019, 13:48 (7 years ago) parentc23012e
3 files changed+149−93
sass/_main.scss+1−13 sass/grid.scss+19−1 templates/index.html+129−79
sass/_main.scss+1−13
@@ -144,7 +144,7 @@ footer nav {
144144body.essay {
145145 h1 {
146146 font-size: 1rem;
147− font-weight: 400;
147+ font-weight: 500;
148148 max-width: 95vw;
149149 }
150150 &:not(.bg-white) {
@@ -552,15 +552,3 @@ hr {
552552 overflow: hidden;
553553 z-index:-99;
554554}
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 @@
55 display: grid;
66 grid-template-columns: repeat(12, [col-start] 1fr);
77 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+
927 }
1028
1129 .grid8 {
templates/index.html+129−79
@@ -1,8 +1,8 @@
11{% extends "base.html" %}
22<!--External links are differentiated on home page.-->
33{% block templatestyles %}
4−a[href*="//"]:not([href*="{{config.base_url | safe}}"])::after {
5−content: " ↗";
4+<!-- a[href*="//"]:not([href*="{{config.base_url | safe}}"])::after {
5+content: " ↗"; -->
66}
77{% endblock templatestyles %}
88{% block bodyclasses %}class="index"{% endblock bodyclasses %}
@@ -12,103 +12,153 @@ content: " ↗";
1212{% block content %}
1313
1414<section class="full p0 vid-insert-wrap full-bleed">
15−
1615 <video class="vid-insert bg-black" autoplay muted loop>
1716 <source
1817 src="https://storage.googleapis.com/media.urbit.org/site/sea30-1440.mp4"
19− type="video/mp4">
18+ type="video/mp4"
19+ />
2020 Your browser does not support the video tag.
2121 </video>
2222
23− <div class='grid12' style='height: 100%; width:100%;'>
24− <div class='full c3-10-lg flex items-center align-center z10 white'>
23+ <div class="grid12" style="height: 100%; width:100%;">
24+ <div class="full c2-7-md c3-7-lg flex items-center align-center z10 white">
2525 Urbit is your last computer.
2626 </div>
2727 </div>
2828 <!-- 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"
3030 class="w-100 ma0 h-100" frameborder="0" allow="autoplay;fullscreen" allowfullscreen="" style="
3131 "></iframe> -->
3232</section>
3333
34−<nav class="home full c3-11-lg mt6 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>
34+<!-- <nav class="full-bleed full grid12"> -->
4835
49−<article class="full-bleed full grid12 mt6">
50− <nav class="full grid12 mt4 mb6">
51− <section class="full c3-7-lg">
52− <h1 class="mb3">Understand Urbit</h1>
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>
36+<section class="full c2-7-md c3-7-lg mt6">
37+ <p class="lh-copy mt1 mb4">
38+ It's a simple, durable computer you own 100% and forever.
39+ </p>
40+</section>
6341
64− <section class="full c7-11-lg">
65− <h1 class="mb3">Learn More</h1>
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">
69− <li class="mt2"><a class="b--black bb" href="/understanding-urbit/">Introduction</a></li>
70− {% set posts = get_section(path="understanding-urbit/_index.md") %}
71− {% for page in posts.pages %}
72− <li class="mt2"><a class="b--black bb" href="{{ page.permalink }}">{{ page.title }}</a></li>
73− {% endfor %}
74− </ul>
75− </section>
42+<section class="full c2-7-md c3-7-lg mt6">
43+ <ul class="list">
44+ <li class="">
45+ <a class="bb b--black" href="/understanding-urbit/">Introduction</a>
46+ </li>
47+ <li class="mt3">
48+ <a class="blue2 bb b--blue" href="/docs">Docs</a>
49+ </li>
50+ <li class="mt3">
51+ <a class="green2 bb b--green" href="/install">Install</a>
52+ </li>
53+ </ul>
54+</section>
7655
77− <section class="c3-7-lg mt6">
78− <h1 class="mb3">Follow Us</h1>
79− <p class="lh-copy mt1 mb4">Urbit is actively being built, explored, and experimented with.
80− To follow our progress you can:
81− </p>
82− <ul>
83− <li class="mt2">Follow us on <a href="https://twitter.com/urbit">Twitter</a></li>
84− <li class="mt2">Explore the code on <a href="https://github.com/urbit/urbit">GitHub</a></li>
85− <li class="mt2">Ask questions in our <a href="https://discord.gg/bkEX6EU">Discord</a></li>
86− </ul>
87− <p class="lh-copy">or boot Urbit and join <code class="db">~dopzod/urbit-help</code></p>
88− </section>
56+<section class="full c2-7-md c3-7-lg mt6">
57+ <h1 class="mb3">Understand Urbit</h1>
58+ <p class="lh-copy mt1 mb4">
59+ For a quick explanation of what Urbit is and how Urbit works, see the
60+ <a class="b--black bb" href="/understanding-urbit">
61+ introduction
62+ </a>. If you're more technical, feel free to skip ahead to the
63+ <a class="b--black bb" href="/understanding-urbit/technical-overview">
64+ technical overview.
65+ </a>
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>
82+</section>
8983
90− <aside class="full c7-11-lg mt6" id="newsletter-subscribe-top">
91− <h1 class="mb3">Stay Up to Date</h1>
92− <p class="lh-copy mt1 mb3">
93− We send regular updates about our project. Enter your email to get them.
94− </p>
95− <iframe name="nothing" style="display:none;"></iframe>
96− <form action="https://urbit.us11.list-manage.com/subscribe/post?u=972a03db9e0c6c25bb58de8c8&amp;amp;id=be143888d2"
97− method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form"
98− target="_blank" novalidate>
99− <div class="input-group" id="mc_embed_signup_scroll">
100− <div class="mc-field-group w-100 relative">
101− <input class="bg-white black b--black ba pa3 w-100 mb2 br0" type="email" name="EMAIL" id="mce-EMAIL"
102− placeholder="your@email.com">
103− <button id="mc-embedded-subscribe" class="dib bn absolute"
104− style="font-family: 'Inter UI', san-serif; right: 3px; top: 15px; -webkit-appearance: none;" type="submit"
105− name="subscribe" onclick="_paq.push(['trackEvent', 'Mailing List', 'Subscribe'])"><span class="fr pr1">-></span>
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+
125+<section class="full c7-12-md c7-11-lg mv6" id="newsletter-subscribe-top">
126+ <h1 class="mb3">Stay Up to Date</h1>
127+ <p class="lh-copy mt1 mb3">
128+ We send regular updates about our project. Enter your email to get them.
129+ </p>
130+ <iframe name="nothing" style="display:none;"></iframe>
131+ <form
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"
135+ name="mc-embedded-subscribe-form"
136+ class="validate form"
137+ target="_blank"
138+ novalidate>
139+ <div class="input-group" id="mc_embed_signup_scroll">
140+ <div class="mc-field-group w-100 relative">
141+ <input
142+ class="bg-white black b--black ba pa3 w-100 mb2 br0"
143+ type="email"
144+ name="EMAIL"
145+ id="mce-EMAIL"
146+ placeholder="your@email.com"/>
147+ <button
148+ id="mc-embedded-subscribe"
149+ class="dib bn absolute bg-transparent"
150+ style="font-family: 'Inter UI', san-serif; right: 3px; top: 15px; -webkit-appearance: none;"
151+ type="submit"
152+ name="subscribe"
153+ onclick="_paq.push(['trackEvent', 'Mailing List', 'Subscribe'])">
154+ <span class="fr pr1">-></span>
106155 </button>
107156 </div>
108− </form>
109− </aside>
157+ </div>
158+ </form>
159+</section>
110160
111− </nav>
112−</article>
161+ <!-- </nav> -->
162+<!-- </article> -->
113163{% include "partials/footer.html" %}
114164{% endblock content %}