1
Fork 0
mirror of https://github.com/glassflame/glassflame.github.io.git synced 2024-10-16 14:37:33 +00:00

More visual improvements

This commit is contained in:
Steffo 2023-10-30 05:08:57 +01:00
parent d53e52f55f
commit 3b8dde6d3b
Signed by: steffo
GPG key ID: 2A24051445686895
2 changed files with 21 additions and 7 deletions

View file

@ -16,10 +16,10 @@
<template id="template-landing"> <template id="template-landing">
<style> <style>
.landing { .landing {
margin-left: 64px; margin-left: var(--margins);
margin-right: 64px; margin-right: var(--margins);
max-width: calc(100vw - 128px); max-width: calc(100vw - var(--margins) * 2);
} }
.landing-form { .landing-form {
@ -34,7 +34,7 @@
} }
.landing-form label span { .landing-form label span {
min-width: 20%; width: calc(var(--margins) * 4);
} }
.landing-form input { .landing-form input {
@ -74,7 +74,7 @@
<input type="url" name="vault" required placeholder="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/"> <input type="url" name="vault" required placeholder="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/">
</label> </label>
<label> <label>
<span>Path of the initial file</span> <span>File path</span>
<input type="text" name="path" placeholder="8 - Crittografia applicata/2 - Comunicazione simmetrica/3 - Indistinguibilità/★ mappa concettuale.canvas"> <input type="text" name="path" placeholder="8 - Crittografia applicata/2 - Comunicazione simmetrica/3 - Indistinguibilità/★ mappa concettuale.canvas">
</label> </label>
<input type="submit" value="Open"> <input type="submit" value="Open">
@ -106,8 +106,8 @@
<template id="template-vault"> <template id="template-vault">
<style> <style>
.vault { .vault {
margin-left: 64px; margin-left: var(--margins);
margin-right: 64px; margin-right: var(--margins);
} }
</style> </style>
<div class="vault"> <div class="vault">

View file

@ -11,6 +11,8 @@
--color-blue: #53DFDD; --color-blue: #53DFDD;
--color-purple: #A882FF; --color-purple: #A882FF;
--margins: 0;
--color-node: var(--color-gray); --color-node: var(--color-gray);
--node-group-border-width: 2px; --node-group-border-width: 2px;
--node-file-border-width: 2px; --node-file-border-width: 2px;
@ -19,6 +21,18 @@
--font-mono: monospace; --font-mono: monospace;
} }
@media screen {
:root {
--margins: 32px;
}
}
@media screen and (min-width: 768px) {
:root {
--margins: 64px;
}
}
body { body {
margin: 0; margin: 0;
width: max-content; width: max-content;