diff --git a/.idea/sshConfigs.xml b/.idea/sshConfigs.xml
index 6f9427c..f34483b 100644
--- a/.idea/sshConfigs.xml
+++ b/.idea/sshConfigs.xml
@@ -4,6 +4,7 @@
+
\ No newline at end of file
diff --git a/assets/css/app.scss b/assets/css/app.scss
deleted file mode 100644
index ed1a532..0000000
--- a/assets/css/app.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@import "~bootstrap/scss/bootstrap";
-
-@font-face {
- font-family: Gabriola;
- font-style: normal;
- font-weight: normal;
- src: local('Gabriola'), url('/build/static/fonts/gabriola.woff') format('woff');
-}
-@font-face {
- font-family: BlackChancery;
- font-style: normal;
- font-weight: normal;
- src: local('BlackChancery'), url('/build/static/fonts/black_chancery.ttf') format('truetype');
-}
-
-#messages {
- display: none;
-}
-
-body {
- font-family: Gabriola, sans-serif;
- font-size: 1.5rem;
- margin : 120px 5px 0 5px;
-}
-.ui-widget {
- font-family: Gabriola, sans-serif;
- font-size: 1.5rem;
-}
-
-@import "header";
\ No newline at end of file
diff --git a/assets/css/base/fonts.scss b/assets/css/base/fonts.scss
new file mode 100644
index 0000000..ab13deb
--- /dev/null
+++ b/assets/css/base/fonts.scss
@@ -0,0 +1,12 @@
+@font-face {
+ font-family: Gabriola;
+ font-style: normal;
+ font-weight: normal;
+ src: local('Gabriola'), url('/build/static/fonts/gabriola.woff') format('woff');
+}
+@font-face {
+ font-family: BlackChancery;
+ font-style: normal;
+ font-weight: normal;
+ src: local('BlackChancery'), url('/build/static/fonts/black_chancery.ttf') format('truetype');
+}
\ No newline at end of file
diff --git a/assets/css/components/messages.scss b/assets/css/components/messages.scss
new file mode 100644
index 0000000..bed6fb2
--- /dev/null
+++ b/assets/css/components/messages.scss
@@ -0,0 +1,3 @@
+#messages {
+ display: none;
+}
\ No newline at end of file
diff --git a/assets/css/header.scss b/assets/css/header.scss
deleted file mode 100644
index acc9cf0..0000000
--- a/assets/css/header.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-header {
- position : fixed;
- top : 0;
- left : 0;
- width : 100%;
- background : rgba(255, 255, 255, 1);
-}
-
-#logo {
- font-family : BlackChancery, sans-serif;
- font-size : 3em;
- margin-left: 10px;
-}
\ No newline at end of file
diff --git a/assets/css/layouts/header.scss b/assets/css/layouts/header.scss
new file mode 100644
index 0000000..a1191ac
--- /dev/null
+++ b/assets/css/layouts/header.scss
@@ -0,0 +1,20 @@
+header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background: rgba(255, 255, 255, 1);
+ padding: 5px 10px 0 10px;
+
+ display: flex;
+ justify-content: space-between;
+
+ nav a {
+ margin: 0 5px;
+ }
+}
+
+#logo {
+ font-family: BlackChancery, sans-serif;
+ font-size: 2em;
+}
\ No newline at end of file
diff --git a/assets/css/layouts/page.scss b/assets/css/layouts/page.scss
new file mode 100644
index 0000000..8459bbf
--- /dev/null
+++ b/assets/css/layouts/page.scss
@@ -0,0 +1,12 @@
+%font {
+ font-family: Gabriola, sans-serif;
+ font-size: 1.5rem;
+}
+
+body {
+ @extend %font;
+ margin: 80px 5px 0 5px; // Vertical translation for the fixed header
+}
+.ui-widget {
+ @extend %font;
+}
\ No newline at end of file
diff --git a/assets/css/main.scss b/assets/css/main.scss
new file mode 100644
index 0000000..a3042b3
--- /dev/null
+++ b/assets/css/main.scss
@@ -0,0 +1,8 @@
+@import "~bootstrap/scss/bootstrap";
+
+@import "base/fonts";
+
+@import "components/messages";
+
+@import "layouts/page";
+@import "layouts/header";
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..7f26dbd
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,6 @@
+require('bootstrap/dist/js/bootstrap.bundle.min');
+
+require('@fortawesome/fontawesome-free/css/all.min.css');
+
+require('../css/main.scss');
+require('../js/messages.js');
\ No newline at end of file
diff --git a/assets/js/app.js b/assets/js/messages.js
similarity index 68%
rename from assets/js/app.js
rename to assets/js/messages.js
index 2aa285a..dc4e680 100644
--- a/assets/js/app.js
+++ b/assets/js/messages.js
@@ -1,7 +1,6 @@
-require('../css/app.scss');
-
const $ = require('jquery');
-require('jquery-ui');
+require('jquery-ui-css/all.css');
+require('jquery-ui/dialog');
$(function () {
/* Messages */
diff --git a/package.json b/package.json
index d7bbcce..a03ffd5 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"build": "encore production --progress"
},
"dependencies": {
+ "@fortawesome/fontawesome-free": "^5.13.0",
"jquery": "^3.5.1",
"jquery-ui": "^1.12.1"
}
diff --git a/symfony.lock b/symfony.lock
index 379adca..4360c41 100644
--- a/symfony.lock
+++ b/symfony.lock
@@ -525,7 +525,7 @@
},
"files": [
"assets/css/app.css",
- "assets/js/app.js",
+ "assets/js/main.js",
"config/packages/assets.yaml",
"config/packages/prod/webpack_encore.yaml",
"config/packages/test/webpack_encore.yaml",
diff --git a/templates/base.html.twig b/templates/base.html.twig
index c5ab31e..e19457d 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -8,7 +8,7 @@
{% block stylesheets %}
- {{ encore_entry_link_tags('app') }}
+ {{ encore_entry_link_tags('main') }}
{% endblock %}
@@ -16,11 +16,20 @@
Giftopic
-
+
{% block body %}{% endblock %}
@@ -41,7 +50,7 @@
{% block javascripts %}
- {{ encore_entry_script_tags('app') }}
+ {{ encore_entry_script_tags('main') }}
{% endblock %}