diff options
| author | dan <[email protected]> | 2023-05-16 18:35:06 -0400 |
|---|---|---|
| committer | dan <[email protected]> | 2023-05-16 18:35:06 -0400 |
| commit | c4f178532a20a4900458db15ededc46a14ae1d21 (patch) | |
| tree | 6fada4ac941ec80d8e1eac99f5733d5a71c3fd2e | |
| parent | 56a08c8bfdd863d36aba80e7aab15f3feb9cb332 (diff) | |
| download | simple-comments-widget-c4f178532a20a4900458db15ededc46a14ae1d21.tar.gz simple-comments-widget-c4f178532a20a4900458db15ededc46a14ae1d21.tar.bz2 simple-comments-widget-c4f178532a20a4900458db15ededc46a14ae1d21.zip | |
restyle demo
| -rw-r--r-- | client.html | 4 | ||||
| -rw-r--r-- | index.html | 26 | ||||
| -rw-r--r-- | style.css | 26 |
3 files changed, 39 insertions, 17 deletions
diff --git a/client.html b/client.html index fc0e5d3..5721d05 100644 --- a/client.html +++ b/client.html @@ -17,9 +17,7 @@ maxlength="540" id="commentcontent" name="content" - value="" - rows="5" - cols="50"></textarea> + rows="5"></textarea> </span> <label for="bot">Are you a bot? Type no if not.</label> <input id="bot" type="text" value=""/> @@ -2,13 +2,29 @@ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" href="style.css"> + <style> + body { + font-family: Lato, FreeSans, Roboto, Helvetica, Sans-Serif; + } + + #comments-object { + border: solid thin; + box-sizing: border-box; + } + </style> </head> - <h1> Comments Demo Page </h1> + <body> + <h1> Comments Demo Page </h1> - <p>Page demonstrating usage of comments widget.</p> + <p>Demo page for github pages.</p> - <p>All comments on the demo server will be wiped automatically roughly every hour. Don't post anything stupid.</p> + <p>All comments on the demo server will be wiped automatically roughly every hour. Don't post anything stupid.</p> - <object width="100%" height="1000vh" type="text/html" data="client.html"></object> + <object id="comments-object" + width="100%" + height="1000vh" + type="text/html" + data="client.html" + ></object> + </body> </html> @@ -1,16 +1,24 @@ +#comments-widget h5 { + margin-top: 1rem; + margin-bottom: 1rem; +} + #comments-widget { font-family: Lato, FreeSans, Roboto, Helvetica, Sans-Serif; + display: flex; + flex-direction: column; } .comment-form { - margin-top: 1em; + max-width: 100%; } .comment-form #commentcontent { width: 100%; - font-family: Lato, FreeSans, Roboto, Helvetica, Sans-Serif; + box-sizing: border-box; } + .comment-form #submit { border: 0; line-height: 2.5; @@ -27,17 +35,17 @@ cursor: pointer; } -@media only screen and (max-width: 450px) { - #submit { - width: 100%; - } - #bot { - width: 100%; +@media only screen and (min-width: 481px) { + .comment-form #submit { + float: right; } +} - #username { +@media only screen and (max-width: 481px) { + .comment-form input { width: 100%; + box-sizing: border-box; } } |