dawidkubis
/
kchan
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Basic styles and page layout

Browse Source
doctorpavel
Emil Miler 3 years ago
parent 8bc5be6259
commit 9710556740
2 changed files with 122 additions and 15 deletions
Show Stats Download Patch File Download Diff File

139
src/www/index.html
Unescape Escape View File

@ -1,19 +1,126 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>rchan - {name}</title> <title>kchan - {name}</title>
<link rel="stylesheet" type="text/css" href="css"> <link rel="icon" type="image/x-icon" href="favicon.ico">
</head> <style>
<body> .wrap {
<div class="grid"> max-width: 60rem;
<div class="home"> margin: 0 auto;
<h1> }
<a href="/">rchan</a> <a href="/readme">readme</a> <a href="post">post</a> body {
</h1> margin: 0;
<hr> box-sizing: border-box;
</div> font-size: 18px;
<div class="text">{}</div> line-height: 1.5;
</div> }
</head> header {
</html> box-shadow: 0 0 20px 5px rgba(0,0,0,0.2);
padding: .25em .5em;
margin-bottom: 3rem;
}
nav a {
text-decoration: none;
color: #000;
}
nav a:hover {
color: blue;
}
nav a:before {
content: "[ ";
color: #999;
}
nav a:after {
content: " ]";
color: #999;
}
main { padding: 0 .5rem }
article {
display: grid;
grid-template-columns: 15rem 1fr;
grid-column-gap: 1rem;
margin-bottom: 3rem;
}
article img {
width: 100%;
max-height: 25rem;
}
article .title {
font-weight: bold;
margin-bottom: .5rem;
}
article .meta {
display: flex;
margin-bottom: .5rem;
}
article .image-info {
font-size: .8rem;
color: #444;
margin-bottom: .5rem;
}
@media screen and (max-width: 900px) {
article { grid-template-columns: 10rem 1fr }
}
@media screen and (max-width: 700px) {
body { font-size: 16px }
article { grid-template-columns: 6rem 1fr }
article .meta { flex-direction: column-reverse }
}
</style>
</head>
<body>
<header>
<div class="wrap">
<nav>
<span>kchan &ndash;</span>
<a href="#">index</a>
<a href="#">faq</a>
<a href="#">new thread</a>
</nav>
</div>
</header>
<main>
<div class="wrap">
<article>
<img src="placeholder.jpg" alt="img">
<div>
<div class="meta">
<div>
{ post_datetime }&nbsp;
<strong>{ post_id }</strong>&nbsp;
</div>
<nav>
<a href="#">open</a>
<a href="#">quote</a>
<a href="#">reply</a>
</nav>
</div>
<div class="image-info">{ image_filename }</div>
<div class="title">{ post_title }</div>
{ post_content }
</div>
</article>
<article>
<img src="placeholder.jpg" alt="img">
<div>
<div class="meta">
<div>
{ post_datetime }&nbsp;
<strong>{ post_id }</strong>&nbsp;
</div>
<nav>
<a href="#">open</a>
<a href="#">quote</a>
<a href="#">reply</a>
</nav>
</div>
<div class="image-info">{ image_filename }</div>
<div class="title">{ post_title }</div>
{ post_content }
</div>
</article>
</div>
</main>
</head>
</html>

BIN
src/www/placeholder.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

Write Preview
Loading…
Cancel
Save