change: html valide css style tags

diff --git a/src/app/html-export.service.ts b/src/app/html-export.service.ts
index cd33a6fe105188c366c3d5897eb320ba62396ce7..d3f2efbe02e20da90e29a1e94760637c197f18a8 100644 (file)
--- a/src/app/html-export.service.ts
+++ b/src/app/html-export.service.ts
@@ -45,14 +45,10 @@ export class HtmlExportService
                        doc.head.appendChild(element);
 
                        let styleElement: HTMLStyleElement = document.createElement("style");
-                       styleElement.setAttribute("type", "text/css");
-                       styleElement.setAttribute("media", "screen");
                        styleElement.innerHTML = this.cssExportContent;
                        doc.head.appendChild(styleElement);
 
                        styleElement = document.createElement("style");
-                       styleElement.setAttribute("type", "text/css");
-                       styleElement.setAttribute("media", "print");
                        styleElement.innerHTML = this.cssPrintExportContent;
                        doc.head.appendChild(styleElement);
 

diff --git a/src/assets/htmlexport.css b/src/assets/htmlexport.css
index 5cf600fb91a4039196ded4b8df5675b4467fe8a6..7746d6484bace985b8847773bc16e270dc031ad8 100644 (file)
--- a/src/assets/htmlexport.css
+++ b/src/assets/htmlexport.css
@@ -3,87 +3,89 @@
        font-family: "Tangerine";
 }
 
-.foodcard {
-       max-width: 60em;
-       margin: 0 auto;
-}
-
-p {
-       font-style: italic;
-       text-align: center;
-}
-
-.grid {
-       display: grid;
-       grid-template-columns: repeat(12, 1fr);
-}
-
-h1 {
-       font-family: "Tangerine", serif;
-       text-align: center;
-       font-size: 2.5em;
-       margin: 1em 0;
-}
-
-h2 {
-       font-family: "Tangerine", serif;
-       text-align: center;
-       font-size: 2em;
-}
-
-.foodmenu {
-       text-align: center;
-}
-
-.food {
-       grid-row: 1;
-       grid-column: 1/13;
-       font-size: 1.2em;
-       font-weight: bold;
-}
+@media only screen {
+       .foodcard {
+               max-width: 60em;
+               margin: 0 auto;
+       }
 
-.sideDish {
-       grid-row: 2;
-       grid-column: 1/13;
-       font-style: italic;
-}
+       p {
+               font-style: italic;
+               text-align: center;
+       }
 
-.price {
-       grid-row: 3;
-       grid-column: 1/13;
-       margin-top: 0.5em;
-}
+       .grid {
+               display: grid;
+               grid-template-columns: repeat(12, 1fr);
+       }
 
-@media (min-width: 46.875em) {
        h1 {
-               text-align: left;
+               font-family: "Tangerine", serif;
+               text-align: center;
+               font-size: 2.5em;
+               margin: 1em 0;
        }
 
        h2 {
-               text-align: left;
+               font-family: "Tangerine", serif;
+               text-align: center;
+               font-size: 2em;
        }
 
        .foodmenu {
-               padding: 0.5em 0;
-               border-bottom: 0.125em solid gray;
-               text-align: left;
+               text-align: center;
        }
 
        .food {
                grid-row: 1;
-               grid-column: 1/9;
-               font-size: 1.5em;
+               grid-column: 1/13;
+               font-size: 1.2em;
+               font-weight: bold;
        }
 
        .sideDish {
                grid-row: 2;
                grid-column: 1/13;
+               font-style: italic;
        }
 
        .price {
-               grid-row: 1;
-               grid-column: 9/13;
-               text-align: right;
-               font-size: 1.1em;
+               grid-row: 3;
+               grid-column: 1/13;
+               margin-top: 0.5em;
+       }
+
+       @media (min-width: 46.875em) {
+               h1 {
+                       text-align: left;
+               }
+
+               h2 {
+                       text-align: left;
+               }
+
+               .foodmenu {
+                       padding: 0.5em 0;
+                       border-bottom: 0.125em solid gray;
+                       text-align: left;
+               }
+
+               .food {
+                       grid-row: 1;
+                       grid-column: 1/9;
+                       font-size: 1.5em;
+               }
+
+               .sideDish {
+                       grid-row: 2;
+                       grid-column: 1/13;
+               }
+
+               .price {
+                       grid-row: 1;
+                       grid-column: 9/13;
+                       text-align: right;
+                       font-size: 1.1em;
+               }
        }
 }

diff --git a/src/assets/htmlprintexport.css b/src/assets/htmlprintexport.css
index 15fd0d05536fe4558878ff3452b949e1e8344f6a..e54a1649572fa9afca62282c6a0fbcb6dd27d64c 100644 (file)
--- a/src/assets/htmlprintexport.css
+++ b/src/assets/htmlprintexport.css
@@ -3,82 +3,84 @@
        font-family: "Tangerine";
 }
 
-p {
-       font-size: 8pt;
-       font-style: italic;
-       text-align: center;
-}
-
-.grid {
-       display: grid;
-       grid-template-columns: repeat(12, 1fr);
-}
-
-h1 {
-       font-family: "Tangerine", serif;
-       margin: 0;
-       text-align: center;
-       font-size: 22pt;
-}
-
-h2 {
-       font-family: "Tangerine", serif;
-       margin: 0;
-       text-align: center;
-       font-size: 22pt;
-}
-
-.foodmenu {
-       text-align: center;
-       margin-bottom: 2mm;
-}
-
-.food {
-       grid-row: 1;
-       grid-column: 1/13;
-       font-size: 12pt;
-       font-weight: bold;
-}
-
-.sideDish {
-       grid-row: 2;
-       grid-column: 1/13;
-       font-size: 8pt;
-       font-style: italic;
-}
+@media only print {
+       p {
+               font-size: 8pt;
+               font-style: italic;
+               text-align: center;
+       }
 
-.price {
-       grid-row: 3;
-       grid-column: 1/13;
-       font-size: 10pt;
-}
+       .grid {
+               display: grid;
+               grid-template-columns: repeat(12, 1fr);
+       }
 
-@media (min-width: 180mm) {
        h1 {
-               text-align: left;
+               font-family: "Tangerine", serif;
+               margin: 0;
+               text-align: center;
+               font-size: 22pt;
        }
 
        h2 {
-               text-align: left;
+               font-family: "Tangerine", serif;
+               margin: 0;
+               text-align: center;
+               font-size: 22pt;
        }
 
        .foodmenu {
-               text-align: left;
+               text-align: center;
+               margin-bottom: 2mm;
        }
 
        .food {
                grid-row: 1;
-               grid-column: 1/9;
+               grid-column: 1/13;
+               font-size: 12pt;
+               font-weight: bold;
        }
 
        .sideDish {
                grid-row: 2;
                grid-column: 1/13;
+               font-size: 8pt;
+               font-style: italic;
        }
 
        .price {
-               grid-row: 1;
-               grid-column: 9/13;
-               text-align: right;
+               grid-row: 3;
+               grid-column: 1/13;
+               font-size: 10pt;
+       }
+
+       @media (min-width: 180mm) {
+               h1 {
+                       text-align: left;
+               }
+
+               h2 {
+                       text-align: left;
+               }
+
+               .foodmenu {
+                       text-align: left;
+               }
+
+               .food {
+                       grid-row: 1;
+                       grid-column: 1/9;
+               }
+
+               .sideDish {
+                       grid-row: 2;
+                       grid-column: 1/13;
+               }
+
+               .price {
+                       grid-row: 1;
+                       grid-column: 9/13;
+                       text-align: right;
+               }
        }
 }