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>
src/layouts/AboutLayout.astro
+2 -2
View File
@@ -19,8 +19,8 @@ const { frontmatter } = Astro.props;
<Header activeNav="about" />
<Breadcrumbs />
<main id="main-content">
<section id="about" class="mb-28 prose max-w-3xl prose-img:border-0">
<h1 class="text-2xl sm:text-3xl tracking-wider">{frontmatter.title}</h1>
<section id="about" class="prose mb-28 max-w-3xl prose-img:border-0">
<h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
<slot />
</section>
</main>
src/layouts/Main.astro
+2 -2
View File
@@ -18,10 +18,10 @@ const { pageTitle, pageDesc } = Astro.props;
<style>
#main-content {
@apply max-w-3xl mx-auto px-4 pb-12 w-full;
@apply mx-auto w-full max-w-3xl px-4 pb-12;
}
#main-content h1 {
@apply font-semibold text-2xl sm:text-3xl;
@apply text-2xl font-semibold sm:text-3xl;
}
#main-content p {
@apply mt-2 mb-6 italic;
src/layouts/PostDetails.astro
+5 -5
View File
@@ -22,9 +22,9 @@ const ogUrl = new URL(ogImage ? ogImage : `${title}.svg`, Astro.url.origin)
<Layout title={title} author={author} description={description} ogImage={ogUrl}>
<Header />
<div class="max-w-3xl mx-auto w-full px-2 flex justify-start">
<div class="mx-auto flex w-full max-w-3xl justify-start px-2">
<button
class="mt-8 mb-2 hover:opacity-75 flex focus-outline"
class="focus-outline mt-8 mb-2 flex hover:opacity-75"
onclick="history.back()"
>
<svg xmlns="http://www.w3.org/2000/svg"
@@ -37,7 +37,7 @@ const ogUrl = new URL(ogImage ? ogImage : `${title}.svg`, Astro.url.origin)
<main id="main-content">
<h1 class="post-title">{title}</h1>
<Datetime datetime={pubDatetime} size="lg" className="my-2" />
<article id="article" role="article" class="mx-auto max-w-3xl mt-8 prose">
<article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
<Content />
</article>
@@ -50,10 +50,10 @@ const ogUrl = new URL(ogImage ? ogImage : `${title}.svg`, Astro.url.origin)
<style>
main {
@apply max-w-3xl mx-auto px-4 pb-12 w-full;
@apply mx-auto w-full max-w-3xl px-4 pb-12;
}
.post-title {
@apply font-semibold text-2xl text-skin-accent;
@apply text-2xl font-semibold text-skin-accent;
}
.tags-container {
@apply my-8;
src/layouts/Posts.astro
+2 -2
View File
@@ -66,10 +66,10 @@ const next = pageNum < totalPages ? "" : "disabled";
<style>
.pagination-wrapper {
@apply flex justify-center mt-auto mb-8;
@apply mt-auto mb-8 flex justify-center;
}
.disabled {
@apply opacity-50 hover:text-skin-base group-hover:fill-skin-base pointer-events-none select-none;
@apply pointer-events-none select-none opacity-50 hover:text-skin-base group-hover:fill-skin-base;
}
.disabled-svg {
@apply group-hover:!fill-skin-base;
src/pages/404.astro
+4 -4
View File
@@ -28,15 +28,15 @@ import LinkButton from "@components/LinkButton.astro";
<style>
#main-content {
@apply max-w-3xl mx-auto flex-1 justify-center items-center flex;
@apply mx-auto flex max-w-3xl flex-1 items-center justify-center;
}
.not-found-wrapper {
@apply flex flex-col items-center justify-center mb-14;
@apply mb-14 flex flex-col items-center justify-center;
}
.not-found-wrapper h1 {
@apply font-bold text-9xl text-skin-accent;
@apply text-9xl font-bold text-skin-accent;
}
.not-found-wrapper p {
@apply text-2xl sm:text-3xl mt-4;
@apply mt-4 text-2xl sm:text-3xl;
}
</style>
src/pages/index.astro
+6 -6
View File
@@ -126,22 +126,22 @@ const socialCount = SOCIALS.filter(social => social.active).length;
@apply pt-8 pb-6;
}
#hero h1 {
@apply inline-block font-bold my-4 sm:my-8 text-3xl sm:text-5xl;
@apply my-4 inline-block text-3xl font-bold sm:my-8 sm:text-5xl;
}
#hero .rss-link {
@apply mb-6;
}
#hero .rss-icon {
@apply h-6 w-6 scale-110 sm:scale-125 mb-2 sm:mb-3 fill-skin-accent;
@apply mb-2 h-6 w-6 scale-110 fill-skin-accent sm:mb-3 sm:scale-125;
}
#hero p {
@apply my-2;
}
.social-wrapper {
@apply flex flex-col sm:flex-row sm:items-center mt-4;
@apply mt-4 flex flex-col sm:flex-row sm:items-center;
}
.social-links {
@apply whitespace-nowrap mr-2 sm:mb-0 mb-1;
@apply mr-2 mb-1 whitespace-nowrap sm:mb-0;
}
/* ===== Featured & Recent Posts Sections ===== */
@@ -151,9 +151,9 @@ const socialCount = SOCIALS.filter(social => social.active).length;
}
#featured h2,
#recent-posts h2 {
@apply font-semibold text-2xl tracking-wide;
@apply text-2xl font-semibold tracking-wide;
}
.all-posts-btn-wrapper {
@apply text-center my-8;
@apply my-8 text-center;
}
</style>
src/styles/base.css
+29 -29
View File
@@ -29,45 +29,45 @@
display: block;
}
body {
@apply font-mono bg-skin-fill text-skin-base min-h-screen flex flex-col
selection:bg-skin-accent selection:text-skin-inverted selection:bg-opacity-70;
@apply flex min-h-screen flex-col bg-skin-fill font-mono text-skin-base
selection:bg-skin-accent selection:bg-opacity-70 selection:text-skin-inverted;
}
section,
footer {
@apply max-w-3xl mx-auto px-4;
@apply mx-auto max-w-3xl px-4;
}
a {
@apply outline-offset-1 outline-skin-fill outline-2
focus-visible:outline-dashed focus-visible:no-underline;
@apply outline-2 outline-offset-1 outline-skin-fill
focus-visible:no-underline focus-visible:outline-dashed;
}
svg {
@apply w-6 h-6 inline-block fill-skin-base group-hover:fill-skin-accent;
@apply inline-block h-6 w-6 fill-skin-base group-hover:fill-skin-accent;
}
svg.icon-tabler {
@apply w-6 h-6 scale-125 sm:scale-110 opacity-90
inline-block fill-transparent stroke-2 stroke-current
group-hover:fill-transparent;
@apply inline-block h-6 w-6 scale-125 fill-transparent
stroke-current stroke-2 opacity-90 group-hover:fill-transparent
sm:scale-110;
}
.prose {
@apply prose-a:underline-offset-8 prose-ul:overflow-x-clip
prose-a:!decoration-dashed hover:prose-a:text-skin-accent
prose-img:mx-auto prose-img:border-2 prose-img:border-skin-line
prose-img:!mt-2 prose-headings:!mb-3
prose-th:border prose-th:border-skin-line
prose-td:border prose-td:border-skin-line
prose-h3:italic
prose-p:!text-skin-base prose-headings:!text-skin-base
prose-ol:!text-skin-base prose-ul:!text-skin-base prose-blockquote:opacity-80
@apply prose-headings:!mb-3 prose-headings:!text-skin-base
prose-h3:italic prose-p:!text-skin-base
prose-a:!text-skin-base prose-a:!decoration-dashed prose-a:underline-offset-8
hover:prose-a:text-skin-accent prose-blockquote:!border-l-skin-accent
prose-blockquote:border-opacity-50 prose-blockquote:opacity-80
prose-figcaption:!text-skin-base prose-figcaption:opacity-70
prose-code:bg-skin-card prose-code:bg-opacity-75
prose-code:!text-skin-base prose-code:p-1 prose-code:rounded
prose-code:after:!content-[''] prose-code:before:!content-['']
prose-strong:!text-skin-base prose-table:text-skin-base
prose-pre:!text-skin-base prose-a:!text-skin-base
prose-hr:!border-skin-line prose-li:marker:!text-skin-accent
prose-blockquote:!border-l-skin-accent prose-blockquote:border-opacity-50;
prose-strong:!text-skin-base
prose-code:rounded prose-code:bg-skin-card
prose-code:bg-opacity-75 prose-code:p-1 prose-code:!text-skin-base
prose-code:before:!content-[''] prose-code:after:!content-['']
prose-pre:!text-skin-base prose-ol:!text-skin-base
prose-ul:overflow-x-clip prose-ul:!text-skin-base prose-li:marker:!text-skin-accent
prose-table:text-skin-base prose-th:border
prose-th:border-skin-line prose-td:border
prose-td:border-skin-line prose-img:mx-auto
prose-img:!mt-2 prose-img:border-2
prose-img:border-skin-line prose-hr:!border-skin-line;
}
.prose a {
@apply hover:!text-skin-accent;
@@ -81,7 +81,7 @@
@apply mb-2;
}
.prose details {
@apply text-skin-base cursor-pointer inline-block select-none;
@apply inline-block cursor-pointer select-none text-skin-base;
}
.prose summary {
@apply focus-outline;
@@ -121,6 +121,6 @@
@apply hidden;
}
.focus-outline {
@apply outline-offset-1 outline-skin-fill outline-2 focus-visible:outline-dashed focus-visible:no-underline;
@apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
}
}