min sidebar styles

.vscode/PythonImportHelper-v2-Completion.json

@@ -144,6 +144,38 @@
         "detail": "django.db",
         "documentation": {}
     },
+    {
+        "label": "migrations",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
+    {
+        "label": "models",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
+    {
+        "label": "migrations",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
+    {
+        "label": "models",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
     {
         "label": "models",
         "importPath": "django.db",
@@ -1119,6 +1151,24 @@
         "detail": "back.object.migrations.0006_clickablearea_source",
         "documentation": {}
     },
+    {
+        "label": "Migration",
+        "kind": 6,
+        "importPath": "back.object.migrations.0007_alter_clickablearea_target",
+        "description": "back.object.migrations.0007_alter_clickablearea_target",
+        "peekOfCode": "class Migration(migrations.Migration):\n    dependencies = [\n        ('object', '0006_clickablearea_source'),\n    ]\n    operations = [\n        migrations.AlterField(\n            model_name='clickablearea',\n            name='target',\n            field=models.ForeignKey(default=7, on_delete=django.db.models.deletion.PROTECT, related_name='clickable_areas', to='object.element3d'),\n            preserve_default=False,",
+        "detail": "back.object.migrations.0007_alter_clickablearea_target",
+        "documentation": {}
+    },
+    {
+        "label": "Migration",
+        "kind": 6,
+        "importPath": "back.object.migrations.0008_alter_clickablearea_target",
+        "description": "back.object.migrations.0008_alter_clickablearea_target",
+        "peekOfCode": "class Migration(migrations.Migration):\n    dependencies = [\n        ('object', '0007_alter_clickablearea_target'),\n    ]\n    operations = [\n        migrations.AlterField(\n            model_name='clickablearea',\n            name='target',\n            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.PROTECT, related_name='clickable_areas', to='object.element3d'),\n        ),",
+        "detail": "back.object.migrations.0008_alter_clickablearea_target",
+        "documentation": {}
+    },
     {
         "label": "ObjectConfig",
         "kind": 6,

front/src/components/Promo/main.vue

@@ -68,12 +68,14 @@ const point_light = reactive({
             </TresCanvas>
         </div>
         <div class="sidebar" :class="[{ 'open': sidebar.is_open }]">
-            <a href="#" @click.prevent="sidebar.close">
+            <a href="#" @click.prevent="sidebar.close" class="sidebar-close">
                 <i-mdi-close />
             </a>
             <template v-if="sidebar.is_open">
                 <h2>{{ sidebar.title }}</h2>
-                <p>{{ sidebar.description }}</p>
+                <template v-for="p in sidebar.description.split('\n')">
+                    <p>{{ p }}</p>
+                </template>
             </template>
         </div>
     </div>
@@ -92,16 +94,34 @@ const point_light = reactive({
 }
 
 .sidebar {
-    width: 25vw;
+    width: 23vw;
     background-color: #fff;
     position: fixed;
     top: 0;
-    right: -25vw;
+    right: -27vw;
     bottom: 0;
     transition: all 300ms linear;
 
+    padding: 2rem;
+
     &.open {
         right: 0
     }
+
+    &-close {
+        position: absolute;
+        left: 0;
+        top: 0;
+        font-size: 2rem;
+        color: black
+    }
+
+    h2 {
+        text-align: center;
+        font-size: 1.65rem;
+        margin: 1rem
+    }
+
+    p {}
 }
 </style>