mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix some minimal styles

Browse Source
This commit is contained in:
prototypa
2023-01-08 21:18:37 -05:00
parent 7e83be5a75
commit 5db96e66eb
8 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/base.css
View File

@ -17,7 +17,7 @@
}
#header.scroll {
@apply drop-shadow-md bg-white md:bg-white/90 md:backdrop-blur-sm dark:bg-slate-900 dark:md:bg-slate-900/90;
@apply shadow-lg bg-white md:bg-white/90 md:backdrop-blur-sm dark:bg-slate-900 dark:md:bg-slate-900/90;
}
.dropdown:hover .dropdown-menu {

8
src/components/blog/HighlightedPosts.astro
View File

@ -24,12 +24,12 @@ const posts = await findPostsByIds(postIds);
---
<section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
<div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
<div class="md:max-w-sm mb-2 lg:mb-5">
<div class="flex flex-col lg:justify-between lg:flex-row mb-8">
<div class="md:max-w-sm">
{
title && (
<h2
class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-1 sm:mb-2"
class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-2"
set:html={title}
/>
)
@ -37,7 +37,7 @@ const posts = await findPostsByIds(postIds);
{
allPostsText && allPostsLink && (
<a
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200 block mb-6 md:mb-0"
href={allPostsLink}
>
{allPostsText} »

4
src/components/widgets/CallToAction.astro
View File

@ -40,8 +40,8 @@ const {
callToAction &&
callToAction.text &&
callToAction.href && (
<div class="mt-6">
<a class="btn btn-primary mb-4 sm:mb-0" href={callToAction.href} target="_blank" rel="noopener">
<div class="mt-6 max-w-xs mx-auto">
<a class="btn btn-primary mb-4 sm:mb-0 w-full sm:w-auto" href={callToAction.href} target="_blank" rel="noopener">
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
{callToAction.text}
</a>

6
src/components/widgets/FAQs.astro
View File

@ -21,18 +21,18 @@ const {
<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
<div class="max-w-xl mb-10 md:mx-auto text-center lg:max-w-2xl md:mb-12">
<div class="max-w-xl mb-10 md:mx-auto md:text-center lg:max-w-2xl md:mb-12">
{
title && (
<h2
class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading"
class="max-w-lg mb-4 text-3xl font-bold leading-none md:tracking-tight sm:text-4xl md:mx-auto font-heading"
set:html={title}
/>
)
}
{
subtitle && (
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
<p class="max-w-3xl mx-auto text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
)
}
</div>

2
src/components/widgets/Features2.astro
View File

@ -25,7 +25,7 @@ const {
<section class="relative">
<div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
<div class="relative max-w-6xl mx-auto px-4 sm:px-6 -mb-12">
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
{
(title || subtitle || highlight) && (

8
src/components/widgets/Header.astro
View File

@ -11,7 +11,11 @@ const links = [
text: 'Pages',
links: [
{
text: 'Services',
text: 'Features',
href: "#",
},
{
text: 'Pricing',
href: "#",
},
{
@ -55,7 +59,7 @@ const links = [
</div>
</div>
<nav
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-[calc(100vh-100px)] md:h-auto overflow-y-auto md:overflow-visible"
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
aria-label="Main navigation"
>
<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">

2
src/components/widgets/Steps.astro
View File

@ -23,7 +23,7 @@ const {
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
<div class="grid gap-6 row-gap-10 md:grid-cols-2">
<div class="md:pb-6 md:pr-16">
<div class="md:pb-6 md:pr-16 mb-4 md:mb-0">
{title && <h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
{
items &&

10
src/components/widgets/Steps2.astro
View File

@ -7,8 +7,8 @@ import { Icon } from 'astro-icon';
<div class="py-12 md:py-20">
<div class="py-4 sm:py-6 lg:py-8">
<div class="flex flex-wrap md:-mx-8">
<div class="w-full lg:w-1/2 px-0 sm:px-8">
<div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0">
<div class="w-full lg:w-1/2 px-0 sm:px-8 mb-12">
<div>
<h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.
</h2>
@ -41,7 +41,7 @@ import { Icon } from 'astro-icon';
1</span
>
</div>
<div class="px-4">
<div class="pl-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Responsive Elements</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
@ -57,7 +57,7 @@ import { Icon } from 'astro-icon';
2</span
>
</div>
<div class="px-4">
<div class="pl-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Flexible Team</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
@ -73,7 +73,7 @@ import { Icon } from 'astro-icon';
3</span
>
</div>
<div class="px-4">
<div class="pl-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Ecologic Software</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis