dnitza/adamantium
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add timeline to timemachine page

Browse Source
This commit is contained in:
Daniel Nitsikopoulos
2023-12-17 08:57:06 +11:00
parent 5903915810
commit abe2e53b32
6 changed files with 407 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
app/assets/builds/tailwind.css
View File

@@ -1028,6 +1028,46 @@ video {
top: -1rem;
}
.top-1 {
top: 0.25rem;
}
.-top-10 {
top: -2.5rem;
}
.bottom-10 {
bottom: 2.5rem;
}
.bottom-5 {
bottom: 1.25rem;
}
.bottom-7 {
bottom: 1.75rem;
}
.bottom-4 {
bottom: 1rem;
}
.bottom-2 {
bottom: 0.5rem;
}
.bottom-3 {
bottom: 0.75rem;
}
.bottom-1 {
bottom: 0.25rem;
}
.bottom-0 {
bottom: 0px;
}
.z-40 {
z-index: 40;
}
@@ -1068,6 +1108,10 @@ video {
margin: 0.5rem;
}
.m-4 {
margin: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
@@ -1166,10 +1210,6 @@ video {
margin-top: 1.5rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.block {
display: block;
}
@@ -1198,6 +1238,10 @@ video {
display: none;
}
.h-1 {
height: 0.25rem;
}
.h-16 {
height: 4rem;
}
@@ -1222,10 +1266,28 @@ video {
height: 2rem;
}
.h-max {
height: -moz-max-content;
height: max-content;
}
.h-4 {
height: 1rem;
}
.h-3 {
height: 0.75rem;
}
.max-h-12 {
max-height: 3rem;
}
.max-h-fit {
max-height: -moz-fit-content;
max-height: fit-content;
}
.max-h-full {
max-height: 100%;
}
@@ -1361,6 +1423,10 @@ video {
grid-auto-flow: column;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -1381,10 +1447,6 @@ video {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
@@ -1405,6 +1467,10 @@ video {
align-content: center;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
@@ -1429,6 +1495,10 @@ video {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-x-1 {
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
@@ -1445,6 +1515,12 @@ video {
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.overflow-auto {
overflow: auto;
}
@@ -1502,6 +1578,10 @@ video {
border-top-width: 1px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-solid {
border-style: solid;
}
@@ -1640,11 +1720,21 @@ video {
background-color: rgb(253 242 248 / var(--tw-bg-opacity));
}
.bg-pink-800 {
--tw-bg-opacity: 1;
background-color: rgb(157 23 77 / var(--tw-bg-opacity));
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1655,11 +1745,6 @@ video {
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.bg-opacity-75 {
--tw-bg-opacity: 0.75;
}
@@ -1767,6 +1852,10 @@ video {
padding-top: 1rem;
}
.pt-0 {
padding-top: 0px;
}
.text-left {
text-align: left;
}
@@ -2167,6 +2256,10 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: rgb(30 58 138 / var(--tw-text-opacity));
}
.hover\:block:hover {
display: block;
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
@@ -2236,6 +2329,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
}
.hover\:bg-pink-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(244 114 182 / var(--tw-bg-opacity));
}
.hover\:bg-red-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -2335,6 +2433,15 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
outline-offset: 2px;
}
.group:hover .group-hover\:block {
display: block;
}
.group:hover .group-hover\:bg-pink-400 {
--tw-bg-opacity: 1;
background-color: rgb(244 114 182 / var(--tw-bg-opacity));
}
.prose-p\:m-1 :is(:where(p):not(:where([class~="not-prose"] *))) {
margin: 0.25rem;
}
@@ -2481,6 +2588,31 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
border-color: rgb(30 41 59 / var(--tw-border-opacity));
}
.dark\:border-indigo-600 {
--tw-border-opacity: 1;
border-color: rgb(79 70 229 / var(--tw-border-opacity));
}
.dark\:border-indigo-200 {
--tw-border-opacity: 1;
border-color: rgb(199 210 254 / var(--tw-border-opacity));
}
.dark\:border-indigo-800 {
--tw-border-opacity: 1;
border-color: rgb(55 48 163 / var(--tw-border-opacity));
}
.dark\:border-indigo-100 {
--tw-border-opacity: 1;
border-color: rgb(224 231 255 / var(--tw-border-opacity));
}
.dark\:border-indigo-300 {
--tw-border-opacity: 1;
border-color: rgb(165 180 252 / var(--tw-border-opacity));
}
.dark\:bg-amber-400 {
--tw-bg-opacity: 1;
background-color: rgb(251 191 36 / var(--tw-bg-opacity));
@@ -2525,11 +2657,21 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-200 {
--tw-bg-opacity: 1;
background-color: rgb(199 210 254 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-400 {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-800 {
--tw-bg-opacity: 1;
background-color: rgb(55 48 163 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-950 {
--tw-bg-opacity: 1;
background-color: rgb(30 27 75 / var(--tw-bg-opacity));
@@ -2675,6 +2817,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: rgb(250 204 21 / var(--tw-text-opacity));
}
.dark\:text-indigo-200 {
--tw-text-opacity: 1;
color: rgb(199 210 254 / var(--tw-text-opacity));
}
.dark\:shadow-pink-200 {
--tw-shadow-color: #fbcfe8;
--tw-shadow: var(--tw-shadow-colored);
@@ -2775,6 +2922,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
background-color: rgb(162 28 175 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-indigo-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-orange-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(154 52 18 / var(--tw-bg-opacity));
@@ -2830,6 +2982,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: rgb(71 85 105 / var(--tw-text-opacity));
}
.group:hover .dark\:group-hover\:bg-indigo-400 {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.dark\:prose-a\:text-blue-600 :is(:where(a):not(:where([class~="not-prose"] *))) {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -2857,6 +3014,30 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
}
@media (min-width: 768px) {
.md\:col-span-14 {
grid-column: span 14 / span 14;
}
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
.md\:col-span-1 {
grid-column: span 1 / span 1;
}
.md\:col-span-15 {
grid-column: span 15 / span 15;
}
.md\:col-span-13 {
grid-column: span 13 / span 13;
}
.md\:col-span-3 {
grid-column: span 3 / span 3;
}
.md\:mx-0 {
margin-left: 0px;
margin-right: 0px;
@@ -2890,6 +3071,10 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
flex: 1 1 auto;
}
.md\:grid-cols-16 {
grid-template-columns: repeat(16, minmax(0, 1fr));
}
.md\:pt-8 {
padding-top: 2rem;
}

8
app/repos/post_repo.rb
View File

@@ -154,6 +154,14 @@ module Adamantium
.to_a
end
def all_posts
posts
.where(post_type: ["post", "bookmark"])
.published
.order(Sequel.desc(:published_at))
.to_a
end
def for_rss
posts
.where(post_type: "post", location: nil)

33
app/templates/timemachine/show.html.slim
View File

@@ -1,6 +1,6 @@
div class="prose dark:prose-invert w-full max-w-6xl mx-auto px-4 m-4"
div class="grid md:grid-cols-12 gap-5 p-4 m-2"
div class="md:col-span-8 p-4"
div class="max-w-screen-md mx-auto px-4 m-4 h-max"
div class="grid md:grid-cols-16 gap-5 p-4 m-2"
div class="prose dark:prose-invert md:col-span-13 p-4"
h2 class="mt-0" = display_date
a href="/timemachine/#{prev_date}" ← #{prev_date}
@@ -13,26 +13,24 @@ div class="prose dark:prose-invert w-full max-w-6xl mx-auto px-4 m-4"
- if posts.count > 0
div class="mt-4"
- posts.each_with_index do |post, index|
div class="#{"border-t-2" if index == 0} border-b-2 border-gray-200"
div class="#{"border-t-2" if index == 0} border-b-2 border-gray-200 dark:border-indigo-300"
- if post.photos.count == 0
a href="/post/#{post.slug}"
h3= post.name
== post.excerpt
- else
div class="grid grid-cols-3 gap-2"
div class="grid grid-cols-3 gap-2 pb-4"
- posts.each do |post|
- if post.photos.count > 0
- post.photos.each do |photo|
a href="/post/#{post.slug}"
img class="mb-0 rounded" src="#{photo["value"]}"
a href="/post/#{post.slug}"
= post.name
= post.name
- else
p No posts
aside class="md:col-span-4 md:pt-0 p-2"
- if bookmarks.count > 0
h3 class="mt-0" Bookmarks
h3 class="" Bookmarks
div
ul
@@ -42,7 +40,7 @@ div class="prose dark:prose-invert w-full max-w-6xl mx-auto px-4 m-4"
= bookmark.name
- if podcasts.count > 0
h3 class="mt-0" Podcasts
h3 class="" Podcasts
div
ul
@@ -53,4 +51,17 @@ div class="prose dark:prose-invert w-full max-w-6xl mx-auto px-4 m-4"
div
small = podcast.podcast_name
/ h3 class="mt-0" Music
/ h3 class="mt-0" Reading
/ h3 class="mt-0" Reading
aside class="md:col-span-3 p-2 md:block hidden"
div class="flex flex-col items-start space-y-1 max-h-fit w-full"
- total = posts_by_month.count
- posts_by_month.each_with_index do |(post_month, count), index|
-if index == 0
p class="text-pink-800 dark:text-indigo-300"
= post_month
a class="group block h-3 w-full relative" href="/timemachine/#{post_month}"
div style="width: #{4 * (count * 3)}px" class="float-left rounded-full h-3 #{"bg-pink-800 dark:bg-indigo-800" if current_path == "/timemachine/#{post_month}"} bg-pink-100 group-hover:bg-pink-400 dark:bg-indigo-200 dark:group-hover:bg-indigo-400 inline-block"
span style="margin-left: #{5 + (4 * (count * 3))}px" class="hidden group-hover:block text-pink-400 dark:text-indigo-200 text-sm absolute h-3 p-0 block bottom-1" = post_month
- if index == total - 1
p class="text-pink-800 dark:text-indigo-300"
= post_month

17
app/views/timemachine/show.rb
View File

@@ -45,11 +45,28 @@ module Adamantium
.strftime("%Y/%m/%d")
end
expose :current_date do |year:, month:, day:|
"#{year}/#{month}/#{day}"
end
expose :prev_date do |date|
TimeMath.day.advance(date.value, -1)
.strftime("%Y/%m/%d")
end
expose :posts_by_month do
post_tally = Hash.new(0)
posts = post_repo.all_posts.each_with_object(post_tally) do |post, memo|
memo[post.published_at.strftime("%Y/%m/%d")] += 1
end
podcast_scrobble_repo.listing.each do |scrobble|
posts[scrobble.listened_at.strftime("%Y/%m/%d")] += 1
end
posts
end
private_expose :date do |year:, month:, day:|
DateTime.parse("#{year}-#{month}-#{day}")
end

163
public/assets/admin/app.css
View File

@@ -735,6 +735,36 @@ video {
.-top-4 {
top: -1rem;
}
.top-1 {
top: 0.25rem;
}
.-top-10 {
top: -2.5rem;
}
.bottom-10 {
bottom: 2.5rem;
}
.bottom-5 {
bottom: 1.25rem;
}
.bottom-7 {
bottom: 1.75rem;
}
.bottom-4 {
bottom: 1rem;
}
.bottom-2 {
bottom: 0.5rem;
}
.bottom-3 {
bottom: 0.75rem;
}
.bottom-1 {
bottom: 0.25rem;
}
.bottom-0 {
bottom: 0px;
}
.z-40 {
z-index: 40;
}
@@ -765,6 +795,9 @@ video {
.m-2 {
margin: 0.5rem;
}
.m-4 {
margin: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
@@ -839,9 +872,6 @@ video {
.mt-6 {
margin-top: 1.5rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.block {
display: block;
}
@@ -863,6 +893,9 @@ video {
.hidden {
display: none;
}
.h-1 {
height: 0.25rem;
}
.h-16 {
height: 4rem;
}
@@ -881,9 +914,23 @@ video {
.h-8 {
height: 2rem;
}
.h-max {
height: -moz-max-content;
height: max-content;
}
.h-4 {
height: 1rem;
}
.h-3 {
height: 0.75rem;
}
.max-h-12 {
max-height: 3rem;
}
.max-h-fit {
max-height: -moz-fit-content;
max-height: fit-content;
}
.max-h-full {
max-height: 100%;
}
@@ -986,6 +1033,9 @@ video {
.grid-flow-col {
grid-auto-flow: column;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -1001,9 +1051,6 @@ video {
.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
@@ -1019,6 +1066,9 @@ video {
.content-center {
align-content: center;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
@@ -1037,6 +1087,9 @@ video {
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-x-1 {
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
@@ -1050,6 +1103,11 @@ video {
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.overflow-auto {
overflow: auto;
}
@@ -1093,6 +1151,9 @@ video {
.border-t {
border-top-width: 1px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-solid {
border-style: solid;
}
@@ -1203,10 +1264,18 @@ video {
--tw-bg-opacity: 1;
background-color: rgb(253 242 248 / var(--tw-bg-opacity));
}
.bg-pink-800 {
--tw-bg-opacity: 1;
background-color: rgb(157 23 77 / var(--tw-bg-opacity));
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1215,10 +1284,6 @@ video {
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.bg-opacity-75 {
--tw-bg-opacity: 0.75;
}
@@ -1301,6 +1366,9 @@ video {
.pt-4 {
padding-top: 1rem;
}
.pt-0 {
padding-top: 0px;
}
.text-left {
text-align: left;
}
@@ -1681,6 +1749,9 @@ h6 a {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
}
.hover\:block:hover {
display: block;
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
@@ -1736,6 +1807,10 @@ h6 a {
--tw-bg-opacity: 1;
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
}
.hover\:bg-pink-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(244 114 182 / var(--tw-bg-opacity));
}
.hover\:bg-red-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1814,6 +1889,13 @@ h6 a {
outline: 2px solid transparent;
outline-offset: 2px;
}
.group:hover .group-hover\:block {
display: block;
}
.group:hover .group-hover\:bg-pink-400 {
--tw-bg-opacity: 1;
background-color: rgb(244 114 182 / var(--tw-bg-opacity));
}
.prose-p\:m-1 :is(:where(p):not(:where([class~=not-prose] *))) {
margin: 0.25rem;
}
@@ -1927,6 +2009,26 @@ h6 a {
--tw-border-opacity: 1;
border-color: rgb(30 41 59 / var(--tw-border-opacity));
}
.dark\:border-indigo-600 {
--tw-border-opacity: 1;
border-color: rgb(79 70 229 / var(--tw-border-opacity));
}
.dark\:border-indigo-200 {
--tw-border-opacity: 1;
border-color: rgb(199 210 254 / var(--tw-border-opacity));
}
.dark\:border-indigo-800 {
--tw-border-opacity: 1;
border-color: rgb(55 48 163 / var(--tw-border-opacity));
}
.dark\:border-indigo-100 {
--tw-border-opacity: 1;
border-color: rgb(224 231 255 / var(--tw-border-opacity));
}
.dark\:border-indigo-300 {
--tw-border-opacity: 1;
border-color: rgb(165 180 252 / var(--tw-border-opacity));
}
.dark\:bg-amber-400 {
--tw-bg-opacity: 1;
background-color: rgb(251 191 36 / var(--tw-bg-opacity));
@@ -1962,10 +2064,18 @@ h6 a {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-200 {
--tw-bg-opacity: 1;
background-color: rgb(199 210 254 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-400 {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-800 {
--tw-bg-opacity: 1;
background-color: rgb(55 48 163 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-950 {
--tw-bg-opacity: 1;
background-color: rgb(30 27 75 / var(--tw-bg-opacity));
@@ -2082,6 +2192,10 @@ h6 a {
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity));
}
.dark\:text-indigo-200 {
--tw-text-opacity: 1;
color: rgb(199 210 254 / var(--tw-text-opacity));
}
.dark\:shadow-pink-200 {
--tw-shadow-color: #fbcfe8;
--tw-shadow: var(--tw-shadow-colored);
@@ -2162,6 +2276,10 @@ h6 a {
--tw-bg-opacity: 1;
background-color: rgb(162 28 175 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-indigo-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-orange-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(154 52 18 / var(--tw-bg-opacity));
@@ -2206,6 +2324,10 @@ h6 a {
--tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity));
}
.group:hover .dark\:group-hover\:bg-indigo-400 {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.dark\:prose-a\:text-blue-600 :is(:where(a):not(:where([class~=not-prose] *))) {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -2228,6 +2350,24 @@ h6 a {
}
}
@media (min-width: 768px) {
.md\:col-span-14 {
grid-column: span 14 / span 14;
}
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
.md\:col-span-1 {
grid-column: span 1 / span 1;
}
.md\:col-span-15 {
grid-column: span 15 / span 15;
}
.md\:col-span-13 {
grid-column: span 13 / span 13;
}
.md\:col-span-3 {
grid-column: span 3 / span 3;
}
.md\:mx-0 {
margin-left: 0px;
margin-right: 0px;
@@ -2253,6 +2393,9 @@ h6 a {
.md\:flex-auto {
flex: 1 1 auto;
}
.md\:grid-cols-16 {
grid-template-columns: repeat(16, minmax(0, 1fr));
}
.md\:pt-8 {
padding-top: 2rem;
}

9
tailwind.config.js
View File

@@ -16,6 +16,15 @@ module.exports = {
'5xl': '3.052rem',
},
extend: {
gridTemplateColumns: {
'16': 'repeat(16, minmax(0, 1fr))',
},
gridColumn: {
'span-13': 'span 13 / span 13',
'span-14': 'span 14 / span 14',
'span-15': 'span 15 / span 15',
'span-16': 'span 16 / span 16',
},
boxShadow: {
'solid': `10px 10px 1px 2px`
},