style: replace styles with tailwind classes
All checks were successful
/ Build (push) Successful in 29s

This commit is contained in:
log101 2024-05-16 14:14:54 +03:00
parent 45167f35c6
commit 9f20921275
10 changed files with 65 additions and 229 deletions

View File

@ -1,61 +0,0 @@
---
interface Props {
title: string;
body: string;
href: string;
}
const { href, title, body } = Astro.props;
---
<li class="link-card">
<a href={href}>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
</li>
<style>
.link-card {
list-style: none;
display: flex;
padding: 1px;
background-color: #23262d;
background-image: none;
background-size: 400%;
border-radius: 7px;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.link-card > a {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: calc(1.5rem - 1px);
border-radius: 8px;
color: white;
background-color: #23262d;
opacity: 0.8;
}
h2 {
margin: 0;
font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
p {
margin-top: 0.5rem;
margin-bottom: 0;
}
.link-card:is(:hover, :focus-within) {
background-position: 0;
background-image: var(--accent-gradient);
}
.link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent-light));
}
</style>

View File

@ -2,22 +2,7 @@
--- ---
<style> <div class="flex flex-row items-center gap-2 text-gray-500 text-sm">
.footer {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
color: gray;
font-size: var(--small-desktop);
}
.footer a {
color: inherit;
}
</style>
<div class="footer">
<p class="copyright">© 2024 Furkan Erdem</p> <p class="copyright">© 2024 Furkan Erdem</p>
<a class="about-me" href="#">Hakkımda</a> <a class="text-inherit" href="#">Hakkımda</a>
</div> </div>

View File

@ -7,13 +7,17 @@ const base = import.meta.env.BASE_URL;
@apply text-xl text-inherit; @apply text-xl text-inherit;
} }
.contact-links a { .contact-links li a {
@apply text-gray-500 no-underline; @apply text-gray-500 no-underline;
} }
.nav-links a {
@apply no-underline;
}
</style> </style>
<div class="flex flex-col justify-start gap-2"> <div class="flex flex-col justify-start gap-2">
<ul class="flex flex-row items-center list-none p-0 m-0 gap-3 contact-links"> <ul class="flex flex-row items-center list-none p-0 gap-3 contact-links">
<li><a href="#">Eposta</a></li> <li><a href="#">Eposta</a></li>
<li><a href="#">Github</a></li> <li><a href="#">Github</a></li>
<li><a href="#">LinkedIn</a></li> <li><a href="#">LinkedIn</a></li>
@ -23,42 +27,26 @@ const base = import.meta.env.BASE_URL;
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="flex flex-row gap-4 items-center h-[110px]"> <div class="flex flex-row gap-4 items-center h-[110px]">
<a href={base} class="no-underline text-inherit" <a href={base} class="no-underline text-inherit"
><h1 class="font-mono text-[3.815rem] max-w-[250px] m-0 p-0 pb-2"> ><h1 class="font-mono text-[3.815rem] pb-2">log101</h1></a
log101
</h1></a
> >
<div id="board" class="board"></div> <div id="board" class="board"></div>
</div> </div>
<div> <div>
<ul <ul
class="flex flex-row items-center justify-between list-none p-0 m-0 gap-3 nav-links" class="flex flex-row items-center justify-between list-none p-0 gap-3 nav-links"
> >
{ <li>
( <a href={`${base}/category/fikir`}>Fikir</a>
<> </li>
<li> <li>
<a href={`${base}/category/fikir`} class="no-underline"> <a href={`${base}/category/teknik`}>Teknik</a>
Fikir </li>
</a> <li>
</li> <a href={`${base}/category/edebiyat`}>Babür'ün Serüvenleri</a>
<li> </li>
<a href={`${base}/category/teknik`} class="no-underline"> <li>
Teknik <a href={`${base}/category/ansiklopedi`}>Ansiklopedi</a>
</a> </li>
</li>
<li>
<a href={`${base}/category/edebiyat`} class="no-underline">
Babür'ün Serüvenleri
</a>
</li>
<li>
<a href={`${base}/category/ansiklopedi`} class="no-underline">
Ansiklopedi
</a>
</li>
</>
)
}
</ul> </ul>
<hr class="mb-0" /> <hr class="mb-0" />
</div> </div>

View File

@ -41,64 +41,6 @@ const { Content } = await post.render();
--- ---
<style> <style>
p {
margin: 0;
padding: 0;
}
.post {
display: flex;
flex-direction: column;
gap: 12px;
}
.post-header {
display: flex;
flex-direction: column;
gap: 4px;
}
.post-category {
color: #2f4f4f;
letter-spacing: 0.03em;
}
.post-title {
font-size: var(--h4-desktop);
font-weight: normal;
margin: 0;
padding: 0;
}
.post-date {
color: gray;
font-size: var(--small-desktop);
}
.meta {
display: flex;
flex-direction: row;
gap: 8px;
}
.meta-container {
display: flex;
align-items: center;
gap: 4px;
}
.meta-text {
font-size: var(--small-desktop);
color: #6d6d6d;
padding: 0;
}
.meta-list {
list-style-type: none;
padding-left: 0;
margin: 0;
display: flex;
}
.meta-list li { .meta-list li {
padding-top: 0.1rem; padding-top: 0.1rem;
&:not(:last-child) { &:not(:last-child) {
@ -107,33 +49,18 @@ const { Content } = await post.render();
} }
} }
} }
.read-more {
color: inherit;
font-size: var(--small-desktop);
}
.post-footer {
color: #424242;
font-size: var(--small-desktop);
}
.post-title-anchor {
text-decoration: none;
color: inherit;
}
</style> </style>
<div class="post"> <div class="flex flex-col gap-3">
<div class="post-header"> <div class="flex flex-col">
<p class="post-category">{post.data.subcategory}</p> <p class="tracking-wide text-slate-700">{post.data.subcategory}</p>
<a class="post-title-anchor" href={postLink} <a class="no-underline text-inherit" href={postLink}
><h4 class="post-title">{post.data.title}</h4></a ><h4 class="text-3xl font-normal">{post.data.title}</h4></a
> >
<div class="meta"> <div class="flex flex-row gap-2">
{ {
showTags && ( showTags && (
<div class="meta-container"> <div class="flex items-center gap-1">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="18" width="18"
@ -143,16 +70,16 @@ const { Content } = await post.render();
> >
<path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" /> <path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" />
</svg> </svg>
<ul class="meta-list"> <ul class="list-none flex pl-0 meta-list">
{post.data.tags.map((tag) => ( {post.data.tags.map((tag) => (
<li class="meta-text">{tag}</li> <li class="text-sm text-gray-500">{tag}</li>
))} ))}
</ul> </ul>
</div> </div>
) )
} }
<div class="meta-container"> <div class="flex items-center gap-1">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="18" width="18"
@ -163,8 +90,8 @@ const { Content } = await post.render();
d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z" d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z"
></path></svg ></path></svg
> >
<ul class="meta-list"> <ul class="list-none flex pl-0 meta-list">
<p class="meta-text">{postDateFormatted}</p> <p class="text-sm text-gray-500">{postDateFormatted}</p>
</ul> </ul>
</div> </div>
</div> </div>
@ -179,7 +106,7 @@ const { Content } = await post.render();
</p> </p>
{post.body.length > 500 && ( {post.body.length > 500 && (
<a <a
class="read-more" class="text-inherit text-sm"
href={`${base}/category/${post.data.category}/${post.slug}`} href={`${base}/category/${post.data.category}/${post.slug}`}
> >
Devamını Oku Devamını Oku
@ -195,5 +122,5 @@ const { Content } = await post.render();
</div> </div>
) )
} }
{postFooter && <p class="post-footer">{postDateFormatted}</p>} {postFooter && <p class="text-gray-600 text-sm">{postDateFormatted}</p>}
</div> </div>

View File

@ -10,8 +10,6 @@ tags:
- inkılap tarihi - inkılap tarihi
--- ---
# Atatürk ve Demokratik Türkiye
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut neque sollicitudin, pretium ipsum lacinia, mattis elit. Fusce in dolor suscipit, rutrum risus vehicula, feugiat ipsum. Sed sit amet enim cursus, efficitur eros eu, dapibus lectus. In nec risus eget nisl sodales bibendum nec sit amet nisl. Nulla a dolor finibus, commodo velit et, aliquam lacus. Nunc cursus ultrices tellus, ut volutpat mauris luctus vitae. Donec tristique sollicitudin est, sed iaculis odio eleifend non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut neque sollicitudin, pretium ipsum lacinia, mattis elit. Fusce in dolor suscipit, rutrum risus vehicula, feugiat ipsum. Sed sit amet enim cursus, efficitur eros eu, dapibus lectus. In nec risus eget nisl sodales bibendum nec sit amet nisl. Nulla a dolor finibus, commodo velit et, aliquam lacus. Nunc cursus ultrices tellus, ut volutpat mauris luctus vitae. Donec tristique sollicitudin est, sed iaculis odio eleifend non.
</br></br> </br></br>
Fusce posuere non elit in vehicula. Proin facilisis dignissim bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed posuere mi lectus, at eleifend mi tristique eu. Suspendisse potenti. Nam et eros velit. Fusce posuere non elit in vehicula. Proin facilisis dignissim bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed posuere mi lectus, at eleifend mi tristique eu. Suspendisse potenti. Nam et eros velit.

View File

@ -18,6 +18,8 @@ import "../styles/main.css";
<title>{title}</title> <title>{title}</title>
</head> </head>
<body class="flex justify-center font-sans"> <body class="flex justify-center font-sans">
<slot /> <div class="max-w-[750px] flex flex-col gap-8 my-6">
<slot />
</div>
</body> </body>
</html> </html>

View File

@ -4,7 +4,6 @@ import { getCollection } from "astro:content";
import Footer from "@/components/Footer.astro"; import Footer from "@/components/Footer.astro";
import Header from "@/components/Header.astro"; import Header from "@/components/Header.astro";
import Layout from "@/layouts/Layout.astro"; import Layout from "@/layouts/Layout.astro";
import "@/styles/home.css";
import Post from "@/components/Post.astro"; import Post from "@/components/Post.astro";
export async function getStaticPaths() { export async function getStaticPaths() {
@ -19,9 +18,7 @@ const { entry } = Astro.props;
--- ---
<Layout title="log101"> <Layout title="log101">
<div class="container"> <Header />
<Header /> <Post post={entry} componentType="full" />
<Post post={entry} componentType="full" /> <Footer />
<Footer />
</div>
</Layout> </Layout>

View File

@ -7,8 +7,6 @@ import Footer from "@/components/Footer.astro";
import Layout from "@/layouts/Layout.astro"; import Layout from "@/layouts/Layout.astro";
import Post from "@/components/Post.astro"; import Post from "@/components/Post.astro";
import "@/styles/home.css";
export function getStaticPaths() { export function getStaticPaths() {
return CATEGORIES.map((category) => { return CATEGORIES.map((category) => {
return { return {
@ -26,15 +24,13 @@ const allTeknikPosts = await getCollection(
--- ---
<Layout title="log101"> <Layout title="log101">
<div class="container"> <Header />
<Header /> <div class="posts">
<div class="posts"> {
{ allTeknikPosts
allTeknikPosts .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
.sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime()) .map((p) => <Post post={p} componentType="long" />)
.map((p) => <Post post={p} componentType="long" />) }
}
</div>
<Footer />
</div> </div>
<Footer />
</Layout> </Layout>

View File

@ -10,16 +10,14 @@ const allTeknikPosts = await getCollection("blog");
--- ---
<Layout title="log101"> <Layout title="log101">
<div class="w-[750px] flex flex-col gap-8 my-6"> <Header />
<Header /> <div class="posts">
<div class="flex flex-col gap-10"> {
{ allTeknikPosts
allTeknikPosts .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
.sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime()) .map((p) => <Post post={p} componentType="short" />)
.map((p) => <Post post={p} componentType="short" />) }
}
</div>
<a class="text-inherit" href="#">Tüm Yayınlar</a>
<Footer />
</div> </div>
<a class="text-inherit" href="#">Tüm Yayınlar</a>
<Footer />
</Layout> </Layout>

View File

@ -17,3 +17,9 @@
* { * {
margin: 0; margin: 0;
} }
@layer components {
.posts {
@apply flex flex-col gap-10;
}
}