commit cbf48f4a7b03556324089eec2caae11d88c07048 parent c9365bd271252ea3a9ccb328bd3f8c1d5e53615f Author: Ryan Wolf <rwolf@borderstylo.com> Date: Wed, 28 Mar 2012 21:56:04 -0700 styling for index.template Diffstat:
| A | README.md | | | 4 | ++++ |
| M | app.yaml.example | | | 2 | +- |
| M | index.template | | | 32 | ++++++++++++++++++++++++++++++-- |
3 files changed, 35 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md @@ -0,0 +1,4 @@ +References +=== +http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries +http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/ diff --git a/app.yaml.example b/app.yaml.example @@ -1,5 +1,5 @@ application: novelty -version: 1 +version: 2 runtime: go api_version: 3 diff --git a/index.template b/index.template @@ -1,8 +1,36 @@ <html> <head> - <title>Is Ryan at the Office?</title> + <title>{{html .Answer}}.</title> + <style> + body { + background-color: white; + text-align: center; + } + .answer { + padding: 0; + margin: 0; + font-size: 400px; + line-height: 50%; + } + @media screen and (max-width: 768px) { + .answer { + font-size: 280px; + } + } + @media screen and (max-width: 460px) { + .answer { + font-size: 190px; + } + } + @media screen and (max-width: 320px) { + .answer { + font-size: 160px; + } + } + </style> + <meta name="viewport" content="width=device-width; initial-scale=1.0"> </head> <body> - <h1>{{html .Answer}}</h1> + <p class="answer">{{html .Answer}}.</p> </body> </html>