fixed css issues
This commit is contained in:
parent
7c801a14bb
commit
8bf7d20134
2 changed files with 36 additions and 155 deletions
|
|
@ -1,131 +1,43 @@
|
||||||
/* Dark mode */
|
|
||||||
/* @media (prefers-color-scheme: dark) { */
|
|
||||||
body {
|
|
||||||
background-color: #2d2a2e;
|
|
||||||
color: #f7f6f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
background: #2d2a2e;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #ac9c6d;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background: #2d2a2e;
|
|
||||||
border-bottom: 2px dotted #EBC3DB;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-meta, .menu a {
|
|
||||||
background: #393E41;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
margin: auto;
|
|
||||||
border-top: 1px solid #666;
|
|
||||||
border-bottom: 1px solid #666;
|
|
||||||
}
|
|
||||||
table thead th { border-bottom: 1px solid #666; }
|
|
||||||
th, td { padding: 5px; }
|
|
||||||
tr:nth-child(even) { background: #666 }
|
|
||||||
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
|
|
||||||
/* Light mode */
|
|
||||||
/* @media (prefers-color-scheme: light) { */
|
|
||||||
/* body { */
|
|
||||||
/* background-color: #f7f6f3; */
|
|
||||||
/* color: #2d2a2e; */
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
/* blockquote { */
|
|
||||||
/* background: #f7f6f3; */
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
/* a { */
|
|
||||||
/* color: #ac9c6d; */
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
/* header { */
|
|
||||||
/* background: #f7f6f3; */
|
|
||||||
/* border-bottom: 2px dotted #3d3a3e */
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
/* .article-meta, .menu a { */
|
|
||||||
/* background: #E8DBC5; */
|
|
||||||
/* color: #2d2a2e; */
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
/* table { */
|
|
||||||
/* margin: auto; */
|
|
||||||
/* border-top: 1px solid #666; */
|
|
||||||
/* border-bottom: 1px solid #666; */
|
|
||||||
/* } */
|
|
||||||
/* table thead th { border-bottom: 1px solid #ddd; } */
|
|
||||||
/* th, td { padding: 5px; } */
|
|
||||||
/* tr:nth-child(even) { background: #eee } */
|
|
||||||
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
|
html{
|
||||||
|
background-color: #2d2a2e;
|
||||||
|
color: #f7f6f3;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: .2em;
|
padding: .2em;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
|
|
||||||
background-color: #2d2a2e;
|
|
||||||
color: #f7f6f3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Table of Contents, if wanted
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
Add to yaml:
|
|
||||||
|
|
||||||
output:
|
|
||||||
blogdown::html_page:
|
|
||||||
toc: true
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
#TableOfContents, #TOC {
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header and Footer */
|
.menu{
|
||||||
.menu li { display: inline-block; }
|
text-align: center;
|
||||||
.article-meta, .menu a {
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border-style: dotted;
|
|
||||||
border-width: 1px;
|
|
||||||
margin: 20px 0px 20px 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.terms { font-size: .9em; }
|
.menu li {
|
||||||
.menu, .article-meta, footer { text-align: center; }
|
display: inline-block;
|
||||||
.title { font-size: 1.1em; }
|
}
|
||||||
footer a { text-decoration: none; }
|
|
||||||
|
|
||||||
.pull-left {
|
.pull-left {
|
||||||
float: left
|
float: left
|
||||||
}
|
}
|
||||||
|
|
||||||
.pull-right {
|
.pull-right {
|
||||||
float: right
|
float: right
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
color: #ac9c6d;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -135,10 +47,20 @@ a:hover {
|
||||||
|
|
||||||
/* Adjust background at your leisure! */
|
/* Adjust background at your leisure! */
|
||||||
header {
|
header {
|
||||||
position: relative;
|
border-bottom: 2px dotted #f7f6f3;
|
||||||
width: 100%;
|
position: relative;
|
||||||
height: 1.75rem;
|
width: 100%;
|
||||||
font-size: 1rem;
|
height: 1.75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu a {
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border-style: dotted;
|
||||||
|
border-width: 1px;
|
||||||
|
margin: 20px 0px 20px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header ul,
|
header ul,
|
||||||
|
|
@ -152,15 +74,18 @@ header nav {
|
||||||
}
|
}
|
||||||
|
|
||||||
header a {
|
header a {
|
||||||
color: #fff;
|
color: #f7f6f3;
|
||||||
line-height: 1.75rem;
|
line-height: 1.75rem;
|
||||||
padding: 0 0.5rem
|
padding: 0 0.5rem
|
||||||
}
|
}
|
||||||
header a:hover,
|
header a:hover,
|
||||||
header .current a {
|
header .current a {
|
||||||
color: #fff
|
color: #f7f6f3
|
||||||
}
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
/* Code Boxes */
|
/* Code Boxes */
|
||||||
pre {
|
pre {
|
||||||
border: 2px solid #EBC3DB;
|
border: 2px solid #EBC3DB;
|
||||||
|
|
@ -195,15 +120,11 @@ main {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
main a {
|
main a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
|
||||||
border-left: 5px solid #ccc;
|
|
||||||
padding: 3px 1em 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
padding: 0px 12px 0px 12px;
|
padding: 0px 12px 0px 12px;
|
||||||
}
|
}
|
||||||
|
|
@ -216,33 +137,12 @@ blockquote {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#table-of-contents {
|
/* Small devices */
|
||||||
}
|
|
||||||
|
|
||||||
/* Small devices, phones */
|
|
||||||
@media only screen and (min-width : 480px) {
|
@media only screen and (min-width : 480px) {
|
||||||
#foxy {
|
#personal {
|
||||||
min-width: 40px;
|
min-width: 40px;
|
||||||
float: center;
|
float: center;
|
||||||
padding: 10px 10px 10px 20px;
|
padding: 10px 10px 10px 20px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 在大屏幕上应用特定样式 */
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
#table-of-contents {
|
|
||||||
position: fixed; /* 固定定位，使其悬浮在页面上 */
|
|
||||||
top: 50%; /* 上边距为50% */
|
|
||||||
right: 15px; /* 右边距为0，将其放在右侧 */
|
|
||||||
transform: translateY(-50%); /* 使用transform来垂直居中 */
|
|
||||||
background-color: #f0f0f0; /* 设置背景颜色 */
|
|
||||||
padding: 10px; /* 添加一些内边距以增加可读性 */
|
|
||||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
|
|
||||||
width: 250px; /* 设置宽度 */
|
|
||||||
max-height: 70vh; /* 设置最大高度为视口的70% */
|
|
||||||
overflow-y: auto; /* 添加垂直滚动条 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1 @@
|
||||||
footer { font-size: 90%; }
|
footer { font-size: 90%; }
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #2d2a2e;
|
|
||||||
color: #f7f6f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #ac9c6d;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background: #2d2a2e;
|
|
||||||
border-bottom: 2px dotted #f7f6f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue