Fix pre to break word on overflow

[blogbundle] / Resources / public / css / screen.css

diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css
index e470c638773dbb1e8d18298b91a2dd58148c76e9..7227a83e18ba6e5b1e230f112eaf7ec9c19360d7 100644 (file)
--- 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;