mobile viewport

_config.yml

@@ -29,6 +29,8 @@ plugins:
 include:
   - _pages
 
+halfmoonCssTag: <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" rel="stylesheet" integrity="sha256-SsJizWSIG9JT9Qxbiy8xnYJfjCAkhEQ0hihxRn7jt2M=" crossorigin="anonymous">
+
 footer:
   links:
     - label: "Terms of Use"

_pages/influencer.html

@@ -8,6 +8,8 @@
 <script type="module">
 import {LitElement, html, svg, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js';
 
+const halfmoonCssTag = '{{ site.halfmoonCssTag }}';
+
 export class D3UserChart extends LitElement {
   static properties = {
       width: { type: Number },
@@ -127,8 +129,7 @@
     } else {
         console.log("render");
         return html`
-           <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
-      integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+           ${halfmoonCssTag}
             <div class="input-group mb-3" style="margin:auto;justify-content:center;padding-top:10px;">
                 ${this.stocks.map(
                   (item) => html`
@@ -193,8 +194,7 @@
             return html`<h1>Not Found</h1>`;
         } else {
             return html`
-                <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
-                    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+                ${halfmoonCssTag}
                 <h1 class="display-5 fw-bold">Stock Tracking for</h1>
                 <div style="display:flex;margin-left:auto;margin-right:auto;width:250px;">
                     <img src="${this.userSummary.twitterProfileUrl}" style="width:64px;height:64px;border-radius:50%;"/>

_pages/rankings.html

@@ -13,6 +13,8 @@ <h1 class="display-6 fw-bold text-center">Influencer Rankings</h1>
 <script type="module">
 import {LitElement, html, svg, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js';
 
+const halfmoonCssTag = '{{ site.halfmoonCssTag }}';
+
 export function humanNumber(num){
   function intlFormat(num){
     return new Intl.NumberFormat().format(Math.floor(num*10)/10);
@@ -167,8 +169,7 @@ <h1 class="display-6 fw-bold text-center">Influencer Rankings</h1>
     const height = this.height ?? 64;
     //<link rel="preload" href="https://tradeaudit.app/assets/finance.svg" as="image" />
     return html`
-       <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
-  integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+       ${halfmoonCssTag}
        <ul class="list-group" id="stock-ul" style="max-width:1024px;margin:auto;">
             ${(this.influencers ?? []).map(
               (item) => {
@@ -372,29 +373,28 @@ <h5 class="card-title">${this.profileTitle(item)}</h5>
     const isLoading = this.stocks.isEmpty;
 
     return html`
-       <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
-  integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
-        <div class="input-group mb-2" role="group" aria-label="Influencer Sorting" style="margin:auto;justify-content:center;height:48px;">
-            <button
-                @click=${() => this.toggleSort(true)}
-                class="btn btn-outline-secondary btn-lg ${this.isTop ? 'active' : ''}" type="button"
-                title="Top Influencers" data-bs-toggle="tooltip" data-bs-placement="top"
-                style="width:50%;max-width:230pt;${ isLoading ? "display:none;" : "" }"
-            >💰 ▼</button>
-            <button
-                @click=${() => this.toggleSort(false)}
-                class="btn btn-outline-secondary btn-lg ${this.isTop ? '' : 'active'}" type="button"
-                title="Bottom Influencers" data-bs-toggle="tooltip" data-bs-placement="top"
-                style="width:50%;max-width:230pt;${ isLoading ? "display:none;" : "" }"
-            >🤡 ▲</button>
-        </div>
-        <div class="input-group mb-3" role="group" aria-label="Stocks" style="margin:auto;justify-content:center;">
-          ${ isLoading ? this.renderLoadingBar() : this.renderStocks() }
-        </div>
-        <influencer-summary 
-          height="80" .selectedStockItem=${this.selectedStockItem} .influencers=${this.influencers}
-          @select-stock-event="${(e) => { this.selectFunction(e.detail) }}"
-        ></influencer-summary>
+      ${halfmoonCssTag}
+      <div class="input-group mb-2" role="group" aria-label="Influencer Sorting" style="margin:auto;justify-content:center;height:48px;">
+          <button
+              @click=${() => this.toggleSort(true)}
+              class="btn btn-outline-secondary btn-lg ${this.isTop ? 'active' : ''}" type="button"
+              title="Top Influencers" data-bs-toggle="tooltip" data-bs-placement="top"
+              style="width:50%;max-width:230pt;${ isLoading ? "display:none;" : "" }"
+          >💰 ▼</button>
+          <button
+              @click=${() => this.toggleSort(false)}
+              class="btn btn-outline-secondary btn-lg ${this.isTop ? '' : 'active'}" type="button"
+              title="Bottom Influencers" data-bs-toggle="tooltip" data-bs-placement="top"
+              style="width:50%;max-width:230pt;${ isLoading ? "display:none;" : "" }"
+          >🤡 ▲</button>
+      </div>
+      <div class="input-group mb-3" role="group" aria-label="Stocks" style="margin:auto;justify-content:center;">
+        ${ isLoading ? this.renderLoadingBar() : this.renderStocks() }
+      </div>
+      <influencer-summary
+        height="80" .selectedStockItem=${this.selectedStockItem} .influencers=${this.influencers}
+        @select-stock-event="${(e) => { this.selectFunction(e.detail) }}"
+      ></influencer-summary>
     `;
   }