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

Author: ffd8

_source/_includes/aside-left.html

@@ -21,6 +21,10 @@
       {% for item in pages %}{% if item.layout != 'entry' %}{%if item.layout == 'default' or item.layout == 'reference' or item.layout == 'gallery' %}{% if item.url != '/' %}
       <li class="menu-item {% if item.title == page.title %}active{% endif %}"><a href="{{item.url}}"
           class="textgrow menu-link">{{item.title}}</a></li>
+      {%if item.title == 'support'%}
+        <li class="menu-item"><a href="https://basiljs.discourse.group/" target="_blank"
+          class="textgrow menu-link">forum</a></li>
+      {% endif %}
       {% endif %}{% endif %}{% endif %}{% endfor %}
 
     </ul>

_source/_includes/entry-card.html

@@ -1,6 +1,6 @@
 <div class="entry">
 {% assign eid = include.entry.name | downcase %}
-<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>
+<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>
 {% if include.entry.description != null %}
 <p class="descriptions">{{include.entry.description | markdownify }}</p>
 {% endif %}

_source/assets/css/scss/_featured-projects.scss

@@ -3,6 +3,9 @@
 }
 
 ul.featured-projects-list {
+  list-style-type: none;
+  padding: 0;
+  margin-block-start:0px;
 }
 
 .featured-project-thumb {

_source/assets/css/scss/_reference.scss

@@ -52,7 +52,7 @@ h1#new-cat-index {
 }
 
 .heading-sub-category {
-  padding-bottom: 1em;
+  padding-top: 25px;
   margin-top: 0;
 }
 
@@ -94,7 +94,7 @@ h1#new-cat-index {
   justify-content: flex-start;
   margin: 5px;
 
-  padding-bottom: 1em;
+  padding-bottom: 5px;
   // min-heig0ht: 7.5em;
   min-width: 250px;
   // padding-left: 0.2em;
@@ -152,7 +152,7 @@ h1#new-cat-index {
     margin-right: 0.5em;
   }
   button {
-    margin-right: 0 !important;
+    margin-right: 1px !important;
     background-color: white;
     background: white;
     background-image: none;
@@ -189,9 +189,11 @@ input.flex-search-item {
   -ms-flex-positive: 2;
   flex-grow: 2;
   border: $solidline;
+  outline:none;
 }
 
 button.flex-search-item {
+  outline:none;
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;

_source/assets/css/styles.scss

@@ -156,13 +156,10 @@ body {
     }
 
     h3 {
-      font-size: 1em;
       font-weight: bold;
-      text-decoration: underline;
     }
 
     h4 {
-      font-size: 1em;
       font-weight: bold;
       text-decoration: underline;
     }
@@ -180,33 +177,55 @@ body {
   }
 }
 
-// ////////////////////// gallery
+//////////////////////// gallery
 
 .gallery-overview-item-wrapper {
   width: 50%;
 
   .gallery-overview-item {
     .heading-container {
-      height: 4em;
+      h3{
+        margin:10px 0 5px 0;
+      }
+      //height: 200px;
     }
-
-    img.gallery-thumbnail {
-      width: 256px;
-      height: 144px;
+    .gallery-overview-thumb{
+      width:100%;
+      height:200px;
+      background-size:cover;
     }
   }
 }
 
+.gallery-overview-item{
+  p{
+    font-size:11pt;
+    line-height:1.3em;
+  }
+}
+
 p.project-authors,
 p.project-description {
-  font-size: 1.2em;
+}
+
+p.gallery-overview-authors{
+  font-size: 11pt;
   font-style: italic;
+  margin:0px 0 10px 0;
+}
+
+h2.gallery-overview-title{
+  margin-top:15px;
+  margin-bottom:5px;
 }
 
 p {
+  margin-top:0px;
+  margin-bottom:10px;
+  line-height:1.5em;
+  font-size:12pt;
   code {
     padding: 0;
-
     // vertical-align: bottom
     font-size: 0.9em;
   }
@@ -228,7 +247,24 @@ p {
   }
 }
 
-// //////////////////////////////////////////
+//////////////////////// tutorials
+.tutorial{
+  list-style-type: none;
+  padding-top:0px;
+  h3{
+    margin:0px 0 5px 0;
+  }
+  .tutorial-description{
+    font-size:12pt;
+    //font-style:italic;
+  }
+  p{
+    margin-bottom:15px;
+  }
+}
+
+
+////////////////////////////////////////////
 
 ////////////////// M O B I L E    N A V I G A T I O N ////////////////////////////
 .nav-o-meter {
@@ -313,14 +349,30 @@ a {
   }
 }
 
+h1{
+  font-size:28pt;
+}
+h2{
+  font-size:22pt;
+}
+h3{
+  font-size:18pt;
+}
+h4{
+  font-size:12pt;
+}
+
+
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  text-decoration: underline;
+  span{
+  border-bottom:1px solid #000;
   color: $headLineColor;
+  }
 }
 
 h4.entries-title,
@@ -463,7 +515,7 @@ pre {
   margin-left:-25px;
 }
 .sponsors-text {
-  font-size: 14px;
+  font-size: 9pt;
   padding-left: 25px;
   margin-bottom: 0.75em;
 }
@@ -477,7 +529,6 @@ a.textgrow {
   span {
     position: relative;
     padding: 0px 1px;
-    font-size: 30px;
     border-bottom: 1px solid $textColor;
   }
 }

_source/assets/js/src/decoration.js

@@ -8,7 +8,8 @@ export function specialChars() {
       element.innerHTML = null;
       chars.forEach((char, i) => {
         const fontSize = 30 - (1.2 * i);
-        const style = `border-bottom-width: ${(i + 1)}px; font-size: ${fontSize}px; top: -${(i + (2 * i))}px; padding:0px ${(i + 1)*.7}px;`;
+        let fs = map(i, 0, chars.length, 30, 20).toPrecision(2);
+        const style = `border-bottom-width: ${(i + 1)}px; font-size: ${fs}px; top: -${(i + (2 * i))}px; padding:0px ${(i + 1)*.7}px;`;
         const node = document.createElement('span');
         node.style.cssText = style;
         const content = document.createTextNode(char);
@@ -21,21 +22,21 @@ export function specialChars() {
   /**
    * not in the reference
    */
-  if ([...document.body.classList].includes('reference') === false) {
+  // if ([...document.body.classList].includes('reference') === false) {
+  if ([...document.body.classList].includes('dont-decorate') === false) {
 
     let elementsShrink = document.querySelectorAll('.textshrink, h1, h2, h3, h4, h5, h6');
 
     [...elementsShrink].forEach(element => {
       if (element.classList.contains('dont-decorate') !== true) {
         const chars = element.innerText.split('');
         const style = window.getComputedStyle(element, null).getPropertyValue('font-size');
-        let fs = parseFloat(style);
+        let maxSize = parseFloat(style);
         element.innerHTML = null;
-        const minfs = 16;
-        const decr = (fs - minfs) / chars.length;
         chars.forEach((char, i) => {
-          fs -= decr;
-          const style = `border-bottom-width: ${(2 / i)}px; font-size: ${fs}px; top: -${i}px;`;
+          let fs = map(i, 0, chars.length, maxSize, maxSize/2).toPrecision(2);
+          let ts = map(i, 0, chars.length, 0, 5).toPrecision(2);
+          const style = `position:relative;border-bottom-width: ${fs/8}px; font-size: ${fs}px; padding-left:${i/6}px; top: -${ts}px;`;
           const node = document.createElement('span');
           node.className = 'textshrink-item';
           node.style.cssText = style;
@@ -46,6 +47,10 @@ export function specialChars() {
       }
     });
   }
+
+  function map(n, start1, stop1, start2, stop2) {
+    return ((n-start1)/(stop1-start1))*(stop2-start2)+start2;
+  };
 }
 
 

_source/download/index.md

@@ -6,9 +6,9 @@ order: 1
 ---
 
 
-# Downloads
+# download
 
-## Download basil.js
+## Library
 
 This website is based on the in-progress [basil.js *develop* branch](https://github.com/basiljs/basil.js/tree/develop)  
 In the future, this will link to the:

_source/gallery/index.html

@@ -19,9 +19,18 @@ <h1>Gallery</h1>
   <a class="gallery-overview-item-wrapper" href="{{page.url}}">
   <div class="gallery-overview-item">
       <div class="heading-container">
-        <h2>{{page.title}}</h2>
+        <h3 class="gallery-overview-title textshrink">{{page.title}}</h3>
+        <p class="gallery-overview-authors">
+          {%- for author in page.authors -%}
+            {{author.name}}
+            {%- if forloop.last == false -%}
+            ,&nbsp;
+            {%- endif -%}
+          {%- endfor -%}
+        </p>
       </div>
-        <img src="{{page.url}}/thumbnail.png" alt="{{page.title}} Thumbnail" class="gallery-thumbnail">
+      <div class="gallery-overview-thumb" alt="{{page.title}} Thumbnail" style="background-image:url({{page.url}}/thumbnail.png);"></div>
+        <!-- <img src="{{page.url}}/thumbnail.png" alt="{{page.title}} Thumbnail" class="gallery-thumbnail"> -->
         <p>{{page.description}}</p>
     </div>
   </a>

_source/index.html

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

_source/reference/index.html

@@ -35,12 +35,13 @@ <h2>Table Of Contents</h2>
         <h2 class="heading-category" id="{{ele.cat}}">{{ele.cat}}</h2>
         {%- assign newcat = false -%}
         {%- endif -%}
-        {%- unless ele.subcat == 'null' -%}<h3 id="{{ele.subcat | downcase | replace: ' ','-'}}" class="heading-sub-category">{{ele.cat}}#{{ele.subcat}}</h3>{%- endunless -%}
+        {%- unless ele.subcat == 'null' -%}<h3 id="{{ele.subcat | downcase | replace: ' ','-'}}" class="heading-sub-category">{{ele.subcat}}</h3>{%- endunless -%}
+        <!-- {{ele.cat}}# -->
         <section class="sub-category">
             {%- for entry in ele.entries -%}
             {%- assign eid = entry.name | downcase -%}
             <div class="ref-entry" id="{{eid}}">
-              <h4 class="entry-heading"><a class="entry-heading-link" href="/reference/{{ele.cat}}/{{entry.name}}.html">{{entry.codetitle}}</a></h4>
+              <h4 class="entry-heading dont-decorate"><a class="entry-heading-link" href="/reference/{{ele.cat}}/{{entry.name}}.html">{{entry.codetitle}}</a></h4>
                 {%- if entry.summary != null -%}
                 <p class="summary">{{entry.summary | markdownify | replace: '<p>', ''| replace: '</p>', '' }}</p>
                 {%- else -%}