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">
<a href="{{ project.get_absolute_url }}"
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>
<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>
{% empty %}
<p class="text-center font-abel text-xl">No projects yet.</p>

View File

@ -13,38 +13,66 @@
</h2>
<!-- os platform icons -->
<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
{% if project.runs_on_linux %}
text-lightsteelblue-100
{% else %}
text-slategray-200
{% endif %}"></i></a>
<a href="/search/?q=windows"><i class="fa-brands fa-windows fa-lg hover:text-lightsteelblue-200 transform duration-200 ease-linear
{% if project.runs_on_windows %}
text-lightsteelblue-100
{% else %}
text-slategray-200
{% endif %}"></i></a>
<a href="/search/?q=macos"><i class="fa-brands fa-apple fa-lg hover:text-lightsteelblue-200 transform duration-200 ease-linear
{% if project.runs_on_macos %}
text-lightsteelblue-100
{% else %}
text-slategray-200
{% endif %}"></i></a>
<a href="/search/?q=ios"><i id="ios"
class="fa-brands fa-app-store-ios 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></a>
<a href="/search/?q=android"><i id="android"
class="fa-brands fa-android fa-lg hover:text-lightsteelblue-200 transform duration-200 ease-linear
{% if project.runs_on_android %}
text-lightsteelblue-100
{% else %}
text-slategray-200
{% endif %}"></i></a>
<!-- linux -->
<a href="/search/?q=linux">
<span title="Linux"
class="hover:text-lightsteelblue-200 transform duration-200 ease-linear
{% if project.runs_on_linux %}
text-lightsteelblue-100
{% else %}
text-slategray-200
{% endif %}">
<i class="fa-brands fa-linux fa-lg"></i>
</span>
</a>
<!-- windows -->
<a href="/search/?q=windows">
<span title="Windows"
class="hover:text-lightsteelblue-200 transform duration-200 ease-linear
{% if project.runs_on_windows %}
text-lightsteelblue-100
{% else %}
text-slategray-200
{% endif %}">
<i class="fa-brands fa-windows fa-lg"></i>
</span>
</a>
<!-- macos -->
<a href="/search/?q=macos">
<span title="macOS"
class="hover:text-lightsteelblue-200 transform duration-200 ease-linear
{% if project.runs_on_macos %}
text-lightsteelblue-100
{% else %}
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>
<!-- tags -->
<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">
<a href="{{ project.get_absolute_url }}"
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>
<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>
{% empty %}
<p class="text-center font-abel text-xl">No projects yet.</p>

View File

@ -38,7 +38,7 @@ body {
}
.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 {

View File

@ -27,7 +27,7 @@
<header class="flex justify-between items-center px-6 py-2 font-abel text-xl">
<div class="flex justify-between">
<!-- logo -->
<div class="flex items-center text-4xl font-abel">
<div class="flex items-center text-4xl font-rationale">
<img class=""
width="40"
src="{% static 'img/icons/logo.svg' %}"
@ -82,10 +82,9 @@
<p>
FOSSDB is a passion project of <a class="underline"
href="https://github.com/kristoferssolo"
target="_blank">@kristoferssolo</a> and a dedicated community of reporters.
target="_blank">@kristoferssolo</a>.
</p>
<!-- 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>
</div>
<div></div>