262 lines
3.9 KiB
Vue
262 lines
3.9 KiB
Vue
<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> |