git.iko.soy/urbit.org
on master help sign in
typography now follows the indigo guidelines including the validation styling of inputs fields
commit203816c02a6f3a9a03afed49d873251ec24ca679 authorfriederjanmoerman <hijbrid@gmail.com> dateMon 13 May 2019, 00:57 (7 years ago) parent3b4fb08
10 files changed+144−34
compare with master
unifiedsplit
sass/_main.scss+61−22 sass/_responsive.scss+23 static/scripts.js+44−4 templates/doc.html+1−1 templates/partials/footer.html+6−2 templates/partials/navigation.html+5−1 templates/posts/list.html+1−1 templates/posts/single.html+1−1 templates/sections/docs.html+1−1 templates/sections/docs/chapters.html+1−1
sass/_main.scss+61−22
@@ -55,6 +55,10 @@ iframe {
5555 line-height: 8rem;
5656 margin-bottom: 1rem;
5757 }
58+ li {
59+ font-size: inherit;
60+ line-height: inherit;
61+ }
5862}
5963
6064.content-nav-icon {
@@ -259,20 +263,6 @@ iframe {
259263 width: 100%;
260264}
261265
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−
276266.form {
277267 width: 100%;
278268 max-width: 320px;
@@ -353,16 +343,29 @@ h1, h2, h3, h4, h5, h6, .text-heading {
353343 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
354344}
355345
356−p, article li {
357− font-size: 4rem;
346+h1, h2, h3, h4 {
347+ font-weight: 700;
348+}
349+h1 {
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;
358359 line-height: 8rem;
359− font-weight: 400;
360360}
361−
362−article {
363− h1 {
364− margin-bottom: 6rem;
365− }
361+h4 {
362+ font-size: 5rem;
363+ line-height: 6rem;
364+}
365+h5, p, li {
366+ font-size: 5rem;
367+ line-height: 8rem;
368+ font-weight: 400;
366369}
367370
368371p, .p {
@@ -374,9 +377,45 @@ pre, code {
374377 background-color: #eee !important;
375378 color: #000 !important;
376379 overflow-y: scroll;
380+ font-weight: 500;
377381 span {
378382 color: #000 !important;
379383 }
380384 padding: 1rem;
381385 font-size: 4rem;
382386}
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+
124@media only screen and (max-width: 800px) {
225 .container--fixed, .content-nav {
326 margin: 0;
static/scripts.js+44−4
@@ -1,9 +1,49 @@
1+//
2+ // toggling of navigation menus
3+//
4+
15var toggleMainNav = document.getElementById('js-main-nav-toggle');
2−toggleMainNav.onclick = function() {
3− document.body.classList.toggle('has-active-main-nav');
6+if (toggleMainNav !== null) {
7+ toggleMainNav.onclick = function() {
8+ document.body.classList.toggle('has-active-main-nav');
9+ }
410}
511
612var toggleContentNav = document.getElementById('js-content-nav-toggle');
7−toggleContentNav.onclick = function() {
8− document.body.classList.toggle('has-active-content-nav');
13+if (toggleContentNav !== null) {
14+ toggleContentNav.onclick = function() {
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+ });
949}
templates/doc.html+1−1
@@ -12,7 +12,7 @@
1212 </div>
1313 <div class="container ml8">
1414 <div class="content-nav-spacer"></div>
15− <article class="content">
15+ <article class="article content">
1616 <!-- header -->
1717 <h1>{{ page.title }}</h1>
1818 <!-- body -->
templates/partials/footer.html+6−2
@@ -8,7 +8,7 @@
88 <form id="mc-embedded-subscribe-form" class="validate" action="https://urbit.us11.list-manage.com/subscribe/post?u=972a03db9e0c6c25bb58de8c8&amp;amp;id=be143888d2" method="post" name="mc-embedded-subscribe-form" target="nothing">
99 <div class="input-group text-mono" id="mc_embed_signup_scroll">
1010 <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">
1212 </div>
1313 <div id="mce-responses" class="clear">
1414 <div id="mce-error-response" class="response" style="display:none"></div>
@@ -39,7 +39,11 @@
3939 </section>
4040 <section class="mb6">
4141 <h4 class="mb1">Contact</h4>
42− <a class="mono" href="mailto:support@urbit.org">support@urbit.org</a>
42+ <ul class="list">
43+ <li class="list__item">
44+ <a class="mono" href="mailto:support@urbit.org">support@urbit.org</a>
45+ </li>
46+ </ul>
4347 </section>
4448 <section class="mb6">
4549 <h4 class="mb1">Company</h4>
templates/partials/navigation.html+5−1
@@ -31,7 +31,11 @@
3131 </section>
3232 <section class="mb6">
3333 <h4 class="mb1">Contact</h4>
34− <a class="mono" href="mailto:support@urbit.org">support@urbit.org</a>
34+ <ul class="list">
35+ <li class="list__item">
36+ <a class="mono" href="mailto:support@urbit.org">support@urbit.org</a>
37+ </li>
38+ </ul>
3539 </section>
3640 <section class="mb6">
3741 <h4 class="mb1">Company</h4>
templates/posts/list.html+1−1
@@ -28,7 +28,7 @@
2828 </div>
2929 <div class="container">
3030 <div class="content-nav-spacer"></div>
31− <article class="content posts__content">
31+ <article class="article content posts__content">
3232 <h1 class="mb8">Posts</h1>
3333 <ul class="list">
3434 {% set posts = get_section(path="posts/_index.md") %}
templates/posts/single.html+1−1
@@ -36,7 +36,7 @@
3636 </div>
3737 <div class="container">
3838 <div class="content-nav-spacer"></div>
39− <article class="content posts__content">
39+ <article class="article content posts__content">
4040 <h1 class="mb8">{{ term.name }}</h1>
4141 <ul class="list">
4242 {% for page in term.pages %}
templates/sections/docs.html+1−1
@@ -12,7 +12,7 @@
1212 </div>
1313 <div class="container ml8">
1414 <div class="content-nav-spacer"></div>
15− <article class="content">
15+ <article class=" article content">
1616 <!-- header -->
1717 <h1>{{ section.title }}</h1>
1818 <!-- body -->
templates/sections/docs/chapters.html+1−1
@@ -12,7 +12,7 @@
1212 </div>
1313 <div class="container ml8">
1414 <div class="content-nav-spacer"></div>
15− <article class="content mb16">
15+ <article class="article content mb16">
1616 <!-- header -->
1717 <h1 class="8mb">{{ section.title }}</h1>
1818 <!-- body -->