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

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

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

            caption {
                caption-side: top;
                color: #bbbbbb;

                span {
                    font-size: 15px;
                }

                select {
                    width: auto;
                    display: inline-block;

                    &:last-child {
                        margin-left: 5px;
                    }
                }
            }

            thead {
                tr {
                    border: 1px solid #333;

                    th {
                        text-align: center;
                        border-bottom: none;
                        background-color: #133a46;
                    }
                }
            }

            tbody {
                tr {

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

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

                    td {
                        font-size: 13px;

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

            tfoot {
                tr td {
                    border-bottom: none;

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

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

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

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

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

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