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