Skip to content

Commit 2c6c9c1

Browse files
ffd8ffd8
committed
more styling fixes
- added forum to nav - fixed hirarchy of sizing for h1/h2/h3/h4 throughout - fixed li listing dots throughout - refs, cleaned up styling (gave typo treatment to main headers) - refs, removed outline to search inputs - refs, removed cat# from subcats - fixed typo treatment sizing - fixed download name inconsistencies - added authors to gallery, fixed styling issues - removed basil.js from landing page.. redundent - tuts, fixed styling
1 parent 6fc0837 commit 2c6c9c1

File tree

11 files changed

+108
-34
lines changed

11 files changed

+108
-34
lines changed

Diff for: ‎_source/_includes/aside-left.html

+4
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@
2121
{% for item in pages %}{% if item.layout != 'entry' %}{%if item.layout == 'default' or item.layout == 'reference' or item.layout == 'gallery' %}{% if item.url != '/' %}
2222
<li class="menu-item {% if item.title == page.title %}active{% endif %}"><a href="{{item.url}}"
2323
class="textgrow menu-link">{{item.title}}</a></li>
24+
{%if item.title == 'support'%}
25+
<li class="menu-item"><a href="https://basiljs.discourse.group/" target="_blank"
26+
class="textgrow menu-link">forum</a></li>
27+
{% endif %}
2428
{% endif %}{% endif %}{% endif %}{% endfor %}
2529

2630
</ul>

Diff for: ‎_source/_includes/entry-card.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="entry">
22
{% assign eid = include.entry.name | downcase %}
3-
<h4 id="{{eid}}" class="entries-title">{% if include.ispage == false %}<a href="/reference/{{id}}/{{include.entry.name}}.html">{% endif %}{{include.entry.codetitle}}{% if include.ispage == false %}</a>{% endif %}</h4>
3+
<h3 id="{{eid}}" class="entries-title dont-decorate">{% if include.ispage == false %}<a href="/reference/{{id}}/{{include.entry.name}}.html">{% endif %}{{include.entry.codetitle}}{% if include.ispage == false %}</a>{% endif %}</h3>
44
{% if include.entry.description != null %}
55
<p class="descriptions">{{include.entry.description | markdownify }}</p>
66
{% endif %}

Diff for: ‎_source/assets/css/scss/_featured-projects.scss

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
}
44

55
ul.featured-projects-list {
6+
list-style-type: none;
7+
padding: 0;
8+
margin-block-start:0px;
69
}
710

811
.featured-project-thumb {

Diff for: ‎_source/assets/css/scss/_reference.scss

+5-3
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ h1#new-cat-index {
5252
}
5353

5454
.heading-sub-category {
55-
padding-bottom: 1em;
55+
padding-top: 25px;
5656
margin-top: 0;
5757
}
5858

@@ -94,7 +94,7 @@ h1#new-cat-index {
9494
justify-content: flex-start;
9595
margin: 5px;
9696

97-
padding-bottom: 1em;
97+
padding-bottom: 5px;
9898
// min-heig0ht: 7.5em;
9999
min-width: 250px;
100100
// padding-left: 0.2em;
@@ -152,7 +152,7 @@ h1#new-cat-index {
152152
margin-right: 0.5em;
153153
}
154154
button {
155-
margin-right: 0 !important;
155+
margin-right: 1px !important;
156156
background-color: white;
157157
background: white;
158158
background-image: none;
@@ -189,9 +189,11 @@ input.flex-search-item {
189189
-ms-flex-positive: 2;
190190
flex-grow: 2;
191191
border: $solidline;
192+
outline:none;
192193
}
193194

194195
button.flex-search-item {
196+
outline:none;
195197
-webkit-box-flex: 1;
196198
-ms-flex-positive: 1;
197199
flex-grow: 1;

Diff for: ‎_source/assets/css/styles.scss

+66-15
Original file line numberDiff line numberDiff line change
@@ -156,13 +156,10 @@ body {
156156
}
157157

158158
h3 {
159-
font-size: 1em;
160159
font-weight: bold;
161-
text-decoration: underline;
162160
}
163161

164162
h4 {
165-
font-size: 1em;
166163
font-weight: bold;
167164
text-decoration: underline;
168165
}
@@ -180,33 +177,55 @@ body {
180177
}
181178
}
182179

183-
// ////////////////////// gallery
180+
//////////////////////// gallery
184181

185182
.gallery-overview-item-wrapper {
186183
width: 50%;
187184

188185
.gallery-overview-item {
189186
.heading-container {
190-
height: 4em;
187+
h3{
188+
margin:10px 0 5px 0;
189+
}
190+
//height: 200px;
191191
}
192-
193-
img.gallery-thumbnail {
194-
width: 256px;
195-
height: 144px;
192+
.gallery-overview-thumb{
193+
width:100%;
194+
height:200px;
195+
background-size:cover;
196196
}
197197
}
198198
}
199199

200+
.gallery-overview-item{
201+
p{
202+
font-size:11pt;
203+
line-height:1.3em;
204+
}
205+
}
206+
200207
p.project-authors,
201208
p.project-description {
202-
font-size: 1.2em;
209+
}
210+
211+
p.gallery-overview-authors{
212+
font-size: 11pt;
203213
font-style: italic;
214+
margin:0px 0 10px 0;
215+
}
216+
217+
h2.gallery-overview-title{
218+
margin-top:15px;
219+
margin-bottom:5px;
204220
}
205221

206222
p {
223+
margin-top:0px;
224+
margin-bottom:10px;
225+
line-height:1.5em;
226+
font-size:12pt;
207227
code {
208228
padding: 0;
209-
210229
// vertical-align: bottom
211230
font-size: 0.9em;
212231
}
@@ -228,7 +247,24 @@ p {
228247
}
229248
}
230249

231-
// //////////////////////////////////////////
250+
//////////////////////// tutorials
251+
.tutorial{
252+
list-style-type: none;
253+
padding-top:0px;
254+
h3{
255+
margin:0px 0 5px 0;
256+
}
257+
.tutorial-description{
258+
font-size:12pt;
259+
//font-style:italic;
260+
}
261+
p{
262+
margin-bottom:15px;
263+
}
264+
}
265+
266+
267+
////////////////////////////////////////////
232268

233269
////////////////// M O B I L E N A V I G A T I O N ////////////////////////////
234270
.nav-o-meter {
@@ -313,14 +349,30 @@ a {
313349
}
314350
}
315351

352+
h1{
353+
font-size:28pt;
354+
}
355+
h2{
356+
font-size:22pt;
357+
}
358+
h3{
359+
font-size:18pt;
360+
}
361+
h4{
362+
font-size:12pt;
363+
}
364+
365+
316366
h1,
317367
h2,
318368
h3,
319369
h4,
320370
h5,
321371
h6 {
322-
text-decoration: underline;
372+
span{
373+
border-bottom:1px solid #000;
323374
color: $headLineColor;
375+
}
324376
}
325377

326378
h4.entries-title,
@@ -463,7 +515,7 @@ pre {
463515
margin-left:-25px;
464516
}
465517
.sponsors-text {
466-
font-size: 14px;
518+
font-size: 9pt;
467519
padding-left: 25px;
468520
margin-bottom: 0.75em;
469521
}
@@ -477,7 +529,6 @@ a.textgrow {
477529
span {
478530
position: relative;
479531
padding: 0px 1px;
480-
font-size: 30px;
481532
border-bottom: 1px solid $textColor;
482533
}
483534
}

Diff for: ‎_source/assets/js/src/decoration.js

+12-7
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export function specialChars() {
88
element.innerHTML = null;
99
chars.forEach((char, i) => {
1010
const fontSize = 30 - (1.2 * i);
11-
const style = `border-bottom-width: ${(i + 1)}px; font-size: ${fontSize}px; top: -${(i + (2 * i))}px; padding:0px ${(i + 1)*.7}px;`;
11+
let fs = map(i, 0, chars.length, 30, 20).toPrecision(2);
12+
const style = `border-bottom-width: ${(i + 1)}px; font-size: ${fs}px; top: -${(i + (2 * i))}px; padding:0px ${(i + 1)*.7}px;`;
1213
const node = document.createElement('span');
1314
node.style.cssText = style;
1415
const content = document.createTextNode(char);
@@ -21,21 +22,21 @@ export function specialChars() {
2122
/**
2223
* not in the reference
2324
*/
24-
if ([...document.body.classList].includes('reference') === false) {
25+
// if ([...document.body.classList].includes('reference') === false) {
26+
if ([...document.body.classList].includes('dont-decorate') === false) {
2527

2628
let elementsShrink = document.querySelectorAll('.textshrink, h1, h2, h3, h4, h5, h6');
2729

2830
[...elementsShrink].forEach(element => {
2931
if (element.classList.contains('dont-decorate') !== true) {
3032
const chars = element.innerText.split('');
3133
const style = window.getComputedStyle(element, null).getPropertyValue('font-size');
32-
let fs = parseFloat(style);
34+
let maxSize = parseFloat(style);
3335
element.innerHTML = null;
34-
const minfs = 16;
35-
const decr = (fs - minfs) / chars.length;
3636
chars.forEach((char, i) => {
37-
fs -= decr;
38-
const style = `border-bottom-width: ${(2 / i)}px; font-size: ${fs}px; top: -${i}px;`;
37+
let fs = map(i, 0, chars.length, maxSize, maxSize/2).toPrecision(2);
38+
let ts = map(i, 0, chars.length, 0, 5).toPrecision(2);
39+
const style = `position:relative;border-bottom-width: ${fs/8}px; font-size: ${fs}px; padding-left:${i/6}px; top: -${ts}px;`;
3940
const node = document.createElement('span');
4041
node.className = 'textshrink-item';
4142
node.style.cssText = style;
@@ -46,6 +47,10 @@ export function specialChars() {
4647
}
4748
});
4849
}
50+
51+
function map(n, start1, stop1, start2, stop2) {
52+
return ((n-start1)/(stop1-start1))*(stop2-start2)+start2;
53+
};
4954
}
5055

5156

Diff for: ‎_source/download/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ order: 1
66
---
77

88

9-
# Downloads
9+
# download
1010

11-
## Download basil.js
11+
## Library
1212

1313
This website is based on the in-progress [basil.js *develop* branch](https://github.com/basiljs/basil.js/tree/develop)
1414
In the future, this will link to the:

Diff for: ‎_source/gallery/index.html

+11-2
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,18 @@ <h1>Gallery</h1>
1919
<a class="gallery-overview-item-wrapper" href="{{page.url}}">
2020
<div class="gallery-overview-item">
2121
<div class="heading-container">
22-
<h2>{{page.title}}</h2>
22+
<h3 class="gallery-overview-title textshrink">{{page.title}}</h3>
23+
<p class="gallery-overview-authors">
24+
{%- for author in page.authors -%}
25+
{{author.name}}
26+
{%- if forloop.last == false -%}
27+
,&nbsp;
28+
{%- endif -%}
29+
{%- endfor -%}
30+
</p>
2331
</div>
24-
<img src="{{page.url}}/thumbnail.png" alt="{{page.title}} Thumbnail" class="gallery-thumbnail">
32+
<div class="gallery-overview-thumb" alt="{{page.title}} Thumbnail" style="background-image:url({{page.url}}/thumbnail.png);"></div>
33+
<!-- <img src="{{page.url}}/thumbnail.png" alt="{{page.title}} Thumbnail" class="gallery-thumbnail"> -->
2534
<p>{{page.description}}</p>
2635
</div>
2736
</a>

Diff for: ‎_source/index.html

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
hasFeaturedProjects: true
55
---
66

7-
<h1 class="dont-decorate">{{page.title}}</h1>
87
{%- assign featuredProjects = site.pages | where: "layout" , "gallery-item" | where_exp: "item", "item.featured == true" -%}
98
<!--
109
featured projects:

Diff for: ‎_source/reference/index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,13 @@ <h2>Table Of Contents</h2>
3535
<h2 class="heading-category" id="{{ele.cat}}">{{ele.cat}}</h2>
3636
{%- assign newcat = false -%}
3737
{%- endif -%}
38-
{%- unless ele.subcat == 'null' -%}<h3 id="{{ele.subcat | downcase | replace: ' ','-'}}" class="heading-sub-category">{{ele.cat}}#{{ele.subcat}}</h3>{%- endunless -%}
38+
{%- unless ele.subcat == 'null' -%}<h3 id="{{ele.subcat | downcase | replace: ' ','-'}}" class="heading-sub-category">{{ele.subcat}}</h3>{%- endunless -%}
39+
<!-- {{ele.cat}}# -->
3940
<section class="sub-category">
4041
{%- for entry in ele.entries -%}
4142
{%- assign eid = entry.name | downcase -%}
4243
<div class="ref-entry" id="{{eid}}">
43-
<h4 class="entry-heading"><a class="entry-heading-link" href="/reference/{{ele.cat}}/{{entry.name}}.html">{{entry.codetitle}}</a></h4>
44+
<h4 class="entry-heading dont-decorate"><a class="entry-heading-link" href="/reference/{{ele.cat}}/{{entry.name}}.html">{{entry.codetitle}}</a></h4>
4445
{%- if entry.summary != null -%}
4546
<p class="summary">{{entry.summary | markdownify | replace: '<p>', ''| replace: '</p>', '' }}</p>
4647
{%- else -%}

Diff for: ‎_source/tutorials/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h1>{{page.title}}</h1>
1212
{% for page in tutos %}
1313
{% if page.layout == 'tutorial' %}
1414
{% if page.title != 'example tutorial page'%}
15-
<li class="tutorial"><a href="{{page.url}}" class="tutorial-title">{{page.title}}</a>{% if page.description %}<p class="tutorial-description">{{page.description}}</p>{% endif %}</li>
15+
<a href="{{page.url}}" ><li class="tutorial"><h3 class="textshrink tutorial-title">{{page.title}}</h3>{% if page.description %}<p class="tutorial-description">{{page.description}}</p>{% endif %}</li></a>
1616
{% endif %}
1717
{% endif %}
1818
{% endfor %}

0 commit comments

Comments
 (0)