Updated OS icons

This commit is contained in:
Kristofers Solo 2023-06-29 22:42:11 +00:00
parent 3ba83cdc8e
commit 41be895ae9
5 changed files with 67 additions and 40 deletions

View File

@ -18,9 +18,9 @@
<div class="border border-steelblue-100 p-8 flex flex-row gap-4 justify-between"> <div class="border border-steelblue-100 p-8 flex flex-row gap-4 justify-between">
<a href="{{ project.get_absolute_url }}" <a href="{{ project.get_absolute_url }}"
class="hover:text-steelblue-100 transition duration-300 ease-linear"> class="hover:text-steelblue-100 transition duration-300 ease-linear">
<h2 class="font-abel text-2xl">{{ project.name }}</h2> <h2 class="font-abel text-3xl">{{ project.name }}</h2>
</a> </a>
<p class="max-w-xs text-justify">{{ project.description|slice:500 }}</p> <p class="max-w-2xl text-justify">{{ project.description|slice:500 }}</p>
</div> </div>
{% empty %} {% empty %}
<p class="text-center font-abel text-xl">No projects yet.</p> <p class="text-center font-abel text-xl">No projects yet.</p>

View File

@ -13,38 +13,66 @@
</h2> </h2>
<!-- os platform icons --> <!-- os platform icons -->
<div class="my-4 flex justify-center items-center gap-x-4"> <div class="my-4 flex justify-center items-center gap-x-4">
<a href="/search/?q=linux"><i class="fa-brands fa-linux fa-lg hover:text-lightsteelblue-200 transform duration-200 ease-linear <!-- linux -->
{% if project.runs_on_linux %} <a href="/search/?q=linux">
text-lightsteelblue-100 <span title="Linux"
{% else %} class="hover:text-lightsteelblue-200 transform duration-200 ease-linear
text-slategray-200 {% if project.runs_on_linux %}
{% endif %}"></i></a> text-lightsteelblue-100
<a href="/search/?q=windows"><i class="fa-brands fa-windows fa-lg hover:text-lightsteelblue-200 transform duration-200 ease-linear {% else %}
{% if project.runs_on_windows %} text-slategray-200
text-lightsteelblue-100 {% endif %}">
{% else %} <i class="fa-brands fa-linux fa-lg"></i>
text-slategray-200 </span>
{% endif %}"></i></a> </a>
<a href="/search/?q=macos"><i class="fa-brands fa-apple fa-lg hover:text-lightsteelblue-200 transform duration-200 ease-linear <!-- windows -->
{% if project.runs_on_macos %} <a href="/search/?q=windows">
text-lightsteelblue-100 <span title="Windows"
{% else %} class="hover:text-lightsteelblue-200 transform duration-200 ease-linear
text-slategray-200 {% if project.runs_on_windows %}
{% endif %}"></i></a> text-lightsteelblue-100
<a href="/search/?q=ios"><i id="ios" {% else %}
class="fa-brands fa-app-store-ios fa-lg hover:text-lightsteelblue-200 transform duration-200 ease-linear text-slategray-200
{% if project.runs_on_ios %} {% endif %}">
text-lightsteelblue-100 <i class="fa-brands fa-windows fa-lg"></i>
{% else %} </span>
text-slategray-200 </a>
{% endif %}"></i></a> <!-- macos -->
<a href="/search/?q=android"><i id="android" <a href="/search/?q=macos">
class="fa-brands fa-android fa-lg hover:text-lightsteelblue-200 transform duration-200 ease-linear <span title="macOS"
{% if project.runs_on_android %} class="hover:text-lightsteelblue-200 transform duration-200 ease-linear
text-lightsteelblue-100 {% if project.runs_on_macos %}
{% else %} text-lightsteelblue-100
text-slategray-200 {% else %}
{% endif %}"></i></a> text-slategray-200
{% endif %}">
<i class="fa-brands fa-apple fa-lg"></i>
</span>
</a>
<!-- ios -->
<a href="/search/?q=ios">
<span title="iOS"
class="fa-lg hover:text-lightsteelblue-200 transform duration-200 ease-linear
{% if project.runs_on_ios %}
text-lightsteelblue-100
{% else %}
text-slategray-200
{% endif %}">
<i class="fa-brands fa-app-store-ios"></i>
</span>
</a>
<!-- android -->
<a href="/search/?q=android">
<span title="Android"
class="hover:text-lightsteelblue-200 transform duration-200 ease-linear
{% if project.runs_on_android %}
text-lightsteelblue-100
{% else %}
text-slategray-200
{% endif %}">
<i class="fa-brands fa-android fa-lg"></i>
</span>
</a>
</div> </div>
<!-- tags --> <!-- tags -->
<div class="my-8 flex flex-wrap justify-center items-start gap-2"> <div class="my-8 flex flex-wrap justify-center items-start gap-2">

View File

@ -10,9 +10,9 @@
<div class="border border-steelblue-100 p-8 flex flex-row gap-4 justify-between"> <div class="border border-steelblue-100 p-8 flex flex-row gap-4 justify-between">
<a href="{{ project.get_absolute_url }}" <a href="{{ project.get_absolute_url }}"
class="hover:text-steelblue-100 transition duration-300 ease-linear"> class="hover:text-steelblue-100 transition duration-300 ease-linear">
<h2 class="font-abel text-2xl">{{ project.name }}</h2> <h2 class="font-abel text-3xl">{{ project.name }}</h2>
</a> </a>
<p class="max-w-xs text-justify">{{ project.description|slice:500 }}</p> <p class="max-w-2xl text-justify">{{ project.description|slice:500 }}</p>
</div> </div>
{% empty %} {% empty %}
<p class="text-center font-abel text-xl">No projects yet.</p> <p class="text-center font-abel text-xl">No projects yet.</p>

View File

@ -38,7 +38,7 @@ body {
} }
.button { .button {
@apply font-abel px-12 py-2 border rounded-md transform ease-linear duration-100 hover:bg-opacity-60; @apply font-condensed text-xl px-12 py-2 border rounded-md transform ease-linear duration-100 hover:bg-opacity-60;
} }
.submit-button-disabled { .submit-button-disabled {

View File

@ -27,7 +27,7 @@
<header class="flex justify-between items-center px-6 py-2 font-abel text-xl"> <header class="flex justify-between items-center px-6 py-2 font-abel text-xl">
<div class="flex justify-between"> <div class="flex justify-between">
<!-- logo --> <!-- logo -->
<div class="flex items-center text-4xl font-abel"> <div class="flex items-center text-4xl font-rationale">
<img class="" <img class=""
width="40" width="40"
src="{% static 'img/icons/logo.svg' %}" src="{% static 'img/icons/logo.svg' %}"
@ -82,10 +82,9 @@
<p> <p>
FOSSDB is a passion project of <a class="underline" FOSSDB is a passion project of <a class="underline"
href="https://github.com/kristoferssolo" href="https://github.com/kristoferssolo"
target="_blank">@kristoferssolo</a> and a dedicated community of reporters. target="_blank">@kristoferssolo</a>.
</p> </p>
<!-- TODO: finish these sentences --> <!-- TODO: finish these sentences -->
<p>This site uses data from GitHub as well as data...</p>
<p>This site has no affiliation with GitHub or any other hosting platform.</p> <p>This site has no affiliation with GitHub or any other hosting platform.</p>
</div> </div>
<div></div> <div></div>