diff --git a/src/assets/demo.css b/src/assets/demo.css index 744ac99..b768ee6 100644 --- a/src/assets/demo.css +++ b/src/assets/demo.css @@ -164,3 +164,43 @@ .section-examples h5{ margin-top: 30px; } + + +.leaf1, +.leaf3, +.leaf4, +.leaf2 { + position: absolute; + z-index: 9; +} + +.leaf4 { + right: 172px; + top: -122px; + width: 17%; + width: 32%; + transform: rotate(-83deg); +} + +.leaf3 { + top: 21px; + right: -69px; + left: auto; + width: 24%; + transform: rotate(-13deg); +} + +.leaf2 { + width: 25%; + left: 170px; + top: -28px; + transform: rotate(90deg); +} + +.leaf1 { + transform: rotate(0deg); + right: auto; + top: 25px; + width: 15%; + left: -11px; +} diff --git a/src/assets/scss/material-kit/_responsive.scss b/src/assets/scss/material-kit/_responsive.scss index ca8d70f..d39246a 100644 --- a/src/assets/scss/material-kit/_responsive.scss +++ b/src/assets/scss/material-kit/_responsive.scss @@ -354,6 +354,16 @@ } } + .index-page .brand h1 { + font-size: 4.3rem; + } + + .index-page .brand h3 { + max-width: 500px; + line-height: normal; + font-size: 1.7rem; + } + .nav-tabs { overflow: auto; } @@ -442,3 +452,9 @@ max-width: 1140px; } } + +@media screen and (max-width: 450px) { + .index-page .brand { + max-width: 300px; + } +} diff --git a/src/views/Index.vue b/src/views/Index.vue index 0b03596..d6f105b 100644 --- a/src/views/Index.vue +++ b/src/views/Index.vue @@ -288,63 +288,4 @@ export default { display: flex; } } - -.leaf1, -.leaf3, -.leaf4, -.leaf2 { - position: absolute; - z-index: 9; -} - -.leaf4 { - right: 172px; - top: -122px; - width: 17%; - width: 32%; - transform: rotate(-83deg); -} - -.leaf3 { - top: 21px; - right: -69px; - left: auto; - width: 24%; - transform: rotate(-13deg); -} - -.leaf2 { - width: 25%; - left: 170px; - top: -28px; - transform: rotate(90deg); -} - -.leaf1 { - transform: rotate(0deg); - right: auto; - top: 25px; - width: 15%; - left: -11px; -} - -@media all and (max-width: 768px) { - .index-page .image-wrapper /deep/ .brand { - h1 { - font-size: 4.3rem; - } - - h3 { - max-width: 500px; - line-height: normal; - font-size: 1.7rem; - } - } -} - -@media all and (max-width: 450px) { - .index-page .image-wrapper /deep/ .brand { - max-width: 300px; - } -}