diff --git a/base.js b/base.js
index 1e1b635..0adffed 100644
--- a/base.js
+++ b/base.js
@@ -4,7 +4,7 @@ $(function () {
window.ondragstart = block;
$('.msg-header').Drag($('.msg-container'));
$('.menu-container ul li span').on('click',function(){
- message.alert('这里是','');
+ message.alert('这里是','');
});
function block() {
return false;
diff --git a/index.css b/index.css
index 436574c..e69de29 100644
--- a/index.css
+++ b/index.css
@@ -1,233 +0,0 @@
-body,
-html {
- margin: 0;
- padding: 0;
- height: 100%;
- overflow: hidden
-}
-
-body {
- background: black url(bg.jpg) no-repeat center;
- background-size: cover;
- width: 200%;
- z-index: 0
-}
-
-
-input#menu-control {
- display: none
-}
-
-div.menu-container {
- display: block;
- position: relative;
- float: left;
- top: 0;
- left: 0;
- height: 100%;
- width: 0;
- box-sizing: border-box;
- padding-top: 50px;
- transition: all .2s ease;
- overflow: hidden;
- background-color: rgba(0, 0, 0, 0.8);
- z-index: 1;
- box-shadow: 2px 0px 8px black
-}
-
-div.menu-container ul {
- position: relative;
- padding: 0;
- margin: 0;
- top: 30%;
- transform: translateY(-50%)
-}
-
-div.menu-container ul li {
- list-style: none;
- text-align: center;
- white-space: nowrap
-}
-
-div.menu-container ul li * {
- text-decoration: none;
- color: white;
- display: block;
- padding: 8px 0 0;
- transition: all .3s ease;
- font-size: 24px;
- height: 40px;
- cursor: pointer
-}
-
-div.menu-container ul li *:hover {
- background-color: rgba(255, 255, 255, .2);
- /*color: black*/
-}
-
-div.menu-container ul li *:active {
- background-color: gray;
-}
-
-div.menu-container ul>li+li:before {
- content: '';
- display: block;
- height: 1px;
- margin: 2px 2px
-}
-
-label[for=menu-control].menu-button-container {
- display: block;
- position: fixed;
- top: 0;
- left: 0;
- width: 50px;
- height: 30px;
- cursor: pointer !important;
- z-index: 3;
-}
-
-label[for=menu-control].menu-button-container:hover span {
- background-color: white;
-}
-
-label[for=menu-control].content-mask {
- display: block;
- position: relative;
- width: 50%;
- height: 100%;
- background-color: rgba(0, 0, 0, .5);
- float: left;
- z-index: 1;
- transition: all .5s ease;
- opacity: 0;
- visibility: hidden
-}
-
-div.menu-button span {
- width: 44px;
- height: 3px;
- background-color: #ccc;
- display: block;
- margin: 5px 0 0 3px;
- cursor: pointer;
- transition: all .5s ease;
-}
-
-
-div.content-border {
- width: 100%;
- height: 100%;
- position: absolute;
- box-sizing: border-box;
- padding: 50px 50px 25px;
- overflow-y: scroll;
- transition:padding .5s ease
-}
-
-div.content {
- min-height: 200px;
- max-width: 800px;
- background-color: rgba(255, 255, 255, .5);
- border-radius: 15px;
- opacity: 1;
- transition: opacity .5s ease, transform .5s ease;
- cursor: default;
- padding: 15px;
- margin-bottom: 25px;
- text-overflow: ellipsis;
- z-index: 1;
- text-align: center
-}
-
-div.content:hover {
- opacity: 1;
-}
-
-div.content img {
- margin: 0 auto;
- max-width: 100%;
- max-height: 100%
-}
-
-div.content p {
- font-size: 18px;
- text-align: left
-}
-
-div.content span {
- font-size: 24px;
- font-weight: bold
-}
-
-div.content span+p:first-letter {
- float: left;
- font-size: 36px;
- font-weight: bold
-}
-
-div.content p~p {
- text-indent: 36px;
-}
-
-input#menu-control:checked~label.content-mask {
- opacity: 1;
- visibility: visible
-}
-
-@media screen and (max-width:700px) {
- body {
- width: 100%
- }
-
- div.content {
- opacity:1
- }
-
- 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;
- }
-}
-
-@media screen and (min-width:700px) {
- input#menu-control:checked+div.menu-container {
- width: 350px;
- left: 0
- }
-
- div.content {
- margin-left: auto;
- margin-right: auto
- }
-
- /* div.content:hover {
- transform: scale(1.01)
- } */
-}
-
-* {
- -webkit-tap-highlight-color: transparent
-}
-
-#blog-title {
- color: white;
- white-space: nowrap;
- position: fixed;
- top: 0px;
- left: 0px;
- text-align: center;
- font-size: 24px;
- background-color: rgba(25, 25, 25, .9);
- width: 100%;
- z-index: 2;
- cursor: default
-}
\ No newline at end of file
diff --git a/myui.css b/myui.css
index aa42ae0..91ae872 100644
--- a/myui.css
+++ b/myui.css
@@ -1,5 +1,194 @@
* {
touch-action: pan-y;
+ -webkit-tap-highlight-color: transparent;
+ box-sizing: border-box
+}
+
+body,
+html {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ overflow: hidden
+}
+
+body {
+ background: black url(bg.jpg) no-repeat center;
+ background-size: cover;
+ width: 200%;
+ z-index: 0
+}
+
+#menu-control {
+ display: none
+}
+
+#menu-control:checked~label.content-mask {
+ opacity: 1;
+ visibility: visible
+}
+
+#blog-title {
+ color: white;
+ white-space: nowrap;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ text-align: center;
+ font-size: 24px;
+ background-color: rgba(25, 25, 25, .9);
+ width: 100%;
+ z-index: 2;
+ cursor: default
+}
+
+.menu-container {
+ display: block;
+ position: relative;
+ float: left;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 0;
+ padding-top: 50px;
+ transition: all .2s ease;
+ overflow: hidden;
+ background-color: rgba(0, 0, 0, 0.8);
+ z-index: 1;
+ box-shadow: 2px 0px 8px black
+}
+
+.menu-container ul {
+ position: relative;
+ padding: 0;
+ margin: 0;
+ top: 30%;
+ transform: translateY(-50%)
+}
+
+.menu-container ul li {
+ list-style: none;
+ text-align: center;
+ white-space: nowrap
+}
+
+.menu-container ul li * {
+ text-decoration: none;
+ color: white;
+ display: block;
+ padding: 8px 0 0;
+ transition: all .3s ease;
+ font-size: 24px;
+ height: 40px;
+ cursor: pointer
+}
+
+.menu-container ul li *:hover {
+ background-color: rgba(255, 255, 255, .2);
+ /*color: black*/
+}
+
+.menu-container ul li *:active {
+ background-color: gray;
+}
+
+.menu-container ul>li+li:before {
+ content: '';
+ display: block;
+ height: 1px;
+ margin: 2px 2px
+}
+
+[for=menu-control].menu-button-container {
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 50px;
+ height: 30px;
+ cursor: pointer !important;
+ z-index: 3;
+}
+
+[for=menu-control].menu-button-container:hover span {
+ background-color: white;
+}
+
+[for=menu-control].content-mask {
+ display: block;
+ position: relative;
+ width: 50%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, .5);
+ float: left;
+ z-index: 1;
+ transition: all .5s ease;
+ opacity: 0;
+ visibility: hidden
+}
+
+.menu-button span {
+ width: 44px;
+ height: 3px;
+ background-color: #ccc;
+ display: block;
+ margin: 5px 0 0 3px;
+ cursor: pointer;
+ transition: all .5s ease;
+}
+
+.content-border {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ padding: 50px 50px 25px;
+ overflow-y: scroll;
+ transition: padding .5s ease
+}
+
+.content {
+ min-height: 200px;
+ max-width: 800px;
+ background-color: rgba(255, 255, 255, .5);
+ border-radius: 15px;
+ opacity: 1;
+ transition: opacity .5s ease, transform .5s ease;
+ cursor: default;
+ padding: 15px;
+ margin-bottom: 25px;
+ text-overflow: ellipsis;
+ z-index: 1;
+ text-align: center
+}
+
+.content:hover {
+ opacity: 1;
+}
+
+.content img {
+ margin: 0 auto;
+ max-width: 100%;
+ max-height: 100%
+}
+
+.content p {
+ font-size: 18px;
+ text-align: left
+}
+
+.content span {
+ font-size: 24px;
+ font-weight: bold
+}
+
+.content span+p:first-letter {
+ float: left;
+ font-size: 36px;
+ font-weight: bold
+}
+
+.content p~p {
+ text-indent: 36px;
}
.msg-container {
@@ -15,7 +204,6 @@
padding-bottom: 40px;
cursor: default;
border-radius: 10px;
- box-sizing: border-box;
box-shadow: 3px 2px 8px rgb(0, 0, 0);
opacity: 0;
animation: fadeIn .3s forwards;
@@ -34,7 +222,6 @@
border-radius: 10px 10px 0px 0px;
padding: 10px;
text-align: center;
- box-sizing: border-box;
text-overflow: ellipsis;
word-break: break-word
}
@@ -47,7 +234,6 @@
background-color: rgb(50, 50, 50);
cursor: default;
padding: 10px;
- box-sizing: border-box;
text-overflow: ellipsis;
word-break: break-word
}
@@ -63,7 +249,6 @@
border-radius: 0px 0px 10px 10px;
padding: 10px;
text-align: right;
- box-sizing: border-box;
text-overflow: ellipsis;
word-break: break-word
}
@@ -83,13 +268,13 @@
color: rgb(50, 50, 50)
}
-.mask{
+.mask {
position: absolute;
display: none;
- width:100%;
- height:100%;
- background-color:rgba(95, 95, 95, 0.7);
- z-index:998;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(95, 95, 95, 0.7);
+ z-index: 998;
opacity: 0;
}
@@ -117,4 +302,40 @@
.msg-container {
max-width: 250px;
}
+}
+
+@media screen and (max-width:700px) {
+ body {
+ width: 100%
+ }
+
+ div.content {
+ opacity: 1
+ }
+
+ 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;
+ }
+}
+
+@media screen and (min-width:700px) {
+ input#menu-control:checked+div.menu-container {
+ width: 350px;
+ left: 0
+ }
+
+ div.content {
+ margin-left: auto;
+ margin-right: auto
+ }
+
}
\ No newline at end of file