From 831e34276130d09e9f1e1a205dda1948625d623a Mon Sep 17 00:00:00 2001 From: Henry Hirsch Date: Wed, 24 Oct 2018 10:49:07 +0200 Subject: [PATCH 1/3] Use external style sheet --- index.html | 117 +---------------------------------------------------- style.css | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 115 insertions(+), 116 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 86fc2981..45d2c0e3 100644 --- a/index.html +++ b/index.html @@ -6,122 +6,7 @@ Age of Empires II Tech Tree - + diff --git a/style.css b/style.css new file mode 100644 index 00000000..8eef5281 --- /dev/null +++ b/style.css @@ -0,0 +1,114 @@ + html, + body { + width: 100%; + height: 100%; + box-sizing: border-box; + } + + body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + } + + #info, + #info a { + display: inline; + font-family: monospace; + color: gray; + } + + #container { + min-width: 100%; + display: flex; + flex-direction: column; + } + + #navigation { + padding-left: 1rem; + } + + #helptext { + position: absolute; + display: none; + max-width: 300px; + background-color: #eee; + border: 2px solid #bbb; + padding: 0.2rem; + font-size: 10pt; + } + + #wrapper { + min-width: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + } + + #techtree { + border: 5px solid #4d3617; + background-color: #e7c28e; + flex: 0 0 auto; + position: relative; + } + + #metainfo { + border: 5px solid #4d3617; + width: 20rem; + flex: 0 0 auto; + display: flex; + flex-direction: column; + background-color: #e7c28e; + padding: 1rem; + } + + #civinfo { + flex: 1 0 auto; + font-size: 11pt; + } + + #thanks { + flex: 0 0 auto; + } + + #civname { + text-align: center; + } + + hr { + overflow: visible; + /* For IE */ + height: 30px; + border-style: solid; + border-color: black; + border-width: 1px 0 0 0; + border-radius: 20px; + } + + hr:before { + /* Not really supposed to work, but does */ + display: block; + content: ""; + height: 30px; + margin-top: -31px; + border-style: solid; + border-color: black; + border-width: 0 0 1px 0; + border-radius: 20px; + } + + #navigation { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + #thanks, + #thanks a { + font-size: 6pt; + font-family: monospace; + color: gray; + } From 940508170f275a935de16158da5e6242a0165f53 Mon Sep 17 00:00:00 2001 From: Henry Hirsch Date: Wed, 24 Oct 2018 19:42:55 +0200 Subject: [PATCH 2/3] Add development information to readme --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3ab705e5..26beb0f9 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,11 @@ -# aoe2techtree +# Aoe 2 Tech Tree Age of Empires II Tech Tree in your Browser [Demo](https://hszemi.github.io/aoe2techtree/) (not the ship) + +## Development +In the project root type either `php -S localhost:8000` or +`python -m SimpleHTTPServer` to start a test server at port 8000. + +Go to [your development version](http://localhost:8000). + From 72bb30efe881fa9541f334db65508c33f99ff666 Mon Sep 17 00:00:00 2001 From: Henry Hirsch Date: Wed, 24 Oct 2018 19:45:00 +0200 Subject: [PATCH 3/3] Update development information in readme --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 26beb0f9..a90159f7 100644 --- a/README.md +++ b/README.md @@ -7,5 +7,6 @@ Age of Empires II Tech Tree in your Browser In the project root type either `php -S localhost:8000` or `python -m SimpleHTTPServer` to start a test server at port 8000. -Go to [your development version](http://localhost:8000). +If that was successful you can view [your development version](http://localhost:8000) +in the webbrowser.