Resolving legacy CSS issue where styles lived in two parallel files

This commit is contained in:
John Donaldson 2018-09-12 10:45:38 -05:00
parent 2acff8f6a3
commit 986951c9bf
23 changed files with 130 additions and 169 deletions

View File

@ -45,7 +45,7 @@ class Page:
ret.write("<html>\n") ret.write("<html>\n")
ret.write(" <head>\n") ret.write(" <head>\n")
ret.write(" <title>{}</title>\n".format(self.title)) ret.write(" <title>{}</title>\n".format(self.title))
ret.write(" <link rel=\"stylesheet\" href=\"{}/files/www/res/style.css\">\n".format(self.base)) ret.write(" <link rel=\"stylesheet\" href=\"{}/files/www/css/style.css\">\n".format(self.base))
for s in self.scripts: for s in self.scripts:
ret.write(" {}\n".format(s)) ret.write(" {}\n".format(s))
ret.write(" </head>\n") ret.write(" </head>\n")

View File

@ -61,7 +61,7 @@ def generate_html(ziphandle, puzzle, puzzledir, category, points, authors, files
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>{category} {points}</title> <title>{category} {points}</title>
<link rel="stylesheet" href="../../style.css"> <link rel="stylesheet" href="../../css/style.css">
{scripts} {scripts}
</head> </head>
<body> <body>

View File

@ -33,7 +33,7 @@ function koth.page(title, body)
print() print()
end end
print("<!DOCTYPE html>") print("<!DOCTYPE html>")
print("<html><head><title>" .. title .. "</title><link rel=\"stylesheet\" href=\"../css/style.css\"><meta name=\"viewport\" content=\"width=device-width\"></head>") print("<html><head><title>" .. title .. "</title><link rel=\"stylesheet\" href=\"../../css/style.css\"><meta name=\"viewport\" content=\"width=device-width\"></head>")
print("<body><h1>" .. title .. "</h1>") print("<body><h1>" .. title .. "</h1>")
if (body) then if (body) then
print("<section>") print("<section>")

85
www/css/style-legacy.css Normal file
View File

@ -0,0 +1,85 @@
html {
color: #ccb;
height: 100%;
}
body {
margin: 0;
height: 100%
}
pre, tt {
background-color: rgba(0, 0, 0, 0.3);
}
.terminal {
background: rgba(80, 70, 60, 0.96);
display: inline-block;
margin: 1%;
border: solid black 0.2em;
border-radius: 1em 1em 0.5em 1em;
overflow: auto;
}
.terminal p {
padding: 0.25em 0.5em;
}
#overview, #messages {
width: 47%;
height: 20%;
}
#puzzles {
width: 24%;
height: 70%;
}
#main {
width: 70%;
height: 70%;
}
.download {
background: #080;
color: white;
display: inline-block;
}
.download:link {
color: inherit;
text-decoration: inherit;
}
h1 {
text-align: center;
font-size: 120%;
}
a:link, .link {
color: #13a5de;
cursor: pointer;
}
a:visited {
color: #999999;
}
@media (max-width: 52em) {
#overview, #messages, #puzzles, #main {
width: 96%;
}
}
::-webkit-scrollbar {
width: 0.7em;
}
::-webkit-scrollbar-track {
/* -webkit-box-shadow: inset 0 0 0.5em rgba(200, 200, 200, 0.3); */
background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 1em;
}

View File

@ -14,7 +14,6 @@ html {
-moz-background-size: cover; -moz-background-size: cover;
-o-background-size: cover; -o-background-size: cover;
background-size: cover; background-size: cover;
/* min-height: 100%;*/
font-family: "Maven Pro", Ubuntu, sans-serif; font-family: "Maven Pro", Ubuntu, sans-serif;
overflow-y: auto; overflow-y: auto;
} }
@ -259,3 +258,36 @@ nav li + li:before {
font-size: small; font-size: small;
text-align: center; text-align: center;
} }
#puzzles {
width: 24%;
height: 20%;
}
.category h2 {
margin: 0;
font-size: 100%;
}
.category ul {
margin: 0;
padding-left: 1em;
font-size: 90%;
}
.category li {
display: inline;
}
.category li + li:before {
content: " ";
}
.category a:link, .link {
color: #13a5de;
cursor: pointer;
}
.category a:visited {
color: #999999;
}

View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="res/style.css"> <link rel="stylesheet" href="res/style.css">
<link rel="icon" href="images/luna-moth.svg" type="image/svg+xml"> <link rel="icon" href="images/luna-moth.svg" type="image/svg+xml">
<link rel="icon" href="images/luna-moth.png" type="image/png"> <link rel="icon" href="images/luna-moth.png" type="image/png">

View File

@ -4,7 +4,7 @@
<title>Open Puzzles</title> <title>Open Puzzles</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="res/style.css"> <!--<link rel="stylesheet" href="css/style-legacy.css">-->
<link rel="icon" href="images/luna-moth.svg" type="image/svg+xml"> <link rel="icon" href="images/luna-moth.svg" type="image/svg+xml">
<link rel="icon" href="images/luna-moth.png" type="image/png"> <link rel="icon" href="images/luna-moth.png" type="image/png">

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,18 +0,0 @@
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(Lato-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(Lato-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(Lato-Italic.ttf) format('truetype');
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

View File

@ -1,139 +0,0 @@
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(Lato-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(Lato-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(Lato-Italic.ttf) format('truetype');
}
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(Inconsolata-Regular.ttf) format('truetype');
}
html {
background: rgba(61, 50, 44, 0) url(brown-lines.jpg) no-repeat center center fixed;
background-size: cover;
color: #ccb;
height: 100%;
font-family: Lato, sans-serif;
}
body {
margin: 0;
height: 100%
}
pre, tt {
font-family: Inconsolata, monospace;
background-color: rgba(0, 0, 0, 0.3);
}
.terminal {
background: rgba(80, 70, 60, 0.96);
display: inline-block;
margin: 1%;
border: solid black 0.2em;
border-radius: 1em 1em 0.5em 1em;
overflow: auto;
}
.terminal p {
padding: 0.25em 0.5em;
}
#preview {
background-image: url(preview.png);
background-size: contain;
max-width: 40em;
display: block;
margin: 1% auto;
}
#overview, #messages {
width: 47%;
height: 20%;
}
#puzzles {
width: 24%;
height: 70%;
}
#main {
width: 70%;
height: 70%;
}
.download {
background: #080;
color: white;
display: inline-block;
}
.download:link {
color: inherit;
text-decoration: inherit;
}
h1 {
text-align: center;
font-size: 120%;
}
a:link, .link {
color: #13a5de;
cursor: pointer;
}
a:visited {
color: #999999;
}
.category h2 {
margin: 0;
font-size: 100%;
}
.category ul {
margin: 0;
padding-left: 1em;
font-size: 90%;
}
.category li {
display: inline;
}
.category li + li:before {
content: " ";
}
@media (max-width: 52em) {
#overview, #messages, #puzzles, #main {
width: 96%;
}
}
::-webkit-scrollbar {
width: 0.7em;
}
::-webkit-scrollbar-track {
/* -webkit-box-shadow: inset 0 0 0.5em rgba(200, 200, 200, 0.3); */
background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 1em;
}