Change some styling on meme page

Signed-off-by: Skylar "The Cobra" Widulski <cobra@vern.cc>
This commit is contained in:
Skylar "The Cobra" Widulski 2023-12-05 17:28:52 -05:00
parent d8648530b7
commit 3a7dbb8168
Signed by: cobra
GPG Key ID: 4FD8F812083FF6F9
2 changed files with 34 additions and 15 deletions

View File

@ -119,6 +119,12 @@
(li (@ (class "episodes"))
(a (@ (href "/episodes"))))))))
(define footer
`(footer
(div (@ (class "box footer"))
(p (a (@ (href "http://git.vern.cc/cobra/MeMe"))
"Source Code")))))
(define (leaderboard-as-sxml leaderboard)
`(div (@ (class "leaderboard box"))
(ul (@ (class "leaderboard"))
@ -156,11 +162,12 @@
(define (meme-as-sxml meme)
`(div
(div (@ (class "box meme"))
(img (@ (src ,(proxy (cadr meme)))))
(h1 ,(car meme))
,(html->shtml (caddr meme))
,(html->shtml (cadddr meme))
,(html->shtml (car (list-tail meme 4)))
(img (@ (src ,(proxy (cadr meme))))))
(div (@ (class "subdiv"))
,(html->shtml (caddr meme))
,(html->shtml (cadddr meme))
,(html->shtml (car (list-tail meme 4)))))
(div (@ (class "box meme-body"))
,(map (lambda (s)
(html->shtml (string-replace-substring s "https://knowyourmeme.com" "")))
@ -249,7 +256,8 @@
(body
,heading
(center
(h1 (@ (class "error")) ,(number->string code)))))))
(h1 (@ (class "error")) ,(number->string code)))
,footer))))
(define (newsfeed-template body)
(shtml->html
@ -263,11 +271,13 @@
,(pagination-as-sxml (get-pagination body)))
(div (@ (class "right"))
,(sidebar-gallery-as-sxml (get-sidebar-gallery body))
,(sidebar-trending-as-sxml (get-sidebar-trending body)))))))
,(sidebar-trending-as-sxml (get-sidebar-trending body)))
,footer))))
(define (meme-template body)
(shtml->html
`(html ,(html-head "MeMe")
(body
,heading
,(meme-as-sxml (get-meme body))))))
,(meme-as-sxml (get-meme body))
,footer))))

View File

@ -61,7 +61,8 @@ a {
.trending.box,
.leaderboard.box,
.heading.box {
.heading.box,
.footer.box {
line-height: 0;
display: flex;
flex-wrap: wrap;
@ -178,9 +179,15 @@ table.trending-images img {
.meme.box {
width: 93%;
max-height: 8em;
min-height: 8em;
padding: 0 2%;
padding-bottom: 1em;
position: relative;
}
.meme.box .subdiv {
bottom: 1em;
position: absolute;
}
.meme-body.box {
@ -191,21 +198,23 @@ table.trending-images img {
.meme.box h1 {
margin-bottom: 0.5em;
margin-top: 0.3em;
max-width: 65%;
}
.meme.box img {
max-height: 7em;
max-height: 100%;
width: 35%;
float: right;
margin-top: -7em;
margin-top: 1em;
}
.meme.box p, .meme.box h5 {
margin: 0;
.meme.box .subdiv p, .meme.box .subdiv h5 {
margin: 0.5em 0;
line-height: 1.1em;
}
.meme.box h5 {
margin-bottom: 0.5em;
.meme.box .subdiv h5 {
margin-bottom: 0.75em;
}
.meme-body.box img {