log101/log101-dot-dev
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: put css in scopes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Footer.astro
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">
<p class="copyright">© 2024 Furkan Erdem</p>
<a class="about-me" href="#">Hakkımda</a>

72
src/components/Header.astro
View File

@ -2,6 +2,76 @@
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">
<ul class="contact-links undecorated-anchor">
<li><a href="#">Eposta</a></li>
@ -20,7 +90,7 @@ import { CATEGORIES } from "../content/config";
{
Object.entries(CATEGORIES).map(([k, v]) => (
<li>
<a href=`/category/${k}`>{v}</a>
<a href={`/category/${k}`}>{v}</a>
</li>
))
}

33
src/components/Post.astro
View File

@ -2,6 +2,39 @@
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">
<p class="post-category">{data.category}</p>
<h4 class="post-title">{data.title}</h4>

1
src/pages/index.astro
View File

@ -2,7 +2,6 @@
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import Layout from "../layouts/Layout.astro";
import "../styles/header.css";
import "../styles/home.css";
import { getCollection } from "astro:content";

87
src/styles/header.css
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;
}

39
src/styles/home.css
View File

@ -1,40 +1,17 @@
.container {
width: 750px;
display: flex;
flex-direction: column;
gap: 36px;
margin: 24px 0px;
}
.posts {
display: flex;
flex-direction: column;
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 {
padding-top: 16px;
color: inherit;