commit d743be48307061465463e7bd34e4d37cfda04bd9 · bmann.ca/bmannconsulting.com

+39

404.html

···

       1
       1
       +
       ---

     

       2
       2
       +
       permalink: /404.html

     

       3
       3
       +
       layout: post

     

       4
       4
       +
       ---

     

       5
       5
       +
       

     

       6
       6
       +
       <style> 

     

       7
       7
       +
         .gHomeNF {

     

       8
       8
       +
           width: 120px;

     

       9
       9
       +
           height: 40px;

     

       10
       10
       +
           font-size: 1.0rem;

     

       11
       11
       +
           border: 1px solid #ddd;

     

       12
       12
       +
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /*'Open Sans', sans-serif; /* Font family for each predefined tags */

     

       13
       13
       +
           color: #555;

     

       14
       14
       +
           box-shadow: 0 4px 4px 0 #ddd;

     

       15
       15
       +
         }

     

       16
       16
       +
       

     

       17
       17
       +
         .gHomeNF:hover,

     

       18
       18
       +
         .gHomeNF:focus {

     

       19
       19
       +
           background-color: #333333;

     

       20
       20
       +
           color: #fff;

     

       21
       21
       +
         }

     

       22
       22
       +
       

     

       23
       23
       +
         .gHomeNF:active {

     

       24
       24
       +
           box-shadow: 0px 0px;

     

       25
       25
       +
         }

     

       26
       26
       +
       

     

       27
       27
       +
         p {

     

       28
       28
       +
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /*'Open Sans', sans-serif; /* Font family for each predefined tags */

     

       29
       29
       +
         }

     

       30
       30
       +
       

     

       31
       31
       +
       </style>

     

       32
       32
       +
       

     

       33
       33
       +
       <h1>404</h1>

     

       34
       34
       +
       

     

       35
       35
       +
       <p><strong>Page not found :(</strong></p>

     

       36
       36
       +
       <p>The requested page could not be found.</p>

     

       37
       37
       +
       

     

       38
       38
       +
       <button class="gHomeNF" type=button onclick="window.location='/index.html'">Go Home</button>

     

       39
       39
       +

+31

Gemfile

···

       1
       1
       +
       source "https://rubygems.org"

     

       2
       2
       +
       # Hello! This is where you manage which Jekyll version is used to run.

     

       3
       3
       +
       # When you want to use a different version, change it below, save the

     

       4
       4
       +
       # file and run `bundle install`. Run Jekyll with `bundle exec`, like so:

     

       5
       5
       +
       #

     

       6
       6
       +
       #     bundle exec jekyll serve

     

       7
       7
       +
       #

     

       8
       8
       +
       # This will help ensure the proper Jekyll version is running.

     

       9
       9
       +
       # Happy Jekylling!

     

       10
       10
       +
       gem "jekyll", "~> 4.0.0"

     

       11
       11
       +
       # This is the default theme for new Jekyll sites. You may change this to anything you like.

     

       12
       12
       +
       # gem "minima", "~> 2.5"

     

       13
       13
       +
       # If you want to use GitHub Pages, remove the "gem "jekyll"" above and

     

       14
       14
       +
       # uncomment the line below. To upgrade, run `bundle update github-pages`.

     

       15
       15
       +
       # gem "github-pages", group: :jekyll_plugins

     

       16
       16
       +
       # If you have any plugins, put them here!

     

       17
       17
       +
       group :jekyll_plugins do

     

       18
       18
       +
         gem "jekyll-feed", "~> 0.12"

     

       19
       19
       +
       end

     

       20
       20
       +
       

     

       21
       21
       +
       # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

     

       22
       22
       +
       # and associated library.

     

       23
       23
       +
       install_if -> { RUBY_PLATFORM =~ %r!mingw|mswin|java! } do

     

       24
       24
       +
         gem "tzinfo", "~> 1.2"

     

       25
       25
       +
         gem "tzinfo-data"

     

       26
       26
       +
       end

     

       27
       27
       +
       

     

       28
       28
       +
       # Performance-booster for watching directories on Windows

     

       29
       29
       +
       gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?

     

       30
       30
       +
       

     

       31
       31
       +
       gem 'jekyll-sitemap'

+82

Gemfile.lock

···

       1
       1
       +
       GEM

     

       2
       2
       +
         remote: https://rubygems.org/

     

       3
       3
       +
         specs:

     

       4
       4
       +
           addressable (2.7.0)

     

       5
       5
       +
             public_suffix (>= 2.0.2, < 5.0)

     

       6
       6
       +
           colorator (1.1.0)

     

       7
       7
       +
           concurrent-ruby (1.1.6)

     

       8
       8
       +
           em-websocket (0.5.1)

     

       9
       9
       +
             eventmachine (>= 0.12.9)

     

       10
       10
       +
             http_parser.rb (~> 0.6.0)

     

       11
       11
       +
           eventmachine (1.2.7-x64-mingw32)

     

       12
       12
       +
           ffi (1.12.2-x64-mingw32)

     

       13
       13
       +
           forwardable-extended (2.6.0)

     

       14
       14
       +
           http_parser.rb (0.6.0)

     

       15
       15
       +
           i18n (1.8.2)

     

       16
       16
       +
             concurrent-ruby (~> 1.0)

     

       17
       17
       +
           jekyll (4.0.0)

     

       18
       18
       +
             addressable (~> 2.4)

     

       19
       19
       +
             colorator (~> 1.0)

     

       20
       20
       +
             em-websocket (~> 0.5)

     

       21
       21
       +
             i18n (>= 0.9.5, < 2)

     

       22
       22
       +
             jekyll-sass-converter (~> 2.0)

     

       23
       23
       +
             jekyll-watch (~> 2.0)

     

       24
       24
       +
             kramdown (~> 2.1)

     

       25
       25
       +
             kramdown-parser-gfm (~> 1.0)

     

       26
       26
       +
             liquid (~> 4.0)

     

       27
       27
       +
             mercenary (~> 0.3.3)

     

       28
       28
       +
             pathutil (~> 0.9)

     

       29
       29
       +
             rouge (~> 3.0)

     

       30
       30
       +
             safe_yaml (~> 1.0)

     

       31
       31
       +
             terminal-table (~> 1.8)

     

       32
       32
       +
           jekyll-feed (0.13.0)

     

       33
       33
       +
             jekyll (>= 3.7, < 5.0)

     

       34
       34
       +
           jekyll-sass-converter (2.1.0)

     

       35
       35
       +
             sassc (> 2.0.1, < 3.0)

     

       36
       36
       +
           jekyll-sitemap (1.4.0)

     

       37
       37
       +
             jekyll (>= 3.7, < 5.0)

     

       38
       38
       +
           jekyll-watch (2.2.1)

     

       39
       39
       +
             listen (~> 3.0)

     

       40
       40
       +
           kramdown (2.2.1)

     

       41
       41
       +
             rexml

     

       42
       42
       +
           kramdown-parser-gfm (1.1.0)

     

       43
       43
       +
             kramdown (~> 2.0)

     

       44
       44
       +
           liquid (4.0.3)

     

       45
       45
       +
           listen (3.2.1)

     

       46
       46
       +
             rb-fsevent (~> 0.10, >= 0.10.3)

     

       47
       47
       +
             rb-inotify (~> 0.9, >= 0.9.10)

     

       48
       48
       +
           mercenary (0.3.6)

     

       49
       49
       +
           pathutil (0.16.2)

     

       50
       50
       +
             forwardable-extended (~> 2.6)

     

       51
       51
       +
           public_suffix (4.0.4)

     

       52
       52
       +
           rb-fsevent (0.10.3)

     

       53
       53
       +
           rb-inotify (0.10.1)

     

       54
       54
       +
             ffi (~> 1.0)

     

       55
       55
       +
           rexml (3.2.4)

     

       56
       56
       +
           rouge (3.18.0)

     

       57
       57
       +
           safe_yaml (1.0.5)

     

       58
       58
       +
           sassc (2.3.0-x64-mingw32)

     

       59
       59
       +
             ffi (~> 1.9)

     

       60
       60
       +
           terminal-table (1.8.0)

     

       61
       61
       +
             unicode-display_width (~> 1.1, >= 1.1.1)

     

       62
       62
       +
           thread_safe (0.3.6)

     

       63
       63
       +
           tzinfo (1.2.7)

     

       64
       64
       +
             thread_safe (~> 0.1)

     

       65
       65
       +
           tzinfo-data (1.2020.1)

     

       66
       66
       +
             tzinfo (>= 1.0.0)

     

       67
       67
       +
           unicode-display_width (1.7.0)

     

       68
       68
       +
           wdm (0.1.1)

     

       69
       69
       +
       

     

       70
       70
       +
       PLATFORMS

     

       71
       71
       +
         x64-mingw32

     

       72
       72
       +
       

     

       73
       73
       +
       DEPENDENCIES

     

       74
       74
       +
         jekyll (~> 4.0.0)

     

       75
       75
       +
         jekyll-feed (~> 0.12)

     

       76
       76
       +
         jekyll-sitemap

     

       77
       77
       +
         tzinfo (~> 1.2)

     

       78
       78
       +
         tzinfo-data

     

       79
       79
       +
         wdm (~> 0.1.1)

     

       80
       80
       +
       

     

       81
       81
       +
       BUNDLED WITH

     

       82
       82
       +
          2.1.4

README.md

···

       1
       1
       +
       # raghuveerdotnet.github.io

     

       2
       2
       +
       Personal Website by Raghuveer S. 

     

       3
       3
       +
       

     

       4
       4
       +
       Do whatever you want with it. 

     

       5
       5
       +
       

     

       6
       6
       +
       PS. If you like the content or the design, please share it with others.

     

       7
       7
       +
       # simply-jekyll

+43

_config.yml

···

       1
       1
       +
       title: Simply Jekyll

     

       2
       2
       +
       name: Raghuveer S

     

       3
       3
       +
       baseurl: "/" # the subpath of your site, e.g. /blog

     

       4
       4
       +
       url: "https://www.raghuveer.net" # the base hostname & protocol for your site, e.g. http://example.com

     

       5
       5
       +
       encoding: utf-8

     

       6
       6
       +
       

     

       7
       7
       +
       # Build settings

     

       8
       8
       +
       theme: null

     

       9
       9
       +
       plugins:

     

       10
       10
       +
         - jekyll-feed 

     

       11
       11
       +
         - jekyll-sitemap 

     

       12
       12
       +
       

     

       13
       13
       +
       markdown: kramdown

     

       14
       14
       +
       

     

       15
       15
       +
       kramdown:

     

       16
       16
       +
         input: GFM

     

       17
       17
       +
         hard_wrap: false

     

       18
       18
       +
         math_engine: mathjax

     

       19
       19
       +
         smart_quotes: ["apos", "apos", "quot", "quot"]

     

       20
       20
       +
         syntax_highlighter: rouge

     

       21
       21
       +
       

     

       22
       22
       +
       sass:

     

       23
       23
       +
         style: compressed

     

       24
       24
       +
       

     

       25
       25
       +
       collections:

     

       26
       26
       +
           notes:

     

       27
       27
       +
             output: true

     

       28
       28
       +
             permalink: /notes/:title

     

       29
       29
       +
       

     

       30
       30
       +
       defaults:

     

       31
       31
       +
         - scope:

     

       32
       32
       +
             path: ""

     

       33
       33
       +
             type: posts

     

       34
       34
       +
           values:

     

       35
       35
       +
             layout: post

     

       36
       36
       +
             permalink: /posts/:title

     

       37
       37
       +
             content-type: post

     

       38
       38
       +
         - scope:

     

       39
       39
       +
             path: ""

     

       40
       40
       +
             type: notes

     

       41
       41
       +
           values:

     

       42
       42
       +
             layout: post

     

       43
       43
       +
             content-type: notes

+62

_includes/backlinks.html

···

       1
       1
       +
       <!-- Add backlinks to the current page --> 

     

       2
       2
       +
       {%- assign link_count = 0 -%}

     

       3
       3
       +
       {%- for note in site.notes -%}

     

       4
       4
       +
               {%- if note.url != page.url -%}

     

       5
       5
       +
                   {%- if note.content contains page.title -%}

     

       6
       6
       +
                       {%- assign link_count = link_count | plus:1 -%}

     

       7
       7
       +
                   {%- endif -%}

     

       8
       8
       +
           {%- endif -%}

     

       9
       9
       +
       {%- endfor -%}

     

       10
       10
       +
       {%- for note in site.posts -%}

     

       11
       11
       +
               {%- if note.url != page.url -%}

     

       12
       12
       +
                   {%- if note.content contains page.title -%}

     

       13
       13
       +
                       {%- assign link_count = link_count | plus:1 -%}

     

       14
       14
       +
                   {%- endif -%}

     

       15
       15
       +
           {%- endif -%}

     

       16
       16
       +
       {%- endfor -%}

     

       17
       17
       +
       {%- for note in site.pages -%}

     

       18
       18
       +
               {%- if note.url != page.url -%}

     

       19
       19
       +
                   {%- if note.content contains page.title -%}

     

       20
       20
       +
                       {%- assign link_count = link_count | plus:1 -%}

     

       21
       21
       +
                   {%- endif -%}

     

       22
       22
       +
           {%- endif -%}

     

       23
       23
       +
       {%- endfor -%}

     

       24
       24
       +
       {%- if link_count > 0 -%}

     

       25
       25
       +
       {%- assign wiki_link_title = '[' | append: page.title | append: ']' -%}

     

       26
       26
       +
       <div class="related" id="jekyll-seamless-backlinks">

     

       27
       27
       +
           <h4 class="medium-small">Linked References</h4>

     

       28
       28
       +
           <div class="related-wrapper">

     

       29
       29
       +
               {%- for note in site.notes -%}

     

       30
       30
       +
               {%- if note.url != page.url -%}

     

       31
       31
       +
                   {%- if note.content contains wiki_link_title -%}

     

       32
       32
       +
                   <div class="related-group"><a href="{{note.url}}">

     

       33
       33
       +
                       <p class="related-title">{{ note.title }}</p>

     

       34
       34
       +
                       <p class="related-excerpt">{{ note.content | markdownify | strip_html | truncate: 140 }}</p>

     

       35
       35
       +
                   </a></div>

     

       36
       36
       +
                   {%- endif -%}

     

       37
       37
       +
               {%- endif -%}

     

       38
       38
       +
               {%- endfor -%}

     

       39
       39
       +
               {%- for note in site.posts -%}

     

       40
       40
       +
               {%- if note.url != page.url -%}

     

       41
       41
       +
                   {%- if note.content contains wiki_link_title -%}

     

       42
       42
       +
                   <div class="related-group"><a href="{{note.url}}">

     

       43
       43
       +
                       <p class="related-title">{{ note.title }}</p>

     

       44
       44
       +
                       <p class="related-excerpt">{{ note.content | markdownify | strip_html | truncate: 140 }}</p>

     

       45
       45
       +
                   </a></div>

     

       46
       46
       +
                   {%- endif -%}

     

       47
       47
       +
               {%- endif -%}

     

       48
       48
       +
               {%- endfor -%}

     

       49
       49
       +
               {%- for note in site.pages -%}

     

       50
       50
       +
               {%- if note.url != page.url -%}

     

       51
       51
       +
                   {%- if note.content contains wiki_link_title -%}

     

       52
       52
       +
                   <div class="related-group"><a href="{{note.url}}">

     

       53
       53
       +
                       <p class="related-title">{{ note.title }}</p>

     

       54
       54
       +
                       <p class="related-excerpt">{{ note.content | markdownify | strip_html | truncate: 140 }}</p>

     

       55
       55
       +
                   </a></div>

     

       56
       56
       +
                   {%- endif -%}

     

       57
       57
       +
               {%- endif -%}

     

       58
       58
       +
               {%- endfor -%}

     

       59
       59
       +
           </div>

     

       60
       60
       +
           <br/>

     

       61
       61
       +
       </div>

     

       62
       62
       +
       {%- endif -%}

+136

_includes/content.html

···

       1
       1
       +
       <!-- Parse internal links, external links, transclusions etc and manipuate the content to reflect it accordingly -->

     

       2
       2
       +
       {%- if page.content-type == "post" -%}

     

       3
       3
       +
       <ul class="tags">

     

       4
       4
       +
           {%- if page.status != nil and page.status != empty -%}

     

       5
       5
       +
           <li><a href="javascript:void(0)" class="tag"><b>Status:</b> <i>{{page.status | capitalize}}</i></a></li>

     

       6
       6
       +
           {%- endif -%}

     

       7
       7
       +
           <li><a href="/dates/#{{ page.date | date: '%d-%B-%Y' }}" class="tag">{{ page.date | date: '%B-%d-%Y' }}</a></li>

     

       8
       8
       +
           <!-- Loop through page categories and print them in tags -->

     

       9
       9
       +
           {%- for tag in page.tags -%}

     

       10
       10
       +
               <li><a href="/tags/#{{ tag }}" class="tag">{{ tag }}</a></li>

     

       11
       11
       +
           {%- endfor -%}

     

       12
       12
       +
       </ul>

     

       13
       13
       +
       {%- endif -%}

     

       14
       14
       +
       <div class="content">

     

       15
       15
       +
           {%- assign content_array = content | split:'[[' -%}

     

       16
       16
       +
           {%- assign external_link_delimiter = '::' -%}

     

       17
       17
       +
       

     

       18
       18
       +
           {%- assign link_joiner_delimiter = '$@' -%}

     

       19
       19
       +
           {%- for item in content_array -%}

     

       20
       20
       +
               {%- if forloop.index > 1 -%}

     

       21
       21
       +
                   {%- assign itemparts = item | split:']]' -%}

     

       22
       22
       +
                   {%- assign internal_link = itemparts[0] -%}

     

       23
       23
       +
                   {%- assign external_link = itemparts[0] | split:external_link_delimiter -%}

     

       24
       24
       +
                   {%- assign sidenote = itemparts[0] | split:sidenote_delimiter -%}

     

       25
       25
       +
                   

     

       26
       26
       +
                   {%- if external_link[1] == nil -%}

     

       27
       27
       +
                       {%- assign result_notes = site.notes | where: 'title',itemparts[0] -%}

     

       28
       28
       +
                       {%- assign result_posts = site.posts | where: 'title',itemparts[0] -%}

     

       29
       29
       +
                       {%- assign result_pages = site.pages | where: 'title',itemparts[0] -%}

     

       30
       30
       +
                       {%- assign internal_links = internal_links | append: link_joiner_delimiter | append: internal_link -%}

     

       31
       31
       +
                       {%- assign internal_urls = internal_urls | append: link_joiner_delimiter | append: result_notes[0].url | append: result_posts[0].url | append: result_pages[0].url -%}

     

       32
       32
       +
                   {%- else -%}

     

       33
       33
       +
                       {%- assign external_links = external_links | append: link_joiner_delimiter | append: external_link[0] -%}

     

       34
       34
       +
                       {%- assign external_urls = external_urls | append: link_joiner_delimiter | append: external_link[1] -%}

     

       35
       35
       +
                   {%- endif -%}

     

       36
       36
       +
               {%- endif -%}

     

       37
       37
       +
           {%- endfor -%}

     

       38
       38
       +
           

     

       39
       39
       +
           {%- assign internal_url_array = internal_urls | split:link_joiner_delimiter -%}

     

       40
       40
       +
           {%- assign internal_link_array = internal_links | split:link_joiner_delimiter -%}

     

       41
       41
       +
       

     

       42
       42
       +
           {%- assign external_url_array = external_urls | split:link_joiner_delimiter -%}

     

       43
       43
       +
           {%- assign external_link_array = external_links | split:link_joiner_delimiter -%}

     

       44
       44
       +
       

     

       45
       45
       +
           

     

       46
       46
       +
           {%- assign replaced_content = content -%}

     

       47
       47
       +
           {%- for title in internal_link_array -%}

     

       48
       48
       +
               {%- assign url = internal_url_array[forloop.index0] -%}

     

       49
       49
       +
               {%- if url == nil -%}

     

       50
       50
       +
                   {%- assign link_text = '<a style="background-color:#ffffc4;" href="' | append: 'javascript:void(0)' | append: '">' | append: title | append: '</a>' -%}

     

       51
       51
       +
               {%- elsif url == empty -%}

     

       52
       52
       +
                   {%- assign link_text = '<a style="background-color:#ffffc4;" href="' | append: 'javascript:void(0)' | append: '">' | append: title | append: '</a>' -%}

     

       53
       53
       +
               {%- else -%}

     

       54
       54
       +
                   {%- assign post = site.notes | where: 'title',title -%}

     

       55
       55
       +
                   {%- if post[0].title == nil -%}

     

       56
       56
       +
                   {%- assign post = site.posts | where: 'title',title -%}

     

       57
       57
       +
                   {%- endif -%}

     

       58
       58
       +
                   {%- assign excerpt = post[0].content | markdownify | strip_html | truncate: 500 | newline_to_br -%}

     

       59
       59
       +
                   {%- assign link_text = '<span class="tooltip"><a href="' | append: url | append: '">' | append: title | append: '</a><span class="right bottom"><span class="tooltip-title">' | append: title | append: '</span><br/><span class="tooltip-excerpt">' | append: excerpt | append: '</span><i></i></span></span>' -%}

     

       60
       60
       +
               {%- endif -%}

     

       61
       61
       +
               {%- assign bracket_link = '[[' | append: title | append: ']]' -%}

     

       62
       62
       +
               {%- assign replaced_content = replaced_content | replace: bracket_link,link_text -%}

     

       63
       63
       +
           {%- endfor -%}

     

       64
       64
       +
       

     

       65
       65
       +
           {%- assign sideNoteCounter = 0 -%}

     

       66
       66
       +
           {%- assign srsCounter = 0 -%}

     

       67
       67
       +
           {%- for title in external_link_array -%}

     

       68
       68
       +
               {%- assign url = external_url_array[forloop.index0] -%}

     

       69
       69
       +
               {%- if url contains "wikipedia.org" -%}

     

       70
       70
       +
                   {%- assign link_text = '<a href="' | append: url | append: '">' | append: title | append: '<sup ><i class="fa fa-wikipedia-w"></i>

     

       71
       71
       +
               </sup></a>' -%}

     

       72
       72
       +
               {%- elsif url contains "archive.org" -%}

     

       73
       73
       +
                   {%- assign link_text = '<a href="' | append: url | append: '">' | append: title | append: '<sup >Wayback</sup></a>' -%}

     

       74
       74
       +
               {%- elsif url contains "gutenberg.org" -%}

     

       75
       75
       +
                   {%- assign link_text = '<a href="' | append: url | append: '">' | append: title | append: '<sup >Guten</sup></a>' -%}

     

       76
       76
       +
               {%- elsif url contains "youtube.com" or url contains "youtu.be" -%}

     

       77
       77
       +
                   {%- assign link_text = '<a href="' | append: url | append: '">' | append: title | append: '<sup ><i class="fa fa-youtube"></i></sup></a>' -%}

     

       78
       78
       +
               {%- elsif url contains "twitter.com" -%}

     

       79
       79
       +
                   {%- assign link_text = '<a href="' | append: url | append: '">' | append: title | append: '<sup ><i class="fa fa-twitter"></i></sup></a>' -%}

     

       80
       80
       +
               {%- elsif url contains "github.com" or url contains "github.io" -%}

     

       81
       81
       +
                   {%- assign link_text = '<a href="' | append: url | append: '">' | append: title | append: '<sup ><i class="fa fa-github"></i></sup></a>' -%}

     

       82
       82
       +
               {%- elsif url == "highlight" -%}

     

       83
       83
       +
                   {%- assign link_text = '<span style="background-color: #DAEDFF; color: #555;">' | append: title | append: '</span>' -%}

     

       84
       84
       +
               {%- elsif url == "wrap" -%}

     

       85
       85
       +
                   {%- assign link_text = '<div class="boxit">' | append: title | append: '</div>' -%}

     

       86
       86
       +
               {%- elsif url == "img" -%}

     

       87
       87
       +
                   {%- assign link_text = '<img src="' | append: title | append: '"/>' -%}

     

       88
       88
       +
               {%- elsif url == "lsn" or url == "rsn" or url == "lsn-transclude" or url == "rsn-transclude"  or url == "lmn" or url == "rmn" or url == "lmn-transclude" or url == "rmn-transclude" -%}

     

       89
       89
       +
                   {%- assign toggleLabel = "" -%}

     

       90
       90
       +
                   {%- assign sideNoteNum = "" -%}

     

       91
       91
       +
                   {%- if url contains "lsn" -%}

     

       92
       92
       +
                       {%- assign noteType = "sn-left" -%}

     

       93
       93
       +
                       {%- assign sideNoteNum = "sidenote-number" -%}

     

       94
       94
       +
                   {%- elsif url contains "rsn" -%}

     

       95
       95
       +
                       {%- assign noteType = "sn-right" -%}

     

       96
       96
       +
                       {%- assign sideNoteNum = "sidenote-number" -%}

     

       97
       97
       +
                   {%- elsif url contains "lmn" -%}

     

       98
       98
       +
                       {%- assign noteType = "mn-left" -%}

     

       99
       99
       +
                       {%- assign toggleLabel = "&#8853;" -%}

     

       100
       100
       +
                   {%- elsif url contains "rmn" -%}

     

       101
       101
       +
                       {%- assign noteType = "mn-right" -%}

     

       102
       102
       +
                       {%- assign toggleLabel = "&#8853;" -%}

     

       103
       103
       +
                   {%- endif -%}

     

       104
       104
       +
       

     

       105
       105
       +
       

     

       106
       106
       +
                   {%- if url contains "transclude" -%}

     

       107
       107
       +
                       {%- assign post = site.notes | where: 'title',title -%}

     

       108
       108
       +
                       {%- if post[0].title == nil -%}

     

       109
       109
       +
                       {%- assign post = site.posts | where: 'title',title -%}

     

       110
       110
       +
                       {%- endif -%}

     

       111
       111
       +
                       {%- assign excerpt = post[0].content | strip_html | truncate: 280 -%}

     

       112
       112
       +
                       {%- assign link_text = '<label for="' | append: url | append: '-' | append: sideNoteCounter | append: '" class="margin-toggle ' | append: sideNoteNum | append: ' ">' | append: toggleLabel | append: '</label><input type="checkbox" id="' | append: url | append: '-' | append: sideNoteCounter | append: '" class="margin-toggle"/><span class="' | append: noteType | append: '"><a href="' | append: post[0].url  | append: '"> <span style="background-color: #ffffc4; color: #555;">Transclusion</span><br/><b>' | append: title | append: '</b><br/>' | append: excerpt | append: '</a></span>' -%}

     

       113
       113
       +
                   {%- else -%}

     

       114
       114
       +
                       {%- assign link_text = '<label for="' | append: url | append: '-' | append: sideNoteCounter | append: '" class="margin-toggle ' | append: sideNoteNum | append: ' ">' | append: toggleLabel | append: '</label><input type="checkbox" id="' | append: url | append: '-' | append: sideNoteCounter | append: '" class="margin-toggle"/><span class="' | append: noteType | append: '">' | append: title | append: '</span>' -%}

     

       115
       115
       +
                   {%- endif -%}

     

       116
       116
       +
       

     

       117
       117
       +
                   {%- assign sideNoteCounter = sideNoteCounter | plus:1 -%}

     

       118
       118
       +
               {%- elsif url == "srs" -%}

     

       119
       119
       +
                  {%- assign link_text = '<label for="' | append: url | append: '-' | append: srsCounter | append: '" class="srs-toggle "><svg class="srs-svg" x="0px" y="0px" height="20" width="18" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><path fill="none" d="M41.648,12.407c-0.186-0.286-0.5-0.457-0.841-0.457c-0.191,0-0.379,0.056-0.542,0.162l-5.235,3.396l8.239-0.602  L41.648,12.407z"/><path fill="none" d="M28.45,19.776L8.471,32.737c-0.462,0.3-0.594,0.921-0.294,1.384l23.832,36.736l-3.638-49.85  C28.34,20.584,28.379,20.176,28.45,19.776z"/><path d="M40.055,81.425l0.127-0.082l-1.181,0.086C39.319,81.615,39.731,81.635,40.055,81.425z"/><path d="M94.964,32.733c-0.616-1.185-1.656-2.06-2.93-2.462l-15.315-4.845l-0.576-7.905c-0.2-2.721-2.604-4.834-5.352-4.623  l-22.969,1.676l-2.818-4.344c-0.925-1.428-2.495-2.28-4.197-2.28c-0.966,0-1.907,0.279-2.719,0.806L6.294,29.381  c-2.313,1.5-2.974,4.603-1.473,6.916l30.496,47.008c0.926,1.428,2.495,2.28,4.198,2.28c0.965,0,1.905-0.278,2.717-0.806l1.04-0.675  l28.847,9.123c0.491,0.155,0.999,0.233,1.511,0.233c2.191,0,4.105-1.404,4.764-3.491l16.902-53.424  C95.697,35.273,95.58,33.919,94.964,32.733z M40.266,12.112c0.163-0.106,0.35-0.162,0.542-0.162c0.341,0,0.656,0.17,0.841,0.457  l1.622,2.5l-8.239,0.602L40.266,12.112z M8.177,34.121c-0.3-0.463-0.168-1.083,0.294-1.384l19.979-12.96  c-0.071,0.399-0.11,0.808-0.08,1.23l3.638,49.85L8.177,34.121z M35.678,66.191L32.36,20.716c-0.04-0.55,0.375-1.031,0.924-1.071  l12.471-0.909l4.552-0.332l20.852-1.52c0.519,0,0.955,0.408,0.993,0.928l0.461,6.315L55.9,18.841  c-0.49-0.155-0.997-0.234-1.508-0.234c-1.206,0-2.32,0.437-3.195,1.169c-0.715,0.597-1.274,1.385-1.571,2.324l-0.554,1.75  L35.678,66.191z M91.48,35.34l-11.408,36.06l-2.057,6.5l-3.438,10.867c-0.194,0.614-0.798,0.794-1.253,0.647l-25.706-8.13  l-1.247-0.394l-3.694-1.169l-5.488-1.735c-0.343-0.108-0.514-0.355-0.586-0.493c-0.061-0.116-0.137-0.342-0.093-0.617  c0.007-0.047,0.011-0.093,0.026-0.143l15.354-48.536l1.547-4.891c0.005-0.016,0.016-0.026,0.021-0.041  c0.166-0.451,0.579-0.659,0.932-0.659c0.101,0,0.202,0.016,0.301,0.047l18.233,5.768l4.105,1.299l13.795,4.364  c0.345,0.109,0.516,0.356,0.588,0.494C91.486,34.715,91.59,34.997,91.48,35.34z"/><path d="M40.055,81.425c-0.323,0.21-0.735,0.19-1.054,0.004l1.181-0.086L40.055,81.425z"/></svg></label><input type="checkbox" id="' | append: url | append: '-' | append: srsCounter | append: '" class="srs-toggle"/><span class="spaced-rep"><span style="font-size: 16px; color: #555;"><u><strong>Flashcard</strong></u></span><br/>' | append: title | append: '</span>' -%}

     

       120
       120
       +
                  {%- assign srsCounter = srsCounter | plus:1 -%}

     

       121
       121
       +
               {%- elsif url == "todo" -%}

     

       122
       122
       +
                   {%- assign todo_list = title | split:';' -%}

     

       123
       123
       +
                   {%- assign link_text = "<h4>::TODO::</h4><ul style='padding-left: 20px; margin-top: -20px; list-style-type:decimal;'>" -%}

     

       124
       124
       +
                   {%- for list_items in todo_list -%}

     

       125
       125
       +
                       {%- assign link_text = link_text | append: '<li>' | append: list_items | append: '</li>' -%}

     

       126
       126
       +
                   {%- endfor -%}

     

       127
       127
       +
                   {%- assign link_text = link_text | append: '</ul>' -%}

     

       128
       128
       +
               {%- else -%}

     

       129
       129
       +
               {%- assign link_text = '<a href="' | append: url | append: '">' | append: title | append: '</a>' -%}

     

       130
       130
       +
               {%- endif -%}

     

       131
       131
       +
               {%- assign bracket_link = '[[' | append: title | append: external_link_delimiter | append: url | append: ']]' -%}

     

       132
       132
       +
               {%- assign replaced_content = replaced_content | replace: bracket_link,link_text -%}

     

       133
       133
       +
           {%- endfor -%}

     

       134
       134
       +
       

     

       135
       135
       +
           {{ replaced_content }}

     

       136
       136
       +
       </div>

+24

_includes/contextmenu.html

···

       1
       1
       +
       {%- if page.permalink == "/" or page.permalink == "/notes" -%}

     

       2
       2
       +
       <nav class="context-menu" id="context-menu">

     

       3
       3
       +
           <ul class="context-menu__items">

     

       4
       4
       +
             <li class="context-menu__item">

     

       5
       5
       +
                   <a href="#" class="context-menu__link" data-action="backlinks">

     

       6
       6
       +
                     View Linked References

     

       7
       7
       +
                   </a>

     

       8
       8
       +
             </li>

     

       9
       9
       +
             <li class="context-menu__item">

     

       10
       10
       +
                   <a href="#" class="context-menu__link" data-action="related-posts">

     

       11
       11
       +
                     View Related Posts

     

       12
       12
       +
                   </a>

     

       13
       13
       +
             </li>

     

       14
       14
       +
             <li class="context-menu__item">

     

       15
       15
       +
               <a href="#" class="context-menu__link" data-action="new-tab">

     

       16
       16
       +
                 Open in new tab

     

       17
       17
       +
               </a>

     

       18
       18
       +
             </li>

     

       19
       19
       +
           </ul>

     

       20
       20
       +
       </nav>

     

       21
       21
       +
       <nav class="context-menu-res" id="context-menu-res">

     

       22
       22
       +
       </nav>

     

       23
       23
       +
       <script src="/assets/js/contextmenu.js"></script>

     

       24
       24
       +
       {%- endif -%}

+28

_includes/feed.html

···

       1
       1
       +
       {%- if page.permalink == "/" -%}

     

       2
       2
       +
           {%- for item in site.posts -%}

     

       3
       3
       +
               <div class="feed-title-excerpt-block disable-select" data-url="{{site.url}}{{item.url}}">

     

       4
       4
       +
                   <a href="{{item.url}}" style="text-decoration: none; color: #555555;">

     

       5
       5
       +
                   {%- if item.status == "Ongoing" or item.status == "ongoing" -%}

     

       6
       6
       +
                   <ul style="padding-left: 20px; margin-top: 20px;" class="tags">

     

       7
       7
       +
                   <li style="padding: 0 5px; border-radius: 10px;" class="tag"><b>Status: </b>{{item.status | capitalize }}</li>

     

       8
       8
       +
                   </ul>

     

       9
       9
       +
                   <p style="margin-top: 0px;" class="feed-title">{{ item.title }}</p>

     

       10
       10
       +
                   {%- else -%}

     

       11
       11
       +
                   <p class="feed-title">{{ item.title }}</p>

     

       12
       12
       +
                   {%- endif -%}

     

       13
       13
       +
                   <p class="feed-excerpt">{{ item.content | strip_html | strip | escape | truncate: 200}}</p>

     

       14
       14
       +
                   </a>

     

       15
       15
       +
               </div>

     

       16
       16
       +
           {%- endfor -%}

     

       17
       17
       +
       {%- endif -%}

     

       18
       18
       +
       

     

       19
       19
       +
       {%- if page.permalink == "/notes" -%}

     

       20
       20
       +
           {%- for item in site.notes -%}

     

       21
       21
       +
           <div class="feed-title-excerpt-block disable-select" data-url="{{site.url}}{{item.url}}">

     

       22
       22
       +
               <a href="{{item.url}}" style="text-decoration: none; color: #333333;">

     

       23
       23
       +
               <p class="feed-title">{{ item.title }}</p>

     

       24
       24
       +
               <p class="feed-excerpt">{{ item.content | strip_html | strip | escape | truncate: 200 }}</p>

     

       25
       25
       +
               </a>

     

       26
       26
       +
           </div>

     

       27
       27
       +
           {%- endfor -%}

     

       28
       28
       +
       {%- endif -%}

_includes/footer.html

···

       1
       1
       +
       <div id="copyright">

     

       2
       2
       +
           <p id="copyright-notice">© Raghuveer S.</p>

     

       3
       3
       +
       </div>

+169

_includes/header.html

···

       1
       1
       +
       {%- if page.content-type == "notes" or page.permalink == "/notes" -%}

     

       2
       2
       +
       <header>

     

       3
       3
       +
           <div class="notes-page-subheader disable-select">

     

       4
       4
       +
               <div class="notes-page-site-heading">

     

       5
       5
       +
                   <p><a href="/index.html">{{site.title}}</a></p>

     

       6
       6
       +
               </div>

     

       7
       7
       +
               

     

       8
       8
       +
               <div class="notes-page-main-heading">

     

       9
       9
       +
                   <p class="notes-page-heading"><a href="/notes">Notes and Thoughts</a></p>

     

       10
       10
       +
                   <p class="notes-page-tagline">The journey from raw thoughts to <a href="/">blogposts</a></p>

     

       11
       11
       +
               </div>

     

       12
       12
       +
           </div>

     

       13
       13
       +
           <div class="searchbar search-container">

     

       14
       14
       +
               <i class="fa fa-search" aria-hidden="true"></i>

     

       15
       15
       +
               <label for="search-input"></label>

     

       16
       16
       +
               <input type="text" oninput="changeResultContainerDisp(this.value)" id="search-input" autocomplete="off" placeholder="Search Notes..."/>

     

       17
       17
       +
               <ul id="results-container"></ul>

     

       18
       18
       +
           </div>

     

       19
       19
       +
           <script src="/assets/js/simple-jekyll-search.min.js"></script>

     

       20
       20
       +
           <script>

     

       21
       21
       +
               function changeResultContainerDisp(val) {

     

       22
       22
       +
                   if (val) {

     

       23
       23
       +
                       document.getElementById("results-container").style.display = "block";

     

       24
       24
       +
                       document.getElementById("search-input").addEventListener('blur', function() {

     

       25
       25
       +
                           document.addEventListener('click', function(event) {

     

       26
       26
       +
                               var isClickInside = document.getElementById("results-container").contains(event.target);

     

       27
       27
       +
                               if (!isClickInside) {

     

       28
       28
       +
                                   document.getElementById("results-container").style.display = "none";

     

       29
       29
       +
                               }

     

       30
       30
       +
                           })

     

       31
       31
       +
                       }) 

     

       32
       32
       +
                   }  else {

     

       33
       33
       +
                       document.getElementById("results-container").style.display = "none";

     

       34
       34
       +
                   }

     

       35
       35
       +
               }

     

       36
       36
       +
               var sjs = SimpleJekyllSearch({

     

       37
       37
       +
                           searchInput: document.getElementById('search-input'),

     

       38
       38
       +
                           resultsContainer: document.getElementById('results-container'),

     

       39
       39
       +
                           json: '/search_notes.json',

     

       40
       40
       +
                           searchResultTemplate: '<li class="search_res" style="list-style: none;"><a href="{{ site.url }}{url}" style="text-decoration: none; color: #333333;"><p style="font-size: 1.0rem; font-family: "Inter !important"; font-weight: 600;">{title}</p></a></li>',

     

       41
       41
       +
                           noResultsText: 'No results found',

     

       42
       42
       +
                           fuzzy: false,

     

       43
       43
       +
                           limit: 4

     

       44
       44
       +
                           })   

     

       45
       45
       +
           </script>

     

       46
       46
       +
           <div class="notes-page-subheader disable-select" id="scroll-head">

     

       47
       47
       +
               {%- if page.permalink == "/notes" -%}

     

       48
       48
       +
               <div class="back-icon" onclick="window.location.assign('/');">

     

       49
       49
       +
                   <svg class="ripple" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">

     

       50
       50
       +
                       <path d="M0 0h24v24H0z" fill="none"/>

     

       51
       51
       +
                       <path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z"/>

     

       52
       52
       +
                   </svg>

     

       53
       53
       +
               </div>

     

       54
       54
       +
               <p class="back-p">Home</p>

     

       55
       55
       +
               {%- else -%}

     

       56
       56
       +
               <div class="back-icon" onclick="window.location.assign('/notes');">

     

       57
       57
       +
                   <svg class="ripple" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">

     

       58
       58
       +
                       <path d="M0 0h24v24H0z" fill="none"/>

     

       59
       59
       +
                       <path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z"/>

     

       60
       60
       +
                   </svg>

     

       61
       61
       +
               </div>

     

       62
       62
       +
               <p class="back-p">Notes</p>

     

       63
       63
       +
               {%- endif -%}

     

       64
       64
       +
       </header>

     

       65
       65
       +
       {%- else -%}

     

       66
       66
       +
       <header>

     

       67
       67
       +
           <div class="dashboard disable-select">

     

       68
       68
       +
               <div class="site-heading profile-board-col">

     

       69
       69
       +
                  <h4 class="medium"><a href="/">{{site.title}}</a></h4>

     

       70
       70
       +
               </div>

     

       71
       71
       +
               <div class="userboard profile-board-col">

     

       72
       72
       +
                   <div class="username">

     

       73
       73
       +
                       <p class="title-sans"><a href="/about" style="text-decoration: none;">{{site.name}}</a></p>

     

       74
       74
       +
                   </div>

     

       75
       75
       +
                   <div class="userdesc">

     

       76
       76
       +
                       <p class="title-sans">Programmer. (<strong>Many Interests:</strong> Philosophy & Mathematics)</p>

     

       77
       77
       +
                   </div> 

     

       78
       78
       +
                   <div class="link-to-notes">

     

       79
       79
       +
                       <svg height="16" width="15" viewBox="0 0 24 24" class="anchor-link">

     

       80
       80
       +
                           <path d="M11.96 14.945c-.067 0-.136-.01-.203-.027-1.13-.318-2.097-.986-2.795-1.932-.832-1.125-1.176-2.508-.968-3.893s.942-2.605 2.068-3.438l3.53-2.608c2.322-1.716 5.61-1.224 7.33 1.1.83 1.127 1.175 2.51.967 3.895s-.943 2.605-2.07 3.438l-1.48 1.094c-.333.246-.804.175-1.05-.158-.246-.334-.176-.804.158-1.05l1.48-1.095c.803-.592 1.327-1.463 1.476-2.45.148-.988-.098-1.975-.69-2.778-1.225-1.656-3.572-2.01-5.23-.784l-3.53 2.608c-.802.593-1.326 1.464-1.475 2.45-.15.99.097 1.975.69 2.778.498.675 1.187 1.15 1.992 1.377.4.114.633.528.52.928-.092.33-.394.547-.722.547z" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>

     

       81
       81
       +
                           <path d="M7.27 22.054c-1.61 0-3.197-.735-4.225-2.125-.832-1.127-1.176-2.51-.968-3.894s.943-2.605 2.07-3.438l1.478-1.094c.334-.245.805-.175 1.05.158s.177.804-.157 1.05l-1.48 1.095c-.803.593-1.326 1.464-1.475 2.45-.148.99.097 1.975.69 2.778 1.225 1.657 3.57 2.01 5.23.785l3.528-2.608c1.658-1.225 2.01-3.57.785-5.23-.498-.674-1.187-1.15-1.992-1.376-.4-.113-.633-.527-.52-.927.112-.4.528-.63.926-.522 1.13.318 2.096.986 2.794 1.932 1.717 2.324 1.224 5.612-1.1 7.33l-3.53 2.608c-.933.693-2.023 1.026-3.105 1.026z" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>

     

       82
       82
       +
                       </svg>

     

       83
       83
       +
                       <a href="/notes">raghuveer.net/notes</a>

     

       84
       84
       +
                   </div>

     

       85
       85
       +
               </div>

     

       86
       86
       +
           </div>

     

       87
       87
       +
           <div class="avatar disable-select" title="click me to know more">

     

       88
       88
       +
               <a class="avatar-link" href="/about">

     

       89
       89
       +
                   <img src="/assets/img/profile.png" class="avatar-img" alt="avatar"/>

     

       90
       90
       +
               </a>

     

       91
       91
       +
           </div>

     

       92
       92
       +
           <div class="main-site-subheader menu disable-select">

     

       93
       93
       +
               <div class="home">

     

       94
       94
       +
                   <a style="text-decoration: none;" href="/about">

     

       95
       95
       +
                       <svg class="icon-home" width="18" height="19" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">

     

       96
       96
       +
                           <path d="M20.9777 21.6138V19.6138C20.9777 18.553 20.5563 17.5356 19.8061 16.7854C19.056 16.0353 18.0386 15.6138 16.9777 15.6138H8.97768C7.91682 15.6138 6.8994 16.0353 6.14926 16.7854C5.39911 17.5356 4.97768 18.553 4.97768 19.6138V21.6138"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

     

       97
       97
       +
                           <path d="M12.9777 11.6138C15.1868 11.6138 16.9777 9.82298 16.9777 7.61385C16.9777 5.40471 15.1868 3.61385 12.9777 3.61385C10.7685 3.61385 8.97768 5.40471 8.97768 7.61385C8.97768 9.82298 10.7685 11.6138 12.9777 11.6138Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

     

       98
       98
       +
                       </svg>

     

       99
       99
       +
                       <p class="home-p">About</p>  

     

       100
       100
       +
                   </a>

     

       101
       101
       +
               </div>

     

       102
       102
       +
               <div class="categories">

     

       103
       103
       +
                   <a style="text-decoration: none;" href="/tags">

     

       104
       104
       +
                   <svg class="icon-category" width="18" height="19" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">

     

       105
       105
       +
                       <path d="M4 9.5H20"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

     

       106
       106
       +
                       <path d="M4 15.5H20"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

     

       107
       107
       +
                       <path d="M10 3.5L8 21.5"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

     

       108
       108
       +
                       <path d="M16 3.5L14 21.5"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

     

       109
       109
       +
                   </svg>                               

     

       110
       110
       +
                   <p class="categories-p">Tags</p>

     

       111
       111
       +
                   </a>

     

       112
       112
       +
               </div>

     

       113
       113
       +
               <div class="rss">

     

       114
       114
       +
                   <a style="text-decoration: none;" href="/feed.xml">

     

       115
       115
       +
                       <svg class="icon-rss" width="18" height="19" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">

     

       116
       116
       +
                           <path d="M4 11.5C6.38695 11.5 8.67613 12.4482 10.364 14.136C12.0518 15.8239 13 18.1131 13 20.5"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

     

       117
       117
       +
                           <path d="M4 4.5C8.24346 4.5 12.3131 6.18571 15.3137 9.18629C18.3143 12.1869 20 16.2565 20 20.5"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

     

       118
       118
       +
                           <path d="M5 20.5C5.55228 20.5 6 20.0523 6 19.5C6 18.9477 5.55228 18.5 5 18.5C4.44772 18.5 4 18.9477 4 19.5C4 20.0523 4.44772 20.5 5 20.5Z"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

     

       119
       119
       +
                       </svg>    

     

       120
       120
       +
                   <p class="rss-p">RSS</p>

     

       121
       121
       +
                   </a>

     

       122
       122
       +
               </div>

     

       123
       123
       +
           </div>

     

       124
       124
       +
           <div class="searchbar search-container">

     

       125
       125
       +
               <i class="fa fa-search" aria-hidden="true"></i>

     

       126
       126
       +
               <label for="search-input"></label>

     

       127
       127
       +
               <input type="text" oninput="changeResultContainerDisp(this.value)" id="search-input" autocomplete="off" placeholder="Search Knowledge Continuum..."/>

     

       128
       128
       +
               <ul id="results-container"></ul>

     

       129
       129
       +
           </div>

     

       130
       130
       +
           <script src="/assets/js/simple-jekyll-search.min.js"></script>

     

       131
       131
       +
           <script>

     

       132
       132
       +
               function changeResultContainerDisp(val) {

     

       133
       133
       +
                   if (val) {

     

       134
       134
       +
                       document.getElementById("results-container").style.display = "block";

     

       135
       135
       +
                       document.getElementById("search-input").addEventListener('blur', function() {

     

       136
       136
       +
                           document.addEventListener('click', function(event) {

     

       137
       137
       +
                               var isClickInside = document.getElementById("results-container").contains(event.target);

     

       138
       138
       +
                               if (!isClickInside) {

     

       139
       139
       +
                                   document.getElementById("results-container").style.display = "none";

     

       140
       140
       +
                               }

     

       141
       141
       +
                           })

     

       142
       142
       +
                       }) 

     

       143
       143
       +
                   }  else {

     

       144
       144
       +
                       document.getElementById("results-container").style.display = "none";

     

       145
       145
       +
                   }

     

       146
       146
       +
               }

     

       147
       147
       +
               var sjs = SimpleJekyllSearch({

     

       148
       148
       +
                           searchInput: document.getElementById('search-input'),

     

       149
       149
       +
                           resultsContainer: document.getElementById('results-container'),

     

       150
       150
       +
                           json: '/search.json',

     

       151
       151
       +
                           searchResultTemplate: '<li class="search_res" style="list-style: none;"><a href="{{ site.url }}{url}" style="text-decoration: none; color: #555555;"><p style="font-size: 1.0rem; font-family: "Inter !important"; font-weight: 600;">{title}</p></a></li>',

     

       152
       152
       +
                           noResultsText: 'No results found',

     

       153
       153
       +
                           fuzzy: false,

     

       154
       154
       +
                           limit: 4

     

       155
       155
       +
                           })   

     

       156
       156
       +
           </script>

     

       157
       157
       +
           {%- if page.permalink != "/" -%}

     

       158
       158
       +
           <div class="main-site-subheader disable-select" id="scroll-head">

     

       159
       159
       +
               <div class="back-icon" onclick="window.location.assign('/');">

     

       160
       160
       +
                   <svg class="ripple" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">

     

       161
       161
       +
                       <path d="M0 0h24v24H0z" fill="none"/>

     

       162
       162
       +
                       <path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z"/>

     

       163
       163
       +
                   </svg>

     

       164
       164
       +
               </div>

     

       165
       165
       +
               <p class="back-p">Home</p>    

     

       166
       166
       +
           </div>

     

       167
       167
       +
           {%- endif -%}

     

       168
       168
       +
       </header>

     

       169
       169
       +
       {%- endif -%}

+63

_layouts/post.html

···

       1
       1
       +
       ---

     

       2
       2
       +
       ---

     

       3
       3
       +
       

     

       4
       4
       +
       <!DOCTYPE html>

     

       5
       5
       +
       <html lang="en">

     

       6
       6
       +
       <head>

     

       7
       7
       +
           <meta content="width=device-width, initial-scale=1" name="viewport" />

     

       8
       8
       +
           <meta content="Knowledge Continuum" property="og:site_name"/>

     

       9
       9
       +
           <meta content="A non-linear thread of important ideas weaved together to explore and understand the fabric of knowledge." property="og:description">

     

       10
       10
       +
           <meta content="{{ site.url }}/about/" property="article:author">

     

       11
       11
       +
       

     

       12
       12
       +
           {%- if page.title -%}

     

       13
       13
       +
           <meta content="{{ page.title }}" property="og:title">

     

       14
       14
       +
           <meta content="article" property="og:type">

     

       15
       15
       +
           <meta content="{{ site.url }}{{ page.url }}" property="og:url">

     

       16
       16
       +
           {%- else -%}

     

       17
       17
       +
           <meta content="website" property="og:type">

     

       18
       18
       +
           <meta content="{{ site.url }}{{ page.url }}" property="og:url">

     

       19
       19
       +
           {%- endif -%}

     

       20
       20
       +
       

     

       21
       21
       +
           <title>{{site.title}}</title>

     

       22
       22
       +
       

     

       23
       23
       +
           <link rel="canonical" href="{{site.url}}{{page.url}}"/>

     

       24
       24
       +
           <link rel="apple-touch-icon" href="/assets/img/profile.png">

     

       25
       25
       +
           <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>

     

       26
       26
       +
       

     

       27
       27
       +
           <link rel="icon" href="/assets/img/favicon.png" type="image/png" sizes="16x16"/>

     

       28
       28
       +
           <link href="/assets/css/style.css" rel="stylesheet" media="all" class="default"/>

     

       29
       29
       +
       

     

       30
       30
       +
           <!--[if IE]>

     

       31
       31
       +
               <link href="/assets/css/ie-target.css" rel="stylesheet" type="text/css"/>

     

       32
       32
       +
           <![endif]-->

     

       33
       33
       +
           <!--<link href="/assets/css/prism.css" rel="stylesheet" />-->

     

       34
       34
       +
           <link rel="alternate" type="application/rss+xml" href="{{ site.url }}/feed.xml">

     

       35
       35
       +
       </head>

     

       36
       36
       +
       

     

       37
       37
       +
       <body>

     

       38
       38
       +
           <div class="container">                    

     

       39
       39
       +
               <div class = "box">

     

       40
       40
       +
                   {%- include header.html -%}

     

       41
       41
       +
                   {%- include feed.html -%}

     

       42
       42
       +
       

     

       43
       43
       +
                   {%- if page.content-type == "notes" or page.content-type == "post" -%}

     

       44
       44
       +
                   <main>

     

       45
       45
       +
                       <h1>{{page.title}}</h1>

     

       46
       46
       +
                       {%- include content.html -%}

     

       47
       47
       +
                       {%- include backlinks.html -%}

     

       48
       48
       +
                       {%- include related.html -%}

     

       49
       49
       +
                   </main>

     

       50
       50
       +
                   {%- endif -%}

     

       51
       51
       +
                   {%- include footer.html -%}

     

       52
       52
       +
               </div>

     

       53
       53
       +
               <button class="scroll-to-top" id="scroll-to-top"><i class="fa fa-chevron-up"></i></button>

     

       54
       54
       +
           </div>

     

       55
       55
       +
           <!--<script src="/assets/js/prism.js"></script>-->

     

       56
       56
       +
           <script>

     

       57
       57
       +
               document.getElementById("scroll-to-top").addEventListener("click", function() {

     

       58
       58
       +
                   window.scrollTo({top: 0, left: 0, behavior: 'smooth'});

     

       59
       59
       +
               });

     

       60
       60
       +
           </script>

     

       61
       61
       +
           {%- include contextmenu.html -%}

     

       62
       62
       +
       </body>

     

       63
       63
       +
       </html>

_layouts/stylesheet.html

···

       1
       1
       +
       ---

     

       2
       2
       +
       layout: none

     

       3
       3
       +
       ---

     

       4
       4
       +
       {{ content | scssify }}

+14

_notes/Comparison based on accomplishment does not have a baseline.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       tags: virtue life

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       I would just note that you have an image of some "great X" that you are trying to live up to, when really, there is no frame of reference to standardize a measure for X. Point being you and your circumstances are completely unique[[Warren Buffet talks about the idea of maintaining an inner score card of principles to escape this girardian mimetic rat-race::rmn]]. Also, James Richardon, the poet, says this beautifully in his book "Vectors: Aphorisms and 10 Second Essays": 

     

       6
       6
       +
       

     

       7
       7
       +
       {:.boxit .serif .medium}

     

       8
       8
       +
       > “He wants to know what the best is so he can be superior to everything at once by seeing that the best isn’t perfect”. 

     

       9
       9
       +
       

     

       10
       10
       +
       One way to handle this would be to realize the fragility of the epistemic confidence acquired as a result of accomplishment based superiority. Socio-cultural structure like Humility can help with this a lot. It is to be noted that , and not the false pretension to decieve each other into playing the comparison and pseudo-superiority game, which would just defeat the purpose of seeing the uniqueness of circumstance.

     

       11
       11
       +
       

     

       12
       12
       +
       ## References

     

       13
       13
       +
       

     

       14
       14
       +
       Warren Buffet. (Unknown). *[[The Inner Scorecard::https://fs.blog/2016/08/the-inner-scorecard/]]*

+42

_notes/Cultural artefacts to improve the resonance and life expectancy of your writing.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       tags: writing

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       Cultural additions like one's philosophical inclinations, directed social interactions through common social artefacts, etc can add personal touch to the essays,which not only elevates the engagement but also the life expectancy of an essay. Take any essay by Orwell from [[As I Please::https://www.orwell.ru/library/articles/As_I_Please/english/]] during his time in The Tribune, or his other [[essays::https://www.orwell.ru/library/essays/index_en]].

     

       6
       6
       +
       

     

       7
       7
       +
       **Example:** Apart from the quirky and chirpy attitude, what makes this this [[Application to New Yorker for a Job::https://fs.blog/2014/05/eudora-welty-to-the-new-yorker-the-best-job-application-ever/]] by Eudora Welty so memorable in my opinion is her use of common social artefacts like subtle mention of her background and its significance in how it relates to her being in this position right now; 

     

       8
       8
       +
       

     

       9
       9
       +
       {:.boxit .serif .small-medium}

     

       10
       10
       +
       > ...I am 23 years old, six weeks on the loose in N.Y. However, I was a New Yorker for a whole year in 1930– 31 while attending advertising classes in Columbia’s School of Business. Actually I am a southerner, from Mississippi, the nation’s most backward state. Ramifications include Walter H. Page, who, unluckily for me, is no longer connected with Doubleday-Page, which is no longer Doubleday-Page, even. I have a B.A. (’ 29) from the University of Wisconsin, where I majored in English without a care in the world. For the last eighteen months I was languishing in my own office in a radio station in Jackson, Miss., writing continuities, dramas, mule feed advertisements, santa claus talks, and life insurance playlets; now I have given that up....

     

       11
       11
       +
       

     

       12
       12
       +
       The witty use of what I like to call a socio-cultural confabulation in the form of a movie review and a relatable but madeup word that is also original in a sense.

     

       13
       13
       +
       

     

       14
       14
       +
       {:.boxit .serif .small-medium}

     

       15
       15
       +
       > ...As to what I might do for you— I have seen an untoward amount of picture galleries and 15¢ movies lately, and could review them with my old prosperous detachment, I think; in fact, I recently coined a general word for Matisse’s pictures after seeing his latest at the Marie Harriman: concubineapple. That shows you how my mind works—quick, and away from the point. I read simply voraciously, and can drum up an opinion afterwards...

     

       16
       16
       +
       

     

       17
       17
       +
       The mention of India print and subtle showcase of how she knows the struggles in the industry without any explicit mention.

     

       18
       18
       +
       

     

       19
       19
       +
       {:.boxit .serif .small-medium}

     

       20
       20
       +
       > ...Since I have bought an India print, and a large number of phonograph records from a Mr. Nussbaum who picks them up, and a Cezanne Bathers one inch long (that shows you I read e. e. cummings I hope), I am anxious to have an apartment, not to mention a small portable phonograph. How I would like to work for you! A little paragraph each morning— a little paragraph each night, if you can’t hire me from daylight to dark, although I would work like a slave. I can also draw like Mr. Thurber, in case he goes off the deep end. I have studied flower painting...

     

       21
       21
       +
       

     

       22
       22
       +
       And the final invocation of the extremely common social contruct i.e., ***the leprechaun throw.***

     

       23
       23
       +
       

     

       24
       24
       +
       {:.boxit .serif .small-medium}

     

       25
       25
       +
       > There is no telling where I may apply, if you turn me down; I realize this will not phase you, but consider my other alternative: the U of N.C. offers for $12.00 to let me dance in Vachel Lindsay’s Congo. I congo on. I rest my case, repeating that I am a hard worker.

     

       26
       26
       +
       

     

       27
       27
       +
       This may not have been the best application in a formal sense, but the reason people go to it is probably because what it reminds them of --- the cultural nostalgia (the shared social artefact).

     

       28
       28
       +
       

     

       29
       29
       +
       Another type of common artefact is sincere immitation of great works, the sincere admiration can help with the remembrance. Related: [[Sincere imitation is authentic]]

     

       30
       30
       +
       

     

       31
       31
       +
       ### Addendum

     

       32
       32
       +
       

     

       33
       33
       +
       Incorporation of common artefacts might also help with remebering and understanding it easily when you read them years later. To put it succintly, it help you [[Write so your future self can remember]]

     

       34
       34
       +
       

     

       35
       35
       +
       

     

       36
       36
       +
       ## References

     

       37
       37
       +
       

     

       38
       38
       +
       Orwell, George. (1930s). _[[As I Please, The Tribune::https://www.orwell.ru/library/articles/As_I_Please/english/]]_

     

       39
       39
       +
       

     

       40
       40
       +
       Virginia Woolf. (1921). _[[Monday and Tuesday::http://www.gutenberg.org/files/29220/29220-h/29220-h.htm]]_ 

     

       41
       41
       +
       

     

       42
       42
       +
       Welty, Eudora. _[[Application to New Yorker for a Job::https://fs.blog/2014/05/eudora-welty-to-the-new-yorker-the-best-job-application-ever/]]_

+37

_notes/Dark theme adoption as a function of cognitive exhaustion.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       tags: ux programming sleep cognition

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       Sensitivity to brightness can occur due to number of issues ranging from corneal issues like infections and abrasions, to dry eye, to concussions, to allergies; eg: Keratoconus, Uveitis, Keratitis, Preeclampsia. Google claims in its [[android developer guide that dark themes can improve visibility for people who have low vision and are sensititive to brightness::https://developer.android.com/guide/topics/ui/look-and-feel/darktheme]], but people I have spoken to on this topic (n≈20) had normal vision and normal range of sensitivity to light. 

     

       6
       6
       +
       

     

       7
       7
       +
       Even people with mild eye issues[[Jason Harrison, UBC - People with astigmatism (approximately 50% of the population) find it harder to read white text on black than black text on white.::lsn]] seem to benefit from light theme than dark theme in most cases. And to top it all, even the researches that focus on the legibility[[Bauer, D., & Cavonius, C., R. (1980). *Improving the legibility of visual display units through contrast reversal.* <br/>**See Below for more**.::rsn]] and aesthetics claim that dark on light is almost always better than dark on light. Every article I have read and referenced below vouch for dark on light, which I find to be true too at least in most occasions.

     

       8
       8
       +
       

     

       9
       9
       +
       How can what is relatively bad for legibility in most ocassions, bad in terms of expressibility of authorial aesthetics be a wide-spread preference? My hypothesis is this is primarily due to cognitive exhaustion like sleep deprivation, burn-out, stress etc (Extrapolating from n=1), which due to implicity conformity and [[preference falsification::https://en.wikipedia.org/wiki/Preference_falsification]] has become a normative social element. My experience has been that when I have had a bad last night sleep or stress due to office, I invariably am looking for less polarity, otherwise the dark on white seems more appealing to me both aesthetics wise and legibility wise. An extension of these could be that cognitive stress elevate the ocular stress like accomodative/refractive/convergence stress leading up to this, but I contest dark mode being the wide-spread personal/subjective preference.

     

       10
       10
       +
       

     

       11
       11
       +
       ---

     

       12
       12
       +
       

     

       13
       13
       +
       ## References

     

       14
       14
       +
       

     

       15
       15
       +
       Bauer, D., & Cavonius, C., R. (1980). *Improving the legibility of visual display units through contrast reversal.*

     

       16
       16
       +
       (From: [[UX Stackexchange on theme and eye strain::https://ux.stackexchange.com/questions/53264/dark-or-white-color-theme-is-better-for-the-eyes]])

     

       17
       17
       +
       > "...However, most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background..."

     

       18
       18
       +
       

     

       19
       19
       +
       Pabini Gabriel-Petit. (2007). *[[Applying color theory to digital displays::https://www.uxmatters.com/mt/archives/2007/01/applying-color-theory-to-digital-displays.php]]*

     

       20
       20
       +
       > "...While white text on a black background provides very high value contrast, it is less readable and causes greater eye fatigue than black text on a white background..."

     

       21
       21
       +
       

     

       22
       22
       +
       Jason Harrison – Post Doctoral Fellow, Imager Lab Manager – Sensory Perception and Interaction Research Group, University of British Columbia

     

       23
       23
       +
       >People with astigmatism (approximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the "deformed" lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.

     

       24
       24
       +
       

     

       25
       25
       +
       Raluca Budiu. (2020). *[[Dark mode v Light Mode: Which is better::https://www.nngroup.com/articles/dark-mode/]]*

     

       26
       26
       +
       > "...Their results showed that light mode won across all dimensions: irrespective of age, the positive contrast polarity was better for both visual-acuity tasks and for proofreading tasks. However, the difference between light mode and dark mode in the visual-acuity task was smaller for older adults than for younger adults — meaning that, although light mode was better for older adults, too, they did not benefit from it as much as younger adults, at least in the visual-acuity task.

     

       27
       27
       +
       >

     

       28
       28
       +
       > When researchers looked at fatigue metrics, they concluded that there was no significant difference of contrast polarity on any of them (meaning that it wasn’t the case that dark mode made people more tired, or vice versa)..."

     

       29
       29
       +
       

     

       30
       30
       +
       Lauren V. Scharff, Albert J Ahumada. (2005). [[Why is light text harder to read than dark text::http://jov.arvojournals.org/article.aspx?articleid=2132608]]

     

       31
       31
       +
       > "...For paragraph readability and letter identification, responses to light text were slower and less accurate for a given contrast...."

     

       32
       32
       +
       

     

       33
       33
       +
       

     

       34
       34
       +
       Jim Sheedy, Kevin Larson. (2008). *[[Blink: The stress of Reading::http://www.eyemagazine.com/opinion/article/eye-strain]]*

     

       35
       35
       +
       

     

       36
       36
       +
       

     

       37
       37
       +

+14

_notes/Epistemic humility to avoid unintended ontological dust while writing.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       tags: writing

     

       3
       3
       +
       curated: true

     

       4
       4
       +
       ---

     

       5
       5
       +
       

     

       6
       6
       +
       

     

       7
       7
       +
       When writing an essay *(applies to both opinion piece as well as factual ones)*, remember to clearly portray the epistemic humility[[**Epistemic Humility**: Recognizing the fragility of your epistemic confidence i.e., you (can) only know so much::rmn]], that is required of the subject in hand, in your writing. My observation has been that writing essays involve introduction of at least some amount of ontological dust that sprouts from past vague encounters or influences that you cannot remember. You cannot willingly avoid your perceptions and thoughts, but what you can definitely do is direct them to a more neutral ground by showing what you know is not all of it. 

     

       8
       8
       +
       

     

       9
       9
       +
       See Related: [[Humility is the knowing of the epistemic gap]]

     

       10
       10
       +
       

     

       11
       11
       +
       ## References

     

       12
       12
       +
       

     

       13
       13
       +
       Raghuveer S. (2018). *Journal Entry*

     

       14
       14
       +

+15

_notes/Everyone should have a project that they control 100% of.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       tags: project programming

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       To improve as a programmer, every programmer whether working independently or in an organization should atleast have one project that they control 100% of, and it doesn't matter if it is your main project or a side project. When you are working for an organization or working independently on a collaborative oss, the major chunk of your cognitive bandwidth gets allocated to those projects, which is not bad per-se, it does teach you how to work in a collaborative environment and to learn from people who are better at the concerned technology/concept than you. But the issue is more personal and emotional in when you are working on something bigger than you, it unwittingly causes a self-effacive effect i.e., you tend to devalue the emotional effects of being able to create something with complete autonomy, or crave for the autonomy and burnout as a result of the cognitive exhaustion. The sense of freedom and the liberating experience that comes out of the creative autonomy is just unmatched. 

     

       6
       6
       +
       

     

       7
       7
       +
       Even a side-project in github that you consider to be trivial has an effect that only such kind of projects can provide, of having done everything yourself and without anyone putting constraints on what you can and what you can't. It allows you to experiment outside of what would be acceptable within a project you are doing with others. Something like what if I just re-wrote this entire engine on top of openGL would never (or almost never) make sense in a collaborative project, but it would make perfect sense if it is just you.

     

       8
       8
       +
       

     

       9
       9
       +
       The other obvious advantage is it makes you much more light-hearted because you know that if this doesn't work out the way I like it or good for me, then I can just go. When you are working on a personal project out of your own free will, it has a certain kind of air that a collaborative project won't. It is purely voluntary, and you can just up and leave at any time. That adds something to the mix. The responsibility of joy or stress that comes out of it suddenly becomes more tolerable as well as enjoyable.  Note that I am not advocating that you drop everything that you don't like, it is just that having certain things in your life that you can control can help handle that which you can't.  

     

       10
       10
       +
       

     

       11
       11
       +
       Related: [[Creativity is a quality without a name]]

     

       12
       12
       +
       

     

       13
       13
       +
       ## References

     

       14
       14
       +
       

     

       15
       15
       +
       Andreas Kling. (2019). *[[Commute Talk: How to improve as a programmer::https://youtu.be/DY3Islql6xs]]*

+13

_notes/Humility is the knowing of the epistemic gap.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       tags: virtue

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       Humility is the knowing that you don't know a lot of things not a false pretension to deceive people into praising you.

     

       6
       6
       +
       

     

       7
       7
       +
       The contemporary view of humility seems to be to pretend as if one knew little instead of realizing it. Here fake it till you make it doesn't seem to work as, the more you pretend to be humble without realizing how little you know---not relatively, but absolutely----the ego grows by holding onto the relative superiority.

     

       8
       8
       +
       

     

       9
       9
       +
       Most of the issue of not understanding the fragility of one's epistemic confidence arises due to comparision, but more often than not [[Comparison based on accomplishment does not have a baseline]]. 

     

       10
       10
       +
       

     

       11
       11
       +
       ## Reference

     

       12
       12
       +
       

     

       13
       13
       +
       Taleb, Nicholas Nassim. (2015). *Antifragile: Things that gain from disorder*

+38

_notes/Reading the material to completion over interest-based pickups-n-drops.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       tags: reading

     

       3
       3
       +
       curated: true

     

       4
       4
       +
       ---

     

       5
       5
       +
       

     

       6
       6
       +
       

     

       7
       7
       +
       It is becoming common these days among people to preach dropping and picking up a book based on interest, but if you seriously want to express your opinion on the material or the person who has written that, at least try reading it completely before letting your preconceived notions get better of you.

     

       8
       8
       +
       

     

       9
       9
       +
       1.  [[I generally read everything through if I go past the abstract at all. I feel you can't really have an opinion if you haven't read the whole thing; if you don't read the whole thing, and you say anything about it, you are all too often perpetuating lies or half-truths<br/><cite>---Email Exchange with Gwern</cite>::rmn]]Seen one way you would be misleading people who trust your opinion and perpetrating a lie that might destroy the credibility of the original creator.

     

       10
       10
       +
       2.  And in another way, this is just pure incompetence that is being rationalized as efficient mechanism to imbibe knowledge. Doesn't provide authority, doesn't allow for legitimacy, all it does is allows you to create an echo chamber for yourself where you can engage in a pseudo-random verbal-diarrhea with like minded people.

     

       11
       11
       +
       

     

       12
       12
       +
       An example would be this:

     

       13
       13
       +
       

     

       14
       14
       +
       {:.medium .serif}

     

       15
       15
       +
       > "Witness here how salaried physicists are dismissing @stephen_wolfram Wolfram's automata BEFORE even hearing him Just as Freeman Dyson publicly dismissed *A New Kind of Science* c. 2002; it turned out that he did not read the book. & pple who refused to read it referred to Dyson!"<br/><cite>—Tweet by Nassim Taleb</cite>

     

       16
       16
       +
       

     

       17
       17
       +
       That said, it should be noted that switching books based on interest is not wrong, caution must be applied while talking about topics that you yourself have not completely gone through.

     

       18
       18
       +
       

     

       19
       19
       +
       [[I'm convinced a lot of leprechauns or 'citogenesis' comes from people who don't read past the title or abstract but decide to cite it anyway as proof<br/><cite>---Email Exchange with Gwern</cite>::lsn]]Gwern describes this better than I ever can by comparing such second-hand partial information mongers to people who use leprechauns or 'citogenesis' based on reading the title/abstract of a paper. _(See Below)_

     

       20
       20
       +
       

     

       21
       21
       +
       **_Note:_** Remember any resource that you pick up is someone's sweat and blood. If you do not wish to read it, always make sure not to form opinions on it, or at least not to promulgate any partial information on it. Always try to put yourself in such a situation and see how you'd have taken it — The Silver Rule.

     

       22
       22
       +
       

     

       23
       23
       +
       {:.boxit .serif .medium}

     

       24
       24
       +
       > “Do not do unto others as you would not have them do unto you.”

     

       25
       25
       +
       

     

       26
       26
       +
       Most of the time our inability to read to completion has to do with association of the act of reading instead of the book that we are read, context-switching can really here. Also [[Reading with fractalized mental pattern]] can be extremely useful in such situations.

     

       27
       27
       +
       

     

       28
       28
       +
       ----------

     

       29
       29
       +
       

     

       30
       30
       +
       ## References

     

       31
       31
       +
       

     

       32
       32
       +
       Conversation with Gwern Branwen. (19-Dec-2019). _Email Exchange_

     

       33
       33
       +
       

     

       34
       34
       +
       > ...I generally read everything through if I goes past the abstract at all. I feel you can't really have an opinion if you haven't read the whole thing; if you don't read the whole thing, and you say anything about it, you are all too often perpetuating lies or half-truths. I'm convinced a lot of leprechauns or 'citogenesis' comes from people who don't read past the title or abstract but decide to cite it anyway as proof....

     

       35
       35
       +
       

     

       36
       36
       +
       Nicholas, Nassim Taleb. (2020). _Tweet_

     

       37
       37
       +
       

     

       38
       38
       +
       > "Witness here how salaried physicists are dismissing @stephen_wolfram Wolfram's automata BEFORE even hearing him Just as Freeman Dyson publicly dismissed *A New Kind of Science* c. 2002; it turned out that he did not read the book. & pple who refused to read it referred to Dyson!"

+13

_notes/Reading with fractalized mental pattern.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       tags: reading

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       Fractalize your mental patterns instead of reading as a whole (i.e., one single pattern, where the mood of the act is associated with the ego), that way you will be able to selectively associate yourself with a book instead of the act of reading. Most people stop reading when they are bored of reading, but by fractalizing your mental patterns you will be able to dissociate yourself from that particular book and move on to another book instead of stopping reading altogether.

     

       6
       6
       +
       

     

       7
       7
       +
       {:.serif .medium}

     

       8
       8
       +
       > "Be bored with a book, not with the act of reading"<br/>

     

       9
       9
       +
       > <cite>—Nassim Nicholas Taleb, Antifragile</cite>

     

       10
       10
       +
       

     

       11
       11
       +
       ## References

     

       12
       12
       +
       

     

       13
       13
       +
       Taleb, Nicholas Nassim. (2015). _Antifragile_.

+45

_notes/Serendipity-based outlook as a driver for large-scale personal projects.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       tags: outlook project writing

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
        Goal-oriented outlook for large-scale personal projects seem to be detrimental in a sense that in the absence of an enforcing agent it seems to be contributing to issues like will-power dissolution, decision fatigue, burn-out, guilt etc owing to the disincentives of self-enforced adherence to an idea/project for a long term. This is based on the idea by Kurzban et. al that overcommiting to a task, that is only expected to show its result in distant future, can dissolve will power to an extent of a burnout or complete unproductivity. And in my opinion, it not just affects the quantifiable components, it also affects your qualitative components like creative autonomy.

     

       6
       6
       +
           

     

       7
       7
       +
        After talking with few interesting people and trying out various different processes myself I have come to the conclusion that some of the strategies mentioned below can help in persistance of motivation in a long term personal project without any unnatural self-enforced adherence. I call it serendipity-based outlook because the diversion[[...'I bounce between projects to maintain my interest. (In Kurzban's theory, willpower seems to reflect opportunity cost and a built-in aversion to overcomitting to a task which hasn't delivered any large rewards yet, and switching regularly helps prevent burnout.) Since many of my pages are incremental, there's always little things to be done'...<br/><cite>---Email Exchange with Gwern</cite>::lsn]]. from the singular focus towards the main project seems to be allowing for some kind unexpected results and epiphanies as byproducts.

     

       8
       8
       +
       

     

       9
       9
       +
       Working Strategies:

     

       10
       10
       +
       - Multiple projects requiring varying degree of proficiency with the main one allowing the maintenance of a Flow State(i.e., not too difficult to deprive you of maintaining motivation, not too easy to be waded off as trivial, one that can challenge you while using your current level of understanding). And Constantly bouncing between them as an alternative to the main one.

     

       11
       11
       +
       - Stretches of idle days working on nothing or random things can lead to surprising results **See:** [[Nassim Taleb on this::https://m.facebook.com/nntaleb/posts/10152466038423375]] and [[Bertrand Russell on the praise of this::https://harpers.org/archive/1932/10/in-praise-of-idleness/]].

     

       12
       12
       +
       - Frequent alternation between recreational projects like writing, blogging etc as an anti-dote to the side-effects of the main project.

     

       13
       13
       +
       - Undirected effort(such as researching) effort towards a sub-goal. Letting serendipity take over.[[...'Having no set goal in mind means you are not worried about completing anything. Also lately, I’m finding things are more interconnected than they seem. So whatever I learn contributes to a the whole than narrowing down to a slice of it'...<br/><cite>---Twitter Exchange with Prathyush</cite>::rsn]]

     

       14
       14
       +
       - [[Do Things That Don't Scale::http://paulgraham.com/ds.html]]

     

       15
       15
       +
       

     

       16
       16
       +
       **\****One thing that I have been observing is multiyear projects with smaller-side projects can help incorporate the Hybrid Routine Easily.*

     

       17
       17
       +
       

     

       18
       18
       +
       

     

       19
       19
       +
       ---

     

       20
       20
       +
       

     

       21
       21
       +
       ## References

     

       22
       22
       +
       

     

       23
       23
       +
       Baumeister & Tierney. (2011). *[[Do You Suffer From Decision Fatigue::http://www.nytimes.com/2011/08/21/magazine/do-you-suffer-from-decision-fatigue.html?pagewanted=all]]*

     

       24
       24
       +
       > ...‘Good decision making is not a trait of the person, in the sense that it’s always there,’ Baumeister says. ‘It’s a state that fluctuates.’ His studies show that people with the best self-control are the ones who structure their lives so as to conserve willpower. They don’t schedule endless back-to-back meetings. They avoid temptations like all-you-can-eat buffets, and they establish habits that eliminate the mental effort of making choices. Instead of deciding every morning whether or not to force themselves to exercise, they set up regular appointments to work out with a friend. Instead of counting on willpower to remain robust all day, they conserve it so that it’s available for emergencies and important decisions….’Even the wisest people won’t make good choices when they’re not rested and their glucose is low,’ Baumeister points out. That’s why the truly wise don’t restructure the company at 4 p.m. They don’t make major commitments during the cocktail hour. And if a decision must be made late in the day, they know not to do it on an empty stomach. ‘The best decision makers,’ Baumeister says, ‘are the ones who know when not to trust themselves.’...

     

       25
       25
       +
       

     

       26
       26
       +
       Conversation with [[Gwern Branwen::https://twitter.com/gwern]]. (2019-Dec-19). *Email Exchange*

     

       27
       27
       +
       > ...'I bounce between projects to maintain my interest. (In Kurzban's theory, willpower seems to reflect opportunity cost and a built-in aversion to overcomitting to a task which hasn't delivered any large rewards yet, and switching regularly helps prevent burnout.) Since many of my pages are incremental, there's always little things to be done'...

     

       28
       28
       +
       

     

       29
       29
       +
       Conversation with [[Prathyush Pramod::https://twitter.com/prathyvsh]]. (2019-Nov-15th). *Twitter Exchange*

     

       30
       30
       +
       > ...'Having no set goal in mind means you are not worried about completing anything. Also lately, I’m finding things are more interconnected than they seem. So whatever I learn contributes to a the whole than narrowing down to a slice of it'...

     

       31
       31
       +
       

     

       32
       32
       +
       Taleb, Nicholas Nassim. (2015). *Antifragile*

     

       33
       33
       +
       

     

       34
       34
       +
       Taleb, Nicholas Nassim. (2018). *[[Twitter thread on routine::https://twitter.com/nntaleb/status/1029812693660848129]]*

     

       35
       35
       +
       > Routine is effortless. Most humans, alas, prefer to expend physical, never intellectual energy. Creating requires much, much more effort.

     

       36
       36
       +
       

     

       37
       37
       +
       Graham, Paul. (2013). [[Do Things That Don't Scale::http://paulgraham.com/ds.html]]

     

       38
       38
       +
       

     

       39
       39
       +
       My Journal Entry, Jan 6th 2019

     

       40
       40
       +
       > Clearly, my brain has learned to ignore the Google calendar notifications. Initially, scheduling and completely the event/task used to feel rewarding, so I built up on that and kept adding trivial items in my calendar like gym, writing, journaling, etc. Although it worked for a couple of days, somehow there was a behavioral shift in how I was responding to the notifications, now it was not only the trivial ones that I was ignoring, the important ones too got side-tracked as a result of decision fatigue. 

     

       41
       41
       +
       >

     

       42
       42
       +
       > Although the extremely important ones had this aging process of incremental prioritization owing to [[Parkinson's Law::https://en.wikipedia.org/wiki/Parkinson%27s_law]].

     

       43
       43
       +
       > > ***Parkinson's Law:*** Work expands so as to fill the time available for its completion

     

       44
       44
       +
       

     

       45
       45
       +

+384

_posts/2020-01-01-Test-page-to-see-how-the-markdown-is-rendered.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       title: Test page to see how the raw markdown is rendered

     

       3
       3
       +
       tags: markdown 

     

       4
       4
       +
       ---

     

       5
       5
       +
       

     

       6
       6
       +
       This is intended as a quick reference and showcase. 

     

       7
       7
       +
       

     

       8
       8
       +
       **Table of Contents**

     

       9
       9
       +
       - [[Headers::#heading]]

     

       10
       10
       +
       - [[Emphasis::#emphasis]]

     

       11
       11
       +
       - [[Lists::#lists]]

     

       12
       12
       +
       - [[Links::#links]]

     

       13
       13
       +
       - [[Images::#images]]

     

       14
       14
       +
       - [[Code and Syntax Highlighting::#syntax]]

     

       15
       15
       +
       - [[Tables::#tables]]

     

       16
       16
       +
       - [[Blockquotes::#blockquotes]]

     

       17
       17
       +
       - [[Inline HTML::#inline]]

     

       18
       18
       +
       - [[Horizontal Rule::#hr]]

     

       19
       19
       +
       - [[Line Breaks::#br]]

     

       20
       20
       +
       

     

       21
       21
       +
       {:#heading}

     

       22
       22
       +
       ### Headings 

     

       23
       23
       +
       ---

     

       24
       24
       +
       

     

       25
       25
       +
       {:.regular-sans}

     

       26
       26
       +
       ```

     

       27
       27
       +
       # H1 

     

       28
       28
       +
       ## H2 

     

       29
       29
       +
       ### H3 

     

       30
       30
       +
       #### H4 

     

       31
       31
       +
       ##### H5 

     

       32
       32
       +
       ###### H6

     

       33
       33
       +
       ```

     

       34
       34
       +
       

     

       35
       35
       +
       # H1

     

       36
       36
       +
       ## H2

     

       37
       37
       +
       ### H3

     

       38
       38
       +
       #### H4

     

       39
       39
       +
       ##### H5

     

       40
       40
       +
       ###### H6

     

       41
       41
       +
       

     

       42
       42
       +
       {:#emphasis}

     

       43
       43
       +
       ###  Emphasis 

     

       44
       44
       +
       ---

     

       45
       45
       +
       

     

       46
       46
       +
       {:.regular-sans}

     

       47
       47
       +
       ```

     

       48
       48
       +
       Emphasis, aka italics, with *asterisks* or _underscores_. 

     

       49
       49
       +
       

     

       50
       50
       +
       Strong emphasis, aka bold, with **asterisks** or __underscores__. 

     

       51
       51
       +
       

     

       52
       52
       +
       Combined emphasis with **asterisks and _underscores_**.

     

       53
       53
       +
       

     

       54
       54
       +
       Strikethrough uses two tildes. ~~Scratch this.~~ 

     

       55
       55
       +
       ```

     

       56
       56
       +
       

     

       57
       57
       +
       Emphasis, aka italics, with *asterisks* or _underscores_.

     

       58
       58
       +
       

     

       59
       59
       +
       Strong emphasis, aka bold, with **asterisks** or __underscores__.

     

       60
       60
       +
       

     

       61
       61
       +
       Combined emphasis with **asterisks and _underscores_**.

     

       62
       62
       +
       

     

       63
       63
       +
       Strikethrough uses two tildes. ~~Scratch this.~~

     

       64
       64
       +
       

     

       65
       65
       +
       {:#lists}

     

       66
       66
       +
       ### Lists

     

       67
       67
       +
       

     

       68
       68
       +
       {:.regular-sans}

     

       69
       69
       +
       ```

     

       70
       70
       +
       1. First ordered list item 

     

       71
       71
       +
       ...1. Ordered sublist 

     

       72
       72
       +
       2. Another item 

     

       73
       73
       +
       ...* Unordered sublist 

     

       74
       74
       +
       3. Actual numbers don't matter, just that it's a number 

     

       75
       75
       +
       4. And another item. 

     

       76
       76
       +
       

     

       77
       77
       +
       ⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown). 

     

       78
       78
       +
       

     

       79
       79
       +
       ⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ 

     

       80
       80
       +
       ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ 

     

       81
       81
       +
       ⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.) 

     

       82
       82
       +
       

     

       83
       83
       +
       * Unordered list can use asterisks 

     

       84
       84
       +
       - Or minuses

     

       85
       85
       +
       + Or pluses

     

       86
       86
       +
       ```

     

       87
       87
       +
       

     

       88
       88
       +
       1. First ordered list item 

     

       89
       89
       +
          1. Ordered sublist 

     

       90
       90
       +
       2. Another item 

     

       91
       91
       +
          - Unordered sublist

     

       92
       92
       +
       3. Actual numbers don't matter, just that it's a number 

     

       93
       93
       +
       4. And another item. 

     

       94
       94
       +
       

     

       95
       95
       +
           You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

     

       96
       96
       +
       

     

       97
       97
       +
           To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅

     

       98
       98
       +
           Note that this line is separate, but within the same paragraph.⋅⋅

     

       99
       99
       +
           (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

     

       100
       100
       +
       

     

       101
       101
       +
       * Unordered list can use asterisks 

     

       102
       102
       +
       - Or minuses

     

       103
       103
       +
       + Or pluses

     

       104
       104
       +
       

     

       105
       105
       +
       {:#links}

     

       106
       106
       +
       ### Links

     

       107
       107
       +
       ---

     

       108
       108
       +
       

     

       109
       109
       +
       {:.regular-sans}

     

       110
       110
       +
       ```

     

       111
       111
       +
       [I'm an inline-style link](https://www.google.com)

     

       112
       112
       +
       

     

       113
       113
       +
       [I'm an inline-style link with title](https://www.google.com "Google's Homepage")

     

       114
       114
       +
       

     

       115
       115
       +
       [I'm a reference-style link][Arbitrary case-insensitive reference text]

     

       116
       116
       +
       

     

       117
       117
       +
       [I'm a relative reference to a repository file](../blob/master/LICENSE)

     

       118
       118
       +
       

     

       119
       119
       +
       [You can use numbers for reference-style link definitions][1]

     

       120
       120
       +
       

     

       121
       121
       +
       Or leave it empty and use the [link text itself].

     

       122
       122
       +
       

     

       123
       123
       +
       URLs and URLs in angle brackets will automatically get turned into links. 

     

       124
       124
       +
       http://www.example.com or <http://www.example.com> and sometimes 

     

       125
       125
       +
       example.com (but not on Github, for example).

     

       126
       126
       +
       

     

       127
       127
       +
       Some text to show that the reference links can follow later.

     

       128
       128
       +
       

     

       129
       129
       +
       [arbitrary case-insensitive reference text]: https://www.mozilla.org

     

       130
       130
       +
       [1]: http://slashdot.org

     

       131
       131
       +
       [link text itself]: http://www.reddit.com

     

       132
       132
       +
       ```

     

       133
       133
       +
       

     

       134
       134
       +
       [I'm an inline-style link](https://www.google.com)

     

       135
       135
       +
       

     

       136
       136
       +
       [I'm an inline-style link with title](https://www.google.com "Google's Homepage")

     

       137
       137
       +
       

     

       138
       138
       +
       [I'm a reference-style link][Arbitrary case-insensitive reference text]

     

       139
       139
       +
       

     

       140
       140
       +
       [I'm a relative reference to a repository file](../blob/master/LICENSE)

     

       141
       141
       +
       

     

       142
       142
       +
       [You can use numbers for reference-style link definitions][1]

     

       143
       143
       +
       

     

       144
       144
       +
       Or leave it empty and use the [link text itself].

     

       145
       145
       +
       

     

       146
       146
       +
       URLs and URLs in angle brackets will automatically get turned into links. 

     

       147
       147
       +
       http://www.example.com or <http://www.example.com> and sometimes 

     

       148
       148
       +
       example.com (but not on Github, for example).

     

       149
       149
       +
       

     

       150
       150
       +
       Some text to show that the reference links can follow later.

     

       151
       151
       +
       

     

       152
       152
       +
       [arbitrary case-insensitive reference text]: https://www.mozilla.org

     

       153
       153
       +
       [1]: http://slashdot.org

     

       154
       154
       +
       [link text itself]: http://www.reddit.com

     

       155
       155
       +
       

     

       156
       156
       +
       {:#images}

     

       157
       157
       +
       ### Images

     

       158
       158
       +
       ---

     

       159
       159
       +
       

     

       160
       160
       +
       {:.regular-sans}

     

       161
       161
       +
       ```

     

       162
       162
       +
       Here's our logo (hover to see the title text):

     

       163
       163
       +
       

     

       164
       164
       +
       Inline-style: 

     

       165
       165
       +
       ![alt text](/assets/img/profile.png "Logo Title Text 1")

     

       166
       166
       +
       

     

       167
       167
       +
       Reference-style: 

     

       168
       168
       +
       ![alt text][logo]

     

       169
       169
       +
       

     

       170
       170
       +
       [logo]: /assets/img/profile.png "Logo Title Text 2"

     

       171
       171
       +
       ```

     

       172
       172
       +
       

     

       173
       173
       +
       Here's our logo (hover to see the title text):

     

       174
       174
       +
       

     

       175
       175
       +
       Inline-style: 

     

       176
       176
       +
       ![alt text](/assets/img/profile.png "Logo Title Text 1")

     

       177
       177
       +
       

     

       178
       178
       +
       Reference-style: 

     

       179
       179
       +
       ![alt text][logo]

     

       180
       180
       +
       

     

       181
       181
       +
       [logo]: /assets/img/profile.png "Logo Title Text 2"

     

       182
       182
       +
       

     

       183
       183
       +
       {:#syntax}

     

       184
       184
       +
       ### Code and Syntax Highlighting

     

       185
       185
       +
       ---

     

       186
       186
       +
       

     

       187
       187
       +
       Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and Markdown Here -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); 

     

       188
       188
       +
       

     

       189
       189
       +
       {:.regular-sans}

     

       190
       190
       +
       ```

     

       191
       191
       +
       Inline `code` has `back-ticks around` it.

     

       192
       192
       +
       ```

     

       193
       193
       +
       

     

       194
       194
       +
       Inline `code` has `back-ticks around` it.

     

       195
       195
       +
       

     

       196
       196
       +
       Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.

     

       197
       197
       +
       

     

       198
       198
       +
       <pre class="regular-sans"> 

     

       199
       199
       +
       <code>

     

       200
       200
       +
       ```javascript

     

       201
       201
       +
       var s = "JavaScript syntax highlighting";

     

       202
       202
       +
       alert(s);

     

       203
       203
       +
       ```

     

       204
       204
       +
        

     

       205
       205
       +
       ```python

     

       206
       206
       +
       s = "Python syntax highlighting"

     

       207
       207
       +
       print s

     

       208
       208
       +
       ```

     

       209
       209
       +
        

     

       210
       210
       +
       ```

     

       211
       211
       +
       No language indicated, so no syntax highlighting. 

     

       212
       212
       +
       But let's throw in a <b>tag</b>.

     

       213
       213
       +
       ```

     

       214
       214
       +
       </code>

     

       215
       215
       +
       </pre>

     

       216
       216
       +
       

     

       217
       217
       +
       ```javascript

     

       218
       218
       +
       var s = "JavaScript syntax highlighting";

     

       219
       219
       +
       alert(s);

     

       220
       220
       +
       ```

     

       221
       221
       +
        

     

       222
       222
       +
       ```python

     

       223
       223
       +
       s = "Python syntax highlighting"

     

       224
       224
       +
       print s

     

       225
       225
       +
       ```

     

       226
       226
       +
        

     

       227
       227
       +
       ```

     

       228
       228
       +
       No language indicated, so no syntax highlighting. 

     

       229
       229
       +
       But let's throw in a <b>tag</b>.

     

       230
       230
       +
       ```

     

       231
       231
       +
       

     

       232
       232
       +
       {:#tables}

     

       233
       233
       +
       ### Tables

     

       234
       234
       +
       ---

     

       235
       235
       +
       

     

       236
       236
       +
       Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.

     

       237
       237
       +
       

     

       238
       238
       +
       {:.regular-sans}

     

       239
       239
       +
       ```

     

       240
       240
       +
       Colons can be used to align columns.

     

       241
       241
       +
       

     

       242
       242
       +
       | Tables        | Are           | Cool  |

     

       243
       243
       +
       | ------------- |:-------------:| -----:|

     

       244
       244
       +
       | col 3 is      | right-aligned | $1600 |

     

       245
       245
       +
       | col 2 is      | centered      |   $12 |

     

       246
       246
       +
       | zebra stripes | are neat      |    $1 |

     

       247
       247
       +
       

     

       248
       248
       +
       There must be at least 3 dashes separating each header cell.

     

       249
       249
       +
       The outer pipes (|) are optional, and you don't need to make the 

     

       250
       250
       +
       raw Markdown line up prettily. You can also use inline Markdown.

     

       251
       251
       +
       

     

       252
       252
       +
       Markdown | Less | Pretty

     

       253
       253
       +
       --- | --- | ---

     

       254
       254
       +
       *Still* | `renders` | **nicely**

     

       255
       255
       +
       1 | 2 | 3

     

       256
       256
       +
       ```

     

       257
       257
       +
       

     

       258
       258
       +
       Colons can be used to align columns.

     

       259
       259
       +
       

     

       260
       260
       +
       | Tables        | Are           | Cool  |

     

       261
       261
       +
       | ------------- |:-------------:| -----:|

     

       262
       262
       +
       | col 3 is      | right-aligned | $1600 |

     

       263
       263
       +
       | col 2 is      | centered      |   $12 |

     

       264
       264
       +
       | zebra stripes | are neat      |    $1 |

     

       265
       265
       +
       

     

       266
       266
       +
       There must be at least 3 dashes separating each header cell.

     

       267
       267
       +
       The outer pipes (|) are optional, and you don't need to make the 

     

       268
       268
       +
       raw Markdown line up prettily. You can also use inline Markdown.

     

       269
       269
       +
       

     

       270
       270
       +
       Markdown | Less | Pretty

     

       271
       271
       +
       --- | --- | ---

     

       272
       272
       +
       *Still* | `renders` | **nicely**

     

       273
       273
       +
       1 | 2 | 3

     

       274
       274
       +
       

     

       275
       275
       +
       {:#blockquotes}

     

       276
       276
       +
       ### Blockquotes

     

       277
       277
       +
       ---

     

       278
       278
       +
       

     

       279
       279
       +
       {:.regular-sans}

     

       280
       280
       +
       ```

     

       281
       281
       +
       > Blockquotes are very handy in email to emulate reply text.

     

       282
       282
       +
       > This line is part of the same quote.

     

       283
       283
       +
       

     

       284
       284
       +
       Quote break.

     

       285
       285
       +
       

     

       286
       286
       +
       > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.

     

       287
       287
       +
       ```

     

       288
       288
       +
       

     

       289
       289
       +
       > Blockquotes are very handy in email to emulate reply text.

     

       290
       290
       +
       > This line is part of the same quote.

     

       291
       291
       +
       

     

       292
       292
       +
       Quote break.

     

       293
       293
       +
       

     

       294
       294
       +
       > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.

     

       295
       295
       +
       

     

       296
       296
       +
       {:#inline}

     

       297
       297
       +
       Inline HTML

     

       298
       298
       +
       ---

     

       299
       299
       +
       

     

       300
       300
       +
       You can also use raw HTML in your Markdown, and it'll mostly work pretty well.

     

       301
       301
       +
       

     

       302
       302
       +
       {:.regular-sans}

     

       303
       303
       +
       ```

     

       304
       304
       +
       <dl>

     

       305
       305
       +
         <dt>Definition list</dt>

     

       306
       306
       +
         <dd>Is something people use sometimes.</dd>

     

       307
       307
       +
       

     

       308
       308
       +
         <dt>Markdown in HTML</dt>

     

       309
       309
       +
         <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>

     

       310
       310
       +
       </dl>

     

       311
       311
       +
       ```

     

       312
       312
       +
       

     

       313
       313
       +
       You can also use raw HTML in your Markdown, and it'll mostly work pretty well.

     

       314
       314
       +
       

     

       315
       315
       +
       <dl>

     

       316
       316
       +
         <dt>Definition list</dt>

     

       317
       317
       +
         <dd>Is something people use sometimes.</dd>

     

       318
       318
       +
       

     

       319
       319
       +
         <dt>Markdown in HTML</dt>

     

       320
       320
       +
         <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>

     

       321
       321
       +
       </dl>

     

       322
       322
       +
       

     

       323
       323
       +
       {:#hr}

     

       324
       324
       +
       ### Horizontal Rule

     

       325
       325
       +
       ---

     

       326
       326
       +
       

     

       327
       327
       +
       

     

       328
       328
       +
       {:.regular-sans}

     

       329
       329
       +
       ```

     

       330
       330
       +
       Three or more...

     

       331
       331
       +
       

     

       332
       332
       +
       ---

     

       333
       333
       +
       

     

       334
       334
       +
       Hyphens

     

       335
       335
       +
       

     

       336
       336
       +
       ***

     

       337
       337
       +
       

     

       338
       338
       +
       Asterisks

     

       339
       339
       +
       

     

       340
       340
       +
       ___

     

       341
       341
       +
       

     

       342
       342
       +
       Underscores

     

       343
       343
       +
       ```

     

       344
       344
       +
       

     

       345
       345
       +
       Three or more...

     

       346
       346
       +
       

     

       347
       347
       +
       ---

     

       348
       348
       +
       

     

       349
       349
       +
       Hyphens

     

       350
       350
       +
       

     

       351
       351
       +
       ***

     

       352
       352
       +
       

     

       353
       353
       +
       Asterisks

     

       354
       354
       +
       

     

       355
       355
       +
       ___

     

       356
       356
       +
       

     

       357
       357
       +
       Underscores

     

       358
       358
       +
       

     

       359
       359
       +
       {:#br}

     

       360
       360
       +
       ### Line Breaks

     

       361
       361
       +
       ---

     

       362
       362
       +
       

     

       363
       363
       +
       My basic recommendation for learning how line breaks work is to experiment and discover -- hit <Enter> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend.

     

       364
       364
       +
       

     

       365
       365
       +
       Here are some things to try out:

     

       366
       366
       +
       

     

       367
       367
       +
       {:.regular-sans}

     

       368
       368
       +
       ```

     

       369
       369
       +
       Here's a line for us to start with.

     

       370
       370
       +
       

     

       371
       371
       +
       This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

     

       372
       372
       +
       

     

       373
       373
       +
       This line is also a separate paragraph, but...

     

       374
       374
       +
       This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

     

       375
       375
       +
       ```

     

       376
       376
       +
       

     

       377
       377
       +
       Here's a line for us to start with.

     

       378
       378
       +
       

     

       379
       379
       +
       This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

     

       380
       380
       +
       

     

       381
       381
       +
       This line is also a separate paragraph, but...

     

       382
       382
       +
       This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

     

       383
       383
       +
       

     

       384
       384
       +
       License: CC-BY

+178

_posts/2020-02-01-How-to-use-simply-jekyll-features-on-your-website.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       title: How to use Simply Jekyll features on your website

     

       3
       3
       +
       tags: jekyll theme

     

       4
       4
       +
       ---

     

       5
       5
       +
       

     

       6
       6
       +
       Welcome to this feature usage tour. This is going to be another short post that describes how to use all the fancy features we saw in [[Exploring the features of Simply Jekyll]]. So without further ado, let's get started.

     

       7
       7
       +
       

     

       8
       8
       +
       ## The default features

     

       9
       9
       +
       

     

       10
       10
       +
       All the default jekyll markdown features are made available such that they don't cause any conflict with the custom features that we have implemented. To see how to the raw markdown gets generated, go to the [[Test page to see how the raw markdown is rendered]]

     

       11
       11
       +
       

     

       12
       12
       +
       ## The Custom features

     

       13
       13
       +
       

     

       14
       14
       +
       ### 1. Creating a wiki-style link

     

       15
       15
       +
       

     

       16
       16
       +
       **<u>General Syntax</u>**

     

       17
       17
       +
       

     

       18
       18
       +
       - **Internal links:** **[[**Some Link**]]**

     

       19
       19
       +
       

     

       20
       20
       +
       - **External links:** **[[**Some Text::https://address-to-the-website**]]**

     

       21
       21
       +
       

     

       22
       22
       +
       Anything text inside a double square bracket is considered as an internal link. The text has to be a valid title, if you provide a random text inside double square brackets, it will showup highlighted in yellow telling you that there is no essay/article/file with the mentioned title.

     

       23
       23
       +
       

     

       24
       24
       +
       Similarly, for external links all you have to do is add a double colon after the "Alt text" and enter the link to the website after the double colon as seen below.

     

       25
       25
       +
       

     

       26
       26
       +
       **Examples**

     

       27
       27
       +
       

     

       28
       28
       +
       Example of an internal link that points to a valid post or page, that is, a page with the title (not url) mentioned in the double brackets.

     

       29
       29
       +
       

     

       30
       30
       +
       > **Raw Syntax:** **[[**Comparison based on accomplishment does not have a baseline**]]**

     

       31
       31
       +
       >

     

       32
       32
       +
       > **Rendered Text:** [[Comparison based on accomplishment does not have a baseline]]

     

       33
       33
       +
       

     

       34
       34
       +
       

     

       35
       35
       +
       Example of an internal link that do not point to a valid post or page, that is, a page with the title (not url) mentioned in the double brackets.

     

       36
       36
       +
       

     

       37
       37
       +
       > **Raw Syntax:** **[[**Title of a non-existent page**]]**

     

       38
       38
       +
       > 

     

       39
       39
       +
       > **Rendered Text:** [[Title of a non-existent page]]

     

       40
       40
       +
       

     

       41
       41
       +
       ### 2. Creating a sidenote or a marginnote

     

       42
       42
       +
       

     

       43
       43
       +
       **<u>General Syntax</u>**

     

       44
       44
       +
       

     

       45
       45
       +
       - **Sidenote:** **[[**Some Text**::keyword-of-the-type-of-the-sidenote]]**

     

       46
       46
       +
       

     

       47
       47
       +
       - **Marginnote:** **[[**Some Text**::keyword-of-the-type-of-the-marginnote]]**

     

       48
       48
       +
       

     

       49
       49
       +
       > |Type of the sidenote/marginnote|keyword|

     

       50
       50
       +
         |:--|:--|

     

       51
       51
       +
         |Left Sidenote| `lsn` |

     

       52
       52
       +
         |Right Sidenote | `rsn` |

     

       53
       53
       +
         |Left Marginnote| `lmn` |

     

       54
       54
       +
         |Right Marginnote | `rmn` |

     

       55
       55
       +
       

     

       56
       56
       +
       

     

       57
       57
       +
       So, all you have to do is type in the keywords of the corresponding type of sidenote or marginnote after the double colon in the above syntax

     

       58
       58
       +
       

     

       59
       59
       +
       **Examples**

     

       60
       60
       +
       

     

       61
       61
       +
       Example of a sidenote to the right side of the page: 

     

       62
       62
       +
       

     

       63
       63
       +
       > **Raw Syntax:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. **[[**Phasellus mollis lectus id efficitur mollis.**::rsn]]** Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.

     

       64
       64
       +
       >

     

       65
       65
       +
       > **Rendered Text:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. [[Phasellus mollis lectus id efficitur mollis.::rsn]] Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.

     

       66
       66
       +
       

     

       67
       67
       +
       Same goes with `lsn`, `rmn`, `lmn`

     

       68
       68
       +
       

     

       69
       69
       +
       ### 3. Highlighting a piece of text

     

       70
       70
       +
       

     

       71
       71
       +
       **<u>General Syntax</u>**

     

       72
       72
       +
       

     

       73
       73
       +
       - **[[**Some Link**::highlight]]**

     

       74
       74
       +
       

     

       75
       75
       +
       There is only one color right now in which it highlights, a light bluish color, but you can easily extend it to support multiple colors by tinkering with it in `content.html` file in `_includes` directory.

     

       76
       76
       +
       

     

       77
       77
       +
       **Examples**

     

       78
       78
       +
       

     

       79
       79
       +
       > **Raw Syntax:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. **[[**Phasellus mollis lectus id efficitur mollis.**::highlight]]** Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.

     

       80
       80
       +
       >

     

       81
       81
       +
       > **Rendered Text:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. [[Phasellus mollis lectus id efficitur mollis.::highlight]] Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.

     

       82
       82
       +
       

     

       83
       83
       +
       ### 4. Partial Transclusion

     

       84
       84
       +
       

     

       85
       85
       +
       Transclusion is just a natural extension of sidenote and marginnote feature.

     

       86
       86
       +
       

     

       87
       87
       +
       **<u>General Syntax</u>**

     

       88
       88
       +
       

     

       89
       89
       +
       - **Sidenote-transclusion:** **[[**Some Text**::keyword-of-the-type-of-the-sidenote-transclusion]]**

     

       90
       90
       +
       

     

       91
       91
       +
       - **Marginnote-transclusion:** **[[**Some Text**::keyword-of-the-type-of-the-marginnote-transclusion]]**

     

       92
       92
       +
       

     

       93
       93
       +
       > |Type of the sidenote/marginnote transclusion|keyword|

     

       94
       94
       +
         |:--|:--|

     

       95
       95
       +
         |Left Sidenote Transclusion | `lsn-transclude` |

     

       96
       96
       +
         |Right Sidenote Transclusion | `rsn-transclude` |

     

       97
       97
       +
         |Left Marginnote Transclusion | `lmn-transclude` |

     

       98
       98
       +
         |Right Marginnote Transclusion | `rmn-transclude` |

     

       99
       99
       +
       

     

       100
       100
       +
       

     

       101
       101
       +
       So, all you have to do is type in the keywords of the corresponding type of sidenote or marginnote after the double colon in the above syntax

     

       102
       102
       +
       

     

       103
       103
       +
       **Examples**

     

       104
       104
       +
       

     

       105
       105
       +
       Example of a transclusion to the right side of the page: 

     

       106
       106
       +
       

     

       107
       107
       +
       > **Raw Syntax:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. **[[**Comparison based on accomplishment does not have a baseline**::rmn-transclude]]** Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.

     

       108
       108
       +
       >

     

       109
       109
       +
       > **Rendered Text:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. [[Comparison based on accomplishment does not have a baseline::rmn-transclude]] Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.

     

       110
       110
       +
       

     

       111
       111
       +
       Same goes with `rsn`, `lsn`, `lmn`

     

       112
       112
       +
       

     

       113
       113
       +
       ### 5. Wrapping a text inside a box

     

       114
       114
       +
       

     

       115
       115
       +
       **<u>General Syntax</u>**

     

       116
       116
       +
       

     

       117
       117
       +
       - **[[**Some Text**::wrap]]**

     

       118
       118
       +
       

     

       119
       119
       +
       **Examples**

     

       120
       120
       +
       

     

       121
       121
       +
       > **Raw Syntax:** **[[**Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis**::wrap]]**.

     

       122
       122
       +
       >

     

       123
       123
       +
       > **Rendered Text:** [[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.::wrap]]

     

       124
       124
       +
       

     

       125
       125
       +
       ### 6. Flashcard

     

       126
       126
       +
       

     

       127
       127
       +
       **<u>General Syntax</u>**

     

       128
       128
       +
       

     

       129
       129
       +
       - **[[**Some Text**::srs]]**

     

       130
       130
       +
       

     

       131
       131
       +
       **Examples**

     

       132
       132
       +
       

     

       133
       133
       +
       > **Raw Syntax:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. **[[**Donec rutrum tortor in pharetra vehicula**::srs]]**. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.

     

       134
       134
       +
       >

     

       135
       135
       +
       > **Rendered Text:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. [[Donec rutrum tortor in pharetra vehicula::srs]]. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.

     

       136
       136
       +
       

     

       137
       137
       +
       ### 7. Specific classes for changing font-type, font-size, and font-weight

     

       138
       138
       +
       

     

       139
       139
       +
       There are classes like very-small, medium-small, small, small-medium, medium, medium-large, large, very-large; that can be used to change the size of your text directly from markdown like this:

     

       140
       140
       +
       

     

       141
       141
       +
       > **Raw Syntax:**

     

       142
       142
       +
       > {:.regular-sans}

     

       143
       143
       +
       > ```

     

       144
       144
       +
       > {:.large}

     

       145
       145
       +
       > Some text here that needs to be enlarged

     

       146
       146
       +
       > ```

     

       147
       147
       +
       >

     

       148
       148
       +
       > **Rendered Text:**

     

       149
       149
       +
       > 

     

       150
       150
       +
       > {:.large}

     

       151
       151
       +
       > Some text here that needs to be enlarged

     

       152
       152
       +
       

     

       153
       153
       +
       

     

       154
       154
       +
       Similarly there are classes like regular-sans, serif, bold, italic, oblique, bolder, etc for formatting the text.

     

       155
       155
       +
       

     

       156
       156
       +
       > **Raw Syntax:**

     

       157
       157
       +
       > 

     

       158
       158
       +
       > ```

     

       159
       159
       +
       > {:.medium .serif .oblique}

     

       160
       160
       +
       > Some text here that needs to be enlarged

     

       161
       161
       +
       > ```

     

       162
       162
       +
       >

     

       163
       163
       +
       > **Rendered Text:**

     

       164
       164
       +
       > 

     

       165
       165
       +
       > {:.medium .serif .oblique}

     

       166
       166
       +
       > Some text here that needs to be enlarged

     

       167
       167
       +
       

     

       168
       168
       +
       Other common classes are .boxit that is used to wrap the text, .disable-user-select to disallow users from being able to select a particular piece of text by selecting it, etc. There are more classes like these which you can see in the file `style.css`. Once you figure out which class to use, all you have to do is just add the class before the text you want inside a curl brace like this {:\<classnames-with-dot-prepended-to-them>}

     

       169
       169
       +
        

     

       170
       170
       +
       ### 8. Other implicit features.

     

       171
       171
       +
       

     

       172
       172
       +
       Features like backlinks, context menu, related posts, page preview are available by default as they are implemented using CSS and JS. So, you don't have to do anything other than write as you would normally to make use of those features.

     

       173
       173
       +
       

     

       174
       174
       +
       #### Note:

     

       175
       175
       +
       When you typeout square brackets, it can be frustrating to type out the entire file title everytime. At least it was for me, so I created a small VSCode plugin, the editor in which I write my essays to autocomplete the titles as soon as I type double squarebrackets. It has been pretty handy for me, if you are interested in using VSCode or already use it, you can find it here: [[Notecomplete::https://github.com/raghuveerdotnet/scratchpad/tree/master/note-complete]]. It is pretty simple to use, all you have to do is just download the note-complete folder and copy it to .vscode directory in your OS to start using it. :)

     

       176
       176
       +
       

     

       177
       177
       +
         

     

       178
       178
       +
       For setting up the theme on your website checkout [[How to setup Simply Jekyll]]

+124

_posts/2020-03-01-How-to-setup-simply-jekyll.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       title: How to setup Simply Jekyll

     

       3
       3
       +
       tags: jekyll theme

     

       4
       4
       +
       ---

     

       5
       5
       +
       

     

       6
       6
       +
       This is going to be a super simple post about how to setup and use this theme for your own website.

     

       7
       7
       +
       

     

       8
       8
       +
       ## Usage

     

       9
       9
       +
       

     

       10
       10
       +
       {:.boxit}

     

       11
       11
       +
       Q. What will it look like when I am done setting it up?

     

       12
       12
       +
       

     

       13
       13
       +
       > This is what it should look  (minus the exact essays ofcourse):

     

       14
       14
       +
       > <img src="/assets/img/end_result.jpg" style="box-shadow: 2px 2px 20px 0 #ddd;"/>

     

       15
       15
       +
       

     

       16
       16
       +
       

     

       17
       17
       +
       Now without further ado, let's get started!

     

       18
       18
       +
       

     

       19
       19
       +
       ### Setup Prerequisites

     

       20
       20
       +
       

     

       21
       21
       +
       For this tutorial, we’ll need to install a few things on your machine (you may have some of these already). Following the instructions on each website to install them.

     

       22
       22
       +
       

     

       23
       23
       +
       - [[Ruby::https://www.ruby-lang.org/]]

     

       24
       24
       +
       - [[RubyGems::https://rubygems.org/]]

     

       25
       25
       +
       - [[Git::https://git-scm.com/downloads]]

     

       26
       26
       +
       

     

       27
       27
       +
       You’ll also need to create accounts on the following services:

     

       28
       28
       +
       

     

       29
       29
       +
       - [[GitHub::https://www.github.com/join]] (to store the website)

     

       30
       30
       +
       - [[Netlify::https://app.netlify.com/signup]] (to serve the website so others can see)

     

       31
       31
       +
       

     

       32
       32
       +
       Once you are all set with the prerequisites, we can then get to the fun part of getting it to appear on your screen. Let's get started with that.

     

       33
       33
       +
       

     

       34
       34
       +
       ### 1. Create a fork of the template repository

     

       35
       35
       +
       

     

       36
       36
       +
       To simplify things, I provide the template showed in the image above to get started. You can always tweak this template to your taste later.

     

       37
       37
       +
       

     

       38
       38
       +
       Visit the GitHub page for my template repository ([[raghuveerdotnet/jekyll-seamless::https://github.com/raghuveerdotnet/jekyll-seamless]]), and fork it to your account using the Fork button:

     

       39
       39
       +
       

     

       40
       40
       +
       > <img src="/assets/img/fork_button.jpg" style="box-shadow: 2px 2px 20px 0 #ddd;"/>

     

       41
       41
       +
       

     

       42
       42
       +
       Once the forking process is complete, you should have a fork (essentially a copy) of my template in your own GitHub account. On the GitHub page for your repository, click on the green “Clone or download” button, and copy the URL: we’ll need it for the next step.

     

       43
       43
       +
       

     

       44
       44
       +
       ### 2. Clone your repository locally 

     

       45
       45
       +
       

     

       46
       46
       +
       Next, we want to download the files from your GitHub repository onto your local machine. To do this, replace <YOUR_COPIED_URL_HERE> in the command below with the URL you copied in the previous step, then execute this command:

     

       47
       47
       +
       

     

       48
       48
       +
       ```

     

       49
       49
       +
       $ git clone <YOUR_COPIED_URL_HERE> my-personal-website

     

       50
       50
       +
       ```

     

       51
       51
       +
       

     

       52
       52
       +
       As a reference point, this is how it looks like for me (the difference is likely just the GitHub username):

     

       53
       53
       +
       

     

       54
       54
       +
       ```

     

       55
       55
       +
       $ git clone git@github.com:raghuveerdotnet/jekyll-seamless.git my-personal-website

     

       56
       56
       +
       ```

     

       57
       57
       +
       

     

       58
       58
       +
       Then, navigate into the directory that was just created:

     

       59
       59
       +
       

     

       60
       60
       +
       ```

     

       61
       61
       +
       $ cd my-personal-website

     

       62
       62
       +
       ```

     

       63
       63
       +
       

     

       64
       64
       +
       ### 3. Test out the site locally

     

       65
       65
       +
       

     

       66
       66
       +
       Sweet! You now have your repository’s source code on your machine. Within the my-personal-website directory, run the following command to install the necessary dependencies like Jekyll:

     

       67
       67
       +
       

     

       68
       68
       +
       ```

     

       69
       69
       +
       $ bundle

     

       70
       70
       +
       ```

     

       71
       71
       +
       

     

       72
       72
       +
       Once that’s done, ask Jekyll to start serving the site locally:

     

       73
       73
       +
       

     

       74
       74
       +
       ```

     

       75
       75
       +
       $ bundle exec jekyll serve

     

       76
       76
       +
       ```

     

       77
       77
       +
       

     

       78
       78
       +
       Then, open up [[http://localhost:4000::http://localhost:4000]] in your browser.

     

       79
       79
       +
       

     

       80
       80
       +
       If everything’s done correctly, you should now see the home page of your Personal Jekyll Website with Simply Jekyll Theme. 🎉

     

       81
       81
       +
       

     

       82
       82
       +
       Keep in mind that this site is only available locally (notice the `localhost` part of the URL), so if we want it to be available on the Internet for everyone to enjoy, we need to deploy it to the Internet: we’ll use Netlify for that in the next step.

     

       83
       83
       +
       

     

       84
       84
       +
       ### 4. Connect your GitHub repository to Netlify

     

       85
       85
       +
       

     

       86
       86
       +
       Netlify lets you automatically deploy your personal website on to the Internet when you update your GitHub repository. To do this, we need to connect your GitHub repository to Netlify:

     

       87
       87
       +
       

     

       88
       88
       +
       1. Log in to Netlify

     

       89
       89
       +
       2. Once logged in, click the “New site from Git” button

     

       90
       90
       +
       3. On the next page, select GitHub as the continuous deployment provider (you may need to authorize the connection, in which case, approve it)

     

       91
       91
       +
       4. On the next page, select your website repository from the list

     

       92
       92
       +
       5. On the next page, keep the default settings, and click on “Deploy site”.

     

       93
       93
       +
       

     

       94
       94
       +
       That was easy! We’re almost done.

     

       95
       95
       +
       

     

       96
       96
       +
       Wait a couple of minutes for the initial deploy to complete.

     

       97
       97
       +
       

     

       98
       98
       +
       Once that’s done, your website should be available on the Internet via a generic Netlify URL, which you can change to a custom domain later if you’d like.

     

       99
       99
       +
       

     

       100
       100
       +
       Now the cool thing is this: whenever you push an update to your GitHub repository, Netlify will automatically deploy your updates to the Internet.

     

       101
       101
       +
       

     

       102
       102
       +
       ### 5. Start producing content with your Simply Jekyll based Website

     

       103
       103
       +
       

     

       104
       104
       +
       At this point, you can start updating the files on your machine (in the my-personal-website folder) to change your jekyll seamless based website to your liking: update the copy, add some notes, tweak the layout, customize the colors, etc. Once you have something you’re happy with, push your changes to your GitHub repository with the following commands:

     

       105
       105
       +
       

     

       106
       106
       +
       ```

     

       107
       107
       +
       $ git add --all

     

       108
       108
       +
       $ git commit -m 'Update content'

     

       109
       109
       +
       $ git push origin master

     

       110
       110
       +
       ```

     

       111
       111
       +
       

     

       112
       112
       +
       If that command succeeds and the rest of the tutorial was done correctly, in a couple of minutes, you should see your changes live on your Netlify website. 🚀

     

       113
       113
       +
       

     

       114
       114
       +
       And we’re done! You now have your own Simply Jekyll based Personal Website .

     

       115
       115
       +
       

     

       116
       116
       +
       ---

     

       117
       117
       +
       

     

       118
       118
       +
       If you’re curious, take a look at [[my personal jekyll seamless based website here::https://www.raghuveer.net]].

     

       119
       119
       +
       

     

       120
       120
       +
       This setup tutorial is inspired by [[Maxime Vaillancourt::https://maximevaillancourt.com]]'s Digital Garden Tutorial.

     

       121
       121
       +
       

     

       122
       122
       +
       

     

       123
       123
       +
       

     

       124
       124
       +

+170

_posts/2020-04-01-Exploring-the-features-of-simply-jekyll.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       title: Exploring the features of Simply Jekyll

     

       3
       3
       +
       tags: jekyll theme

     

       4
       4
       +
       status: ongoing

     

       5
       5
       +
       ---

     

       6
       6
       +
       

     

       7
       7
       +
       Essentiality is the heart of any good software, and this theme is designed to ensure that I don't add things that I won't use on a daily basis or not have things that would be important for my personal usecase. It has been designed carefully to get rid of all  the feature creeps, bloatwares, etc. i.e., no bootstrap, no semantic, no jquery, no nothing...

     

       8
       8
       +
       

     

       9
       9
       +
       That said, this is a ready made theme and I am making it public so that more number of people will use it and enjoy the experience of using it. So, pardon my bigotry there😅.

     

       10
       10
       +
       

     

       11
       11
       +
       As for the list of features, this website steals features from every website that I can think of, or more appropriately the design inspiration for this website is derived from multiple sources; Here is the tiny list for the curious:

     

       12
       12
       +
       

     

       13
       13
       +
       - Backlinks:  Roam Research

     

       14
       14
       +
       - Transclusion:  Tiddlywiki

     

       15
       15
       +
       - Sidenote:  Edward Tufte, Gwern Branwen

     

       16
       16
       +
       - Stale Link Highlighting: Tiddlywiki

     

       17
       17
       +
       - Wiki-style links:  Every wiki ever

     

       18
       18
       +
       - Text highlighting:  Roam Research

     

       19
       19
       +
       - Page preview:  Wikipedia

     

       20
       20
       +
       - Context menu:  Google Docs

     

       21
       21
       +
       - Notes:  Andy Matuschak's Evergreen Notes

     

       22
       22
       +
       - Color scheme: Github

     

       23
       23
       +
       - Feed like structure for home page:  Twitter

     

       24
       24
       +
       - Omnisearch box at the top:  Google

     

       25
       25
       +
       - Profile board:  Twitter/Instagram

     

       26
       26
       +
       

     

       27
       27
       +
       Now that you know all my secrets let us waste more time into further exposing my true nature in its entirety and get started with tour:

     

       28
       28
       +
       

     

       29
       29
       +
       {:.boxit}

     

       30
       30
       +
       **Note:** This page only showcases the features. How to use these feature is mentioned in a separate article.

     

       31
       31
       +
       

     

       32
       32
       +
       ### Backlinks

     

       33
       33
       +
       

     

       34
       34
       +
       Backlinks or as Roam Research calls it "Birdirectional Links" is a nifty little feature that allows not only users reading your essays/articles to encounter interesting related articles, this is something you as a author yourself will see how powerful it is once you start browsing around your website. Backlinks are basically a link on PostA indicating all the mentions of PostA on different Posts.

     

       35
       35
       +
       

     

       36
       36
       +
       The neat stuff is it won't show up with an empty box if a given post doesn't have any backlinks and if it is already included in backlinks, it won't show up in your related posts. :)

     

       37
       37
       +
       

     

       38
       38
       +
       Here is a screenshot of what mentions/backlinks will look like in a page:

     

       39
       39
       +
       

     

       40
       40
       +
       <img src="/assets/img/backlinks.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd;" height="100%" width="80%"/>

     

       41
       41
       +
       

     

       42
       42
       +
       In the above example, it can be seen that there are three links, it means that all the three pages have a link to the page in which they are being displayed as a backlink.

     

       43
       43
       +
       

     

       44
       44
       +
       For eg. If you scroll all the way to the bottom, you will something similar i.e., you will see a link to the pages that has a link to this page. 

     

       45
       45
       +
       

     

       46
       46
       +
       ### Sidenotes and Marginnotes

     

       47
       47
       +
       

     

       48
       48
       +
       Of what use are such wide margins when you can't make efficient use of them. Fear not, we have a way to handle that too --- Marginnotes[[There are two types of people, those who have taste and those who don't. And anyone who has even a tiny bit of taste will never, never-ever use footnotes over sidenotes.<br><cite>---Some random blogger who shall remain unamed</cite>::rmn]]. For what it's worth, when you stroll down a garden, you don't ever see a flower bloom 10 miles away from the plant do you? This is where sidenotes come in and replace their paper-era sibling ie., footnotes. If it is relevant you see it right there. (No scrolling = No cognitive strain). The entire idea is to allow users to have a pleasant time on your blog i.e., Not too distracting(offputting), not too mesmerizing, just the right amount of ornamentation to allow seamless reading experience[[I see it as an issue of managing & exposing the length. Some readers want to go as deep as you can take them, but others are frustrated if you block them from moving on. I deal with it by use of collapsible sections+abstracts, margin notes, and explicit topics in list items.<br/><cite>---Tweet by Gwern Branwen</cite>::lsn]]. The added advantage we have with this website is it has wide margins allowing us to use both sides for sidenotes. So we can use them for quotations, small snippets, and also for interactive/expository animations.

     

       49
       49
       +
       

     

       50
       50
       +
       The first one on the right is a marginnote and the second one on the left is a sidenote. You may ask what is the difference, it looks all the same to me. You are right to some extent, but if you look closely you will see that the one on left has a number attached to it while the one on the right doesn't. Yes, that is all the difference there is, at least [[Edward Tufte::https://edwardtufte.github.io/tufte-css/]] says.

     

       51
       51
       +
       

     

       52
       52
       +
       

     

       53
       53
       +
       ### On-feed context menu

     

       54
       54
       +
       

     

       55
       55
       +
       Context menus are a great way to handle way to better way to improve user experience if they are done correctly. Given that our theme has a feed-link structure for the landing page, it leverages the opportunity and saves second time visitors who have already read the article and are only here to see other related articles or the backlinks by just simply right clicking on the feed. Thereby saving users the unnecessay time involved with clicking on a link and scrolling all the way down to see the backlinks or related articles.

     

       56
       56
       +
       

     

       57
       57
       +
       Here is a screenshot for people who are too lazy, while the rest of you can go back to the home page and try it out by right clicking on a particular feed entry:

     

       58
       58
       +
       

     

       59
       59
       +
       <img src="/assets/img/context_menu.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd; fload: left;"  height="70%" width="45%"/>

     

       60
       60
       +
       <img src="/assets/img/context_menu_backlinks.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd;" height="70%" width="45%"/>

     

       61
       61
       +
       

     

       62
       62
       +
       ### On-hover page preview

     

       63
       63
       +
       

     

       64
       64
       +
       Ever been to a blog or a tutorial site and seen links to other pages without any clue as to what that page is about apart from vague statements like "See Related" or "Click here for Part II". We all have had that experience, haven't we? Wouldn't it be nice to be able to take a cursory glance at the page just so that you could get a feel of it and decide quickly as to whether or not do you really want to read that post without having to click on the link and wait for the ginormous scroll of text to load? That is precisely what page previews are for. For eg, try to hover over this link: [[Serendipity Based outlook as a driver for large Scale personal projects]].

     

       65
       65
       +
       

     

       66
       66
       +
       And yes, all of what you see is available right out of the box. No configuration, no sh*t, no shinola.

     

       67
       67
       +
       

     

       68
       68
       +
       ### Transclusion

     

       69
       69
       +
       

     

       70
       70
       +
       Once I had sidenotes and page preview for my blog, transclusion[[Serendipity Based outlook as a driver for large Scale personal projects::rmn-transclude]] just felt like the natural next step to it. I mean there are less important pages that you can leave at the discretion of the readers to hover-over and take a peak, and then there are pages that you want to explicity show a glimpse of, but how do you do it? Obviously, putting a chunk of random text in the most of your post is just unacceptable UX, but then how else do you do  it? You could just combine the nifty little preview thingy with your nice little sidenote thingy and let users get a glimpse of the important stuff without getting distracted. Amazing, isn't it?

     

       71
       71
       +
       

     

       72
       72
       +
       ### Link Management

     

       73
       73
       +
       

     

       74
       74
       +
       Now the biggest of them all: the permalink curse. Most of us are never happy with the first title that we come up with, and when you excitingly write a new post embedding an old post---the title of which you always wanted to change but never got time to do so because you were busy creating content---it sometimes happens that you forget to update the relevant link all the associated places that you linked it in. And I think this is worst of them all in terms of an UX nightmare. 

     

       75
       75
       +
       

     

       76
       76
       +
       Although we don't have a complete solution given that we are using a static site generator, I think we have a decent mechanism to atleast find the culprit links without clicking at them (a.k.a highlighting links that don't point anywhere, but ideally must be pointing to some location due to which they cannot be deleted).

     

       77
       77
       +
       

     

       78
       78
       +
       Here is an example of:

     

       79
       79
       +
       - A perfectly valid link: [[Comparison based on accomplishment does not have a baseline]]

     

       80
       80
       +
       - A bad link that does not point anywhere: [[Some non-existing title]]

     

       81
       81
       +
       

     

       82
       82
       +
       See how it highlights in yellow? I feel this is a game-changer that anyone who has a personal website should at least think of incorporating in their website given the number of deadlink issues we face.

     

       83
       83
       +
       

     

       84
       84
       +
       **Note**: This only works with local/internal links.

     

       85
       85
       +
       

     

       86
       86
       +
       

     

       87
       87
       +
       ### Miscellaneous Features: Highlighting text, Primitive Flash Cards, and Some gimmicks

     

       88
       88
       +
       

     

       89
       89
       +
       #### Text Highlighting

     

       90
       90
       +
       

     

       91
       91
       +
       So you are writing an essay and you want to emphasize a particular portion of your essay to your audience that you think is just mindblowing. Tools like Medium provide such an easy way to do this while we still keep scratching our head with mark tags and p tag with a background color and what not.. Worry not, this theme allows you to easily highlight a portion of a text without any hassle.

     

       92
       92
       +
       

     

       93
       93
       +
       Here is an example of it:

     

       94
       94
       +
       

     

       95
       95
       +
       {:.boxit}

     

       96
       96
       +
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, [[quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident::highlight]], sunt in culpa qui officia deserunt mollit anim id est laborum."

     

       97
       97
       +
       

     

       98
       98
       +
       #### Primitive Flashcards

     

       99
       99
       +
       

     

       100
       100
       +
       Anki has been my friend, my well-wisher, my guardian, pretty much everything for the last one year of my intellectual life. I have a half-hour morning routine that I follow dilligently in going through the scheduled anki decks to strengthen my neuronal connection on a particular topic/subject. And I have been doing it consistently for almost a year now. This is an attempt at recreating the aspect of spaced-repetition to allow my brain to form interesting connections based on things I have already written. The plan is to extend it using local storage and somekind of firebase like service to provide a constant reminder to users using the supermemo algorithm, but as of now, this is where I stand --- a simple on-click card to keep the thing going until I build something better.

     

       101
       101
       +
       

     

       102
       102
       +
       Here is an example(click on the card):

     

       103
       103
       +
       

     

       104
       104
       +
       "Lorem ipsum dolor sit amet, [[consectetur adipiscing elit, sed do eiusmod tempor::srs]] incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

     

       105
       105
       +
       

     

       106
       106
       +
       For all you know, this could be used for some interesting things if you have a tutorials website where you write posts on technical concepts. So that's that.

     

       107
       107
       +
       

     

       108
       108
       +
       #### The Gimmicks

     

       109
       109
       +
       

     

       110
       110
       +
       ##### Profile Board for Main Site

     

       111
       111
       +
       

     

       112
       112
       +
       If you have ever used a social media with feeds you probably have stalked the profiles of people you find interesting, but the problem is as much as the mystery gets someone into look at your profile, it also makes them form opinions. If the profile reads author, you see their feed one way; and if it says scientist from Caltech, you see it the other. I mean as much as authority is a thing to form opinions about, it also alienates people from what could potentially have been a great relation if not for the credentiality and appearance. So, the idea with the profile board was to get done with this stuff right away so that people can enjoy the content instead of going profile hunting on your credibility and accomplishments and appearances to judge and validate their opinions by validating you.

     

       113
       113
       +
       

     

       114
       114
       +
       Here is the screenshot:

     

       115
       115
       +
       

     

       116
       116
       +
       <img src="/assets/img/profile_board.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd;" height="100%" width="80%"/>

     

       117
       117
       +
       

     

       118
       118
       +
       ##### Omnisearch bar

     

       119
       119
       +
       

     

       120
       120
       +
       This is inspired by the browsers like Chrome and Firefox where the searchbar is always placed at the top so that readers can easily search for the next thing without having to go back to the main page and scroll through dozens of articles.

     

       121
       121
       +
       

     

       122
       122
       +
       And I personally like this one because, it allows me as an author/writer to quickly jump between different posts while I am reading my articles to reference in my other articles. 

     

       123
       123
       +
       

     

       124
       124
       +
       Here is a screenshot:

     

       125
       125
       +
       

     

       126
       126
       +
       <img src="/assets/img/search.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd;" height="100%" width="80%"/>

     

       127
       127
       +
       

     

       128
       128
       +
       **Note**: The searchbar is not implemented as a scrollspying widget that pins itself automatically is because I have a preference for distraction free content when reading, that is why the website provides a chevron to scroll to the top easily instead of pinning the search to the header.

     

       129
       129
       +
       

     

       130
       130
       +
       ##### Feed-like structure

     

       131
       131
       +
       

     

       132
       132
       +
       I am a big fan of Aza Raskin's infinite scroll design and the fact that it provides such an easy way to engage users is just mind-blowing. That said, I must also confess that I am not a big fan of infinite scrolls on social media websites given their addictive nature. Blogs are fundamentally finite in nature. I mean even if you are a highly productive individual who writes a thousand page essay a day, you would have only written 365 essays and not all of them interesting to me. So having a feed-like structure on blogs I feel is fundamental to allowing users to engage in a more neutral way. 

     

       133
       133
       +
       

     

       134
       134
       +
       And if you are still not sure of its utility, go join twitter or facebook or instagram, and comeback to read this again after a month or so.

     

       135
       135
       +
       

     

       136
       136
       +
       Untill then here is the screenshot:

     

       137
       137
       +
       

     

       138
       138
       +
       <img src="/assets/img/feed.png" style="box-shadow: 2px 2px 20px 0 #ddd;" height="100%" width="80%"/>

     

       139
       139
       +
       

     

       140
       140
       +
       ##### Auto-tagging WIP posts on the feed

     

       141
       141
       +
       

     

       142
       142
       +
       Sometimes you are writing something interesting but have not completed the entire thing, lets say like a series of posts on single, it can be helpful to show users right away on the feed/homepage the status so that when they click the post, their expectations are already managed.

     

       143
       143
       +
       

     

       144
       144
       +
       Here is a screenshot.

     

       145
       145
       +
       

     

       146
       146
       +
       <img src="/assets/img/ongoing.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd;" height="100%" width="80%"/>

     

       147
       147
       +
       

     

       148
       148
       +
       ##### Clickable tags

     

       149
       149
       +
       

     

       150
       150
       +
       If you go the posts on the homepage, and go inside any of them and try to click on the tags such as date or category, you will see that it takes you to a page with all the posts belonging to that tag or date. Just a nifty little feature.

     

       151
       151
       +
       

     

       152
       152
       +
       

     

       153
       153
       +
       And that is all! Thanks for scrolling all the way through to see all the features. Now if you'd like to know how to use this theme, head over to the post titled [[How to setup Simply Jekyll]]. And if you would like to see how to use these features, head over to [[How to use Simply Jekyll features on your website]]

     

       154
       154
       +
       

     

       155
       155
       +
       

     

       156
       156
       +
       P.S If you use VSCode like me for content creation and authoring, and are interested in autocompletion of titles when you write your notes. You can use a small VSCode plugin that I wrote for myself to ease up my writing process: [[Notecomplete::https://github.com/raghuveerdotnet/scratchpad/tree/master/note-complete]]

     

       157
       157
       +
       

     

       158
       158
       +
       

     

       159
       159
       +
       

     

       160
       160
       +
       

     

       161
       161
       +
       

     

       162
       162
       +
       

     

       163
       163
       +
       

     

       164
       164
       +
       

     

       165
       165
       +
       

     

       166
       166
       +
       

     

       167
       167
       +
       

     

       168
       168
       +
       

     

       169
       169
       +
       

     

       170
       170
       +

+28

_posts/2020-05-01-Introduction-to-simply-jekyll.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       title: Introduction to Simply Jekyll

     

       3
       3
       +
       tags: jekyll theme

     

       4
       4
       +
       ---

     

       5
       5
       +
       

     

       6
       6
       +
       Simply Jekyll is a highly functional jekyll-based theme that combines the best of different worlds (atleast tries to 😅). It is a minimal and distraction free theme that strives to provide maximum value all without holding back on any essential features that a user would benefit from or would desire for. This is an evolving project and is garanteed to be maintained at least for quite some time as I myself am a beneficiary of this theme and the project.

     

       7
       7
       +
       

     

       8
       8
       +
       The theme provides a rich set of features that include:

     

       9
       9
       +
       - Wiki-style markdown syntax for both internal as well as external links.

     

       10
       10
       +
       - Support for backlinks and related posts to exhort serendipitous encounters.

     

       11
       11
       +
       - Feed-specific context menu for instantly accessing the related posts and references.

     

       12
       12
       +
       - Auto stale-link management for internal links.

     

       13
       13
       +
       - Custom syntax for sidenotes and marginnotes on either side of the feed/post.

     

       14
       14
       +
       - Support for partial transclusion of posts.

     

       15
       15
       +
       - On hover page preview.

     

       16
       16
       +
       - Custom classes to style phrasing elements like quotes, callouts, etc by mentioning size, font-types, weight, box etc.

     

       17
       17
       +
       - Preliminary support for flashcards.

     

       18
       18
       +
       - Custom syntax to highlight your favorite part of the post (No, I am not talking about code syntax highlighting, which is already provided by Jekyll through Rouge).

     

       19
       19
       +
       - Support for external link identifier through icons.

     

       20
       20
       +
       - Finally, the most important of them all --- No bloatware or frameworks!

     

       21
       21
       +
       

     

       22
       22
       +
       Plus everything else that you can already do with jekyll like write something on a bunch of markdown files and convert it into a HTML file or sprinkle in some inline html can still be done alongside these features.

     

       23
       23
       +
       

     

       24
       24
       +
       Neat stuff, isn't it? To see the above mentioned features in action go check out the next post. :P

     

       25
       25
       +
       

     

       26
       26
       +
       Also see the sample post---[[(Sample Essay) Informational Hazard - Thinking Before Consuming]]---to get a feel for how an actual essay would look like. :)

     

       27
       27
       +
       

     

       28
       28
       +

+25

_posts/2020-06-01-informational-hazard-thinking-before-consuming.markdown

···

       1
       1
       +
       ---

     

       2
       2
       +
       title: (Sample Essay) Informational Hazard - Thinking Before Consuming

     

       3
       3
       +
       tags: Practical

     

       4
       4
       +
       ---

     

       5
       5
       +
       

     

       6
       6
       +
       Information is probably the single most addictive substance, even more so than heroin in it can give you the kick even before you have consumed it, let alone waiting for the system to digest it. And what is more interesting is, the quality and the content(in chemist-speak, the composition, and the dosage) that is required to stimulate an individual varies for each individual. For some, the effect kicks in at “keeping up with Kardashians”; for some, when reading editorials in the economist or the new yorker; and for some, reading self-help claptrap disguised as psychology and science. Whichever end of the spectrum you are in there is not much difference in the effect it has on you – all it does is, it consumes your senses.

     

       7
       7
       +
       

     

       8
       8
       +
       The problem is no one puts up a disclaimer about whether or not it is fit for you to consume. You have to figure it out yourself. And what is all the more disconcerting is the fact that in doing so none of us are aware of the toll it has taken on us. Consider a simple case of skimming through a newspaper(or an online news app if you are tech-savvy), how much do you retain at the end of it? So, at what point is the trade war between the US and China right now? Oh, and what is happening in the US open? Who is the current world champion in blitz-chess? What happened to the bridge that was going to be built in the who-cares where region? And then top it with some political and investment news, you have successfully deceived yourself into believing that you have hoarded all the information you could and retained nothing. I emphasize nothing!

     

       9
       9
       +
       

     

       10
       10
       +
       If you were to explain the article to someone say a couple days later, I bet all you could recall is the headline. This is the plight of pretty much everyone right now. The toll taken on our attention span due to this continuous influx of information outweighs most of the benefits of consuming it. You travel up the ladder in wealth and status this becomes far graver – you can see people competing for information, meaning, one might not like politics at all but they are now forced to hold an opinion on the president and the current affairs just to be able to contribute to verbal diarrhea to be a part of the social group and to keep up the ostensible progress.

     

       11
       11
       +
       

     

       12
       12
       +
       Now consider this, you read a New York Times piece on Venezuela’s economic collapse that states socialist policies as the primary reason, the high it can give you is indescribable, you suddenly are anti-“this” and pro-“something else”. If someone asked you your political views, you are now nothing more than a parrot regurgitating a New York Times piece as a reason for your anti-socialism stance. Okay, I am sorry I understand that citing only one article can show one in a bad light, so maybe a bunch of them?

     

       13
       13
       +
       

     

       14
       14
       +
       **Note**: Before we go any further, I must clarify that anything that is not explicitly stated by me as my own view should not be extrapolated from the examples or the writing style.

     

       15
       15
       +
       

     

       16
       16
       +
       It is precisely because of this indolent nature of our brain that I ask you to be careful. At least in the case of occupational hazards, you are aware of the downsides, and when you do sign up you do it wittingly. But in the case of Informational Hazards, neither are we aware of the downsides nor did we sign up for it knowingly.

     

       17
       17
       +
       

     

       18
       18
       +
       Furthermore, the indispensable problem that is concomitant of free inflow of information is: [[preference falsification::https://en.wikipedia.org/wiki/Preference_falsification]]. For reasons I don’t understand, it seems like the more the information you accumulate the more are you prone to hiding your true preferences. One theory I have is you think you have to be broad-minded at the expense of your natural instincts but what I don’t understand is how come such smart people who learn to be broad-minded do not understand the cascading effects of the palatable lie. How difficult is it to realize that this lie if prolonged could become the new truth. Is that what we want?

     

       19
       19
       +
       

     

       20
       20
       +
       Our brains have this funny little characteristic or I should say side-effect of generating biases; and when you provide them their favorite fodder a.k.a information, it not only triggers the center of knowledge, it switches on the neighboring center for bias generation too. One that I can instantly recall is that of our collective bias due to the exposure to apparent progress in terms of iPads and iPhones, all of us are made to think that the field of science and technology is evolving at a rapid pace but if you dig deeper there hasn’t been any fundamental breakthrough in the area of pure sciences since the late 1970s, which marked the invention of semiconductors. Eric Weinstein, mathematician and economist speaks about this in great detail in one of his [[podcasts::https://www.youtube.com/watch?v=nM9f0W2KD5s]] on stagnation in science and technology with Peter Thiel. (Do check it out)

     

       21
       21
       +
       

     

       22
       22
       +
       It is not for me to tell what to read and what not to, but I what do know is, there is a mental threshold to what one can make sense of. I have spoken about this in detail in one of my previous essays on the [[branching effects of higher-order thinking::https://raghuveer.net/posts/branching-effects-of-higher-order-thinking/]]. Sometimes, the mental fatigue is real, and in such cases, unnecessary consumption can have undesired effects. So the next time you read about how quantum computers use superposition to surpass conventional computers in representing bits and their states in a newspaper column or a blog post, please try to explain it your kids before you convince yourself of the apparently profound knowledge that you just acquired. Oh yeah, and please don’t draw any conclusions before you explain it to them.

     

       23
       23
       +
       

     

       24
       24
       +
       This is a subtle topic, and there are a million ways to look at it. From why it is really important in this day and age to be updated to how you might not satisfy all the system requirements for the update. To be honest, most of us do not have spec required to hold the information and use it. And there are no good developers around to fix the bugs i.e., the biases and mental fatigue. I think it is good to have your own guiding heuristic as to what do you want to consume and what you don’t. Pick your sources, moderate your intake, and always ponder on it before jumping to conclusions.

     

       25
       25
       +

+70

about.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       layout: post

     

       3
       3
       +
       title: About

     

       4
       4
       +
       permalink: /about/

     

       5
       5
       +
       ---

     

       6
       6
       +
       

     

       7
       7
       +
       As of now, I am a programmer with expertise in System Programming (especially C++), who is also interested in Computer Graphics, Compiler Design, and Some Embedded Systems. [[Here::https://github.com/raghuveerdotnet]] is my coding scratchpad if you are interested.

     

       8
       8
       +
       

     

       9
       9
       +
       Over the course of time, I have developed interest in many things including cognitive science, mathematics, and philosophy; and my personal penchant is to one day create a software system that I call the CogShell (Short for the  Cognitive Shell[[See my writeup on it: [here](/posts/cogshell)::rsn]]): A highly interconnnected software toolkit with all the essential tools to support thought continuity through tacit object permanance.

     

       10
       10
       +
       

     

       11
       11
       +
       

     

       12
       12
       +
       I have a podcast by the same name called the "[[Knowledge Continuum::https://open.spotify.com/show/5zR7IUdCZAtP0m4Ef8bMgs]]".

     

       13
       13
       +
       

     

       14
       14
       +
       ---

     

       15
       15
       +
       

     

       16
       16
       +
       ## Reach out to me

     

       17
       17
       +
       

     

       18
       18
       +
       [[Twitter::https://twitter.com/raghuveerdotnet]] – Shoot me a dm or just tweet ***@raghuveerdotnet***. I will try to reply as soon as I can. Sadly, I am not available on any other social media sites. I am not really into professional social media circle but anyway here is my [[linkedin::https://www.linkedin.com/in/sraghuveer/]] just in case.

     

       19
       19
       +
           

     

       20
       20
       +
       Bangalore is pretty large, so I can’t promise but If you happen to be in Bangalore by chance and want to chat, drop an email([[raghu@raghuveer.net::mailto:raghu@raghuveer.net]]) and include [Coffee] in the subject line, and we can work something out.

     

       21
       21
       +
       

     

       22
       22
       +
       If you like anything about who I am or what I do, please do follow me or reach out to me. Don’t hesitate.

     

       23
       23
       +
       

     

       24
       24
       +
       ---

     

       25
       25
       +
       

     

       26
       26
       +
       ## About the website

     

       27
       27
       +
       

     

       28
       28
       +
       [[***Changelog***<br/>

     

       29
       29
       +
       \- 14-05-20 Context Menu <br/>

     

       30
       30
       +
       \- 08-05-20 Trivial Spaced Repetition <br/>

     

       31
       31
       +
       \- 04-05-20 Removed Theming. <br/>

     

       32
       32
       +
       \- 04-05-20 Removed Curated Notes. <br/>

     

       33
       33
       +
       \- 01-04-20 Curated Notes. <br/>

     

       34
       34
       +
       \- 30-04-20 Transclusion. <br/>

     

       35
       35
       +
       \- 26-04-20 Sidenote. <br/>

     

       36
       36
       +
       \- 20-04-20 Wiki link. <br/>

     

       37
       37
       +
       \- 16-04-20 Theme. <br/>

     

       38
       38
       +
       \- 16-04-20 Avatar. <br/>

     

       39
       39
       +
       \- 11-02-20 Related Posts. <br/>

     

       40
       40
       +
       \- 12-10-19 Searchbar. <br/>

     

       41
       41
       +
       ::rmn]]Features:

     

       42
       42
       +
       

     

       43
       43
       +
       - **Page preview** (Move your mouse over the link): [[Test note to verify features on this website]] 

     

       44
       44
       +
       - **Transclusion**: Allows you to see a partial view of the contents of the website to the right or the left of the margin.

     

       45
       45
       +
       - **Sidenotes** (Changelog you see on the left is an example of this).

     

       46
       46
       +
       - **Wiki-style link:** Usually wikis allow you to specify links using double bracket, I added it here using liquid. Also added bad-link highlighting

     

       47
       47
       +
          - Good link: [[Test note to verify features on this website]]

     

       48
       48
       +
          - Bad link: [[Title of a page that doesn't exist]]

     

       49
       49
       +
       

     

       50
       50
       +
       

     

       51
       51
       +
       Some Less know features:

     

       52
       52
       +
       

     

       53
       53
       +
       - Go back to the blog home or to the notes page, and try to right click on any of the entry. [Hint: Zettelkasten]

     

       54
       54
       +
       

     

       55
       55
       +
       - Click this card[[Memorize me so that you do well in your exams::srs]] looking thing to know how I use my notes. [Hint: SRS]

     

       56
       56
       +
       

     

       57
       57
       +
       Other Details:

     

       58
       58
       +
       

     

       59
       59
       +
       - Domain is registered with Google Domains

     

       60
       60
       +
       - The site lives on [[Github::https://github.com/raghuveerdotnet/raghuveerdotnet.github.io]].

     

       61
       61
       +
       - This website is statically generated using Jekyll from a set of Markdown files.

     

       62
       62
       +
       

     

       63
       63
       +
       

     

       64
       64
       +
       ### FAQ

     

       65
       65
       +
       

     

       66
       66
       +
       [[**First Design**<img src="/assets/img/firstdesign.jpg"/>::lmn]]Why is the website structured the way it is?

     

       67
       67
       +
       

     

       68
       68
       +
       {:.boxit}

     

       69
       69
       +
       > The design of the website is inspired by multiple sources with the intention of making the website more functional. Having said that, I am not a skilled front-end developer/UI-developer, so I could only come somewhat closer to my inital design that I sketched *(see left or click on this &#8853; icon beside the question above if you are on a mobile device)*, hopefully this will clear why it's structured the way it is. In fact, I had to remove the lab option because of my current inability to design it. That said, I can also safely say that I am improving based on the initial iterations of the website that can be seen here: [[Jan-22-2020::https://web.archive.org/web/20200122164405/raghuveer.net]], [[Apr-13-2020::https://web.archive.org/web/20200413193808/raghuveer.net]], [[Apr-20-2020::https://web.archive.org/web/20200420172058/raghuveer.net]]

     

       70
       70
       +

+58

assets/css/highlight.css

···

       1
       1
       +
       .highlight .hll { background-color: #ffffcc }

     

       2
       2
       +
       .highlight .c { color: #aaaaaa; font-style: italic } /* Comment */

     

       3
       3
       +
       .highlight .err { color: #F00000; background-color: #F0A0A0 } /* Error */

     

       4
       4
       +
       .highlight .k { color: #0000aa } /* Keyword */

     

       5
       5
       +
       .highlight .cm { color: #aaaaaa; font-style: italic } /* Comment.Multiline */

     

       6
       6
       +
       .highlight .cp { color: #4c8317 } /* Comment.Preproc */

     

       7
       7
       +
       .highlight .c1 { color: #aaaaaa; font-style: italic } /* Comment.Single */

     

       8
       8
       +
       .highlight .cs { color: #0000aa; font-style: italic } /* Comment.Special */

     

       9
       9
       +
       .highlight .gd { color: #aa0000 } /* Generic.Deleted */

     

       10
       10
       +
       .highlight .ge { font-style: italic } /* Generic.Emph */

     

       11
       11
       +
       .highlight .gr { color: #aa0000 } /* Generic.Error */

     

       12
       12
       +
       .highlight .gh { color: #000080; font-weight: 600 } /* Generic.Heading */

     

       13
       13
       +
       .highlight .gi { color: #00aa00 } /* Generic.Inserted */

     

       14
       14
       +
       .highlight .go { color: #888888 } /* Generic.Output */

     

       15
       15
       +
       .highlight .gp { color: #555555 } /* Generic.Prompt */

     

       16
       16
       +
       .highlight .gs { font-weight: 600 } /* Generic.Strong */

     

       17
       17
       +
       .highlight .gu { color: #800080; font-weight: 600 } /* Generic.Subheading */

     

       18
       18
       +
       .highlight .gt { color: #aa0000 } /* Generic.Traceback */

     

       19
       19
       +
       .highlight .kc { color: #0000aa } /* Keyword.Constant */

     

       20
       20
       +
       .highlight .kd { color: #0000aa } /* Keyword.Declaration */

     

       21
       21
       +
       .highlight .kn { color: #0000aa } /* Keyword.Namespace */

     

       22
       22
       +
       .highlight .kp { color: #0000aa } /* Keyword.Pseudo */

     

       23
       23
       +
       .highlight .kr { color: #0000aa } /* Keyword.Reserved */

     

       24
       24
       +
       .highlight .kt { color: #00aaaa } /* Keyword.Type */

     

       25
       25
       +
       .highlight .m { color: #009999 } /* Literal.Number */

     

       26
       26
       +
       .highlight .s { color: #aa5500 } /* Literal.String */

     

       27
       27
       +
       .highlight .na { color: #1e90ff } /* Name.Attribute */

     

       28
       28
       +
       .highlight .nb { color: #00aaaa } /* Name.Builtin */

     

       29
       29
       +
       .highlight .nc { color: #00aa00; text-decoration: underline } /* Name.Class */

     

       30
       30
       +
       .highlight .no { color: #aa0000 } /* Name.Constant */

     

       31
       31
       +
       .highlight .nd { color: #888888 } /* Name.Decorator */

     

       32
       32
       +
       .highlight .ni { color: #800000; font-weight: 600 } /* Name.Entity */

     

       33
       33
       +
       .highlight .nf { color: #00aa00 } /* Name.Function */

     

       34
       34
       +
       .highlight .nn { color: #00aaaa; text-decoration: underline } /* Name.Namespace */

     

       35
       35
       +
       .highlight .nt { color: #1e90ff; font-weight: 600 } /* Name.Tag */

     

       36
       36
       +
       .highlight .nv { color: #aa0000 } /* Name.Variable */

     

       37
       37
       +
       .highlight .ow { color: #0000aa } /* Operator.Word */

     

       38
       38
       +
       .highlight .w { color: #bbbbbb } /* Text.Whitespace */

     

       39
       39
       +
       .highlight .mf { color: #009999 } /* Literal.Number.Float */

     

       40
       40
       +
       .highlight .mh { color: #009999 } /* Literal.Number.Hex */

     

       41
       41
       +
       .highlight .mi { color: #009999 } /* Literal.Number.Integer */

     

       42
       42
       +
       .highlight .mo { color: #009999 } /* Literal.Number.Oct */

     

       43
       43
       +
       .highlight .sb { color: #aa5500 } /* Literal.String.Backtick */

     

       44
       44
       +
       .highlight .sc { color: #aa5500 } /* Literal.String.Char */

     

       45
       45
       +
       .highlight .sd { color: #aa5500 } /* Literal.String.Doc */

     

       46
       46
       +
       .highlight .s2 { color: #aa5500 } /* Literal.String.Double */

     

       47
       47
       +
       .highlight .se { color: #aa5500 } /* Literal.String.Escape */

     

       48
       48
       +
       .highlight .sh { color: #aa5500 } /* Literal.String.Heredoc */

     

       49
       49
       +
       .highlight .si { color: #aa5500 } /* Literal.String.Interpol */

     

       50
       50
       +
       .highlight .sx { color: #aa5500 } /* Literal.String.Other */

     

       51
       51
       +
       .highlight .sr { color: #009999 } /* Literal.String.Regex */

     

       52
       52
       +
       .highlight .s1 { color: #aa5500 } /* Literal.String.Single */

     

       53
       53
       +
       .highlight .ss { color: #0000aa } /* Literal.String.Symbol */

     

       54
       54
       +
       .highlight .bp { color: #00aaaa } /* Name.Builtin.Pseudo */

     

       55
       55
       +
       .highlight .vc { color: #aa0000 } /* Name.Variable.Class */

     

       56
       56
       +
       .highlight .vg { color: #aa0000 } /* Name.Variable.Global */

     

       57
       57
       +
       .highlight .vi { color: #aa0000 } /* Name.Variable.Instance */

     

       58
       58
       +
       .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

+29

assets/css/ie-target.css

···

       1
       1
       +
       ---

     

       2
       2
       +
       ---

     

       3
       3
       +
       

     

       4
       4
       +
       

     

       5
       5
       +
       .userboard,

     

       6
       6
       +
       .avatar,

     

       7
       7
       +
       .searchbar,

     

       8
       8
       +
       .menu,

     

       9
       9
       +
       .related {

     

       10
       10
       +
           display: none !important;

     

       11
       11
       +
       }

     

       12
       12
       +
       

     

       13
       13
       +
       #scroll-head,

     

       14
       14
       +
       #disqus_thread {

     

       15
       15
       +
           display: none !important;

     

       16
       16
       +
       }

     

       17
       17
       +
       .sn-right,

     

       18
       18
       +
       .mn-right {

     

       19
       19
       +
           margin-right: -30%;

     

       20
       20
       +
           width: 25%;

     

       21
       21
       +
       }

     

       22
       22
       +
       .sn-left,

     

       23
       23
       +
       .mn-left {

     

       24
       24
       +
           margin-left: -30%;

     

       25
       25
       +
           width: 25%;

     

       26
       26
       +
       }

     

       27
       27
       +
       .box {

     

       28
       28
       +
           border: none !important;

     

       29
       29
       +
       }

+1393

assets/css/style.css

···

       1
       1
       +
       ---

     

       2
       2
       +
       layout: stylesheet

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       /******************************************************

     

       6
       6
       +
        *             PREDEFINE TAGS CSS                     *

     

       7
       7
       +
       *******************************************************/

     

       8
       8
       +
       

     

       9
       9
       +
       @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

     

       10
       10
       +
       @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

     

       11
       11
       +
       @import "/assets/css/highlight.css";

     

       12
       12
       +
       /* Containers: Body, Container, Box, Main, Header, Content */ 

     

       13
       13
       +
       

     

       14
       14
       +
       html {

     

       15
       15
       +
           scroll-behavior: smooth;

     

       16
       16
       +
       }

     

       17
       17
       +
       

     

       18
       18
       +
       body {

     

       19
       19
       +
           counter-reset: sidenote-counter; 

     

       20
       20
       +
       }

     

       21
       21
       +
       

     

       22
       22
       +
       .container {

     

       23
       23
       +
           display: flex;    

     

       24
       24
       +
           position: relative;         

     

       25
       25
       +
           flex-direction: column;     

     

       26
       26
       +
           justify-content: center;

     

       27
       27
       +
           position: absolute;

     

       28
       28
       +
           top: 0px;  

     

       29
       29
       +
           left: 0px;

     

       30
       30
       +
           right: 0px;

     

       31
       31
       +
           bottom: 0px;  

     

       32
       32
       +
           align-items: center;       

     

       33
       33
       +
           max-width: 1100px;

     

       34
       34
       +
           margin-right: auto;

     

       35
       35
       +
           margin-left: auto;

     

       36
       36
       +
       }

     

       37
       37
       +
       

     

       38
       38
       +
       .box {

     

       39
       39
       +
           border-left: 1px solid #f7f7f7;

     

       40
       40
       +
           border-right: 1px solid #f7f7f7;

     

       41
       41
       +
           border-bottom: 1px solid #f7f7f7;

     

       42
       42
       +
           width: 60%;

     

       43
       43
       +
           position: absolute;

     

       44
       44
       +
           top: 0px;

     

       45
       45
       +
       }

     

       46
       46
       +
       

     

       47
       47
       +
       header {

     

       48
       48
       +
           display: flex;

     

       49
       49
       +
           flex-direction: column;

     

       50
       50
       +
       }

     

       51
       51
       +
       

     

       52
       52
       +
       main {

     

       53
       53
       +
           min-height: 300px;

     

       54
       54
       +
           margin-left: 20px;

     

       55
       55
       +
           padding-right: 10px;

     

       56
       56
       +
       }

     

       57
       57
       +
       

     

       58
       58
       +
       

     

       59
       59
       +
       /* Phrasing Style: H1, H2, H3, H4, H5, H6, P, A, UL, LI */

     

       60
       60
       +
       

     

       61
       61
       +
       h1 {

     

       62
       62
       +
           font-size: 29px;

     

       63
       63
       +
       }

     

       64
       64
       +
       

     

       65
       65
       +
       h2 {

     

       66
       66
       +
           font-size: 25px;

     

       67
       67
       +
       }

     

       68
       68
       +
       

     

       69
       69
       +
       h3 {

     

       70
       70
       +
           font-size: 22px;

     

       71
       71
       +
       }

     

       72
       72
       +
       

     

       73
       73
       +
       h4 {

     

       74
       74
       +
           font-size: 19px;

     

       75
       75
       +
       }

     

       76
       76
       +
       

     

       77
       77
       +
       h5 {

     

       78
       78
       +
           font-size: 16px;

     

       79
       79
       +
       }

     

       80
       80
       +
       

     

       81
       81
       +
       h6 {

     

       82
       82
       +
           font-size: 13px;

     

       83
       83
       +
       }

     

       84
       84
       +
       

     

       85
       85
       +
       h1, h2, h3, h4, h5, h6 {

     

       86
       86
       +
           color: #555555;

     

       87
       87
       +
           font-family:  Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       88
       88
       +
           font-weight: 600;

     

       89
       89
       +
       }  

     

       90
       90
       +
       

     

       91
       91
       +
       a, p, ul, li, ol, table, span, blockquote {

     

       92
       92
       +
           color: #555555;

     

       93
       93
       +
           font-family:  'IBM Plex Sans', Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       94
       94
       +
           font-size: 16px;  /* Let's set the font-size to something old-man friendly */

     

       95
       95
       +
       }

     

       96
       96
       +
       

     

       97
       97
       +
       p a,

     

       98
       98
       +
       ul a,

     

       99
       99
       +
       li a,

     

       100
       100
       +
       td a,

     

       101
       101
       +
       th a,

     

       102
       102
       +
       h1 a,

     

       103
       103
       +
       h2 a,

     

       104
       104
       +
       h3 a,

     

       105
       105
       +
       h4 a,

     

       106
       106
       +
       h5 a,

     

       107
       107
       +
       h6 a,

     

       108
       108
       +
       span a,

     

       109
       109
       +
       div a,

     

       110
       110
       +
       ol a,

     

       111
       111
       +
       blockquote a,

     

       112
       112
       +
       cite a {

     

       113
       113
       +
           font-size: inherit;

     

       114
       114
       +
           font-family: inherit;

     

       115
       115
       +
           color: inherit;

     

       116
       116
       +
       }

     

       117
       117
       +
       

     

       118
       118
       +
       ul ul {

     

       119
       119
       +
           list-style-type: disc;

     

       120
       120
       +
       }

     

       121
       121
       +
       

     

       122
       122
       +
       b, strong {

     

       123
       123
       +
           font-weight: 600;

     

       124
       124
       +
       }

     

       125
       125
       +
       

     

       126
       126
       +
       

     

       127
       127
       +
       /* Figures, Images, Code, Blockquotes, Tables */

     

       128
       128
       +
       

     

       129
       129
       +
       img {

     

       130
       130
       +
           max-width: 100%;

     

       131
       131
       +
           height: auto;

     

       132
       132
       +
       }

     

       133
       133
       +
       

     

       134
       134
       +
       

     

       135
       135
       +
       code {

     

       136
       136
       +
           font-family: Consolas, 'Courier New', Courier, monospace;

     

       137
       137
       +
           font-family: Consolas, 'Courier New', Courier, monospace;

     

       138
       138
       +
           display: inline-block;

     

       139
       139
       +
           overflow: auto !important;

     

       140
       140
       +
           white-space: pre-line !important;       

     

       141
       141
       +
           word-wrap: break-word !important;       

     

       142
       142
       +
           padding: 2px 2px  2px 2px;

     

       143
       143
       +
           vertical-align:middle;

     

       144
       144
       +
           padding: 2px 2px 2px 2px;

     

       145
       145
       +
           border: 1px solid #e9e9e9;

     

       146
       146
       +
           border-radius: 4px;

     

       147
       147
       +
       }

     

       148
       148
       +
       

     

       149
       149
       +
       .regular-sans code {

     

       150
       150
       +
           padding: 20px;

     

       151
       151
       +
           background-color: #f7f7f7;

     

       152
       152
       +
           border-radius: 5px;

     

       153
       153
       +
           border: none;

     

       154
       154
       +
           font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;

     

       155
       155
       +
       }

     

       156
       156
       +
       

     

       157
       157
       +
       .serif code {

     

       158
       158
       +
           padding: 20px;

     

       159
       159
       +
           background-color: #f7f7f7;

     

       160
       160
       +
           border-radius: 5px;

     

       161
       161
       +
           border: none;

     

       162
       162
       +
           font-family: 'EB Garamond', Georgia, serif !important;

     

       163
       163
       +
       }

     

       164
       164
       +
       

     

       165
       165
       +
       

     

       166
       166
       +
       pre code {

     

       167
       167
       +
           font-family: Consolas, 'Courier New', Courier, monospace;

     

       168
       168
       +
           display: inline-block;

     

       169
       169
       +
           overflow: auto !important;

     

       170
       170
       +
           white-space: pre-line !important;       

     

       171
       171
       +
           word-wrap: break-word !important;       

     

       172
       172
       +
           padding: 15px 15px  15px 15px;

     

       173
       173
       +
           vertical-align:middle;

     

       174
       174
       +
           width: 90%;

     

       175
       175
       +
           background-color: #f7f7f7;

     

       176
       176
       +
           border: 1px solid #e9e9e9;

     

       177
       177
       +
           border-radius: 5px;

     

       178
       178
       +
           color: #555;

     

       179
       179
       +
       }

     

       180
       180
       +
       

     

       181
       181
       +
       

     

       182
       182
       +
       blockquote:before {

     

       183
       183
       +
           display: none;

     

       184
       184
       +
       }

     

       185
       185
       +
       

     

       186
       186
       +
       blockquote {

     

       187
       187
       +
           padding: 10px;

     

       188
       188
       +
       }

     

       189
       189
       +
       

     

       190
       190
       +
       cite {

     

       191
       191
       +
           padding-left: 50px;

     

       192
       192
       +
           font-style: oblique;

     

       193
       193
       +
       }

     

       194
       194
       +
       

     

       195
       195
       +
       blockquote p {

     

       196
       196
       +
           font-family: inherit;

     

       197
       197
       +
           font-size: inherit;

     

       198
       198
       +
       }

     

       199
       199
       +
       

     

       200
       200
       +
       table {

     

       201
       201
       +
           width: 90%;

     

       202
       202
       +
           border-radius: 5px;

     

       203
       203
       +
           border-collapse: collapse;

     

       204
       204
       +
       }

     

       205
       205
       +
       th, td {

     

       206
       206
       +
           color: #555;

     

       207
       207
       +
           padding: 8px;

     

       208
       208
       +
           text-align: left;

     

       209
       209
       +
           font-size: 12px;

     

       210
       210
       +
       }

     

       211
       211
       +
       

     

       212
       212
       +
       td {

     

       213
       213
       +
          font-size: 14px;

     

       214
       214
       +
       }

     

       215
       215
       +
       

     

       216
       216
       +
       td a {

     

       217
       217
       +
           color: inherit;

     

       218
       218
       +
           text-decoration: none;

     

       219
       219
       +
       }

     

       220
       220
       +
       

     

       221
       221
       +
       .item-title {

     

       222
       222
       +
           color: #555;

     

       223
       223
       +
           font-weight: 600;

     

       224
       224
       +
       }

     

       225
       225
       +
       

     

       226
       226
       +
       .item-title span {

     

       227
       227
       +
           color: #aaa;

     

       228
       228
       +
           font-size: 12px;

     

       229
       229
       +
           font-weight: 400;

     

       230
       230
       +
       }

     

       231
       231
       +
       

     

       232
       232
       +
       table th {

     

       233
       233
       +
           font-weight: 600;

     

       234
       234
       +
       }

     

       235
       235
       +
       

     

       236
       236
       +
       tr {

     

       237
       237
       +
           border-radius: 5px;

     

       238
       238
       +
       }

     

       239
       239
       +
       

     

       240
       240
       +
       thead tr:nth-child(odd) {

     

       241
       241
       +
           background-color: #f7f7f7; 

     

       242
       242
       +
       }

     

       243
       243
       +
       

     

       244
       244
       +
       tbody tr:nth-child(even) {

     

       245
       245
       +
           background-color: #f7f7f7;

     

       246
       246
       +
       }

     

       247
       247
       +
       

     

       248
       248
       +
       hr {

     

       249
       249
       +
           background-color: #ccc;

     

       250
       250
       +
           color: #ccc;

     

       251
       251
       +
           border: 0 none;

     

       252
       252
       +
           height: 1px;

     

       253
       253
       +
       }

     

       254
       254
       +
       

     

       255
       255
       +
       /* Blogposts: Post-heading, Post-subheading, Post-content, Related Posts*/

     

       256
       256
       +
       

     

       257
       257
       +
       .site-heading {

     

       258
       258
       +
           border-bottom: 2px solid #f7f7f7;

     

       259
       259
       +
           flex: 0 0 20px;

     

       260
       260
       +
           align-self: stretch;

     

       261
       261
       +
           align-content: flex-end;

     

       262
       262
       +
       }

     

       263
       263
       +
       

     

       264
       264
       +
       .site-heading h4 {

     

       265
       265
       +
           color: #555555;

     

       266
       266
       +
           font-family:  Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       267
       267
       +
           font-stretch: ultra-condensed;

     

       268
       268
       +
           float: right;

     

       269
       269
       +
           margin-bottom: 10px;

     

       270
       270
       +
           margin-right: 20px;

     

       271
       271
       +
           font-weight: 500;

     

       272
       272
       +
       }

     

       273
       273
       +
       

     

       274
       274
       +
       .site-heading a {

     

       275
       275
       +
           text-decoration: none;

     

       276
       276
       +
       }

     

       277
       277
       +
       

     

       278
       278
       +
       .avatar {

     

       279
       279
       +
           position: absolute;

     

       280
       280
       +
           top: 40px;

     

       281
       281
       +
           left: 10px;

     

       282
       282
       +
       }

     

       283
       283
       +
       

     

       284
       284
       +
       .avatar-link {    

     

       285
       285
       +
           background-color: #fff;

     

       286
       286
       +
           border-radius: 50%;

     

       287
       287
       +
           display: inline-block !important;

     

       288
       288
       +
           float: left;

     

       289
       289
       +
           margin: -35px 5px 0 8px;

     

       290
       290
       +
           max-width: 100%;

     

       291
       291
       +
           padding: 1px;

     

       292
       292
       +
           vertical-align: bottom;

     

       293
       293
       +
           font-family:  Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       294
       294
       +
       }

     

       295
       295
       +
       

     

       296
       296
       +
       .avatar-img {

     

       297
       297
       +
           border: 2px solid #fff;

     

       298
       298
       +
           color: #fff;

     

       299
       299
       +
           border-radius: 50%;

     

       300
       300
       +
           box-sizing: border-box;

     

       301
       301
       +
           height: 80px;

     

       302
       302
       +
           width: 80px;

     

       303
       303
       +
       }

     

       304
       304
       +
       

     

       305
       305
       +
       

     

       306
       306
       +
       .dashboard {

     

       307
       307
       +
           border-bottom: 2px solid #f7f7f7;

     

       308
       308
       +
           width: 100%;

     

       309
       309
       +
           display: flex;

     

       310
       310
       +
           flex-direction: column;

     

       311
       311
       +
       }

     

       312
       312
       +
       

     

       313
       313
       +
       .userboard {

     

       314
       314
       +
           background-color: #f7f7f7;

     

       315
       315
       +
           width: 100%;

     

       316
       316
       +
       }

     

       317
       317
       +
       

     

       318
       318
       +
       .username {

     

       319
       319
       +
           padding-top: 15px;

     

       320
       320
       +
           padding-left: 20px;

     

       321
       321
       +
           font-size: 16px;

     

       322
       322
       +
           font-weight: 600;

     

       323
       323
       +
       }

     

       324
       324
       +
       

     

       325
       325
       +
       .username:hover {

     

       326
       326
       +
           text-decoration: underline;

     

       327
       327
       +
           color: #555;

     

       328
       328
       +
       }

     

       329
       329
       +
       

     

       330
       330
       +
       .userdesc {

     

       331
       331
       +
           padding-left: 20px;

     

       332
       332
       +
           margin-top: -13px;

     

       333
       333
       +
       }

     

       334
       334
       +
       

     

       335
       335
       +
       .userdesc p {

     

       336
       336
       +
           font-size: 15px;

     

       337
       337
       +
       }

     

       338
       338
       +
       

     

       339
       339
       +
       .link-to-notes {

     

       340
       340
       +
           padding-left: 20px;

     

       341
       341
       +
           margin-top: -14px;

     

       342
       342
       +
           padding-bottom: 8px;

     

       343
       343
       +
       }

     

       344
       344
       +
       

     

       345
       345
       +
       .link-to-notes a {

     

       346
       346
       +
           color: #4183c4;

     

       347
       347
       +
           text-decoration: none;

     

       348
       348
       +
           font-family: 'IBM Plex Sans', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

     

       349
       349
       +
           font-size: 15px;

     

       350
       350
       +
           margin-left: -3px;

     

       351
       351
       +
       }

     

       352
       352
       +
       

     

       353
       353
       +
       .link-to-notes a:hover {

     

       354
       354
       +
           text-decoration: underline;

     

       355
       355
       +
       }

     

       356
       356
       +
       

     

       357
       357
       +
       .link-to-notes a, .link-to-notes svg {

     

       358
       358
       +
           vertical-align: middle;

     

       359
       359
       +
           display: inline-block;

     

       360
       360
       +
       }

     

       361
       361
       +
       

     

       362
       362
       +
       .anchor-link {

     

       363
       363
       +
           stroke: #A8B3BB !important;

     

       364
       364
       +
       }

     

       365
       365
       +
       

     

       366
       366
       +
       .main-site-subheader {

     

       367
       367
       +
           border-bottom: 1px solid #f7f7f7;

     

       368
       368
       +
           padding-left: 15px;

     

       369
       369
       +
       }

     

       370
       370
       +
       

     

       371
       371
       +
       .home, .categories, .rss, .projects {

     

       372
       372
       +
           padding-left: 5px;

     

       373
       373
       +
           padding-right: 10px;

     

       374
       374
       +
           padding-top: 5px;

     

       375
       375
       +
           padding-bottom: 5px;

     

       376
       376
       +
           vertical-align: middle;

     

       377
       377
       +
           display: inline-block;

     

       378
       378
       +
           justify-content: center;

     

       379
       379
       +
           border-right: 1px solid #f7f7f7;

     

       380
       380
       +
           color: #555555; 

     

       381
       381
       +
       }

     

       382
       382
       +
       

     

       383
       383
       +
       .rss, .categories {

     

       384
       384
       +
           padding-left: 14px;

     

       385
       385
       +
           padding-right: 20px;

     

       386
       386
       +
       }

     

       387
       387
       +
       

     

       388
       388
       +
       .home {

     

       389
       389
       +
           padding-right: 14px;

     

       390
       390
       +
       }

     

       391
       391
       +
       

     

       392
       392
       +
       .home-p, .categories-p, .rss-p, .projects-p {

     

       393
       393
       +
          margin-top: auto;

     

       394
       394
       +
          margin-left: auto;

     

       395
       395
       +
          text-align: center;

     

       396
       396
       +
          font-weight: 600;

     

       397
       397
       +
          font-size: 0.7rem; 

     

       398
       398
       +
          font-family:  Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       399
       399
       +
          color: #555555; 

     

       400
       400
       +
       }

     

       401
       401
       +
       

     

       402
       402
       +
       .icon-home, .icon-category, .icon-projects, .icon-rss {

     

       403
       403
       +
           margin-top: 7px;

     

       404
       404
       +
           justify-content: center;

     

       405
       405
       +
           stroke: #555555;

     

       406
       406
       +
       }

     

       407
       407
       +
       

     

       408
       408
       +
       

     

       409
       409
       +
       .icon-home {

     

       410
       410
       +
           margin-left: 21%;

     

       411
       411
       +
       }

     

       412
       412
       +
       

     

       413
       413
       +
       .icon-category {

     

       414
       414
       +
           margin-left: 21%;

     

       415
       415
       +
       }

     

       416
       416
       +
       

     

       417
       417
       +
       .icon-projects {

     

       418
       418
       +
           margin-left: 30%;

     

       419
       419
       +
       }

     

       420
       420
       +
       

     

       421
       421
       +
       .icon-rss {

     

       422
       422
       +
           margin-left: 10%;

     

       423
       423
       +
       }

     

       424
       424
       +
       

     

       425
       425
       +
       /* Notes: Note-heading, Note-subheading, Notes-content, Related Notes */

     

       426
       426
       +
       

     

       427
       427
       +
       .notes-page-subheader {

     

       428
       428
       +
           border-bottom: 1px solid #f7f7f7;

     

       429
       429
       +
           padding-left: 15px;

     

       430
       430
       +
       }

     

       431
       431
       +
       

     

       432
       432
       +
       .notes-page-site-heading a {

     

       433
       433
       +
           text-decoration: none;

     

       434
       434
       +
           font-family:  Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       435
       435
       +
           font-weight: 600;

     

       436
       436
       +
           font-size: 13px;

     

       437
       437
       +
           font-stretch: ultra-condensed;

     

       438
       438
       +
           padding-left: 5px;

     

       439
       439
       +
       }

     

       440
       440
       +
       

     

       441
       441
       +
       .notes-page-main-heading {

     

       442
       442
       +
           margin-top: -25px;

     

       443
       443
       +
           padding-left: 5px;

     

       444
       444
       +
           font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       445
       445
       +
       }

     

       446
       446
       +
       

     

       447
       447
       +
       

     

       448
       448
       +
       .notes-page-heading {

     

       449
       449
       +
           color: #555555;

     

       450
       450
       +
           font-size: 15px;

     

       451
       451
       +
           font-weight: 600;

     

       452
       452
       +
           padding-top: 15px;

     

       453
       453
       +
           font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       454
       454
       +
       }

     

       455
       455
       +
       

     

       456
       456
       +
       .notes-page-heading a {

     

       457
       457
       +
           text-decoration: none;

     

       458
       458
       +
       }

     

       459
       459
       +
       

     

       460
       460
       +
       .notes-page-tagline {

     

       461
       461
       +
           color: #888888;

     

       462
       462
       +
           margin-top: -17px; 

     

       463
       463
       +
           color: #888888;

     

       464
       464
       +
           font-size: 0.7rem; 

     

       465
       465
       +
           font-weight: 550; 

     

       466
       466
       +
       }

     

       467
       467
       +
       

     

       468
       468
       +
       .notes-page-tagline a {

     

       469
       469
       +
           text-decoration: none;

     

       470
       470
       +
           font-style: oblique;

     

       471
       471
       +
       }

     

       472
       472
       +
       

     

       473
       473
       +
       /* Utilities: Disable Selection, Kramdown TOC */

     

       474
       474
       +
       

     

       475
       475
       +
       .disable-select {

     

       476
       476
       +
           user-select: none; /* supported by Chrome and Opera */

     

       477
       477
       +
          -webkit-user-select: none; /* Safari */

     

       478
       478
       +
          -khtml-user-select: none; /* Konqueror HTML */

     

       479
       479
       +
          -moz-user-select: none; /* Firefox */

     

       480
       480
       +
          -ms-user-select: none; /* Internet Explorer/Edge */

     

       481
       481
       +
       }

     

       482
       482
       +
       

     

       483
       483
       +
       .very-small {

     

       484
       484
       +
           font-size: 12px !important;

     

       485
       485
       +
       }

     

       486
       486
       +
       

     

       487
       487
       +
       .medium-small {

     

       488
       488
       +
           font-size: 14px !important;

     

       489
       489
       +
       }

     

       490
       490
       +
       

     

       491
       491
       +
       .small {

     

       492
       492
       +
           font-size: 16px !important;

     

       493
       493
       +
       }

     

       494
       494
       +
       

     

       495
       495
       +
       .small-medium {

     

       496
       496
       +
           font-size: 18px !important;

     

       497
       497
       +
       }

     

       498
       498
       +
       

     

       499
       499
       +
       .medium {

     

       500
       500
       +
           font-size: 22px !important;

     

       501
       501
       +
       }

     

       502
       502
       +
       

     

       503
       503
       +
       .medium-large {

     

       504
       504
       +
           font-size: 25px !important;

     

       505
       505
       +
       }

     

       506
       506
       +
       

     

       507
       507
       +
       .default-color {

     

       508
       508
       +
           color: #555 !important;

     

       509
       509
       +
       }

     

       510
       510
       +
       

     

       511
       511
       +
       .default-background {

     

       512
       512
       +
           background-color: #f7f7f7 !important;

     

       513
       513
       +
       }

     

       514
       514
       +
       

     

       515
       515
       +
       .large {

     

       516
       516
       +
           font-size: 28px !important;

     

       517
       517
       +
       }

     

       518
       518
       +
       

     

       519
       519
       +
       .serif {

     

       520
       520
       +
           font-family: 'EB Garamond', Georgia, serif !important;

     

       521
       521
       +
       }

     

       522
       522
       +
       

     

       523
       523
       +
       .title-sans {

     

       524
       524
       +
           font-family: Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;

     

       525
       525
       +
       }

     

       526
       526
       +
       

     

       527
       527
       +
       .regular-sans {

     

       528
       528
       +
           font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;

     

       529
       529
       +
       }

     

       530
       530
       +
       

     

       531
       531
       +
       .bold {

     

       532
       532
       +
           font-weight: 600 !important;

     

       533
       533
       +
       }

     

       534
       534
       +
       

     

       535
       535
       +
       .very-bold {

     

       536
       536
       +
           font-weight: 800 !important;

     

       537
       537
       +
       }

     

       538
       538
       +
       

     

       539
       539
       +
       .bolder {

     

       540
       540
       +
           font-weight: 500 !important;

     

       541
       541
       +
       }

     

       542
       542
       +
       

     

       543
       543
       +
       .normal {

     

       544
       544
       +
           font-weight: 400 !important;

     

       545
       545
       +
       }

     

       546
       546
       +
       

     

       547
       547
       +
       .regular {

     

       548
       548
       +
           font-style: normal !important;

     

       549
       549
       +
       }

     

       550
       550
       +
       

     

       551
       551
       +
       .oblique {

     

       552
       552
       +
           font-style: oblique !important;

     

       553
       553
       +
       }

     

       554
       554
       +
       

     

       555
       555
       +
       .italic {

     

       556
       556
       +
           font-style: italic !important;

     

       557
       557
       +
       }

     

       558
       558
       +
       

     

       559
       559
       +
       .boxit {

     

       560
       560
       +
       

     

       561
       561
       +
           padding: 20px;

     

       562
       562
       +
           background-color: #f7f7f7;

     

       563
       563
       +
           border-radius: 5px;

     

       564
       564
       +
       }

     

       565
       565
       +
       

     

       566
       566
       +
       #boxit {

     

       567
       567
       +
           padding-left: 20px;

     

       568
       568
       +
           border-radius: 5px;

     

       569
       569
       +
       }

     

       570
       570
       +
       

     

       571
       571
       +
       

     

       572
       572
       +
       #markdown-toc::before {

     

       573
       573
       +
           content: "Contents";

     

       574
       574
       +
           font-weight: bold;

     

       575
       575
       +
           text-decoration: underline;

     

       576
       576
       +
       }

     

       577
       577
       +
       

     

       578
       578
       +
       

     

       579
       579
       +
       #markdown-toc li {

     

       580
       580
       +
           margin-left: 1rem;

     

       581
       581
       +
           list-style: decimal;

     

       582
       582
       +
       }

     

       583
       583
       +
       

     

       584
       584
       +
       #markdown-toc {

     

       585
       585
       +
           border: 1px solid #aaa;

     

       586
       586
       +
           padding: 1.5em;

     

       587
       587
       +
           list-style: decimal;

     

       588
       588
       +
           display: inline-block;

     

       589
       589
       +
       }

     

       590
       590
       +
       

     

       591
       591
       +
       #markdown-toc a {

     

       592
       592
       +
           text-decoration: none;

     

       593
       593
       +
       }

     

       594
       594
       +
       

     

       595
       595
       +
       #markdown-toc a:hover {

     

       596
       596
       +
           text-decoration: underline;

     

       597
       597
       +
       }

     

       598
       598
       +
       

     

       599
       599
       +
       

     

       600
       600
       +
       /* Common custom components between Main Site and Notes: Searchbar, Backbutton, ContentBox, Related Posts/Notes, Copyright,  */

     

       601
       601
       +
       

     

       602
       602
       +
       .searchbar input[type="text"] {

     

       603
       603
       +
           position: relative;

     

       604
       604
       +
           padding-left: 50px;

     

       605
       605
       +
           box-sizing : border-box;

     

       606
       606
       +
           width: 100%;

     

       607
       607
       +
           height: 40px;

     

       608
       608
       +
           border: 0px;

     

       609
       609
       +
           font-family:  Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;

     

       610
       610
       +
           color: #555;

     

       611
       611
       +
           font-size: 18px;

     

       612
       612
       +
           border-bottom: 1px solid #f7f7f7;

     

       613
       613
       +
           background-color: #f7f7f7;

     

       614
       614
       +
       }

     

       615
       615
       +
       

     

       616
       616
       +
       ::placeholder {

     

       617
       617
       +
           color: #999;

     

       618
       618
       +
           font-size: 18px;

     

       619
       619
       +
           font-family:  Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;

     

       620
       620
       +
       }

     

       621
       621
       +
       .searchbar i {

     

       622
       622
       +
           position: absolute;

     

       623
       623
       +
           vertical-align: middle;

     

       624
       624
       +
           margin-top: -2px;

     

       625
       625
       +
           padding-left: 20px;

     

       626
       626
       +
           color: #888; 

     

       627
       627
       +
           padding-top: 12.5px;

     

       628
       628
       +
           z-index: 1;

     

       629
       629
       +
       }

     

       630
       630
       +
         

     

       631
       631
       +
       .searchbar input[type="text"]:focus {

     

       632
       632
       +
           border-color: #f7f7f7;

     

       633
       633
       +
           box-shadow: 0 0 8px 0 #A7D0EB;

     

       634
       634
       +
       }

     

       635
       635
       +
         

     

       636
       636
       +
       .searchbar input[type=text]:hover {

     

       637
       637
       +
           background-color: white;

     

       638
       638
       +
       }

     

       639
       639
       +
         

     

       640
       640
       +
       .searchbar input[type=text]:active,

     

       641
       641
       +
       .searchbar input[type=text]:focus {

     

       642
       642
       +
           background-color: white;

     

       643
       643
       +
           outline: none;

     

       644
       644
       +
       } 

     

       645
       645
       +
       

     

       646
       646
       +
       .search_res {

     

       647
       647
       +
           padding-left: 10px;

     

       648
       648
       +
       }

     

       649
       649
       +
       

     

       650
       650
       +
       .search_res:hover {

     

       651
       651
       +
        background-color: #f4f4f4;

     

       652
       652
       +
       }

     

       653
       653
       +
       

     

       654
       654
       +
       .search_res:hover > a {

     

       655
       655
       +
           font-weight: 600;

     

       656
       656
       +
       }

     

       657
       657
       +
       

     

       658
       658
       +
       #results-container {

     

       659
       659
       +
           display: none;

     

       660
       660
       +
       }

     

       661
       661
       +
       

     

       662
       662
       +
       .back-icon {

     

       663
       663
       +
           background-color: white;

     

       664
       664
       +
           fill: currentColor;

     

       665
       665
       +
           color: #555555;

     

       666
       666
       +
           margin-top: 5px;

     

       667
       667
       +
           padding-left: 5px; 

     

       668
       668
       +
           fill: currentColor;

     

       669
       669
       +
           cursor: pointer;

     

       670
       670
       +
       }

     

       671
       671
       +
       

     

       672
       672
       +
       .back-icon,

     

       673
       673
       +
       .back-p {

     

       674
       674
       +
           vertical-align: middle;

     

       675
       675
       +
           display: inline-block;

     

       676
       676
       +
       }

     

       677
       677
       +
       

     

       678
       678
       +
       .back-p {

     

       679
       679
       +
           color: #555555;

     

       680
       680
       +
           text-decoration: none;

     

       681
       681
       +
           cursor: pointer;

     

       682
       682
       +
           font-weight: 600;

     

       683
       683
       +
       }

     

       684
       684
       +
       

     

       685
       685
       +
       

     

       686
       686
       +
       .feed-title-excerpt-block {

     

       687
       687
       +
           width: 100%;

     

       688
       688
       +
           cursor: pointer;

     

       689
       689
       +
           border-top: 1px solid #f7f7f7;

     

       690
       690
       +
           border-bottom: 1px solid #f7f7f7;

     

       691
       691
       +
       }

     

       692
       692
       +
       

     

       693
       693
       +
       .feed-title-excerpt-block:hover {

     

       694
       694
       +
           background-color: #f7f7f7;

     

       695
       695
       +
       }

     

       696
       696
       +
       

     

       697
       697
       +
       .srccode {

     

       698
       698
       +
           position: absolute;

     

       699
       699
       +
           right: 10px;

     

       700
       700
       +
       }

     

       701
       701
       +
       

     

       702
       702
       +
       .srccode:hover > a > i{

     

       703
       703
       +
           font-weight: 600;

     

       704
       704
       +
       }

     

       705
       705
       +
       

     

       706
       706
       +
       .feed-context {

     

       707
       707
       +
           position: absolute;

     

       708
       708
       +
           right: 10px;

     

       709
       709
       +
           margin-top: 17px;

     

       710
       710
       +
       }

     

       711
       711
       +
       

     

       712
       712
       +
       .feed-context-svg:hover {

     

       713
       713
       +
           background-color: #e9e9e9;

     

       714
       714
       +
           border-radius: 50%;

     

       715
       715
       +
       }

     

       716
       716
       +
       

     

       717
       717
       +
       .feed-title {

     

       718
       718
       +
           color: #555555;

     

       719
       719
       +
           margin-left: 20px;

     

       720
       720
       +
           margin-right: 50px;

     

       721
       721
       +
           font-size: 16px;

     

       722
       722
       +
           font-family:  Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       723
       723
       +
           font-weight: 600;

     

       724
       724
       +
       }

     

       725
       725
       +
       

     

       726
       726
       +
       .feed-excerpt{

     

       727
       727
       +
           color: #555555;

     

       728
       728
       +
           margin-top: -12px;

     

       729
       729
       +
           margin-left: 20px !important;

     

       730
       730
       +
           margin-right: 30px;

     

       731
       731
       +
           font-family:  'IBM Plex Sans', Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       732
       732
       +
           font-size: 15px;

     

       733
       733
       +
       }

     

       734
       734
       +
       

     

       735
       735
       +
       .tags {

     

       736
       736
       +
           list-style: none;

     

       737
       737
       +
           margin: 0;

     

       738
       738
       +
           overflow: hidden; 

     

       739
       739
       +
           padding: 0;

     

       740
       740
       +
       }

     

       741
       741
       +
       

     

       742
       742
       +
       .tags li {

     

       743
       743
       +
           float: left; 

     

       744
       744
       +
       }

     

       745
       745
       +
       

     

       746
       746
       +
       .tag {

     

       747
       747
       +
           color: #555555;

     

       748
       748
       +
           background: #f7f7f7;

     

       749
       749
       +
           text-decoration: none;

     

       750
       750
       +
           display: inline-block;

     

       751
       751
       +
           padding: 0 12px;

     

       752
       752
       +
           border-radius: 32px;

     

       753
       753
       +
           height: auto;

     

       754
       754
       +
           vertical-align: middle;

     

       755
       755
       +
           font-family:  Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       756
       756
       +
           font-weight: normal !important;

     

       757
       757
       +
           font-size: 13px;

     

       758
       758
       +
       }

     

       759
       759
       +
       

     

       760
       760
       +
       .content a {

     

       761
       761
       +
           color: #4183c4;

     

       762
       762
       +
           text-decoration: none;

     

       763
       763
       +
       }

     

       764
       764
       +
       

     

       765
       765
       +
       .content a:hover {

     

       766
       766
       +
           text-decoration: underline;

     

       767
       767
       +
       }

     

       768
       768
       +
       

     

       769
       769
       +
       .sn-right,

     

       770
       770
       +
       .mn-right {

     

       771
       771
       +
           float: right;

     

       772
       772
       +
           clear: right;

     

       773
       773
       +
           font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;

     

       774
       774
       +
           font-size: 14px;

     

       775
       775
       +
           margin-right: -45%;

     

       776
       776
       +
           width: 40%;

     

       777
       777
       +
           margin-top: 0;

     

       778
       778
       +
           margin-bottom: 0;

     

       779
       779
       +
           vertical-align: baseline;

     

       780
       780
       +
           position: relative; 

     

       781
       781
       +
           padding-bottom: 5px;

     

       782
       782
       +
       }

     

       783
       783
       +
       

     

       784
       784
       +
       .sn-left,

     

       785
       785
       +
       .mn-left {

     

       786
       786
       +
           float: left;

     

       787
       787
       +
           clear: left;

     

       788
       788
       +
           font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;

     

       789
       789
       +
           font-size: 14px;

     

       790
       790
       +
           margin-left: -45%;

     

       791
       791
       +
           width: 40%;

     

       792
       792
       +
           margin-top: 0;

     

       793
       793
       +
           margin-bottom: 0;

     

       794
       794
       +
           vertical-align: baseline;

     

       795
       795
       +
           position: relative; 

     

       796
       796
       +
           padding-bottom: 5px;

     

       797
       797
       +
       }

     

       798
       798
       +
       

     

       799
       799
       +
       .sidenote-number {

     

       800
       800
       +
           counter-increment: sidenote-counter; 

     

       801
       801
       +
       }

     

       802
       802
       +
       

     

       803
       803
       +
       .sidenote-number:after,

     

       804
       804
       +
       .sn-left:before,

     

       805
       805
       +
       .sn-right:before {

     

       806
       806
       +
           font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;

     

       807
       807
       +
           position: relative;

     

       808
       808
       +
           vertical-align: baseline; 

     

       809
       809
       +
       }

     

       810
       810
       +
       

     

       811
       811
       +
       .sidenote-number:after {

     

       812
       812
       +
           content: counter(sidenote-counter);

     

       813
       813
       +
           font-size: 12px;

     

       814
       814
       +
           top: -0.5rem;

     

       815
       815
       +
           left: 0.1rem; 

     

       816
       816
       +
       }

     

       817
       817
       +
       

     

       818
       818
       +
       .sn-right:before,

     

       819
       819
       +
       .sn-left:before {

     

       820
       820
       +
           content: counter(sidenote-counter) " ";

     

       821
       821
       +
           font-size: 14px;

     

       822
       822
       +
           top: -0.5rem; 

     

       823
       823
       +
       }

     

       824
       824
       +
       

     

       825
       825
       +
       blockquote .sn-left,

     

       826
       826
       +
       blockquote .mn-left,

     

       827
       827
       +
       li .sn-left,

     

       828
       828
       +
       li .mn-left {

     

       829
       829
       +
           float: left;

     

       830
       830
       +
           clear: left;

     

       831
       831
       +
           margin-left: -58%;

     

       832
       832
       +
           width: 40%;

     

       833
       833
       +
           text-align: left; 

     

       834
       834
       +
       }

     

       835
       835
       +
       

     

       836
       836
       +
       blockquote .sn-right,

     

       837
       837
       +
       blockquote .mn-right,

     

       838
       838
       +
       li .sn-right,

     

       839
       839
       +
       li .mn-right {

     

       840
       840
       +
           float: right;

     

       841
       841
       +
           clear: right;

     

       842
       842
       +
           margin-right: -58%;

     

       843
       843
       +
           width: 40%;

     

       844
       844
       +
           text-align: left; 

     

       845
       845
       +
       }

     

       846
       846
       +
       

     

       847
       847
       +
       

     

       848
       848
       +
       .tooltip {

     

       849
       849
       +
           display:inline;

     

       850
       850
       +
           position:relative;

     

       851
       851
       +
           text-align:left;

     

       852
       852
       +
       }

     

       853
       853
       +
       

     

       854
       854
       +
       

     

       855
       855
       +
       .tooltip bottom {

     

       856
       856
       +
           display: none;

     

       857
       857
       +
       }

     

       858
       858
       +
       

     

       859
       859
       +
       .tooltip .right {

     

       860
       860
       +
           min-width:300px; 

     

       861
       861
       +
           top:50%;

     

       862
       862
       +
           left:100%;

     

       863
       863
       +
           margin-left:20px;

     

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

     

       865
       865
       +
           padding:10px 20px;

     

       866
       866
       +
           color:#555;

     

       867
       867
       +
           background-color:#fff;

     

       868
       868
       +
           font-weight:normal;

     

       869
       869
       +
           font-size:13px;

     

       870
       870
       +
           border-radius:8px;

     

       871
       871
       +
           position:absolute;

     

       872
       872
       +
           z-index:99999999;

     

       873
       873
       +
           box-sizing:border-box;

     

       874
       874
       +
           box-shadow:0 1px 8px #ddd;

     

       875
       875
       +
           display:none;

     

       876
       876
       +
       }

     

       877
       877
       +
       

     

       878
       878
       +
       .tooltip:hover .right {

     

       879
       879
       +
           display:block;

     

       880
       880
       +
       }

     

       881
       881
       +
       

     

       882
       882
       +
       .tooltip .right i {

     

       883
       883
       +
           position:absolute;

     

       884
       884
       +
           top:50%;

     

       885
       885
       +
           right:100%;

     

       886
       886
       +
           margin-top:-12px;

     

       887
       887
       +
           width:12px;

     

       888
       888
       +
           height:24px;

     

       889
       889
       +
           overflow:hidden;

     

       890
       890
       +
       }

     

       891
       891
       +
       

     

       892
       892
       +
       .tooltip .right i::after {

     

       893
       893
       +
           content:'';

     

       894
       894
       +
           position:absolute;

     

       895
       895
       +
           width:12px;

     

       896
       896
       +
           height:12px;

     

       897
       897
       +
           left:0;

     

       898
       898
       +
           top:50%;

     

       899
       899
       +
           transform:translate(50%,-50%) rotate(-45deg);

     

       900
       900
       +
           background-color:#fff;

     

       901
       901
       +
           box-shadow:0 1px 8px #ddd;

     

       902
       902
       +
       }

     

       903
       903
       +
       

     

       904
       904
       +
       .right .tooltip-title {

     

       905
       905
       +
           font-size: 15px;

     

       906
       906
       +
           font-weight: 600;

     

       907
       907
       +
           display: inline-block;

     

       908
       908
       +
       }

     

       909
       909
       +
       

     

       910
       910
       +
       .right .tooltip-excerpt {

     

       911
       911
       +
           font-size: 12px;

     

       912
       912
       +
           display: inline-block;

     

       913
       913
       +
       }

     

       914
       914
       +
       

     

       915
       915
       +
       .right .tooltip-excerpt a {

     

       916
       916
       +
           font-size: 12px;

     

       917
       917
       +
       }

     

       918
       918
       +
       

     

       919
       919
       +
       input.margin-toggle {

     

       920
       920
       +
           display: none; 

     

       921
       921
       +
       }

     

       922
       922
       +
       

     

       923
       923
       +
       .srs-svg {

     

       924
       924
       +
           stroke: #555;

     

       925
       925
       +
       }

     

       926
       926
       +
       

     

       927
       927
       +
       label.sidenote-number {

     

       928
       928
       +
           display: inline; 

     

       929
       929
       +
       }

     

       930
       930
       +
       

     

       931
       931
       +
       label.margin-toggle:not(.sidenote-number) {

     

       932
       932
       +
           display: none; 

     

       933
       933
       +
       }

     

       934
       934
       +
       

     

       935
       935
       +
       .spaced-rep {

     

       936
       936
       +
           display: none;

     

       937
       937
       +
       }

     

       938
       938
       +
       

     

       939
       939
       +
       input.srs-toggle {

     

       940
       940
       +
           display: none; 

     

       941
       941
       +
       }

     

       942
       942
       +
       

     

       943
       943
       +
       label.srs-toggle {

     

       944
       944
       +
           display: inline; 

     

       945
       945
       +
           cursor: pointer;

     

       946
       946
       +
       }

     

       947
       947
       +
       

     

       948
       948
       +
       .srs-toggle:checked + .spaced-rep{

     

       949
       949
       +
           display: block !important;

     

       950
       950
       +
           left: 1rem;

     

       951
       951
       +
           clear: both;

     

       952
       952
       +
           margin: 1rem 2.5%;

     

       953
       953
       +
           vertical-align: baseline;

     

       954
       954
       +
           position: relative; 

     

       955
       955
       +
           padding: 12px;

     

       956
       956
       +
           width: 240px;

     

       957
       957
       +
           background-color: #fff;

     

       958
       958
       +
           border: solid 1px #dfdfdf;

     

       959
       959
       +
           border-radius: 5px;

     

       960
       960
       +
           box-shadow: 1px 1px 15px #cfcfcf;

     

       961
       961
       +
           word-wrap:break-word;

     

       962
       962
       +
       }

     

       963
       963
       +
       

     

       964
       964
       +
       .related {

     

       965
       965
       +
           background-color: #f7f7f7;

     

       966
       966
       +
           width: 100%;

     

       967
       967
       +
           min-height: 100px;

     

       968
       968
       +
           border-radius: 10px;

     

       969
       969
       +
       }

     

       970
       970
       +
       

     

       971
       971
       +
       .related h4 {

     

       972
       972
       +
           color: #888888;

     

       973
       973
       +
           padding-top: 20px;

     

       974
       974
       +
           padding-left: 20px

     

       975
       975
       +
       }

     

       976
       976
       +
       

     

       977
       977
       +
       .related-wrapper {

     

       978
       978
       +
           column-count: 2 !important;

     

       979
       979
       +
           display: grid;

     

       980
       980
       +
           grid-template-columns: repeat(2, 1fr);

     

       981
       981
       +
           grid-gap: 10px;

     

       982
       982
       +
       }

     

       983
       983
       +
       

     

       984
       984
       +
       .related-group {

     

       985
       985
       +
           margin-left: 10px;

     

       986
       986
       +
           width: 90% !important;

     

       987
       987
       +
           height: 100%;

     

       988
       988
       +
           border-radius: 10px;

     

       989
       989
       +
           cursor: pointer;

     

       990
       990
       +
       }

     

       991
       991
       +
       

     

       992
       992
       +
       .related-group:hover {

     

       993
       993
       +
           background-color: #ededed !important;

     

       994
       994
       +
       }

     

       995
       995
       +
       

     

       996
       996
       +
       .related-group a {

     

       997
       997
       +
           text-decoration: none;

     

       998
       998
       +
       }

     

       999
       999
       +
       

     

       1000
       1000
       +
       .related-title {

     

       1001
       1001
       +
           padding-left: 10px;

     

       1002
       1002
       +
           padding-right: 10px;

     

       1003
       1003
       +
           font-size: 12px !important;

     

       1004
       1004
       +
           font-family:  Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;

     

       1005
       1005
       +
           font-weight: 600;

     

       1006
       1006
       +
       }

     

       1007
       1007
       +
       

     

       1008
       1008
       +
       .related-excerpt:before {

     

       1009
       1009
       +
           content: "\"";

     

       1010
       1010
       +
       }

     

       1011
       1011
       +
       

     

       1012
       1012
       +
       

     

       1013
       1013
       +
       .related-excerpt:after {

     

       1014
       1014
       +
           content: "\"";

     

       1015
       1015
       +
       }

     

       1016
       1016
       +
       

     

       1017
       1017
       +
       .related-excerpt {

     

       1018
       1018
       +
           color: #555555 !important;

     

       1019
       1019
       +
           padding-left: 10px;

     

       1020
       1020
       +
           padding-right: 5px;

     

       1021
       1021
       +
           font-size: 12px !important;

     

       1022
       1022
       +
       }

     

       1023
       1023
       +
       

     

       1024
       1024
       +
       .scroll-to-top {

     

       1025
       1025
       +
           position: fixed;

     

       1026
       1026
       +
           bottom: 20px;

     

       1027
       1027
       +
           right: 20px;

     

       1028
       1028
       +
           border-radius: 30px;

     

       1029
       1029
       +
           background-color: transparent;

     

       1030
       1030
       +
           background-repeat: no-repeat;

     

       1031
       1031
       +
           cursor: pointer;

     

       1032
       1032
       +
           color: #555;

     

       1033
       1033
       +
           outline: none;

     

       1034
       1034
       +
           border: none;

     

       1035
       1035
       +
           overflow: hidden;

     

       1036
       1036
       +
           font-size: 18px;

     

       1037
       1037
       +
       }

     

       1038
       1038
       +
       

     

       1039
       1039
       +
       .context-menu-res {

     

       1040
       1040
       +
           display: none;

     

       1041
       1041
       +
           position: absolute;

     

       1042
       1042
       +
           z-index: 10;

     

       1043
       1043
       +
           padding: 12px 0;

     

       1044
       1044
       +
           width: 240px;

     

       1045
       1045
       +
           background-color: #fff;

     

       1046
       1046
       +
           border: solid 1px #dfdfdf;

     

       1047
       1047
       +
           border-radius: 5px;

     

       1048
       1048
       +
           box-shadow: 1px 1px 15px #cfcfcf;

     

       1049
       1049
       +
       }

     

       1050
       1050
       +
       

     

       1051
       1051
       +
       .context-menu-res li {

     

       1052
       1052
       +
           line-height: 0.8rem;

     

       1053
       1053
       +
           padding-left: 0.2rem;

     

       1054
       1054
       +
           padding-top: 0.3rem;

     

       1055
       1055
       +
           padding-bottom: 0.3rem;

     

       1056
       1056
       +
       }

     

       1057
       1057
       +
       

     

       1058
       1058
       +
       .context-menu-res--active {

     

       1059
       1059
       +
           display: block;

     

       1060
       1060
       +
       }

     

       1061
       1061
       +
       

     

       1062
       1062
       +
       .context-menu-res li:hover {

     

       1063
       1063
       +
           color: #555;

     

       1064
       1064
       +
           background-color: #f4f4f4;

     

       1065
       1065
       +
       }

     

       1066
       1066
       +
       

     

       1067
       1067
       +
       .context-menu-res li:hover >  .context-menu-res__link {

     

       1068
       1068
       +
           font-weight: bold;

     

       1069
       1069
       +
       }

     

       1070
       1070
       +
       

     

       1071
       1071
       +
       .context-menu-res__link {

     

       1072
       1072
       +
           color: #555;

     

       1073
       1073
       +
           text-decoration: none;

     

       1074
       1074
       +
       }

     

       1075
       1075
       +
       

     

       1076
       1076
       +
       

     

       1077
       1077
       +
       

     

       1078
       1078
       +
       /* context-menu styling */

     

       1079
       1079
       +
       .context-menu {

     

       1080
       1080
       +
           display: none;

     

       1081
       1081
       +
           position: absolute;

     

       1082
       1082
       +
           z-index: 10;

     

       1083
       1083
       +
           padding: 12px 0;

     

       1084
       1084
       +
           width: 177px;

     

       1085
       1085
       +
           background-color: #fff;

     

       1086
       1086
       +
           border: solid 1px #dfdfdf;

     

       1087
       1087
       +
           border-radius: 5px;

     

       1088
       1088
       +
           box-shadow: 1px 1px 15px #cfcfcf;

     

       1089
       1089
       +
         }

     

       1090
       1090
       +
         

     

       1091
       1091
       +
       .context-menu--active {

     

       1092
       1092
       +
         display: block;

     

       1093
       1093
       +
       }

     

       1094
       1094
       +
       

     

       1095
       1095
       +
       .context-menu__items {

     

       1096
       1096
       +
         list-style: none;

     

       1097
       1097
       +
         margin: 0;

     

       1098
       1098
       +
         padding-left: 6px;

     

       1099
       1099
       +
         padding-right: 6px;

     

       1100
       1100
       +
       }

     

       1101
       1101
       +
       

     

       1102
       1102
       +
       .context-menu__item {

     

       1103
       1103
       +
         display: block;

     

       1104
       1104
       +
         margin-bottom: 4px;

     

       1105
       1105
       +
       }

     

       1106
       1106
       +
       

     

       1107
       1107
       +
       .context-menu__item:last-child {

     

       1108
       1108
       +
         margin-bottom: 0;

     

       1109
       1109
       +
       }

     

       1110
       1110
       +
       

     

       1111
       1111
       +
       .context-menu__link {

     

       1112
       1112
       +
         display: block;

     

       1113
       1113
       +
         padding: 4px 12px;

     

       1114
       1114
       +
         color: #555;

     

       1115
       1115
       +
         text-decoration: none;

     

       1116
       1116
       +
         font-size: 12px;

     

       1117
       1117
       +
         font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

     

       1118
       1118
       +
       }

     

       1119
       1119
       +
       

     

       1120
       1120
       +
       .context-menu__link:hover {

     

       1121
       1121
       +
         color: #555;

     

       1122
       1122
       +
         background-color: #f4f4f4;

     

       1123
       1123
       +
       }

     

       1124
       1124
       +
       

     

       1125
       1125
       +
       .popup {

     

       1126
       1126
       +
        position: absolute;

     

       1127
       1127
       +
        display: none;

     

       1128
       1128
       +
       }

     

       1129
       1129
       +
       

     

       1130
       1130
       +
       #copyright {

     

       1131
       1131
       +
           margin-left: 20px;

     

       1132
       1132
       +
       }

     

       1133
       1133
       +
       

     

       1134
       1134
       +
       #copyright-notice {

     

       1135
       1135
       +
           font-size: 0.7rem;

     

       1136
       1136
       +
           font-weight: 700;

     

       1137
       1137
       +
       }

     

       1138
       1138
       +
       

     

       1139
       1139
       +
       /* IE-SPECIFIC STYLING */

     

       1140
       1140
       +
       

     

       1141
       1141
       +
       

     

       1142
       1142
       +
       .internet-explorer-heading {

     

       1143
       1143
       +
           display: none;

     

       1144
       1144
       +
       }

     

       1145
       1145
       +
       

     

       1146
       1146
       +
       /* Apparently IE10+ do not support conditionals. F*ck Me! */

     

       1147
       1147
       +
       @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

     

       1148
       1148
       +
           .userdesc,

     

       1149
       1149
       +
           .username,

     

       1150
       1150
       +
           .link-to-notes,

     

       1151
       1151
       +
           .avatar,

     

       1152
       1152
       +
           .related {

     

       1153
       1153
       +
               display: none !important;

     

       1154
       1154
       +
           }

     

       1155
       1155
       +
       

     

       1156
       1156
       +
           .dashboard, .site-heading {

     

       1157
       1157
       +
               display: inline-block;

     

       1158
       1158
       +
           }

     

       1159
       1159
       +
           

     

       1160
       1160
       +
           #scroll-head,

     

       1161
       1161
       +
           #disqus_thread {

     

       1162
       1162
       +
               display: none !important;

     

       1163
       1163
       +
           }

     

       1164
       1164
       +
           .sn-right,

     

       1165
       1165
       +
           .mn-right {

     

       1166
       1166
       +
               margin-right: -30%;

     

       1167
       1167
       +
               width: 25%;

     

       1168
       1168
       +
           }

     

       1169
       1169
       +
           .sn-left,

     

       1170
       1170
       +
           .mn-left {

     

       1171
       1171
       +
               margin-left: -30%;

     

       1172
       1172
       +
               width: 25%;

     

       1173
       1173
       +
           }

     

       1174
       1174
       +
       

     

       1175
       1175
       +
           blockquote .sn-left,

     

       1176
       1176
       +
           blockquote .mn-left,

     

       1177
       1177
       +
           li .sn-left,

     

       1178
       1178
       +
           li .mn-left {

     

       1179
       1179
       +
           float: left;

     

       1180
       1180
       +
           clear: left;

     

       1181
       1181
       +
           margin-left: -60%;

     

       1182
       1182
       +
           width: 24% !important;

     

       1183
       1183
       +
           text-align: left; 

     

       1184
       1184
       +
       }

     

       1185
       1185
       +
       

     

       1186
       1186
       +
           blockquote .sn-right,

     

       1187
       1187
       +
           blockquote .mn-right,

     

       1188
       1188
       +
           li .sn-right,

     

       1189
       1189
       +
           li .mn-right {

     

       1190
       1190
       +
           float: right;

     

       1191
       1191
       +
           clear: right;

     

       1192
       1192
       +
           margin-right: -60%;

     

       1193
       1193
       +
           width: 24% !important;

     

       1194
       1194
       +
           text-align: left; 

     

       1195
       1195
       +
       }

     

       1196
       1196
       +
           .box {

     

       1197
       1197
       +
               border: none !important;

     

       1198
       1198
       +
           }

     

       1199
       1199
       +
       }

     

       1200
       1200
       +
       

     

       1201
       1201
       +
       @media screen and (max-width: 1200px){

     

       1202
       1202
       +
        .sn-right,

     

       1203
       1203
       +
       .mn-right {

     

       1204
       1204
       +
           margin-right: -35%;

     

       1205
       1205
       +
           width: 30%;

     

       1206
       1206
       +
       }

     

       1207
       1207
       +
       

     

       1208
       1208
       +
       .sn-left,

     

       1209
       1209
       +
       .mn-left {

     

       1210
       1210
       +
           margin-left: -35%;

     

       1211
       1211
       +
           width: 30%;

     

       1212
       1212
       +
       }

     

       1213
       1213
       +
       .related-group {

     

       1214
       1214
       +
           background-color: #ededed !important;

     

       1215
       1215
       +
           margin-left: 10px;

     

       1216
       1216
       +
           width: 90% !important;

     

       1217
       1217
       +
           height: 100%;

     

       1218
       1218
       +
           border-radius: 10px;

     

       1219
       1219
       +
           cursor: pointer;

     

       1220
       1220
       +
       }

     

       1221
       1221
       +
       }

     

       1222
       1222
       +
       

     

       1223
       1223
       +
       @media screen and (max-width: 1024px) {

     

       1224
       1224
       +
           .tooltip .right {

     

       1225
       1225
       +
               display: none;

     

       1226
       1226
       +
           }

     

       1227
       1227
       +
       

     

       1228
       1228
       +
           .tooltip .bottom {

     

       1229
       1229
       +
               min-width:300px; 

     

       1230
       1230
       +
               top:40px;

     

       1231
       1231
       +
               left:50%;

     

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

     

       1233
       1233
       +
               padding:10px 20px;

     

       1234
       1234
       +
               color:#555;

     

       1235
       1235
       +
               background-color:#fff;

     

       1236
       1236
       +
               font-weight:normal;

     

       1237
       1237
       +
               font-size:13px;

     

       1238
       1238
       +
               border-radius:8px;

     

       1239
       1239
       +
               position:absolute;

     

       1240
       1240
       +
               z-index:99999999;

     

       1241
       1241
       +
               box-sizing:border-box;

     

       1242
       1242
       +
               box-shadow:0 1px 8px #ddd;

     

       1243
       1243
       +
               display:none;

     

       1244
       1244
       +
           }

     

       1245
       1245
       +
           

     

       1246
       1246
       +
           .tooltip:hover .bottom {

     

       1247
       1247
       +
               display:block;

     

       1248
       1248
       +
           }

     

       1249
       1249
       +
       

     

       1250
       1250
       +
           .tooltip .bottom i {

     

       1251
       1251
       +
               position:absolute;

     

       1252
       1252
       +
               bottom:100%;

     

       1253
       1253
       +
               left:50%;

     

       1254
       1254
       +
               margin-left:-12px;

     

       1255
       1255
       +
               width:24px;

     

       1256
       1256
       +
               height:12px;

     

       1257
       1257
       +
               overflow:hidden;

     

       1258
       1258
       +
           }

     

       1259
       1259
       +
           

     

       1260
       1260
       +
           .tooltip .bottom i::after {

     

       1261
       1261
       +
               content:'';

     

       1262
       1262
       +
               position:absolute;

     

       1263
       1263
       +
               width:12px;

     

       1264
       1264
       +
               height:12px;

     

       1265
       1265
       +
               left:50%;

     

       1266
       1266
       +
               transform:translate(-50%,50%) rotate(45deg);

     

       1267
       1267
       +
               background-color:#fff;

     

       1268
       1268
       +
               box-shadow:0 1px 8px #ddd;

     

       1269
       1269
       +
           }

     

       1270
       1270
       +
           

     

       1271
       1271
       +
           .bottom .tooltip-title {

     

       1272
       1272
       +
               font-size: 15px;

     

       1273
       1273
       +
               font-weight: 500;

     

       1274
       1274
       +
               display: inline-block;

     

       1275
       1275
       +
           }

     

       1276
       1276
       +
           

     

       1277
       1277
       +
           .bottom .tooltip-excerpt {

     

       1278
       1278
       +
               font-size: 12px;

     

       1279
       1279
       +
               display: inline-block;

     

       1280
       1280
       +
           }    

     

       1281
       1281
       +
       

     

       1282
       1282
       +
           .bottom .tooltip-excerpt a {

     

       1283
       1283
       +
               font-size: 12px;

     

       1284
       1284
       +
           }  

     

       1285
       1285
       +
       }

     

       1286
       1286
       +
       

     

       1287
       1287
       +
       /* smartphones, touchscreens */

     

       1288
       1288
       +
       @media (pointer: coarse) {

     

       1289
       1289
       +
           .tooltip:hover .bottom, .tooltip:hover .right {

     

       1290
       1290
       +
               display: none;

     

       1291
       1291
       +
           }

     

       1292
       1292
       +
           .feed-context {

     

       1293
       1293
       +
               padding: 2px 10px 0px 10px;

     

       1294
       1294
       +
               height: 70px;

     

       1295
       1295
       +
               right: 0px;

     

       1296
       1296
       +
               margin-top: 15px;

     

       1297
       1297
       +
           }

     

       1298
       1298
       +
       }

     

       1299
       1299
       +
       

     

       1300
       1300
       +
       

     

       1301
       1301
       +
       

     

       1302
       1302
       +
       @media screen and (max-width: 800px){

     

       1303
       1303
       +
       

     

       1304
       1304
       +
       .box {

     

       1305
       1305
       +
           width: 80%;

     

       1306
       1306
       +
       }

     

       1307
       1307
       +
       

     

       1308
       1308
       +
       label {

     

       1309
       1309
       +
           cursor: pointer; 

     

       1310
       1310
       +
       }

     

       1311
       1311
       +
       

     

       1312
       1312
       +
       label.margin-toggle:not(.sidenote-number) {

     

       1313
       1313
       +
           display: inline; 

     

       1314
       1314
       +
       }

     

       1315
       1315
       +
       

     

       1316
       1316
       +
       .sn-left, .sn-right,

     

       1317
       1317
       +
       .mn-left, .mn-right {

     

       1318
       1318
       +
           display: none; 

     

       1319
       1319
       +
       }

     

       1320
       1320
       +
       

     

       1321
       1321
       +
       .margin-toggle:checked + .sn-right,

     

       1322
       1322
       +
       .margin-toggle:checked + .sn-left,

     

       1323
       1323
       +
       .margin-toggle:checked + .mn-left,

     

       1324
       1324
       +
       .margin-toggle:checked + .mn-right {

     

       1325
       1325
       +
           display: block;

     

       1326
       1326
       +
           float: left;

     

       1327
       1327
       +
           left: 1rem;

     

       1328
       1328
       +
           clear: both;

     

       1329
       1329
       +
           width: 95%;

     

       1330
       1330
       +
           margin: 1rem 2.5%;

     

       1331
       1331
       +
           vertical-align: baseline;

     

       1332
       1332
       +
           position: relative; 

     

       1333
       1333
       +
       }

     

       1334
       1334
       +
       

     

       1335
       1335
       +
       .sketch-left, .sketch-right {

     

       1336
       1336
       +
           display: inline-block !important;

     

       1337
       1337
       +
           float: left !important;

     

       1338
       1338
       +
           left: 1rem !important;

     

       1339
       1339
       +
           clear: both !important;

     

       1340
       1340
       +
           width: 95% !important;

     

       1341
       1341
       +
           margin: 1rem 2.5% !important;

     

       1342
       1342
       +
           vertical-align: baseline !important;

     

       1343
       1343
       +
           position: relative !important; 

     

       1344
       1344
       +
           padding-bottom: 10px;

     

       1345
       1345
       +
       }

     

       1346
       1346
       +
       }

     

       1347
       1347
       +
       

     

       1348
       1348
       +
       @media screen and (max-width: 500px){

     

       1349
       1349
       +
       .box {

     

       1350
       1350
       +
           width: 100%;

     

       1351
       1351
       +
           max-width: 100% !important;

     

       1352
       1352
       +
           border-left: none !important;

     

       1353
       1353
       +
           border-right: none !important;

     

       1354
       1354
       +
       }

     

       1355
       1355
       +
       .related-wrapper {

     

       1356
       1356
       +
           grid-template-columns: repeat(1, 1fr);

     

       1357
       1357
       +
       }

     

       1358
       1358
       +
       }

     

       1359
       1359
       +
       

     

       1360
       1360
       +
       @media print {

     

       1361
       1361
       +
       .userboard,

     

       1362
       1362
       +
       .avatar,

     

       1363
       1363
       +
       .searchbar,

     

       1364
       1364
       +
       .menu,

     

       1365
       1365
       +
       .related {

     

       1366
       1366
       +
           display: none !important;

     

       1367
       1367
       +
       }

     

       1368
       1368
       +
       

     

       1369
       1369
       +
       #scroll-head,

     

       1370
       1370
       +
       #disqus_thread {

     

       1371
       1371
       +
           display: none !important;

     

       1372
       1372
       +
       }

     

       1373
       1373
       +
       .sn-right,

     

       1374
       1374
       +
       .mn-right {

     

       1375
       1375
       +
           margin-right: -30%;

     

       1376
       1376
       +
           width: 25%;

     

       1377
       1377
       +
       }

     

       1378
       1378
       +
       .sn-left,

     

       1379
       1379
       +
       .mn-left {

     

       1380
       1380
       +
           margin-left: -30%;

     

       1381
       1381
       +
           width: 25%;

     

       1382
       1382
       +
       }

     

       1383
       1383
       +
       .box {

     

       1384
       1384
       +
           border: none !important;

     

       1385
       1385
       +
       }

     

       1386
       1386
       +
       }

     

       1387
       1387
       +
       

     

       1388
       1388
       +
       

     

       1389
       1389
       +
       /* DISQUS THREAD MARGIN OVERRIDE FOR LEGIBILITY, DO NOT TOUCH */

     

       1390
       1390
       +
       #disqus_thread {

     

       1391
       1391
       +
           margin-left: 10px;

     

       1392
       1392
       +
           margin-right: 10px;

     

       1393
       1393
       +
       }

assets/img/backlinks.png