diff options
| author | Freya Murphy <freya@freyacat.org> | 2024-04-01 11:09:25 -0400 |
|---|---|---|
| committer | Freya Murphy <freya@freyacat.org> | 2024-04-01 11:09:25 -0400 |
| commit | 3a82baec9d793edf81ac2b151b0f4d4159641375 (patch) | |
| tree | f9d50c296b078ac48c2a2391c172c3ccf37edb3f /web/public/css | |
| parent | refactor asset dir, refactor oberver in lib (diff) | |
| download | xssbook2-3a82baec9d793edf81ac2b151b0f4d4159641375.tar.gz xssbook2-3a82baec9d793edf81ac2b151b0f4d4159641375.tar.bz2 xssbook2-3a82baec9d793edf81ac2b151b0f4d4159641375.zip | |
login and register, liking on homepage
Diffstat (limited to 'web/public/css')
| -rw-r--r-- | web/public/css/common.css | 461 | ||||
| -rw-r--r-- | web/public/css/error.css | 16 | ||||
| -rw-r--r-- | web/public/css/home.css | 26 | ||||
| -rw-r--r-- | web/public/css/post.css | 16 |
4 files changed, 0 insertions, 519 deletions
diff --git a/web/public/css/common.css b/web/public/css/common.css deleted file mode 100644 index 8b55268..0000000 --- a/web/public/css/common.css +++ /dev/null @@ -1,461 +0,0 @@ -:root { - --primary: #242424 !important; - --secondary: #181818 !important; - --hover: #1b1b1b !important; - --light: #3e4042 !important; - --mild: #1b1b1b !important; - --medium: #e2ded6 !important; - --extreme: #e2ded6 !important; - --logo: #1778f2 !important; - --error: #f02849 !important; - --success: #30ab5a !important; - --text: #ffffff !important; - --banner: #6b6b6b !important; - --popup: #242424cc !important; -} - -@font-face { - font-family: 'Material Icons'; - font-style: normal; - font-weight: 400; - src: url("/public/font/material-icons.ttf") format('truetype'); -} - -@font-face { - font-family: facebook; - src: url("/public/font/facebook.otf") format("opentype"); - font-display: swap; -} - -@font-face { - font-family: sfpro; - src: url("/public/font/sfpro.otf") format("opentype"); - font-display: swap; -} - -@font-face { - font-family: sfprobold; - src: url("/public/font/sfprobold.otf") format("opentype"); - font-display: swap; -} - -body { - background-color: var(--secondary); - width: 100%; - height: 100%; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - color: var(--text); - font-family: sfpro; -} - -header { - top: 0; - position: sticky; - height: 3.5rem; - background-color: var(--primary); - display: flex; - flex-direction: row; - align-items: center; - padding: 0 1rem; -} - -header .logo { - font-family: facebook; - color: var(--logo); - font-size: 2.25rem; - height: 100%; - line-height: 2rem; - margin-top: .75rem; -} - -a, button, input { - background: none; - border: none; - display: flex; - flex-direction: row; - align-items: center; - font-family: sfprobold; - color: inherit; - text-decoration: none; - font-size: 1rem; -} - -a, button { - cursor: pointer; -} - -form button { - padding: .5rem; - border-radius: .5rem; -} - -input:focus { - border: none; - outline: none; -} - -.header-entry { - display: flex; - flex-direction: row; - text-decoration: none; - align-items: center; - color: var(--text); -} - -.nav .header-entry { - height: 100%; -} - -.nav-center .header-entry:hover { - background-color: var(--hover); -} - -.btn-action { - justify-content: center; - align-items: center; - padding: .35rem; - margin: .25rem; - border-radius: .25rem; -} - -.btn-action:hover { - background-color: var(--hover); -} - -.btn-blue:hover { - color: var(--logo); -} - -.header .btn-blue { - border-bottom: 1px solid var(--logo); -} - -.btn-line:hover { - text-decoration: underline; -} - -.nav, -.nav-left, -.nav-center, -.nav-right { - position: relative; - display: flex; - flex-direction: row; - align-items: center; -} - -.nav { - position: sticky; -} - -.nav-right { - flex: 1; - justify-content: flex-end; -} - -.nav-center { - position: absolute; - left: 50%; - transform: translateX(-50%); - flex: 1; - justify-content: center; - height: 100%; - z-index: 2; -} - -@media (min-width: 800px) { - .header-entry > span { - display: none; - } - - .nav-center .header-entry { - padding: 0 3rem; - } - - #action-hamburger { - display: none; - } -} - -@media (max-width: 800px) { - .nav-center { - display: none; - position: absolute; - flex-direction: column; - top: 100%; - height: fit-content; - background-color: var(--primary); - width: 100%; - left: 0; - transform: translateX(0%); - justify-content: flex-start; - } - - .nav-center.visible { - display: inherit !important; - } - - .nav-center .header-entry { - width: calc(100% - 3rem); - padding: .75rem 0rem !important; - padding-left: 3rem !important; - justify-content: flex-start; - } - - .nav-center .header-entry > span { - margin-left: 1rem; - } - - .nav-center .header-entry.active { - border-bottom: none; - } -} - -.nav-right .image-loading { - display: block; -} - -.nav-right .header-entry { - padding: 0; - padding-left: 1.5rem; -} - -@keyframes shimmer { - to { - background-position-x: 0%; - } -} - -.pfp, .pfp img { - height: 2.5rem; - border-radius: 2.5rem; - aspect-ratio: 1; - border-radius: 100%; - display: block; -} - -.pfp-sm, .pfp-sm img { - height: 1.75rem; -} - -.image-loading { - background: linear-gradient(-45deg, var(--secondary) 0%, var(--primary) 25%, var(--secondary) 50%); - background-size: 500%; - background-position-x: 150%; - animation: shimmer 1s linear infinite; -} - -.card { - background-color: var(--primary); - border-radius: .5rem; - padding: 1rem; -} - -.card form { - flex-grow: 1; -} - -.card .sub-card { - background-color: var(--secondary); - border-radius: .5rem; - padding: .75rem; -} - -.input { - padding: 10px; - border-radius: 10px; - width: calc(100% - 20px); - background-color: var(--secondary); - font-family: sfpro; -} - -.input:hover { - background-color: var(--hover); -} - -.row { - display: flex; - flex-direction: row; -} - -.col { - display: flex; - flex-direction: column; -} - -.grow { - flex-grow: 1; -} - -.ml-sm { - margin-left: .5rem; -} - -.ml { - margin-left: 1rem; -} - -.mr-sm { - margin-right: .5rem; -} - -.mr { - margin-right: 1rem; -} - -.mt { - margin-top: 1rem; -} - -.mb { - margin-bottom: .75rem; -} - -.dim { - color: var(--medium); -} - -.modal-container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(255, 255, 255, .1); - display: block; -} - -.modal { - background-color: var(--primary); - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - min-width: 40rem; - min-height: 24rem; - border-radius: .5rem; - display: flex; - flex-direction: column; - animation: fadeIn .1s, slideInModal .1s linear; -} - -@keyframes slideInModal { - 0% { - animation-timing-function: ease-in; - transform: translate(-50%, -60%); - } -} - -@keyframes slideIn { - 0% { - animation-timing-function: ease-out; - transform: translate(0, -50%); - } -} - -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -.modal>form { - display: flex; - flex-direction: column; - flex-grow: 1; -} - -.modal-header { - font-family: sfprobold; - position: relative; - border-bottom: 1px solid var(--light); - text-align: center; - margin: 0 1rem; - border-radius: .5rem .5rem 0 0; - display: flex; - justify-content: center; - align-items: center; - padding-left: 1rem; - cursor: grab; - padding: 1rem; -} - -.modal-content { - flex-grow: 1; - padding: 1rem; -} - -.modal-footer { - margin-top: auto; - padding: 0 1rem; - padding-bottom: 1rem; - display: flex; - flex-direction: row; - justify-content: flex-end; -} - -.float-right { - position: absolute; - transform: translate(0%, -50%); - top: 45%; - right: 0; -} - -.mi { - font-family: 'Material Icons'; - font-style: normal; - font-size: 1.5rem; -} - -.mi-sm { - font-size: 1rem; -} - -.mi-lg { - font-size: 2rem; -} - -button[type="submit"] { - text-align: center; - background-color: var(--logo); - flex-grow: 1; - padding: .5rem; -} - -button[type="submit"]:hover { - background-color: var(--logo); -} - -#toast-container { - position: fixed; - top: 4rem; - left: 100%; - transform: translateX(-110%); - margin-top: 1rem; - z-index: 10000; -} - -.toast { - padding: .75rem; - margin: .5rem; - border-radius: .5rem; - min-width: 15rem; - font-family: sfpro; - animation: fadeIn .1s, slideIn .25s linear; - display: flex; - justify-content: space-between; -} - -.toast.error { - background-color: var(--error); -} - -.toast.success { - background-color: var(--success); -} diff --git a/web/public/css/error.css b/web/public/css/error.css deleted file mode 100644 index aea11d9..0000000 --- a/web/public/css/error.css +++ /dev/null @@ -1,16 +0,0 @@ -#error { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 10rem; -} - -#error h1 { - color: var(--logo); - font-family: Facebook; - font-size: 5rem; -} - -#error span { - font-size: 2rem; -} diff --git a/web/public/css/home.css b/web/public/css/home.css deleted file mode 100644 index e70223e..0000000 --- a/web/public/css/home.css +++ /dev/null @@ -1,26 +0,0 @@ -#main-content { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - margin-top: 1rem; -} - -.card { - width: 40rem; - margin-bottom: 1rem; -} - -.new-post-modal textarea { - border: none; - resize: none; - outline: none; - font-family: sfpro; - font-size: 1.5rem; - margin: 1rem 0; - width: 100%; - height: 70%; - flex-grow: 1; - background-color: transparent; - color: var(--text); -} diff --git a/web/public/css/post.css b/web/public/css/post.css deleted file mode 100644 index 4030da3..0000000 --- a/web/public/css/post.css +++ /dev/null @@ -1,16 +0,0 @@ -.post hr { - color: var(--light); - margin: 0; -} - -.post hr:nth-of-type(1) { - margin-top: .5rem; -} - -.action-load-comments { - margin-left: 4rem; -} - -#action-load-posts { - justify-content: center; -} |