fixing some things

This commit is contained in:
Chris Cochrun 2025-06-25 07:12:13 -05:00
parent bfd54e6918
commit cc089e8cdc
2 changed files with 43 additions and 5 deletions

View file

@ -310,6 +310,9 @@
.m-300 {
margin: calc(var(--spacing) * 300);
}
.mx-5 {
margin-inline: calc(var(--spacing) * 5);
}
.mx-8 {
margin-inline: calc(var(--spacing) * 8);
}
@ -361,6 +364,9 @@
.mr-4 {
margin-right: calc(var(--spacing) * 4);
}
.mr-5 {
margin-right: calc(var(--spacing) * 5);
}
.mb-2 {
margin-bottom: calc(var(--spacing) * 2);
}
@ -388,6 +394,9 @@
.ml-4 {
margin-left: calc(var(--spacing) * 4);
}
.ml-5 {
margin-left: calc(var(--spacing) * 5);
}
.ml-\[-0\.2em\] {
margin-left: -0.2em;
}
@ -467,6 +476,9 @@
.h-64 {
height: calc(var(--spacing) * 64);
}
.h-96 {
height: calc(var(--spacing) * 96);
}
.h-full {
height: 100%;
}
@ -530,6 +542,9 @@
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.flex-3 {
flex: 3;
}
@ -774,6 +789,9 @@
.object-cover {
object-fit: cover;
}
.object-top {
object-position: top;
}
.p-1 {
padding: calc(var(--spacing) * 1);
}
@ -801,6 +819,9 @@
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
padding-inline: calc(var(--spacing) * 5);
}
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
@ -1506,6 +1527,16 @@
margin-top: calc(var(--spacing) * 0);
}
}
.md\:h-72 {
@media (width >= 48rem) {
height: calc(var(--spacing) * 72);
}
}
.md\:w-1\/3 {
@media (width >= 48rem) {
width: calc(1/3 * 100%);
}
}
.md\:max-w-md {
@media (width >= 48rem) {
max-width: var(--container-md);
@ -1541,6 +1572,11 @@
display: none;
}
}
.lg\:h-72 {
@media (width >= 64rem) {
height: calc(var(--spacing) * 72);
}
}
.lg\:grid-cols-4 {
@media (width >= 64rem) {
grid-template-columns: repeat(4, minmax(0, 1fr));

View file

@ -36,22 +36,24 @@
{% else %}
{% set resized = "" %}
{% endif %}
<div class="flex flex-wrap space-x-4 border border-2 border-gray-200 dark:border-black rounded-xl p-5 shadow-xl hover:shadow-xl/30 transform transition duration-500 hover:scale-105 bg-gray-200 dark:bg-gray-800 place-content-center cursor-pointer" onclick='location.href="{{ page.permalink }}";'>
<div class="flex flex-wrap space-x-4 border border-2 border-gray-200 dark:border-black rounded-xl shadow-xl hover:shadow-xl/30 transform transition duration-500 hover:scale-105 bg-gray-200 dark:bg-gray-800 place-content-center cursor-pointer" onclick='location.href="{{ page.permalink }}";'>
<!-- Image -->
{% if resized %}
<div class="flex-1 rounded-lg place-content-center">
<img class="rounded-lg" src="{{ resized.url }}"/>
<div class="w-full md:w-1/3 flex-2 rounded-lg place-content-center">
<img class="object-cover object-top w-full h-96 lg:h-72 md:h-72 nozoom rounded-lg" src="{{ resized.url }}"/>
</div>
{% else %}
<div class="ml-5">
</div>
{% endif %}
<div class="flex flex-col flex-3">
<div class="flex flex-col flex-3 mr-5">
<h2 class="text-2xl text-bold"><a href='{{ page.permalink }}'>{{ page.title }}</a></h2>
<p class="text-bold text-ellipsis">{{ page.description | linebreaksbr | safe }}</p>
<!-- Summary -->
<div class="text-bold mt-8">
<div class="text-bold my-2">
<a class="flex py-2" href='{{ page.permalink }}'>
Read More
<svg class="w-6 h-6 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">