X-Git-Url: https://git.rapsys.eu/blogbundle/blobdiff_plain/2c9c4236f8e14311f6d8b259f51b5ab002b048c5..757bcf477033e86011feb2accce8a5526a223fa3:/Resources/public/css/screen.css

diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css
index e470c63..7227a83 100644
--- a/Resources/public/css/screen.css
+++ b/Resources/public/css/screen.css
@@ -36,8 +36,13 @@ h2 {
 }
 
 h3 {
-	font-size: 1.17rem;
-	margin: 1.17rem 0;
+	font-size: 1.25rem;
+	line-height: 1.65rem;
+	font-family: 'Lemon',sans-serif;
+	color: #09c;
+	text-shadow: 1.5px 1.5px 3px #136;
+	/*font-size: 1.17rem;
+	margin: 1.17rem 0;*/
 }
 
 h4 {
@@ -101,6 +106,10 @@ body {
 	line-height: 60px;
 }
 
+#logo strong {
+	word-break: break-word;
+}
+
 #nav {
 	display: flex;
 	flex-wrap: wrap;
@@ -147,6 +156,7 @@ body {
 
 
 /* Index */
+section.form,
 #content {
 	/*margin: .5rem 0;
 	border-radius: .5rem;
@@ -189,6 +199,11 @@ section section {
 	row-gap: .5rem;
 }
 
+article section:last-child,
+section section:last-child {
+	margin-bottom: .5rem;
+}
+
 article footer,
 section footer {
 	padding: .5rem;
@@ -209,6 +224,73 @@ section article {
 /*section article:last-child {
 	margin-bottom: .5rem;
 }*/
+form {
+	display: flex;
+	flex-direction: column;
+	gap: .5rem;
+}
+
+form div {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	gap: .5rem;
+}
+
+form div div {
+	flex-direction: column;
+}
+
+form div ul {
+	display: flex;
+	flex-direction: column;
+	gap: .2rem;
+}
+
+form div li {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	border-radius: .2rem;
+	border: .05rem solid transparent;
+	border-color: #c33333;
+	background-color: #f9c3c3;
+	color: #c33333;
+	padding: .1rem .2rem;
+}
+
+form div li::before,
+form div li::after {
+	/*XXX: display /!\ symbol */
+	content: "⚠";
+}
+form label {
+	width: 12rem;
+	text-align: right;
+	line-height: 1.3rem;
+}
+
+form label.captcha {
+	line-height: 2.5rem;
+	height: 2.5rem;
+}
+
+form label.captcha img {
+	width: 9.2rem;
+	height: 2.5rem;
+}
+
+form input,
+form textarea {
+	width: 24rem;
+}
+
+form select {
+	width: 24.2rem;
+	padding: 2px;
+	padding-block: 1px;
+	box-sizing: content-box;
+}
 
 header h1 a,
 header h2 a,
@@ -303,99 +385,124 @@ footer nav.pager a[rel=next] {
 	margin: 0 .5rem;
 }*/
 
-/* Article */
-#article,
-#contact,
-#keyword {
-	margin: .5rem 0;
-	border-radius: .5rem;
-	border: .1rem solid #00c3f9;
-	padding: .5rem;
-	overflow-x: hidden;
+/* Message */
+.message {
+	margin: 0 .5rem;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	font-size: .9rem;
+	padding: .2rem;
+	border-radius: .2rem;
+	border: .05rem solid transparent;
+	text-align: center;
 }
 
-#article header,
-#contact header,
-#keyword header {
-	background-color: #00c3f9;
-	margin: -.5rem -.5rem .5rem -.5rem;
-	padding: .5rem;
-	color: #0063c9;
+.message::before,
+.message::after {
+	margin: auto 0;
+	padding: 0 .25rem;
 }
 
-#article header h3,
-#contact header h3,
-#keyword header h3 {
+p.message {
 	margin: 0;
 }
 
-#article header p,
-#keyword header p {
+.message ul {
 	margin: 0;
-	font-size: .75rem;
-	display: flex;
-	justify-content: space-between;
+	padding: 0;
+	list-style: none inside none;
+	gap: .1rem;
 }
 
-#article a,
-#keyword a {
-	color: #0063c9;
+.message li {
+	padding: .25rem;
 }
 
-#article p,
-#article pre,
-#article ul,
-#contact div,
-#keyword p,
-#keyword pre,
-#keyword ul {
-	margin-bottom: .5rem;
+.error {
+	border-color: #c33333;
+	background-color: #f9c3c3;
+	color: #c33333;
 }
 
-#article p,
-#keyword p {
-	text-align: justify;
-	text-justify: distribute;
+.error::before,
+.error::after {
+	/*XXX: display /!\ symbol */
+	content: "⚠";
 }
 
-#article p:last-child,
-#contact div:last-child {
-	margin-bottom: none;
+.notice {
+	border-color: #3333c3;
+	background-color: #c3c3f9;
+	color: #3333c3;
 }
 
-#contact input,
-#contact textarea {
-	width: 24rem;
-	padding: 2px;
-	border: 1px solid #00c3f9;
+.notice::before,
+.notice::after {
+	/*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
+	 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
+	/*XXX: display i symbol */
+	content: "ℹ";
+	/*XXX: display # symbol */
+	/*content: "⌘";*/
 }
 
-#contact button.submit {
-	width: 4rem;
-	margin: 0 10rem;
+.warning {
+	border-color: #c39333;
+	background-color: #f9c333;
+	color: #936333;
 }
 
-#contact div div:last-child {
-	text-align: center;
+.warning::before,
+.warning::after {
+	/*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
+	 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
+	content: "?";
+	/*XXX: display # symbol */
+	/*content: "⌘";*/
 }
 
-#article pre {
-	border-radius: .5rem;
-	border: .1rem solid #00c3f9;
-	padding: .5rem;
-	color: #0063c9;
-	overflow-x: auto;
-	margin-bottom: 1rem;
+/* Article */
+article p,
+article pre,
+article ul {
+	margin-bottom: .5rem;
 }
 
-#article ul {
+article p:last-child {
+	margin-bottom: 0;
+}
+
+article ul {
 	margin-top: -.5rem;
+	list-style: "- " inside none;
+	padding-left: .5rem;
 }
 
-#article ul:first-child {
+article li {
+	margin-bottom: .3rem;
+}
+
+article li:last-child {
+	margin-bottom: 0;
+}
+
+article ul:first-child {
 	margin-top: none;
 }
 
+article pre {
+	border-radius: .5rem;
+	border: .1rem solid #00c3f9;
+	padding: .5rem;
+	margin-bottom: 1rem;
+	color: #0063c9;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	word-break: break-all;
+	overflow-x: auto;
+}
+
 #footer {
 	font-size: .8rem;
 	padding: .5rem;