From dd13c46be9de9774ebab3dd3d832bd91aabd2877 Mon Sep 17 00:00:00 2001
From: Joel Calado <joelcalado@gmail.com>
Date: Wed, 31 Mar 2021 14:57:39 +0100
Subject: [PATCH] share website tips on the new .message-card

---
 index.html | 13 ++++++++-----
 main.css   | 16 +++++++++-------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 35c2235..ce8e88d 100644
--- a/index.html
+++ b/index.html
@@ -651,11 +651,14 @@
 					<input type="text" autocorrect="off" id="iframeURL" autocapitalize="none" style="margin:10px; border:2px solid; padding:10px; width:400px;" title="Enter an HTTPS URL" multiple/><br />
 					<button onclick="previewIframe(getById('iframeURL').value);" >Preview</button> 
 					<button onclick="this.innerHTML = 'Update'; session.publishIFrame(getById('iframeURL').value);" >Share</button><br />
-					<small class="iframeblob">
-						<li>Not all websites will work with this feature as some sites disallow embedding.</li>
-						<li>The site will try to auto-optimize standard Youtube or Twitch links.</li>
-						<li>Remote websites must be CORS/IFrame compatible with full SSL-encryption enabled.</li>
-					</small>
+					<div class="message-card info">
+						<h1>Notes</h1>
+						<ul>
+							<li>Not all websites will work with this feature as some sites disallow embedding.</li>
+							<li>The site will try to auto-optimize standard Youtube or Twitch links.</li>
+							<li>Remote websites must be CORS/IFrame compatible with full SSL-encryption enabled.</li>
+						</ul>
+					</div>
 					<div id="iFramePreview" style=" width: 1280px; height: 720px; margin: auto; padding: 10px;"></div>
 				</div>
 				<div class="outer close">
diff --git a/main.css b/main.css
index e03692d..ac5aab3 100644
--- a/main.css
+++ b/main.css
@@ -2398,13 +2398,6 @@ span#guestTips {
 	cursor:pointer;
 }
 
-.iframeblob{
-	padding-top:18px;
-	text-align: left;
-    width: 600px;
-    display: block;
-    margin: auto;
-}
 #shareScreenGear{
 	display:none;
 }
@@ -2468,6 +2461,15 @@ div.message-card.info:before {
 	content: "\f05a";
 }
 
+.message-card ul {
+	text-align: left;
+	margin-top: var(--regular-margin);
+}
+
+.message-card li {
+	margin: 5px 0;
+}
+
 @keyframes floating { 
     0% { transform: translate(0,  0px); } 
     50%  { transform: translate(0, 15%); }