Skip to content
Snippets Groups Projects
Unverified Commit 303dd632 authored by Conrad Zelck's avatar Conrad Zelck
Browse files

fix: use shared header styles 


Signed-off-by: default avatarConrad Zelck <git@simpel.cc>
parent a6c82eb0
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
index.php
+ 2
− 2
View file @ 303dd632
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<head> <head>
<?php include dirname($_SERVER['DOCUMENT_ROOT']) . "/simpel.cc/php/head.php"; ?> <?php include dirname($_SERVER['DOCUMENT_ROOT']) . "/simpel.cc/php/head.php"; ?>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.min.css">
<script src="script.js" charset="utf-8"></script> <script src="script.min.js" charset="utf-8"></script>
<?php include 'example.php'; ?> <?php include 'example.php'; ?>
<script> <script>
const example = `<?php echo $example ?>`; const example = `<?php echo $example ?>`;
......
script.min.js 0 → 100644
+ 1
− 0
View file @ 303dd632
const urlHost=window.location.href.substr(0,window.location.href.lastIndexOf("/"));let inputTextByConvert="";const extension={asciidoc_legacy:"asciidoc",asciidoc:"asciidoc",beamer:"tex",biblatex:"bib",bibtex:"bibtex",chunkedhtml:"zip",commonmark_x:"md",commonmark:"md",context:"tex",creole:"txt",csljson:"json",csv:"csv",docbook5:"xml",docbook:"xml",docx:"docx",dokuwiki:"txt",dzslides:"html",endnotexml:"xml",epub2:"epub",epub3:"epub",epub:"epub",fb2:"fb2",gfm:"md",haddock:"md",html4:"html",html5:"html",html:"html",icml:"icml",ipynb:"ipynb",jats_archiving:"xml",jats_articleauthoring:"xml",jats_publishing:"xml",jats:"xml",jira:"txt",json:"json",latex:"tex",man:"man",markdown_mmd:"md",markdown_phpextra:"md",markdown_strict:"md",markdown:"md",markua:"md",mediawiki:"txt",ms:"ms",muse:"txt",native:"hs",odt:"odt",opendocument:"odf",opml:"xml",org:"txt",pdf:"pdf",plain:"txt",pptx:"pptx",preview:"html",revealjs:"html",ris:"ris",rst:"rst",rtf:"rtf",s5:"html",slideous:"html",slidy:"html",t2t:"t2t",tei:"tei",texinfo:"texi",textile:"textile",tikiwiki:"txt",tsv:"tsv",twiki:"txt",typst:"typ",vimwiki:"txt",xwiki:"txt",zimwiki:"txt"};function pandoc(e){var t=urlHost+"/pandoc.php",n=document.getElementById("standalone").checked,o=document.getElementById("table-of-contents").checked,d=document.getElementById("number-sections").checked,l=document.getElementById("citeproc").checked,i=document.getElementById("wrap").value,m=document.getElementById("highlight-style").value,u=document.getElementById("html-math-method").value,c=document.getElementById("cb-inputfile").checked,s=extension[document.getElementById("from").value];if(c||"docx"!=s&&"epub"!=s&&"odt"!=s){var a=!1;if(c&&(a=document.getElementById("inputfile").files[0]),a||!c){var r=document.getElementById("cb-outputfile").checked,p=extension[document.getElementById("to").value],g=document.getElementById("from").value;if("none"!==g){var b=document.getElementById("to").value,y=document.getElementById("input").innerText;if(inputTextByConvert=y,!isEmpty(y)||c){var h=new FormData;h.set("standalone",n),h.set("tableOfContents",o),h.set("numberSections",d),h.set("citeproc",l),h.set("wrap",i),h.set("highlightStyle",m),h.set("htmlMathMethod",u),h.set("useInputFile",c),h.set("inputFileExtension",s),h.set("inputFile",a),h.set("useOutputFile",r),h.set("outputFileExtension",p),h.set("from",g),h.set("to",b),h.set("input",y),pushDialog("Converting with pandoc","busy"),fetch(t,{method:"POST",body:h}).then((e=>{if(!e.ok)throw new Error("HTTP error "+e.status);return r?e.blob():e.text()})).then((e=>{if(r){let t=new Blob([e],{type:"text/plain"}),n=document.getElementById("download");n.href=URL.createObjectURL(t);let o=(new Date).toISOString().replaceAll("T","_").replaceAll(":","-").slice(0,19);n.setAttribute("download","output_"+o+"."+p),document.getElementById("download").innerText="Download output_"+o+"."+p,dialog.close()}else{if("preview"===b)document.getElementById("output").innerHTML=e;else{document.getElementById("output").innerHTML="";var t=document.createElement("pre");document.getElementById("output").appendChild(t),t.innerText=e}setMainButtonsAppearance(),dialog.close()}})).catch((e=>{dialog.close(),pushDialog("Error fetching pandoc output: "+e,"error")}))}else!0===e&&pushDialog("Error: Nothing to convert.\n\nYou must either write something into the 'Input field' or select a file as input in the 'Options'.","error")}else!0===e&&pushDialog("Error: You must select an input format in the 'From' pulldown menu.","error","from")}else!0===e&&pushDialog("Error: Nothing to convert.\nYou must select a file as input.","error","inputfile")}else!0===e&&(document.getElementById("options").setAttribute("open","open"),document.getElementById("cb-inputfile").checked=!0,checkInputFile(),pushDialog("Error: For conversion from '"+s+"' you must select a file as input.","error","inputfile"))}function toggleStandalone(){!0===document.getElementById("table-of-contents").checked&&(document.getElementById("standalone").checked=!0)}function toggleToc(){!1===document.getElementById("standalone").checked&&(document.getElementById("table-of-contents").checked=!1)}function setMainButtonsAppearance(){const e=document.getElementById("convert"),t=document.getElementById("copy"),n=document.getElementById("from").value,o=document.getElementById("cb-inputfile").checked;let d=!1;o&&(d=document.getElementById("inputfile").files[0]);const l=document.getElementById("input").innerText,i=document.getElementById("output");"none"===n||!d&&o?e.setAttribute("disabled","disabled"):isEmpty(l)&&!o?(e.setAttribute("disabled","disabled"),i.innerText=""):l===inputTextByConvert?e.setAttribute("disabled","disabled"):e.removeAttribute("disabled");const m=document.getElementById("output").innerText;void 0===m||isEmpty(m)?t.setAttribute("disabled","disabled"):t.removeAttribute("disabled")}function checkInputFile(){!0===document.getElementById("cb-inputfile").checked?(document.getElementById("inputfile").removeAttribute("disabled"),document.getElementById("input").removeAttribute("contenteditable"),document.getElementById("input").classList.add("disabled"),document.getElementById("label-inputfield").classList.add("disabled"),document.getElementById("output").innerText=""):(document.getElementById("inputfile").setAttribute("disabled","disabled"),document.getElementById("input").setAttribute("contenteditable","true"),document.getElementById("input").classList.remove("disabled"),document.getElementById("label-inputfield").classList.remove("disabled"))}function checkOutputFile(){!0===document.getElementById("cb-outputfile").checked?(document.getElementById("download").setAttribute("href","#"),document.getElementById("copy").setAttribute("disabled","disabled"),document.getElementById("output").classList.add("disabled"),document.getElementById("output").innerText="",document.getElementById("label-outputfield").classList.add("disabled")):(document.getElementById("download").removeAttribute("href"),document.getElementById("download").innerText="",document.getElementById("copy").removeAttribute("disabled"),document.getElementById("output").classList.remove("disabled"),document.getElementById("label-outputfield").classList.remove("disabled"))}function serializeElement(e){return e.outerHTML}async function copyOutput(){var e=document.getElementById("output");const t=serializeElement(e),n=new Blob([t],{type:"text/html"}),o=e.innerText??"",d=new Blob([o],{type:"text/plain"}),l=new ClipboardItem({[n.type]:n,[d.type]:d});return navigator.clipboard.write([l])}function pushDialog(e,t,n){var o=document.getElementById("dialogText");o.innerText=e,"error"===t?(document.getElementById("dialog").classList.add("error-dialog"),document.getElementById("dialog").classList.remove("busy-dialog"),o.role="alert",void 0!==n&&document.getElementById(n).focus()):"busy"===t&&(document.getElementById("dialog").classList.remove("error-dialog"),document.getElementById("dialog").classList.add("busy-dialog")),dialog.showModal()}function isEmpty(e){return 0===e.length||!e.trim()}function useExample(){document.getElementById("input").innerText=example,document.getElementById("from").value="markdown",document.getElementById("cb-inputfile").checked=!1,checkInputFile(),pandoc()}
\ No newline at end of file
style.css
+ 13
− 68
View file @ 303dd632
:root {
--default-top-padding: 1.5em;
--default-body-bottom-margin: 2vmin;
--default-min-font-size-px: 12px;
--default-min-font-size: 12;
--default-max-font-size-px: 18px;
--default-max-font-size: 18;
}
/* *****************************************************************************
personal header styling
***************************************************************************** */
html {
/* see: https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#comment-1769978 - comment by MaxDesign */
font-size:calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560));
font-size: clamp(var(--default-min-font-size-px), calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560)), var(--default-max-font-size-px));
}
body { body {
height: calc(100vh - 3vmin); /* minus margin-top - margin bottom is 0 */ font-size: 2em;
font-size: inherit;
font-family: helvetica, Arial, sans-serif;
background-color: #555;
color: white;
/* margin-bottom is calculated here to 0
this margin must be set by the lowest elements,
because they should go to the very bottom */
margin: 3vmin 4vmin calc(var(--default-body-bottom-margin) - var(--default-body-bottom-margin)) 4vmin;
}
*:focus {
outline: 2px solid white;
outline-offset: 2px;
}
a {
color: #ffffff;
}
header a {
text-decoration: none;
}
/* kind of disabled link - text-decoration will be none automatically */
a:not([href]) {
color: #AAAAAA;
} }
header { header {
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
nav { main {
display: flex; font-size: 0.75em;
align-items: center;
column-gap: 0.7em;
}
h1 {
font-size: 1.5em;
margin: 0;
}
#github {
margin-left: auto;
}
#github-cat {
height: 1.5em;
} }
/* ***************************************************************************** /* *****************************************************************************
...@@ -495,6 +433,10 @@ main { ...@@ -495,6 +433,10 @@ main {
height: 100%; height: 100%;
} }
#input {
min-height: calc(100vh - 6vmin - 15.5em);
}
#input, #output { #input, #output {
flex-grow: 1; flex-grow: 1;
} }
...@@ -507,24 +449,27 @@ main { ...@@ -507,24 +449,27 @@ main {
***************************************************************************** */ ***************************************************************************** */
/* from here two columns side by side are not working */ /* from here two columns side by side are not working */
@media (max-width: 850px) { @media (max-width: 1170px) {
.two-column { .two-column {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
} }
#input {
height: calc(100vh - 6vmin - 25.5em);
}
div.download { div.download {
/* padding is only needed if it must align to file input when side by side */ /* padding is only needed if it must align to file input when side by side */
padding-top: 0; padding-top: 0;
} }
} }
@media (max-width: 600px) { @media (max-width: 710px) {
#checkboxes > label, #selects > label { #checkboxes > label, #selects > label {
display: grid; display: grid;
} }
} }
/* iPhone 13 mini portrait */ /* iPhone 13 mini portrait */
@media (max-width: 375px) { @media (max-width: 490px) {
.left.label-w-select, .right.label-w-select { .left.label-w-select, .right.label-w-select {
flex-direction: column; flex-direction: column;
} }
......
style.min.css 0 → 100644
+ 1
− 0
View file @ 303dd632
body{font-size:2em;}header{margin-bottom:1.5em;}main{font-size:.75em;}*,*::before,*::after{box-sizing:border-box;}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0;}ul[role='list'],ol[role='list']{list-style:none;}html:focus-within{scroll-behavior:smooth;}body{text-rendering:optimizeSpeed;line-height:1.5;}a:not([class]){text-decoration-skip-ink:auto;}img,picture{max-width:100%;display:block;}input,button,textarea,select{font:inherit;}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}dialog{color:white;}dialog:focus{outline:none;}dialog::backdrop{background:rgba(85,85,85,.80);}dialog.busy-dialog::backdrop{background:inherit;}.error-dialog{color:white;background-color:#AE0000;}.busy-dialog{color:white;background-color:#006900;}dialog p{margin-top:0;}dialog.busy-dialog p{margin-bottom:0;}dialog button{float:right;}dialog.busy-dialog button{display:none;}button,input{color:white;background-color:#333;}select{color:black;background-color:white;}input[type="file"]{background-color:inherit;}input::file-selector-button{color:black;}input:disabled::file-selector-button{color:#AAAAAA;}button:disabled,input:disabled,textarea:disabled,div.disabled,p.disabled,label.disabled,#input.disabled,#output.disabled,label:has(>input:disabled){color:#AAAAAA;background-color:inherit;}details[open]>#details{outline:2px solid white;outline-offset:calc(1.5vmin - 1px);}input[type=checkbox]:focus{outline-offset:1px;}button,input,select{border:2px solid white;}button,input{-webkit-border-radius:5px;border-radius:5px;}select{-webkit-border-radius:3px;border-radius:3px;}input[type="file"]{border:0;}input::file-selector-button{-webkit-border-radius:3px;border-radius:3px;}#input,#output{border:1px solid white;outline:1px solid white;}#input:focus{outline:2px solid white;}button:disabled,input:disabled,textarea:disabled,div.disabled,p.disabled,label.disabled,#input.disabled,#output.disabled{border-color:#AAAAAA;outline-color:#AAAAAA;}button,input,select,details summary{cursor:pointer;}summary{width:10ch;}p.label{font-size:1.2em;display:inline;pointer-events:none;}button:disabled,input:disabled,textarea:disabled,div.disabled,p.disabled,label.disabled,#input.disabled,#output.disabled{pointer-events:none;}pre{text-wrap:pretty;word-break:break-word;margin:0;font-family:inherit;}pre:has(code){margin-block-start:1em;}th{text-align:left;}main .first-in-main{padding-top:calc(var(--default-top-padding) - .8em);}.two-column{padding-top:var(--default-top-padding);}details{padding-top:var(--default-top-padding);}details summary{padding-bottom:0;}details[open] summary{margin-bottom:2vmin;margin-left:3px;padding-bottom:1vmin;}#details{margin:1.5vmin;}button,input[type=button]{padding:5px 10px;}select{padding-right:0;}input[type=checkbox]{margin:0;margin-right:1vmin;}input[type="file"]{padding:0;}#selects{padding-top:var(--default-top-padding);}#example{margin-top:var(--default-top-padding);}form.file{padding-top:calc(var(--default-top-padding) / 2);}div.download{padding-top:calc(var(--default-top-padding) / 2 + 2px);}p.label{margin:0;}#input,#output{margin-top:var(--default-top-padding);margin-bottom:var(--default-body-bottom-margin);padding:.5rem;}.two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3vmin;row-gap:var(--default-top-padding);}#checkboxes,#selects{display:flex;column-gap:3vmin;row-gap:2vmin;}#selects>label{display:flex;column-gap:1vmin;}.flex-space-between{display:flex;justify-content:space-between;align-items:baseline;}.left.label-w-select,.right.label-w-select{display:flex;justify-content:start;flex-direction:row;column-gap:1vmin;}.label-w-select select{flex-grow:1;}body{display:flex;flex-direction:column}main{display:flex;flex-direction:column;height:100%}.max-height{display:flex;flex-direction:column;height:100%}.max-height>.two-column{flex-grow:1;flex-basis:auto;height:100%}.left,.right{display:flex;flex-direction:column;height:100%;}#input{min-height:calc(100vh - 6vmin - 15.5em);}#input,#output{flex-grow:1;}@media (max-width:1170px){.two-column{grid-template-columns:minmax(0,1fr)}#input{height:calc(100vh - 6vmin - 25.5em)}div.download{padding-top:0}}@media (max-width:710px){#checkboxes>label,#selects>label{display:grid}}@media (max-width:490px){.left.label-w-select,.right.label-w-select{flex-direction:column}}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment