From d28bedad71260cbbc8d0f44b102039f562cb7f75 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 14:04:45 +0000 Subject: [PATCH 01/19] https --- httpsig.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/httpsig.py b/httpsig.py index 8b0299b90..5b1e1f37b 100644 --- a/httpsig.py +++ b/httpsig.py @@ -173,7 +173,7 @@ def signPostHeadersNew(dateStr: str, privateKeyPem: str, hazutils.Prehashed(hashes.SHA512())) signature = base64.b64encode(rawSignature).decode('ascii') else: - # default sha256 + # default rsa-sha256 headerDigest = getSHA256(signedHeaderText.encode('ascii')) rawSignature = key.sign(headerDigest, padding.PKCS1v15(), From 3bb8a7958ebb58ab5c6bf5aa0d8df7bb2df48920 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 17:14:59 +0000 Subject: [PATCH 02/19] group resource is deprecated within webfinger --- tests.py | 8 ++++---- webfinger.py | 43 +++++++++++++++---------------------------- 2 files changed, 19 insertions(+), 32 deletions(-) diff --git a/tests.py b/tests.py index 5623dac82..058935dda 100644 --- a/tests.py +++ b/tests.py @@ -2246,8 +2246,8 @@ def testGroupFollow(baseDir: str) -> None: testgroupDir + '/wfendpoints/testgroup@' + \ testgroupDomain + ':' + str(testgroupPort) + '.json' assert os.path.isfile(testgroupWebfingerFilename) - assert 'group:testgroup@' in open(testgroupWebfingerFilename).read() - print('group: exists within the webfinger endpoint for testgroup') + assert 'acct:testgroup@' in open(testgroupWebfingerFilename).read() + print('acct: exists within the webfinger endpoint for testgroup') testgroupHandle = 'testgroup@' + testgroupDomain followingStr = '' @@ -2321,8 +2321,8 @@ def testGroupFollow(baseDir: str) -> None: testgroupDir + '/wfendpoints/testgroup@' + \ testgroupDomain + ':' + str(testgroupPort) + '.json' assert os.path.isfile(testgroupWebfingerFilename) - assert 'group:testgroup@' in open(testgroupWebfingerFilename).read() - print('group: exists within the webfinger endpoint for testgroup') + assert 'acct:testgroup@' in open(testgroupWebfingerFilename).read() + print('acct: exists within the webfinger endpoint for testgroup') testgroupHandle = 'testgroup@' + testgroupDomain followingStr = '' diff --git a/webfinger.py b/webfinger.py index bf3768c43..38108d43c 100644 --- a/webfinger.py +++ b/webfinger.py @@ -75,8 +75,6 @@ def webfingerHandle(session, handle: str, httpPrefix: str, nickname, domain, grpAccount = _parseHandle(handle) if not nickname: return None - if grpAccount: - groupAccount = True wfDomain = removeDomainPort(domain) wfHandle = nickname + '@' + wfDomain @@ -89,14 +87,9 @@ def webfingerHandle(session, handle: str, httpPrefix: str, hdr = { 'Accept': 'application/jrd+json' } - if not groupAccount: - par = { - 'resource': 'acct:{}'.format(wfHandle) - } - else: - par = { - 'resource': 'group:{}'.format(wfHandle) - } + par = { + 'resource': 'acct:{}'.format(wfHandle) + } try: result = \ getJson(signingPrivateKeyPem, session, url, hdr, par, @@ -147,10 +140,7 @@ def createWebfingerEndpoint(nickname: str, domain: str, port: int, personName = nickname personId = localActorUrl(httpPrefix, personName, domain) - if not groupAccount: - subjectStr = "acct:" + personName + "@" + originalDomain - else: - subjectStr = "group:" + personName + "@" + originalDomain + subjectStr = "acct:" + personName + "@" + originalDomain profilePageHref = httpPrefix + "://" + domain + "/@" + nickname if nickname == 'inbox' or nickname == originalDomain: personName = 'actor' @@ -232,20 +222,17 @@ def webfingerLookup(path: str, baseDir: str, if not path.startswith('/.well-known/webfinger?'): return None handle = None - resourceTypes = ('acct', 'group') - for resType in resourceTypes: - if 'resource=' + resType + ':' in path: - handle = path.split('resource=' + resType + ':')[1].strip() - handle = urllib.parse.unquote(handle) - if debug: - print('DEBUG: WEBFINGER handle ' + handle) - break - elif 'resource=' + resType + '%3A' in path: - handle = path.split('resource=' + resType + '%3A')[1] - handle = urllib.parse.unquote(handle.strip()) - if debug: - print('DEBUG: WEBFINGER handle ' + handle) - break + resType = 'acct' + if 'resource=' + resType + ':' in path: + handle = path.split('resource=' + resType + ':')[1].strip() + handle = urllib.parse.unquote(handle) + if debug: + print('DEBUG: WEBFINGER handle ' + handle) + elif 'resource=' + resType + '%3A' in path: + handle = path.split('resource=' + resType + '%3A')[1] + handle = urllib.parse.unquote(handle.strip()) + if debug: + print('DEBUG: WEBFINGER handle ' + handle) if not handle: if debug: print('DEBUG: WEBFINGER handle missing') From 2ce93f24d7bfd69d6901c5438d1e2820e65d2a7d Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 18:43:58 +0000 Subject: [PATCH 03/19] Page avtivity type --- git.py | 1 + posts.py | 13 ++++++++++--- utils.py | 2 ++ webapp_profile.py | 2 +- 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/git.py b/git.py index f5262751f..2cab9bf32 100644 --- a/git.py +++ b/git.py @@ -50,6 +50,7 @@ def isGitPatch(baseDir: str, nickname: str, domain: str, """Is the given post content a git patch? """ if messageType != 'Note' and \ + messageType != 'Page' and \ messageType != 'Patch': return False # must have a subject line diff --git a/posts.py b/posts.py index 347821b10..8c81ae68c 100644 --- a/posts.py +++ b/posts.py @@ -446,6 +446,7 @@ def _isPublicFeedPost(item: {}, personPosts: {}, debug: bool) -> bool: return False if item['type'] != 'Create' and \ item['type'] != 'Announce' and \ + item['type'] != 'Page' and \ item['type'] != 'Note': if debug: print('Not a Create/Note/Announce type') @@ -465,7 +466,7 @@ def _isPublicFeedPost(item: {}, personPosts: {}, debug: bool) -> bool: if debug: print('object is not a dict or string') return False - elif item['type'] == 'Note': + elif item['type'] == 'Note' or item['type'] == 'Page': if not item.get('published'): if debug: print('No published attribute') @@ -476,6 +477,10 @@ def _isPublicFeedPost(item: {}, personPosts: {}, debug: bool) -> bool: thisItem = item['object'] # check that this is a public post # #Public should appear in the "to" list + itemIsNote = False + if item['type'] == 'Note' or item['type'] == 'Page': + itemIsNote = True + if isinstance(thisItem, dict): if thisItem.get('to'): isPublic = False @@ -485,7 +490,7 @@ def _isPublicFeedPost(item: {}, personPosts: {}, debug: bool) -> bool: break if not isPublic: return False - elif isinstance(thisItem, str) or item['type'] == 'Note': + elif isinstance(thisItem, str) or itemIsNote: if item.get('to'): isPublic = False for recipient in item['to']: @@ -581,7 +586,7 @@ def _getPosts(session, outboxUrl: str, maxPosts: int, continue thisItem = item - if item['type'] != 'Note': + if item['type'] != 'Note' and item['type'] != 'Page': thisItem = item['object'] content = getBaseContentFromPost(item, systemLanguage) @@ -3409,6 +3414,7 @@ def isImageMedia(session, baseDir: str, httpPrefix: str, if postJsonObject['object'].get('moderationStatus'): return False if postJsonObject['object']['type'] != 'Note' and \ + postJsonObject['object']['type'] != 'Page' and \ postJsonObject['object']['type'] != 'Event' and \ postJsonObject['object']['type'] != 'Article': return False @@ -4555,6 +4561,7 @@ def downloadAnnounce(session, baseDir: str, httpPrefix: str, recentPostsCache) return None if announcedJson['type'] != 'Note' and \ + announcedJson['type'] != 'Page' and \ announcedJson['type'] != 'Article': # You can only announce Note or Article types _rejectAnnounce(announceFilename, diff --git a/utils.py b/utils.py index 09eb9003b..5ac0351b6 100644 --- a/utils.py +++ b/utils.py @@ -2583,6 +2583,7 @@ def isDM(postJsonObject: {}) -> bool: if not hasObjectDict(postJsonObject): return False if postJsonObject['object']['type'] != 'Note' and \ + postJsonObject['object']['type'] != 'Page' and \ postJsonObject['object']['type'] != 'Patch' and \ postJsonObject['object']['type'] != 'EncryptedMessage' and \ postJsonObject['object']['type'] != 'Article': @@ -2611,6 +2612,7 @@ def isReply(postJsonObject: {}, actor: str) -> bool: if postJsonObject['object'].get('moderationStatus'): return False if postJsonObject['object']['type'] != 'Note' and \ + postJsonObject['object']['type'] != 'Page' and \ postJsonObject['object']['type'] != 'EncryptedMessage' and \ postJsonObject['object']['type'] != 'Article': return False diff --git a/webapp_profile.py b/webapp_profile.py index 807c996a4..a99e3380b 100644 --- a/webapp_profile.py +++ b/webapp_profile.py @@ -291,7 +291,7 @@ def htmlProfileAfterSearch(cssCache: {}, if not hasObjectDict(item): continue if item['type'] != 'Create' and item['type'] != 'Announce': - if item['type'] != 'Note': + if item['type'] != 'Note' and item['type'] != 'Page': continue if not item.get('to'): continue From 81d16c148f077505cd1f607c751d2758746803db Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 19:02:26 +0000 Subject: [PATCH 04/19] Get note object --- webapp_profile.py | 1 + 1 file changed, 1 insertion(+) diff --git a/webapp_profile.py b/webapp_profile.py index a99e3380b..e7b748edc 100644 --- a/webapp_profile.py +++ b/webapp_profile.py @@ -290,6 +290,7 @@ def htmlProfileAfterSearch(cssCache: {}, if item['type'] == 'Create': if not hasObjectDict(item): continue + item = item['object'] if item['type'] != 'Create' and item['type'] != 'Announce': if item['type'] != 'Note' and item['type'] != 'Page': continue From 846b1ebc0e8a2705ad6273659f69caacd80d85de Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 19:13:21 +0000 Subject: [PATCH 05/19] Allow page activities where actor is not the same --- webapp_profile.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webapp_profile.py b/webapp_profile.py index e7b748edc..a7dbcd469 100644 --- a/webapp_profile.py +++ b/webapp_profile.py @@ -290,7 +290,6 @@ def htmlProfileAfterSearch(cssCache: {}, if item['type'] == 'Create': if not hasObjectDict(item): continue - item = item['object'] if item['type'] != 'Create' and item['type'] != 'Announce': if item['type'] != 'Note' and item['type'] != 'Page': continue @@ -313,7 +312,8 @@ def htmlProfileAfterSearch(cssCache: {}, item = newItem if not item.get('actor'): continue - if not isAnnouncedFeedItem and item['actor'] != personUrl: + if not isAnnouncedFeedItem and \ + (item['actor'] != personUrl and item['type'] != 'Page'): continue profileStr += \ From f0ba118a4669da48212c1411c66a77f5f9793fe7 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 19:17:01 +0000 Subject: [PATCH 06/19] Tidying --- webapp_profile.py | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webapp_profile.py b/webapp_profile.py index a7dbcd469..5959a050d 100644 --- a/webapp_profile.py +++ b/webapp_profile.py @@ -312,9 +312,9 @@ def htmlProfileAfterSearch(cssCache: {}, item = newItem if not item.get('actor'): continue - if not isAnnouncedFeedItem and \ - (item['actor'] != personUrl and item['type'] != 'Page'): - continue + if not isAnnouncedFeedItem: + if item['actor'] != personUrl and item['type'] != 'Page': + continue profileStr += \ individualPostAsHtml(signingPrivateKeyPem, From dbc82a076a056b5a1c7f889eab00f8f6c82084a5 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 21:06:12 +0000 Subject: [PATCH 07/19] css for tiny screen size --- epicyon-profile.css | 1157 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 958 insertions(+), 199 deletions(-) diff --git a/epicyon-profile.css b/epicyon-profile.css index e6663b9d1..893f3e2a5 100644 --- a/epicyon-profile.css +++ b/epicyon-profile.css @@ -4,60 +4,68 @@ --avatar-rounding: 10%; --timeline-icon-width: 50px; --timeline-icon-width-mobile: 100px; - --header-bg-color: #282c37; - --main-bg-color: #282c37; - --post-bg-color: #282c37; - --column-left-color: #282c37; - --link-bg-color: #282c37; - --dropdown-fg-color: #dddddd; - --dropdown-bg-color: #111; - --dropdown-bg-color-hover: #333; - --dropdown-fg-color-hover: #dddddd; - --main-bg-color-reply: #212c37; - --main-bg-color-dm: #222; - --main-bg-color-report: #221c27; - --main-header-color-roles: #282237; - --main-fg-color: #dddddd; - --cw-color: #dddddd; + --timeline-icon-width-tiny: 50px; + --header-bg-color: #e6ebf0; + --main-bg-color: #e6ebf0; + --post-bg-color: #e6ebf0; + --column-left-color: #e6ebf0; + --link-bg-color: #e6ebf0; + --dropdown-fg-color: #222; + --dropdown-bg-color: white; + --dropdown-bg-color-hover: lightgrey; + --dropdown-fg-color-hover: #222; + --main-bg-color-reply: white; + --main-bg-color-dm: #e3dbf0; + --main-bg-color-report: #e3dbf0; + --main-header-color-roles: #ebebf0; + --main-fg-color: #2d2c37; + --cw-color: #2d2c37; --cw-style: normal; --cw-weight: bold; - --column-left-fg-color: #dddddd; - --column-right-fg-color: yellow; + --column-left-fg-color: #2d2c37; + --column-right-fg-color: black; --column-right-fg-color-voted-on: red; - --main-link-color: #999; - --main-link-color-hover: #bbb; - --main-visited-color: #888; - --border-color: #505050; - --border-width: 2px; - --border-width-header: 2px; + --main-link-color: darkblue; + --main-link-color-hover: blue; + --main-visited-color: #232c37; + --border-color: #c0cdd9; + --border-width: 1px; + --border-width-header: 1px; --font-size-header: 18px; --font-size-header-mobile: 32px; - --font-color-header: #ccc; - --font-size-button-mobile: 34px; - --font-size-links: 18px; + --font-size-header-tiny: 16px; + --font-color-header: black; + --font-size-button-mobile: 26px; + --font-size-button-tiny: 13px; + --font-size-links: 14px; --font-size-publish-button: 18px; - --font-size-newswire: 18px; - --font-size-newswire-mobile: 38px; + --font-size-newswire: 14px; + --font-size-newswire-mobile: 32px; + --font-size-newswire-tiny: 16px; --font-size-dropdown-header: 40px; --font-size-mobile: 50px; - --font-size: 30px; - --font-size2: 24px; - --font-size3: 38px; - --font-size4: 22px; - --font-size5: 20px; - --font-size-likes: 20px; + --font-size-tiny: 25px; + --font-size: 26px; + --font-size2: 20px; + --font-size3: 34px; + --font-size4: 18px; + --font-size5: 16px; + --font-size-likes: 14px; --font-size-likes-mobile: 32px; + --font-size-likes-tiny: 16px; --font-size-pgp-key: 16px; --font-size-pgp-key2: 18px; --font-size-tox: 16px; --font-size-tox2: 18px; --font-size-emoji-reaction: 16px; --font-size-emoji-reaction-mobile: 24px; + --font-size-emoji-reaction-tiny: 12px; --follow-text-size1: 24px; --follow-text-size2: 40px; --time-color: #aaa; --time-vertical-align: 0%; --time-vertical-align-mobile: 1.5%; + --time-vertical-align-tiny: 0.75%; --publish-button-text: #FFFFFF; --button-margin: 5px; --button-left-margin: none; @@ -68,39 +76,43 @@ --button-background-hover: #777; --button-text-hover: white; --button-selected: #666; - --button-highlighted: green; + --button-highlighted: #2b5c6d; --button-fg-highlighted: #FFFFFF; - --button-selected-highlighted: darkgreen; - --button-approve: darkgreen; + --button-selected-highlighted: #2b5c6d; + --button-approve: #2b5c6d; --button-deny: darkred; --button-width-chars: 10ch; --button-height: 10px; --button-height-padding-mobile: 20px; + --button-height-padding-tiny: 10px; --button-height-padding: 10px; --image-corners: 10%; --gallery-border: #ccc; --gallery-hover: #777; - --gallery-text-color: #ccc; + --gallery-text-color: black; --gallery-font-size: 22px; --gallery-font-size-mobile: 35px; - --button-corner-radius: 15px; - --timeline-border-radius: 30px; - --timeline-posts-background-color: #282c37; + --gallery-font-size-tiny: 17.5px; + --button-corner-radius: 5px; + --timeline-border-radius: 5px; + --timeline-posts-background-color: #e6ebf0; --icons-side: right; - --title-color: #999; - --focus-color: white; + --title-color: #2a2c37; + --focus-color: grey; --quote-right-margin: 0.1em; --quote-font-weight: normal; --quote-font-size: 120%; --quote-font-size-mobile: 120%; + --quote-font-size-tiny: 60%; --line-spacing: 180%; --line-spacing-newswire: 120%; - --newswire-item-moderated-color: white; - --newswire-date-moderated-color: white; + --newswire-item-moderated-color: grey; + --newswire-date-moderated-color: grey; --column-left-width: 10vw; --column-center-width: 80vw; --column-right-width: 10vw; --column-left-mobile-margin: 2%; + --column-left-mobile-tiny: 1%; --column-left-top-margin: 0; --column-right-top-margin: 0; --column-left-header-style: uppercase; @@ -108,24 +120,29 @@ --column-left-header-color: #fff; --column-left-header-size: 20px; --column-left-header-size-mobile: 50px; + --column-left-header-size-tiny: 25px; --column-left-border-width: 0; --column-left-icons-margin: 0; --column-right-border-width: 0; --column-left-border-color: black; --column-left-icon-size: 2.1vw; --column-left-icon-size-mobile: 10%; + --column-left-icon-size-tiny: 5%; --column-left-image-width-mobile: 40vw; + --column-left-image-width-tiny: 20vw; --column-right-image-width-mobile: 100vw; + --column-right-image-width-tiny: 50vw; --column-right-icon-size: 2.1vw; --column-right-icon-size-mobile: 10%; - --newswire-date-color: white; + --column-right-icon-size-tiny: 5%; + --newswire-date-color: #00a594; --newswire-voted-background-color: black; - --login-button-color: #2965; + --login-button-color: #2b5c6d; --login-button-fg-color: black; --button-event-corner-radius: 60px; - --button-event-background-color: green; + --button-event-background-color: #2b5c6d; --button-event-fg-color: white; - --hashtag-background-color: black; + --hashtag-background-color: grey; --hashtag-fg-color: white; --tab-border-width: 0px; --tab-border-color: grey; @@ -135,22 +152,27 @@ --container-padding: 2%; --container-padding-bottom: 1%; --container-padding-bottom-mobile: 0%; + --container-padding-bottom-tiny: 0%; --vertical-between-posts: 10px; --vertical-between-posts-header: 10px; --containericons-horizontal-spacing: 1%; --containericons-horizontal-spacing-mobile: 3%; + --containericons-horizontal-spacing-tiny: 1.5%; --containericons-horizontal-offset: -1%; --containericons-vertical-align: 0.5%; --containericons-vertical-align-mobile: 1%; + --containericons-vertical-align-tiny: 0.5%; --likes-count-offset: 5px; --likes-count-offset-mobile: 10px; + --likes-count-offset-tiny: 5px; --publish-button-vertical-offset: 10px; --publish-button-bottom-offset: 10px; - --banner-height: 15vh; + --banner-height: 20vh; --banner-height-mobile: 10vh; + --banner-height-tiny: 10vh; --post-separator-background: transparent; - --post-separator-margin-top: 0; - --post-separator-margin-bottom: 0; + --post-separator-margin-top: 10px; + --post-separator-margin-bottom: 10px; --post-separator-width: 95%; --separator-width-left: 95%; --separator-width-right: 95%; @@ -160,30 +182,32 @@ --profile-text-align: left; --verticals-width: 0; --italic-font-style: italic; - --header-font: 'Arial, Helvetica, sans-serif'; + --header-font: 'NimbusSanL'; --button-bottom-margin: 10px; --rendering: normal; --voteresult-color: #dddddd; --voteresult-border-color: #aaaaaa; --voteresult-height: 32px; --voteresult-height-mobile: 32px; + --voteresult-height-tiny: 16px; --voteresult-width: 80%; --voteresult-width-mobile: 80%; + --voteresult-width-tiny: 40%; } @font-face { - font-family: 'Bedstead'; - font-style: italic; - font-weight: normal; - font-display: block; - src: url('./fonts/bedstead.otf') format('opentype'); + font-family: 'NimbusSanL'; + font-style: italic; + font-weight: normal; + font-display: block; + src: url('./fonts/NimbusSanL-italic.otf') format('opentype'); } @font-face { - font-family: 'Bedstead'; - font-style: normal; - font-weight: normal; - font-display: block; - src: url('./fonts/bedstead.otf') format('opentype'); + font-family: 'NimbusSanL'; + font-style: normal; + font-weight: normal; + font-display: block; + src: url('./fonts/NimbusSanL.otf') format('opentype'); } body, html { @@ -191,7 +215,7 @@ body, html { color: var(--main-fg-color); height: 100%; - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; min-width: 950px; font-size: var(--font-size); line-height: var(--line-spacing); @@ -308,7 +332,7 @@ blockquote p { } .imageAnchor { - font-family: var(--header-font); + font-family: var(--header-font); } .imageAnchor:focus img{ @@ -354,7 +378,7 @@ a:focus { } .profileHeader { - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; position: relative; overflow: hidden; margin: 10px; @@ -415,14 +439,14 @@ a:focus { .about { font-size: var(--font-size5); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; float: right; } .blogreplies { color: var(--button-highlighted); font-size: var(--font-size2); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; float: right; } @@ -442,13 +466,13 @@ a:focus { .new-post-text { font-size: var(--font-size2); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: 4px 0; } .new-post-subtext { font-size: var(--font-size-header); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: 4px 0; } @@ -497,7 +521,7 @@ a:focus { } .button span { - font-family: var(--header-font); + font-family: var(--header-font); cursor: pointer; display: inline-block; position: relative; @@ -515,7 +539,7 @@ a:focus { } .buttonselected span { - font-family: var(--header-font); + font-family: var(--header-font); cursor: pointer; display: inline-block; position: relative; @@ -575,7 +599,7 @@ a:focus { .gitpatch { width: 90%; - font-family: 'monospace'; + font-family: 'NimbusSanL'; } .searchEmoji { @@ -618,13 +642,13 @@ a:focus { .imText { font-size: var(--font-size4); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; color: var(--main-link-color); background: var(--link-bg-color); } .announceOrReply { - font-family: var(--header-font); + font-family: var(--header-font); } .container img.announceOrReply { @@ -711,7 +735,7 @@ a:focus { margin-left: 25%; text-align: left; font-size: var(--font-size2); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; font-weight: bold; color: var(--button-selected); line-height: 40px; @@ -728,7 +752,7 @@ a:focus { width: 10%; height: 30px; background-color: var(--button-background); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } input[type=number] { @@ -741,12 +765,12 @@ input[type=number] { margin-bottom: 16px; resize: vertical; font-size: var(--font-size-header); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .labels { font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .transparent { @@ -769,14 +793,14 @@ input[type=number] { .labelsright { float: right; font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } input[type=date] { background-color: var(--main-bg-color-reply); color: var(--main-fg-color); font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; border: none; } @@ -784,7 +808,7 @@ input[type=time] { background-color: var(--main-bg-color-reply); color: var(--main-fg-color); font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; border: none; } @@ -797,7 +821,7 @@ input[type=submit] { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size-header); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; width: 10ch; float: right; } @@ -812,7 +836,7 @@ input[type=submit] { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size2); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; opacity: 0.7; } @@ -842,7 +866,7 @@ input[type=submit]:hover { .search-result-text { font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .search-result img { @@ -853,99 +877,99 @@ input[type=submit]:hover { /* new post dropdown */ .newPostDropdown { - position: relative; + position: relative; } .newPostDropdown img { - width: var(--font-size-dropdown-header); + width: var(--font-size-dropdown-header); } .newPostDropdown > input[type="checkbox"] { - position: absolute; - left: -100vw; + position: absolute; + left: -100vw; } .newPostDropdown > label, .newPostDropdown > a[role="button"] { - display: inline-block; - padding: 6px 0px; - color: var(--dropdown-fg-color); - font-size: var(--font-size-dropdown-header); - font-family: var(--header-font); - line-height: 1.5em; - text-decoration: none; - border: 0; - cursor: pointer; + display: inline-block; + padding: 6px 0px; + color: var(--dropdown-fg-color); + font-size: var(--font-size-dropdown-header); + font-family: var(--header-font); + line-height: 1.5em; + text-decoration: none; + border: 0; + cursor: pointer; } .newPostDropdown > label:hover, .newPostDropdown > a[role="button"]:hover, .newPostDropdown > a[role="button"]:focus { - border-color: var(--dropdown-fg-color-hover); + border-color: var(--dropdown-fg-color-hover); } .newPostDropdown > label:after, .newPostDropdown > a[role="button"]:after { - content: ""; - font-family: 'Bedstead'; - display: inline-block; - margin-left: 6px; + content: ""; + font-family: 'NimbusSanL'; + display: inline-block; + margin-left: 6px; } .newPostDropdown > ul { - position: absolute; - z-index: 999; - display: block; - left: -100vw; - top: calc(1.5em + 14px); - border: 0; - background: var(--dropdown-bg-color); - padding: 6px 0; - margin: 0; - list-style: none; - width: 100%; + position: absolute; + z-index: 999; + display: block; + left: -100vw; + top: calc(1.5em + 14px); + border: 0; + background: var(--dropdown-bg-color); + padding: 6px 0; + margin: 0; + list-style: none; + width: 100%; } .newPostDropdown > ul a { - display: block; - padding: 6px 15px; - text-decoration: none; - color: var(--dropdown-fg-color); + display: block; + padding: 6px 15px; + text-decoration: none; + color: var(--dropdown-fg-color); } .newPostDropdown > ul a:hover, .newPostDropdown > ul a:focus { - color: var(--dropdown-fg-color-hover); - background: var(--dropdown-bg-color-hover); + color: var(--dropdown-fg-color-hover); + background: var(--dropdown-bg-color-hover); } .newPostDropdown > input[type="checkbox"]:checked ~ ul, .newPostDropdown > ul:target { - left: 0; + left: 0; } .newPostDropdown > [type="checkbox"]:checked + label:after, .newPostDropdown > ul:target ~ a:after { - content: "↴"; + content: "↴"; } .newPostDropdown a.close { - display: none; + display: none; } .newPostDropdown > ul:target ~ a.close { - display: block; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 100%; - text-indent: -100vw; - z-index: 1000; + display: block; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + text-indent: -100vw; + z-index: 1000; } .newPostDropdown + h2 { - margin-top: 60px; + margin-top: 60px; } .slider { @@ -1003,7 +1027,7 @@ div.gallery img { .invisible { color: transparent; font-size: 0; - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .gallerytext { @@ -1035,19 +1059,19 @@ div.container { color: var(--main-fg-color); height: 100%; - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; min-width: 950px; font-size: var(--font-size); line-height: var(--line-spacing); } h1 { - font-family: var(--header-font); + font-family: var(--header-font); font-size: var(--font-size); color: var(--title-color); } .followText { font-size: var(--follow-text-size1); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .accountsTable { width: 100%; @@ -1099,7 +1123,7 @@ div.container { h3.linksHeader { background-color: var(--column-left-header-background); color: var(--column-left-header-color); - font-family: var(--header-font); + font-family: var(--header-font); font-size: var(--column-left-header-size); text-transform: var(--column-left-header-style); border: none; @@ -1250,7 +1274,7 @@ div.container { } .likesCount { font-size: var(--font-size-likes); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; float: right; padding: 10px 0; transform: translateX(var(--likes-count-offset)); @@ -1258,25 +1282,25 @@ div.container { } .container p.administeredby { font-size: var(--font-size-header); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .toxaddr { font-size: var(--font-size-tox); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .ssbaddr { font-size: var(--font-size-pgp-key); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .pgp { font-size: var(--font-size-pgp-key); color: var(--main-link-color); background: var(--link-bg-color); - font-family: 'monospace'; + font-family: 'NimbusSanL'; } body, html { font-size: var(--font-size4); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .galleryContainer { display: grid; @@ -1287,7 +1311,7 @@ div.container { div.gallerytext { color: var(--gallery-text-color); font-size: var(--gallery-font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } div.gallery { margin: 5px 1.5%; @@ -1398,7 +1422,7 @@ div.container { color: var(--button-event-fg-color); text-align: center; font-size: var(--font-size-header); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding); transition: all 0.5s; cursor: pointer; @@ -1422,7 +1446,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-header); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; margin: var(--button-margin); @@ -1442,7 +1466,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-header); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding); width: 20%; margin: var(--button-margin); @@ -1462,7 +1486,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-header); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; margin: 5px; @@ -1483,7 +1507,7 @@ div.container { color: var(--publish-button-text); text-align: center; font-size: var(--font-size-publish-button); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding); width: 10%; max-width: 200px; @@ -1501,7 +1525,7 @@ div.container { color: var(--button-fg-highlighted); text-align: center; font-size: var(--font-size-header); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding); width: 10%; max-width: 100px; @@ -1516,7 +1540,7 @@ div.container { color: var(--button-selected-text); text-align: center; font-size: var(--font-size-header); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; margin: var(--button-margin); @@ -1537,7 +1561,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-header); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; max-width: 100px; @@ -1553,7 +1577,7 @@ div.container { color: #FFFFFF; text-align: center; font-size: var(--font-size-header); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding); width: 20%; max-width: 200px; @@ -1569,7 +1593,7 @@ div.container { color: #FFFFFF; text-align: center; font-size: var(--font-size-header); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding); width: 20%; max-width: 200px; @@ -1597,7 +1621,7 @@ div.container { margin-bottom: 16px; resize: vertical; font-size: var(--font-size2); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; background-color: var(--main-bg-color-reply); color: var(--main-fg-color); } @@ -1611,21 +1635,21 @@ div.container { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; width: 10ch; float: right; } .question { font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .questionresult { font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } input[type=radio] { font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; width: 32px; vertical-align: middle; margin-right: 20px; @@ -1640,7 +1664,7 @@ div.container { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; width: 20%; } input[type=file] { @@ -1652,7 +1676,7 @@ div.container { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; width: 96%; } .cancelbtn { @@ -1665,12 +1689,12 @@ div.container { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; width: 20%; } .scope-desc { font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .buttonunfollow { border-radius: var(--button-corner-radius); @@ -1679,7 +1703,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-header); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding); width: 20%; max-width: 200px; @@ -1704,7 +1728,7 @@ div.container { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size2); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; opacity: 0.7; } input[type=checkbox] @@ -1775,7 +1799,7 @@ div.container { .rlab { font-size: var(--font-size); margin: 15px 15px; - line-height: 200%; + line-height: 200%; } } @@ -1794,14 +1818,14 @@ div.container { color: var(--main-fg-color); height: 100%; - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; min-width: 950px; margin-left: 0; font-size: var(--font-size); line-height: var(--line-spacing); } h1 { - font-family: var(--header-font); + font-family: var(--header-font); font-size: var(--font-size-mobile); color: var(--title-color); } @@ -1858,7 +1882,7 @@ div.container { h3.linksHeader { background-color: var(--column-left-header-background); color: var(--column-left-header-color); - font-family: var(--header-font); + font-family: var(--header-font); font-size: var(--column-left-header-size-mobile); text-transform: var(--column-left-header-style); border: none; @@ -1984,7 +2008,7 @@ div.container { } .likesCount { font-size: var(--font-size-likes-mobile); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; float: right; padding: 32px 0; transform: translateX(var(--likes-count-offset-mobile)); @@ -1992,30 +2016,30 @@ div.container { } .container p.administeredby { font-size: var(--font-size-tox2); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .toxaddr { font-size: var(--font-size-tox2); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .ssbaddr { font-size: var(--font-size-pgp-key2); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .pgp { font-size: var(--font-size-pgp-key2); color: var(--main-link-color); background: var(--link-bg-color); - font-family: 'monospace'; + font-family: 'NimbusSanL'; } body, html { font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } div.gallerytext { color: var(--gallery-text-color); font-size: var(--gallery-font-size-mobile); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .galleryContainer { display: grid; @@ -2130,7 +2154,7 @@ div.container { color: var(--button-event-fg-color); text-align: center; font-size: var(--font-size-button-mobile); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding-mobile); transition: all 0.5s; cursor: pointer; @@ -2142,7 +2166,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-mobile); width: 20%; min-width: var(--button-width-chars); @@ -2161,7 +2185,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-mobile); width: 30%; min-width: var(--button-width-chars); @@ -2195,7 +2219,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding-mobile); width: 20%; min-width: var(--button-width-chars); @@ -2224,7 +2248,7 @@ div.container { color: var(--publish-button-text); text-align: center; font-size: var(--font-size-newswire-mobile); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding-mobile); width: 20%; max-width: 400px; @@ -2240,7 +2264,7 @@ div.container { color: var(--button-fg-highlighted); text-align: center; font-size: var(--font-size-button-mobile); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding-mobile); width: 20%; max-width: 400px; @@ -2255,7 +2279,7 @@ div.container { color: var(--button-selected-text); text-align: center; font-size: var(--font-size-button-mobile); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-mobile); width: 20%; min-width: var(--button-width-chars); @@ -2275,7 +2299,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-mobile); width: 20%; max-width: 400px; @@ -2291,7 +2315,7 @@ div.container { color: #FFFFFF; text-align: center; font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding-mobile); width: 20%; max-width: 400px; @@ -2307,7 +2331,7 @@ div.container { color: #FFFFFF; text-align: center; font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding-mobile); width: 20%; max-width: 400px; @@ -2335,7 +2359,7 @@ div.container { margin-bottom: 16px; resize: vertical; font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; background-color: var(--main-bg-color-reply); color: var(--main-fg-color); } @@ -2349,21 +2373,21 @@ div.container { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; width: 10ch; float: right; } .question { font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .questionresult { font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } input[type=radio] { font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; height: 90px; vertical-align: middle; margin-right: 20px; @@ -2378,7 +2402,7 @@ div.container { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; width: 20%; } input[type=file] { @@ -2390,7 +2414,7 @@ div.container { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; width: 95.4%; } .cancelbtn { @@ -2403,12 +2427,12 @@ div.container { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; width: 20%; } .scope-desc { font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .buttonunfollow { border-radius: var(--button-corner-radius); @@ -2417,7 +2441,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; padding: var(--button-height-padding-mobile); width: 20%; max-width: 200px; @@ -2442,7 +2466,7 @@ div.container { border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size3); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; opacity: 0.7; } input[type=checkbox] @@ -2514,11 +2538,746 @@ div.container { } .followText { font-size: var(--follow-text-size2); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .rlab { font-size: var(--font-size-mobile); margin: 25px 25px; - line-height: 300%; + line-height: 300%; + } +} + +@media screen and (max-width: 480px) { + body, html { + background-color: var(--main-bg-color); + color: var(--main-fg-color); + + height: 100%; + font-family: 'NimbusSanL'; + min-width: 400px; + margin-left: 0; + font-size: var(--font-size); + line-height: var(--line-spacing); + } + h1 { + font-family: var(--header-font); + font-size: var(--font-size-tiny); + color: var(--title-color); + } + blockquote { + font-size: var(--quote-font-size-tiny); + } + .accountsTable { + width: 100%; + border: 0; + } + .accountsTableCol { + width: 20%; + text-align: center; + } + .containerHeader { + border: var(--border-width-header) solid var(--border-color); + background-color: var(--header-bg-color); + border-radius: var(--timeline-border-radius); + padding: var(--header-button-padding); + margin: var(--vertical-between-posts-header); + transform: translateY(0%); + margin-bottom: var(--button-bottom-margin); + } + .container { + border: var(--border-width) solid var(--border-color); + background-color: var(--post-bg-color); + border-radius: var(--timeline-border-radius); + padding-left: var(--container-padding); + padding-right: var(--container-padding); + padding-top: var(--container-padding); + padding-bottom: var(--container-padding-bottom-tiny); + margin: var(--vertical-between-posts); + } + .containerNoOverflow { + border: var(--border-width) solid var(--border-color); + background-color: var(--post-bg-color); + border-radius: var(--timeline-border-radius); + padding-left: var(--container-padding); + padding-right: var(--container-padding); + padding-top: var(--container-padding); + padding-bottom: var(--container-padding-bottom-tiny); + margin: var(--vertical-between-posts); + } + .containerNewPost { + border: var(--border-width) solid var(--border-color); + background-color: var(--main-bg-color); + border-radius: var(--timeline-border-radius); + padding-left: var(--container-padding); + padding-right: var(--container-padding); + padding-top: var(--container-padding); + padding-bottom: var(--container-padding-bottom-tiny); + margin: var(--vertical-between-posts); + } + h3.linksHeader { + background-color: var(--column-left-header-background); + color: var(--column-left-header-color); + font-family: var(--header-font); + font-size: var(--column-left-header-size-tiny); + text-transform: var(--column-left-header-style); + border: none; + } + .leftColEditImage { + background: var(--main-bg-color); + width: var(--column-left-icon-size-tiny); + float: right; + margin: 20px 0px; + } + .leftColImg { + background: var(--main-bg-color); + width: var(--column-left-image-width-tiny); + float: right; + margin: 0 0; + padding: 0 0; + } + .rightColEditImage { + background: var(--main-bg-color); + width: var(--column-right-icon-size-tiny); + float: right; + margin: 20px 0px; + } + .rightColImg { + background: var(--main-bg-color); + width: var(--column-right-image-width-tiny); + float: right; + margin: 0 0; + padding: 0 0; + } + .newswireItem { + padding-top: 0; + margin-top: 0; + font-size: var(--font-size-newswire-tiny); + color: var(--column-right-fg-color); + line-height: var(--line-spacing-newswire); + } + .newswireItem img { + width: 40px; + } + .newswireItemModerated { + font-size: var(--font-size-newswire-tiny); + color: var(--newswire-item-moderated-color); + line-height: var(--line-spacing-newswire); + } + .newswireItemModerated img { + width: 40px; + } + .newswireDateModerated { + font-size: var(--font-size-newswire-tiny); + font-weight: bold; + color: var(--newswire-date-moderated-color); + float: right; + } + .newswireItemVotedOn a:link { + background: var(--newswire-voted-background-color); + } + .newswireItemVotedOn { + font-size: var(--font-size-newswire-tiny); + font-weight: bold; + color: var(--column-right-fg-color-voted-on); + line-height: var(--line-spacing-newswire); + } + .newswireItemVotedOn img { + width: 40px; + } + .newswireDate { + font-size: var(--font-size-newswire-tiny); + color: var(--newswire-date-color); + float: right; + } + .newswireDateVotedOn { + font-size: var(--font-size-newswire-tiny); + font-weight: bold; + color: var(--column-right-fg-color-voted-on); + float: right; + } + .imageAnchorMobile img { + display: inline; + } + .timeline-banner { + vertical-align: top; + object-fit: cover; + width: 98vw; + max-height: var(--banner-height-tiny); + } + .timeline { + border: 0; + width: 100vw; + table-layout: fixed; + overflow: hidden; + } + .column-left { + display: none; + width: 0%; + } + .col-left-tiny { + margin-left: var(--column-left-tiny-margin); + } + .col-left { + float: left; + width: 0%; + display: none; + } + .col-center { + width: 100vw; + } + .col-right-tiny { + margin-left: var(--column-left-tiny-margin); + margin-right: var(--column-left-tiny-margin); + } + .col-right { + float: right; + width: 0%; + display: none; + } + .column-right { + display: none; + width: 0%; + } + .column-center { + width: 100%; + } + .likesCount { + font-size: var(--font-size-likes-tiny); + font-family: 'NimbusSanL'; + float: right; + padding: 32px 0; + transform: translateX(var(--likes-count-offset-tiny)); + font-weight: bold; + } + .container p.administeredby { + font-size: var(--font-size-tox2); + font-family: 'NimbusSanL'; + } + .toxaddr { + font-size: var(--font-size-tox2); + font-family: 'NimbusSanL'; + } + .ssbaddr { + font-size: var(--font-size-pgp-key2); + font-family: 'NimbusSanL'; + } + .pgp { + font-size: var(--font-size-pgp-key2); + color: var(--main-link-color); + background: var(--link-bg-color); + font-family: 'NimbusSanL'; + } + body, html { + font-size: var(--font-size4); + font-family: 'NimbusSanL'; + } + div.gallerytext { + color: var(--gallery-text-color); + font-size: var(--gallery-font-size-tiny); + font-family: 'NimbusSanL'; + } + .galleryContainer { + display: grid; + grid-template-columns: auto; + background-color: var(--main-bg-color); + } + div.gallery { + margin: 5px 1.5%; + border: 1px solid var(--gallery-border); + float: left; + width: 98%; + } + div.imagedesc { + padding: 35px; + text-align: center; + } + .container img { + float: left; + max-width: 400px; + width: 15%; + padding: 0px 7px; + margin-right: 20px; + border-radius: var(--image-corners); + } + .containerNoOverflow img { + float: left; + max-width: 400px; + width: 15%; + padding: 0px 7px; + margin-right: 20px; + border-radius: var(--image-corners); + } + .containerHeader img { + float: left; + max-width: 400px; + width: 15%; + padding: 0px 7px; + margin-right: 20px; + border-radius: var(--image-corners); + } + .container img.emojisearch { + width: 25%; + float: right; + } + .container img.emojicalendar { + float: left; + max-width: 400px; + width: 12%; + -ms-transform: translateY(-25%); + transform: translateY(-25%); + } + .container img.timelineicon { + float: var(--icons-side); + margin-left: 0px; + margin-right: 0px; + padding: 0px 0px; + margin: 0px 0px; + width: var(--timeline-icon-width-tiny); + } + .containerHeader img.timelineicon { + float: var(--icons-side); + margin-left: 0px; + margin-right:0; + padding: 0 0; + margin: 0 0; + width: var(--timeline-icon-width-tiny); + } + .container img.emojiheader { + float: none; + width: 45px; + margin-left: 0px; + margin-right: 0px; + padding-right: 0px; + border-radius: 0px; + vertical-align: middle; + } + div.mediaavatar img { + float: left; + max-width: 200px; + width: 8%; + margin: 0px 1%; + border-radius: 0%; + } + div.mediaicons img { + float: right; + max-width: 200px; + width: 10%; + margin: 0px 1%; + border-radius: 0%; + } + .containericons img { + float: var(--icons-side); + max-width: 200px; + width: 7%; + margin: var(--containericons-vertical-align-tiny) var(--containericons-horizontal-spacing-tiny); + margin-right: 0px; + border-radius: 0%; + } + .timeline-avatar img { + opacity: 1.0; + width: 15%; + height: 15%; + padding: 0px 0px; + -ms-transform: translateY(-10%); + transform: translateY(-10%); + border-radius: var(--avatar-rounding); + } + .buttonevent { + border-radius: var(--button-event-corner-radius); + background-color: var(--button-event-background-color); + border: none; + color: var(--button-event-fg-color); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: 'NimbusSanL'; + padding: var(--button-height-padding-tiny); + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .button { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: var(--header-font); + padding: var(--button-height-padding-tiny); + width: 20%; + min-width: var(--button-width-chars); + transition: all 0.5s; + cursor: pointer; + margin: var(--button-margin); + border-top: var(--tab-border-width) solid var(--tab-border-color); + border-bottom: none; + border-left: var(--tab-border-width) solid var(--tab-border-color); + border-right: var(--tab-border-width) solid var(--tab-border-color); + margin-bottom: var(--button-bottom-margin); + } + .contactbutton { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: var(--header-font); + padding: var(--button-height-padding-tiny); + width: 30%; + min-width: var(--button-width-chars); + transition: all 0.5s; + cursor: pointer; + margin: var(--button-margin); + border-top: var(--tab-border-width) solid var(--tab-border-color); + border-bottom: none; + border-left: var(--tab-border-width) solid var(--tab-border-color); + border-right: var(--tab-border-width) solid var(--tab-border-color); + margin-bottom: var(--button-bottom-margin); + } + .frontPageMobileButtons{ + display: block; + border: var(--border-width-header) solid var(--border-color); + background-color: var(--main-bg-color); + border-radius: var(--timeline-border-radius); + padding: var(--container-button-padding); + margin: var(--vertical-between-posts-header); + } + .frontPageMobileButtons img { + float: right; + max-width: 400px; + width: 10%; + padding: 0px 7px; + margin-right: 20px; + } + .buttonMobile { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: 'NimbusSanL'; + padding: var(--button-height-padding-tiny); + width: 20%; + min-width: var(--button-width-chars); + transition: all 0.5s; + cursor: pointer; + margin: var(--button-margin); + border-top: var(--tab-border-width) solid var(--tab-border-color); + border-bottom: none; + border-left: var(--tab-border-width) solid var(--tab-border-color); + border-right: var(--tab-border-width) solid var(--tab-border-color); + margin-bottom: var(--button-bottom-margin); + } + .buttonDesktop { + background: transparent; + border: none !important; + font-size: 0; + padding-left: 0; padding-right: 0; + border-left-width: 0; border-right-width: 0; + white-space: nowrap; + overflow: hidden; + } + .publishbtn { + border-radius: var(--button-corner-radius); + background-color: var(--publish-button-background); + border: none; + color: var(--publish-button-text); + text-align: center; + font-size: var(--font-size-newswire-tiny); + font-family: 'NimbusSanL'; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: var(--button-width-chars); + transition: all 0.5s; + cursor: pointer; + margin: 15px 0px; + } + .buttonhighlighted { + border-radius: var(--button-corner-radius); + background-color: var(--button-highlighted); + border: none; + color: var(--button-fg-highlighted); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: 'NimbusSanL'; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: var(--button-width-chars); + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .buttonselected { + border-radius: var(--button-corner-radius); + background-color: var(--button-selected); + color: var(--button-selected-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: var(--header-font); + padding: var(--button-height-padding-tiny); + width: 20%; + min-width: var(--button-width-chars); + transition: all 0.5s; + cursor: pointer; + margin: var(--button-margin); + border-top: var(--tab-border-width) solid var(--tab-border-color); + border-bottom: none; + border-left: var(--tab-border-width) solid var(--tab-border-color); + border-right: var(--tab-border-width) solid var(--tab-border-color); + margin-bottom: var(--button-bottom-margin); + } + .buttonselectedhighlighted { + border-radius: var(--button-corner-radius); + background-color: var(--button-selected-highlighted); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: var(--header-font); + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: var(--button-width-chars); + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .followApprove { + border-radius: var(--button-corner-radius); + background-color: var(--button-approve); + border: none; + color: #FFFFFF; + text-align: center; + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 80px; + cursor: pointer; + margin: 0 15px; + float: right; + } + .followDeny { + border-radius: var(--button-corner-radius); + background-color: var(--button-deny); + border: none; + color: #FFFFFF; + text-align: center; + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 80px; + cursor: pointer; + margin: 0 15px; + float: right; + } + .pageicon { + width: 14%; + background-color: var(--post-bg-color); + } + .time-right { + float: var(--icons-side); + color: var(--time-color); + margin: var(--time-vertical-align-tiny) 20px; + } + input[type=text], input[type=password], select, textarea { + width: 100%; + padding: 12px; + border: 1px solid #ccc; + border-radius: var(--button-corner-radius); + box-sizing: border-box; + margin-top: 6px; + margin-bottom: 16px; + resize: vertical; + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + background-color: var(--main-bg-color-reply); + color: var(--main-fg-color); + } + input[type=button], input[type=submit] { + background-color: var(--button-background); + color: var(--button-text); + display: inline-block; + padding: var(--button-height-padding-tiny); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + width: 10ch; + float: right; + } + .question { + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + } + .questionresult { + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + } + input[type=radio] { + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + height: 90px; + vertical-align: middle; + margin-right: 20px; + } + input.vote[type=submit] { + background-color: var(--button-background); + color: var(--button-text); + float: right; + padding: var(--button-height-padding-tiny); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + width: 20%; + } + input[type=file] { + background-color: var(--button-background); + color: var(--button-text); + padding: 20px; + margin: 0px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + width: 95.4%; + } + .cancelbtn { + background-color: var(--button-background); + color: var(--button-text); + display: inline-block; + padding: var(--button-height-padding-tiny); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + width: 20%; + } + .scope-desc { + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + } + .buttonunfollow { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: 'NimbusSanL'; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 200px; + min-width: 100px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + float: right; + } + .license { + float: right; + margin: 0% 1%; + width: 20%; + } + .donateButton { + background-color: var(--button-background); + color: var(--button-text); + float: none; + margin: 0px 10px; + padding: 12px 40px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: 'NimbusSanL'; + opacity: 0.7; + } + input[type=checkbox] + { + -ms-transform: scale(4); + -moz-transform: scale(4); + -webkit-transform: scale(4); + -o-transform: scale(4); + transform: scale(4); + padding: 20px; + margin: 30px 40px; + } + input[type=radio] + { + -ms-transform: scale(2); + -moz-transform: scale(2); + -webkit-transform: scale(2); + -o-transform: scale(2); + transform: scale(2); + padding: 20px; + margin: 30px 40px; + } + input[type=number] + { + -ms-transform: scale(2); + -moz-transform: scale(2); + -webkit-transform: scale(2); + -o-transform: scale(2); + transform: scale(2); + padding: 10px; + margin: 40px 80px; + } + .columnIcons img { + width: 10%; + float: right; + margin-right: 1vw; + } + .pageslist { + } + .voteresult { + width: var(--voteresult-width-tiny); + height: var(--voteresult-height-tiny); + } + .voteresultbar { + height: var(--voteresult-height-tiny); + fill: var(--voteresult-color); + stroke-width: 10; + stroke: var(--voteresult-border-color) + } + .emojiReactionBar { + } + .emojiReactionButton { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + line-height: 2rem; + margin-right: 6px; + padding: 1px 6px; + border: 1px solid var(--border-color); + border-radius: 10px; + background-color: var(--main-bg-color); + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + font-size: var(--font-size-emoji-reaction-tiny); + } + .followText { + font-size: var(--follow-text-size2); + font-family: 'NimbusSanL'; + } + .rlab { + font-size: var(--font-size-tiny); + margin: 25px 25px; + line-height: 300%; } } From f0eea4951b6cbd3e86e73177d10a8882e80e3df5 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 21:22:15 +0000 Subject: [PATCH 08/19] Tiny search screen css --- epicyon-search.css | 94 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 84 insertions(+), 10 deletions(-) diff --git a/epicyon-search.css b/epicyon-search.css index 658e5ee08..1666ac79f 100644 --- a/epicyon-search.css +++ b/epicyon-search.css @@ -43,18 +43,18 @@ } @font-face { - font-family: 'Bedstead'; - font-style: italic; - font-weight: normal; - font-display: block; - src: url('./fonts/bedstead.otf') format('opentype'); + font-family: 'Bedstead'; + font-style: italic; + font-weight: normal; + font-display: block; + src: url('./fonts/bedstead.otf') format('opentype'); } @font-face { - font-family: 'Bedstead'; - font-style: normal; - font-weight: normal; - font-display: block; - src: url('./fonts/bedstead.otf') format('opentype'); + font-family: 'Bedstead'; + font-style: normal; + font-weight: normal; + font-display: block; + src: url('./fonts/bedstead.otf') format('opentype'); } body, html { @@ -342,3 +342,77 @@ input[type=text] { margin: 30px 40px; } } + +@media screen and (max-width: 480px) { + details { + font-size: var(--hashtag-size3); + } + .domainHistogram { + border: 0; + font-size: var(--hashtag-size3); + } + .timeline-banner { + object-fit: cover; + width: 98vw; + max-height: var(--search-banner-height-mobile); + } + .hashtagswarm { + font-size: var(--font-size2); + font-family: 'NimbusSanL'; + margin: var(--hashtag-margin); + line-height: var(--hashtag-vertical-spacing3); + } + .followText { + font-size: var(--follow-text-size3); + font-family: 'NimbusSanL'; + } + input[type=text] { + width: var(--follow-text-entry-width); + clear: both; + font-size: 40px; + font-family: 'NimbusSanL'; + text-align: center; + color: var(--text-entry-foreground); + background-color: var(--text-entry-background); + } + .button { + border-radius: 4px; + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + padding: 10px; + font-size: 40px; + font-family: 'NimbusSanL'; + width: 20%; + max-width: 200px; + min-width: 100px; + cursor: pointer; + margin: 30px; + } + input[type=checkbox] + { + -ms-transform: scale(4); + -moz-transform: scale(4); + -webkit-transform: scale(4); + -o-transform: scale(4); + transform: scale(4); + padding: 20px; + margin: 30px 40px; + } + .button { + border-radius: 4px; + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + padding: 10px; + font-size: var(--font-size2); + font-family: 'NimbusSanL'; + width: 20%; + max-width: 200px; + min-width: 100px; + cursor: pointer; + margin: 30px; + } +} From f525da056f2d22144326faf05d27d82bb759ebf9 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 21:52:17 +0000 Subject: [PATCH 09/19] Tiny calendar screen --- epicyon-calendar.css | 61 ++++++++++++++++++++++++++++++-------------- 1 file changed, 42 insertions(+), 19 deletions(-) diff --git a/epicyon-calendar.css b/epicyon-calendar.css index ffed3df26..eb279a995 100644 --- a/epicyon-calendar.css +++ b/epicyon-calendar.css @@ -1,7 +1,7 @@ :root { - --main-bg-color: #282c37; - --calendar-bg-color: #eee; - --lines-color: black; + --main-bg-color: #e6ebf0; + --calendar-bg-color: #e6ebf0; + --lines-color: darkblue; --day-number: black; --day-number2: #282c37; --time-color: black; @@ -9,47 +9,50 @@ --event-color: #282c37; --event-public-color: #282c37; --today-foreground: white; - --today-circle: red; - --event-background: orange; - --event-background-private: #ddd; - --event-foreground:white; - --title-text: #282c37; - --title-background: #ccc; - --focus-color: white; + --today-circle: #03a494; + --event-background: lightgrey; + --event-background-private: grey; + --event-foreground: white; + --title-text: white; + --title-background: #2b5c6d; + --focus-color: grey; --calendar-horizontal-padding: 0; --calendar-cell-size: 1.5vw; --calendar-cell-size-mobile: 1.5vw; + --calendar-cell-size-tiny: 1.5vw; --font-size-calendar: 20px; --font-size-calendar-mobile: 30px; + --font-size-calendar-tiny: 15px; --font-size-calendar-header: 3rem; --font-size-calendar-day: 1rem; --font-size-calendar-cell: 2rem; --font-size-calendar-cell-mobile: 4rem; + --font-size-calendar-cell-tiny: 2rem; --calendar-header-font: 'Montserrat'; --calendar-header-font-style: italic; - --main-link-color-hover: #bbb; + --main-link-color-hover: blue; --rendering: normal; } @font-face { - font-family: 'Bedstead'; + font-family: 'NimbusSanL'; font-style: italic; font-weight: normal; font-display: block; - src: url('./fonts/bedstead.otf') format('opentype'); + src: url('./fonts/NimbusSanL-italic.otf') format('opentype'); } @font-face { - font-family: 'Bedstead'; + font-family: 'NimbusSanL'; font-style: normal; font-weight: normal; font-display: block; - src: url('./fonts/bedstead.otf') format('opentype'); + src: url('./fonts/NimbusSanL.otf') format('opentype'); } body { background-color: var(--main-bg-color); color: var(--day-number2); - font-family: 'Montserrat'; + font-family: 'NimbusSanL'; font-weight: 700; image-rendering: var(--rendering); } @@ -122,7 +125,7 @@ a:focus { background-color: var(--title-background); color: var(--title-text); display: inline-block; - font-family: var(--calendar-header-font); + font-family: var(--calendar-header-font); font-size: var(--font-size-calendar-header); font-weight: 400; letter-spacing: 0.1em; @@ -251,7 +254,7 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) { padding: var(--calendar-cell-size) 0 var(--calendar-cell-size); } body { - font-size: var(--font-size-calendar); + font-size: var(--font-size-calendar); } } @@ -271,6 +274,26 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) { padding: var(--calendar-cell-size-mobile) 0 var(--calendar-cell-size-mobile); } body { - font-size: var(--font-size-calendar-mobile); + font-size: var(--font-size-calendar-mobile); + } +} + +@media screen and (max-width: 480px) { + .calendar { + table-display: fixed; + margin: 0 0; + width: 100%; + padding: 0 var(--calendar-horizontal-padding); + } + .calendar__day__cell { + font-size: var(--font-size-calendar-cell-tiny); + position: relative; + } + .calendar__day__header, + .calendar__day__cell { + padding: var(--calendar-cell-size-tiny) 0 var(--calendar-cell-size-tiny); + } + body { + font-size: var(--font-size-calendar-tiny); } } From 02bd4037ce7f8f5d8d9455e874e65ab23948792c Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 21:56:39 +0000 Subject: [PATCH 10/19] Tiny login screen --- epicyon-login.css | 101 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 71 insertions(+), 30 deletions(-) diff --git a/epicyon-login.css b/epicyon-login.css index f8b4d01e4..691e25532 100644 --- a/epicyon-login.css +++ b/epicyon-login.css @@ -1,44 +1,45 @@ @charset "UTF-8"; :root { - --login-bg-color: #282c37; - --link-bg-color: #282c37; - --login-fg-color: #dddddd; - --main-link-color: #999; - --main-visited-color: #888; - --border-color: #505050; - --border-width: 2px; + --login-bg-color: #010026; + --link-bg-color: #e6ebf0; + --login-fg-color: white; + --main-link-color: darkblue; + --main-visited-color: #232c37; + --border-color: #c0cdd9; + --border-width: 1px; --font-size-header: 18px; - --font-color-header: #ccc; + --font-color-header: black; --login-font-size: 22px; --login-font-size-mobile: 40px; - --text-entry-foreground: #ccc; - --text-entry-background: #111; + --login-font-size-tiny: 20px; + --text-entry-foreground: #111; + --text-entry-background: white; --time-color: #aaa; --button-text: #FFFFFF; --button-background: #999; --button-selected: #666; --form-border-radius: 30px; - --focus-color: white; + --focus-color: grey; --line-spacing: 130%; --login-logo-width: 20%; - --main-link-color-hover: #bbb; + --main-link-color-hover: blue; --rendering: normal; } @font-face { - font-family: 'Bedstead'; + font-family: 'NimbusSanL'; font-style: italic; font-weight: normal; font-display: block; - src: url('./fonts/bedstead.otf') format('opentype'); + src: url('./fonts/NimbusSanL-italic.otf') format('opentype'); } @font-face { - font-family: 'Bedstead'; + font-family: 'NimbusSanL'; font-style: normal; font-weight: normal; font-display: block; - src: url('./fonts/bedstead.otf') format('opentype'); + src: url('./fonts/NimbusSanL.otf') format('opentype'); } body, html { @@ -52,7 +53,7 @@ body, html { background-repeat: no-repeat; background-position: center; height: 100%; - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; max-width: 60%; min-width: 600px; margin: 0 auto; @@ -112,7 +113,7 @@ input[type=text], input[type=password] { border: 1px solid #ccc; box-sizing: border-box; font-size: var(--login-font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } button { @@ -124,12 +125,12 @@ button { cursor: pointer; width: 100%; font-size: var(--login-font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } .login-text { font-size: var(--login-font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } button:hover { @@ -170,17 +171,17 @@ span.psw { background-color: var(--login-bg-color); color: var(--login-fg-color); height: 100%; - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; max-width: 60%; min-width: 600px; margin: 0 auto; font-size: var(--login-font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; position: relative; } .login-text { font-size: var(--login-font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } input[type=text], input[type=password] { width: 100%; @@ -190,7 +191,7 @@ span.psw { border: 1px solid #ccc; box-sizing: border-box; font-size: var(--login-font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } button { background-color: var(--button-background); @@ -201,7 +202,7 @@ span.psw { cursor: pointer; width: 100%; font-size: var(--login-font-size); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } } @@ -210,17 +211,17 @@ span.psw { background-color: var(--login-bg-color); color: var(--login-fg-color); height: 100%; - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; max-width: 95%; min-width: 600px; margin: 0 auto; font-size: var(--login-font-size-mobile); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; position: relative; } .login-text { font-size: var(--login-font-size-mobile); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } input[type=text], input[type=password] { width: 100%; @@ -230,7 +231,7 @@ span.psw { border: 1px solid #ccc; box-sizing: border-box; font-size: var(--login-font-size-mobile); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; } button { background-color: var(--button-background); @@ -241,6 +242,46 @@ span.psw { cursor: pointer; width: 100%; font-size: var(--login-font-size-mobile); - font-family: Arial, Helvetica, sans-serif; + font-family: 'NimbusSanL'; + } +} + +@media screen and (max-width: 480px) { + body, html { + background-color: var(--login-bg-color); + color: var(--login-fg-color); + height: 100%; + font-family: 'NimbusSanL'; + max-width: 95%; + min-width: 400px; + margin: 0 auto; + font-size: var(--login-font-size-tiny); + font-family: 'NimbusSanL'; + position: relative; + } + .login-text { + font-size: var(--login-font-size-tiny); + font-family: 'NimbusSanL'; + } + input[type=text], input[type=password] { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + box-sizing: border-box; + font-size: var(--login-font-size-tiny); + font-family: 'NimbusSanL'; + } + button { + background-color: var(--button-background); + color: var(--button-text); + padding: 14px 20px; + margin: 8px 0; + border: none; + cursor: pointer; + width: 100%; + font-size: var(--login-font-size-mobile); + font-family: 'NimbusSanL'; } } From 821e3ddce7814ee8edb8d7406466d9f02325d189 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 22:08:32 +0000 Subject: [PATCH 11/19] Tiny links screen --- epicyon-links.css | 471 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 470 insertions(+), 1 deletion(-) diff --git a/epicyon-links.css b/epicyon-links.css index 67dcdc7ef..6370c0216 100644 --- a/epicyon-links.css +++ b/epicyon-links.css @@ -20,8 +20,10 @@ --border-width: 2px; --font-size-header: 18px; --font-size-header-mobile: 32px; + --font-size-header-tiny: 16px; --font-color-header: #ccc; --font-size-button-mobile: 34px; + --font-size-button-tiny: 17px; --font-size: 30px; --font-size2: 24px; --font-size3: 38px; @@ -29,6 +31,7 @@ --font-size5: 20px; --font-size-likes: 20px; --font-size-likes-mobile: 32px; + --font-size-likes-tiny: 16px; --font-size-pgp-key: 16px; --font-size-pgp-key2: 8px; --font-size-tox: 16px; @@ -46,6 +49,7 @@ --button-deny: darkred; --button-height: 10px; --button-height-padding-mobile: 20px; + --button-height-padding-tiny: 10px; --button-height-padding: 10px; --image-corners: 10%, --gallery-border: #ccc; @@ -53,6 +57,7 @@ --gallery-text-color: #ccc; --gallery-font-size: 22px; --gallery-font-size-mobile: 35px; + --gallery-font-size-tiny: 17.5px; --button-corner-radius: 15px; --timeline-border-radius: 30px; --icons-side: right; @@ -67,6 +72,7 @@ --column-right-width: 10vw; --banner-height: 15vh; --banner-height-mobile: 10vh; + --banner-height-tiny: 10vh; --header-font: 'Arial, Helvetica, sans-serif'; --rendering: normal; } @@ -250,7 +256,7 @@ h1 { .containerSubmitNewPost { margin: 20px; } - + .container img.timelineicon:hover { filter: brightness(150%); } @@ -1828,3 +1834,466 @@ aside .toggle-inside li { margin: 40px 80px; } } + +@media screen and (max-width: 480px) { + body, html { + background-color: var(--main-bg-color); + color: var(--main-fg-color); + + height: 100%; + font-family: Arial, Helvetica, sans-serif; + min-width: 950px; + margin-left: 0; + font-size: var(--font-size); + line-height: var(--line-spacing); + } + .timeline { + border: 0; + width: 100vw; + } + .timeline-banner { + object-fit: cover; + width: 98vw; + height: var(--banner-height-tiny); + } + .column-left { + width: 0%; + } + .col-left { + float: left; + width: 0%; + display: none; + } + .col-center { + width: 100vw; + } + .col-right { + float: right; + width: 0%; + display: none; + } + .column-right { + width: 0%; + } + .column-center { + display: inline-block; + width: 100%; + } + .likesCount { + font-size: var(--font-size-likes-tiny); + font-family: Arial, Helvetica, sans-serif; + float: right; + padding: 32px 0; + transform: translateX(-20px); + font-weight: bold; + } + .container p.administeredby { + font-size: var(--font-size-tox2); + font-family: Arial, Helvetica, sans-serif; + } + .toxaddr { + font-size: var(--font-size-tox2); + font-family: Arial, Helvetica, sans-serif; + } + .ssbaddr { + font-size: var(--font-size-pgp-key2); + font-family: Arial, Helvetica, sans-serif; + } + .pgp { + font-size: var(--font-size-pgp-key2); + color: var(--main-link-color); + background: var(--link-bg-color); + font-family: 'monospace'; + } + body, html { + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + } + div.gallerytext { + color: var(--gallery-text-color); + font-size: var(--gallery-font-size-tiny); + font-family: Arial, Helvetica, sans-serif; + } + .galleryContainer { + display: grid; + grid-template-columns: auto; + background-color: var(--main-bg-color); + } + div.gallery { + margin: 5px; + border: 1px solid var(--gallery-border); + float: left; + width: 100%; + } + div.imagedesc { + padding: 35px; + text-align: center; + } + .container img { + float: left; + max-width: 400px; + width: 15%; + padding: 0px 7px; + margin-right: 20px; + border-radius: var(--image-corners); + } + .container img.emojisearch { + width: 25%; + float: right; + } + .container img.emojicalendar { + float: left; + max-width: 400px; + width: 12%; + -ms-transform: translateY(-25%); + transform: translateY(-25%); + } + .container img.timelineicon { + float: var(--icons-side); + margin-left: 0px; + margin-right:0; + padding: 0 0; + margin: 0 0; + width: 100px; + } + .container img.emojiheader { + float: none; + width: 45px; + margin-left: 0px; + margin-right: 0px; + padding-right: 0px; + border-radius: 0px; + vertical-align: middle; + } + div.mediaavatar img { + float: left; + max-width: 200px; + width: 8%; + margin: 0px 1%; + border-radius: 0%; + } + div.mediaicons img { + float: right; + max-width: 200px; + width: 10%; + margin: 0px 1%; + border-radius: 0%; + } + .containericons img { + float: var(--icons-side); + max-width: 200px; + width: 7%; + margin: 1% 3%; + border-radius: 0%; + } + .timeline-avatar img { + opacity: 1.0; + width: 15%; + height: 15%; + padding: 0px 0px; + -ms-transform: translateY(-10%); + transform: translateY(-10%); + border-radius: var(--avatar-rounding); + } + .buttonevent { + border-radius: var(--button-corner-radius); + background-color: var(--button-highlighted); + border: none; + color: var(--button-fg-highlighted); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-tiny); + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .button { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .buttonhighlighted { + border-radius: var(--button-corner-radius); + background-color: var(--button-highlighted); + border: none; + color: var(--button-fg-highlighted); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .buttonselected { + border-radius: var(--button-corner-radius); + background-color: var(--button-selected); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .buttonselectedhighlighted { + border-radius: var(--button-corner-radius); + background-color: var(--button-selected-highlighted); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .followApprove { + border-radius: var(--button-corner-radius); + background-color: var(--button-approve); + border: none; + color: #FFFFFF; + text-align: center; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 80px; + cursor: pointer; + margin: 0 15px; + float: right; + } + .followDeny { + border-radius: var(--button-corner-radius); + background-color: var(--button-deny); + border: none; + color: #FFFFFF; + text-align: center; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 80px; + cursor: pointer; + margin: 0 15px; + float: right; + } + .pageicon { + width: 14%; + } + .time-right { + float: var(--icons-side); + color: var(--time-color); + margin: 25px 20px; + } + input[type=text], select, textarea { + width: 100%; + padding: 12px; + border: 1px solid #ccc; + border-radius: var(--button-corner-radius); + box-sizing: border-box; + margin-top: 6px; + margin-bottom: 16px; + resize: vertical; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + background-color: var(--main-bg-color-reply); + color: var(--main-fg-color); + } + input[type=button], input[type=submit] { + background-color: var(--button-background); + color: var(--button-text); + display: inline-block; + padding: var(--button-height-padding-tiny); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + width: 20%; + } + .question { + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + } + .questionresult { + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + } + input[type=radio] { + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + height: 90px; + vertical-align: middle; + margin-right: 20px; + } + input.vote[type=submit] { + background-color: var(--button-background); + color: var(--button-text); + float: left; + padding: var(--button-height-padding-tiny); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + width: 20%; + } + input[type=file] { + background-color: var(--button-background); + color: var(--button-text); + padding: 20px; + margin: 0px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + width: 95.4%; + } + .cancelbtn { + background-color: var(--button-background); + color: var(--button-text); + display: inline-block; + padding: var(--button-height-padding-tiny); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + width: 20%; + } + .scope-desc { + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + } + .buttonunfollow { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 200px; + min-width: 100px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + float: right; + } + .license { + float: right; + margin: 0% 1%; + width: 20%; + } + .donateButton { + background-color: var(--button-background); + color: var(--button-text); + float: none; + margin: 0px 10px; + padding: 12px 40px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + opacity: 0.7; + } + #msgscope label img { + width: 64px; + height: 64px; + padding: 0px 0px; + } + .toggle-msgScope img { + width: 64px; + height: 64px; + margin: -15px 0px; + padding: 0px 20px; + } + .dropdown-menutoggle { + -webkit-margin-start: 0px; + -webkit-margin-end: 0px; + -webkit-padding-start: 40px; + border-top-left-radius: 0; + border-top-right-radius: 0; + position: absolute; + top: 100%; + left: 21px; + width: 460%; + min-width: 100%; + z-index: 1000; + display: block; + float: left; + padding: 0 17px !important; + margin: 2px 0 0 !important; + font-size: var(--font-size3); + text-align: left; + list-style: none; + color: var(--dropdown-fg-color); + background-color: var(--dropdown-bg-color); + -webkit-background-clip: padding-box; + background-clip: padding-box; + } + input[type=checkbox] + { + -ms-transform: scale(4); + -moz-transform: scale(4); + -webkit-transform: scale(4); + -o-transform: scale(4); + transform: scale(4); + padding: 20px; + margin: 30px 40px; + } + input[type=radio] + { + -ms-transform: scale(2); + -moz-transform: scale(2); + -webkit-transform: scale(2); + -o-transform: scale(2); + transform: scale(2); + padding: 20px; + margin: 30px 40px; + } + input[type=number] + { + -ms-transform: scale(2); + -moz-transform: scale(2); + -webkit-transform: scale(2); + -o-transform: scale(2); + transform: scale(2); + padding: 10px; + margin: 40px 80px; + } +} From b44e681609830ea39d5691408660fcb757ab8734 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 22:11:38 +0000 Subject: [PATCH 12/19] Tiny welcome screen --- epicyon-welcome.css | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/epicyon-welcome.css b/epicyon-welcome.css index 89ccadb2c..6e0bffdd8 100644 --- a/epicyon-welcome.css +++ b/epicyon-welcome.css @@ -12,6 +12,7 @@ --font-color-header: #ccc; --welcome-font-size: 22px; --welcome-font-size-mobile: 40px; + --welcome-font-size-tiny: 20px; --text-entry-foreground: #ccc; --text-entry-background: #111; --time-color: #aaa; @@ -241,3 +242,43 @@ span.psw { font-family: Arial, Helvetica, sans-serif; } } + +@media screen and (max-width: 480px) { + body, html { + background-color: var(--welcome-bg-color); + color: var(--welcome-fg-color); + height: 100%; + font-family: Arial, Helvetica, sans-serif; + max-width: 95%; + min-width: 400px; + margin: 0 auto; + font-size: var(--welcome-font-size-tiny); + font-family: Arial, Helvetica, sans-serif; + position: relative; + } + .welcome-text { + font-size: var(--welcome-font-size-tiny); + font-family: Arial, Helvetica, sans-serif; + } + input[type=text], input[type=password], textarea { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + box-sizing: border-box; + font-size: var(--welcome-font-size-tiny); + font-family: Arial, Helvetica, sans-serif; + } + button { + background-color: var(--button-background); + color: var(--button-text); + padding: 14px 20px; + margin: 8px 0; + border: none; + cursor: pointer; + width: var(--welcome-button-width); + font-size: var(--welcome-font-size-tiny); + font-family: Arial, Helvetica, sans-serif; + } +} From fbc6f67ba99c3c3d70e7bbc7203cc33070cb6d32 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 22:12:20 +0000 Subject: [PATCH 13/19] Tiny links screen --- epicyon-links.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/epicyon-links.css b/epicyon-links.css index 6370c0216..b831723af 100644 --- a/epicyon-links.css +++ b/epicyon-links.css @@ -1842,7 +1842,7 @@ aside .toggle-inside li { height: 100%; font-family: Arial, Helvetica, sans-serif; - min-width: 950px; + min-width: 400px; margin-left: 0; font-size: var(--font-size); line-height: var(--line-spacing); From 2d1d8f75d177d43a179aac61d5b5e73ebf8b082d Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 22:18:25 +0000 Subject: [PATCH 14/19] Tiny follow screen --- epicyon-follow.css | 47 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/epicyon-follow.css b/epicyon-follow.css index 381e6aba8..3ca3013e6 100644 --- a/epicyon-follow.css +++ b/epicyon-follow.css @@ -294,3 +294,50 @@ input[type=text] { margin: 30px 40px; } } + +@media screen and (max-width: 480px) { + .hashtagswarm { + font-size: var(--font-size2); + font-family: Arial, Helvetica, sans-serif; + margin: var(--hashtag-margin); + line-height: var(--hashtag-vertical-spacing3); + } + .followText { + font-size: var(--font-size2); + font-family: Arial, Helvetica, sans-serif; + } + input[type=text] { + width: var(--follow-text-entry-width); + clear: both; + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + text-align: center; + color: var(--text-entry-foreground); + background-color: var(--text-entry-background); + } + .button { + border-radius: 4px; + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + padding: 10px; + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + width: 20%; + max-width: 200px; + min-width: 100px; + cursor: pointer; + margin: 30px; + } + input[type=checkbox] + { + -ms-transform: scale(4); + -moz-transform: scale(4); + -webkit-transform: scale(4); + -o-transform: scale(4); + transform: scale(4); + padding: 20px; + margin: 30px 40px; + } +} From f5288aaba2bcac1bf021db09bfc83b4604e12b8e Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 22:21:42 +0000 Subject: [PATCH 15/19] Tiny options screen --- epicyon-options.css | 77 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/epicyon-options.css b/epicyon-options.css index c520e8b9b..b7380ddd0 100644 --- a/epicyon-options.css +++ b/epicyon-options.css @@ -303,3 +303,80 @@ a:focus { margin: 30px 40px; } } + +@media screen and (max-width: 480px) { + textarea { + font-family: Arial, Helvetica, sans-serif; + font-size: var(--font-size2); + width: 90%; + background-color: var(--text-entry-background); + color: var(--text-entry-foreground); + } + .followText { + font-size: var(--follow-text-size2); + } + input[type=text] { + width: var(--follow-text-entry-width); + clear: both; + font-size: var(--font-size2); + text-align: center; + max-width: 50%; + min-width: var(--petname-width-chars); + color: var(--text-entry-foreground); + background-color: var(--text-entry-background); + font-family: Arial, Helvetica, sans-serif; + } + .button { + border-radius: 4px; + background-color: var(--button-background); + font-family: Arial, Helvetica, sans-serif; + border: none; + color: var(--button-text); + text-align: center; + padding: 10px; + font-size: var(--font-size2); + width: 10ch; + max-width: 200px; + min-width: 100px; + cursor: pointer; + margin: 30px; + } + .buttonIcon { + border-radius: 4px; + background-color: var(--button-background); + font-family: Arial, Helvetica, sans-serif; + border: none; + color: var(--button-text); + text-align: center; + padding: 6px 80px; + font-size: var(--font-size2); + max-width: 200px; + min-width: 100px; + cursor: pointer; + } + .buttonsmall { + border-radius: 4px; + background-color: var(--button-small-background); + font-family: Arial, Helvetica, sans-serif; + border: none; + color: var(--button-small-text); + text-align: center; + padding: 10px; + font-size: var(--font-size2); + width: 7ch; + max-width: 200px; + min-width: 100px; + cursor: pointer; + margin: 30px; + } + input[type=checkbox] + { + -ms-transform: scale(4); + -moz-transform: scale(4); + -webkit-transform: scale(4); + -o-transform: scale(4); + transform: scale(4); + padding: 20px; + margin: 30px 40px; + } +} From f6fc731707ef6169b74a06f788943004f0205159 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 22:25:57 +0000 Subject: [PATCH 16/19] Tiny blog screen --- epicyon-blog.css | 351 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 351 insertions(+) diff --git a/epicyon-blog.css b/epicyon-blog.css index fc790d702..67acfbf67 100644 --- a/epicyon-blog.css +++ b/epicyon-blog.css @@ -18,7 +18,9 @@ --font-size-header: 18px; --font-color-header: #ccc; --font-size-button-mobile: 34px; + --font-size-button-tiny: 17px; --font-size-mobile: 50px; + --font-size-tiny: 25px; --font-size: 30px; --font-size2: 24px; --font-size3: 38px; @@ -36,6 +38,7 @@ --button-deny: darkred; --button-height: 10px; --button-height-padding-mobile: 20px; + --button-height-padding-tiny: 10px; --button-height-padding: 10px; --image-corners: 10%, --gallery-border: #ccc; @@ -43,6 +46,7 @@ --gallery-text-color: #ccc; --gallery-font-size: 22px; --gallery-font-size-mobile: 35px; + --gallery-font-size-tiny: 17px; --button-corner-radius: 15px; --timeline-border-radius: 30px; --focus-color: white; @@ -1403,3 +1407,350 @@ div.gallery img { opacity: 0.7; } } + +@media screen and (max-width: 480px) { + body, html { + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + } + h1 { + font-family: var(--header-font); + font-size: var(--font-size-tiny); + color: var(--title-color); + } + div.gallerytext { + color: var(--gallery-text-color); + font-size: var(--gallery-font-size-tiny); + font-family: "Times New Roman", Roman, serif; + } + .galleryContainer { + display: grid; + grid-template-columns: auto; + background-color: var(--main-bg-color); + } + div.gallery { + margin: 5px; + border: 1px solid var(--gallery-border); + float: left; + width: 100%; + } + div.imagedesc { + padding: 35px; + text-align: center; + } + .container img { + float: left; + max-width: 400px; + width: 15%; + padding: 0px 7px; + margin-right: 20px; + border-radius: var(--image-corners); + } + .container img.emojisearch { + width: 12%; + float: right; + vertical-align: middle; + } + .container img.emojicalendar { + float: left; + max-width: 400px; + width: 12%; + -ms-transform: translateY(-25%); + transform: translateY(-25%); + } + .container img.timelineicon { + float: right; + margin-left: 0px; + margin-right:0; + padding: 0 0; + margin: 0 0; + width: 100px; + } + .container img.emojiheader { + float: none; + width: 45px; + margin-left: 0px; + margin-right: 0px; + padding-right: 0px; + border-radius: 0px; + vertical-align: middle; + } + div.mediaavatar img { + float: left; + max-width: 200px; + width: 8%; + margin: 0px 1%; + border-radius: 0%; + } + div.mediaicons img { + float: right; + max-width: 200px; + width: 10%; + margin: 0px 1%; + border-radius: 0%; + } + .containericons img { + float: right; + max-width: 200px; + width: 7%; + margin: 1% 3%; + border-radius: 0%; + } + .timeline-avatar img { + opacity: 1.0; + width: 15%; + height: 15%; + padding: 0px 0px; + -ms-transform: translateY(-10%); + transform: translateY(-10%); + border-radius: var(--avatar-rounding); + } + .cwButton { + border-radius: var(--button-corner-radius); + background-color: #554; + border: none; + color: #FFFFFE; + text-align: center; + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + padding: 2px; + cursor: pointer; + margin: 5px; + } + .buttonevent { + border-radius: var(--button-corner-radius); + background-color: var(--button-highlighted); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: "Times New Roman", Roman, serif; + padding: var(--button-height-padding-tiny); + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .button { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: "Times New Roman", Roman, serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 80px; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .buttonhighlighted { + border-radius: var(--button-corner-radius); + background-color: var(--button-highlighted); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: "Times New Roman", Roman, serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 80px; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .buttonselected { + border-radius: var(--button-corner-radius); + background-color: var(--button-selected); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: "Times New Roman", Roman, serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 80px; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .buttonselectedhighlighted { + border-radius: var(--button-corner-radius); + background-color: var(--button-selected-highlighted); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: "Times New Roman", Roman, serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 80px; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .followApprove { + border-radius: var(--button-corner-radius); + background-color: var(--button-approve); + border: none; + color: #FFFFFF; + text-align: center; + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 80px; + cursor: pointer; + margin: 0 15px; + float: right; + } + .followDeny { + border-radius: var(--button-corner-radius); + background-color: var(--button-deny); + border: none; + color: #FFFFFF; + text-align: center; + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 400px; + min-width: 80px; + cursor: pointer; + margin: 0 15px; + float: right; + } + .pageicon { + width: 14%; + } + .time-right { + float: right; + color: var(--time-color); + margin: 25px 20px; + } + input[type=text], select, textarea { + width: 100%; + padding: 12px; + border: 1px solid #ccc; + border-radius: var(--button-corner-radius); + box-sizing: border-box; + margin-top: 6px; + margin-bottom: 16px; + resize: vertical; + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + background-color: var(--main-bg-color-reply); + color: var(--main-fg-color); + } + input[type=button], input[type=submit] { + background-color: var(--button-background); + color: var(--button-text); + display: inline-block; + padding: var(--button-height-padding-tiny); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + width: 20%; + } + .question { + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + } + .questionresult { + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + } + input[type=radio] { + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + height: 90px; + vertical-align: middle; + margin-right: 20px; + } + input.vote[type=submit] { + background-color: var(--button-background); + color: var(--button-text); + float: left; + padding: var(--button-height-padding-tiny); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + width: 20%; + } + input[type=file] { + background-color: var(--button-background); + color: var(--button-text); + padding: 20px; + margin: 0px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + width: 95.4%; + } + .cancelbtn { + background-color: var(--button-background); + color: var(--button-text); + display: inline-block; + padding: var(--button-height-padding-tiny); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + width: 20%; + } + .scope-desc { + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + } + .buttonunfollow { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-tiny); + font-family: "Times New Roman", Roman, serif; + padding: var(--button-height-padding-tiny); + width: 20%; + max-width: 200px; + min-width: 100px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + float: right; + } + .license { + float: right; + margin: 0% 1%; + width: 20%; + } + .donateButton { + background-color: var(--button-background); + color: var(--button-text); + float: none; + margin: 0px 10px; + padding: 12px 40px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size4); + font-family: "Times New Roman", Roman, serif; + opacity: 0.7; + } +} From e78d35831f684d63eff98ce76055c0a24d98a750 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 23:14:25 +0000 Subject: [PATCH 17/19] Tiny new post screen --- epicyon-profile.css | 78 ++++++++++++++++++++++++++++++--------------- 1 file changed, 52 insertions(+), 26 deletions(-) diff --git a/epicyon-profile.css b/epicyon-profile.css index 893f3e2a5..22801b1e6 100644 --- a/epicyon-profile.css +++ b/epicyon-profile.css @@ -43,6 +43,7 @@ --font-size-newswire-mobile: 32px; --font-size-newswire-tiny: 16px; --font-size-dropdown-header: 40px; + --font-size-dropdown-header-tiny: 20px; --font-size-mobile: 50px; --font-size-tiny: 25px; --font-size: 26px; @@ -112,7 +113,7 @@ --column-center-width: 80vw; --column-right-width: 10vw; --column-left-mobile-margin: 2%; - --column-left-mobile-tiny: 1%; + --column-left-tiny-margin: 1%; --column-left-top-margin: 0; --column-right-top-margin: 0; --column-left-header-style: uppercase; @@ -332,7 +333,7 @@ blockquote p { } .imageAnchor { - font-family: var(--header-font); + font-family: var(--header-font); } .imageAnchor:focus img{ @@ -521,7 +522,7 @@ a:focus { } .button span { - font-family: var(--header-font); + font-family: var(--header-font); cursor: pointer; display: inline-block; position: relative; @@ -539,7 +540,7 @@ a:focus { } .buttonselected span { - font-family: var(--header-font); + font-family: var(--header-font); cursor: pointer; display: inline-block; position: relative; @@ -648,7 +649,7 @@ a:focus { } .announceOrReply { - font-family: var(--header-font); + font-family: var(--header-font); } .container img.announceOrReply { @@ -895,7 +896,7 @@ input[type=submit]:hover { padding: 6px 0px; color: var(--dropdown-fg-color); font-size: var(--font-size-dropdown-header); - font-family: var(--header-font); + font-family: var(--header-font); line-height: 1.5em; text-decoration: none; border: 0; @@ -1065,7 +1066,7 @@ div.container { line-height: var(--line-spacing); } h1 { - font-family: var(--header-font); + font-family: var(--header-font); font-size: var(--font-size); color: var(--title-color); } @@ -1123,7 +1124,7 @@ div.container { h3.linksHeader { background-color: var(--column-left-header-background); color: var(--column-left-header-color); - font-family: var(--header-font); + font-family: var(--header-font); font-size: var(--column-left-header-size); text-transform: var(--column-left-header-style); border: none; @@ -1446,7 +1447,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-header); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; margin: var(--button-margin); @@ -1466,7 +1467,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-header); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding); width: 20%; margin: var(--button-margin); @@ -1486,7 +1487,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-header); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; margin: 5px; @@ -1540,7 +1541,7 @@ div.container { color: var(--button-selected-text); text-align: center; font-size: var(--font-size-header); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; margin: var(--button-margin); @@ -1561,7 +1562,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-header); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; max-width: 100px; @@ -1825,7 +1826,7 @@ div.container { line-height: var(--line-spacing); } h1 { - font-family: var(--header-font); + font-family: var(--header-font); font-size: var(--font-size-mobile); color: var(--title-color); } @@ -1882,7 +1883,7 @@ div.container { h3.linksHeader { background-color: var(--column-left-header-background); color: var(--column-left-header-color); - font-family: var(--header-font); + font-family: var(--header-font); font-size: var(--column-left-header-size-mobile); text-transform: var(--column-left-header-style); border: none; @@ -2166,7 +2167,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-mobile); width: 20%; min-width: var(--button-width-chars); @@ -2185,7 +2186,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-mobile); width: 30%; min-width: var(--button-width-chars); @@ -2279,7 +2280,7 @@ div.container { color: var(--button-selected-text); text-align: center; font-size: var(--font-size-button-mobile); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-mobile); width: 20%; min-width: var(--button-width-chars); @@ -2299,7 +2300,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-mobile); width: 20%; max-width: 400px; @@ -2560,7 +2561,7 @@ div.container { line-height: var(--line-spacing); } h1 { - font-family: var(--header-font); + font-family: var(--header-font); font-size: var(--font-size-tiny); color: var(--title-color); } @@ -2617,7 +2618,7 @@ div.container { h3.linksHeader { background-color: var(--column-left-header-background); color: var(--column-left-header-color); - font-family: var(--header-font); + font-family: var(--header-font); font-size: var(--column-left-header-size-tiny); text-transform: var(--column-left-header-style); border: none; @@ -2901,7 +2902,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-button-tiny); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-tiny); width: 20%; min-width: var(--button-width-chars); @@ -2920,7 +2921,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-button-tiny); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-tiny); width: 30%; min-width: var(--button-width-chars); @@ -3014,7 +3015,7 @@ div.container { color: var(--button-selected-text); text-align: center; font-size: var(--font-size-button-tiny); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-tiny); width: 20%; min-width: var(--button-width-chars); @@ -3034,7 +3035,7 @@ div.container { color: var(--button-text); text-align: center; font-size: var(--font-size-button-tiny); - font-family: var(--header-font); + font-family: var(--header-font); padding: var(--button-height-padding-tiny); width: 20%; max-width: 400px; @@ -3107,7 +3108,7 @@ div.container { border: none; border-radius: var(--button-corner-radius); cursor: pointer; - font-size: var(--font-size3); + font-size: var(--font-size4); font-family: 'NimbusSanL'; width: 10ch; float: right; @@ -3213,6 +3214,7 @@ div.container { transform: scale(4); padding: 20px; margin: 30px 40px; + width: 10px; } input[type=radio] { @@ -3280,4 +3282,28 @@ div.container { margin: 25px 25px; line-height: 300%; } + .vertical-center { + max-width: 90%; + min-width: 400px; + margin: 0 auto; + } + .newPostDropdown > label, + .newPostDropdown > a[role="button"] { + display: inline-block; + padding: 6px 0px; + color: var(--dropdown-fg-color); + font-size: var(--font-size-dropdown-header-tiny); + font-family: var(--header-font); + line-height: 1.5em; + text-decoration: none; + border: 0; + cursor: pointer; + } + .labels { + font-size: var(--font-size2); + font-family: 'NimbusSanL'; + } + .newPostDropdown img { + width: var(--font-size-dropdown-header-tiny); + } } From b4720a064b521c38bb2c3619397c7a82b46a3449 Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 23:17:25 +0000 Subject: [PATCH 18/19] Tiny emoji search screen --- epicyon-follow.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/epicyon-follow.css b/epicyon-follow.css index 3ca3013e6..7a13f916a 100644 --- a/epicyon-follow.css +++ b/epicyon-follow.css @@ -296,6 +296,9 @@ input[type=text] { } @media screen and (max-width: 480px) { + body, html { + min-width: 400px; + } .hashtagswarm { font-size: var(--font-size2); font-family: Arial, Helvetica, sans-serif; From 97496587d42a9023cb454d908f6356bb1d57e62e Mon Sep 17 00:00:00 2001 From: Bob Mottram Date: Thu, 18 Nov 2021 23:25:00 +0000 Subject: [PATCH 19/19] Tiny search bar --- epicyon-search.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/epicyon-search.css b/epicyon-search.css index 1666ac79f..c5f7976cc 100644 --- a/epicyon-search.css +++ b/epicyon-search.css @@ -344,6 +344,9 @@ input[type=text] { } @media screen and (max-width: 480px) { + body, html { + min-width: 400px; + } details { font-size: var(--hashtag-size3); }