aboutsummaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/microblog/icons/icon-announce.svg4
-rw-r--r--css/microblog/icons/icon-like.svg4
-rw-r--r--css/microblog/microblog.css (renamed from css/microblog.css)34
-rw-r--r--css/plain/icons/icon-announce.svg4
-rw-r--r--css/plain/icons/icon-like.svg4
-rw-r--r--css/plain/plain.css451
6 files changed, 500 insertions, 1 deletions
diff --git a/css/microblog/icons/icon-announce.svg b/css/microblog/icons/icon-announce.svg
new file mode 100644
index 0000000..e29d298
--- /dev/null
+++ b/css/microblog/icons/icon-announce.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 24" color="currentColor" fill="currentColor" aria-label="Repost">
+ <title>Repost</title>
+ <path d="M19.998 9.497a1 1 0 0 0-1 1v4.228a3.274 3.274 0 0 1-3.27 3.27h-5.313l1.791-1.787a1 1 0 0 0-1.412-1.416L7.29 18.287a1.004 1.004 0 0 0-.294.707v.001c0 .023.012.042.013.065a.923.923 0 0 0 .281.643l3.502 3.504a1 1 0 0 0 1.414-1.414l-1.797-1.798h5.318a5.276 5.276 0 0 0 5.27-5.27v-4.228a1 1 0 0 0-1-1Zm-6.41-3.496-1.795 1.795a1 1 0 1 0 1.414 1.414l3.5-3.5a1.003 1.003 0 0 0 0-1.417l-3.5-3.5a1 1 0 0 0-1.414 1.414l1.794 1.794H8.27A5.277 5.277 0 0 0 3 9.271V13.5a1 1 0 0 0 2 0V9.271a3.275 3.275 0 0 1 3.271-3.27Z"></path>
+</svg>
diff --git a/css/microblog/icons/icon-like.svg b/css/microblog/icons/icon-like.svg
new file mode 100644
index 0000000..c126633
--- /dev/null
+++ b/css/microblog/icons/icon-like.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 24 22" color="currentColor" fill="currentColor" aria-label="Like">
+ <title>Like</title>
+ <path d="M1 7.66c0 4.575 3.899 9.086 9.987 12.934.338.203.74.406 1.013.406.283 0 .686-.203 1.013-.406C19.1 16.746 23 12.234 23 7.66 23 3.736 20.245 1 16.672 1 14.603 1 12.98 1.94 12 3.352 11.042 1.952 9.408 1 7.328 1 3.766 1 1 3.736 1 7.66Z" stroke="currentColor" stroke-width="2"></path>
+</svg>
diff --git a/css/microblog.css b/css/microblog/microblog.css
index e6a657a..2742f59 100644
--- a/css/microblog.css
+++ b/css/microblog/microblog.css
@@ -1,4 +1,4 @@
-@import './reset.css';
+@import '../reset.css';
:root {
--primary-color: #007aff;
@@ -148,6 +148,38 @@ nav.main li + li a {
color: currentColor;
}
+.wrap .post-meta li span.amount {
+ margin-inline-end: 0.25ch;
+}
+
+.wrap .post-meta li span.word { display: inline-block; text-indent: -9999px; }
+.wrap .post-meta li span.amount::after {
+ display: inline-block;
+ content: '';
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: contain;
+ vertical-align: middle;
+ margin-inline-start: 0.25ch;
+ opacity: 0.25;
+}
+
+.wrap .post-meta li a:is(:hover, :focus) span.amount::after {
+ opacity: 1;
+}
+
+.wrap .post-meta li.post-likes span.amount::after {
+ background-image: url(./icons/icon-like.svg);
+ width: 0.7rem;
+ height: 0.7rem;
+}
+
+.wrap .post-meta li.post-boosts span.amount::after {
+ background-image: url(./icons/icon-announce.svg);
+ width: 1rem;
+ height: 1rem;
+}
+
.wrap .post-content {
font-size: 1.25rem;
overflow-wrap: break-word;
diff --git a/css/plain/icons/icon-announce.svg b/css/plain/icons/icon-announce.svg
new file mode 100644
index 0000000..1c62441
--- /dev/null
+++ b/css/plain/icons/icon-announce.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 24" color="Canvas" fill="Canvas" aria-label="Repost">
+ <title>Repost</title>
+ <path d="M19.998 9.497a1 1 0 0 0-1 1v4.228a3.274 3.274 0 0 1-3.27 3.27h-5.313l1.791-1.787a1 1 0 0 0-1.412-1.416L7.29 18.287a1.004 1.004 0 0 0-.294.707v.001c0 .023.012.042.013.065a.923.923 0 0 0 .281.643l3.502 3.504a1 1 0 0 0 1.414-1.414l-1.797-1.798h5.318a5.276 5.276 0 0 0 5.27-5.27v-4.228a1 1 0 0 0-1-1Zm-6.41-3.496-1.795 1.795a1 1 0 1 0 1.414 1.414l3.5-3.5a1.003 1.003 0 0 0 0-1.417l-3.5-3.5a1 1 0 0 0-1.414 1.414l1.794 1.794H8.27A5.277 5.277 0 0 0 3 9.271V13.5a1 1 0 0 0 2 0V9.271a3.275 3.275 0 0 1 3.271-3.27Z"></path>
+</svg>
diff --git a/css/plain/icons/icon-like.svg b/css/plain/icons/icon-like.svg
new file mode 100644
index 0000000..61b2777
--- /dev/null
+++ b/css/plain/icons/icon-like.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 24 22" color="Canvas" fill="Canvas" aria-label="Like">
+ <title>Like</title>
+ <path d="M1 7.66c0 4.575 3.899 9.086 9.987 12.934.338.203.74.406 1.013.406.283 0 .686-.203 1.013-.406C19.1 16.746 23 12.234 23 7.66 23 3.736 20.245 1 16.672 1 14.603 1 12.98 1.94 12 3.352 11.042 1.952 9.408 1 7.328 1 3.766 1 1 3.736 1 7.66Z" stroke="Canvas" stroke-width="2"></path>
+</svg>
diff --git a/css/plain/plain.css b/css/plain/plain.css
new file mode 100644
index 0000000..e65bc8c
--- /dev/null
+++ b/css/plain/plain.css
@@ -0,0 +1,451 @@
+@import '../reset.css';
+
+/*
+ // SYSTEM FONTS
+
+ .body { font: -apple-system-body }
+ .headline { font: -apple-system-headline }
+ .subheadline { font: -apple-system-subheadline }
+ .caption1 { font: -apple-system-caption1 }
+ .caption2 { font: -apple-system-caption2 }
+ .footnote { font: -apple-system-footnote }
+ .short-body { font: -apple-system-short-body }
+ .short-headline { font: -apple-system-short-headline }
+ .short-subheadline { font: -apple-system-short-subheadline }
+ .short-caption1 { font: -apple-system-short-caption1 }
+ .short-footnote { font: -apple-system-short-footnote }
+ .tall-body { font: -apple-system-tall-body }
+
+
+ // SYSTEM COLORS https://blog.jim-nielsen.com/2021/css-system-colors/
+
+ AccentColor // Background of accented user interface controls
+ AccentColorText // Text of accented user interface controls
+ ActiveText // Text of active links
+ ButtonBorder // Base border color of controls
+ ButtonFace // Background color of controls
+ ButtonText // Text color of controls
+ Canvas // Background of application content or documents
+ CanvasText // Text color in application content or documents
+ Field // Background of input fields
+ FieldText // Text in input fields
+ GrayText // Text color for disabled items (e.g. a disabled control)
+ Highlight // Background of selected items
+ HighlightText // Text color of selected items
+ LinkText // Text of non-active, non-visited links
+ Mark // Background of text that has been specially marked (such as by the HTML mark element)
+ MarkText // Text that has been specially marked (such as by the HTML mark element)
+ VisitedText // Text of visited links
+*/
+
+:root {
+ color-scheme: light dark;
+
+ --primary-color: CanvasText;
+ --secondary-color: ButtonText;
+
+ --background-color: Canvas;
+ --text-color: CanvasText;
+}
+
+html {
+ font: 100%/1.4 system-ui, Helvetica, sans-serif;
+ background-color: var(--background-color);
+ color: var(--text-color);
+
+ accent-color: var(--primary-color);
+ -webkit-user-select: none;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+ tap-highlight-color: transparent;
+ -webkit-touch-callout: none;
+ touch-callout: none;
+}
+
+img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
+
+.wrap {
+ width: min(95%, 40rem);
+ margin: 2rem auto;
+ padding: 1rem;
+}
+
+.button {
+ display: block;
+ background: var(--primary-color);
+ color: var(--background-color);
+ text-decoration: none;
+ border-radius: 0.4rem;
+ padding: 0.2rem 0.5rem;
+ font-weight: bold;
+ text-align: center;
+}
+
+.button.alert {
+ background: coral;
+}
+
+.hidden {
+ display: none !important;
+}
+
+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 CanvasText;
+ 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: Canvas;
+ 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: CanvasText;
+ text-decoration: none;
+ font-size: 0.8rem;
+ text-transform: uppercase;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+ grid-column-start: span 3;
+}
+
+.wrap .post-timestamp time.modified {
+ display: block;
+ /* color: hsla(0, 0%, 0%, 0.2); */
+ /* mix-blend-mode: multiply; */
+ color: color-mix(in oklch, CanvasText 20%, Canvas);
+}
+
+.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);
+ color: color-mix(in oklch, CanvasText 20%, Canvas);
+ /* 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-meta li span.amount {
+ margin-inline-end: 0.25ch;
+}
+
+.wrap .post-meta li span.word { display: inline-block; text-indent: -9999px; }
+.wrap .post-meta li span.amount::after {
+ display: inline-block;
+ content: '';
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: contain;
+ vertical-align: middle;
+ margin-inline-start: 0.25ch;
+ opacity: 0.25;
+}
+
+.wrap .post-meta li a:is(:hover, :focus) span.amount::after {
+ opacity: 1;
+}
+
+.wrap .post-meta li.post-likes span.amount::after {
+ background-image: url(./icons/icon-like.svg);
+ width: 0.7rem;
+ height: 0.7rem;
+}
+
+.wrap .post-meta li.post-boosts span.amount::after {
+ background-image: url(./icons/icon-announce.svg);
+ width: 1rem;
+ height: 1rem;
+}
+
+.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 CanvasText;
+ background: Canvas;
+ 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) .post-nav {
+ width: 100%;
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+}
+
+:is(.postform, .edit) input[type="submit"],
+.login input[type="submit"] {
+ -webkit-appearance: none;
+ appearance: none;
+ border: 0;
+ display: block;
+ background: CanvasText;
+ color: Canvas;
+ 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 {
+ color: CanvasText;
+}
+
+:is(.postform, .edit) #post-droparea {
+ border: 0.15rem dashed CanvasText;
+ color: CanvasText;
+ padding: 0.25rem;
+ cursor: pointer;
+}
+
+:is(.postform, .edit) #post-droparea.drag,
+:is(.postform, .edit) #post-droparea:is(:hover, :focus) {
+ background-color: var(--primary-color);
+ color: Canvas;
+ border: 0.15rem solid var(--primary-color);
+}
+
+:is(.postform, .edit) #post-attachments-label {
+ display: flex;
+ border: 0.15rem dashed rgba(0,0,0,0.4);
+ color: rgba(0,0,0,0.4);
+ padding: 0.25rem;
+ cursor: pointer;
+ position: relative;
+ align-self: stretch;
+ align-items: center;
+}
+
+:is(.postform, .edit) #post-attachments {
+ /* cover the entire label, for drag and drop */
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+}
+
+:is(.postform, .edit) #post-attachments-list {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ padding-inline-end: 1rem;
+ align-self: stretch;
+ justify-content: center;
+}
+
+:is(.postform, .edit) #post-attachments-list li + li {
+ margin-block-start: 0.25em;
+ border-top: 1px solid rgba(0,0,0,0.2);
+ padding-block-start: 0.25em;
+}
+
+:is(.postform, .edit) #post-attachments-list img.file-preview {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 1ch;
+ width: 1.75rem;
+ height: 1.75rem;
+ outline: 0px solid #f0f;
+ object-fit: cover;
+ background: #fff;
+}
+
+:is(.postform, .edit) #post-attachments-list input[type="checkbox"] {
+ -webkit-appearance: checkbox;
+ appearance: checkbox;
+}
+
+:is(.timeline, .single) .post-attachments {
+ grid-column-start: span 6;
+ margin-block-start: 1rem;
+}
+
+:is(.timeline, .single) .post-attachments li + li {
+ margin-block-start: 0.5rem;
+}
+
+: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);
+ background: Canvas;
+ 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: color-mix(in oklch, CanvasText 25%, Canvas);
+ text-decoration: none;
+ font-size: 0.8rem;
+ text-transform: uppercase;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+}
+
+/*
+@supports (background: paint(id)) {
+ input[type="submit"] {
+ background: paint(squircle) !important;
+ --squircle-radius: 8px;
+ --squircle-fill: var(--primary-color);
+
+ border-radius: 0;
+ }
+}
+*/
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 06:25:35 +0000