@axium/calendar 0.3.3 → 0.4.0

package/dist/common.d.ts

@@ -117,15 +117,16 @@ export interface Event extends z.infer<typeof Event> {
 export declare function formatEventTimes(event: Event): string;
 export declare const CalendarInit: z.ZodObject<{
     name: z.ZodString;
+    color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
 }, z.core.$strip>;
 export interface CalendarInit extends z.infer<typeof CalendarInit> {
 }
 export declare const Calendar: z.ZodObject<{
     name: z.ZodString;
+    color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
     id: z.ZodUUID;
     userId: z.ZodUUID;
     created: z.ZodCoercedDate<unknown>;
-    color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
     acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
         itemId: z.ZodUUID;
         userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -161,12 +162,13 @@ declare const CalendarAPI: {
     readonly 'users/:id/calendars': {
         readonly PUT: readonly [z.ZodObject<{
             name: z.ZodString;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
         }, z.core.$strip>, z.ZodObject<{
             name: z.ZodString;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
-            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -192,10 +194,10 @@ declare const CalendarAPI: {
         }, z.core.$strip>];
         readonly GET: z.ZodArray<z.ZodObject<{
             name: z.ZodString;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
-            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodNonOptional<z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -223,10 +225,10 @@ declare const CalendarAPI: {
     readonly 'calendars/:id': {
         readonly GET: z.ZodObject<{
             name: z.ZodString;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
-            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodNonOptional<z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -252,12 +254,13 @@ declare const CalendarAPI: {
         }, z.core.$strip>;
         readonly PATCH: readonly [z.ZodObject<{
             name: z.ZodString;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
         }, z.core.$strip>, z.ZodObject<{
             name: z.ZodString;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
-            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -283,10 +286,10 @@ declare const CalendarAPI: {
         }, z.core.$strip>];
         readonly DELETE: z.ZodObject<{
             name: z.ZodString;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
-            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;

package/dist/common.js

@@ -131,12 +131,12 @@ export function formatEventTimes(event) {
 }
 export const CalendarInit = z.object({
     name: z.string(),
+    color: Color.nullish(),
 });
 export const Calendar = CalendarInit.extend({
     id: z.uuid(),
     userId: z.uuid(),
     created: z.coerce.date(),
-    color: Color.nullish(),
     acl: AccessControl.array().optional(),
 });
 export function getCalPermissionsInfo(cal, user) {

package/dist/server.js

@@ -34,7 +34,7 @@ addRoute({
         await checkAuthForUser(request, userId);
         return withEncoded(await database
             .insertInto('calendars')
-            .values({ ...init, userId })
+            .values({ ...withDecoded(init), userId })
             .returningAll()
             .executeTakeFirstOrThrow()
             .catch(withError('Could not create calendar')));
@@ -52,7 +52,7 @@ addRoute({
         await authRequestForItem(request, 'calendars', id, { edit: true });
         return withEncoded(await database
             .updateTable('calendars')
-            .set(body)
+            .set(withDecoded(body))
             .where('id', '=', id)
             .returningAll()
             .executeTakeFirstOrThrow()

package/dist/web_hook.d.ts

@@ -0,0 +1,8 @@
+import en from '../locales/en.json';
+import './common.js';
+type en = typeof en;
+declare module '@axium/client/locales' {
+    interface Locale extends en {
+    }
+}
+export {};

package/dist/web_hook.js

@@ -0,0 +1,4 @@
+import { extendLocale } from '@axium/client';
+import en from '../locales/en.json' with { type: 'json' };
+import './common.js';
+extendLocale('en', en);

package/lib/Event.svelte

@@ -2,6 +2,7 @@
 	import type { EventInitProp } from '@axium/calendar/client';
 	import type { Event } from '@axium/calendar/common';
 	import { eventToICS, formatEventTimes, toRRuleDate } from '@axium/calendar/common';
+	import { text } from '@axium/client';
 	import { contextMenu } from '@axium/client/attachments';
 	import { Icon, Popover } from '@axium/client/components';
 	import { colorHashHex, decodeColor, encodeColor } from '@axium/core/color';
@@ -43,8 +44,8 @@
 			{@attach contextMenu(
 				{
 					i: 'pencil',
-					text: 'Edit',
-					action: () => {
+					text: text('Event.edit'),
+					action() {
 						eventEditId = event.id;
 						eventEditCalId = event.calId;
 						eventInit = initData;
@@ -53,13 +54,13 @@
 				},
 				{
 					i: 'file-export',
-					text: 'Export .ics',
+					text: text('Event.export'),
 					action: () => download(event.summary + '.ics', eventToICS(event)),
 				},
 				{
 					i: 'trash-can',
-					text: 'Delete',
-					action: () => {
+					text: text('Event.delete'),
+					action() {
 						eventEditId = event.id;
 						document.querySelector<HTMLDialogElement>('#event-delete')!.showModal();
 					},

package/locales/en.json

@@ -0,0 +1,40 @@
+{
+	"app_name": {
+		"calendar": "Calendar"
+	},
+	"Event": {
+		"edit": "Edit",
+		"export": "Export .ics",
+		"delete": "Delete"
+	},
+	"calendar": {
+		"new_event": "New Event",
+		"today": "Today",
+		"list_owned": "My Calendars",
+		"list_shared": "Shared Calendars",
+		"delete_confirm": "Are you sure you want to delete the calendar \"{name}\"?",
+		"edit": "Edit"
+	},
+	"calendar_init": {
+		"name": "Name",
+		"color": "Color",
+		"submit_edit": "Save"
+	},
+	"event_delete": {
+		"confirm": "Are you sure you want to delete this event?"
+	},
+	"event_init": {
+		"all_day": "All day",
+		"description_placeholder": "Add description",
+		"location_placeholder": "Add location",
+		"recurrence": {
+			"daily": "Every day",
+			"monthly_on": "Every month on the {day}",
+			"none": "Does not repeat",
+			"weekly": "Every week on {day}",
+			"yearly": "Every year on {date}"
+		},
+		"submit_edit": "Update",
+		"title_placeholder": "Add title"
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/calendar",
-	"version": "0.3.3",
+	"version": "0.4.0",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Calendar for Axium",
 	"funding": {
@@ -29,6 +29,7 @@
 		"dist",
 		"lib",
 		"routes",
+		"locales",
 		"db.json"
 	],
 	"scripts": {
@@ -43,13 +44,15 @@
 	},
 	"dependencies": {
 		"rrule": "^2.8.1",
+		"svelte-gestures": "^5.2.2",
 		"zod": "^4.0.5"
 	},
 	"axium": {
 		"server": {
 			"routes": "routes",
 			"hooks": "./dist/hooks.js",
-			"db": "./db.json"
+			"db": "./db.json",
+			"web_client_hooks": "./dist/web_hook.js"
 		},
 		"apps": [
 			{

package/routes/calendar/+page.svelte

@@ -2,6 +2,7 @@
 	import { getEvents, type EventInitFormData, type EventInitProp } from '@axium/calendar/client';
 	import type { Event } from '@axium/calendar/common';
 	import {
+		CalendarInit,
 		dateToInputValue,
 		fromRRuleDate,
 		getCalPermissionsInfo,
@@ -13,11 +14,12 @@
 		withOrdinalSuffix,
 	} from '@axium/calendar/common';
 	import * as Cal from '@axium/calendar/components';
+	import { fetchAPI, text } from '@axium/client';
 	import { contextMenu, dynamicRows } from '@axium/client/attachments';
 	import { AccessControlDialog, ColorPicker, FormDialog, Icon, Popover, UserDiscovery } from '@axium/client/components';
-	import { fetchAPI } from '@axium/client/requests';
 	import { colorHashHex, encodeColor } from '@axium/core/color';
 	import { rrulestr } from 'rrule';
+	import { useSwipe } from 'svelte-gestures';
 	import { SvelteDate } from 'svelte/reactivity';
 	import { _throw } from 'utilium';
 	import * as z from 'zod';
@@ -69,6 +71,13 @@
 		eventEditId = $state<string>(),
 		eventEditCalId = $state<string>();
 
+	const defaultCalInit = {
+		color: null,
+	} as CalendarInit;
+
+	let calInit = $state<CalendarInit>(defaultCalInit),
+		calEditId = $state<string>();
+
 	const recurringEvents = $derived(
 		events
 			.filter(ev => ev.recurrence)
@@ -81,20 +90,26 @@
 			})
 	);
 
-	const defaultEventColor = $derived((eventInit.calendar || calendars[0])?.color || encodeColor(colorHashHex(user.name)));
+	const defaultCalColor = encodeColor(colorHashHex(user.name));
+	const defaultEventColor = $derived((eventInit.calendar || calendars[0])?.color || defaultCalColor);
 
 	let calSidebar = $state<HTMLDivElement>();
 </script>
 
 <svelte:head>
-	<title>Calendar</title>
+	<title>{text('app_name.calendar')}</title>
 </svelte:head>
 
 <div id="cal-app">
-	<button class="event-init icon-text mobile-hide" command="show-modal" commandfor="event-init"><Icon i="plus" /> New Event</button>
+	<div id="event-init-container">
+		<button class="event-init icon-text mobile-hide" command="show-modal" commandfor="event-init">
+			<Icon i="plus" />
+			<span>{text('calendar.new_event')}</span>
+		</button>
+	</div>
 	<div class="bar">
 		<!-- desktop -->
-		<button class="mobile-hide" onclick={() => start.setTime(today.getTime())}>Today</button>
+		<button class="mobile-hide" onclick={() => start.setTime(today.getTime())}>{text('calendar.today')}</button>
 		<button
 			class="reset mobile-hide"
 			onclick={() => {
@@ -125,60 +140,66 @@
 	<div id="cal-sidebar" bind:this={calSidebar}>
 		<Cal.Select bind:start bind:end />
 		<div class="cal-sidebar-header">
-			<h4>My Calendars</h4>
-			<button style:display="contents" command="show-modal" commandfor="add-calendar">
+			<h4>{text('calendar.list_owned')}</h4>
+			<button style:display="contents" command="show-modal" commandfor="cal-init">
 				<Icon i="plus" />
 			</button>
 		</div>
 		{#each calendars.filter(cal => cal.userId == user.id) as cal (cal.id)}
+			{@const edit = () => {
+				calEditId = cal.id;
+				calInit = cal;
+				document.querySelector<HTMLDialogElement>('#cal-init')!.showModal();
+			}}
 			<div
 				class="cal-sidebar-item"
 				{@attach contextMenu(
-					{ i: 'pencil', text: 'Rename', action: () => dialogs['rename:' + cal.id].showModal() },
-					{ i: 'user-group', text: 'Share', action: () => dialogs['share:' + cal.id].showModal() },
-					{ i: 'trash', text: 'Delete', action: () => dialogs['delete:' + cal.id].showModal() }
+					{ i: 'pencil', text: text('calendar.edit'), action: edit },
+					{ i: 'user-group', text: text('generic.share'), action: () => dialogs['share:' + cal.id].showModal() },
+					{ i: 'trash', text: text('generic.delete'), action: () => dialogs['delete:' + cal.id].showModal() }
 				)}
 			>
 				<span>{cal.name}</span>
 				<Popover showToggle="hover">
-					<div class="menu-item" onclick={() => dialogs['rename:' + cal.id].showModal()}>
-						<Icon i="pencil" /> Rename
-					</div>
+					<button
+						class="reset menu-item"
+						command="show-modal"
+						commandfor="cal-init"
+						onclick={() => {
+							calEditId = cal.id;
+							calInit = { ...cal };
+						}}
+					>
+						<Icon i="pencil" />
+						<span>{text('calendar.edit')}</span>
+					</button>
 					<div class="menu-item" onclick={() => dialogs['share:' + cal.id].showModal()}>
-						<Icon i="user-group" /> Share
+						<Icon i="user-group" />
+						<span>{text('generic.share')}</span>
 					</div>
 					<div class="menu-item" onclick={() => dialogs['delete:' + cal.id].showModal()}>
-						<Icon i="trash" /> Delete
+						<Icon i="trash" />
+						<span>{text('generic.delete')}</span>
 					</div>
 				</Popover>
-				<FormDialog
-					bind:dialog={dialogs['rename:' + cal.id]}
-					submitText="Save"
-					submit={(input: { name: string }) =>
-						fetchAPI('PATCH', 'calendars/:id', input, cal.id).then(result => Object.assign(cal, result))}
-				>
-					<div>
-						<label for="name">Name</label>
-						<input name="name" type="text" required value={cal.name} />
-					</div>
-				</FormDialog>
 				<AccessControlDialog editable itemType="calendars" item={cal} bind:dialog={dialogs['share:' + cal.id]} />
 				<FormDialog
 					bind:dialog={dialogs['delete:' + cal.id]}
-					submitText="Delete"
+					submitText={text('generic.delete')}
 					submitDanger
 					submit={() => fetchAPI('DELETE', 'calendars/:id', null, cal.id).then(() => calendars.splice(calendars.indexOf(cal), 1))}
 				>
 					<p>
-						Are you sure you want to delete the calendar "{cal.name}"?<br />
-						<strong>This action cannot be undone.</strong>
+						<span>{text('calendar.delete_confirm', { name: cal.name })}</span>
+						<br />
+						<strong>{text('generic.action_irreversible')}</strong>
 					</p>
 				</FormDialog>
 			</div>
 		{/each}
 		{#if calendars.some(cal => cal.userId != user.id)}
 			<div class="cal-sidebar-header">
-				<h4>Shared Calendars</h4>
+				<h4>{text('calendar.list_shared')}</h4>
 			</div>
 			{#each calendars.filter(cal => cal.userId != user.id) as cal (cal.id)}
 				{@const { list, icon } = getCalPermissionsInfo(cal, user)}
@@ -188,7 +209,27 @@
 			{/each}
 		{/if}
 	</div>
-	<div id="cal">
+	<div
+		id="cal"
+		{...useSwipe(
+			e => {
+				if (e.detail.pointerType != 'touch') return;
+				switch (e.detail.direction) {
+					case 'left':
+						start.setDate(start.getDate() + spanDays);
+						end.setDate(end.getDate() + spanDays);
+						break;
+					case 'right':
+						start.setDate(start.getDate() - spanDays);
+						end.setDate(end.getDate() - spanDays);
+						break;
+					case 'top':
+					case 'bottom':
+				}
+			},
+			() => ({ touchAction: 'pan-y' })
+		)}
+	>
 		<div id="hours" class="subtle">
 			{#each { length: 24 }, i}
 				{#if !i}
@@ -241,8 +282,12 @@
 <FormDialog
 	id="event-init"
 	clearOnCancel
-	cancel={() => (eventInit = defaultEventInit)}
-	submitText={eventEditId ? 'Update' : 'Create'}
+	cancel={() => {
+		eventInit = defaultEventInit;
+		eventEditId = undefined;
+		eventEditCalId = undefined;
+	}}
+	submitText={text(eventEditId ? 'event_init.submit_edit' : 'generic.create')}
 	submit={async (data: EventInitFormData) => {
 		Object.assign(eventInit, data);
 		const calendar = calendars.find(cal => cal.id == eventInit.calId);
@@ -262,7 +307,7 @@
 		return;
 	}}
 >
-	<input name="summary" type="text" required placeholder="Add title" bind:value={eventInit.summary} />
+	<input name="summary" type="text" required placeholder={text('event_init.title_placeholder')} bind:value={eventInit.summary} />
 	<div class="event-times-container">
 		<label for="eventInit.start"><Icon i="clock" /></label>
 		<div class="event-times">
@@ -287,22 +332,24 @@
 				<label for="eventInit.isAllDay:checkbox" class="checkbox">
 					{#if eventInit.isAllDay}<Icon i="check" --size="1.3em" />{/if}
 				</label>
-				<label for="eventInit.isAllDay:checkbox">All day</label>
+				<label for="eventInit.isAllDay:checkbox">{text('event_init.all_day')}</label>
 				<div class="spacing"></div>
 				<select name="recurrence" bind:value={eventInit.recurrence}>
-					<option value="">Does not repeat</option>
-					<option value="FREQ=DAILY">Every day</option>
+					<option value="">{text('event_init.recurrence.none')}</option>
+					<option value="FREQ=DAILY">{text('event_init.recurrence.daily')}</option>
 					<option value="FREQ=WEEKLY;BYDAY={toByDay(eventInit.start)}">
-						Every week on {longWeekDay(eventInit.start)}
+						{text('event_init.recurrence.weekly', { day: longWeekDay(eventInit.start) })}
 					</option>
 					<option value="FREQ=MONTHLY;BYDAY={Math.ceil(eventInit.start.getDate() / 7) + toByDay(eventInit.start)}"
-						>Every month on the {weekDayOfMonth(eventInit.start)}
+						>{text('event_init.recurrence.monthly_on', { day: weekDayOfMonth(eventInit.start) })}
 					</option>
 					<option value="FREQ=MONTHLY;BYMONTHDAY={eventInit.start.getDate()}">
-						Every month on the {withOrdinalSuffix(eventInit.start.getDate())}
+						{text('event_init.recurrence.monthly_on', { day: withOrdinalSuffix(eventInit.start.getDate()) })}
 					</option>
 					<option value="FREQ=YEARLY;BYMONTH={eventInit.start.getMonth()};BYMONTHDAY={eventInit.start.getDate()}">
-						Every year on {eventInit.start.toLocaleDateString('default', { month: 'long', day: 'numeric' })}
+						{text('event_init.recurrence.yearly', {
+							date: eventInit.start.toLocaleDateString('default', { month: 'long', day: 'numeric' }),
+						})}
 					</option>
 					<!-- @todo <option value="">Custom</option> -->
 				</select>
@@ -343,7 +390,12 @@
 
 	<div>
 		<label for="eventInit.location"><Icon i="location-dot" /></label>
-		<input name="location" id="eventInit.location" placeholder="Add location" bind:value={eventInit.location} />
+		<input
+			name="location"
+			id="eventInit.location"
+			placeholder={text('event_init.location_placeholder')}
+			bind:value={eventInit.location}
+		/>
 	</div>
 
 	<div>
@@ -351,7 +403,7 @@
 		<textarea
 			name="description"
 			id="eventInit.description"
-			placeholder="Add description"
+			placeholder={text('event_init.description_placeholder')}
 			bind:value={eventInit.description}
 			{@attach dynamicRows()}
 		></textarea>
@@ -360,7 +412,7 @@
 
 <FormDialog
 	id="event-delete"
-	submitText="Delete"
+	submitText={text('generic.delete')}
 	submitDanger
 	submit={async () => {
 		if (!eventEditId) throw new Error('No event to delete');
@@ -371,17 +423,41 @@
 		eventEditId = undefined;
 	}}
 >
-	<p>Are you sure you want to delete this event?</p>
+	<p>{text('event_delete.confirm')}</p>
 </FormDialog>
 
 <FormDialog
-	id="add-calendar"
-	submitText="Create"
-	submit={(input: { name: string }) =>
-		fetchAPI('PUT', 'users/:id/calendars', input, user.id).then(cal => calendars.push({ ...cal, acl: [] }))}
+	id="cal-init"
+	clearOnCancel
+	cancel={() => {
+		calInit = defaultCalInit;
+		calEditId = undefined;
+	}}
+	submitText={text(calEditId ? 'calendar_init.submit_edit' : 'generic.create')}
+	submit={async (data: Record<keyof CalendarInit, string>) => {
+		Object.assign(calInit, data);
+
+		if (!calEditId) {
+			const cal = await fetchAPI('PUT', 'users/:id/calendars', calInit, user.id);
+			calendars.push({ ...cal, acl: [] });
+			return;
+		}
+
+		const cal = calendars.find(cal => cal.id == calEditId);
+
+		const result = await fetchAPI('PATCH', 'calendars/:id', calInit, calEditId);
+
+		if (cal) Object.assign(cal, result);
+		else console.warn('Could not find calendar to update');
+	}}
 >
 	<div>
-		<label for="name">Name</label>
-		<input name="name" type="text" required />
+		<label for="calInit.name">{text('calendar_init.name')}</label>
+		<input id="calInit.name" bind:value={calInit.name} required />
+	</div>
+
+	<div>
+		<label for="calInit.color">{text('calendar_init.color')}</label>
+		<ColorPicker bind:value={calInit.color} defaultValue={defaultCalColor} />
 	</div>
 </FormDialog>

package/routes/calendar/cal.css

@@ -15,11 +15,18 @@ body:has(#cal-app) {
 	}
 }
 
+#event-init-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 1em;
+}
+
 button.event-init {
-	margin: 0.5em;
 	background-color: var(--bg-alt);
 	text-align: center;
 	justify-content: center;
+	width: 100%;
 }
 
 form {
@@ -81,6 +88,10 @@ div.attendees {
 	align-items: center;
 	font-weight: bold;
 
+	button {
+		font-weight: normal;
+	}
+
 	@media (width < 700px) {
 		margin: 0 1em;
 
@@ -224,7 +235,6 @@ div.attendees {
 		inset: 3em 0 0;
 		z-index: 10;
 		background-color: var(--bg-menu);
-		font-size: clamp(0.95rem, 0.75rem + 2.5cqw, 1.35rem);
 		translate: -100% 0;
 		opacity: 0;
 		visibility: hidden;
@@ -234,6 +244,12 @@ div.attendees {
 			width: 100%;
 		}
 
+		.CalendarSelect,
+		.cal-sidebar-header,
+		.cal-sidebar-item > span {
+			font-size: clamp(0.95rem, 0.75rem + 2.5cqw, 1.35rem);
+		}
+
 		&.active {
 			translate: 0 0;
 			opacity: 1;