style: replace header styles with tailwind

This commit is contained in:
log101 2024-05-16 13:46:38 +03:00
parent 7f358bd1f5
commit 45167f35c6
4 changed files with 32 additions and 101 deletions

View File

@ -3,115 +3,64 @@ const base = import.meta.env.BASE_URL;
--- ---
<style> <style>
.header { .nav-links a {
display: flex; @apply text-xl text-inherit;
flex-direction: column;
justify-content: start;
gap: 6px;
}
.contact-links {
display: flex;
flex-direction: row;
align-items: center;
list-style-type: none;
padding: 0;
margin: 0;
gap: 12px;
} }
.contact-links a { .contact-links a {
color: grey; @apply text-gray-500 no-underline;
}
.undecorated-anchor a {
text-decoration: none;
}
.nav-links {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
list-style-type: none;
padding: 0;
margin: 0;
gap: 12px;
}
.nav-links a {
font-size: var(--h6-desktop);
color: inherit;
}
.title-and-nav {
display: flex;
flex-direction: column;
gap: 8px;
}
.title-and-nav hr {
margin-bottom: 0;
}
.title-and-gol {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
height: 110px;
}
.title-and-gol a {
text-decoration: none;
color: inherit;
}
.main-title {
font-family: "Courier New", Courier, monospace;
font-size: var(--h1-desktop);
max-width: 250;
margin: 0;
padding: 0;
padding-bottom: 8px;
} }
</style> </style>
<div class="header"> <div class="flex flex-col justify-start gap-2">
<ul class="contact-links undecorated-anchor"> <ul class="flex flex-row items-center list-none p-0 m-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>
<li><a href="#">CV</a></li> <li><a href="#">CV</a></li>
</ul> </ul>
<div class="title-and-nav"> <div class="flex flex-col gap-2">
<div class="title-and-gol"> <div class="flex flex-row gap-4 items-center h-[110px]">
<a href={base}><h1 class="main-title">log101</h1></a> <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
>
<div id="board" class="board"></div> <div id="board" class="board"></div>
</div> </div>
<div> <div>
<ul class="nav-links undecorated-anchor"> <ul
class="flex flex-row items-center justify-between list-none p-0 m-0 gap-3 nav-links"
>
{ {
( (
<> <>
<li> <li>
<a href={`${base}/category/fikir`}>Fikir</a> <a href={`${base}/category/fikir`} class="no-underline">
Fikir
</a>
</li> </li>
<li> <li>
<a href={`${base}/category/teknik`}>Teknik</a> <a href={`${base}/category/teknik`} class="no-underline">
Teknik
</a>
</li> </li>
<li> <li>
<a href={`${base}/category/edebiyat`}>Babür'ün Serüvenleri</a> <a href={`${base}/category/edebiyat`} class="no-underline">
Babür'ün Serüvenleri
</a>
</li> </li>
<li> <li>
<a href={`${base}/category/ansiklopedi`}>Ansiklopedi</a> <a href={`${base}/category/ansiklopedi`} class="no-underline">
Ansiklopedi
</a>
</li> </li>
</> </>
) )
} }
</ul> </ul>
<hr /> <hr class="mb-0" />
</div> </div>
</div> </div>
</div> </div>

View File

@ -2,7 +2,6 @@
import Header from "@/components/Header.astro"; import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro"; import Footer from "@/components/Footer.astro";
import Layout from "@/layouts/Layout.astro"; import Layout from "@/layouts/Layout.astro";
import "@/styles/home.css";
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import Post from "@/components/Post.astro"; import Post from "@/components/Post.astro";
@ -11,16 +10,16 @@ const allTeknikPosts = await getCollection("blog");
--- ---
<Layout title="log101"> <Layout title="log101">
<div class="container"> <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> </div>
<a class="home-all-posts" href="#">Tüm Yayınlar</a> <a class="text-inherit" href="#">Tüm Yayınlar</a>
<Footer /> <Footer />
</div> </div>
</Layout> </Layout>

View File

@ -1,18 +0,0 @@
.container {
width: 750px;
display: flex;
flex-direction: column;
gap: 36px;
margin: 24px 0px;
}
.posts {
display: flex;
flex-direction: column;
gap: 48px;
}
.home-all-posts {
padding-top: 16px;
color: inherit;
}

View File

@ -10,6 +10,7 @@ export default {
"Trebuchet MS", "Trebuchet MS",
"sans-serif", "sans-serif",
], ],
mono: ["Courier New", "Courier", "monospace"],
}, },
extend: {}, extend: {},
}, },