cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: button styles

Browse source
This commit is contained in:
Cory Dransfeldt 2023-12-09 15:53:08 -08:00
parent 9d14995f3e
commit ffd281b1bd
No known key found for this signature in database
5 changed files with 13 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "2.4.0", "version": "2.4.1",
"description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.", "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
"main": "index.html", "main": "index.html",
"scripts": { "scripts": {

2
src/_includes/partials/post-tags.liquid
View file

@ -3,7 +3,7 @@
{% if tag != "posts" %} {% if tag != "posts" %}
<a href="/tags/{{ tag }}"> <a href="/tags/{{ tag }}">
<div <div
class="tag--button tag--button__small" class="pill--button pill--button__small"
data-pagefind-filter="tags">{{ tag }}</div> data-pagefind-filter="tags">{{ tag }}</div>
</a> </a>
{% endif %} {% endif %}

2
src/contact.md
View file

@ -39,5 +39,5 @@ Fill out the form below to get in touch (or ping me on [Mastodon](https://social
<input type="email" name="email" placeholder="Email" class="w-full outline-none p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300" /> <input type="email" name="email" placeholder="Email" class="w-full outline-none p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300" />
</label> </label>
<textarea name="message" placeholder="Message" class="w-full md:w-3/4 h-40 resize-none outline-none p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300"></textarea> <textarea name="message" placeholder="Message" class="w-full md:w-3/4 h-40 resize-none outline-none p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300"></textarea>
<button class="w-1/2 md:w-1/3" type="submit">Send message</button> <button class="pill--button w-1/2 md:w-1/3" type="submit">Send message</button>
</form> </form>

2
src/tags.md
View file

@ -20,7 +20,7 @@ meta:
{% for tag in collections.tagList %} {% for tag in collections.tagList %}
<span> <span>
<a href="/tags/{{ tag }}" class="!no-underline"> <a href="/tags/{{ tag }}" class="!no-underline">
<button class="tag--button"> <button class="pill--button">
{{ tag }} {{ tag }}
</button> </button>
</a> </a>

26
tailwind.css
View file

@ -102,12 +102,8 @@ pre {
@apply scrollbar-track-blue-100; @apply scrollbar-track-blue-100;
} }
button { .pill--button {
@apply !appearance-none; @apply !appearance-none;
}
button,
.tag--button {
@apply font-semibold; @apply font-semibold;
@apply py-2; @apply py-2;
@apply px-4; @apply px-4;
@ -121,8 +117,7 @@ button,
background-color: theme(colors.blue.600) !important; background-color: theme(colors.blue.600) !important;
} }
button.button__small, .pill--button.pill--button__small {
.tag--button.tag--button__small {
@apply py-1; @apply py-1;
@apply px-2; @apply px-2;
@apply mr-2; @apply mr-2;
@ -131,12 +126,9 @@ button.button__small,
@apply inline-block; @apply inline-block;
} }
button:hover, .pill--button:hover,
button:active, .pill--button:active,
button:focus, .pill--button:focus {
.tag--button:hover,
.tag--button:active,
.tag--button:focus {
background-color: theme(colors.blue.800) !important; background-color: theme(colors.blue.800) !important;
} }
@ -228,14 +220,14 @@ button:focus,
@apply scrollbar-thumb-blue-400; @apply scrollbar-thumb-blue-400;
} }
.tag--button { .pill--button {
color: theme(colors.gray.900); color: theme(colors.gray.900);
background: theme(colors.blue.400); background: theme(colors.blue.400);
} }
.tag--button:hover, .pill--button:hover,
.tag--button:active, .pill--button:active,
.tag--button:focus { .pill--button:focus {
background: theme(colors.blue.200); background: theme(colors.blue.200);
} }
} }