blog/resources/sass/mobile/board/index.scss

// 게시판 목록, 사진/동영상, 공지사항, 검색

.mce-label.mce-autoscroll {overflow: hidden !important;}

#board {
    padding: calc(var(--bs-gutter-x) * 0.5);

    .board-name {
        font-weight: bold;
        margin-bottom: 0;
    }

    /* 게시판 목록 */
    #boardList {
        box-sizing: border-box;

        .head {
            margin-bottom: 10px;
        }

        .body {
            table {
                margin-left: auto;
                margin-right: auto;
                border: 1px solid #222c36;

                caption {
                    caption-side: top;

                    span {
                        font-size: 15px;
                    }

                    select {
                        width: inherit;
                    }
                }

                tbody {
                    tr {
                        td {
                            vertical-align: middle;

                            // 일반 게시글
                            p {
                                font-size: 0.813rem;
                                margin-bottom: 5px;

                                label {
                                    margin-right: 5px;

                                    a {
                                        color: #cbd5e0;
                                    }
                                }

                                del, a {
                                    font-size: 0.875rem;
                                    font-weight: normal;
                                }

                                var {
                                    color: #aa0000;
                                    font-style: normal;
                                    margin-left: 3px;
                                    letter-spacing: -1px;
                                    vertical-align: middle;
                                }

                                i {
                                    color: #cbd5e0;
                                    margin-left: 3px;
                                    vertical-align: -1px;
                                }

                                span {
                                    font-size: 0.625rem;
                                    margin-left: 3px;
                                    vertical-align: middle;
                                }
                            }

                            ul {
                                margin: 0;
                                padding: 0;

                                li {
                                    display: inline-block;
                                    font-size: 0.75rem;

                                    &:after {
                                        content: "·";
                                        padding: 0 3px 0 7px;
                                    }

                                    &:last-child:after {
                                        content: "";
                                        padding: 0;
                                    }
                                }
                            }

                            // 썸네일
                            .thumbnail {
                                display: block;
                                position: relative;
                                width: 100%;
                                height: 100%;
                                overflow: hidden;
                                min-height: 50px;

                                > img {
                                    position: absolute;
                                    width: 100%;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                }
                            }
                        }
                    }
                }
            }

            // 사진/동영상
            > section {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;

                // 사진 영역
                figure {
                    box-sizing: border-box;
                    text-align: center;
                    flex-basis: auto;

                    > a {
                        position: relative;
                        display: block;

                        img {
                            position: absolute;
                            width: 100%;
                            top: 0;
                            left: 0;

                            &:hover {
                                filter: drop-shadow(2px 2px 4px #969696);
                            }
                        }
                    }

                    figcaption {
                        margin: 5px 0;

                        p {
                            margin-bottom: 0.125rem;
                        }

                        > a {
                            display: initial;
                        }
                        
                        label {
                            margin-right: 5px;

                            a {
                                color: #cbd5e0;
                            }
                        }

                        del, a {
                            font-size: 14px;
                            font-weight: normal;
                            color: #b3b3b3;
                        }

                        var {
                            color: #aa0000;
                            font-style: normal;
                            margin-left: 3px;
                            letter-spacing: -1px;
                            vertical-align: middle;
                        }

                        i {
                            color: #cbd5e0;
                            margin-left: 3px;
                            vertical-align: -1px;
                        }

                        span {
                            font-size: 10px;
                            margin-left: 3px;
                            vertical-align: middle;
                        }
                    }

                    // 작성자
                    strong {
                        display: block;
                        font-size: 0.813rem;
                        margin-bottom: 3px;
                    }

                    // 작성일자
                    small {
                        font-size: 0.688rem;
                    }

                    ul {
                        list-style: none;
                        padding-left: 0;
                        margin: 0;

                        li {
                            display: inline-block;
                            font-size: 13px;

                            &:first-child::before {display: none;}
                            &::before {
                                content: '';
                                display: inline-block;
                                width: 2px;
                                height: 2px;
                                margin: 0 5px 4px 2px;
                                border-radius: 2px;
                                background-color: #616670;
                            }
                        }
                    }
                }
            }
        }

        .foot {
            margin-top: 10px;
        }
    }
}