style: replace header styles with tailwind
This commit is contained in:
parent
7f358bd1f5
commit
45167f35c6
|
@ -3,115 +3,64 @@ const base = import.meta.env.BASE_URL;
|
|||
---
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
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;
|
||||
.nav-links a {
|
||||
@apply text-xl text-inherit;
|
||||
}
|
||||
|
||||
.contact-links a {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.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;
|
||||
@apply text-gray-500 no-underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="header">
|
||||
<ul class="contact-links undecorated-anchor">
|
||||
<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">
|
||||
<li><a href="#">Eposta</a></li>
|
||||
<li><a href="#">Github</a></li>
|
||||
<li><a href="#">LinkedIn</a></li>
|
||||
<li><a href="#">CV</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="title-and-nav">
|
||||
<div class="title-and-gol">
|
||||
<a href={base}><h1 class="main-title">log101</h1></a>
|
||||
<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
|
||||
>
|
||||
<div id="board" class="board"></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>
|
||||
<a href={`${base}/category/fikir`}>Fikir</a>
|
||||
<a href={`${base}/category/fikir`} class="no-underline">
|
||||
Fikir
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={`${base}/category/teknik`}>Teknik</a>
|
||||
<a href={`${base}/category/teknik`} class="no-underline">
|
||||
Teknik
|
||||
</a>
|
||||
</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>
|
||||
<a href={`${base}/category/ansiklopedi`}>Ansiklopedi</a>
|
||||
<a href={`${base}/category/ansiklopedi`} class="no-underline">
|
||||
Ansiklopedi
|
||||
</a>
|
||||
</li>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
<hr />
|
||||
<hr class="mb-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
import Header from "@/components/Header.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import "@/styles/home.css";
|
||||
|
||||
import { getCollection } from "astro:content";
|
||||
import Post from "@/components/Post.astro";
|
||||
|
@ -11,16 +10,16 @@ const allTeknikPosts = await getCollection("blog");
|
|||
---
|
||||
|
||||
<Layout title="log101">
|
||||
<div class="container">
|
||||
<div class="w-[750px] flex flex-col gap-8 my-6">
|
||||
<Header />
|
||||
<div class="posts">
|
||||
<div class="flex flex-col gap-10">
|
||||
{
|
||||
allTeknikPosts
|
||||
.sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
|
||||
.map((p) => <Post post={p} componentType="short" />)
|
||||
}
|
||||
</div>
|
||||
<a class="home-all-posts" href="#">Tüm Yayınlar</a>
|
||||
<a class="text-inherit" href="#">Tüm Yayınlar</a>
|
||||
<Footer />
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -10,6 +10,7 @@ export default {
|
|||
"Trebuchet MS",
|
||||
"sans-serif",
|
||||
],
|
||||
mono: ["Courier New", "Courier", "monospace"],
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue
Block a user