From 0d54556d6dcbad3304834d5da5b62d0c79be790f Mon Sep 17 00:00:00 2001 From: Ash Date: Wed, 8 Feb 2023 22:00:28 +0400 Subject: [PATCH] css fix --- public/css/left-nav-style.css | 324 ----------------------- public/css/right-nav-style.css | 321 ---------------------- public/css/style.css | 140 ---------- public/index.html | 2 - public/style.css | 469 +++++++++++++++++++++++++++++++++ 5 files changed, 469 insertions(+), 787 deletions(-) delete mode 100644 public/css/left-nav-style.css delete mode 100644 public/css/right-nav-style.css delete mode 100644 public/css/style.css diff --git a/public/css/left-nav-style.css b/public/css/left-nav-style.css deleted file mode 100644 index 589c21411..000000000 --- a/public/css/left-nav-style.css +++ /dev/null @@ -1,324 +0,0 @@ -@charset "UTF-8"; - - - -.nav { - - width: 320px; - min-width: 320px; - - height: 100%; - position: fixed; - top: 0; - bottom: 0; - margin: 0; - - left: -320px; - padding: 15px 20px; - - -webkit-transition: left 0.3s; - -moz-transition: left 0.3s; - transition: left 0.3s; - - background: #16a085; - - z-index: 2000; -} - - - -.nav-toggle { - - position: absolute; - - left: 320px; - - top: 1em; - - padding: 0.5em; - - background: inherit; - - color: #dadada; - - cursor: pointer; - - font-size: 1.2em; - line-height: 1; - - z-index: 2001; - - -webkit-transition: color .25s ease-in-out; - -moz-transition: color .25s ease-in-out; - transition: color .25s ease-in-out; -} - - - - -.nav-toggle:after { - content: '\2630'; - text-decoration: none; -} - - - -.nav-toggle:hover { - color: #f4f4f4; -} - - - - -[id='nav-toggle'] { - position: absolute; - display: none; -} - - - - -[id='nav-toggle']:checked ~ .nav > .nav-toggle { - left: auto; - right: 2px; - top: 1em; -} - - - - -[id='nav-toggle']:checked ~ .nav { - left: 0; - box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5); - -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5); - -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5); - overflow-y: auto; -} - - - - -[id='nav-toggle']:checked ~ main > article { - -webkit-transform: translateX(320px); - -moz-transform: translateX(320px); - transform: translateX(320px); -} - - - - -[id='nav-toggle']:checked ~ .nav > .nav-toggle:after { - content: '\2715'; -} - - - - -body { - -webkit-animation: bugfix infinite 1s; -} - -@-webkit-keyframes bugfix { - to { - padding: 0; - } -} - - - - -@media screen and (min-width: 320px) { - html, - body { - margin: 0; - overflow-x: hidden; - } -} - -@media screen and (max-width: 320px) { - html, - body { - margin: 0; - overflow-x: hidden; - } - .nav { - width: 100%; - box-shadow: none - } -} - - - - -.nav h2 { - width: 90%; - padding: 0; - margin: 10px 0; - text-align: center; - text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px; - font-size: 1.3em; - line-height: 1.3em; - opacity: 0; - transform: scale(0.1, 0.1); - -ms-transform: scale(0.1, 0.1); - -moz-transform: scale(0.1, 0.1); - -webkit-transform: scale(0.1, 0.1); - transform-origin: 0% 0%; - -ms-transform-origin: 0% 0%; - -moz-transform-origin: 0% 0%; - -webkit-transform-origin: 0% 0%; - transition: opacity 0.8s, transform 0.8s; - -ms-transition: opacity 0.8s, -ms-transform 0.8s; - -moz-transition: opacity 0.8s, -moz-transform 0.8s; - -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; -} - -.nav h2 a { - color: #dadada; - text-decoration: none; - text-transform: uppercase; -} - - -[id='nav-toggle']:checked ~ .nav h2 { - opacity: 1; - transform: scale(1, 1); - -ms-transform: scale(1, 1); - -moz-transform: scale(1, 1); - -webkit-transform: scale(1, 1); -} - - - - -.nav > ul { - display: block; - margin: 0; - padding: 0; - list-style: none; -} - -.nav > ul > li { - line-height: 2.5; - opacity: 0; - -webkit-transform: translateX(-50%); - -moz-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); - -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s; - -moz-transition: opacity .5s .1s, -moz-transform .5s .1s; - -ms-transition: opacity .5s .1s, -ms-transform .5s .1s; - transition: opacity .5s .1s, transform .5s .1s; -} - -[id='nav-toggle']:checked ~ .nav > ul > li { - opacity: 1; - -webkit-transform: translateX(0); - -moz-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); -} - - - -.nav > ul > li:nth-child(2) { - -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s; - transition: opacity .5s .2s, transform .5s .2s; -} - -.nav > ul > li:nth-child(3) { - -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s; - transition: opacity .5s .3s, transform .5s .3s; -} - -.nav > ul > li:nth-child(4) { - -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s; - transition: opacity .5s .4s, transform .5s .4s; -} - -.nav > ul > li:nth-child(5) { - -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s; - transition: opacity .5s .5s, transform .5s .5s; -} - -.nav > ul > li:nth-child(6) { - -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s; - transition: opacity .5s .6s, transform .5s .6s; -} - -.nav > ul > li:nth-child(7) { - -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s; - transition: opacity .5s .7s, transform .5s .7s; -} - - - - -.nav > ul > li > a { - display: inline-block; - position: relative; - padding: 0; - font-family: 'Open Sans', sans-serif; - font-weight: 300; - font-size: 1.2em; - color: #dadada; - width: 100%; - text-decoration: none; - - -webkit-transition: color .5s ease, padding .5s ease; - -moz-transition: color .5s ease, padding .5s ease; - transition: color .5s ease, padding .5s ease; -} - - - - -.nav > ul > li > a:hover, -.nav > ul > li > a:focus { - color: white; - padding-left: 15px; -} - - - -.nav > ul > li > a:before { - content: ''; - display: block; - position: absolute; - right: 0; - bottom: 0; - height: 1px; - width: 100%; - -webkit-transition: width 0s ease; - transition: width 0s ease; -} - -.nav > ul > li > a:after { - content: ''; - display: block; - position: absolute; - left: 0; - bottom: 0; - height: 1px; - width: 100%; - background: #3bc1a0; - -webkit-transition: width .5s ease; - transition: width .5s ease; -} - - - -.nav > ul > li > a:hover:before { - width: 0%; - background: #3bc1a0; - -webkit-transition: width .5s ease; - transition: width .5s ease; -} - -.nav > ul > li > a:hover:after { - width: 0%; - background: transparent; - -webkit-transition: width 0s ease; - transition: width 0s ease; -} - diff --git a/public/css/right-nav-style.css b/public/css/right-nav-style.css deleted file mode 100644 index ae6bc3471..000000000 --- a/public/css/right-nav-style.css +++ /dev/null @@ -1,321 +0,0 @@ -@charset "UTF-8"; - - - -.nav { - width: 450px; - min-width: 450px; - height: 100%; - position: fixed; - top: 0; - bottom: 0; - margin: 0; - right: -450px; - padding: 0px 20px; - -webkit-transition: right 0.14s ease-in-out 0.02s; - -moz-transition: right 0.14s ease-in-out 0.02s; - transition: right 0.14s ease-in-out 0.02s; - - background: #16a085; - - z-index: 2000; - box-shadow: 0 0 2px rgba(200,200,200,0.1); - white-space:nowrap; - background: #191b31A0; - -} - - - - -.nav-toggle { - border-radius: 5px; - - position: absolute; - - right: 450px; - - top: 1em; - - padding: 0.5em; - - background: inherit; - - color: #dadada; - - cursor: pointer; - - font-size: 1.2em; - line-height: 1; - - z-index: 2001; - - -webkit-transition: color .25s ease-in-out; - -moz-transition: color .25s ease-in-out; - transition: color .25s ease-in-out; -} - - - -.nav-toggle:after { - content: '\2630'; - text-decoration: none; -} - - - -.nav-toggle:hover { - color: #f4f4f4; -} - - - -[id='nav-toggle'] { - position: absolute; - display: none; -} - - - -[id='nav-toggle']:checked ~ .nav > .nav-toggle { - left: auto; - right: 2px; - top: 1em; -} - - - - -[id='nav-toggle']:checked ~ .nav { - right: 0; - box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.01); - -moz-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.01); - -webkit-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.01); - overflow-y: auto; -} - - - - -[id='nav-toggle']:checked ~ main > article { - -webkit-transform: translateX(-450px); - -moz-transform: translateX(-450px); - transform: translateX(-450px); -} - - - - -[id='nav-toggle']:checked ~ .nav > .nav-toggle:after { - content: '\2715'; -} - - - - -body { - -webkit-animation: bugfix infinite 1s; -} - -@-webkit-keyframes bugfix { - to { - padding: 0; - } -} - - - - -@media screen and (min-width: 450px) { - html, - body { - margin: 0; - overflow-x: hidden; - } -} - -@media screen and (max-width: 450px) { - html, - body { - margin: 0; - overflow-x: hidden; - } - .nav { - width: 100%; - box-shadow: none - } -} - - -.nav h22 { - width: 90%; - padding: 0; - margin: 10px 0; - text-align: center; - text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px; - font-size: 1.3em; - line-height: 1.3em; - opacity: 0; - transform: scale(0.1, 0.1); - -ms-transform: scale(0.1, 0.1); - -moz-transform: scale(0.1, 0.1); - -webkit-transform: scale(0.1, 0.1); - transform-origin: 0% 0%; - -ms-transform-origin: 0% 0%; - -moz-transform-origin: 0% 0%; - -webkit-transform-origin: 0% 0%; - transition: opacity 0.8s, transform 0.8s; - -ms-transition: opacity 0.8s, -ms-transform 0.8s; - -moz-transition: opacity 0.8s, -moz-transform 0.8s; - -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; -} - -.nav h22 a { - color: #dadada; - text-decoration: none; - text-transform: uppercase; -} - - -[id='nav-toggle']:checked ~ .nav h22 { - opacity: 1; - transform: scale(1, 1); - -ms-transform: scale(1, 1); - -moz-transform: scale(1, 1); - -webkit-transform: scale(1, 1); -} - - - -.nav > ul { - display: block; - margin: 0; - padding: 0; - list-style: none; -} - -.nav > ul > li { - line-height: 2.5; - opacity: 0; - -webkit-transform: translateX(50%); - -moz-transform: translateX(50%); - -ms-transform: translateX(50%); - transform: translateX(50%); - -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s; - -moz-transition: opacity .5s .1s, -moz-transform .5s .1s; - -ms-transition: opacity .5s .1s, -ms-transform .5s .1s; - transition: opacity .5s .1s, transform .5s .1s; -} - -[id='nav-toggle']:checked ~ .nav > ul > li { - opacity: 1; - -webkit-transform: translateX(0); - -moz-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); -} - - -.nav > ul > li:nth-child(2) { - -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s; - transition: opacity .5s .2s, transform .5s .2s; -} - -.nav > ul > li:nth-child(3) { - -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s; - transition: opacity .5s .3s, transform .5s .3s; -} - -.nav > ul > li:nth-child(4) { - -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s; - transition: opacity .5s .4s, transform .5s .4s; -} - -.nav > ul > li:nth-child(5) { - -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s; - transition: opacity .5s .5s, transform .5s .5s; -} - -.nav > ul > li:nth-child(6) { - -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s; - transition: opacity .5s .6s, transform .5s .6s; -} - -.nav > ul > li:nth-child(7) { - -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s; - transition: opacity .5s .7s, transform .5s .7s; -} - - - - -.nav > ul > li > a { - display: inline-block; - position: relative; - padding: 0; - font-family: 'Open Sans', sans-serif; - font-weight: 300; - font-size: 1.2em; - color: #dadada; - width: 100%; - text-decoration: none; - - -webkit-transition: color .5s ease, padding .5s ease; - -moz-transition: color .5s ease, padding .5s ease; - transition: color .5s ease, padding .5s ease; -} - - - - -.nav > ul > li > a:hover, -.nav > ul > li > a:focus { - color: white; - padding-left: 15px; -} - - - - -.nav > ul > li > a:before { - content: ''; - display: block; - position: absolute; - right: 0; - bottom: 0; - height: 1px; - width: 100%; - -webkit-transition: width 0s ease; - transition: width 0s ease; -} - -.nav > ul > li > a:after { - content: ''; - display: block; - position: absolute; - left: 0; - bottom: 0; - height: 1px; - width: 100%; - background: #3bc1a0; - -webkit-transition: width .5s ease; - transition: width .5s ease; -} - - - - -.nav > ul > li > a:hover:before { - width: 0%; - background: #3bc1a0; - -webkit-transition: width .5s ease; - transition: width .5s ease; -} - -.nav > ul > li > a:hover:after { - width: 0%; - background: transparent; - -webkit-transition: width 0s ease; - transition: width 0s ease; -} - diff --git a/public/css/style.css b/public/css/style.css deleted file mode 100644 index ce9b6b4cc..000000000 --- a/public/css/style.css +++ /dev/null @@ -1,140 +0,0 @@ -@charset "UTF-8"; -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,cyrillic); - -* { - box-sizing: border-box; -} - - -html { - font-size: 100%; -} -html, -body { - margin: 0; - padding: 0; - width: 100%; - height: 100%; -} - -body { - color: rgb(229, 224, 216); - font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - /* font: 1em 'Open Sans', sans-serif; */ - background-color: #f1f1f1; -} - - - - - - -main { - max-width: 1024px; - margin: 0 auto -} - -article { - margin: 0 1em; - padding: 0 22px; - -webkit-transition: -webkit-transform .3s; - -moz-transition: : -moz-transform .3s; - transition: transform .3s; -} - -header { - margin: 0; - padding: 0; - text-align: center; -} - -footer { - font-size: 14px; - text-align: center -} - -p { - margin-bottom: 16px; -} - -hr { - margin: 22px 0; - height: 1px; - border: 0; - background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); - background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); - background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); - background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); -} - -h1, -h2 { - margin-bottom: 22px; - color: #191919; - font-weight: 300; -} - -h1 { - font-size: 32px; - line-height: 32px; -} - -h2 { - color: #565d66; - font-size: 26px; - line-height: 26px; -} - -a { - color: #006b05; - text-decoration: none; -} -.btn { - -webkit-border-radius: 10em; - -moz-border-radius: 10em; - -ms-border-radius: 10em; - -o-border-radius: 10em; - border-radius: 10em; - border: 0; - color: #fff!important; - margin: 6px; - white-space: normal!important; - word-wrap: break-word; - display: inline-block; - line-height: 1.25; - text-align: center; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - padding: .5rem 1rem; - font-size: 1rem; - font-weight: 400; - -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); - -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); - box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); -} -.btn { - -webkit-transition: box-shadow .2s ease-out; - -moz-transition: box-shadow .2s ease-out; - -ms-transition: box-shadow .2s ease-out; - transition: box-shadow .2s ease-out; -} -.btn:hover { - -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15); - -moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15); - box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15); -} -.btn-primary { - border: 2px solid #2BBBAD; - color: #00695c!important; - background-color: transparent; -} - -.btn-secondary { - border: 2px solid #00C851; - color: #007E33!important; - background-color: transparent; -} diff --git a/public/index.html b/public/index.html index 6b7e6cb3e..0bf1d3a32 100644 --- a/public/index.html +++ b/public/index.html @@ -5,8 +5,6 @@ - -