Jekyll Liquid Variables as Inline CSS Values

Jekyll - can you use liquid to reference front matter variables

Inline styling is the most acceptable method. You define a page variable that is specific for this page, therefore it does not belong in the global stylesheet (IMO). You should do it like this:

Create a .md file like this:

---
section-1-color: #222222
layout: default
---

Lorem ipsum

Creat a layout file (default.html) like this:

<section class="section-1" style="background-color: {% page.section-1-color %};">
{{ content }}
</section>

But... to answer your question: It is possible, see this answer.

How to stop style.css to be considered as the Jekyll Page?

You should use site.html_pages instead of site.pages, as it will exclude all pages that don't output with the .html extension (i.e. style.css). You'll find both listed here:

https://jekyllrb.com/docs/variables/#site-variables

Generating parametric pages with Jekyll

Depending on how many entries you're looking at, it may be more advantageous to load all of the entries into one page and filter what is actually displayed in the DOM using Javascript. So really, you'd have your main page look the same, but also have the list below it:

---
layout: default
permalink: /main/
---

<a class="letters" onclick="expand('A')">A</a>
<a class="letters" onclick="expand('B')">B</a>
<a class="letters" onclick="expand('C')">C</a>
...
<a class="letters" onclick="expand('Y')">Y</a>
<a class="letters" onclick="expand('Z')">Z</a>

{%- for post in sorted_post -%}
  <a href="{{post.url}}" data-letter="{{post.name | slice: 0, 1 | capitalize}}" hidden>
    {{post.title}}
  </a>
{% endfor %}

You could then hide all of the sorted posts and a simple script would allow you to show and hide all entries for each letter. This is probably the easiest combination of Jekyll and JS that I can think of. Here is the script that would show and hide the words:

function expand(letter) {
  const words = document.querySelectorAll('.word');
    words.forEach(word =>word.style.display = (word.dataset.letter === letter) ?'inline-block' :'none');
  }

Here is a working model of what the output HTML would look like:

function expand(letter) {  const words = document.querySelectorAll('.word');  words.forEach(word => word.style.display = (word.dataset.letter === letter) ? 'inline-block' : 'none');}

.word {  display: none;}

<div>  <a class="letters" onclick="expand('A')">A</a>  <a class="letters" onclick="expand('B')">B</a>  <a class="letters" onclick="expand('C')">C</a>  <a class="letters" onclick="">...</a>  <a class="letters" onclick="expand('Y')">Y</a>  <a class="letters" onclick="expand('Z')">Z</a></div>
<a href="#" class="word" data-letter="A">Apple</a><a href="#" class="word" data-letter="B">Banana</a><a href="#" class="word" data-letter="B">Boat</a><a href="#" class="word" data-letter="C">Cat</a><a href="#" class="word" data-letter="C">Car</a><a href="#" class="word" data-letter="C">Corral</a><a href="#" class="word" data-letter="Y">Yarn</a><a href="#" class="word" data-letter="Z">Zoo</a>

How to compare liquid variables?

You can do something like this:

{% assign numbers = '12,323,9,121,11,1,1116,12,3,1' %}
{% assign numbers_array = numbers | split: ',' %}

{% assign highest_number = numbers_array | first | plus: 0 %}

{% for number in numbers_array %}
    {% assign cur_number = number | plus: 0 %}

    {% if cur_number >= highest_number %}

        {% assign highest_number = number | plus: 0 %}
    {% endif %}
{% endfor %}

The Highest Number is: {{ highest_number }}

Where you create a string with all of the numbers separated with , and split them by , in order to create an array.

You save the first number as the highest and start a loop to compare each number to the current number set in the highest_number. If the cur_number is higher we set that number to highest_number.

That's pretty much the logic.

conditionally apply two different classes in liquid file --not working properly

One way to remove the {% if %} conditions from the class attribute would be to:

Create a liquid variable that contains the class names beforehand
Print the variable value inside the class attribute

{% assign custom_classes = '' %}
{% if item.dropdown %}
  {% assign custom_classes = custom_classes | append: 'has-dropdown ' %}
{% endif %}
{% if item.active %}
  {% assign custom_classes = custom_classes | append: 'active ' %}
{% endif %}

<li class="{{ custom_classes }}">  
  ...
</li>