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

Separate styles from template

Browse Source
doctorpavel
Emil Miler 3 years ago
parent 5378ecca19
commit f30d196457
2 changed files with 71 additions and 72 deletions
Show Stats Download Patch File Download Diff File

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

@ -3,78 +3,7 @@
<head> <head>
<title>kchan - {name}</title> <title>kchan - {name}</title>
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<style> <link rel="stylesheet" href="style.css">
.wrap {
max-width: 60rem;
margin: 0 auto;
}
body {
margin: 0;
box-sizing: border-box;
font-size: 18px;
line-height: 1.5;
}
header {
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 { margin-bottom: 3rem }
article:after {
/* reset float and keep bottom margin */
content: "";
display: block;
float: none;
clear: both;
}
article img {
float: left;
width: 15rem;
max-height: 25rem;
margin-right: 1rem;
}
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 img { width: 10rem }
}
@media screen and (max-width: 700px) {
body { font-size: 16px }
article img { width: 6rem }
article .meta { flex-direction: column-reverse }
}
</style>
</head> </head>
<body> <body>
<header> <header>

70
src/www/style.css
Unescape Escape View File

@ -0,0 +1,70 @@
.wrap {
max-width: 60rem;
margin: 0 auto;
}
body {
margin: 0;
box-sizing: border-box;
font-size: 18px;
line-height: 1.5;
}
header {
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 { margin-bottom: 3rem }
article:after {
/* reset float and keep bottom margin */
content: "";
display: block;
float: none;
clear: both;
}
article img {
float: left;
width: 15rem;
max-height: 25rem;
margin-right: 1rem;
}
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 img { width: 10rem }
}
@media screen and (max-width: 700px) {
body { font-size: 16px }
article img { width: 6rem }
article .meta { flex-direction: column-reverse }
}
Write Preview
Loading…
Cancel
Save