9207315 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

index.html: renovation for port release

9207315Matilde Park5 years ago

sass/_main.scss+39

compare with master

unifiedsplit

@@ -607,6 +607,9 @@ iframe.arena-iframe {

607 position: relative;

608 padding-bottom: 56.25%;

609 padding-top: 30px; height: 0; overflow: hidden;

610+ &.index {

611+ padding-bottom: 14.25rem;

612+ }

610}

613}

611

614

612.video-container iframe,

615.video-container iframe,

@@ -670,3 +673,39 @@ h1, h2, h3, h4, h5, h6 {

670 border-bottom-style: none;

673 border-bottom-style: none;

671 }

674 }

672}

675}

676+

677+

678+.community {

679+ display: grid;

680+ grid-template-columns: 1fr 1fr;

681+ grid-template-rows: 1fr 1fr;

682+ grid-gap: 48px;

683+}

684+

685+.gray6 {

686+ color: #666666;

687+}

688+

689+.bg-blue0-new {

690+ background-color: #f4faff;

691+}

692+

693+.blue2-new {

694+ color: #219dff;

695+}

696+

697+.blue3-new {

698+ color: #75c2ff;

699+}

700+

701+.bg-blue3-new {

702+ background-color: #75c2ff;

703+}

704+

705+.green2-new {

706+ color: #009F65;

707+}

708+

709+.yellow2-new {

710+ color: #FFC700;

711+}

sass/_responsive.scss+9−2

@@ -11,10 +11,17 @@

11 }

12}

14+@media screen and (max-width: 46.874em) {

15+ .community {

16+ grid-template-columns: 1fr;

17+ grid-template-rows: repeat(1fr);

18+ }

19+}

20+

14// custom L breakpoint classes

21// custom L breakpoint classes

15@media screen and (min-width: 46.875em) and (max-width: 60em) {

22@media screen and (min-width: 46.875em) and (max-width: 60em) {

16− .white-l {

23+ .white-l {

17− color: #fff;

24+ color: #fff;

18 }

25 }

19}

26}

static/detect.jsnew file+26

@@ -0,0 +1,26 @@

1+if (document.body.classList.contains("index")) {

2+ let download = document.getElementById("download");

3+ let downloadDiv = document.getElementById("download-div");

4+ let downloadInfo = document.getElementById("download-info");

6+ let curOS = "";

7+ if (navigator.appVersion.indexOf("Win")!=-1) curOS="Windows";

8+ if (navigator.appVersion.indexOf("Mac")!=-1) curOS="MacOS";

9+ if (navigator.appVersion.indexOf("Linux")!=-1) curOS="Linux";

10+

11+ if (curOS === "Windows") {

12+ let newInfo = document.createElement("span");

13+ newInfo.textContent = "Coming soon for Windows";

14+ downloadDiv.removeChild(downloadInfo);

15+ downloadDiv.appendChild(newInfo);

16+ }

17+

18+ if (curOS === "Linux") {

19+ let newInfo = document.createElement("span");

20+ newInfo.classList = "mono";

21+ newInfo.textContent = "sudo snap install port";

22+ downloadDiv.classList = "bg-gray1 white br2 pv2 ph3 dib";

23+ downloadDiv.removeChild(downloadInfo);

24+ downloadDiv.appendChild(newInfo);

25+ }

26+}

static/scripts.js+14−10

@@ -344,6 +344,19 @@ let docsNavScroll = function () {

344 }

345}

346

347+if (document.body.classList.contains("index")) {

348+ tippy('.tooltip', {

349+ content(reference) {

350+ const title = reference.getAttribute('title')

351+ reference.removeAttribute('title')

352+ return title

353+ },

354+ animateFill: false,

355+ animation: 'fade',

356+ placement: 'bottom'

357+ })

358+}

359+

347if (window.location.href.includes("docs")) {

360if (window.location.href.includes("docs")) {

348 // tooltip behaviour for standard library page

361 // tooltip behaviour for standard library page

349 tippy('.tooltip', {

362 tippy('.tooltip', {

@@ -453,13 +466,4 @@ if (document.body.classList.contains("page-indiced") || document.getElementById(

453 parents.forEach(current => current.classList.add('current'));

466 parents.forEach(current => current.classList.add('current'));

454 }

467 }

455 })

468 })

456−};

469+};

457−

458−let oceanvid = document.getElementById("ocean");

459−

460−if ((oceanvid !== null) && (window.innerWidth > window.innerHeight)) {

461− oceanvid.innerHTML = `<source

462− src="https://media.urbit.org/site/sea30-1440.mp4"

463− type="video/mp4"/>

464− Your browser does not support the video tag.`

465−}

templates/base.html+1

@@ -61,6 +61,7 @@

61 {% include "partials/search-overlay.html" %}

62 {% block content %}

63 {% endblock content %}

64+ <script type="text/javascript" src="{{ get_url(path="detect.js") | safe }}"></script>

64 {% if config.build_search_index %}

65 {% if config.build_search_index %}

65 <script type="text/javascript" src="{{ get_url(path="glossary.js") | safe }}"></script>

66 <script type="text/javascript" src="{{ get_url(path="glossary.js") | safe }}"></script>

66 <script type="text/javascript" src="{{ get_url(path="elasticlunr.min.js") | safe }}"></script>

67 <script type="text/javascript" src="{{ get_url(path="elasticlunr.min.js") | safe }}"></script>

templates/index.html+49−121

@@ -21,44 +21,38 @@

21 <meta name="description" content="Urbit is a simple, durable system for running a personal server that you own 100% and forever.">

22{% endblock description %}

23{% block content %}

24−<section class="full lh-copy c2-7-md c3-7-lg mt6 mb6">

25− <p class="mt0 mb4"><strong>Urbit</strong> is a clean-slate OS and network for the 21st century.</p>

26− <p><strong>Urbit OS</strong> is a reimagining of the operating system as an ‘overlay OS.’</p>

27− <p class="mb4">It's a compact system for an individual to run their own permanent personal server on any Unix machine with an internet connection.</p>

28− <p class="mb4"><strong>Urbit ID</strong> is a decentralized digital identity system. Your

29− Urbit ID is a username, network address, and crypto wallet.</p>

30− <p><strong>Urbit OS + Urbit ID</strong> are designed to work together as a single system, are completely open source, and 100% owned by the people who use them.</p>

31−</section>

33−<section class="full lh-copy c7-12-md c7-11-lg mt6 mb6">

25+<section class="full c2-12-md c3-11-lg">

34− <video class="vid-insert bg-black" id="ocean" autoplay="" muted="" loop="" poster="https://media.urbit.org/site/sea30-poster.jpg">

26+ <div class="flex flex-column flex-row-m flex-row-l flex-row-xl justify-between mv5">

35− </video>

27+ <h1 class="f4">Urbit</h1>

28+ <nav class="flex flex-column dib-m dib-l dib-xl">

29+ <a href="/install" class="tc bg-blue0-new blue2-new f4 pa1 fw6">Download Port</a>

30+ <a href="/docs" class="f4 tc fw6 gray6 ml0 ml3-m ml3-l ml3-xl">Docs</a>

31+ <a href="/blog" class="f4 tc fw6 gray6 ml0 ml3-m ml3-l ml3-xl">Blog</a>

32+ </nav>

33+ </div>

34+ <h2 class="f4 mv5">A <span class="green2-new tooltip" title="Able to do anything you can imagine a computer can do.">general purpose</span>, <span class="yellow2-new tooltip" title="Built from scratch for direct communication between machines - no intermediate platforms required.">peer-to-peer</span> computing platform.</h2>

36</section>

35</section>

38−

39−

40−<section class="full lh-copy c2-7-md c3-7-lg mb6">

37+<section class="full c2-12-md c3-11-lg mb5">

41− <ul class="list mt0">

38+<div class="tc tl-m tl-l tl-xl bg-blue0-new w-100 pv6">

42− <li class="mt0">

39+ <div class="ml0 ml6-m ml6-l ml6-xl">

43− <a class="b--blue2 blue2 bb" href="/getting-started/">Get Started</a><br />

40+ <h1 class="blue3-new" style="font-size: 100px;">Port</h1>

44− Learn more about how to run Urbit and join the network.

41+ <div id="download" class="db">

45− </li>

42+ <div id="download-div" class="bg-blue3-new white br2 pv2 ph3 dib">

46− <li class="mt3">

43+ <a id="download-info" href="https://github.com/arthyn/taisho/releases/latest/download/taisho.dmg">

47− <a class="b--green2 green2 bb" href="/docs/">Documentation</a><br />

44+ Download for macOS

48− Read our documentation to learn more about the technology.

45+ </a>

49− </li>

46+ </div>

50− <li class="mt3">

47+ </div>

51− <a class="bb" href="/understanding-urbit">Introduction</a><br />

48+ </div>

52− Never heard of Urbit before? Start here to read a bit about the project.

49+</div>

53− </li>

54− <li class="mt3">

55− <a class="bb" href="/faq">FAQ</a> <br />

56− Answers to commonly asked questions.

57− </li>

58− </ul>

59</section>

50</section>

61−<section class="full c7-12-md c7-11-lg mb5">

52+<section class="full c2-12-md c3-11-lg mb5">

53+ <h1 class="mb5 gray6 f3">Community</h1>

54+ <div class="community">

55+ {% set e = get_section(path="blog/_index.md") %}

62 {% set s = get_section(path="events/_index.md") %}

56 {% set s = get_section(path="events/_index.md") %}

63 {% set pins = s.pages

57 {% set pins = s.pages

64 | filter(attribute="extra.pinned", value=true)

58 | filter(attribute="extra.pinned", value=true)

@@ -66,105 +60,39 @@

66 | reverse

60 | reverse

67 %}

61 %}

68 {% set allposts = s.pages

62 {% set allposts = s.pages

69− | sort(attribute="date")

70 | filter(attribute="extra.pinned", value=false)

63 | filter(attribute="extra.pinned", value=false)

64+ | concat(with=e.pages)

65+ | sort(attribute="date")

71 | concat(with=pins)

66 | concat(with=pins)

72 | reverse

67 | reverse

73 %}

68 %}

74− {% for page in allposts | slice (end=2) %}

69+ {% for page in allposts | slice (end=4) %}

75− <li class="mb4 list event">

70+ <li class="mb4 list w-100">

76 <a class="bb-0" href="{{ page.permalink }}">

71 <a class="bb-0" href="{{ page.permalink }}">

77− <h2 class="f5 fw6 mt0 mb1">{{ page.title }}</h2>

78− {% if page.extra.description %}

79− <p class="lh-copy mt1">{{ page.extra.description }}</p>

80− {% endif %}

81− </a>

82− {{ macros::event_metadata(page=page)}}

83− </li>

84− {% endfor %}

85− <a href="/events" class="bb">View more events</a>

86−</section>

87−

88−

89−

90−<section class="full c2-7-md c3-7-lg mt5">

91− <h1 class="mb3">Latest Posts</h1>

92− <p class="lh-copy mt1">We regularly write posts on our <a class="bb" href="/blog">blog</a> about what we're working on.</p>

93− {% set s = get_section(path="updates/_index.md") %}

94− {% set e = get_section(path="blog/_index.md") %}

95− {% set allposts = s.pages

96− | concat (with=e.pages)

97− | sort(attribute="date")

98− | reverse

99− %}

100− {% for page in allposts | slice (end=2) %}

101− <li class="mb4 list">

102− <a class="bb-0" href="{{ page.permalink }}">

103− <h2 class="f5 fw6 mt0 mb1">{{ page.title }}</h2>

104 {% if page.extra.image %}

72 {% if page.extra.image %}

105− <img class="db mv2 obj-cover h4 w-50 ba" src="{{ page.extra.image }}" />

73+ <img class="db mb2 obj-cover h5 w-100 ba" src="{{ page.extra.image }}" />

106− {% elif page.extra.description %}

74+ {% elif page.extra.youtube %}

107− <p class="lh-copy mt1">{{ page.extra.description }}</p>

75+ <div class="video-container index mb2">

76+ <iframe height=auto src="https://www.youtube.com/embed/{{page.extra.youtube}}" webkitallowfullscreen

77+ mozallowfullscreen allowfullscreen>

78+ </iframe>

79+ </div>

108 {% endif %}

80 {% endif %}

109− <time class="mono f6">{{ page.date | date(format="~%Y.%-m.%-d") }}</time>

81+ <h2 class="f4 fw6 mt0 mb2">{{ page.title }}</h2>

82+ <div class="flex flex-row justify-between">

110− <span class="mono f6">

83+ <span class="f6">

111 {% if page.extra.ship %}

84 {% if page.extra.ship %}

112− <address class="mono f6 mh2">{{ page.extra.ship }}</address>

85+ <address class="mono">{{ page.extra.ship }}</address>

86+ {% elif page.extra.location %}

87+ <span>{{ page.extra.location }}</span>

113 {% endif %}

88 {% endif %}

114− </span>

89+ </span>

90+ <time class="f6">{{ page.date | date(format="~%Y.%-m.%-d") }}</time>

91+ </div>

115 </a>

92 </a>

116− </li>

93+ </li>

117 {% endfor %}

94 {% endfor %}

95+ </div>

118</section>

96</section>

119−

120−

121−<section class="full lh-copy c7-12-md c7-11-lg mt5" id="follow">

122− <p class="lh-copy mt1 mb3">

123− We send regular updates about our project. Enter your email to get them.

124− </p>

125− <iframe name="nothing" style="display:none;"></iframe>

126− <form

127− action="https://urbit.us11.list-manage.com/subscribe/post?u=972a03db9e0c6c25bb58de8c8&amp;id=be143888d2"

128− method="post"

129− id="mc-embedded-subscribe-form"

130− name="mc-embedded-subscribe-form"

131− class="validate form"

132− target="_blank"

133− novalidate>

134− <div class="input-group" id="mc_embed_signup_scroll">

135− <div class="mc-field-group w-100 relative">

136− <input

137− class="bg-white black b--black ba pa3 w-100 mb2 br0 wk-appearance-none"

138− type="email"

139− name="EMAIL"

140− id="mce-EMAIL"

141− placeholder="your@email.com"/>

142− <button

143− id="mc-embedded-subscribe"

144− class="dib bn absolute bg-transparent"

145− style="font-family: 'Inter UI', san-serif; right: 3px; top: 15px; -webkit-appearance: none;"

146− type="submit"

147− name="subscribe"

148− onclick="_paq.push(['trackEvent', 'Mailing List', 'Subscribe'])">

149− <span class="fr pr1">-></span>

150− </button>

151− </div>

152− </div>

153− </form>

154− <p class="lh-copy">

155− Follow us on <a class="b--black bb" href="https://twitter.com/urbit">Twitter</a>

156− </p>

157− <p class="lh-copy">

158− Explore the code on <a class="b--black bb" href="https://github.com/urbit/urbit">GitHub</a>

159− </p>

160− <p class="lh-copy">

161− Ask questions in our <a class="b--black bb" href="https://discord.gg/Mae2bk7">Discord</a>

162− </p>

163− <p class="lh-copy">

164− Boot Urbit and join:<br /> <code>~bitbet-bolbel/urbit-community</code>

165− </p>

166−</section>

167−

168−

169{% include "partials/footer.html" %}

97{% include "partials/footer.html" %}

170{% endblock content %}

98{% endblock content %}