waylon/htmx-patterns
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

0.1.3 fix mobile style

Browse source
This commit is contained in:
Waylon Walker 2024-04-06 15:20:33 -05:00
parent 9833b2fb77
commit a70c24398a
No known key found for this signature in database
GPG key ID: 66E2BF2B4190EFE4
6 changed files with 17 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -1,5 +1,9 @@
# HTMX-PATTERNS CHANGELOG
## 0.1.3
* fix mobile style
## 0.1.2
* fix seo image size

2
htmx_patterns/__about__.py
View file

@ -1,4 +1,4 @@
# SPDX-FileCopyrightText: 2024-present Waylon S. Walker <waylon@waylonwalker.com>
#
# SPDX-License-Identifier: MIT
__version__ = "0.1.2"
__version__ = "0.1.3"

8
templates/base.html
View file

@ -41,18 +41,20 @@
} %}
<body
class="justify-center items-center min-h-screen bg-gray-900 bg-no-repeat bg-cover bg-gradient-to-b from-pink-950/50 min-w-screen text-shadow-xl text-shadow-zinc-950">
class="justify-center items-center min-h-screen bg-gray-900 bg-no-repeat bg-cover bg-gradient-to-b from-pink-950/50 min-w-screen text-shadow-xl text-shadow-zinc-950 w-screen h-screen">
<div id="grit"
class="absolute top-0 right-0 bottom-0 left-0 justify-center items-center min-w-full bg-repeat bg-cover"
style="background-image: url(https://fokais.com/grit.svg), url(https://fokais.com/grit-light.svg); animation: pulse 10s cubic-bezier(0.4, 0, 0.6, 1) infinite; pointer-events: none">
</div>
<div id="content" class="flex flex-col items-center min-h-screen min-w-screen text-white border-b">
<nav class="flex flex-row gap-8 items-center w-full p-4 bg-black border-b-4 border-gray-800">
<nav
class="flex flex-col sm:flex-row flex-wrap w-screen gap-x-8 gap-y-2 justify-center items-center w-full p-4 bg-black border-b-4 border-gray-800 mb-8">
<!-- <a href="/" class="text-3xl gap-4 font-bold">HTMX PATTERNS</a> -->
<!-- <a href="/infinite" class="text-3xl font-bold text-yellow-400">INFINITE</a> -->
{% for link, url in links.items() %}
<a href="{{ url }}"
class="text-3xl font-bold uppercase {% if not loop.first %}text-yellow-400{% endif %}">{{ link
class="text-xl sm:text-3xl font-bold uppercase {% if not loop.first %}text-yellow-400{% endif %}">{{
link
}}</a>
{% endfor %}
</nav>

2
templates/boosted/person.html
View file

@ -2,7 +2,7 @@
{% block title %}Contact - {{ person_id }} - {{ person.name }}{% endblock %}
{% block content %}
<h1 id="title"
class="inline-block pb-0 mx-auto mt-8 mb-0 text-6xl font-black leading-tight leading-loose text-transparent bg-clip-text bg-gradient-to-r from-red-600 via-pink-500 to-yellow-400 ring-red-500 text-shadow-xl text-shadow-zinc-950 ring-5">
class="inline-block px-4 pb-0 mx-auto mb-0 text-center text-6xl sm:text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-600 via-pink-500 to-yellow-400 ring-red-500 text-shadow-xl text-shadow-zinc-950 ring-5 leading-none">
HTMX PATTERNS - BOOSTED
</h1>

8
templates/index.html
View file

@ -1,19 +1,19 @@
{% extends "base.html" %}
{% block content %}
<h1 id="title"
class="inline-block pb-0 mx-auto mb-0 text-8xl font-black leading-tight leading-loose text-transparent bg-clip-text bg-gradient-to-r from-red-600 via-pink-500 to-yellow-400 ring-red-500 text-shadow-xl text-shadow-zinc-950 ring-5">
class="inline-block px-4 pb-0 mx-auto mb-0 text-center text-6xl sm:text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-600 via-pink-500 to-yellow-400 ring-red-500 text-shadow-xl text-shadow-zinc-950 ring-5 leading-none">
HTMX PATTERNS
</h1>
<p class='text-3xl font-bold mt-0 mb-16 max-w-xl text-center prose-xl'>
<p class='text-3xl px-2 font-bold mt-0 mb-16 max-w-xl text-center prose-xl'>
A collection of HTMX patterns
</p>
<ul id="patterns" class="grid grid-cols-3 gap-4">
<ul id="patterns" class="flex flex-col sm:grid grid-cols-3 gap-4">
{% for link, url in links.items() %}
<li class='w-full'>
<a href="{{ url }}"
class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full">
class="cursor-pointer block bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full">
{{ link }}
</a>
</li>

4
templates/infinite/persons.html
View file

@ -2,7 +2,7 @@
{% block title %}Contacts List{% endblock %}
{% block content %}
<h1 id="title"
class="inline-block pb-0 mx-auto mt-8 mb-0 text-6xl font-black leading-tight leading-loose text-transparent bg-clip-text bg-gradient-to-r from-red-600 via-pink-500 to-yellow-400 ring-red-500 text-shadow-xl text-shadow-zinc-950 ring-5">
class="inline-block px-4 pb-0 mx-auto mb-0 text-center text-6xl sm:text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-600 via-pink-500 to-yellow-400 ring-red-500 text-shadow-xl text-shadow-zinc-950 ring-5 leading-none">
HTMX PATTERNS - INFINITE
</h1>
@ -10,7 +10,7 @@
Contacts List
</p>
<ul id="persons" class="flex flex-col gap-4 mb-16">
<ul id="persons" class="flex flex-col gap-4 mb-16 px-4 sm:px-0">
{% include "infinite/persons_partial.html" %}
</ul>