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>
.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">
<div class="flex flex-row items-center gap-2 text-gray-500 text-sm">
<p class="copyright">© 2024 Furkan Erdem</p>
<a class="about-me" href="#">Hakkımda</a>
<a class="text-inherit" href="#">Hakkımda</a>
</div>

View File

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

View File

@ -41,64 +41,6 @@ const { Content } = await post.render();
---
<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 {
padding-top: 0.1rem;
&: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>
<div class="post">
<div class="post-header">
<p class="post-category">{post.data.subcategory}</p>
<a class="post-title-anchor" href={postLink}
><h4 class="post-title">{post.data.title}</h4></a
<div class="flex flex-col gap-3">
<div class="flex flex-col">
<p class="tracking-wide text-slate-700">{post.data.subcategory}</p>
<a class="no-underline text-inherit" href={postLink}
><h4 class="text-3xl font-normal">{post.data.title}</h4></a
>
<div class="meta">
<div class="flex flex-row gap-2">
{
showTags && (
<div class="meta-container">
<div class="flex items-center gap-1">
<svg
xmlns="http://www.w3.org/2000/svg"
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" />
</svg>
<ul class="meta-list">
<ul class="list-none flex pl-0 meta-list">
{post.data.tags.map((tag) => (
<li class="meta-text">{tag}</li>
<li class="text-sm text-gray-500">{tag}</li>
))}
</ul>
</div>
)
}
<div class="meta-container">
<div class="flex items-center gap-1">
<svg
xmlns="http://www.w3.org/2000/svg"
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"
></path></svg
>
<ul class="meta-list">
<p class="meta-text">{postDateFormatted}</p>
<ul class="list-none flex pl-0 meta-list">
<p class="text-sm text-gray-500">{postDateFormatted}</p>
</ul>
</div>
</div>
@ -179,7 +106,7 @@ const { Content } = await post.render();
</p>
{post.body.length > 500 && (
<a
class="read-more"
class="text-inherit text-sm"
href={`${base}/category/${post.data.category}/${post.slug}`}
>
Devamını Oku
@ -195,5 +122,5 @@ const { Content } = await post.render();
</div>
)
}
{postFooter && <p class="post-footer">{postDateFormatted}</p>}
{postFooter && <p class="text-gray-600 text-sm">{postDateFormatted}</p>}
</div>

View File

@ -10,8 +10,6 @@ tags:
- 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.
</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.

View File

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

View File

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

View File

@ -7,8 +7,6 @@ import Footer from "@/components/Footer.astro";
import Layout from "@/layouts/Layout.astro";
import Post from "@/components/Post.astro";
import "@/styles/home.css";
export function getStaticPaths() {
return CATEGORIES.map((category) => {
return {
@ -26,7 +24,6 @@ const allTeknikPosts = await getCollection(
---
<Layout title="log101">
<div class="container">
<Header />
<div class="posts">
{
@ -36,5 +33,4 @@ const allTeknikPosts = await getCollection(
}
</div>
<Footer />
</div>
</Layout>

View File

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

View File

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