forgetfulengineer.styl

/* ---------------------------------
 *   自訂義樣式
 * --------------------------------- */

::selection {
    background: $body-background-color; /* 反白背景色 */
    color: $primary; /* 反白文字色 */
}

// 優化網站布局
// widescreen 以上的三欄佈局 (調整欄位寬度)
+widescreen()
    .column.is-3-widescreen
        width 22%
    .column.is-6-widescreen
        width 56%

+from($screen-onek)
    .container
        max-width: 1500px

// 手機佈局隱藏
+until($phone)
    html
        font-size: 13px
    .is-hidden-phone
        display: none !important;

// 跳轉錨點上方留空
html
    scroll-padding-top: 150px
+widescreen()
    html
        scroll-padding-top: 95px

// 動畫
moving_line($size_y)
    background-image: linear-gradient(transparent calc(100% - 1px), $primary 1px)
    background-repeat: no-repeat
    background-size: 0 $size_y
    transition: all .25s ease-in-out
    &:hover
        background-size: 100% 100%

// Nav bar
.navbar
    z-index: 100
    position: sticky
    top: 0

.navbar-menu
    .navbar-item
        &.is-active
            font-weight: bold
    .navbar-link
        &.is-active
            font-weight: bold
        &:not(.is-arrowless)::after
            transition: transform 0.5s;

// 有次選單的category icon 旋轉 (箭頭)
.dropdown-icon-rotate::after
    transform: rotate(-225deg) !important

.navbar-burger
    height: unset
    margin-left: 0

// navbar 正常狀態 (寬螢幕)
+from($navbar-breakpoint)
    .navbar-menu
        .navbar-item
            moving_line(85%)
            &.has-dropdown
                padding: 1.25rem 0rem
        .navbar-dropdown
            left: auto
            min-width: auto
            position: fixed

// navbar 伸縮選單狀態 (觸控裝置)
+until($navbar-breakpoint)
    .navbar-main
        .navbar-item
            padding: 0.5rem 0.75rem
    .navbar-item.has-dropdown
        padding: 0
    .navbar-dropdown
        display: none
        .navbar-item
            margin-left: 1rem
            border-left: 1px solid #dbdbdb

// navbar 伸縮選單狀態 (觸控小螢幕裝置)
+until($phone)
    .navbar-brand
        .navbar-item
            padding: 0.5rem 0.45rem

// 連結、按鈕
a
    transition: all .3s;

.button.is-primary, .button.is-link
    &:hover
        background-color: $primary-light

// 繼續閱讀
.article-more
    border-radius: 7px !important

// 文章 (article)
article
    .gallery-item img
        border-radius: 15px
    .content
        text-align: justify
        .no_justify, h1, h2, h3
            text-align: left

.article-licensing
    border-radius: 15px

// 文章列表 (article.media)
article.media
    .title a
        moving_line(100%)
    // 移除強制大寫
    .categories
        text-transform: none !important;

// 螢光標記
mark
    background-color: #fff1a7;
    border-radius: 3px;
    padding: 2px;

// 健忘筆記
.message
    margin-top: 1rem
    a:not(.button):not(.tag):not(.dropdown-item)
        moving_line(100%)
        color: $primary
        text-decoration: none;

// 表格
.table-scroll
    max-height: 65vh
    overflow-y: auto
    // 表格首行首列釘選
    td:first-child, th:first-child
        position: sticky
        z-index: 1
        left: 0
        background-color: rgb(255, 255, 255)

    thead tr th
        position: sticky
        top: 0
        background-color: rgb(255, 255, 255)

    th:first-child
        z-index: 2

// 程式區塊、iframe
figure.highlight, iframe
    border-radius: 10px

// 圖片light box
.lg-image
    max-width: 60vw !important
    border-radius: 15px

// 目錄
.menu-list a
    &.is-active
        font-weight: bold
.menu-label
    text-transform: none !important;

// 頁數
.pagination-link
    border-radius: 7px

// 側邊欄
+desktop()
    .column-main.is-sticky,
    .column-left.is-sticky,
    .column-right.is-sticky,
    .column-right-shadow.is-sticky
        top: 6rem;
        align-self: flex-start;

+tablet-only()
    .column-main.is-sticky,
    .column-left.is-sticky,
    .column-right.is-sticky,
    .column-right-shadow.is-sticky
        top: 4.5rem;
        align-self: flex-start;

// card
.card
    &:hover
        box-shadow: 0 10px 15px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1)
    .card-image
        margin-bottom: 1rem
        border-radius: 0.8rem

// footer
+mobile()
    footer.footer
        padding: 1.5rem
        .level-end .field
            margin-top: 0rem

// 卷軸
+desktop()
    ::-webkit-scrollbar
        width: 12px

    ::-webkit-scrollbar-thumb
        border-radius: 5px

// icon
i
    margin-right: 5px
#back-to-top
    z-index: 100
    i
        margin-right: 0px

// 複製完成提示
.notification
    position: fixed
    bottom: -15%
    left: 50%
    transform: translateX(-50%);
    color: $white

// related-posts
.related-posts-img
    border-radius: 12px

+from($phone)
    .related-posts-img
        border-radius: 8px

// 其他
.level-item
    align-items: baseline;

.article-tags
    align-items: baseline;