From c4f178532a20a4900458db15ededc46a14ae1d21 Mon Sep 17 00:00:00 2001 From: dan Date: Tue, 16 May 2023 18:35:06 -0400 Subject: restyle demo --- client.html | 4 +--- index.html | 26 +++++++++++++++++++++----- 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"> + rows="5"> Are you a bot? Type no if not. diff --git a/index.html b/index.html index bde1c4d..dab9f47 100644 --- a/index.html +++ b/index.html @@ -2,13 +2,29 @@ - + -

Comments Demo Page

+ +

Comments Demo Page

Page demonstrating usage of comments widget.

Demo page for github pages.

All comments on the demo server will be wiped automatically roughly every hour. Don't post anything stupid.

+ diff --git a/style.css b/style.css index ff91eb0..b065a5b 100644 --- a/style.css +++ b/style.css @@ -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; } } -- cgit v1.2.3