/* ============================================================
   1. 全局设置
============================================================ */


/*
 * box-sizing: border-box
 *
 * 非常建议所有现代网页都加入。
 *
 * 默认情况下：
 * width = 内容宽度
 *
 * 加上 border-box 后：
 * width = 内容 + padding + border
 *
 * 这样布局更容易计算。
 */
* {
    box-sizing: border-box;
}


/*
 * body 是整个网页
 */
body {

    /* 去掉浏览器默认外边距 */
    margin: 0;

    padding: 0;


    /*
     * 字体
     *
     * Arial：Windows / Linux 常见
     * Helvetica：macOS 常见
     * sans-serif：如果前面的字体都没有，就使用系统无衬线字体
     */
    font-family:
        Arial,
        Helvetica,
        sans-serif;


    /* 正文字体颜色 */
    color: #333333;


    /* 页面背景 */
    background-color: #ffffff;


    /*
     * 行高
     *
     * 1.7 表示：
     * 行距大约为字体大小的 1.7 倍
     *
     * 对学术主页比较舒服
     */
    line-height: 1.7;


    /* 正文字号 */
    font-size: 16px;
}




/* ============================================================
   2. 整体页面布局
============================================================ */

.page-container {

    /*
     * Flex 布局
     *
     * 让 sidebar 和 content 横向排列
     */
    display: flex;


    /*
     * 页面最大宽度
     *
     * 即使显示器很宽，
     * 网页内容也不会无限变宽。
     */
    max-width: 1200px;


    /*
     * margin: 0 auto
     *
     * 上下边距 = 0
     * 左右自动
     *
     * 最终效果：
     * 整个网站水平居中
     */
    margin: 0 auto;


    /*
     * 最小高度为一个完整浏览器窗口
     */
    min-height: 100vh;
}




/* ============================================================
   3. 左侧 Sidebar
============================================================ */

.sidebar {

    /*
     * 固定宽度
     */
    width: 250px;


    /*
     * 防止 sidebar 被 Flex 压缩
     */
    flex-shrink: 0;


    /*
     * 内部留白
     *
     * 上下 50px
     * 左右 30px
     */
    padding: 50px 30px;


    /*
     * 右侧边界线
     */
    border-right: 1px solid #dddddd;


    /*
     * 非纯白背景
     *
     * 很浅的灰色
     */
    background-color: #fafafa;
}




/* ============================================================
   4. 左侧个人信息
============================================================ */

.profile-block {

    margin-bottom: 45px;
}


.profile-name {

    /*
     * 去掉 h1 默认上下间距
     */
    margin: 0 0 12px 0;


    font-size: 25px;

    font-weight: 600;

    line-height: 1.3;

    color: #222222;
}


.profile-title {

    margin: 0 0 6px 0;

    font-size: 14px;

    color: #555555;

    line-height: 1.5;
}


.profile-affiliation {

    margin: 0;

    font-size: 14px;

    color: #777777;

    line-height: 1.5;
}




/* ============================================================
   5. 左侧导航菜单
============================================================ */

.menu {

    /*
     * 将菜单变成 Flex
     */
    display: flex;


    /*
     * 纵向排列
     *
     * 默认 flex 是横向
     * column 改成上下排列
     */
    flex-direction: column;


    margin-bottom: 50px;
}




.menu a {

    /*
     * 去掉超链接默认下划线
     */
    text-decoration: none;


    color: #333333;


    /*
     * 上下各 10px
     */
    padding: 10px 0;


    font-size: 16px;


    /*
     * 每个菜单之间放一条非常浅的线
     */
    border-bottom: 1px solid #eeeeee;


    /*
     * 颜色变化动画
     */
    transition: color 0.2s ease;
}




/*
 * 鼠标移动到菜单上
 */
.menu a:hover {

    color: #0066cc;
}




/*
 * 当前页面
 *
 * 首页中：
 *
 * <a href="index.html" class="active">
 *
 * 所以 Home 会显示为蓝色和粗体
 */
.menu a.active {

    color: #0066cc;

    font-weight: 600;
}




/* ============================================================
   6. Sidebar 底部
============================================================ */

.sidebar-footer {

    font-size: 13px;

    color: #777777;
}


.sidebar-footer p {

    margin: 0 0 3px 0;
}


.sidebar-footer a {

    color: #555555;

    text-decoration: none;

    word-break: break-word;
}


.sidebar-footer a:hover {

    color: #0066cc;

    text-decoration: underline;
}




/* ============================================================
   7. 右侧正文
============================================================ */

.content {

    /*
     * flex: 1
     *
     * Sidebar 固定 250px，
     * 剩余空间全部给 content
     */
    flex: 1;


    /*
     * 正文留白
     */
    padding: 50px 70px 80px 70px;


    /*
     * 防止正文太宽
     */
    min-width: 0;
}




/* ============================================================
   8. Section
============================================================ */

.section {

    margin-bottom: 50px;
}




/* ============================================================
   9. 标题
============================================================ */

.section h2 {

    margin-top: 0;

    margin-bottom: 22px;


    /*
     * 标题大小
     */
    font-size: 24px;


    /*
     * 不是特别粗
     */
    font-weight: 600;


    color: #222222;


    /*
     * 标题下面增加一条线
     */
    padding-bottom: 8px;

    border-bottom: 1px solid #dddddd;
}




/* ============================================================
   10. 正文段落
============================================================ */

.section p {

    margin-top: 0;

    margin-bottom: 16px;


    /*
     * 文本两端对齐
     *
     * 学术主页常见
     */
    text-align: justify;
}




/* ============================================================
   11. Research Interests
============================================================ */

.interest-list {

    margin: 0;

    padding-left: 22px;
}


.interest-list li {

    margin-bottom: 7px;
}




/* ============================================================
   12. News
============================================================ */

.news-list {

    display: flex;

    flex-direction: column;

    gap: 14px;
}




.news-item {

    /*
     * 每条新闻本身也使用 Flex
     *
     * 左边日期
     * 右边新闻
     */
    display: flex;


    /*
     * 日期和新闻之间距离
     */
    gap: 20px;
}




.news-date {

    /*
     * 日期固定宽度
     *
     * 防止每条新闻文本起始位置不一样
     */
    width: 75px;

    flex-shrink: 0;


    color: #555555;

    font-weight: 600;
}




.news-content {

    flex: 1;
}




/* ============================================================
   13. 普通超链接
============================================================ */

a {

    color: #0066cc;
}


a:hover {

    color: #004999;
}




/* ============================================================
   14. 平板适配
============================================================ */

@media (max-width: 900px) {

    .sidebar {

        width: 220px;

        padding: 40px 25px;
    }


    .content {

        padding: 40px 40px 70px 40px;
    }

}




/* ============================================================
   15. 手机适配
============================================================ */

@media (max-width: 700px) {

    /*
     * 手机上不再左右排列
     *
     * 改成：
     *
     * sidebar
     * -------
     * content
     */
    .page-container {

        flex-direction: column;
    }


    .sidebar {

        width: 100%;

        padding: 25px;


        border-right: none;

        border-bottom: 1px solid #dddddd;
    }


    .profile-block {

        margin-bottom: 20px;
    }


    /*
     * 手机上的导航菜单改成横向
     */
    .menu {

        flex-direction: row;

        flex-wrap: wrap;

        gap: 8px 20px;

        margin-bottom: 20px;
    }


    .menu a {

        padding: 4px 0;

        border-bottom: none;
    }


    .sidebar-footer {

        display: none;
    }


    .content {

        padding: 30px 25px 50px 25px;
    }


    /*
     * 手机上 News 改成上下显示
     */
    .news-item {

        display: block;
    }


    .news-date {

        display: block;

        width: auto;

        margin-bottom: 2px;
    }

}