summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorcyfraeviolae <cyfraeviolae>2022-02-26 06:40:01 -0500
committercyfraeviolae <cyfraeviolae>2022-02-26 06:40:01 -0500
commit4cf019616531b2deab13e8e0eb5ae4bf7396585b (patch)
tree04e289ac4cd6a81bf00d648732ce23d44b96c3d9
parent0e76cc78ac29dd204068a3f5483cf30ff478407a (diff)
responsive
-rw-r--r--index.html6
-rw-r--r--static/styles.css21
2 files changed, 18 insertions, 9 deletions
diff --git a/index.html b/index.html
index f6733de..8d252de 100644
--- a/index.html
+++ b/index.html
@@ -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 {