~/Projects/dujitang
git clone https://code.lsong.org/dujitang
Blob
- ref
- master
- path
- ./index.css
* {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
outline: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
--main: #ffe324;
--text: #666;
width: 100%;
height: 80vh;
margin: auto;
background: #fff;
color: #666;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, 'PingFang SC', sans-serif;
font-family: 'Soleil', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
a {
transition: color .1s ease-in-out;
}
::selection {
background: #ffe324;
color: #444;
}
blockquote {
text-align: left;
max-width: 70%;
}
.quotation-mark {
fill: #ddd;
width: 40px;
animation: fade-in .5s ease-out both;
}
p {
font-size: 60px;
font-size: calc(1.5rem + 2vmax + .4vmin);
line-height: 1.2;
font-weight: 700;
animation: right-in .4s ease-out 1;
}
@keyframes right-in {
0% {
opacity: 0;
transform: translateX(10px);
}
40% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
p a {
text-decoration: none;
color: #666;
/* border-bottom: 6px solid #ddd;*/
position: relative;
display: inline-block;
}
p a:after {
display: block;
content: "";
height: .2em;
background: #ffe324;
position: absolute;
width: 100%;
bottom: 5px;
z-index: -999;
left: 0;
transition: all .15s cubic-bezier(.8, 0, .2, 1);
animation: underline-in .7s cubic-bezier(.9, 0, .1, 1) 0s 1;
}
p a:nth-child(2):after {
animation: underline-in-2 .7s cubic-bezier(.9, 0, .1, 1) 0s 1;
}
p a:nth-child(3):after {
animation: underline-in-3 .7s cubic-bezier(.9, 0, .1, 1) 0s 1;
}
@keyframes underline-in {
0% {
width: 0;
}
30% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes underline-in-2 {
0% {
width: 0;
}
62% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes underline-in-3 {
0% {
width: 0;
}
78% {
width: 0;
}
100% {
width: 100%;
}
}
p a:hover {
color: #444;
}
p a:hover:after {
height: 90%;
}
p em {
font-family: "Adobe Caslon Pro", "Times", "Times New Roman", Serif;
font-style: italic;
}
p code {
font-family: Monaco, Consolas, monospace;
font-weight: 300;
}
p strong {
display: inline-block;
position: relative;
}
p strong:after {
content: "...........";
position: absolute;
bottom: -.3em;
left: .35em;
opacity: .9;
width: 100%;
overflow: hidden;
}
cite {
font-size: calc(1rem + .4vmax + .1vmin);
font-style: normal;
font-weight: 400;
color: #ddd;
margin-top: 1.3em;
display: block;
text-align: right;
animation: right-in-2 .5s ease-out 1;
}
@keyframes right-in-2 {
0% {
opacity: 0;
}
40% {
opacity: 0;
transform: translateX(10px);
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
cite em {
font-style: normal;
font-weight: 100;
}
.author, .source a {
color: #999;
}
.source a {
text-decoration: none;
}
.source a:hover {
color: #666;
}
.source-episode {
margin: 0 .1em;
}
.source-episode:before {
content: "#";
}
/*~Footer*/
footer {
opacity: 0;
position: fixed;
left: 15%;
width: 70%;
height: 80px;
text-align: center;
bottom: 0;
color: #999;
border-top: 1px solid #ddd;
padding: 0;
font-weight: 700;
}
footer strong {
font-weight: 100;
display: inline-block;
background: #fff;
padding: 0 1em;
color: #bbb;
margin: 0 auto;
transform: translateY(-.8em);
font-size: 16px;
animation: fade-in .2s ease-out 1;
}
@keyframes fade-in {
0% {
opacity: 0
}
100% {
opacity: 1;
}
}
footer strong a {
color: #ccc;
text-decoration: none;
font-weight: 700;
}
.latest-link {
text-decoration: none;
font-size: 18px;
color: #999;
display: inline-block;
}
.latest-link:hover {
color: #666;
}
.latest-link:after {
content: " ";
width: 100%;
height: .2em;
transform: scaleX(0);
display: block;
background: #ffe324;
transition: transform .15s cubic-bezier(.4, 0, .3, 1);
}
.latest-link:hover:after {
transform: scaleX(1);
}
.latest-link em {
font-style: normal;
}
.latest-link:visited {
color: #999;
}
.latest-link:visited:hover {
color: #666;
}
.new-badge {
font-size: .5em;
display: none;
background: #ffe324;
color: #222;
vertical-align: top;
padding: .3em .6em .3em;
border-radius: 1em;
font-weight: 700;
}
/*~ Notifications*/
body.notifications {
height: 80vh;
width: 100vw;
text-align: center;
left: 0;
top: 0;
display: flex;
align-items: center;
}
bodynotifications .inner {
max-height: 100%;
}
body.notifications img {
max-width: 100vw;
}
/*~Large Reslotuion*/
@media screen and (min-width: 1600px) {}
/*~Small Reslotuion*/
@media screen and (max-height: 600px) {
blockquote {}
footer strong, .latest-link, cite {
font-size: 16px;
}
}
@media screen and (max-height: 500px) {
blockquote {}
blockquote p {}
footer {
background: #fff;
}
footer strong, .latest-link, cite {
font-size: 14px;
}
}
@media screen and (max-height: 400px) {
blockquote {}
blockquote p {}
footer strong, .latest-link, cite {
font-size: 12px;
}
}
@media screen and (max-width: 1300px) {
blockquote {}
blockquote p {}
}
@media screen and (max-width: 1100px) {
blockquote {}
footer {
left: 10%;
width: 80%;
}
footer strong {
font-size: 14px;
}
.latest-link, cite {
font-size: 16px;
}
}
@media screen and (max-width: 1000px) {
blockquote {}
blockquote p {}
footer strong {
font-size: 12px;
}
.latest-link, cite {
font-size: 14px;
}
}
@media screen and (max-width: 800px) {
blockquote {}
blockquote p {}
cite {
font-size: 14px;
}
footer {
left: 7%;
width: 86%;
}
}
@font-face {
font-family: 'Soleil';
src: url(https://s.anw.red/font/soleil-regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'Soleil';
src: url(https://s.anw.red/font/soleil-semi-bold.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: fallback;
}