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

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

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

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

        thead {
            tr {
                background-color: #133a46;
                border: 1px solid #333;

                th {
                    text-align: center;
                    border-bottom: none;
                }
            }
        }

        tbody {
            tr {

                &:hover,
                &:focus {
                    background-color: #1a1e21;
                }

                th, td {
                    text-align: center;
                    vertical-align: middle;
                }

                td {
                    font-size: 13px;

                    label {
                        a {
                            color: #cbd5e0;
                        }
                    }

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

                    var {
                        color: #aa0000;
                        font-style: initial;
                        letter-spacing: -1px;
                        margin-right: 5px;
                    }

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

                    span {
                        font-size: 10px;
                        vertical-align: text-bottom;
                    }

                    // 사진/동영상
                    figure {
                        box-sizing: border-box;
                        margin: 0;
                        text-align: center;

                        > a {
                            position: relative;
                            display: block;
                            overflow: hidden;
                            min-width: 140px;
                            min-height: 140px;
                            max-height: 160px;
                            margin: 0;

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

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

                            &:hover,
                            &:focus {
                                text-decoration: underline;
                            }
                        }

                        figcaption {
                            margin: 5px 0;

                            > a {
                                display: initial;

                                &:focus,
                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                        }

                        strong {
                            font-weight: 500;
                            margin-bottom: 3px;
                            display: block;
                        }

                        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;
                                }
                            }
                        }
                    }
                }
            }
        }

        tfoot {
            tr td {
                border-bottom: none;

                nav ul {
                    margin-bottom: 0;
                }
            }
        }
    }
}