bitforum-frontend/app/styles/common.module.scss

.container {
    display: grid;
    height: 100vh;
    grid-template-rows: minmax(auto, 50px) 2fr auto;

    // PC
    @media (min-width: 1124px) {
        grid-template-areas: "header header" "main aside" "footer aside";
        grid-template-columns: 1fr minmax(200px, 400px);
    }

    // Table
    @media (max-width: 1125px) {
        grid-template-areas: "header" "main" "footer";
        grid-template-columns: 1fr;
    }

    > .header {
        grid-area: header;
        height: 56px;
        background: #f4f4f4;
        border-bottom: 1px solid #dedede;

        // 로고
        > a {
            flex-basis: 137px;
            font-size: inherit;
            padding-right: 20px;
        }

        // 메뉴
        nav {
            font-weight: 500;

            ul {
                li {
                    a, button {
                        &:hover {
                            font-weight: 700;
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }

    // 좌측 내용
    > .main {
		position: relative;
        grid-area: main;
        overflow-y: auto;
        border-bottom: 1px solid #dedede;
    }

    // 우측 내용
    > .aside {
        grid-area: aside;
        transition: transform 0.3s ease;

        @media (min-width: 1124px) {
            position: relative;
            transform: translateX(0);
            border-left: 1px solid #dedede;
        }

        // 테블릿일 때
        @media (max-width: 1125px) {
            position: fixed;
            top: 56px;
            right: 0;
            width: min(400px, 100vw);
            height: 100vh;
            z-index: 1000;
            transform: translateX(100%);
        }
    }

    // 하단 내용
    > .footer {
        grid-area: footer;
        font-size: 0.688rem;
        padding: 4px;

        ol {
            display: flex;
            flex-flow: row;
            justify-content: space-between;

            li {
                &:nth-of-type(1) { // 최근 게시글
                    flex-grow: 1;
                }

                &:nth-of-type(2) { // 공지사항
                    flex-grow: 1;
                }

                &:nth-of-type(3) { // Copyright
                    flex-grow: 0;
                }
            }
        }
    }

    // 페이지네이션
	#pagination {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		padding: 0.938rem 0 1.25rem 0;

		button {
			margin: 0 0.125rem;
			padding: 0.25rem 0.625rem;
			border-radius: 3px;

			&:hover {
				background: #f0f0f0;
				outline: 1px solid #dedede;
			}

			&.active {
				background: #f0f0f0;
				outline: 1px solid #b3b3b3;
				pointer-events: none;
			}
		}
	}
}