[Suggestion] Several visual changes

gsnet-admin commented

2022-09-05 12:43:38 +02:00

(Migrated from git.elbinario.net:8000)

Suggestions from "dcent" at gnusocial.net (I've applied them and it works fine):

As an exercise in trying to make the default 'elbinario' theme a bit more visually pleasing I have done (and fixed) a few things. You can add this CSS to any page in the browser.

It's not everything that I would do but its a start. There are some issues with the HTML for example commas in the LIST section are not directly after the comma separated item and so their are new lines that start with commas. Also, when tagging sometimes the
'@' symbol is not part of the link, which looks messy. Likewise the '#' symbol in hashtags is not part of the link. Again, looks messy.

Anyone can add this CSS to any 'elbinario' themed page in the browser, right-click > Inspect, go to Style Editor tab, find display.css, paste the follow CSS above the line of the display.css that reads, "/end of @media screen, projection, tv/"

body {
background-color: #002806a4; /* not so dark w very subtle hint of the green */
}
#aside_primary_wrapper { /*overflow: hidden; REMOVE or*/ overflow:inherit; }
#site_nav_local_views {
background-color: #fffd;
border-radius: 5px;
}

#site_nav_local_views h3, #aside_primary h2 {
font-size: 11px; /* smaller, but... */
letter-spacing: 1px; /* better spacing between letters */
}
#site_nav_local_views li.current a {
/* color: #008a19; REMOVE the current-page-indictor is not green (just bold with arrow) or */ color:inherit;
}

.input_forms {
background: none repeat scroll 0 0 #fffe; /* shade darker */
border-color: #fffe; /* matches above */
border-radius: 5px; /* not 3px */
}
#notice_action-submit {
right: 10px; /* better position */
bottom: 10px; /* better position */
}
#content h1 {
font-size: 11px; /* SMALLER */
color: #fff;
/*-webkit-text-fill-color: #54bd54; REMOVE or */ -webkit-text-fill-color: inherit
}

#content #content_inner > .threaded-notices > .notice, #content #content_inner > .threaded-notices > .infscr-pages > .notice, #content #content_inner > .notices > .infscr-pages > .notice, #content #content_inner > .notices > .notice, #content #notices_primary > .threaded-notices > .notice, #content #notices_primary > .threaded-notices > .infscr-pages > .notice, #content #notices_primary > .notices > .infscr-pages > .notice, #content #notices_primary > .notices > .notice {
border-color: #fffe;
background-color: #fffe;
background-image: linear-gradient(90deg,#fff 48px,#fff0 48px);
}
#notices_primary .notices .notice::after {
font-size: 7px;
}
#core .h-card .u-photo {
border-radius: 5px; /* avatars have nice rounded edge */
}
a {
color: #282; /* hashtags and includes are a matching green... */
}
.notice .p-author {
color: #222; /* but not other things like person's name... */
}
.u-in-reply-to{
color: #777; /* ... or to person being responded to. */
}

#aside_primary {
background-color: #fffd;
background-image: radial-gradient(circle at 50% -190px,#fff 270px,#fff0 0px);
border-radius: 5px;
}
.profile_block .entity_actions {
/* width: 100px; REMOVE THIS ERROR or*/ width:inherit;
}
.profile_block.account_profile_block.section img {
/* padding-left: 20px; REMOVE or*/ padding-left:inherit;
}
.profile_block_name{
font-size: 18px;
}#aside_primary .section{
font-size: 0.9em; /* slightly taller/larger size */
}.profile_block_location{
line-height: 1.2em; /* fixed to match the other paragraph below */
}#aside_primary .account_profile_block .profile_block_description {
color: #555; /* slightly lighter */
}
.tag-cloud li a{
background: #fff; /* finally do the tags so they are white */
}.tag-cloud li a::before {
background: #eee;
}#aside_primary .tag-cloud li a::after {
background: #eee;
}.tag-cloud li a::after {
border-left: 10px solid #fff;
}

Suggestions from "dcent" at gnusocial.net (I've applied them and it works fine): As an exercise in trying to make the default 'elbinario' theme a bit more visually pleasing I have done (and fixed) a few things. You can add this CSS to any page in the browser. It's not everything that I would do but its a start. There are some issues with the HTML for example commas in the LIST section are not directly after the comma separated item and so their are new lines that start with commas. Also, when tagging sometimes the '@' symbol is not part of the link, which looks messy. Likewise the '#' symbol in hashtags is not part of the link. Again, looks messy. Anyone can add this CSS to any 'elbinario' themed page in the browser, right-click > Inspect, go to Style Editor tab, find display.css, paste the follow CSS **above** the line of the display.css that reads, "/*end of @media screen, projection, tv*/" ``` body { background-color: #002806a4; /* not so dark w very subtle hint of the green */ } #aside_primary_wrapper { /*overflow: hidden; REMOVE or*/ overflow:inherit; } #site_nav_local_views { background-color: #fffd; border-radius: 5px; } #site_nav_local_views h3, #aside_primary h2 { font-size: 11px; /* smaller, but... */ letter-spacing: 1px; /* better spacing between letters */ } #site_nav_local_views li.current a { /* color: #008a19; REMOVE the current-page-indictor is not green (just bold with arrow) or */ color:inherit; } .input_forms { background: none repeat scroll 0 0 #fffe; /* shade darker */ border-color: #fffe; /* matches above */ border-radius: 5px; /* not 3px */ } #notice_action-submit { right: 10px; /* better position */ bottom: 10px; /* better position */ } #content h1 { font-size: 11px; /* SMALLER */ color: #fff; /*-webkit-text-fill-color: #54bd54; REMOVE or */ -webkit-text-fill-color: inherit } #content #content_inner > .threaded-notices > .notice, #content #content_inner > .threaded-notices > .infscr-pages > .notice, #content #content_inner > .notices > .infscr-pages > .notice, #content #content_inner > .notices > .notice, #content #notices_primary > .threaded-notices > .notice, #content #notices_primary > .threaded-notices > .infscr-pages > .notice, #content #notices_primary > .notices > .infscr-pages > .notice, #content #notices_primary > .notices > .notice { border-color: #fffe; background-color: #fffe; background-image: linear-gradient(90deg,#fff 48px,#fff0 48px); } #notices_primary .notices .notice::after { font-size: 7px; } #core .h-card .u-photo { border-radius: 5px; /* avatars have nice rounded edge */ } a { color: #282; /* hashtags and includes are a matching green... */ } .notice .p-author { color: #222; /* but not other things like person's name... */ } .u-in-reply-to{ color: #777; /* ... or to person being responded to. */ } #aside_primary { background-color: #fffd; background-image: radial-gradient(circle at 50% -190px,#fff 270px,#fff0 0px); border-radius: 5px; } .profile_block .entity_actions { /* width: 100px; REMOVE THIS ERROR or*/ width:inherit; } .profile_block.account_profile_block.section img { /* padding-left: 20px; REMOVE or*/ padding-left:inherit; } .profile_block_name{ font-size: 18px; }#aside_primary .section{ font-size: 0.9em; /* slightly taller/larger size */ }.profile_block_location{ line-height: 1.2em; /* fixed to match the other paragraph below */ }#aside_primary .account_profile_block .profile_block_description { color: #555; /* slightly lighter */ } .tag-cloud li a{ background: #fff; /* finally do the tags so they are white */ }.tag-cloud li a::before { background: #eee; }#aside_primary .tag-cloud li a::after { background: #eee; }.tag-cloud li a::after { border-left: 10px solid #fff; } ```

gsnet-admin commented

2022-09-05 12:44:12 +02:00

(Migrated from git.elbinario.net:8000)

changed the description

gsnet-admin commented

2022-09-05 12:45:13 +02:00

(Migrated from git.elbinario.net:8000)

changed the description

Rows
Columns

[Suggestion] Several visual changes #3