diff options
author | cyfraeviolae <cyfraeviolae> | 2022-02-26 06:40:01 -0500 |
---|---|---|
committer | cyfraeviolae <cyfraeviolae> | 2022-02-26 06:40:01 -0500 |
commit | 4cf019616531b2deab13e8e0eb5ae4bf7396585b (patch) | |
tree | 04e289ac4cd6a81bf00d648732ce23d44b96c3d9 | |
parent | 0e76cc78ac29dd204068a3f5483cf30ff478407a (diff) |
responsive
-rw-r--r-- | index.html | 6 | ||||
-rw-r--r-- | static/styles.css | 21 |
2 files changed, 18 insertions, 9 deletions
@@ -4,8 +4,8 @@ <title>cyfraeviolae</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="shortcut icon" type="image/x-icon" href="cyfraeviolae/static/favicon.ico"> - <link rel="stylesheet" href="cyfraeviolae/static/styles.css"> + <link rel="shortcut icon" type="image/x-icon" href="/cyfraeviolae/static/favicon.ico"> + <link rel="stylesheet" href="/cyfraeviolae/static/styles.css"> </head> <body> <div class="container"> @@ -31,7 +31,7 @@ <p> <img src="/well-ordered/static/favicon.ico" width=12 height=12> <a class="work" href="/well-ordered">Well-Ordered</a> - computes how to efficiently and incrementally recreate 77 cocktails. + computes how to best incrementally recreate 77 cocktails. </p> <p> <img src="/prosodyle/static/favicon.ico" width=12 height=12> diff --git a/static/styles.css b/static/styles.css index 03f8ee1..e5d471f 100644 --- a/static/styles.css +++ b/static/styles.css @@ -34,16 +34,25 @@ body { color: DarkSlateGrey; font-family: Charter, serif; font-size: 18px; + text-align: center; + line-height: 1; } .container { margin: 0 auto; - margin-top: 6em; - max-width: 40em; - border: 1px DarkSlateGrey dotted; - border-radius: 4px; - padding: 2em; - box-shadow: 4px 4px 0px DarkSlateGrey; + text-align: left; + display: inline-block; + margin: 1em; +} + +@media only screen and (min-width: 700px) { + .container { + margin-top: 10%; + border: 1px DarkSlateGrey dotted; + border-radius: 4px; + box-shadow: 4px 4px 0px DarkSlateGrey; + padding: 2em; + } } p { |