diff --git a/public/eriri_bg.jpg b/public/eriri_bg.jpg new file mode 100644 index 0000000..f81424f Binary files /dev/null and b/public/eriri_bg.jpg differ diff --git a/public/index.html b/public/index.html index 1aa1a03..21517d3 100644 --- a/public/index.html +++ b/public/index.html @@ -1,13 +1,13 @@ - + AsHole - - + +
- + + diff --git a/src/Common.css b/src/Common.css index aa34d37..95827ec 100644 --- a/src/Common.css +++ b/src/Common.css @@ -1,12 +1,26 @@ .centered-line { - width: 100%; + overflow: hidden; text-align: center; - border-bottom: 1px solid #000; - line-height: 0.1em; - margin: 10px 0 20px; + color: #fff; } -.centered-line span { - background:#eee; - padding:0 10px; +.centered-line::before, +.centered-line::after { + background-color: #fff; + content: ""; + display: inline-block; + height: 1px; + position: relative; + vertical-align: middle; + width: 50%; +} + +.centered-line::before { + right: 0.5em; + margin-left: -50%; +} + +.centered-line::after { + left: 0.5em; + margin-right: -50%; } \ No newline at end of file diff --git a/src/Flows.css b/src/Flows.css index d63f455..bb529cc 100644 --- a/src/Flows.css +++ b/src/Flows.css @@ -24,7 +24,8 @@ margin-left: 50px; } -.flow-item-row { +:not(.sidebar-flow-item).flow-item-row { + cursor: pointer; transition: margin-left 200ms ease-out; } :not(.sidebar-flow-item).flow-item-row:hover { @@ -44,6 +45,7 @@ .flow-item-row pre { white-space: pre-wrap; font-family: '微软雅黑', 'Microsoft YaHei', sans-serif; + word-wrap: break-word; } .box-header-badge { @@ -57,5 +59,5 @@ } .flow-reply-gray { - background-color: #e7e7e7; + background-color: #eee; } \ No newline at end of file diff --git a/src/Sidebar.css b/src/Sidebar.css index f5bfb4d..c735d94 100644 --- a/src/Sidebar.css +++ b/src/Sidebar.css @@ -23,7 +23,7 @@ height: 100%; width: calc(100% - 700px); padding: 1em; - background-color: #fff; + background-color: rgba(255,255,255,.8); z-index: 3; overflow-y: auto; } @@ -31,6 +31,15 @@ left: 700px; } +@media screen and (max-width: 1200px) { + .sidebar { + width: 600px; + } + .sidebar-on .sidebar { + left: calc(100% - 600px); + } +} + .sidebar-flow-item { display: block; } diff --git a/src/Sidebar.js b/src/Sidebar.js index 3a5e0bf..f436df5 100644 --- a/src/Sidebar.js +++ b/src/Sidebar.js @@ -10,7 +10,7 @@ export function Sidebar(props) { ×  {props.title}

-
+
{props.content} diff --git a/src/Title.css b/src/Title.css index 0704f2e..2fb2f4e 100644 --- a/src/Title.css +++ b/src/Title.css @@ -7,7 +7,7 @@ height: 2em; line-height: 2em; font-size: 1.5em; - background-color: #fff; + background-color: rgba(255,255,255,.8); padding: 0 .5em; box-shadow: 0 0 25px #999; margin-bottom: 1em; diff --git a/src/Title.js b/src/Title.js index e6c11c2..c3886ff 100644 --- a/src/Title.js +++ b/src/Title.js @@ -8,6 +8,7 @@ export function Title(props) { {props.callback( '关于 P大树洞（非官方） 网页版',
+

使用提示：