chore: put css in scopes

This commit is contained in:
log101 2024-05-11 19:24:15 +03:00
parent 39ac6224ad
commit 4cbca8ccd7
6 changed files with 126 additions and 120 deletions

View File

@ -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>

View File

@ -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>
)) ))
} }

View File

@ -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>

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/header.css";
import "../styles/home.css"; import "../styles/home.css";
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";

View File

@ -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;
}

View File

@ -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;