fixing layout issues in website

This commit is contained in:
Chris Cochrun 2025-04-19 22:45:46 -05:00
parent 8967915bd1
commit d14aa8aa6b
2 changed files with 99 additions and 74 deletions

View file

@ -41,6 +41,7 @@
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
@ -311,6 +312,15 @@
.mx-8 {
margin-inline: calc(var(--spacing) * 8);
}
.mx-10 {
margin-inline: calc(var(--spacing) * 10);
}
.mx-16 {
margin-inline: calc(var(--spacing) * 16);
}
.mx-24 {
margin-inline: calc(var(--spacing) * 24);
}
.mx-auto {
margin-inline: auto;
}
@ -462,6 +472,9 @@
.h-64 {
height: calc(var(--spacing) * 64);
}
.h-80 {
height: calc(var(--spacing) * 80);
}
.h-full {
height: 100%;
}
@ -477,6 +490,9 @@
.w-2\/3 {
width: calc(2/3 * 100%);
}
.w-3\/4 {
width: calc(3/4 * 100%);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
@ -510,6 +526,9 @@
.w-64 {
width: calc(var(--spacing) * 64);
}
.w-80 {
width: calc(var(--spacing) * 80);
}
.w-auto {
width: auto;
}
@ -866,6 +885,10 @@
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));

View file

@ -1,11 +1,12 @@
{% extends "layout.html" %}
{% block content %}
<div class="flex items-center flex-col mt-16">
<h1 class="text-xl text-bold">
{{ config.extra.index.title }}
<div class="flex flex-col items-center">
<div class="flex flex-col mt-16 w-3/4">
<h1 class="text-3xl text-bold">
{{ config.extra.index.title }} 🎉
</h1>
<img class="rounded-full h-40 w-40" src="{{ config.extra.index.image }}" alt="{{ config.extra.index.image_alt }}">
<!-- <img class="rounded-full h-40 w-40" src="{{ config.extra.index.image }}" alt="{{ config.extra.index.image_alt }}"> -->
<div class="flex flex-wrap space-x-4 mt-7">
{% if config.extra.social.codeberg %}
<a href="{{config.extra.social.codeberg}}" target="_blank">
@ -74,8 +75,9 @@
</div>
<!-- Content -->
<div class="text-bold mt-2 w-2/3 text-center p-4">
<div class="text-bold mt-2">
{{ section.content | safe }}
</div>
</div>
</div>
{% endblock content %}