laravel-blog/resources/assets/css/web.scss

//Font
//@import url('https://fonts.loli.net/css?family=Noto+Sans+SC&subset=chinese-simplified');
@font-face {
    font-family: 'Sans';
    font-display: swap;
    //src: local('Sans'), url(https://gstatic.loli.net/s/notosanssc/v4/k3kXo84MPvpLmixcA63oeALhLIiP-Q-8wKa0aH7rzeAODp22mF0qmF4CSjmPC7A0Uxsm5WwFiFwnP5fvK_0xhEZh4Gd8sfhdxEzc.119.woff2) format('woff2');
}

// Variables
//@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Markdown GitHub Style
@import '~github-markdown-css/github-markdown.css';

/* Common*/

body {
    min-height: 48rem;
    padding-top: 4.5rem;
    font-family: 'Sans', sans-serif;
    background-color: #fff;
}

h6 {
    font-size: 1.1rem;
}

a {
    text-decoration: none;
}

a:hover{
    text-decoration:none;
}

.badge {
    padding: 0.3rem;
}

.min-h {
    min-height: 48rem;
}

.btn-border-circle {
    border-radius: 2rem;
}

.overflow-slh {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.min-width-max-content {
    min-width: max-content;
}

/* stylelint-disable selector-list-comma-newline-after */

h1, h2, h3, h4, h5, h6 {
    /*font-family: "Playfair Display", Georgia, "Times New Roman", serif;*/
    font-family: 'Noto Sans SC', sans-serif;
    color: #343a40;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
}

.card-img-right {
    height: 100%;
    border-radius: 0 3px 3px 0;
}

.flex-auto {
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
}

.h-250 {
    height: 250px;
}

@media (min-width: 768px) {
    .h-md-250 {
        height: 250px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/*
 * Blog name and description
 */
.blog-title {
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 400;
}

.blog-description {
    font-size: 1.1rem;
    color: #999;
}

@media (min-width: 40em) {
    .blog-title {
        font-size: 3.5rem;
    }
}

/*
 * Blog posts
 */
.blog-post {
    margin-bottom: 4rem;
}

.blog-post-title {
    margin-bottom: .25rem;
    font-size: 2rem;
}

.blog-post-meta {
    margin-bottom: 1.25rem;
    color: #999;
}

/*
 * Blog posts
 */

/*
 * Footer
 */
.blog-footer {
    padding: 1.5rem 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
}

.blog-footer p:last-child {
    margin-bottom: 0;
}

/*
 * home page album list
 */

:root {
    --jumbotron-padding-y: 3rem;
}

.jumbotron {
    padding-top: var(--jumbotron-padding-y);
    padding-bottom: var(--jumbotron-padding-y);
    margin-bottom: 0;
    background-color: #fff;
}

@media (min-width: 768px) {
    .jumbotron {
        padding-top: calc(var(--jumbotron-padding-y) * 2);
        padding-bottom: calc(var(--jumbotron-padding-y) * 2);
    }
}

.jumbotron p:last-child {
    margin-bottom: 0;
}

.jumbotron-heading {
    font-weight: 300;
}

.jumbotron .container {
    max-width: 40rem;
}

footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

footer p {
    margin-bottom: .25rem;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* Links Card */

.card-columns {

    @include media-breakpoint-only(lg) {
        column-count: 4;
    }
    @include media-breakpoint-only(xl) {
        column-count: 5;
    }
}

/* Markdown */

.markdown-body {
    font-family: 'Sans', sans-serif;
}