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

style: add responsive style
All checks were successful
/ Build (push) Successful in 1m37s
Details

Browse Source
This commit is contained in:
log101 2024-05-17 18:20:51 +03:00
parent c2b6a60a14
commit ea504eec6a
4 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Header.astro
View File

@ -24,16 +24,16 @@ const base = import.meta.env.BASE_URL;
<li><a href="#">CV</a></li>
</ul>
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-4 items-center h-[110px]">
<div class="flex flex-col gap-4">
<div class="flex flex-row gap-2 items-center md:h-20 h-16">
<a href={base} class="no-underline text-inherit"
><h1 class="font-mono text-[3.815rem] pb-2">log101</h1></a
><h1 class="font-mono md:text-6xl text-5xl -ml-[0.27rem]">Log101</h1></a
>
<div id="board" class="board"></div>
</div>
<div>
<ul
class="flex flex-row items-center justify-between list-none p-0 gap-3 nav-links"
class="flex md:flex-row flex-col md:items-center justify-between list-none p-0 gap-3 nav-links"
>
<li>
<a href={`${base}/category/fikir`}>Fikir</a>
@ -48,15 +48,21 @@ const base = import.meta.env.BASE_URL;
<a href={`${base}/category/ansiklopedi`}>Ansiklopedi</a>
</li>
</ul>
<hr class="mb-0" />
<hr class="mb-0 mt-2" />
</div>
</div>
</div>
<script>
import ConwaySimulator from "../scripts/conway-simulator";
let cols = 24;
let pixelSize = 6;
if (screen.availWidth > 768) {
cols = 46;
pixelSize = 10;
}
let gol = new ConwaySimulator(8, 46, 10, 250);
let gol = new ConwaySimulator(8, cols, pixelSize, 250);
document.getElementById("board")?.append(gol.canvas);
gol.start();
</script>

2
src/components/Post.astro
View File

@ -117,7 +117,7 @@ const { Content } = await post.render();
}
{
fullText && (
<div class="post-body">
<div class="text-lg">
<Content />
</div>
)

4
src/layouts/Layout.astro
View File

@ -18,7 +18,9 @@ import "../styles/main.css";
<title>{title}</title>
</head>
<body class="flex justify-center font-sans">
<div class="max-w-[750px] flex flex-col gap-8 my-6">
<div
class="md:max-w-[750px] w-full flex flex-col gap-8 md:gap-6 my-6 md:mx-0 mx-4 overflow-hidden"
>
<slot />
</div>
</body>

14
src/styles/main.css
View File

@ -2,15 +2,11 @@
@tailwind utilities;
:root {
--h1-desktop: 3.815rem;
--h2-desktop: 3.052rem;
--h3-desktop: 2.441rem;
--h4-desktop: 1.953rem;
--h5-desktop: 1.563rem;
--h6-desktop: 1.25rem;
--small-desktop: 0.8rem;
font-size: 20px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 18px;
@media (min-width: 768px) {
font-size: 20px;
}
background-color: #f5fffa;
}
@ -20,6 +16,6 @@
@layer components {
.posts {
@apply flex flex-col gap-10;
@apply flex flex-col gap-10 md:gap-8;
}
}