Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: format styles with Tailwind Prettier plugin

Browse Source
This commit is contained in:
satnaing
2023-01-31 15:53:49 +06:30
parent ca7d9b10e6
commit 1a427285f3
15 changed files with 80 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Breadcrumbs.astro
+2 -2
View File
@@ -43,13 +43,13 @@ breadcrumbList[0] === "posts" &&
<style>
.breadcrumb {
@apply max-w-3xl mx-auto px-4 w-full mt-8 mb-1;
@apply mx-auto mt-8 mb-1 w-full max-w-3xl px-4;
}
.breadcrumb ul li {
@apply inline;
}
.breadcrumb ul li a {
@apply opacity-70 capitalize;
@apply capitalize opacity-70;
}
.breadcrumb ul li span {
@apply opacity-70;
src/components/Card.tsx
+3 -3
View File
@@ -13,14 +13,14 @@ export default function Card({ href, frontmatter, secHeading = true }: Props) {
<li className="my-6">
<a
href={href}
className="text-skin-accent font-medium text-lg underline-offset-4 decoration-dashed focus-visible:no-underline focus-visible:underline-offset-0 inline-block"
className="inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
>
{secHeading ? (
<h2 className="font-medium text-lg decoration-dashed hover:underline">
<h2 className="text-lg font-medium decoration-dashed hover:underline">
{title}
</h2>
) : (
<h3 className="font-medium text-lg decoration-dashed hover:underline">
<h3 className="text-lg font-medium decoration-dashed hover:underline">
{title}
</h3>
)}
src/components/Datetime.tsx
+2 -2
View File
@@ -6,12 +6,12 @@ export interface Props {
export default function Datetime({ datetime, size = "sm", className }: Props) {
return (
<div className={`opacity-80 flex items-center space-x-2 ${className}`}>
<div className={`flex items-center space-x-2 opacity-80 ${className}`}>
<svg
xmlns="http://www.w3.org/2000/svg"
className={`${
size === "sm" ? "scale-90" : "scale-100"
} w-6 h-6 inline-block fill-skin-base`}
} inline-block h-6 w-6 fill-skin-base`}
aria-hidden="true"
>
<path d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"></path>
src/components/Footer.astro
+3 -3
View File
@@ -28,16 +28,16 @@ const { noMarginTop = false } = Astro.props;
@apply w-full;
}
.footer-wrapper {
@apply py-6 sm:py-4 flex flex-col sm:flex-row-reverse justify-between items-center;
@apply flex flex-col items-center justify-between py-6 sm:flex-row-reverse sm:py-4;
}
.link-button {
@apply p-2 my-1 hover:rotate-6;
@apply my-1 p-2 hover:rotate-6;
}
.link-button svg {
@apply scale-125;
}
.copyright-wrapper {
@apply my-2 flex flex-col sm:flex-row items-center whitespace-nowrap;
@apply my-2 flex flex-col items-center whitespace-nowrap sm:flex-row;
}
.separator {
@apply hidden sm:inline;
src/components/Header.astro
+14 -14
View File
@@ -107,35 +107,35 @@ const { activeNav } = Astro.props;
<style>
#skip-to-content {
@apply bg-skin-accent text-skin-inverted py-2 px-3 absolute -top-full focus:top-4 left-16 z-50 transition-all;
@apply absolute -top-full left-16 z-50 bg-skin-accent py-2 px-3 text-skin-inverted transition-all focus:top-4;
}
.nav-container {
@apply max-w-3xl mx-auto flex flex-col sm:flex-row justify-between items-center;
@apply mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row;
}
.top-nav-wrap {
@apply relative w-full p-4 sm:py-8 flex justify-between items-start sm:items-center;
@apply relative flex w-full items-start justify-between p-4 sm:items-center sm:py-8;
}
.logo {
@apply absolute sm:static font-semibold text-xl sm:text-2xl py-1;
@apply absolute py-1 text-xl font-semibold sm:static sm:text-2xl;
}
.hamburger-menu {
@apply self-end p-2 sm:hidden;
}
.hamburger-menu svg {
@apply fill-skin-base w-6 h-6 scale-125;
@apply h-6 w-6 scale-125 fill-skin-base;
}
nav {
@apply w-full sm:py-0 sm:ml-2 flex flex-col items-center sm:justify-end sm:flex-row sm:space-x-4 bg-skin-fill;
@apply flex w-full flex-col items-center bg-skin-fill sm:ml-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0;
}
nav ul {
@apply mt-4 w-44 grid grid-rows-4 grid-cols-2 gap-y-2 gap-x-2 sm:gap-y-0 sm:mt-0 sm:ml-0 sm:w-auto sm:gap-x-5;
@apply mt-4 grid w-44 grid-cols-2 grid-rows-4 gap-y-2 gap-x-2 sm:mt-0 sm:ml-0 sm:w-auto sm:gap-y-0 sm:gap-x-5;
}
nav ul li {
@apply col-span-2 flex justify-center items-center;
@apply col-span-2 flex items-center justify-center;
}
nav ul li a {
@apply px-4 py-3 w-full text-center sm:px-2 sm:py-1 sm:my-0 font-medium hover:text-skin-accent;
@apply w-full px-4 py-3 text-center font-medium hover:text-skin-accent sm:my-0 sm:px-2 sm:py-1;
}
nav ul li:nth-child(4) a {
@apply w-auto;
@@ -145,7 +145,7 @@ const { activeNav } = Astro.props;
@apply col-span-1;
}
nav a.active {
@apply underline underline-offset-4 decoration-wavy decoration-2;
@apply underline decoration-wavy decoration-2 underline-offset-4;
}
nav a.active svg {
@apply fill-skin-accent;
@@ -155,20 +155,20 @@ const { activeNav } = Astro.props;
@apply p-1;
}
nav button svg {
@apply w-6 h-6 fill-skin-base hover:fill-skin-accent;
@apply h-6 w-6 fill-skin-base hover:fill-skin-accent;
}
#theme-btn {
@apply p-3 sm:p-1;
}
#theme-btn svg {
@apply hover:rotate-12 scale-125 sm:scale-100;
@apply scale-125 hover:rotate-12 sm:scale-100;
}
.icon-container {
@apply w-6 h-5 flex-col justify-between items-end;
@apply h-5 w-6 flex-col items-end justify-between;
}
.icon-container div {
@apply bg-skin-inverted h-0.5 transition-all;
@apply h-0.5 bg-skin-inverted transition-all;
}
#first-line {
@apply w-full;
src/components/Search.tsx
+4 -4
View File
@@ -78,10 +78,10 @@ export default function SearchBar({ searchList }: Props) {
</svg>
</span>
<input
className="placeholder:italic placeholder:text-opacity-75 py-3 pl-10 pr-3
block bg-skin-fill w-full rounded
border border-skin-fill border-opacity-40
focus:outline-none focus:border-skin-accent"
className="block w-full rounded border border-skin-fill
border-opacity-40 bg-skin-fill py-3 pl-10
pr-3 placeholder:italic placeholder:text-opacity-75
focus:border-skin-accent focus:outline-none"
placeholder="Search for anything..."
type="text"
name="search"
src/components/Socials.astro
+1 -1
View File
@@ -29,6 +29,6 @@ const { centered = false } = Astro.props;
@apply flex-wrap justify-center gap-1;
}
.link-button {
@apply p-2 sm:p-1 hover:rotate-6;
@apply p-2 hover:rotate-6 sm:p-1;
}
</style>
src/components/Tag.astro
+2 -2
View File
@@ -29,9 +29,9 @@ const { name, size = "sm" } = Astro.props;
<style>
a {
@apply underline decoration-dashed hover:text-skin-accent relative hover:-top-0.5 focus-visible:p-1;
@apply relative underline decoration-dashed hover:-top-0.5 hover:text-skin-accent focus-visible:p-1;
}
a svg {
@apply w-6 h-6 text-skin-base scale-95 opacity-80 -mr-5 group-hover:fill-skin-accent;
@apply -mr-5 h-6 w-6 scale-95 text-skin-base opacity-80 group-hover:fill-skin-accent;
}
</style>