improvement: update layout

This commit is contained in:
Johan Siebens
2024-02-18 08:01:04 +01:00
parent 69ce610579
commit 68127b9a98
2 changed files with 26 additions and 14 deletions
+25 -13
View File
@@ -74,29 +74,38 @@ templ heading() {
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Poppins', sans-serif; font-family: system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif;
} }
body { body {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
padding: 10px; padding: 10px;
background: #379683;
} }
.wrapper { .wrapper {
background: #fff; background: #eef5ff;
color: #12304b;
max-width: 400px; max-width: 400px;
width: 100%; width: 100%;
margin: 120px auto; margin: 120px auto;
padding: 25px; padding: 25px;
border-radius: 5px; border: 1px solid #1f5c99;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
} }
@@ -106,9 +115,10 @@ templ heading() {
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
margin-bottom: 8px; margin-bottom: 8px;
background: #f2f2f2;
border-radius: 3px;
overflow: hidden; overflow: hidden;
background: #fff;
border: 1px solid #c0c0c0;
border-radius: 4px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
} }
@@ -125,15 +135,17 @@ templ heading() {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 10px; padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 4px;
} }
button { button {
padding-top: 10px; padding: 10px 20px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
height: 45px; height: 45px;
border: none; background: #fff;
border: 1px solid #c0c0c0;
border-radius: 4px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
} }
</style> </style>
<title>ionscale</title> <title>ionscale</title>
+1 -1
View File
@@ -281,7 +281,7 @@ func heading() templ.Component {
templ_7745c5c3_Var12 = templ.NopComponent templ_7745c5c3_Var12 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><style>\n @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Poppins', sans-serif;\n }\n\n body {\n width: 100%;\n height: 100vh;\n padding: 10px;\n background: #379683;\n }\n\n .wrapper {\n background: #fff;\n max-width: 400px;\n width: 100%;\n margin: 120px auto;\n padding: 25px;\n border-radius: 5px;\n box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);\n }\n\n .selectionList li {\n position: relative;\n list-style: none;\n height: 45px;\n line-height: 45px;\n margin-bottom: 8px;\n background: #f2f2f2;\n border-radius: 3px;\n overflow: hidden;\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);\n }\n\n .selectionList li button {\n margin: 0;\n display: block;\n width: 100%;\n height: 100%;\n border: none;\n }\n\n input {\n display: block;\n width: 100%;\n height: 100%;\n padding: 10px;\n }\n\n button {\n padding-top: 10px;\n padding-bottom: 10px;\n padding-left: 20px;\n padding-right: 20px;\n height: 45px;\n border: none;\n }\n </style><title>ionscale</title>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: system-ui,\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n \"Roboto\",\n \"Oxygen\",\n \"Ubuntu\",\n \"Cantarell\",\n \"Fira Sans\",\n \"Droid Sans\",\n \"Helvetica Neue\",\n sans-serif;\n }\n\n body {\n width: 100%;\n height: 100vh;\n padding: 10px;\n }\n\n .wrapper {\n background: #eef5ff;\n color: #12304b;\n max-width: 400px;\n width: 100%;\n margin: 120px auto;\n padding: 25px;\n border: 1px solid #1f5c99;\n box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);\n }\n\n .selectionList li {\n position: relative;\n list-style: none;\n height: 45px;\n line-height: 45px;\n margin-bottom: 8px;\n overflow: hidden;\n background: #fff;\n border: 1px solid #c0c0c0;\n border-radius: 4px;\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);\n }\n\n .selectionList li button {\n margin: 0;\n display: block;\n width: 100%;\n height: 100%;\n border: none;\n }\n\n input {\n display: block;\n width: 100%;\n height: 100%;\n padding: 10px;\n border: 1px solid #c0c0c0;\n border-radius: 4px;\n }\n\n button {\n padding: 10px 20px;\n height: 45px;\n background: #fff;\n border: 1px solid #c0c0c0;\n border-radius: 4px;\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);\n }\n </style><title>ionscale</title>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }