00_project_theme.css

html {
    scroll-behavior: smooth;
}
body {
    background-color: #97baa4;
    overflow-x: hidden;
}
body * {
    font-family: "Noto Serif TC", serif;
}
/* div {
    position: relative;
} */

/* 右下角回頁面上方 */
.scroll_back{
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1000;          /* 一定會顯示出來 */
}
.scroll_back a{
    color: inherit;
    text-decoration: none;
    padding: 10px;
    size: 40px;
}
/**/

/* 以下是 nav 的 css */
body .nav {
    margin-left: 0%;
    margin-right: 0%;
    display: flex;
    justify-content: space-evenly; /* 間隔相等 */
}
nav a {
    color: inherit; /* 移除超連結顏色（繼承上層元素的顏色） */
    text-decoration: none; /* 移除超連結底線 */
    display: block; /* 從 inline 元素改成 block 層級元素 */
    padding: 10px;
}
nav a:hover {
    transition: 0.5s;
    background-color: #232941;
    color:white;
}
nav > ul {
    list-style: none;
    background-color: darkslategrey;
    color: wheat;
    font: 16px "Noto Serif TC";
}
/* 到這邊結束 */

/*側拉式選單*/
a {
    text-decoration: none;
}
.sideMenu {
    width: 170px;
    height: 100%;
    background-color: darkslategrey;
    border-right: 3px solid #d1d1d1;
    display: flex;
    flex-direction: column;
    padding: 50px 0;
    box-shadow: 5px 0 5px hsla(240, 40%, 15%, .6);
    position: relative;
    transform: translateX(-100%);    /* 將 sideMenu 左橫移 100%，使他到螢幕外*/
    transition: 0.5s;                /* 側邊選單收合的時間差 */
    z-index: 2;
}
#sideMenu--active:checked+.sideMenu {
    transform: translateX(0);
}
#sideMenu--active {
    position: absolute;
    opacity: 0;         /*設定 checkbox 絕對定位，透明度是 0，就會隱藏 */
    z-index: -1;        /*為了保險不要讓該功能還選得到，可將其排序往後跳*/
}
nav {
    a {

        display: block;
        color: #fff;
        padding: 20px 10px;
        position: relative;

        &+a::before {
            content: '';
            position: absolute;
            border-top: 1px dashed #ffffff;
            left: 10px;
            right: 10px;
            top: 0px;
            /*使用絕對定位方式編寫，因為 padding已設定左右 10px，所以左右邊要推擠 10px*/
            /*然後使分隔線定位在 top:0px，固定在中間*/
        }
    }
}
.fas{
    font: 16px "Noto Serif TC";
}
/*到這邊結束*/

/*三條線*/
.line {
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: block;
    padding: 16px;
    position: absolute;
    z-index: 2;
    top: 20px;
}
.line .menu, .line .menu::before, .line .menu::after {
    background: white;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    transition:  ease 0.15s, top ease 0.15s 0.15s, transform ease 0.15s;
    width: 20px;
}
.line .menu {
    left: 18px;
    top: 27px;
}
.line .menu::before {
    top: -6px;
}
.line .menu::after {
    top: 6px;
}

.fas{
    font: 16px "Noto Serif TC";
}
/*到這裡結束*/