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

/* 최근 게시글 */
#latest {
    box-sizing: border-box;

    table {
        > &:not(:first-child) {
            border-top: none;
        }

        margin-left: auto;
        margin-right: auto;
        border: 1px solid #222c36;

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

                    // 일반 게시글
                    p {
                        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;
                    }
                }
            }
        }
    }
}