Compare commits
No commits in common. "01884041988867957ae9bec71935af5f6eca2d8c" and "4d868269b9d203f46b79cb0905efdf2217db65be" have entirely different histories.
0188404198
...
4d868269b9
@ -1,5 +1,3 @@
|
|||||||
body {
|
body {
|
||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
margin: 0;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
}
|
||||||
@ -1,105 +0,0 @@
|
|||||||
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 exleapyear = 500;
|
|
||||||
const exleapyearlowbound = Math.floor(exleapyear / leapfreq) * leapfreq;
|
|
||||||
const exleapyearupbound = exleapyearlowbound + leapfreq;
|
|
||||||
const exleapyearlowbounddays = (exleapyearlowbound * yeardays) + ((exleapyearlowbound / leapfreq) * leapchange);
|
|
||||||
const exleapyearupbounddays = (exleapyearupbound * yeardays) + leapchange + ((exleapyearupbound / leapfreq) * leapchange);
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
let leapcycles;
|
|
||||||
|
|
||||||
let leapcycleprogress;
|
|
||||||
|
|
||||||
let leapcyclehasex;
|
|
||||||
|
|
||||||
if (exleapcycleprogress < exleapyearupbounddays) {
|
|
||||||
|
|
||||||
leapcycles = Math.floor(exleapcycleprogress / leapcycledays);
|
|
||||||
|
|
||||||
leapcycleprogress = exleapcycleprogress - leapcycles * leapcycledays;
|
|
||||||
|
|
||||||
leapcyclehasex = exleapcycleprogress >= exleapyearlowbounddays;
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
leapcycles = Math.floor((exleapcycleprogress - leapchange)/ leapcycledays);
|
|
||||||
|
|
||||||
leapcycleprogress = (exleapcycleprogress - (leapcycles * leapcycledays)) - leapchange;
|
|
||||||
|
|
||||||
leapcyclehasex = false;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
let leapyearspassed;
|
|
||||||
|
|
||||||
if (leapcycleprogress < leapyeardays) {
|
|
||||||
|
|
||||||
leapyearspassed = 0;
|
|
||||||
|
|
||||||
} else if (!leapcyclehasex || leapcycleprogress < (2 * leapyeardays) + (3 * yeardays)) {
|
|
||||||
|
|
||||||
leapyearspassed = 1;
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
leapyearspassed = 2;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const years = Math.floor((leapcycleprogress - (leapchange * leapyearspassed)) / yeardays);
|
|
||||||
|
|
||||||
const yearprogress = leapcycleprogress - ((years * yeardays) + (leapchange * leapyearspassed));
|
|
||||||
|
|
||||||
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(oldtimes.getTime()))
|
|
||||||
console.log(unixtounity(Date.parse("2000-01-01")))
|
|
||||||
console.log(unixtounity(Date.parse("2000-03-07")))
|
|
||||||
console.log(unixtounity(Date.parse("2000-03-08")))
|
|
||||||
console.log(unixtounity(Date.parse("2000-03-09")))
|
|
||||||
console.log(unixtounity(Date.parse("2001-03-07")))
|
|
||||||
console.log(unixtounity(Date.parse("3000-03-07")))
|
|
||||||
console.log(unixtounity(Date.parse("42400-03-07")))
|
|
||||||
@ -2,12 +2,10 @@
|
|||||||
|
|
||||||
.indexcalendar {
|
.indexcalendar {
|
||||||
display: flex; justify-content: space-between;
|
display: flex; justify-content: space-between;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendarpart {
|
.calendarpart {
|
||||||
width: 50%;
|
flex-grow: 1;
|
||||||
border: 1px solid black;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
@ -18,7 +16,6 @@
|
|||||||
.calendarpart {
|
.calendarpart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -27,10 +24,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="indexcalendar">
|
<div class="indexcalendar">
|
||||||
<div class="calendarpart">
|
<div class="calendarpart">
|
||||||
<MainCalendarToday />
|
<IndexCalendarToday />
|
||||||
</div>
|
</div>
|
||||||
<div class="calendarpart">
|
<div class="calendarpart">
|
||||||
<MainCalendarFrame />
|
<IndexCalendarFrame />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
262
components/index/calendar/frame.vue
Normal file
262
components/index/calendar/frame.vue
Normal file
@ -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>
|
||||||
11
components/index/calendar/today.vue
Normal file
11
components/index/calendar/today.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="todaybound">
|
||||||
|
Today is 6 / 06 / 12024
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
6
components/index/titleblock.vue
Normal file
6
components/index/titleblock.vue
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>The Unity Calendar</h1>
|
||||||
|
<h2>An international calendar for coordination.</h2>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -1,77 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
|
|
||||||
const defaultmonths = ref([
|
|
||||||
{id: 1, name: 'First'},
|
|
||||||
{id: 2, name: 'Second'},
|
|
||||||
{id: 3, name: 'Third'},
|
|
||||||
{id: 4, name: 'Fourth'},
|
|
||||||
{id: 5, name: 'Fifth'},
|
|
||||||
{id: 6, name: 'Sixth'},
|
|
||||||
{id: 7, name: 'Seventh'},
|
|
||||||
{id: 8, name: 'Eighth'},
|
|
||||||
{id: 9, name: 'Ninth'},
|
|
||||||
{id: 10, name: 'Tenth'},
|
|
||||||
{id: 11, name: 'Eleventh'},
|
|
||||||
{id: 12, name: 'Twelfth'}
|
|
||||||
])
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
.fullframe {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
min-width: 1.2rem;
|
|
||||||
gap: .6rem;
|
|
||||||
width: fit-content;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month {
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
grid-column: 1 / 7;
|
|
||||||
grid-row: 1 / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leapweek {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(6, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.m13 {
|
|
||||||
grid-column: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intercalaryheader {
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intercalarytext {
|
|
||||||
margin-left: auto;
|
|
||||||
width: 0;
|
|
||||||
min-width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="fullframe">
|
|
||||||
<MainCalendarFrameMonth
|
|
||||||
v-for="month in defaultmonths"
|
|
||||||
:monthname="month.name"
|
|
||||||
:daycount="30"
|
|
||||||
/>
|
|
||||||
<div class="intercalaryheader">
|
|
||||||
<div class="intercalarytext">Intercalary Week</div>
|
|
||||||
</div>
|
|
||||||
<MainCalendarFrameMonth
|
|
||||||
:daycount="6" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
|
|
||||||
const props = defineProps(['daycount'])
|
|
||||||
|
|
||||||
const weekcount = props.daycount / 6
|
|
||||||
|
|
||||||
const defaultdays = ref(Array.from(Array(props.daycount).keys()))
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
.days {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(6, 1fr);
|
|
||||||
grid-template-rows: repeat(v-bind('weekcount'), 1fr);
|
|
||||||
grid-gap: 1px;
|
|
||||||
background-color: black;
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<div class="days">
|
|
||||||
<MainCalendarFrameSingleday
|
|
||||||
v-for="day in defaultdays"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
|
|
||||||
const props = defineProps(['monthname', 'daycount'])
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
.headertext {
|
|
||||||
width: fit-content;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<div class="month">
|
|
||||||
<div class="header">
|
|
||||||
<div class="headertext">
|
|
||||||
{{monthname}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<MainCalendarFrameDays
|
|
||||||
:daycount=daycount />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<style>
|
|
||||||
|
|
||||||
.singleday {
|
|
||||||
background-color: white;
|
|
||||||
min-width: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<div class="singleday">-</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<style scoped>
|
|
||||||
|
|
||||||
.todaybound {
|
|
||||||
|
|
||||||
display: flex; flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<div class="todaybound">
|
|
||||||
<MainCalendarTodayIs />
|
|
||||||
<MainCalendarTodayWeekday />
|
|
||||||
<MainCalendarTodayHoliday />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Happy day
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
It is the th day of the week
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
|
|
||||||
const props = defineProps(['pagetitle', 'pagesubtitle'])
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
.pagetitle, .pagesubtitle {
|
|
||||||
margin: auto;
|
|
||||||
width: fit-content;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h1 class="pagetitle">{{ pagetitle }}</h1>
|
|
||||||
<h2 class="pagesubtitle">{{ pagesubtitle }}</h2>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,28 +1,18 @@
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
.footer {
|
ul {
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
max-width: 72rem;
|
|
||||||
width: 100%;
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navlist {
|
display: flex; gap: 6rem; justify-content: center;
|
||||||
|
|
||||||
display: flex; gap: 1.2rem; justify-content: center;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<nav class="footer">
|
<ul>
|
||||||
<ul class="navlist">
|
<li><NuxtLink to="/">home</NuxtLink></li>
|
||||||
<li><NuxtLink to="/">home</NuxtLink></li>
|
<li><NuxtLink to="/info">info</NuxtLink></li>
|
||||||
<li><NuxtLink to="/info">info</NuxtLink></li>
|
<li><NuxtLink to="/maker">maker</NuxtLink></li>
|
||||||
<li><NuxtLink to="/maker">maker</NuxtLink></li>
|
<li><NuxtLink to="/credits">credits</NuxtLink></li>
|
||||||
<li><NuxtLink to="/credits">credits</NuxtLink></li>
|
</ul>
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</template>
|
</template>
|
||||||
@ -1,18 +1,27 @@
|
|||||||
<style>
|
<style>
|
||||||
|
main {
|
||||||
.pagewrap {
|
max-width: 60rem;
|
||||||
height: 100vh;
|
margin: auto;
|
||||||
display: flex; flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: auto;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 60rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="pagewrap">
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
|
</main>
|
||||||
|
<nav>
|
||||||
<navfoot />
|
<navfoot />
|
||||||
</div>
|
</nav>
|
||||||
</template>
|
</template>
|
||||||
@ -1,23 +1,18 @@
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
.mainblock {
|
.indexblock {
|
||||||
max-width: 72rem;
|
|
||||||
width: 100%;
|
display: flex; flex-direction: column; gap: 1.2rem;
|
||||||
display: flex; flex-direction: column; gap: 6rem;
|
|
||||||
padding-top: 2.4rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main class="mainblock">
|
<div class="indexblock">
|
||||||
<MainTitleblock
|
<IndexTitleblock />
|
||||||
pagetitle='The Unity Calendar'
|
<IndexCalblock />
|
||||||
pagesubtitle='An international calendar for coordination.'
|
<IndexCycleblock />
|
||||||
/>
|
<IndexQuestionblock />
|
||||||
<MainCalblock />
|
</div>
|
||||||
<MainCycleblock />
|
|
||||||
<MainQuestionblock />
|
|
||||||
</main>
|
|
||||||
</template>
|
</template>
|
||||||
Loading…
Reference in New Issue
Block a user