starts the math for the gregorian to unity conversion

assets/main.css

@@ -2,9 +2,4 @@ body {
     background-color: yellow;
     margin: 0;
     height: 100vh;
-}
-
-h1 {
-    margin: auto;
-    width: max-content;
 }

assets/unitymath.js

@@ -0,0 +1,74 @@
+const hoursperday = 24
+const minutesperhour = 60
+const secondsperminute = 60
+const secondms = 1000
+const minutems = secondms * secondsperminute
+const hourms = minutems * minutesperhour
+const dayms = hourms * hoursperday
+
+const solaryear = 365.242
+
+const yeardays = 366
+const leapchange = -6
+const leapyeardays = yeardays + leapchange
+
+const monthdays = 30
+
+const leapfreq = 8
+
+const exleapcyclelength = 800;
+const extraleapyear = 500;
+
+const exleapcycledays = (exleapcyclelength * yeardays) + leapchange + ((exleapcyclelength / leapfreq) * leapchange)
+
+const leapcycledays = (leapfreq * yeardays) + leapchange;
+
+const unityzero = Date.parse("2000-03-08T00:00:00.000Z");
+
+function unixtounity(unixtime) {
+    const unitytime = unixtime - unityzero;
+    const days = unitytime / dayms;
+
+    const exleapcycles = Math.floor(days / exleapcycledays);
+
+    const exleapcycleprogress = days - exleapcycles * exleapcycledays;
+
+    const leapcycles = Math.floor(exleapcycleprogress / leapcycledays);
+
+    const leapcycleprogress = exleapcycleprogress - leapcycles * leapcycledays;
+
+    let years;
+
+    let yearprogress;
+
+    if (leapcycleprogress > leapyeardays) {
+
+        years = Math.floor((leapcycleprogress - leapyeardays) / yeardays) + 1;
+
+        yearprogress = leapcycleprogress - ((years * yeardays) + leapchange);
+
+    } else {
+
+        years = 0;
+
+        yearprogress = leapcycleprogress;
+
+    }
+
+    const months = Math.floor(yearprogress / monthdays);
+
+    const monthprogress = yearprogress - months * monthdays;
+
+    const date = Math.floor(monthprogress);
+
+    return `${12000 + (exleapcycles * exleapcyclelength) + (leapcycles * leapfreq) + years}-${months + 1}-${date + 1}`
+
+}
+
+const oldtimes = new Date();
+oldtimes.setYear(-600)
+
+console.log(unixtounity(Date.now()))
+console.log(unixtounity(Date.parse("3500-03-03")))
+console.log(unixtounity(Date.parse("0010-12-30")))
+console.log(unixtounity(oldtimes.getTime()))

components/main/calblock.vue

@@ -5,11 +5,20 @@
         
     }
 
+    .calendarpart {
+        width: 50%;
+        border: 1px solid black;
+    }
+
     @media (max-width: 720px) {
         .indexcalendar {
             flex-direction: column;
         }
         
+        .calendarpart {
+            width: 100%;
+        }
+
     }
 
 </style>

components/main/calendar/frame.vue

@@ -19,17 +19,13 @@
 
 <style scoped>
 
-.fullframe, .header {
-    border: solid; border-width: 1px;
-}
-
 .fullframe {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    /* grid-auto-columns: 1fr; */
-    /* grid-template-rows: repeat(5, 1fr) 1.2rem; */
     min-width: 1.2rem;
     gap: .6rem;
+    width: fit-content;
+    margin: auto;
 }
 
 .month {
@@ -66,7 +62,7 @@
 
 
         <div class="fullframe">
-            <MainCalendarMonth
+            <MainCalendarFrameMonth
                 v-for="month in defaultmonths"
                 :monthname="month.name"
                 :daycount="30"
@@ -74,7 +70,7 @@
             <div class="intercalaryheader">
                 <div class="intercalarytext">Intercalary Week</div>
             </div>
-            <MainCalendarMonth 
+            <MainCalendarFrameMonth 
                 :daycount="6" />
         </div>
 

components/main/calendar/frame/days.vue

@@ -26,7 +26,7 @@
 <template>
 
     <div class="days">
-        <MainCalendarSingleday
+        <MainCalendarFrameSingleday
             v-for="day in defaultdays"
         />
     </div>

components/main/calendar/frame/month.vue

@@ -21,7 +21,7 @@
                 {{monthname}}
             </div>
         </div>
-        <MainCalendarDays
+        <MainCalendarFrameDays
             :daycount=daycount />
     </div>
 

components/main/calendar/today.vue

@@ -1,11 +1,22 @@
 <style scoped>
 
+    .todaybound {
+
+        display: flex; flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        height: 100%;
+
+    }
+
 </style>
 
 <template>
 
     <div class="todaybound">
-        Today is 6 / 06 / 12024
+        <MainCalendarTodayIs />
+        <MainCalendarTodayWeekday />
+        <MainCalendarTodayHoliday />
     </div>
 
 </template>

components/main/calendar/today/holiday.vue

@@ -0,0 +1,7 @@
+<template>
+
+    <div>
+        Happy day
+    </div>
+
+</template>

components/main/calendar/today/is.vue

@@ -0,0 +1,36 @@
+<script setup>
+
+    const date = new Date()
+
+    const dd = date.getDate()
+
+    const mm = date.getMonth() + 1
+
+    const yyyy = date.getFullYear()
+
+
+</script>
+
+
+
+<style>
+
+.todayblock {
+    max-width: 75%;
+}
+
+.todayis, .todaydate{
+    font-size: 2.4rem;
+}
+
+</style>
+
+
+<template>
+
+    <div class="todayblock">
+        <span class="todayis">Today is</span>
+        <span class="todaydate">{{ dd }} / {{ mm }} / {{ yyyy }}</span>
+    </div>
+
+</template>

components/main/calendar/today/weekday.vue

@@ -0,0 +1,7 @@
+<template>
+
+    <div>
+        It is the th day of the week
+    </div>
+
+</template>

components/main/titleblock.vue

@@ -1,6 +1,24 @@
+<script setup>
+
+const props = defineProps(['pagetitle', 'pagesubtitle'])
+
+</script>
+
+
+<style>
+
+.pagetitle, .pagesubtitle {
+    margin: auto;
+    width: fit-content;
+    text-align: center;
+}
+
+</style>
+
+
 <template>
     <div>
-        <h1>The Unity Calendar</h1>
+        <h1 class="pagetitle">{{ pagetitle }}</h1>
-        <h2>An international calendar for coordination.</h2>
+        <h2 class="pagesubtitle">{{ pagesubtitle }}</h2>
     </div>
 </template>

components/navfoot.vue

@@ -10,7 +10,7 @@
 
     .navlist {
 
-        display: flex; gap: 6rem; justify-content: center;
+        display: flex; gap: 1.2rem; justify-content: center;
 
     }
 

layouts/default.vue

@@ -5,6 +5,7 @@
         display: flex; flex-direction: column;
         align-items: center;
         justify-content: space-between;
+        overflow: auto;
     }
 
 </style>

pages/index.vue

@@ -3,7 +3,8 @@
 .mainblock {
     max-width: 72rem;
     width: 100%;
-    display: flex; flex-direction: column; gap: 7.2rem;
+    display: flex; flex-direction: column; gap: 6rem;
+    padding-top: 2.4rem;
 }
 
 </style>
@@ -11,7 +12,10 @@
 
 <template>
     <main class="mainblock">
-        <MainTitleblock />
+        <MainTitleblock 
+            pagetitle='The Unity Calendar'
+            pagesubtitle='An international calendar for coordination.'
+        />
         <MainCalblock />
         <MainCycleblock />
         <MainQuestionblock />