88 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			88 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
/* 
 | 
						|
 *
 | 
						|
 * 日志
 | 
						|
 * 
 | 
						|
 * 按照顺序
 | 
						|
 * 1.默认
 | 
						|
 * 2.深色
 | 
						|
 * 3.媒体查询
 | 
						|
 *   - 870px
 | 
						|
 *   - 2048px
 | 
						|
*/
 | 
						|
@import "../base/variables";
 | 
						|
.journals {
 | 
						|
    >.name {
 | 
						|
        font-size: 1.5rem;
 | 
						|
        font-weight: bold;
 | 
						|
        line-height: 2.2rem;
 | 
						|
        color: #262626;
 | 
						|
    }
 | 
						|
 | 
						|
    >ul {
 | 
						|
        >li {
 | 
						|
            >.content {
 | 
						|
                font-size: 1rem;
 | 
						|
                color: #595959;
 | 
						|
            }
 | 
						|
 | 
						|
            >.info {
 | 
						|
                display: flex;
 | 
						|
                justify-content: flex-end;
 | 
						|
                font-size: 0.75rem;
 | 
						|
                color: #8c8c8c;
 | 
						|
            }
 | 
						|
        }
 | 
						|
    }
 | 
						|
 | 
						|
    // =========== 深色 ===========
 | 
						|
    @include darkmode {
 | 
						|
        >.name {
 | 
						|
            color: #dbdbdb;
 | 
						|
        }
 | 
						|
 | 
						|
        >ul {
 | 
						|
            >li {
 | 
						|
                >.content {
 | 
						|
                    color: #acacac;
 | 
						|
                }
 | 
						|
 | 
						|
                >.info {
 | 
						|
                    color: #7d7d7d;
 | 
						|
                }
 | 
						|
            }
 | 
						|
        }
 | 
						|
    }
 | 
						|
 | 
						|
    // =========== 移动端 ===========
 | 
						|
    @media (max-width: 870px) {
 | 
						|
        >.name {
 | 
						|
            padding: 2.5% 0;
 | 
						|
            text-align: center;
 | 
						|
        }
 | 
						|
        >ul {
 | 
						|
            >li {
 | 
						|
                padding: 2.5% 0;
 | 
						|
 | 
						|
                >.info {
 | 
						|
                    padding: 1% 0;
 | 
						|
                }
 | 
						|
            }
 | 
						|
        }
 | 
						|
    }
 | 
						|
 | 
						|
    // =========== 桌面端 ===========
 | 
						|
    @media (min-width: 870px) and (max-width: 2048px) {
 | 
						|
        >.name {
 | 
						|
            padding: 0.5rem 0;
 | 
						|
        }
 | 
						|
        >ul {
 | 
						|
            >li {
 | 
						|
                padding: 1rem 0.1rem;
 | 
						|
 | 
						|
                >.info {
 | 
						|
                    padding: 1rem 0;
 | 
						|
                }
 | 
						|
            }
 | 
						|
        }
 | 
						|
    }
 | 
						|
} |