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> <li><a href="#">CV</a></li>
</ul> </ul>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-4">
<div class="flex flex-row gap-4 items-center h-[110px]"> <div class="flex flex-row gap-2 items-center md:h-20 h-16">
<a href={base} class="no-underline text-inherit" <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 id="board" class="board"></div>
</div> </div>
<div> <div>
<ul <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> <li>
<a href={`${base}/category/fikir`}>Fikir</a> <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> <a href={`${base}/category/ansiklopedi`}>Ansiklopedi</a>
</li> </li>
</ul> </ul>
<hr class="mb-0" /> <hr class="mb-0 mt-2" />
</div> </div>
</div> </div>
</div> </div>
<script> <script>
import ConwaySimulator from "../scripts/conway-simulator"; 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); document.getElementById("board")?.append(gol.canvas);
gol.start(); gol.start();
</script> </script>

2
src/components/Post.astro
View File

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

4
src/layouts/Layout.astro
View File

@ -18,7 +18,9 @@ import "../styles/main.css";
<title>{title}</title> <title>{title}</title>
</head> </head>
<body class="flex justify-center font-sans"> <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 /> <slot />
</div> </div>
</body> </body>

14
src/styles/main.css
View File

@ -2,15 +2,11 @@
@tailwind utilities; @tailwind utilities;
:root { :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-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 18px;
@media (min-width: 768px) {
font-size: 20px;
}
background-color: #f5fffa; background-color: #f5fffa;
} }
@ -20,6 +16,6 @@
@layer components { @layer components {
.posts { .posts {
@apply flex flex-col gap-10; @apply flex flex-col gap-10 md:gap-8;
} }
} }