Narrow body with and align gitea icon #126

pat-s · 2023-04-22T19:01:39Z

pat-s commented

2023-04-22 19:01:39 +00:00

As discussed in the maintainers channel.

Screenshots

As discussed in the maintainers channel. ## Screenshots ![image](/attachments/64fd58d9-fbbf-4adf-bd56-13d7b2c8f197) ![image](/attachments/d08b4367-9cc5-4faf-b55d-1c3d5940f20a) ![image](/attachments/c3ab77e9-4b12-463e-9846-8a624ba750d2)

image.png

175 KiB

image.png

208 KiB

image.png

226 KiB

image.png

173 KiB

image.png

186 KiB

image.png

207 KiB

pat-s added 2 commits 2023-04-22 19:01:40 +00:00

narrow body with and align gitea icon d88f4dc2d5

use content instead of section

dry run building theme / dry-run (pull_request) Has been cancelled

Details

a23a9ab64c

pat-s added 1 commit 2023-04-22 19:33:36 +00:00

fix page card display

dry run building theme / dry-run (pull_request) Has been cancelled

Details

db34d7bdce

pat-s changed title from ~~WIP: narrow body with and align gitea icon~~ to Narrow body with and align gitea icon

2023-04-22 19:33:59 +00:00

silverwind reviewed 2023-04-22 19:59:21 +00:00

src/main.scss Outdated

						
				@ -68,3 +68,3 @@

				.navbar .navbar-brand {

				  align-items: center;

				  justify-content: space-between;

				  justify-content: end;

silverwind commented

2023-04-22 19:59:21 +00:00

Shouldn't this be flex-end, assuming it's a flexbox?

Shouldn't this be `flex-end`, assuming it's a flexbox?

silverwind marked this conversation as resolved

silverwind reviewed 2023-04-22 20:00:55 +00:00

src/main.scss

						
				@ -307,0 +312,4 @@

				  margin: 0 auto;

				}

				.tabs:not(:last-child), .message:not(:last-child), .list:not(:last-child), .level:not(:last-child), .breadcrumb:not(:last-child), .highlight:not(:last-child), .block:not(:last-child), .title:not(:last-child), .subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .progress:not(:last-child), .notification:not(:last-child), .content:not(:last-child), .box:not(:last-child) {

silverwind commented

2023-04-22 20:00:55 +00:00

So many selectors and all of them with not, surely there must be a better way, e.g. invert the matching and match only what you want to match. Generally I think every not case in CSS should be refactored to not use it.

So many selectors and all of them with `not`, surely there must be a better way, e.g. invert the matching and match only what you want to match. Generally I think every `not` case in CSS should be refactored to not use it.

silverwind commented

2023-04-22 20:03:43 +00:00

Maybe use gap property, e.g. when it's a flexbox:

.tabs {
  gap: 6px
}

Maybe use `gap` property, e.g. when it's a flexbox: ```css .tabs { gap: 6px }

pat-s commented

2023-04-23 20:14:54 +00:00

Could very well be, I am not an expert in CSS. Just trying to get to what I want using the browser selector and some trial&error 😅

So every suggestion is welcome!

Could very well be, I am not an expert in CSS. Just trying to get to what I want using the browser selector and some trial&error 😅 So every suggestion is welcome!

silverwind commented

2023-04-23 22:18:38 +00:00

If above does not work, :is() should be able to reduce the size of this selector. But I still see that as a non-ideal solution 😜.

If above does not work, [:is()](https://developer.mozilla.org/en-US/docs/Web/CSS/:is) should be able to reduce the size of this selector. But I still see that as a non-ideal solution 😜.

pat-s commented

2023-04-24 06:48:25 +00:00

gap cannot be used because of display: block.

The large selector comes from a node dependency named bulma - it is not defined in our theme.

I've now found a way by adding it to .content directly and things still look as desired. Is that better?

`gap` cannot be used because of `display: block`. The large selector comes from a node dependency named `bulma` - it is not defined in our theme. I've now found a way by adding it to `.content` directly and things still look as desired. Is that better?

silverwind commented

2023-04-27 09:28:36 +00:00

Yes, looks much cleaner now.

silverwind marked this conversation as resolved

pat-s added 2 commits 2023-04-24 06:48:02 +00:00

end -> flex end d73b79833f

optimize content padding definition

dry run building theme / dry-run (pull_request) Successful in 51s

Details

0563b98614

silverwind approved these changes 2023-04-27 09:28:43 +00:00

silverwind commented