safing-web/_includes/project_tablecard.html

<div class="card shadowthing text-left transform scale-95">
  <div class="block  px-8 py-6 rounded-lg">
      <div class="absolute top-0 right-0 overflow-visible mr-16 mt-12 z-20">
        <div class="flex-shrink-0 mt-0">
          <div class="flex ">
            {% for member in card.team %}
              <span class="transform hover:scale-110 duration-150 ease-in-out" tooltip="Raphael"  >
                <img class="inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="{{ site.img_url }}profiles/{{ member | downcase }}.png" alt="{{ member }}">
              </span>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="tabs">
        <div class="tab relative">
          <input class="dropinput" type="checkbox" id="tablecard-{{ include.state }}-{{ forloop.index }}">
          <label style="min-width: 100%; min-height: 115px; display: block;" class="z-10 absolute cursor-pointer" for="tablecard-{{ include.state }}-{{ forloop.index }}">
            <img class="absolute right-0" style="margin-right: 1rem; margin-top: 1.2rem;" id="icon" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
          </label>
          <div class="flex relative ">
            <div>
              <div class="flex">
                {% for tag in card.projects %}
                  {% assign tag_bg_strength = 100 %}

                  {% if tag == 'Portmaster' %}
                    {% assign tag_color = 'blue' %}
                  {% elsif tag == 'SPN' %}
                    {% assign tag_color = 'green' %}
                  {% elsif tag == 'Website' %}
                    {% assign tag_color = 'pink' %}
                  {% elsif tag == 'Backoffice' %}
                    {% assign tag_color = 'gray' %}
                    {% assign tag_bg_strength = 200 %}
                  {% elsif tag == 'Community' %}
                    {% assign tag_color = 'purple' %}
                  {% elsif tag == 'Marketing' %}
                    {% assign tag_color = 'orange' %}
                  {% endif %}
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-{{ tag_color }}-{{ tag_bg_strength }} text-{{ tag_color }}-800 mr-2">
                    {{ tag }}
                  </span>
                {% endfor %}
              </div>
              <div class="flex pt-3 items-center">
                <div>
                  {% if include.state == 'done' %}
                    <img style="min-width: 19px;" src="{{ site.assets_url }}icons/tick.svg" alt="">
                  {% elsif include.state == 'in_progress' %}
                    <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cog.svg" alt="">
                  {% elsif include.state == 'discarded' %}
                    <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cross.svg" alt="">
                  {% elsif include.state == 'backlog' %}
                    <img style="min-width: 19px;" src="{{ site.assets_url }}icons/files.svg" alt="">
                  {% endif %}
                </div>
                <h1 class="pl-3 font-bold text-lg">{{ card.title }}</h1>
              </div>
            </div>
          </div>
          <div style="padding-left: 0; padding-right: 0;" class="tab-content text-md">
            <div class="block py-3">
              <hr>
            <div class="tab relative" id="tabtwo">
              <input class="dropinput" type="checkbox" id="tablecard-description-{{ include.state }}-{{ forloop.index }}">
              <label style="min-width: 100%; min-height: 115px; display: block;" class="z-10 absolute cursor-pointer" for="tablecard-description-{{ include.state }}-{{ forloop.index }}">
                <img class="absolute right-0" style="margin-right: 1rem; margin-top: 0.5rem;" id="icontwo" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
              </label>
              <div class="flex relative">
                <div class="self-center -mt-5">
                  <div class="absolute right-0 mr-12 transform scale-110">
                    </div>
                </div>
                <div>
                  <div class="flex py-3" style="margin-left: 1rem;">
                    <div>
                      <img src="" alt="">
                    </div>
                    <span class=" text-md opacity-50">Description</span>
                  </div>
                </div>
              </div>
            <div style="padding-left: 3; padding-right: 1em; padding-top: 0;"  class="tab-content text-md">
              <p>
                {% for paragraph in card.description %}
                  {{ paragraph }}
                {% endfor %}
              </p>
          </div>
        </div>
        <hr>
        </div>
        <div class="pt-5">
          <h3 class="opacity-75">We Completed the Server Part</h3>
          <p class="">
            The Safing API has come very far. It actually already is online, signing in valid users and responding with information on each users SPN subscription status. Setting the API up securely took quite a lot of planning, but we are happy about the result.
          </p>
        </div>
        <div class="pt-5">
          <h3 class="opacity-75">Designs Are Done Too</h3>
          <p class="">
            Now in the Portmaster part, we both need to provide an interface where you can log in to the SPN and where it displays your current account status. The designs for this have also been completed by Luke.
          </p>
          </div>
          <div class="pt-5">
            <h3 class="opacity-75">What is Missing is The Client Side</h3>
            <p class="">
              The only puzzle piece missing is the frontend implementation, <a href="">Here</a> meaning the Portmaster UI actually showing the designs and making the API calls. This project is nearing its completion, so stay tuned!
            </p>
          </div>
          <div class="pt-12">
            <hr>
            <div class="flex relative pb-2 pt-6 -mt-1">
              <!-- <span style="font-size: 0.8rem;">#866 opened by <strong>BinaryMuse</strong> to atom/github</span> -->
              <span style="font-size: 0.8rem;" class="absolute right-0"><strong>01/6/2020</strong> <span class="opacity-50">~</span> <strong>036/6/2020</strong></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>