rob/upn-qr
1
0
Fork 0
mirror of https://gitplac.si/aljaxus/upn-qr.git synced 2025-12-17 04:00:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

move global styling to separate template

Browse Source
This commit is contained in:
Aljaz S
2021-11-23 14:08:07 +01:00
parent abb7476f26
commit 2e5944e355
3 changed files with 96 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/template/style.ejs Normal file
View File

@@ -0,0 +1,94 @@
<style>
body,
html {
margin: 0;
padding: 0;
max-width: 100vw;
overflow-x: hidden;
--c-dark: #202124;
--c-darkish: #303134;
--c-primary: #e8eaed;
--c-accent: #C58AF9;
}
html {
padding: 0 0;
width: 100vw;
display: grid;
grid-template-columns: auto minmax(50vw, 650px) auto;
background-color: var(--c-dark);
}
body {
grid-column: 2;
padding: 15px;
margin: 30px 10px;
display: grid;
grid-template-columns: auto;
grid-auto-rows: auto;
row-gap: 4rem;
border-radius: 1rem;
background-color: var(--c-darkish);
color: var(--c-primary);
font-family: monospace;
font-size: 16px;
line-height: 1.6em;
word-break: normal;
}
a {
color: var(--c-accent);
text-decoration: none;
}
code,
pre {
background-color: var(--c-dark);
padding: 6px 4px 2px 4px;
word-break: break-all;
}
pre {
overflow-x: scroll;
}
input {
background-color: var(--c-darkish);
border-color: var(--c-dark);
color: var(--c-primary);
padding: 4px;
border-radius: 4px;
font-family: monospace;
}
input:focus,
input:focus-visible {
border-color: transparent;
outline: solid var(--c-accent);
}
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type=submit],
button {
border: none;
outline: solid 1px var(--c-accent);
padding: 10px;
vertical-align: top;
box-shadow: 3px 3px 1px 1px var(--c-accent);
color: var(--c-accent);
margin: 0 4px 4px 0;
cursor: pointer;
}
input[type=submit]:focus,
input[type=submit]:focus-visible,
input[type=submit]:active,
button:focus,
button:focus-visible,
button:active {
border: none;
box-shadow: none;
margin: 4px 0 0 4px;
}
</style>

2
src/views/form.ejs
View File

@@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UPN-QR :: FORM</title> <title>UPN-QR :: FORM</title>
</head> </head>
<%- include('../template/style.ejs') -%>
<style> <style>
</style> </style>
<body> <body>
<div> <div>

54
src/views/index.ejs
View File

@@ -6,60 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UPN-QR | Open generator for UPN QR codes</title> <title>UPN-QR | Open generator for UPN QR codes</title>
</head> </head>
<%- include('../template/style.ejs') -%>
<style> <style>
body,
html {
margin: 0;
padding: 0;
max-width: 100vw;
overflow-x: hidden;
--c-dark: #202124;
--c-darkish: #303134;
--c-primary: #e8eaed;
--c-accent: #C58AF9;
}
html {
padding: 0 0;
width: 100vw;
display: grid;
grid-template-columns: auto minmax(50vw, 650px) auto;
background-color: var(--c-dark);
}
body {
grid-column: 2;
padding: 15px;
margin: 30px 10px;
display: grid;
grid-template-columns: auto;
grid-auto-rows: auto;
row-gap: 2rem;
border-radius: 1rem;
background-color: var(--c-darkish);
color: var(--c-primary);
font-family: monospace;
font-size: 16px;
line-height: 1.6em;
word-break: normal;
}
a {
color: var(--c-accent);
text-decoration: none;
}
code,
pre {
background-color: var(--c-dark);
padding: 6px 4px 2px 4px;
word-break: break-all;
}
pre {
overflow-x: scroll;
}
section div { section div {
padding-left: 25px; padding-left: 25px;
display: grid; display: grid;