diff options
Diffstat (limited to 'desk/web/index.css')
| -rw-r--r-- | desk/web/index.css | 295 |
1 files changed, 295 insertions, 0 deletions
diff --git a/desk/web/index.css b/desk/web/index.css new file mode 100644 index 0000000..d41d32b --- /dev/null +++ b/desk/web/index.css @@ -0,0 +1,295 @@ + * { + box-sizing: border-box; + } + + /*@font-face { + font-family: 'Arvo'; + src: url('/fonts/arvo-regular.ttf') format('truetype'); + } + + @font-face { + font-family: 'Crimson Text'; + src: url('/fonts/crimsontext-regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + }*/ + + :root { + --red05: rgba(255, 65, 54, 0.05); + --red100: rgba(255, 65, 54, 1); + --blue05: rgba(33, 157, 255, 0.05); + --blue30: rgba(33, 157, 255, 0.3); + --blue100: rgba(33, 157, 255, 1); + --black05: rgba(0, 0, 0, 0.05); + --black20: rgba(0, 0, 0, 0.2); + --black60: rgba(0, 0, 0, 0.6); + --white: rgba(255, 255, 255, 1); + --text: rgba(0, 0, 0, 1); + --hong: rgb(141, 15, 15); + --huang: rgb(230, 180, 60); + --lan: rgb(30, 60, 80); + } + + [data-theme=dark] { + --background-color: black; + --text-color: rgb(200, 200, 200); + } + + [data-theme=light] { + /* --background-color: #EFF1EC; */ + --background-color: white; + --text-color: black; + } + + html { + height: 100%; + color: var(--text-color); + -webkit-font-smoothing: antialiased; + } + + body { + margin: 0; + width: 100%; + height: 100%; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + font-size: 1rem; + line-height: 1.618; + text-align: left; + color: black !important; + text-rendering: optimizeLegibility !important; + -webkit-font-smoothing: antialiased; + word-break: break-word; + } + + body>main>header { + border-bottom: 1px solid #eee; + text-align: center; + margin: 1rem auto; + padding: 1rem 0; + } + + h1 { + margin-bottom: 0px; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 40px; + font-weight: 500; + line-height: 1.25; + color: #363636; + margin-top: 0; + } + + h4 { + font-size: 1.4rem; + } + + body>main>header a { + color: var(--text); + text-decoration: none; + background-color: transparent; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 0 0 0.5em 0; + font-weight: 400; + line-height: 1.2; + font-family: 'Crimson Text'; + } + + p { + font-family: 'Crimson Text'; + font-size: 20px; + } + + a, + button, + input { + transition: all .4s ease; + } + + a, + .fl { + text-decoration: none; + color: #B70E0E; + cursor: pointer; + } + + body>main { + height: calc(100% - 4rem); + /* minus navbar */ + } + + .error-div, + #error-div { + color: red; + } + + .blog { + text-align: justify; + } + + /* desktop */ + @media (min-width: 935px) { + .blog { + width: 935px; + margin: auto; + } + } + + @media (max-width: 935px) { + body>main { + width: inherit; + } + + .blog { + padding: 0 0.5rem; + } + } + + #content { + flex: 0 0 70%; + max-width: 70%; + } + + input[type="submit"], + button, + .button { + border-color: #181818; + background-color: #181818; + padding: 0.5rem 1.25rem; + color: #fff; + font-size: 0.875rem; + line-height: 1.5; + border-radius: 0.2rem; + display: inline-block; + font-weight: 400; + text-align: center; + white-space: nowrap; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + font-family: 'Montserrat', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 13px; + -webkit-transition: all .4s ease; + -o-transition: all .4s ease; + transition: all .4s ease; + } + + .hs { + white-space: nowrap; + overflow-x: auto; + } + + .cp { + cursor: pointer; + } + + .tabs { + display: flex; + justify-content: space-between; + + & .tab { + cursor: pointer; + padding: 0.2rem; + } + + & .tab.active { + border-bottom: 1px solid var(--red); + } + } + + /* mobile responsive */ + @media (max-width: 768px) { + body>main { + padding: 0.2rem; + } + } + + /* tailwindy stuff */ + .flex { + display: flex; + } + + .ml1 { + margin-left: 1rem; + } + + .ml2 { + margin-right: 1rem; + } + + .fhns { + height: 100%; + overflow: hidden; + } + + .fh { + height: 100%; + } + + .sy { + overflow-y: scroll; + } + + .fsy { + overflow-y: scroll; + height: 100%; + + } + + .fxc { + display: flex; + justify-content: center; + align-items: baseline; + } + + .f1 { + display: flex; + justify-content: space-between; + align-items: center; + } + + .gc { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 100; + } + + .axc { + position: absolute; + left: 50%; + transform: translateX(-50%); + } + + .xc { + display: block; + margin-left: auto; + margin-right: auto; + } + + .tc { + text-align: center !important; + } + + .bb { + border-bottom: 1px solid var(--text-color); + }
\ No newline at end of file |