fixed css issues
This commit is contained in:
parent
7c801a14bb
commit
8bf7d20134
2 changed files with 36 additions and 155 deletions
|
|
@ -1,76 +1,8 @@
|
|||
/* 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 {
|
||||
max-width: 800px;
|
||||
|
|
@ -78,54 +10,34 @@ body {
|
|||
padding: .2em;
|
||||
line-height: 1.5em;
|
||||
font-size: 19px;
|
||||
|
||||
background-color: #2d2a2e;
|
||||
color: #f7f6f3;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
/* Table of Contents, if wanted
|
||||
|
||||
Add to yaml:
|
||||
|
||||
output:
|
||||
blogdown::html_page:
|
||||
toc: true
|
||||
|
||||
*/
|
||||
|
||||
#TableOfContents, #TOC {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* Header and Footer */
|
||||
.menu li { display: inline-block; }
|
||||
.article-meta, .menu a {
|
||||
text-decoration: none;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
border-style: dotted;
|
||||
border-width: 1px;
|
||||
margin: 20px 0px 20px 0px;
|
||||
.menu{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.terms { font-size: .9em; }
|
||||
.menu, .article-meta, footer { text-align: center; }
|
||||
.title { font-size: 1.1em; }
|
||||
footer a { text-decoration: none; }
|
||||
.menu li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
float: left
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ac9c6d;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -135,10 +47,20 @@ a:hover {
|
|||
|
||||
/* Adjust background at your leisure! */
|
||||
header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1.75rem;
|
||||
font-size: 1rem;
|
||||
border-bottom: 2px dotted #f7f6f3;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
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,
|
||||
|
|
@ -152,15 +74,18 @@ header nav {
|
|||
}
|
||||
|
||||
header a {
|
||||
color: #fff;
|
||||
color: #f7f6f3;
|
||||
line-height: 1.75rem;
|
||||
padding: 0 0.5rem
|
||||
}
|
||||
header a:hover,
|
||||
header .current a {
|
||||
color: #fff
|
||||
color: #f7f6f3
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
/* Code Boxes */
|
||||
pre {
|
||||
border: 2px solid #EBC3DB;
|
||||
|
|
@ -195,15 +120,11 @@ main {
|
|||
display: block;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
main a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid #ccc;
|
||||
padding: 3px 1em 3px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: 0px 12px 0px 12px;
|
||||
}
|
||||
|
|
@ -216,33 +137,12 @@ blockquote {
|
|||
display: block;
|
||||
}
|
||||
|
||||
#table-of-contents {
|
||||
}
|
||||
|
||||
/* Small devices, phones */
|
||||
/* Small devices */
|
||||
@media only screen and (min-width : 480px) {
|
||||
#foxy {
|
||||
#personal {
|
||||
min-width: 40px;
|
||||
float: center;
|
||||
padding: 10px 10px 10px 20px;
|
||||
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%; }
|
||||
|
||||
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