diff --git a/.env b/.env
index a7c0978..c92e397 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
-PLAKKEN_LISTEN=:3000
+PLAKKEN_LISTEN=:5000
PLAKKEN_REDIS_ADDRESS=localhost:6379
PLAKKEN_REDIS_USER=
PLAKKEN_REDIS_PASSWORD=
diff --git a/front/_colors.scss b/front/_colors.scss
index 6a09684..573d933 100644
--- a/front/_colors.scss
+++ b/front/_colors.scss
@@ -1,5 +1,5 @@
$accent: #d30f45;
-$background: #09090b;
+$background: #0f0f0f;
$border: #363636;
-$text: #f2f2f7;
+$text: #e5e5e7;
$placeholder: #888;
\ No newline at end of file
diff --git a/front/style.scss b/front/style.scss
index 9397f15..3df0cd7 100644
--- a/front/style.scss
+++ b/front/style.scss
@@ -21,7 +21,7 @@ body {
#line-numbers,
#content {
- font: 400 15px/1.6 "JetBrains Mono", monospace;
+ font: 400 14px/1.6 "JetBrains Mono", monospace;
}
#line-numbers {
@@ -83,6 +83,7 @@ select {
select {
padding: 8px 10px;
+ width: fit-content;
}
select:focus {
@@ -107,5 +108,4 @@ textarea {
margin: 0;
outline: none;
resize: none;
-}
-
+}
\ No newline at end of file
diff --git a/static/app.js b/static/app.js
index 0e89f6a..1e7da49 100644
--- a/static/app.js
+++ b/static/app.js
@@ -11,7 +11,7 @@ function updateLn() {
}
function updateTitle() {
- document.title = filenameSelector.value == '' ? 'New paste' : ` *${filenameSelector.value} - Plakken`;
+ document.title = filenameSelector.value == '' ? 'New paste' : ` ${filenameSelector.value} (Unsaved) - Plakken`;
}
function getRecentPlaksFromStorage() {
diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..5c03c25
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
+
+ New paste
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 41531dd..c8031a4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -36,7 +36,7 @@ section#recent-plaks .recent-plak svg {
cursor: pointer;
height: 22px;
padding: 5px;
- stroke: #f2f2f7;
+ stroke: #e5e5e7;
stroke-width: 2.25;
width: 22px;
transition: 0.1s ease-in-out;
@@ -58,7 +58,7 @@ h3 {
::selection {
background-color: #d30f45;
- color: #f2f2f7;
+ color: #e5e5e7;
}
::-webkit-scrollbar {
@@ -66,7 +66,7 @@ h3 {
}
::-webkit-scrollbar-track {
- background-color: #09090b;
+ background-color: #0f0f0f;
}
::-webkit-scrollbar-thumb {
@@ -75,12 +75,12 @@ h3 {
}
::-webkit-scrollbar-thumb:hover {
- background-color: #f2f2f7;
+ background-color: #e5e5e7;
}
body {
- background-color: #09090b;
- color: #f2f2f7;
+ background-color: #0f0f0f;
+ color: #e5e5e7;
font: 400 16px/2 "Inter", "system-ui", sans-serif;
margin: 0;
overflow-x: hidden;
@@ -93,7 +93,7 @@ body {
#line-numbers,
#content {
- font: 400 15px/1.6 "JetBrains Mono", monospace;
+ font: 400 14px/1.6 "JetBrains Mono", monospace;
}
#line-numbers {
@@ -105,7 +105,7 @@ body {
}
#content {
- color: #f2f2f7;
+ color: #e5e5e7;
height: 100%;
min-height: 90vh;
padding: 16px 16px 0 16px;
@@ -123,16 +123,16 @@ body {
height: 24px;
fill: none;
margin-bottom: -6px;
- stroke: #f2f2f7;
+ stroke: #e5e5e7;
stroke-width: 2;
width: 24px;
}
input,
select {
- background-color: #09090b;
+ background-color: #0f0f0f;
border: 2px solid #363636;
- color: #f2f2f7;
+ color: #e5e5e7;
font: 500 14px/2 "Inter", "system-ui", sans-serif;
outline: none;
padding: 3px 10px;
@@ -154,20 +154,21 @@ select:focus-visible {
select {
padding: 8px 10px;
+ width: fit-content;
}
select:focus {
- background-color: #09090b;
+ background-color: #0f0f0f;
transition: none;
}
option {
- background-color: #09090b;
- color: #f2f2f7;
+ background-color: #0f0f0f;
+ color: #e5e5e7;
}
option:focus {
background-color: #d30f45;
- color: #09090b;
+ color: #0f0f0f;
}
button,