203816c · urbit.org · git.iko.soy

sass/_main.scss+61−22

compare with master

unifiedsplit

@@ -55,6 +55,10 @@ iframe {

55 line-height: 8rem;

56 margin-bottom: 1rem;

57 }

58+ li {

59+ font-size: inherit;

60+ line-height: inherit;

61+ }

58}

62}

59

63

60.content-nav-icon {

64.content-nav-icon {

@@ -259,20 +263,6 @@ iframe {

259 width: 100%;

263 width: 100%;

260}

264}

261

265

262−.article {

263− h2 {

264− margin-top: 16rem;

265− margin-bottom: 4rem;

266− }

267− h3 {

268− margin-top: 8rem;

269− margin-bottom: 4rem;

270− }

271− h4 {

272− margin-bottom: 4rem;

273− }

274−}

275−

276.form {

266.form {

277 width: 100%;

267 width: 100%;

278 max-width: 320px;

268 max-width: 320px;

@@ -353,16 +343,29 @@ h1, h2, h3, h4, h5, h6, .text-heading {

353 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

343 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

354}

344}

355

345

356−p, article li {

346+h1, h2, h3, h4 {

347+ font-weight: 700;

348+}

349+h1 {

357− font-size: 4rem;

350+ font-size: 12rem;

351+ line-height: 16rem;

352+}

353+h2 {

354+ font-size: 8rem;

355+ line-height: 12rem;

356+}

357+h3 {

358+ font-size: 6rem;

358 line-height: 8rem;

359 line-height: 8rem;

359− font-weight: 400;

360}

361−

361+h4 {

362−article {

362+ font-size: 5rem;

363− h1 {

363+ line-height: 6rem;

364− margin-bottom: 6rem;

365− }

364+}

365+h5, p, li {

366+ font-size: 5rem;

367+ line-height: 8rem;

368+ font-weight: 400;

366}

369}

367

370

368p, .p {

371p, .p {

@@ -374,9 +377,45 @@ pre, code {

374 background-color: #eee !important;

377 background-color: #eee !important;

375 color: #000 !important;

378 color: #000 !important;

376 overflow-y: scroll;

379 overflow-y: scroll;

380+ font-weight: 500;

377 span {

381 span {

378 color: #000 !important;

382 color: #000 !important;

379 }

383 }

380 padding: 1rem;

384 padding: 1rem;

381 font-size: 4rem;

385 font-size: 4rem;

382}

386}

387+

388+textarea, input[type="text"], input[type="email"], input[type="number"] {

389+ border: 1px solid #B1B2B3;

390+ font-size: 4rem;

391+ line-height: 6rem;

392+ transition: all 0.1s linear;

393+ padding-right: 40px;

394+ position: relative;

395+ &:active, &:focus {

396+ border: 1px solid #000000;

397+ }

398+ &:required, &:invalid {

399+ box-shadow: none !important;

400+ border: 1px solid #EE892B;

401+ color: #EE892B;

402+ }

403+}

404+

405+.has-valid-input {

406+ position: relative;

407+ &:after {

408+ content: '✓';

409+ color: #2AA779;

410+ position: absolute;

411+ right: 10px;

412+ top: 50%;

413+ transform: translate(0,-50%);

414+ width: 15px;

415+ height: 24px;

416+ margin-top: -4px;

417+ }

418+ input[type="text"], input[type="email"], input[type="number"] {

419+ border: 1px solid #2AA779;

420+ }

421+}

sass/_responsive.scss+23

@@ -1,3 +1,26 @@

1+@media only screen and (max-width: 1000px) {

2+ h1 {

3+ font-size: 8rem;

4+ line-height: 12rem;

5+ }

6+ h2 {

7+ font-size: 6rem;

8+ line-height: 8rem;

9+ }

10+ h3 {

11+ font-size: 5rem;

12+ line-height: 6rem;

13+ }

14+ h4 {

15+ font-size: 4rem;

16+ line-height: 6rem;

17+ }

18+ h5, p, li {

19+ font-size: 4rem;

20+ line-height: 6rem;

21+ }

22+}

23+

1@media only screen and (max-width: 800px) {

24@media only screen and (max-width: 800px) {

2 .container--fixed, .content-nav {

25 .container--fixed, .content-nav {

3 margin: 0;

26 margin: 0;

static/scripts.js+44−4

@@ -1,9 +1,49 @@

1+//

2+ // toggling of navigation menus

3+//

4+

1var toggleMainNav = document.getElementById('js-main-nav-toggle');

5var toggleMainNav = document.getElementById('js-main-nav-toggle');

6+if (toggleMainNav !== null) {

2−toggleMainNav.onclick = function() {

7+ toggleMainNav.onclick = function() {

3− document.body.classList.toggle('has-active-main-nav');

8+ document.body.classList.toggle('has-active-main-nav');

9+ }

4}

10}

5

11

6var toggleContentNav = document.getElementById('js-content-nav-toggle');

12var toggleContentNav = document.getElementById('js-content-nav-toggle');

13+if (toggleContentNav !== null) {

7−toggleContentNav.onclick = function() {

14+ toggleContentNav.onclick = function() {

8− document.body.classList.toggle('has-active-content-nav');

15+ document.body.classList.toggle('has-active-content-nav');

16+ }

17+}

18+

19+//

20+ // styling of input fields

21+//

22+

23+var inputElements = document.querySelectorAll('input.tlon-input');

24+for (var i = 0; i < inputElements.length; i++) {

25+ //listen for changes in input

26+ inputElements[i].addEventListener('input', function() {

27+ // if input has a value do this

28+ if (this.value) {

29+ var inputContainer = this.parentNode;

30+ var validInputs = inputContainer.querySelectorAll('input.tlon-input:valid');

31+ var inputs = inputContainer.querySelectorAll('input.tlon-input');

32+ if (validInputs.length !== 0) {

33+ // has valid input

34+ for (var i = 0; i < validInputs.length; i++) {

35+ if (this.classList.contains('is-valid') == false ) {

36+ validInputs[i].parentNode.classList.add('has-valid-input');

37+ }

38+ }

39+ } else {

40+ // doesn't have valid input

41+ for (var i = 0; i < inputs.length; i++) {

42+ inputs[i].parentNode.classList.remove('has-valid-input');

43+ }

44+ }

45+ } else {

46+ this.parentNode.classList.remove('has-valid-input');

47+ }

48+ });

9}

49}

templates/doc.html+1−1

@@ -12,7 +12,7 @@

12 </div>

13 <div class="container ml8">

14 <div class="content-nav-spacer"></div>

15− <article class="content">

15+ <article class="article content">

16

17 <h1>{{ page.title }}</h1>

18

templates/partials/footer.html+6−2

@@ -8,7 +8,7 @@

8 <form id="mc-embedded-subscribe-form" class="validate" action="https://urbit.us11.list-manage.com/subscribe/post?u=972a03db9e0c6c25bb58de8c8&amp;id=be143888d2" method="post" name="mc-embedded-subscribe-form" target="nothing">

9 <div class="input-group text-mono" id="mc_embed_signup_scroll">

10 <div class="mc-field-group">

11− <input class="required mb2" type="email" name="EMAIL" id="mce-EMAIL" placeholder="your@email.com">

11+ <input class="required tlon-input mb2" type="email" name="EMAIL" id="mce-EMAIL" placeholder="your@email.com">

12 </div>

13 <div id="mce-responses" class="clear">

14 <div id="mce-error-response" class="response" style="display:none"></div>

@@ -39,7 +39,11 @@

39 </section>

40 <section class="mb6">

41 <h4 class="mb1">Contact</h4>

42+ <ul class="list">

43+ <li class="list__item">

42− <a class="mono" href="mailto:support@urbit.org">support@urbit.org</a>

44+ <a class="mono" href="mailto:support@urbit.org">support@urbit.org</a>

45+ </li>

46+ </ul>

43 </section>

47 </section>

44 <section class="mb6">

48 <section class="mb6">

45 <h4 class="mb1">Company</h4>

49 <h4 class="mb1">Company</h4>

templates/partials/navigation.html+5−1

@@ -31,7 +31,11 @@

31 </section>

32 <section class="mb6">

33 <h4 class="mb1">Contact</h4>

34+ <ul class="list">

35+ <li class="list__item">

34− <a class="mono" href="mailto:support@urbit.org">support@urbit.org</a>

36+ <a class="mono" href="mailto:support@urbit.org">support@urbit.org</a>

37+ </li>

38+ </ul>

35 </section>

39 </section>

36 <section class="mb6">

40 <section class="mb6">

37 <h4 class="mb1">Company</h4>

41 <h4 class="mb1">Company</h4>

templates/posts/list.html+1−1

@@ -28,7 +28,7 @@

28 </div>

29 <div class="container">

30 <div class="content-nav-spacer"></div>

31− <article class="content posts__content">

31+ <article class="article content posts__content">

32 <h1 class="mb8">Posts</h1>

33 <ul class="list">

34 {% set posts = get_section(path="posts/_index.md") %}

templates/posts/single.html+1−1

@@ -36,7 +36,7 @@

36 </div>

37 <div class="container">

38 <div class="content-nav-spacer"></div>

39− <article class="content posts__content">

39+ <article class="article content posts__content">

40 <h1 class="mb8">{{ term.name }}</h1>

41 <ul class="list">

42 {% for page in term.pages %}

templates/sections/docs.html+1−1

@@ -12,7 +12,7 @@

12 </div>

13 <div class="container ml8">

14 <div class="content-nav-spacer"></div>

15− <article class="content">

15+ <article class=" article content">

16

17 <h1>{{ section.title }}</h1>

18

templates/sections/docs/chapters.html+1−1

@@ -12,7 +12,7 @@

12 </div>

13 <div class="container ml8">

14 <div class="content-nav-spacer"></div>

15− <article class="content mb16">

15+ <article class="article content mb16">

16

17 <h1 class="8mb">{{ section.title }}</h1>

18