(create) created about page and styled it

This commit is contained in:
Yusuf İpek
2021-08-08 13:05:43 +03:00
parent f3e5175de3
commit 384d5bc799
11 changed files with 98 additions and 13 deletions
+5 -3
View File
@@ -13,10 +13,12 @@ export default function Home({ posts }) {
<div className="homepage"> <div className="homepage">
<Searchbar search={search} setSearch={setSearch} /> <Searchbar search={search} setSearch={setSearch} />
<h1 className="homepage_heading-1">Rehberler</h1> <h1 className="heading-1">Rehberler</h1>
<div className="homepage_posts"> <div className="homepage_posts">
{filteredPosts.slice(0, 20).map((post) => ( {filteredPosts.slice(0, 21).map((post) => (
<li key={post.id}>{post.title}</li> <li key={post.id}>
<a href="https://searx.yusufipek.me">{post.title}</a>
</li>
))} ))}
</div> </div>
</div> </div>
+22
View File
@@ -0,0 +1,22 @@
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang="tr">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
+32
View File
@@ -0,0 +1,32 @@
export default function Hakkinda() {
return (
<div className="about">
<div>
<h1 className="heading-1 u-center-text u-margin-bottom-small">
Site Hakkında
</h1>
<p>
Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber
yazabilir.
</p>
</div>
<div>
<h2 className="heading-2">Nasıl Rehber Yazarım?</h2>
<ul className="about_list">
<li>
<a href="#">Örnek rehberi</a> indirin ve kuralları okuyun.{" "}
</li>
<li>
<a href="#"> teknolojirehberleri@protonmail.com</a> adresine
markdown dosyanızı gönderin.
</li>
<li>
Başkasının yazısını sayfadan indirip güncelleme yaptıktan sonra
tekrar gönderebilirsiniz.{" "}
</li>
<li>Rehberi yazan/katkı sağlayan kişileri keşfedebilirsiniz!</li>
</ul>
</div>
</div>
);
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 268 KiB

-4
View File
@@ -1,4 +0,0 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

+1
View File
@@ -8,6 +8,7 @@
--color-grey: #383838; --color-grey: #383838;
--color-grey-dark-1: #b2aba1; --color-grey-dark-1: #b2aba1;
--color-grey-dark-2: #fff; --color-grey-dark-2: #fff;
--color-grey-light-1: #b8b8b8;
} }
// FONT CONTROL // FONT CONTROL
+17 -4
View File
@@ -1,11 +1,24 @@
p, .heading-1,
li { .heading-2,
.heading-3,
.heading-4 {
color: var(--color-primary); color: var(--color-primary);
} }
h1 { .heading-1 {
font-size: 2.5rem; font-weight: 500;
font-size: 3rem;
}
.heading-2 {
font-size: 2.4rem;
font-weight: normal;
}
p,
li {
color: var(--color-primary); color: var(--color-primary);
font-size: 2rem;
} }
a { a {
+3
View File
@@ -9,6 +9,9 @@
&_logo { &_logo {
justify-self: flex-end; justify-self: flex-end;
grid-column: 1; grid-column: 1;
font-size: 2.4rem;
color: var(--color-primary);
font-weight: normal;
} }
&_list { &_list {
+1
View File
@@ -13,5 +13,6 @@
@import "./components/searchbar"; @import "./components/searchbar";
@import "./pages/homepage.scss"; @import "./pages/homepage.scss";
@import "./pages/hakkinda.scss";
@import url("https://fontlibrary.org//face/nunito-sans"); @import url("https://fontlibrary.org//face/nunito-sans");
+16
View File
@@ -0,0 +1,16 @@
.about {
display: grid;
justify-content: center;
grid-template-rows: repeat(1, 10rem);
padding: 2rem;
min-height: 100vh;
&_list {
margin-left: 3rem;
li {
margin-top: 1.5rem;
}
}
}
+1 -2
View File
@@ -4,17 +4,16 @@
justify-items: center; justify-items: center;
padding-top: 2rem; padding-top: 2rem;
font-size: 2rem;
list-style-type: none; list-style-type: none;
&_heading-1 { &_heading-1 {
text-align: center;
padding-top: 1rem; padding-top: 1rem;
} }
&_posts { &_posts {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 12rem);
width: 50%; width: 50%;
min-height: 100vh; min-height: 100vh;