From 3b8dde6d3b9823f15d92a67c2c50647c46671cb6 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 30 Oct 2023 05:08:57 +0100
Subject: [PATCH] More visual improvements

---
 index.html     | 14 +++++++-------
 style/base.css | 14 ++++++++++++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index b6f656a..f1cb3a5 100644
--- a/index.html
+++ b/index.html
@@ -16,10 +16,10 @@
 		<template id="template-landing">
 			<style>
 				.landing {
-					margin-left: 64px;
-					margin-right: 64px;
+					margin-left: var(--margins);
+					margin-right: var(--margins);
 
-					max-width: calc(100vw - 128px);
+					max-width: calc(100vw - var(--margins) * 2);
 				}
 
 				.landing-form {
@@ -34,7 +34,7 @@
 				}
 
 				.landing-form label span {
-					min-width: 20%;
+					width: calc(var(--margins) * 4);
 				}
 
 				.landing-form input {
@@ -74,7 +74,7 @@
 						<input type="url" name="vault" required placeholder="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/">
 					</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">
 					</label>
 					<input type="submit" value="Open">
@@ -106,8 +106,8 @@
 		<template id="template-vault">
 			<style>
 				.vault {
-					margin-left: 64px;
-					margin-right: 64px;
+					margin-left: var(--margins);
+					margin-right: var(--margins);
 				}
 			</style>
 			<div class="vault">
diff --git a/style/base.css b/style/base.css
index c7c1776..5bdae99 100644
--- a/style/base.css
+++ b/style/base.css
@@ -11,6 +11,8 @@
     --color-blue: #53DFDD;
     --color-purple: #A882FF;
 
+    --margins: 0;
+
     --color-node: var(--color-gray);
     --node-group-border-width: 2px;
     --node-file-border-width: 2px;
@@ -19,6 +21,18 @@
     --font-mono: monospace;
 }
 
+@media screen {
+    :root {
+        --margins: 32px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    :root {
+        --margins: 64px;
+    }
+}
+
 body {
     margin: 0;
     width: max-content;