@import url("pygment_highlights.css");

:root {
  /* config file CSS variables */
  --page-col: #FFFFFF;
  --text-col: #404040;
  --link-col: #008AFF;
  --hover-col: #0085A1;
  --navbar-col: #EAEAEA;
  --navbar-text-col: #404040;
  --navbar-border-col: #DDDDDD;
  --footer-col: #EAEAEA;
  --footer-text-col: #777777;
  --footer-link-col: #404040;
  --footer-hover-col: #0085A1;

  /* common CSS variables */
  --body-font: 'Lora', 'Times New Roman', serif;
  --header-font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mid-col: #808080;
}

/* --- General --- */

html {
  font-size: 100%;
}

body {
  font-family: var(--body-font);
  font-size: 1.125rem;
  color: var(--text-col);
  position: relative;
  background-color: var(--page-col);
  
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1;
}

p {
  line-height: 1.5;
  margin: 1.875rem 0;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--header-font);
  font-weight: normal;
  line-height: 1.1;
}

h1 { font-size: 1.6875rem; }
h2 { font-size: 1.40625rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 0.84375rem; }
h1, h2, h3, h4 { margin-top: 1.25rem; }

a { color: var(--link-col); }
a:hover, a:focus { color: var(--hover-col); }

blockquote { color: var(--mid-col); font-style: italic; }
blockquote p:first-child { margin-top: 0; }

.jumbotron { background: #EEE; }

hr.small {
  max-width: 6.25rem;
  margin: 1rem auto;
  border-width: 0.25rem;
  border-color: inherit;
  border-radius: 0.1875rem;
}

:target:before {
  content: "";
  display: block;
  height: 3.125rem;
  margin: -3.125rem 0 0;
}

.hideme { display: none; }

::-moz-selection { color: var(--page-col); background-color: var(--hover-col); text-shadow: none; }
::selection { color: var(--page-col); background-color: var(--hover-col); text-shadow: none; }
img::selection { color: var(--hover-col); background: transparent; }
img::-moz-selection { color: var(--hover-col); background: transparent; }

img { max-width: 100%; }

.linked-section { padding-top: 3.75rem; margin-top: -1.5625rem; }

/* Comments */

.disqus-comments { margin-top: 1.875rem; }
@media (min-width: 768px) { .disqus-comments { margin-top: 2.5rem; } }

/* --- Navbar --- */

.navbar-custom {
  background-color: var(--navbar-col);
  border-bottom: 1px solid var(--navbar-border-col);
  font-family: var(--header-font);
  
  transition: padding .5s ease-in-out;
}

/* 修改导航栏的整体 padding */
.navbar-custom,
.navbar-custom.top-nav-short,
.navbar-custom.top-nav-short-permanent {
  padding-top: 0;
  padding-bottom: 0;
}

/* 修改导航栏品牌的样式 */
.navbar-custom .navbar-brand {
  line-height: 1.5;
  padding: 0.625rem 0;
  font-size: 1.125rem;
}

/* 修改导航栏菜单项的样式，增加间距 */
.navbar-custom .navbar-nav .nav-item {
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.0625rem;
  margin-right: 20px;  /* 增加菜单项之间的间距 */
}

/* 修改导航栏链接的样式 */
.navbar-custom .navbar-nav .nav-link {
  line-height: 1.25rem;
  padding: 0.9375rem 0;
}

/* 更改链接颜色 */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link {
  font-weight: 800;
  color: var(--navbar-text-col);
}

/* 添加自定义导航栏右对齐处理 */
.navbar-custom .navbar-nav {
  justify-content: flex-end; /* 将导航栏项靠右对齐 */
  margin-right: 20px;  /* 为右侧的内容增加右边距 */
}

.navbar-custom .navbar-nav.ms-auto {
  margin-left: auto; /* 确保右侧菜单项不会被挤压 */
}

/* 修改toggler按钮样式 */
.navbar-toggler {
  font-size: 1rem;
  margin: 0.5rem 0;
}

/* 调整导航栏折叠按钮 */
.navbar-custom .navbar-toggler:focus,
.navbar-custom .navbar-toggler:hover {
  background-color: initial;
}

.navbar-custom .navbar-toggler[aria-expanded="true"] {
  background-color: rgba(0, 0, 0, 0.2);
}

.dropdown-toggle::after {
  border-width: 0.4em;
}

/* --- Footer --- */

footer {
  padding: 1.875rem 0;
  border-top: 1px var(--footer-col) solid;
  margin-top: 3.125rem;
  font-size: 0.65625rem;
  background-color: var(--footer-col);
  
}
footer p.text-muted { color: var(--footer-text-col) !important; }
footer a { color: var(--footer-link-col); }
footer .footer-links a { color: var(--text-col); }
footer .footer-links .fa-inverse { color: var(--page-col); }
footer a:hover, footer a:focus { color: var(--footer-hover-col); }

footer .list-inline { margin: 0; padding: 0; margin-bottom: 1.375rem; }
footer .list-inline .list-inline-item { margin-bottom: 0.5rem; }

footer .copyright { font-family: var(--header-font); text-align: center; margin: 0; font-size: 0.75rem; }
footer .theme-by { text-align: center; margin: 0.625rem 0 0; font-size: 0.75rem; }
footer .footer-custom-content { text-align: center; margin-bottom: 0.9375rem; font-family: var(--header-font); font-size: 0.75rem; }

/* --- Post preview (feed) --- */

.posts-list { margin: 0; }

.post-preview {
  padding: 1.25rem 0;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}

@media (min-width: 768px) { .post-preview { padding: 2.1875rem 0; } }

.post-preview:last-child { border-bottom: 0; }

.post-preview a { text-decoration: none; font-family: var(--header-font); color: var(--text-col); }
.post-preview a:focus, .post-preview a:hover { text-decoration: none; color: var(--hover-col); }

.post-preview .post-title { font-size: 1.40625rem; }
@media (min-width: 768px) { .post-preview .post-title { font-size: 1.6875rem; } }

.post-preview .post-subtitle { margin: 0; font-weight: 300; margin-bottom: 0.625rem; }
.post-preview .post-meta, .post-heading .post-meta { color: var(--mid-col); font-size: 0.84375rem; font-style: italic; margin: 0 0 0.625rem; font-family: var(--body-font); }
.post-heading .post-meta { display: inline-block; }
@media (max-width: 767px) { .post-heading .post-meta { display: block; margin-bottom: 0; } }

.post-heading .post-meta .middot { margin: 0 0.625rem; }

.post-preview .post-entry { width: 100%; }
.post-preview .post-image { float: right; margin-left: 0.625rem; height: 12rem; width: 12rem; }
.post-preview .post-image { filter: grayscale(40%); }
.post-preview .post-image:hover { filter: grayscale(0%); }
.post-preview .post-image img { max-height: 100%; max-width: 100%; }
.post-preview .post-image-short { margin-top: -2.1875rem; }
@media (max-width: 767px) { .post-preview .post-image { height: 9rem; width: 9rem; } .post-preview .post-image-short { margin-top: 0; } }
.post-preview .post-image-small { width: 100%; height: 100%; text-align: center; display: none; }
.post-preview .post-image-small img { max-width: 6.25rem; max-height: 6.25rem; }
@media (max-width: 500px) { .post-preview .post-image { display: none; } .post-preview .post-image-small { display: block; } }

.post-preview .post-read-more { font-weight: 800; }

/* --- Tags --- */

.blog-tags { font-family: var(--header-font); font-size: 0.703125rem; margin: 1.875rem 0; }
.blog-tags span { color: var(--text-col); opacity: 0.8; }
.blog-tags .list-inline-item { margin-right: 0; }
.blog-tags a { color: var(--text-col); text-decoration: none; padding: 0 0.3125rem; opacity: 0.8; border: 1px solid transparent; border-radius: 0.1875rem; }
.blog-tags a:hover { opacity: 1; color: var(--text-col); border-color: var(--text-col); }
.post-preview .blog-tags { margin-top: 0.3125rem; margin-bottom: 0; }
@media (min-width: 768px) { .post-preview .blog-tags { margin-top: 0.625rem; } }

/* Tags page */

.tag-btn { margin: 0.3125rem; }
#full-tags-list { font-family: var(--header-font); }
#full-tags-list .tag-entry { margin: 0 0 0.9375rem 1.5625rem; }
#full-tags-list .tag-entry a { font-size: 0.9375rem; }
#full-tags-list .tag-entry .entry-date { color: var(--mid-col); font-style: italic; font-size: 0.75rem; }

/* --- Post and page headers --- */

.intro-header {
  margin: 5rem 0 1.25rem;
  position: relative;
}

.intro-header.big-img { background: no-repeat center center; background-size: cover; margin-top: 3.1875rem; margin-bottom: 2.1875rem; }
nav.top-nav-short-permanent ~ header > .intro-header { margin-top: 5rem; }
nav.top-nav-short-permanent ~ header > .intro-header.big-img { margin-top: 3.1875rem; }
.intro-header.big-img .big-img-transition { position: absolute; width: 100%; height: 100%; opacity: 0; background: no-repeat center center; background-size: cover; transition: opacity 1s linear; }

.intro-header .page-heading { text-align: center; }
.intro-header.big-img .page-heading, .intro-header.big-img .post-heading { padding: 6.25rem 0; color: #FFF; text-shadow: 1px 1px 3px #000; }
.intro-header .page-heading h1 { margin-top: 0; font-size: 2.34375rem; }
.intro-header .post-heading h1 { margin-top: 0; font-size: 1.640625rem; }
.intro-header .page-heading .page-subheading, .intro-header .post-heading .post-subheading { font-size: 1.265625rem; line-height: 1.1; display: block; font-family: var(--header-font); font-weight: 300; margin: 0.625rem 0 0; }
.intro-header.big-img .page-heading .page-subheading, .intro-header.big-img .post-heading .post-subheading { font-weight: 400; }
.intro-header.big-img .page-heading hr { box-shadow: 1px 1px 3px #000; }
.intro-header.big-img .post-heading .post-meta { color: #EEE; }
.intro-header.big-img .img-desc { background: rgba(30,30,30,0.6); position: absolute; padding: 0.3125rem 0.625rem; font-size: 0.65625rem; color: #EEE; font-family: var(--header-font); right: 0; bottom: 0; display: none; }