diff --git a/new-page.html b/new-page.html
index b518e33..37beb49 100644
--- a/new-page.html
+++ b/new-page.html
@@ -12,10 +12,10 @@
-
+
-
-
+
+
diff --git a/static/css/index-mobile.css b/static/css/index-mobile.css
new file mode 100644
index 0000000..e8b553d
--- /dev/null
+++ b/static/css/index-mobile.css
@@ -0,0 +1,755 @@
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .services-inner-box h2 {
+ left: 100px;
+ }
+
+ .services-inner-box {
+ padding: 5px;
+ }
+
+ .services-inner-box h2 {
+ top: 20px;
+ font-size: 18px;
+ }
+
+ .services-inner-box p {
+ bottom: -5px;
+ }
+
+ .home-bottom div {
+ line-height: 90px;
+ font-size: 30px;
+ }
+
+ .heading h1 {
+ font-size: 25px;
+ }
+
+ .home-bottom {
+ height: 90px;
+ }
+
+ .about-img {
+ width: 90%;
+ }
+
+ .opus-grid:hover .opus-title,
+ .demo-grid:hover .demo-title {
+ color: #4a4b65;
+ }
+
+ #opus.body_dark .opus-grid:hover .opus-title,
+ #demo.body_dark .demo-grid:hover .demo-title {
+ color: #aaaaaa;
+ }
+
+ .like-wrapper {
+ margin-left: 63px;
+ }
+
+ .article-single h2 {
+ font-size: 20px !important;
+ }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+ .services-inner-box h2 {
+ left: 95px;
+ }
+
+ .navbar-dark .navbar-brand {
+ width: 120px;
+ }
+
+ .navbar-dark .navbar-nav .nav-link::after {
+ display: none;
+ }
+
+ .navbar-dark .navbar-toggler {
+ color: #333;
+ border-color: #333;
+ -webkit-transition: all .5s;
+ transition: all .5s;
+ }
+
+ .navbar-dark.body_dark .navbar-toggler {
+ color: #ddd;
+ border-color: #ddd;
+ -webkit-transition: all .5s;
+ transition: all .5s;
+ }
+
+ #about .message-box h3, .section-title h3 {
+ font-size: 28px;
+ margin: 0 0 15px;
+ }
+
+ #about img {
+ margin-top: 53px;
+ }
+
+ .section-title p {
+ font-size: 14px;
+ }
+
+ .filter-button-group button {
+ padding: 5px 10px;
+ margin: 4px 2px;
+ }
+
+ .filter-button-group {
+ text-align: center !important;
+ margin: 0;
+ }
+
+ .post-box {
+ margin-bottom: 30px;
+ }
+
+ .footer-distributed .footer-left {
+ text-align: center;
+ }
+
+ .toggle {
+ margin: 0 !important;
+ }
+
+ .heading h1 {
+ font-size: 25px;
+ letter-spacing: .15em;
+ }
+
+ .heading p {
+ font-size: 14px;
+ }
+
+ .section {
+ padding: 100px 0 53px;
+ }
+
+ .section-title {
+ margin-bottom: 20px;
+ }
+
+ .post-box .date {
+ padding: 5px 10px;
+ }
+
+ body::after {
+ background-size: auto 100%;
+ }
+
+ .navbar {
+ padding: .5rem 1rem;
+ }
+
+ #mainNav .navbar-collapse {
+ padding: 0;
+ }
+
+ #git {
+ padding-bottom: 20px;
+ }
+
+ #git .section-title, #contact .section-title {
+ margin-bottom: 30px;
+ }
+
+ .home-bottom {
+ padding: 10px 25px;
+ margin: 3px 0;
+ }
+
+ .home-bottom div {
+ line-height: 80px;
+ font-size: 25px;
+ }
+
+ .navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active {
+ border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
+ }
+
+ .heading .h1-top {
+ margin-top: 100px;
+ }
+
+ .about-img {
+ width: 100%;
+ }
+
+ .footer-right {
+ float: left !important;
+ }
+
+ .copyrights {
+ padding: 3px 0 0 !important;
+ }
+
+ .services-inner-box {
+ padding: 0;
+ margin: 20px 0 0;
+ }
+
+ .ser-icon i {
+ display: none;
+ }
+
+ .services-inner-box h2 {
+ top: 20px;
+ left: 20px;
+ font-size: 16px;
+ }
+
+ .services-inner-box p {
+ margin-bottom: 0.7rem;
+ }
+
+ .footer-distributed {
+ margin: 10px 0;
+ }
+
+ .footer-links a, .footer-links span {
+ font-size: 11px !important;
+ }
+
+ .footer-links img {
+ width: 14px;
+ }
+
+ #contact {
+ padding: 20px 0 60px;
+ }
+
+ .note-menu, .api-menu {
+ margin-bottom: 15px;
+ }
+
+ .note-single, .api-single {
+ margin: 12px 0 18px;
+ }
+
+ body {
+ background-size: auto 100%;
+ }
+
+ .clock {
+ top: 4rem;
+ }
+
+ .opus-grid:hover .opus-title,
+ .demo-grid:hover .demo-title {
+ color: #4a4b65;
+ }
+
+ #opus.body_dark .opus-grid:hover .opus-title,
+ #demo.body_dark .demo-grid:hover .demo-title {
+ color: #aaaaaa;
+ }
+
+ .like-wrapper {
+ bottom: 3%;
+ left: 50%;
+ margin-left: 55px;
+ }
+
+ .like {
+ font-size: 12px;
+ }
+
+ .article-all {
+ padding: 0;
+ }
+
+ .article-title h3 {
+ font-size: 28px;
+ margin: 0 0 15px;
+ }
+
+ .article-single h2 {
+ font-size: 18px !important;
+ }
+}
+
+@media (max-width: 767px) {
+ .navbar-dark .navbar-brand {
+ width: 120px;
+ }
+
+ .navbar-dark .navbar-nav .nav-link::after {
+ display: none;
+ }
+
+ .navbar-dark .navbar-toggler {
+ color: #333;
+ border-color: #333;
+ -webkit-transition: all .5s;
+ transition: all .5s;
+ }
+
+ .navbar-dark.body_dark .navbar-toggler {
+ color: #ddd;
+ border-color: #ddd;
+ -webkit-transition: all .5s;
+ transition: all .5s;
+ }
+
+ #about .message-box h3, .section-title h3 {
+ font-size: 28px;
+ margin: 0 0 15px;
+ }
+
+ #about img {
+ margin-top: 20px;
+ }
+
+ .section-title p {
+ font-size: 14px;
+ }
+
+ .filter-button-group button {
+ padding: 5px 10px;
+ margin: 4px 2px;
+ }
+
+ .filter-button-group {
+ text-align: center !important;
+ margin: 0;
+ }
+
+ .post-box {
+ margin-bottom: 30px;
+ }
+
+ .footer-distributed .footer-left {
+ text-align: center;
+ }
+
+ .toggle {
+ margin: 0 !important;
+ }
+
+ .heading h1 {
+ font-size: 25px;
+ letter-spacing: .15em;
+ }
+
+ .heading p {
+ font-size: 14px;
+ }
+
+ .section {
+ padding: 100px 0 53px;
+ }
+
+ .section-title {
+ margin-bottom: 20px;
+ }
+
+ .post-box .date {
+ padding: 5px 10px;
+ }
+
+ body::after {
+ background-size: auto 100%;
+ }
+
+ .navbar {
+ padding: .5rem 1rem;
+ }
+
+ #mainNav .navbar-collapse {
+ padding: 0;
+ }
+
+ #git {
+ padding-bottom: 20px;
+ }
+
+ #git .section-title, #contact .section-title {
+ margin-bottom: 30px;
+ }
+
+ .home-bottom {
+ padding: 10px 25px;
+ margin: 0;
+ }
+
+ .home-bottom div {
+ line-height: 80px;
+ font-size: 25px;
+ }
+
+
+ .navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active {
+ border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
+ }
+
+ .heading .h1-top {
+ margin-top: 110px;
+ }
+
+ .about-img {
+ width: 100%;
+ }
+
+ .footer-right {
+ float: left !important;
+ }
+
+ .copyrights {
+ padding: 2px 0 0 !important;
+ }
+
+ .services-inner-box {
+ padding: 0;
+ margin: 20px 0 0;
+ }
+
+ .services-inner-box h2 {
+ top: 20px;
+ left: 100px;
+ }
+
+ .services-inner-box p {
+ margin-bottom: 0.7rem;
+ }
+
+ .footer-distributed {
+ margin: 10px 0;
+ }
+
+ .footer-links a, .footer-links span {
+ font-size: 11px !important;
+ }
+
+ .footer-links img {
+ width: 14px;
+ }
+
+ #contact {
+ padding: 20px 0 60px;
+ }
+
+ .note-menu, .api-menu {
+ margin-bottom: 15px;
+ }
+
+ .note-single, .api-single {
+ margin: 12px 0 18px;
+ }
+
+ body {
+ background-size: auto 100%;
+ }
+
+ .clock {
+ top: 5rem;
+ }
+
+ .opus-grid:hover .opus-title,
+ .demo-grid:hover .demo-title {
+ color: #4a4b65;
+ }
+
+ #opus.body_dark .opus-grid:hover .opus-title,
+ #demo.body_dark .demo-grid:hover .demo-title {
+ color: #aaaaaa;
+ }
+
+ .like-wrapper {
+ bottom: 3%;
+ left: 50%;
+ margin-left: 55px;
+ }
+
+ .like {
+ font-size: 12px;
+ }
+
+ .article-all {
+ padding: 0;
+ }
+
+ .article-title h3 {
+ font-size: 28px;
+ margin: 0 0 15px;
+ }
+
+ .article-single h2 {
+ font-size: 20px !important;
+ }
+}
+
+@media only screen and (min-width: 280px) and (max-width: 599px) {
+ .navbar-dark .navbar-brand {
+ width: 120px;
+ }
+
+ .navbar-dark .navbar-nav .nav-link::after {
+ display: none;
+ }
+
+ .navbar-dark .navbar-toggler {
+ color: #333;
+ border-color: #333;
+ -webkit-transition: all .5s;
+ transition: all .5s;
+ }
+
+ .navbar-dark.body_dark .navbar-toggler {
+ color: #ddd;
+ border-color: #ddd;
+ -webkit-transition: all .5s;
+ transition: all .5s;
+ }
+
+ #about .message-box h3, .section-title h3 {
+ font-size: 28px;
+ margin: 0 0 15px;
+ }
+
+ #about img {
+ margin-top: 20px;
+ }
+
+ .section-title p {
+ font-size: 14px;
+ }
+
+ .filter-button-group button {
+ padding: 5px 10px;
+ margin: 4px 2px;
+ }
+
+ .filter-button-group {
+ text-align: center !important;
+ margin: 0;
+ }
+
+ .post-box {
+ margin-bottom: 30px;
+ }
+
+ .footer-distributed .footer-left {
+ text-align: center;
+ }
+
+ .toggle {
+ margin: 0 !important;
+ }
+
+ .heading h1 {
+ font-size: 25px;
+ letter-spacing: .15em;
+ }
+
+ .heading p {
+ font-size: 14px;
+ }
+
+ .section {
+ padding: 100px 0 45px;
+ }
+
+ .section-title {
+ margin-bottom: 20px;
+ }
+
+ .post-box .date {
+ padding: 5px 10px;
+ }
+
+ body::after {
+ background-size: auto 100%;
+ }
+
+ .navbar {
+ padding: .5rem 1rem;
+ }
+
+ #mainNav .navbar-collapse {
+ padding: 0;
+ }
+
+ #git {
+ padding-bottom: 20px;
+ }
+
+ #git .section-title, #contact .section-title {
+ margin-bottom: 30px;
+ }
+
+ .home-bottom {
+ height: 70px;
+ padding: 10px;
+ margin: 0;
+ }
+
+ .home-bottom div {
+ line-height: 50px;
+ font-size: 22px;
+ }
+
+
+ .navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active {
+ border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
+ }
+
+ .heading .h1-top {
+ margin-top: 110px;
+ }
+
+ .about-img {
+ width: 100%;
+ }
+
+ .footer-right {
+ float: left !important;
+ }
+
+ .copyrights {
+ padding: 8px 0 !important;
+ }
+
+ .services-inner-box, .article-single {
+ padding: 0;
+ margin: 20px 0 0;
+ -webkit-box-shadow: .1rem .1rem .2rem var(--greyLight-2), -.1rem -.1rem .2rem var(--white);
+ box-shadow: .1rem .1rem .2rem var(--greyLight-2), -.1rem -.1rem .2rem var(--white);
+ }
+
+ .services-inner-box:active, .article-single:active {
+ -webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white;
+ box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white;
+ }
+
+ .services-inner-box.body_dark, .article-single.body_dark {
+ -webkit-box-shadow: .1rem .1rem .2rem rgba(0, 0, 0, 0.4), -.1rem -.1rem .2rem rgba(66, 66, 66, 0.4);
+ box-shadow: .1rem .1rem .2rem rgba(0, 0, 0, 0.4), -.1rem -.1rem .2rem rgba(66, 66, 66, 0.4);
+ }
+
+ .services-inner-box.body_dark:active, .article-single.body_dark:active {
+ -webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyDark), inset -0.1rem -0.1rem 0.2rem var(--primary-dark-2);
+ box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyDark), inset -0.1rem -0.1rem 0.2rem var(--primary-dark-2);
+ }
+
+ .services-inner-box h2 {
+ top: 20px;
+ left: 100px;
+ }
+
+ .services-inner-box p {
+ margin-bottom: 0.7rem;
+ }
+
+ .footer-distributed {
+ margin: 10px 0;
+ }
+
+ .footer-links a, .footer-links span {
+ font-size: 12px !important;
+ }
+
+ .footer-links img {
+ width: 16px;
+ }
+
+ #contact {
+ padding: 20px 0 60px;
+ }
+
+ .note-menu, .api-menu {
+ margin-bottom: 15px;
+ }
+
+ .note-single, .api-single {
+ margin: 12px 0 18px;
+ }
+
+ body {
+ background-size: auto 100%;
+ }
+
+ .opus-grid:hover .opus-title,
+ .demo-grid:hover .demo-title {
+ color: #4a4b65;
+ }
+
+ #opus.body_dark .opus-grid:hover .opus-title,
+ #demo.body_dark .demo-grid:hover .demo-title {
+ color: #aaaaaa;
+ }
+
+ .like-wrapper {
+ bottom: 6%;
+ left: 50%;
+ margin-left: 50px;
+ }
+
+ .like {
+ font-size: 12px;
+ }
+
+ .dmtop.show {
+ bottom: 82px;
+ }
+
+ .footer-right {
+ display: none;
+ }
+
+ #about .message-box p {
+ -o-user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ -khtml-user-select: none;
+ user-select: none;
+ }
+
+ .article-single {
+ height: 80px !important;
+ padding: 10px !important;
+ margin: 10px 0 12px !important;
+ }
+
+ .article-single h2 {
+ font-size: 20px !important;
+ margin-right: 5px !important;
+ }
+
+ .article-single p {
+ right: 20px !important;
+ bottom: 0 !important;
+ margin-bottom: 10px !important;
+ }
+
+ .home-bottom div, .clock, .body-login .btn, #contact .contact_form, #sendMessageButton, .checkbox__1 label {
+ -webkit-box-shadow: 0.1rem 0.1rem 0.2rem var(--greyLight-2), -0.1rem -0.1rem 0.2rem var(--white);
+ box-shadow: 0.1rem 0.1rem 0.2rem var(--greyLight-2), -0.1rem -0.1rem 0.2rem var(--white);
+ }
+
+ #contact.body_dark .checkbox__1 label, #contact.body_dark #sendMessageButton, #home.body_dark .home-bottom div, body.body_dark .clock, body.body_dark .btn-default, #contact.body_dark .contact_form {
+ -webkit-box-shadow: 0.1rem 0.1rem 0.2rem var(--greyDark), -0.1rem -0.1rem 0.2rem var(--primary-dark);
+ box-shadow: 0.1rem 0.1rem 0.2rem var(--greyDark), -0.1rem -0.1rem 0.2rem var(--primary-dark);
+ }
+
+ .checkbox__1 input:checked ~ label, .home-bottom div:active, .clock .marker, .body-login .btn:active, .body-login .form-group .input, #contact .contact_form .form-group, #sendMessageButton:active {
+ -webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem var(--white);
+ box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem var(--white);
+ }
+
+ #contact.body_dark .checkbox__1 input:checked ~ label, #contact.body_dark #sendMessageButton:active, #home.body_dark .home-bottom div:active, body.body_dark .clock .marker, body.body_dark .clock .marker::after, body.body_dark .body-login .form-group .input, body.body_dark .btn-default:active, #contact.body_dark .contact_form .form-group {
+ box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyDark), inset -0.1rem -0.1rem 0.2rem var(--primary-dark-2);
+ }
+
+ .dmtop {
+ -webkit-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.12), -0.1rem -0.1rem 0.2rem rgba(255, 255, 255, 0.7);
+ box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.12), -0.1rem -0.1rem 0.2rem rgba(255, 255, 255, 0.7);
+ }
+
+ .dmtop:active {
+ -webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white;
+ box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white;
+ }
+}
\ No newline at end of file
diff --git a/static/css/index.css b/static/css/index.css
new file mode 100644
index 0000000..7ca36c3
--- /dev/null
+++ b/static/css/index.css
@@ -0,0 +1,695 @@
+:root {
+ --primary-light: #8abdff;
+ --primary: #6d5dfc;
+ --light-navbar: #E4EBF8;
+ --dark-navbar: #191c23;
+ --primary-dark: #2f2f32;
+ --primary-dark-2: #39393c;
+ --greyLight-1: #E4EBF8;
+ --greyLight-2: #c8d0e7;
+ --greyLight-3: #1c1c1d;
+ --greyDark: #091318;
+ --greyBodyDark: #1a1d24;
+ --a-dark-hover: #68a7eb;
+ --white: #ffffff;
+ --darkorange: rgb(255, 153, 0);
+}
+
+body {
+ color: #999999;
+ font-size: 14px;
+ -webkit-font-smoothing: antialiased;
+ font-family: "Microsoft Yahei Light", "Microsoft Yahei", PingFangSC-Regular, Helvetica, sans-serif;
+ line-height: 1.80857;
+ background-color: var(--greyLight-1);
+ letter-spacing: 0.1em;
+ -o-user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ -khtml-user-select: none;
+ user-select: none;
+}
+
+#about .message-box p, .blog {
+ -o-user-select: text;
+ -moz-user-select: text;
+ -webkit-user-select: text;
+ -ms-user-select: text;
+ -khtml-user-select: text;
+ user-select: text;
+}
+
+.go-back, .like, .contact_form .form-control, .checkbox__1 label span, .checkbox__1 label, .filter-button-group button, .clock, .clock .marker span, .clock .marker, .clock .marker::after, td, th, .text-primary, code, body, .section, .contact_form .input, .about-img img, .contact_form, .contact_form .form-group, #sendMessageButton, .footer-links span, .btn, .btn:hover, h3, h3:hover, .heading h1, .navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .heading h3 span, .heading h3 span:hover, a, .toggle, .home-bottom div, .home-bottom div:hover, .navbar-dark .navbar-nav .nav-link::after, .services-inner-box, .services-inner-box:hover, .post-info span, .services-inner-box p span, .services-inner-box i, .demo-single, .demo-single:hover, .demo-title, .demo-grid:hover .demo-title, .opus-single, .opus-single:hover, .opus-title, .opus-grid:hover .opus-title, .post-box, .post-box:hover, .post-box .post-thumb::before, .navbar-brand p, #mainNav .logo, #mainNav .logo-dark, #mainNav.body_dark .logo, #mainNav.body_dark .logo-dark, .navbar.body_dark .navbar-brand p, .section.body_dark .post-box .post-thumb::before, .btn-hover-new {
+ -webkit-transition: all .3s ease-in-out;
+ -moz-transition: all .3s ease-in-out;
+ -ms-transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ transition: all .3s ease-in-out;
+}
+
+a {
+ color: #1f1f1f;
+ text-decoration: none !important;
+ outline: none !important;
+}
+
+a:hover {
+ color: var(--darkorange);
+}
+
+h1, h2, h3, h4, h5, h6 {
+ letter-spacing: 0;
+ font-weight: normal;
+ position: relative;
+ padding: 0 0 10px 0;
+ font-weight: normal;
+ line-height: 120% !important;
+ color: #333333;
+ margin: 0
+}
+
+h1 {
+ font-size: 24px
+}
+
+h2 {
+ font-size: 22px
+}
+
+h3 {
+ font-size: 18px
+}
+
+h4 {
+ font-size: 16px
+}
+
+h5 {
+ font-size: 14px
+}
+
+h6 {
+ font-size: 13px
+}
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+ color: #212121;
+ text-decoration: none !important;
+ opacity: 1
+}
+
+h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
+ opacity: .8
+}
+
+ul, li, ol {
+ margin: 0;
+ list-style: none;
+ padding: 0;
+}
+
+img {
+ width: 100%;
+}
+
+/*------------------------------------------------------------------
+HEADER
+-------------------------------------------------------------------*/
+.navbar {
+ background-color: rgba(0, 0, 0, 0);
+}
+
+.navbar-dark {
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ -o-transition: all 0.5s;
+ transition: all 0.5s;
+}
+
+.navbar-dark .navbar-nav .nav-item {
+ border-bottom: 2px solid rgba(0, 0, 0, 0);
+}
+
+.navbar-dark .navbar-nav .nav-item:hover {
+ border-bottom: 2px solid #333333;
+}
+
+.navbar-dark .navbar-nav .nav-item.active {
+ border-bottom: 2px solid var(--darkorange);
+}
+
+.navbar-dark .navbar-nav .nav-item.active a, .footer-links a.active {
+ color: var(--darkorange) !important;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+ width: 100%;
+ text-align: center;
+ color: white;
+ font-size: 14px;
+ position: relative;
+}
+
+.navbar-dark .navbar-nav .nav-link:hover {
+ color: white;
+}
+
+.navbar-dark .navbar-nav .nav-link.active {
+ font-weight: 600;
+}
+
+.navbar-dark .navbar-nav .nav-link::after {
+ content: '';
+ width: 0;
+ height: 3px;
+ background: white;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ margin: 0 auto;
+ border-radius: 0;
+ z-index: -1;
+}
+
+.navbar-dark .navbar-nav .nav-link.active::after {
+ width: 50%;
+}
+
+/*------------------------------------------------------------------
+SECTIONS
+-------------------------------------------------------------------*/
+/* 自动显示隐藏导航栏（优化版） */
+.show-none {
+ top: -60px;
+}
+
+/* 导航栏背景色 */
+#mainNav.navbar-shrink {
+ background-color: var(--light-navbar);
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ -o-transition: all 0.5s;
+ transition: all 0.5s;
+ box-shadow: 0.15rem 0.15rem 0.3rem rgba(0, 0, 0, 0.08), 0 0 0 rgba(0, 0, 0, 0);
+}
+
+/* 导航栏菜单文本颜色 */
+#mainNav .nav-link, #mainNav .nav-link:hover {
+ color: var(--greyBodyDark);
+}
+
+#mainNav.navbar-shrink .nav-link, #mainNav.navbar-shrink .nav-link:hover {
+ color: var(--greyBodyDark);
+}
+
+.navbar {
+ padding: 0;
+}
+
+#mainNav .navbar-collapse {
+ padding: 0.5rem 0;
+}
+
+button:focus {
+ outline: none !important;
+}
+
+.section {
+ display: block;
+ position: relative;
+ overflow: hidden;
+ padding: 120px 0 88px;
+}
+
+.section-title {
+ display: block;
+ position: relative;
+ margin-bottom: 30px;
+}
+
+.section-title h3 {
+ font-size: 38px;
+ line-height: 62px;
+ margin: 0 0 15px;
+ padding: 0;
+ color: #222222;
+ text-transform: none;
+ letter-spacing: 10px;
+}
+
+.btn-hover-new {
+ color: #333333;
+ position: relative;
+ background-color: #fff;
+ overflow: hidden;
+ padding: 0 18px;
+ display: inline-block;
+}
+
+.sim-btn {
+ line-height: 55px;
+ height: 55px;
+ width: 90%;
+ border-radius: 0.3em;
+ text-align: center;
+ margin-right: auto;
+ margin-left: auto;
+ margin-top: 0;
+ cursor: pointer;
+}
+
+.btn-hover-new:hover {
+ color: white;
+ background-color: #333333;
+}
+
+.services-inner-box {
+ position: relative;
+ padding: 15px;
+ background: var(--greyLight-1);
+ margin-bottom: 30px;
+ border-radius: 1em;
+ -webkit-box-shadow: .2rem .2rem .4rem var(--greyLight-2), -.2rem -.2rem .4rem var(--white);
+ box-shadow: .2rem .2rem .4rem var(--greyLight-2), -.2rem -.2rem .4rem var(--white);
+}
+
+.services-inner-box:active, .article-single:active {
+ -webkit-box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyLight-2), inset -0.2rem -0.2rem 0.4rem white;
+ box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyLight-2), inset -0.2rem -0.2rem 0.4rem white;
+}
+
+.article-single {
+ position: relative;
+ height: 100px;
+ margin: 20px 0 20px;
+ padding: 15px;
+ border-radius: 1em;
+ -webkit-box-shadow: .2rem .2rem .4rem var(--greyLight-2), -.2rem -.2rem .4rem var(--white);
+ box-shadow: .2rem .2rem .4rem var(--greyLight-2), -.2rem -.2rem .4rem var(--white);
+ -o-user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ -khtml-user-select: none;
+ user-select: none;
+}
+
+.article-single h2 {
+ position: absolute;
+ font-size: 21px;
+ font-weight: 600;
+ top: 25px;
+ left: 30px;
+ margin-right: 20px;
+}
+
+.ser-icon {
+ float: left;
+ width: 90px;
+ height: 90px;
+ text-align: center;
+ line-height: 90px;
+}
+
+.ser-icon i {
+ font-size: 50px;
+ color: #333333;
+}
+
+.services-inner-box h2 {
+ position: absolute;
+ font-size: 22px;
+ font-weight: 600;
+ top: 30px;
+ left: 120px;
+ padding-right: 10px;
+}
+
+.services-inner-box p, .article-single p {
+ color: #333;
+ position: absolute;
+ right: 20px;
+ bottom: 0;
+}
+
+.services-inner-box p span {
+ color: #333333;
+}
+
+.services-inner-box:active > h2, .article-single:active > h2 {
+ color: var(--darkorange);
+}
+
+/*------------------------------------------------------------------
+PORTFOLIO
+-------------------------------------------------------------------*/
+/* 滚动特效 */
+.isotope-item {
+ z-index: 2;
+}
+
+.isotope-hidden.isotope-item {
+ pointer-events: none;
+ z-index: 1;
+}
+
+.isotope, .isotope .isotope-item {
+ -webkit-transition-duration: 0.8s;
+ -moz-transition-duration: 0.8s;
+ transition-duration: 0.8s;
+}
+
+.isotope {
+ -webkit-transition-property: height, width;
+ -moz-transition-property: height, width;
+ transition-property: height, width;
+}
+
+.isotope .isotope-item {
+ -webkit-transition-property: -webkit-transform, opacity;
+ -moz-transition-property: -moz-transform, opacity;
+ transition-property: transform, opacity;
+}
+
+.filter-button-group {
+ border-radius: 0;
+ margin: 10px 0;
+ display: inline-block;
+}
+
+.filter-button-group button.active {
+ color: var(--darkorange);
+ outline: none;
+ background: rgba(0, 0, 0, 0);
+ box-shadow: inset 0.15rem 0.15rem 0.2rem var(--greyLight-2), inset -0.15rem -0.15rem 0.2rem white;
+}
+
+.filter-button-group button {
+ border: none;
+ color: #333;
+ letter-spacing: 1px;
+ font-weight: 600;
+ font-size: 14px;
+ cursor: pointer;
+ background: rgba(0, 0, 0, 0);
+ padding: 8px 24px;
+ margin: 0 3px;
+ border-radius: 0.3em;
+ outline: none;
+ box-shadow: .1rem .1rem .2rem var(--greyLight-2), -.1rem -.1rem .2rem var(--white);
+}
+
+/*------------------------------------------------------------------
+FOOTER
+-------------------------------------------------------------------*/
+.footer-links {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.footer-links a, .footer-links span {
+ color: #999999;
+ font-size: 13px;
+}
+
+.footer-links a.footer-links-gov {
+ font-size: 12px;
+}
+
+.footer-links img {
+ position: relative;
+ width: 17px;
+ top: -1px;
+}
+
+.footer-links a:hover, .footer a:hover, .footer-links a .iconfont:hover {
+ color: var(--darkorange) !important;
+}
+
+.copyrights {
+ box-sizing: border-box;
+ width: 100%;
+ text-align: left;
+ padding: 25px 0 !important;
+ overflow: hidden;
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0), -0.2rem -0.2rem 0.4rem rgba(255, 255, 255, 0.45);
+}
+
+/* Footer left */
+.footer-distributed .footer-left {
+ float: left;
+}
+
+.footer-distributed .footer-right {
+ float: right;
+}
+
+.footer-distributed .footer-links {
+ margin: 0 0 10px;
+ padding: 0;
+}
+
+.footer-distributed .footer-links a {
+ line-height: 1.8;
+ text-decoration: none;
+}
+
+.copyrights .modal .modal-dialog {
+ position: fixed;
+ left: 50%;
+ margin-left: -100px;
+ bottom: 130px;
+}
+
+.copyrights .modal img {
+ border-radius: 0.3em;
+}
+
+/*------------------------------------------------------------------
+MISC
+-------------------------------------------------------------------*/
+.dmtop.show {
+ bottom: 85px;
+ z-index: 10;
+}
+
+.dmtop {
+ background-color: var(--greyLight-1);
+ z-index: 100;
+ width: 50px;
+ height: 50px;
+ line-height: 47px;
+ position: fixed;
+ bottom: -100px;
+ border-radius: 3px;
+ right: 50px;
+ text-align: center;
+ font-size: 28px;
+ color: #777777 !important;
+ cursor: pointer;
+ -webkit-transition: all .5s ease-in-out;
+ -moz-transition: all .5s ease-in-out;
+ -o-transition: all .5s ease-in-out;
+ -ms-transition: all .5s ease-in-out;
+ transition: all .5s ease-in-out;
+ box-shadow: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.12), -0.2rem -0.2rem 0.4rem rgba(255, 255, 255, 0.7);
+}
+
+.dmtop:active {
+ -webkit-box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyLight-2), inset -0.2rem -0.2rem 0.4rem white;
+ box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyLight-2), inset -0.2rem -0.2rem 0.4rem white;
+}
+
+/* logo */
+.navbar-brand {
+ width: 120px;
+ height: 32px;
+ margin: -1px 0 0;
+ padding: 0;
+}
+
+.navbar-brand p {
+ margin: 0;
+ padding: 0 10px;
+ text-align: center;
+ color: #000;
+}
+
+.toggle {
+ position: relative;
+ display: inline-block;
+ width: 50px;
+ height: 38px;
+ font-size: 45px !important;
+ line-height: 38px;
+ margin-right: 5px;
+ color: var(--greyBodyDark);
+ transition: all 500ms;
+}
+
+.toggle:hover {
+ color: #222222;
+}
+
+/*------------------------------------------------------------------
+dark模式
+-------------------------------------------------------------------*/
+#mainNav .logo, #mainNav .logo-dark, #mainNav.body_dark .logo, #mainNav.body_dark .logo-dark {
+ position: absolute;
+}
+
+#mainNav .logo, #mainNav.body_dark .logo-dark {
+ opacity: 1;
+}
+
+#mainNav.body_dark .logo, #mainNav .logo-dark {
+ opacity: 0;
+}
+
+.navbar.body_dark .navbar-brand p {
+ color: #f2f3f4;
+}
+
+.navbar-dark.body_dark .navbar-nav .nav-item:hover {
+ border-bottom: 2px solid #f2f3f5;
+}
+
+.navbar-dark.body_dark .navbar-nav .nav-item.active {
+ border-bottom: 2px solid var(--a-dark-hover);
+}
+
+.navbar-dark.body_dark .navbar-nav .nav-item.active a, body.body_dark .footer-links a.active {
+ color: var(--a-dark-hover) !important;
+}
+
+.services-inner-box.body_dark, body.body_dark .dmtop, .article-single.body_dark {
+ background-color: var(--greyBodyDark);
+ box-shadow: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.4), -0.2rem -0.2rem 0.4rem rgba(66, 66, 66, 0.4);
+}
+
+body.body_dark .dmtop {
+ color: #999999 !important;
+}
+
+.section.body_dark .post-info {
+ background-color: #3f3f3f;
+}
+
+#contact.body_dark .contact_form .form-control {
+ color: #dedede;
+ background-color: rgba(255, 255, 255, .99);
+ box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
+}
+
+#contact.body_dark .btn-hover-new {
+ background-color: #333;
+}
+
+.section.body_dark .post-box {
+ box-shadow: 0 0 15px var(--greyBodyDark);
+}
+
+.section.body_dark .post-box:hover .post-thumb::before {
+ opacity: 0.9;
+}
+
+.section.body_dark .post-box .post-thumb::before {
+ opacity: 0;
+}
+
+/* 导航栏背景色 */
+#mainNav.navbar-shrink.body_dark {
+ background-color: var(--dark-navbar);
+}
+
+/* 导航栏菜单文本颜色 */
+#mainNav.body_dark .nav-link, #mainNav.body_dark .nav-link:hover {
+ color: #f2f3f5;
+}
+
+#mainNav.navbar-shrink.body_dark .nav-link, #mainNav.navbar-shrink.body_dark .nav-link:hover {
+ color: #f2f3f5;
+}
+
+/* 导航栏活跃菜单底部划线颜色 */
+body.body_dark {
+ background-color: var(--greyBodyDark);
+}
+
+#mainNav.body_dark .nav-link::after {
+ background: #f2f3f5;
+}
+
+#mainNav.navbar-shrink.body_dark {
+ box-shadow: 0.15rem 0.15rem 0.3rem rgba(0, 0, 0, 0.38), 0 0 0 rgba(0, 0, 0, 0);
+}
+
+#mainNav.navbar-shrink.body_dark .nav-link::after {
+ background: #f2f3f5;
+}
+
+.section.body_dark .btn-hover-new {
+ color: #ddd;
+}
+
+.section.body_dark .btn-hover-new:hover {
+ color: black;
+ background-color: #eee;
+}
+
+h3.body_dark, h2.body_dark {
+ color: #dedede;
+}
+
+.filter-button-group button.active.body_dark {
+ color: var(--a-dark-hover);
+ background: rgba(0, 0, 0, 0);
+ box-shadow: inset 0.15rem 0.15rem 0.2rem var(--greyDark), inset -0.15rem -0.15rem 0.2rem var(--primary-dark-2);
+}
+
+.filter-button-group button.body_dark {
+ color: #dddddd;
+ background: rgba(166, 166, 166, 0);
+ box-shadow: .1rem .1rem .2rem var(--greyDark), -.1rem -.1rem .2rem var(--primary-dark);
+}
+
+.article-single.body_dark p, .services-inner-box.body_dark .ser-icon i, .services-inner-box.body_dark h2, .services-inner-box.body_dark p span, .section.body_dark .post-info span {
+ color: #d0d0d0;
+}
+
+.services-inner-box.body_dark:active h2, .article-single.body_dark:active > h2 {
+ color: var(--a-dark-hover);
+}
+
+.body_dark .img-fluid {
+ opacity: 0.9;
+}
+
+.services-inner-box.body_dark:active, body.body_dark .dmtop:active, .article-single.body_dark:active {
+ -webkit-box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyDark), inset -0.2rem -0.2rem 0.4rem var(--primary-dark-2);
+ box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyDark), inset -0.2rem -0.2rem 0.4rem var(--primary-dark-2);
+}
+
+.toggle.body_dark {
+ color: #e1e1e1;
+}
+
+.toggle.body_dark:hover {
+ color: #f1f1f1;
+}
+
+.copyrights.body_dark .footer-links a:hover, .copyrights.body_dark .footer a:hover, .copyrights.body_dark .footer-links a .iconfont:hover {
+ color: var(--a-dark-hover) !important;
+}
+
+.copyrights.body_dark .footer-links a, .copyrights.body_dark .footer-links span {
+ color: #666666;
+}
+
+.copyrights.body_dark {
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0), -0.2rem -0.2rem 0.4rem rgba(66, 66, 66, 0.3);
+}
\ No newline at end of file
diff --git a/static/css/notes.css b/static/css/notes.css
new file mode 100644
index 0000000..15a041d
--- /dev/null
+++ b/static/css/notes.css
@@ -0,0 +1,16 @@
+.note-single, .api-single {
+ margin: 25px 0 25px;
+}
+
+#api {
+ padding-top: 0;
+}
+
+.note-menu, .api-menu {
+ margin-bottom: 10px;
+}
+
+.api-grid, .note-grid {
+ padding-left: 25px;
+ padding-right: 25px;
+}
\ No newline at end of file