first commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,11 @@
+<script>
+
+  import '~/assets/main.css'
+
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

assets/main.css

@@ -0,0 +1,3 @@
+body {
+    background-color: yellow;
+}

components/index/calblock.vue

@@ -0,0 +1,33 @@
+<style scoped>
+
+    .indexcalendar {
+        display: flex; justify-content: space-between;
+    }
+
+    .calendarpart {
+        flex-grow: 1;
+    }
+
+    @media (max-width: 720px) {
+        .indexcalendar {
+            flex-direction: column;
+        }
+        
+        .calendarpart {
+            width: 100%;
+        }
+    }
+
+</style>
+
+
+<template>
+    <div class="indexcalendar">
+        <div class="calendarpart">
+            <IndexCalendarToday />
+        </div>
+        <div class="calendarpart">
+            <IndexCalendarFrame />
+        </div>
+    </div>
+</template>

components/index/calendar/frame.vue

@@ -0,0 +1,262 @@
+<style scoped>
+
+.fullframe, .month, .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);
+    min-width: 1.2rem;
+    gap: .6rem;
+}
+
+.month {
+    height: fit-content;
+}
+
+.header {
+    grid-column: 1 / 7;
+    grid-row: 1 / 2;
+}
+
+.days {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+}
+
+.leapweek {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+}
+
+.m1 {
+
+}
+
+.h1{
+
+}
+
+.m2 {
+
+}
+
+.h2{
+
+}
+
+
+.m3 {
+
+}
+
+.h3{
+
+}
+
+.m4 {
+
+}
+
+.h4{
+
+}
+
+.m5 {
+
+}
+
+.h5{
+
+}
+
+.m6 {
+
+}
+
+.h6{
+
+}
+
+.m7 {
+
+}
+
+.h7{
+
+}
+
+.m8 {
+
+}
+
+.h8{
+
+}
+
+.m9 {
+
+}
+
+.h9{
+
+}
+
+.m10 {
+
+}
+
+.h10{
+
+}
+
+.m11 {
+
+}
+
+.h11{
+
+}
+
+.m12 {
+
+}
+
+.h12{
+
+}
+
+.m13 {
+    grid-column: 3;
+
+}
+
+.intercalaryheader {
+    grid-column: 2;
+
+
+}
+
+.intercalarytext {
+    margin-left: auto;
+    width: 0;
+    min-width: fit-content;
+}
+
+</style>
+
+<template>
+
+
+        <div class="fullframe">
+            <div class="month m1">
+                <div class="header h1">
+                    First
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="month m2">
+                <div class="header h2">
+                    Second
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="month m3"> 
+                <div class="header h3">
+                    Third
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="month m4">
+                <div class="header h4">
+                    Fourth
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="month m5">
+                <div class="header h5">
+                    Fifth
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="month m6">
+                <div class="header h6">
+                    Sixth
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="month m7">
+                <div class="header h7">
+                    Seventh
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="month m8">
+                <div class="header h8">
+                    Eighth
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="month m9">
+                <div class="header h9">
+                    Ninth
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="month m10">
+                <div class="header h10">
+                    Tenth
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="month m11">
+                <div class="header h11">
+                    Eleventh
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="month m12">
+                <div class="header h12">
+                    Twelfth
+                </div>
+                <div class="days">
+                    yah
+                </div>
+            </div>
+            <div class="intercalaryheader">
+                <div class="intercalarytext">Intercalary Week</div>
+            </div>
+            <div class="month m13">
+                <div class="leapweek">
+                    yuh
+                </div>
+            </div>
+        </div>
+
+</template>

components/index/calendar/today.vue

@@ -0,0 +1,11 @@
+<style scoped>
+
+</style>
+
+<template>
+
+    <div class="todaybound">
+        Today is 6 / 06 / 12024
+    </div>
+
+</template>

components/index/cycleblock.vue

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

components/index/questionblock.vue

@@ -0,0 +1,7 @@
+<template>
+
+    <div>
+        What's the deal anyway
+    </div>
+
+</template>

components/index/titleblock.vue

@@ -0,0 +1,6 @@
+<template>
+    <div>
+        <h1>The Unity Calendar</h1>
+        <h2>An international calendar for coordination.</h2>
+    </div>
+</template>

components/navfoot.vue

@@ -0,0 +1,18 @@
+<style scoped>
+
+    ul {
+
+        display: flex; gap: 6rem; justify-content: center;
+
+    }
+
+</style>
+
+<template>
+    <ul>
+        <li><NuxtLink to="/">home</NuxtLink></li>
+        <li><NuxtLink to="/info">info</NuxtLink></li>
+        <li><NuxtLink to="/maker">maker</NuxtLink></li>
+        <li><NuxtLink to="/credits">credits</NuxtLink></li>
+    </ul>
+</template>

components/testcomp.vue

@@ -0,0 +1,5 @@
+<template>
+    <h1>
+        Aaaaaaaa
+    </h1>
+</template>

layouts/default.vue

@@ -0,0 +1,27 @@
+<style>
+    main {
+        max-width: 60rem;
+        margin: auto;
+    }
+
+    h1 {
+        margin: auto;
+        width: max-content;
+    }
+
+    nav {
+        position: absolute; 
+        bottom: 0;
+        width: 60rem;
+        margin: auto;
+    }
+</style>
+
+<template>
+    <main>
+        <slot />
+    </main>    
+    <nav>
+        <navfoot />
+    </nav>
+</template>

nuxt.config.ts

@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  pages: true
+})

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.11.2",
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
+  }
+}

pages/credits.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>
+        <p>
+            actually I made it
+        </p>
+    </div>
+</template>

pages/index.vue

@@ -0,0 +1,18 @@
+<style scoped>
+
+    .indexblock {
+
+        display: flex; flex-direction: column; gap: 1.2rem;
+
+    }
+
+</style>
+
+<template>
+    <div class="indexblock">
+        <IndexTitleblock />
+        <IndexCalblock />
+        <IndexCycleblock />
+        <IndexQuestionblock />
+    </div>
+</template>

pages/info.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>
+        <h2>
+            What is the Unity Calendar?
+        </h2>
+    </div>
+</template>

pages/maker.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>
+        <p>
+            make it yourself idc
+        </p>
+    </div>
+</template>

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}