chore: put css in scopes
This commit is contained in:
parent
39ac6224ad
commit
4cbca8ccd7
|
@ -2,6 +2,20 @@
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class="footer">
|
<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="about-me" href="#">Hakkımda</a>
|
||||||
|
|
|
@ -2,6 +2,76 @@
|
||||||
import { CATEGORIES } from "../content/config";
|
import { CATEGORIES } from "../content/config";
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
font-family: "Courier New", Courier, monospace;
|
||||||
|
font-size: var(--h1-desktop);
|
||||||
|
max-width: 250;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<ul class="contact-links undecorated-anchor">
|
<ul class="contact-links undecorated-anchor">
|
||||||
<li><a href="#">Eposta</a></li>
|
<li><a href="#">Eposta</a></li>
|
||||||
|
@ -20,7 +90,7 @@ import { CATEGORIES } from "../content/config";
|
||||||
{
|
{
|
||||||
Object.entries(CATEGORIES).map(([k, v]) => (
|
Object.entries(CATEGORIES).map(([k, v]) => (
|
||||||
<li>
|
<li>
|
||||||
<a href=`/category/${k}`>{v}</a>
|
<a href={`/category/${k}`}>{v}</a>
|
||||||
</li>
|
</li>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,39 @@
|
||||||
const { data } = Astro.props;
|
const { data } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.post {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-category {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: #2f4f4f;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title {
|
||||||
|
font-size: var(--h4-desktop);
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-summary {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-date {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class="post">
|
<div class="post">
|
||||||
<p class="post-category">{data.category}</p>
|
<p class="post-category">{data.category}</p>
|
||||||
<h4 class="post-title">{data.title}</h4>
|
<h4 class="post-title">{data.title}</h4>
|
||||||
|
|
|
@ -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/header.css";
|
|
||||||
import "../styles/home.css";
|
import "../styles/home.css";
|
||||||
|
|
||||||
import { getCollection } from "astro:content";
|
import { getCollection } from "astro:content";
|
||||||
|
|
|
@ -1,87 +0,0 @@
|
||||||
.container {
|
|
||||||
width: 750px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 36px;
|
|
||||||
margin: 24px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-title {
|
|
||||||
font-family: "Courier New", Courier, monospace;
|
|
||||||
font-size: var(--h1-desktop);
|
|
||||||
max-width: 250;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
|
@ -1,40 +1,17 @@
|
||||||
|
.container {
|
||||||
|
width: 750px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 36px;
|
||||||
|
margin: 24px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.posts {
|
.posts {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 48px;
|
gap: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-category {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: #2f4f4f;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-title {
|
|
||||||
font-size: var(--h4-desktop);
|
|
||||||
font-weight: normal;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-summary {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-date {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-all-posts {
|
.home-all-posts {
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user