diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/css/main.css | 38 | ||||
| -rw-r--r-- | static/css/toggle.css | 157 |
2 files changed, 193 insertions, 2 deletions
diff --git a/static/css/main.css b/static/css/main.css index 79e95bb..f7d4a8e 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,6 +1,7 @@ /* Global styles */ body { font-family: "Raleway"; + /* background-color: #3a3d3c; */ } a { @@ -29,6 +30,10 @@ a:hover { color: #5188ef !important; } +.text-bmc:hover { + color: #5179ea !important; +} + /* Partial: Header */ .header a:hover { text-decoration: none; @@ -55,6 +60,10 @@ a:hover { color: #f4b642; } +.langToggle a:hover { + color: #51ef7e !important; +} + .header ul.nav li:first-child a { padding-left: 2px; } @@ -138,14 +147,39 @@ a:hover { .content .markdown pre { font-family: "Menlo", monospace; font-size: 0.98rem; - background-color: #f7f7f7; + border-radius: 1rem; } .content .markdown code { /* enclosed by single backtick (`) */ padding: 0.15em 0.5em; border-radius: 2px; - color: #7adbbc; + background-color: #000645; +} + +.content .markdown .js code { + color: #FFFF33 !important; + background-color: #cccaca !important; +} + +.content .markdown .go code { + color: #426ab9 !important; + background-color: #cccaca !important; +} + +.content .markdown .python code { + color: #54aabd !important; + background-color: #cccaca !important; +} + +.content .markdown .ruby code { + color: #9c1e1f !important; + background-color: #cccaca !important; +} + +.content .markdown .php code { + color: #5566aa !important; + background-color: #cccaca !important; } .content .markdown pre { diff --git a/static/css/toggle.css b/static/css/toggle.css new file mode 100644 index 0000000..c91cf43 --- /dev/null +++ b/static/css/toggle.css @@ -0,0 +1,157 @@ +.toggle { + display: block; + text-align: center; + margin-top: 40px; + user-select: none; +} + +.toggle--checkbox { + display: none; +} + +.toggle--btn { + display: block; + margin: 0 auto; + font-size: 1.4em; + transition: all 350ms ease-in; +} +.toggle--btn:hover { + cursor: pointer; +} + +.toggle--btn, .toggle--btn:before, .toggle--btn:after, +.toggle--checkbox, +.toggle--checkbox:before, +.toggle--checkbox:after, +.toggle--feature, +.toggle--feature:before, +.toggle--feature:after { + transition: all 250ms ease-in; +} +.toggle--btn:before, .toggle--btn:after, +.toggle--checkbox:before, +.toggle--checkbox:after, +.toggle--feature:before, +.toggle--feature:after { + content: ''; + display: block; +} + +/* =================================================== + Day/Night and Gender toggle buttons + =================================================== */ +.toggle--daynight .toggle--btn, +.toggle--like .toggle--btn { + position: relative; + height: 70px; + width: 125px; + border-radius: 70px; +} +.toggle--daynight .toggle--btn:before, +.toggle--like .toggle--btn:before { + position: absolute; + top: 2px; + left: 4px; + width: 56px; + height: 56px; + border-radius: 50%; +} + +.toggle--daynight .toggle--btn { + border: 5px solid #1c1c1c; + background-color: #3c4145; +} +.toggle--daynight .toggle--btn:before { + background-color: #fff; + border: 5px solid #e3e3c7; +} +.toggle--daynight .toggle--btn:after { + position: absolute; + top: 62%; + left: 39px; + z-index: 10; + width: 11.2px; + height: 11.2px; + opacity: 0; + background-color: #fff; + border-radius: 50%; + box-shadow: #fff 0 0, #fff 3px 0, #fff 6px 0, #fff 9px 0, #fff 11px 0, #fff 14px 0, #fff 16px 0, #fff 21px -1px 0 1px, #fff 16px -7px 0 -2px, #fff 7px -7px 0 1px, #d3d3d3 0 0 0 4px, #d3d3d3 6px 0 0 4px, #d3d3d3 11px 0 0 4px, #d3d3d3 16px 0 0 4px, #d3d3d3 21px -1px 0 5px, #d3d3d3 16px -7px 0 1px, #d3d3d3 7px -7px 0 5px; + transition: opacity 100ms ease-in; +} +@keyframes starry_star { + 50% { + background-color: rgba(255, 255, 255, 0.1); + box-shadow: #fff 30px -3px 0 0, #fff 12px 10px 0 -1px, rgba(255, 255, 255, 0.1) 38px 18px 0 1px, #fff 32px 34px 0 0, rgba(255, 255, 255, 0.1) 20px 24px 0 -1.5px, #fff 5px 38px 0 1px; + } +} +@keyframes bounceIn { + 0% { + opacity: 0; + transform: scale(0.3); + } + 50% { + opacity: 100; + transform: scale(1.1); + } + 55% { + transform: scale(1.1); + } + 75% { + transform: scale(0.9); + } + 100% { + opacity: 100; + transform: scale(1); + } +} +.toggle--daynight .toggle--feature { + display: block; + position: absolute; + top: 9px; + left: 52.5%; + z-index: 20; + width: 4px; + height: 4px; + border-radius: 50%; + background-color: #fff; + box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 0, rgba(255, 255, 255, 0.1) 12px 10px 0 -1px, #fff 38px 18px 0 1px, rgba(255, 255, 255, 0.1) 32px 34px 0 0, #fff 20px 24px 0 -1.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 1px; + animation: starry_star 5s ease-in-out infinite; +} +.toggle--daynight .toggle--feature:before { + position: absolute; + top: -2px; + left: -25px; + width: 18px; + height: 18px; + background-color: #fff; + border-radius: 50%; + border: 5px solid #e3e3c7; + box-shadow: #e3e3c7 -28px 0 0 -3px, #e3e3c7 -8px 24px 0 -2px; + transform-origin: -6px 130%; +} +.toggle--daynight .toggle--checkbox:checked + .toggle--btn { + background-color: #9ee3fb; + border: 5px solid #86c3d7; +} +.toggle--daynight .toggle--checkbox:checked + .toggle--btn:before { + left: 55px; + background-color: #ffdf6d; + border: 5px solid #e1c348; +} +.toggle--daynight .toggle--checkbox:checked + .toggle--btn:after { + opacity: 100; + animation-name: bounceIn; + animation-duration: 0.60s; + animation-delay: 0.10s; + animation-fill-mode: backwards; + animation-timing-function: ease-in-out; +} +.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature { + opacity: 0; + box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 -4px, rgba(255, 255, 255, 0.1) 12px 10px 0 -5px, #fff 38px 18px 0 -3px, rgba(255, 255, 255, 0.1) 32px 34px 0 -4px, #fff 20px 24px 0 -5.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 -3px; + animation: none; +} +.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature:before { + left: 25px; + transform: rotate(70deg); +} |