diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/microblog.css | 259 | ||||
| -rw-r--r-- | css/reset.css | 23 |
2 files changed, 282 insertions, 0 deletions
diff --git a/css/microblog.css b/css/microblog.css new file mode 100644 index 0000000..deb68c8 --- /dev/null +++ b/css/microblog.css @@ -0,0 +1,259 @@ +@import './reset.css'; + +:root { + --primary-color: #007aff; + --secondary-color: #fffceb; + + --background-color: #b5b5af; + --text-color: #080f15; +} + +html { + font: 100%/1.4 system-ui, Helvetica, sans-serif; + background-color: var(--background-color); + color: var(--text-color); +} + +.wrap { + width: min(95%, 40rem); + margin: 2rem auto; + padding: 1rem; + background-color: var(--secondary-color); + box-shadow: 0 1.25rem 1rem -1rem rgba(0,0,0,0.25); +} + +.button { + display: block; + background: var(--primary-color); + color: var(--secondary-color); + text-decoration: none; + border-radius: 0.4rem; + padding: 0.2rem 0.5rem; + font-weight: bold; + text-align: center; +} + +.button.alert { + background: coral; +} + +nav.main ul { + display: flex; + margin-bottom: 2rem; +} + +nav.main li { + list-style: none; + flex: 1; +} + +nav.main li a { + /* inherits from .button */ +} + +nav.main li + li a { + margin-left: 0.2rem; +} + +.wrap .posts { + +} + +.wrap .posts > li { + list-style: none; + margin-bottom: 1rem; + border-bottom: 1px solid rgba(0,0,0,0.1); + padding-bottom: 1rem; + + display: grid; + grid-template-columns: repeat(6, 1fr); +} + +.wrap .posts > li > * { + outline: 0px solid #f0f; +} + +.wrap .posts > li:last-child { + margin-bottom: 2rem; + border-bottom: 0; + padding-bottom: 0; +} + +.timeline .pagination { overflow: hidden; } +.timeline .pagination a { + display: block; + background: var(--primary-color); + color: var(--secondary-color); + text-decoration: none; + border-radius: 0.4rem; + padding: 0.2rem 0.6rem; + font-weight: bold; + float: left; +} +.timeline .pagination .next { float: right; } + +.wrap .post-timestamp { + display: block; + color: var(--primary-color); + text-decoration: none; + font-size: 0.8rem; + text-transform: uppercase; + font-weight: bold; + margin-bottom: 0.5rem; + grid-column-start: span 3; +} + +.wrap .post-meta { + grid-column-start: span 3; +} + +.wrap .post-meta ul { + display: flex; + justify-content: flex-end; + gap: 0.75ch; +} + +.wrap .post-meta li { + list-style: none; +} + +.wrap .post-meta li a { + display: block; + color: hsla(0, 0%, 0%, 0.2); + mix-blend-mode: multiply; + text-decoration: none; + font-size: 0.8rem; + text-transform: uppercase; + font-weight: bold; + margin-bottom: 0.5rem; +} + +.wrap .post-meta li a:is(:hover, :focus) { + color: currentColor; +} + +.wrap .post-content { + font-size: 1.25rem; + overflow-wrap: break-word; + grid-column-start: span 6; +} + +.wrap .post-content a { + color: var(--primary-color); + text-decoration: none; +} + +.wrap form.delete { + width: 100%; + grid-column-start: span 6; + display: flex; + margin-block-start: 2rem; +} + +.wrap form.delete input[type="submit"] { + flex: 1; + line-height: 1.4; + cursor: pointer; +} + +.wrap .posts li .message { + width: 100%; + grid-column-start: span 6; + margin-block-start: 2rem; +} + +.postform form, +form.edit, +.login form { + grid-column-start: span 6; + overflow: hidden; +} + +:is(.postform, .edit) textarea { + width: 100%; + border: 2px solid var(--background-color); + background: #fff; + padding: 0.5rem; + font-size: 1.25rem; + resize: vertical; + min-height: 10rem; + margin-bottom: 0.5rem; +} + +:is(.postform, .edit) textarea:focus { + border-color: var(--primary-color); + outline: none; +} + +:is(.postform, .edit) input[type="submit"], +.login input[type="submit"] { + -webkit-appearance: none; + appearance: none; + border: 0; + display: block; + background: var(--primary-color); + color: var(--secondary-color); + text-decoration: none; + border-radius: 0.4rem; + padding: 0.3rem 0.8rem 0.4rem; + font-weight: bold; + text-align: center; + cursor: pointer; + float: right; +} + +:is(.postform, .edit) #count { + float: left; + color: var(--background-color); +} + +:is(.postform, .edit) .message, +.login .message { + background-color: #87b26c; + padding: 0.5rem; + color: var(--secondary-color); + border-radius: 0.4rem; + margin-bottom: 0.5rem; +} + +:is(.postform, .edit) .error, +.login .error { + background-color: #9c2128; +} + +.login input[type="text"], +.login input[type="password"] { + width: 100%; + border: 2px solid var(--background-color); + padding: 0.5rem; + font-size: 1.25rem; + resize: vertical; + margin-bottom: 0.5rem; +} + +.login input[type="text"]:focus, +.login input[type="password"]:focus { + border-color: var(--primary-color); + outline: none; +} + +footer { + width: min(95%, 40rem); + margin: 0.5rem auto 2rem; +} + +footer ul { + list-style: none; + display: flex; + justify-content: center; + gap: 1rem; +} + +footer li a { + color: hsla(0, 0%, 0%, 0.3); + text-decoration: none; + font-size: 0.8rem; + text-transform: uppercase; + font-weight: bold; + margin-bottom: 0.5rem; +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..43415e4 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,23 @@ +/* + The new CSS reset - version 1.7.3 (last updated 7.8.2022) + GitHub page: https://github.com/elad2412/the-new-css-reset +*/ +*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { + all: unset; + display: revert; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +a, button { cursor: revert; } +ol, ul, menu { list-style: none; } +img { max-width: 100%; } +table { border-collapse: collapse; } +input, textarea { -webkit-user-select: auto; } +textarea { white-space: revert; } +::placeholder { color: unset; } +:where([hidden]) { display: none; } |