mirror of
https://github.com/PaddiM8/kalker.git
synced 2024-12-12 17:40:52 +01:00
kalk_web made sizing more dynamic, added spacing to lines
This commit is contained in:
parent
93514906f3
commit
6843a0502f
6
kalk_web/package-lock.json
generated
6
kalk_web/package-lock.json
generated
@ -1060,9 +1060,9 @@
|
||||
}
|
||||
},
|
||||
"@paddim8/kalk": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@paddim8/kalk/-/kalk-1.4.1.tgz",
|
||||
"integrity": "sha512-jbMqRo3o1FfBXQskD0Zb9l5qeeb44JiBbfgy4lAxbV4OItTDJ9xuLNJ4V5O2JJyJMeeu5FKBoYFzM2dwBIJ69g=="
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@paddim8/kalk/-/kalk-1.4.2.tgz",
|
||||
"integrity": "sha512-HAWcL2dzOr5KY1/tXoHmMXkjvFuxwWXrljPyUkYtyzlQUKeeKbQkH0B7t9N0sAMw+n+9zw4nxiavPp7DbcKaNw=="
|
||||
},
|
||||
"@types/anymatch": {
|
||||
"version": "1.3.1",
|
||||
|
@ -55,9 +55,9 @@
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@paddim8/kalk": "^1.4.1"
|
||||
"@paddim8/kalk": "^1.4.2"
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -11,20 +11,30 @@
|
||||
<script defer src="/build/bundle.js"></script>
|
||||
|
||||
<style>
|
||||
#wrapper {
|
||||
padding: 40px;
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.calculator {
|
||||
width: 800px;
|
||||
height: 350px;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
font-family: "Hack", monospace, Consolas;
|
||||
font-size: 14px;
|
||||
padding: 5px 10px 0 10px;
|
||||
background-color: #424242;
|
||||
border-radius: 7px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>Please enable JavaScript to view this application.</noscript>
|
||||
<div class="calculator">
|
||||
<kalk-calculator />
|
||||
</div>
|
||||
<section id="wrapper">
|
||||
<div class="calculator">
|
||||
<kalk-calculator />
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
@ -216,14 +216,17 @@
|
||||
|
||||
<style lang="scss">
|
||||
.calculator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.output {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: inherit;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
@ -238,10 +241,14 @@
|
||||
|
||||
.consoleLine {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 5px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.result {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.input-area {
|
||||
background-color: inherit;
|
||||
display: flex;
|
||||
@ -275,7 +282,7 @@
|
||||
<span style="color: {hintColor}">Type 'help' for instructions.</span>
|
||||
</p>
|
||||
{#each outputLines as line}
|
||||
<p class="consoleLine">
|
||||
<p class="consoleLine" class:result={!line[1]}>
|
||||
{#if line[1]}
|
||||
<span style="color: {promptColor}">>></span>
|
||||
{/if}
|
||||
|
Loading…
Reference in New Issue
Block a user