页面无法访问
- 页面链接失效
- 页面链接不和谐
- 发布者自主删除
- 尝试运行 Windows 网络诊断
??私のウェブサイト
html {
font-size:125%;
}
body {
font-family:'Segoe UI',sans-serif;
/*font-size:93.75%*/ /*It won't display as my expectation.*/
font-size:75%;
color:rgb(95,99,104);
word-wrap:break-word;
}
article {
box-sizing:border-box;
font-size:1em;
line-height:1.6em;
margin:14vh auto 0;
max-width:600px;
width:100%;
}
.dinosaur-icon {
display:inline-block;
width:72px;
height:72px;
margin:0 0 40px;
position:relative;
}
article>h1 {
margin-top:0;
word-wrap:break-word;
color:rgb(32,33,36);
font-size:1.6em;
font-weight:500;
line-height:1.25em;
margin-bottom:16px;
}
.hint-text {
margin-bottom:0;
}
article>.hint-text+ul {
margin-top:0;
}
article a {
text-decoration:none;
color:rgb(17,85,204);
}
.sitename {
display:block;
font-size:.8em;
color:#646464;
text-transform:uppercase;
margin-top:12px;
}
article>footer {
margin-top:51px;
}
.button {
border:1px solid rgb(154,160,166);
border-radius:4px;
box-sizing:border-box;
color:rgb(95,99,104);
background:#fff;
cursor:pointer;
/* font-size:.875em;
*/
margin:0;
padding:8px 16px;
transition:box-shadow 150ms cubic-bezier(0.4,0,0.2,1);
outline:none;
}
.button:active {
border-color:white;
}
.button:hover {
background:rgb(248,249,250);
border-color:rgb(128,134,139);
text-decoration:none;
}
.button__colored {
background:rgb(26,115,232);
color:#fff;
border:none;
}
.button__colored:hover {
background:rgb(26,115,232);
}
.button__colored:active {
background:rgb(23,103,210);
}
article>aside {
display:none;
}
article>aside>:first-child {
margin-top:18px;
}
article>aside>h2 {
font-weight:bold;
margin-top:18px;
margin-bottom:4px;
font-size:1em;
line-height:1.6em;
}
article>aside>p {
color:#777;
margin:0;
}
article.debugging>aside {
display:block;
}
/*Support devices in distinct resolutions.*/
@media (min-height:299px) {
article>footer {
padding-bottom:16px;
}
}@media (max-width:700px) {
article {
padding:0 10%;
}
}@media (max-width:420px) {
article {
padding:0 5%;
}
.button {
font-size:.825em;
font-weight:500;
margin:0;
width:100%;
display:block;
padding:16px 24px;
}
#debug-switch {
display:block;
text-align:center;
width:100%;
border:0;
margin:16px 0 0;
padding-bottom:16px;
padding-top:16px;
}
article>aside {
margin:20px 0 20px 0;
}
}@media (orientation:portrait) {
/*
* For vertical screens:* /------\
* |Status|
* |Title |
* | CON |
* | TENT |
* |< 0 ~ |
* \______/
**/
@media (max-width:420px) {
article {
box-sizing:border-box;
margin:7vh auto 12px;
padding:0 24px;
position:relative;
}
article>h1 {
font-size:1.5em;
margin-bottom:8px;
}
}@media (max-width:414px) {
@media (min-height:650px) {
article {
margin-top:10vh;
}
}@media (min-height:500px) and (max-height:650px) {
article {
margin-top:7vh;
}
}}@media (min-height:400px) {
article {
margin-bottom:145px;
}
}}@media (max-width:420px) and (orientation:portrait),(max-height:560px) {
article {
box-sizing:borer-box;
/*margin:7vh auto 12px;
*/
padding:0 24px;
position:relative;
}
article>h1 {
font-size:1.5em;
margin-bottom:8px;
}
.dinosaur-icon {
margin-bottom:5.69vh;
}
body {
margin:0 auto;
}
article>summary,article>p,.hint-text {
font-size:.95em;
line-height:1.61em;
margin-top:8px;
}
.button {
font-family:Roboto,'Noto Sans CJK SC',sans-serif;
/*font-size:.933em;
*/
margin:6px 0;
}
article:not(.debugging)>aside {
display:block;
height:0;
opacity:0;
overflow:hidden;
padding-bottom:0;
transition:none;
}
article>aside {
box-sizing:border-box;
height:auto;
margin:0;
opacity:1;
transition:opacity 250ms cubic-bezier(0.4,0,0.2,1);
}
article>:not(aside):not(footer) {
transition:opacity 100ms cubic-bezier(0.4,0,0.2,1);
}
article.debugging>:not(aside):not(footer) {
margin:0;
display:block;
height:0;
opacity:0;
overflow:hidden;
padding-bottom:0;
transition:none;
}
body {
margin:0 auto;
}
}@media (max-width:640px),(max-height:640px) {
article>h1 {
margin:0 0 15px;
}
article>aside>:first-child {
margin-top:10px;
}
article>aside>h2 {
margin-top:10px;
margin-bottom:0;
}
}@media (max-width:420px) and (min-height:401px) and (min-width:240px),(max-height:560px) and (min-height:240px) and (min-width:421px) {
article>footer {
box-sizing:border-box;
background:#fff;
bottom:0;
box-shadow:0 -22px 40px #fff;
left:0;
margin:0 auto;
max-width:736px;
padding-left:24px;
padding-right:24px;
position:fixed;
right:0;
width:100%;
z-index:2;
}
article>aside {
padding-bottom:40px;
padding-top:5.5vh;
}
article {
padding-bottom:40px;
}
}@media (max-height:420px) and (max-width:736px) and (min-height:240px) and (min-width:420px) and (orientation:landscape) {
article {
margin-bottom:100px;
}
}/*Snackbar*/
.notification {
background:#323232;
color:white;
height:48px;
position:fixed;
left:24px;
bottom:0;
line-height:48px;
display:block;
border:none;
padding:0;
border-radius:2px;
min-width:288px;
max-width:568px;
padding-left:24px;
padding-right:24px;
z-index:3;
}
@keyframes appear {
from {
transform:translateY(100%);
}
to {
transform:translateY(0%);
}
}@keyframes disappear {
from {
transform:translateY(0);
}
to {
transform:translateY(100%);
}
}.notification.appear {
animation:appear .325s ease;
transform:translateY(0);
}
.notification.disappear:not(.appear) {
animation:disappear .325s ease-out;
transform:translateY(100%);
}
.notification.default {
transform:translateY(100%);
}
@media (max-width:640px) {
.notification {
width:100%;
max-width:none;
min-width:none;
border-radius:0;
left:0;
right:0;
}
}自写代码,照chrome错页样式仿报错页。
桌面端横屏与手机竖屏无异样,它况未测。
js有用es6特性,css有用css3特性,不支持请自改或问于评论。