Oscarliu117 (Talk | contribs) |
Oscarliu117 (Talk | contribs) |
||
Line 64: | Line 64: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | <style> | ||
+ | |||
+ | /* paragraph content*/ | ||
+ | h10 { | ||
+ | color: white; | ||
+ | font-size: 1.4rem; | ||
+ | line-height: 150%; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | background-color: #272625; | ||
+ | font-family: 'Noto Sans',"微軟雅黑","Microsoft YaHei",Helvetica,sans-serif; | ||
+ | } | ||
+ | |||
+ | |||
+ | p { | ||
+ | color: white; | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | color: white; | ||
+ | font-size: 35px; | ||
+ | } | ||
+ | |||
+ | .navbar { | ||
+ | padding-top: 10px; | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | .navbar-brand { | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | .nav-link { | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | a.dropdown-item { | ||
+ | color: #4F7F52; | ||
+ | } | ||
+ | a.dropdown-item:active { | ||
+ | background-color: #4F7F52; | ||
+ | } | ||
+ | .caret { | ||
+ | display: inline-block; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | margin-left: 2px; | ||
+ | vertical-align: middle; | ||
+ | border-top: 4px solid; | ||
+ | border-right: 4px solid transparent; | ||
+ | border-left: 4px solid transparent; | ||
+ | } | ||
+ | /*滑到navbar就展開*/ | ||
+ | .dropdown-menu li:hover .sub-menu {visibility: visible;} | ||
+ | .dropdown:hover .dropdown-menu {display: block;} | ||
+ | |||
+ | .head { | ||
+ | color: white; | ||
+ | width: 50%; | ||
+ | font-size: 50px; | ||
+ | font-weight: 700; | ||
+ | border-bottom: 10px solid #7ae26f; | ||
+ | position: relative; | ||
+ | margin-top: 100px; | ||
+ | } | ||
+ | .container.content { | ||
+ | margin-top: 80px; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 992px) { | ||
+ | .navbar { | ||
+ | padding-left: 80px; | ||
+ | padding-right: 80px; | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | .navbar-right form { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 568px) { | ||
+ | footer { | ||
+ | text-align: center; | ||
+ | } | ||
+ | .list-group { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /*folded-corner*/ | ||
+ | .post { | ||
+ | position: relative; | ||
+ | } | ||
+ | .folded-corner { | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | right: 0px; | ||
+ | border-width: 0; | ||
+ | border-style: solid; | ||
+ | background: hsla(260,100%,100%,0.2); | ||
+ | box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1); | ||
+ | border-radius: 15px 0 0 0; | ||
+ | border-color: transparent #B9DEBB transparent transparent; | ||
+ | transition: border-width 0.2s ease-out; | ||
+ | } | ||
+ | .post:hover .folded-corner { | ||
+ | border-width: 40px 40px 0 0; | ||
+ | } | ||
+ | .photo .folded-corner { | ||
+ | background: hsla(260,5%,75%,0.5); | ||
+ | } | ||
+ | |||
+ | [class*="col-"] { | ||
+ | float: left; | ||
+ | padding: 13px; | ||
+ | } | ||
+ | a.list-group-item:visited { | ||
+ | color: white; | ||
+ | } | ||
+ | a:hover { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | .list-group { | ||
+ | margin-top: 100px; | ||
+ | } | ||
+ | .col-2.side { | ||
+ | padding: 0; | ||
+ | } | ||
+ | .list-group-item { | ||
+ | padding: .55rem .35rem; | ||
+ | background-color: #272625; | ||
+ | color: white; | ||
+ | border: none; | ||
+ | font-size: 19px; | ||
+ | } | ||
+ | a.list-group-item.list-group-item-action { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | a.list-group-item.list-group-item-action:hover { | ||
+ | color: #98CC9B; | ||
+ | } | ||
+ | a.list-group-item.list-group-item-action.active { | ||
+ | background-color: transparent; | ||
+ | color: #7ae26f; | ||
+ | } | ||
+ | .scrollspy-example h4{ | ||
+ | font-size: 2rem; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | img.contentimg { | ||
+ | width: 100%; | ||
+ | margin: 20px 0; | ||
+ | } | ||
+ | a.link { | ||
+ | font-size: 30px; | ||
+ | color: #4F7F52; | ||
+ | } | ||
+ | #list-item-1 { | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | #list-item-2 { | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | #list-item-3 { | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | #list-item-4 { | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | #list-item-5 { | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | a.reference { | ||
+ | color: #4F7F52; | ||
+ | } | ||
+ | </style> | ||
</body> | </body> |
Revision as of 14:29, 18 September 2018