wcx/wolegca.github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

match mobile device

Browse Source
This commit is contained in:
wolegca 2019-09-12 15:58:47 +08:00
parent 1c7307d6fa
commit 91f35ba649
1 changed files with 48 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
index.css
View File

@ -7,12 +7,13 @@ html {
} }
body { body {
background:black url(bg.jpg) no-repeat center; background: black url(bg.jpg) no-repeat center;
background-size: cover; background-size: cover;
width: 200%; width: 200%;
z-index:0 z-index: 0
} }
input#menu-control { input#menu-control {
display: none display: none
} }
@ -29,8 +30,8 @@ div.menu-container {
padding-top: 50px; padding-top: 50px;
transition: all .5s ease; transition: all .5s ease;
overflow: hidden; overflow: hidden;
background-color:rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
z-index:1 z-index: 1
} }
div.menu-container ul { div.menu-container ul {
@ -60,7 +61,7 @@ div.menu-container ul li * {
div.menu-container ul li *:hover { div.menu-container ul li *:hover {
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
color:white color: white
} }
div.menu-container ul>li+li:before { div.menu-container ul>li+li:before {
@ -77,23 +78,23 @@ label[for=menu-control].menu-button-container {
left: 0; left: 0;
width: 50px; width: 50px;
height: 30px; height: 30px;
cursor: pointer!important; cursor: pointer !important;
z-index:3; z-index: 3;
} }
label[for=menu-control].menu-button-container:hover span { label[for=menu-control].menu-button-container:hover span {
background-color:white; background-color: white;
} }
label[for=menu-control].content-mask{ label[for=menu-control].content-mask {
display: block; display: block;
position: relative; position: relative;
width:50%; width: 50%;
height:100%; height: 100%;
background-color:rgba(25, 25, 25,.9); background-color: rgba(25, 25, 25, .9);
float: left; float: left;
z-index: 1; z-index: 1;
transition:all .5s ease; transition: all .5s ease;
opacity: 0; opacity: 0;
visibility: hidden visibility: hidden
} }
@ -104,7 +105,7 @@ div.menu-button span {
background-color: #ccc; background-color: #ccc;
display: block; display: block;
margin: 5px 0 0 3px; margin: 5px 0 0 3px;
cursor:pointer; cursor: pointer;
transition: all .5s ease; transition: all .5s ease;
} }
@ -124,11 +125,11 @@ div.content {
background-color: #fff; background-color: #fff;
border-radius: 15px; border-radius: 15px;
opacity: .5; opacity: .5;
transition: opacity .5s ease,transform .5s ease; transition: opacity .5s ease, transform .5s ease;
cursor: pointer; cursor: pointer;
padding: 15px; padding: 15px;
margin-bottom: 25px; margin-bottom: 25px;
text-overflow:ellipsis; text-overflow: ellipsis;
z-index: 1; z-index: 1;
text-align: center text-align: center
} }
@ -137,43 +138,52 @@ div.content:hover {
opacity: 1; opacity: 1;
} }
div.content img{ div.content img {
margin:0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
max-height: 100% max-height: 100%
} }
div.content p{ div.content p {
font-size: 18px; font-size: 18px;
text-align: left text-align: left
} }
div.content span{ div.content span {
font-size: 24px; font-size: 24px;
font-weight: bold font-weight: bold
} }
div.content span+p:first-letter{ div.content span+p:first-letter {
float: left; float: left;
font-size: 36px; font-size: 36px;
font-weight: bold font-weight: bold
} }
div.content p~p{ div.content p~p {
text-indent: 36px; text-indent: 36px;
} }
input#menu-control:checked~label.content-mask{ input#menu-control:checked~label.content-mask {
opacity: 1; opacity: 1;
visibility: visible visibility: visible
} }
@media screen and (max-width:700px) { @media screen and (max-width:700px) {
input#menu-control:checked+div.menu-container { body {
width: 50%; width: 100%
} }
div.content-border{ input#menu-control:checked+div.menu-container {
width: 100%;
}
input#menu-control:checked~label.content-mask {
opacity: 0;
visibility: hidden
}
div.content-border {
padding: 50px 5px 25px; padding: 50px 5px 25px;
} }
} }
@ -185,29 +195,29 @@ input#menu-control:checked~label.content-mask{
} }
div.content { div.content {
margin-left:auto; margin-left: auto;
margin-right:auto margin-right: auto
} }
div.content:hover { div.content:hover {
transform:scale(1.01) transform: scale(1.01)
} }
} }
*{ * {
-webkit-tap-highlight-color: transparent -webkit-tap-highlight-color: transparent
} }
#blog-title{ #blog-title {
color:white; color: white;
white-space: nowrap; white-space: nowrap;
position: fixed; position: fixed;
top:0px; top: 0px;
left:0px; left: 0px;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
background-color:rgba(25, 25, 25,.9); background-color: rgba(25, 25, 25, .9);
width:100%; width: 100%;
z-index:2; z-index: 2;
cursor: default cursor: default
} }