Move CSS to a separate file.

This commit is contained in:
ccd0 2015-03-07 22:36:57 -08:00
parent d306780ce3
commit d21810fdc2
3 changed files with 48 additions and 50 deletions

View File

@ -169,7 +169,7 @@ module.exports = (grunt) ->
git checkout gh-pages
git pull
git merge --no-commit -s ours -
git checkout - README.md index.html img src/General/img/icon.gif
git checkout - README.md index.html web.css img src/General/img/icon.gif
git commit -am "Update web page."
git checkout -
""".split('\n').join('&&')

View File

@ -2,54 +2,7 @@
<html><head>
<meta charset="utf-8">
<title>4chan X</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
}
h1 {
text-align: center;
background-color: #eee;
}
img.screenshot {
display: block;
margin: auto;
width: 640px;
max-width: 100%;
}
@media (min-width: 1120px) {
img.screenshot {
float: right;
margin-left: 8px;
}
}
span.hover {
display: none;
}
a:hover + span.hover {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
background: rgba(0,0,0,0.4);
}
span.hover > img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
box-shadow: 5px 5px 20px rgba(0,0,0,0.4);
}
h2 ~ p, h2 ~ p + ul {
margin-left: 1em;
}
</style>
<link rel="stylesheet" href="web.css">
<link rel="icon" href="src/General/img/icon.gif">
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/ohnjgmpcibpbafdlkimncjhflgedgpam">
</head><body>
@ -70,4 +23,3 @@ for (var i = 0; i < links.length; i++) {
}
</script>
</body></html>

46
web.css Normal file
View File

@ -0,0 +1,46 @@
body {
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
}
h1 {
text-align: center;
background-color: #eee;
}
img.screenshot {
display: block;
margin: auto;
width: 640px;
max-width: 100%;
}
@media (min-width: 1120px) {
img.screenshot {
float: right;
margin-left: 8px;
}
}
span.hover {
display: none;
}
a:hover + span.hover {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
background: rgba(0,0,0,0.4);
}
span.hover > img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
box-shadow: 5px 5px 20px rgba(0,0,0,0.4);
}
h2 ~ p, h2 ~ p + ul {
margin-left: 1em;
}