feat: Implement enhancements for new design #192
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -180,11 +180,20 @@ img { | |
| } | ||
|
|
||
| .o-startpage .row { | ||
| margin-bottom: 2.4rem; | ||
| } | ||
|
|
||
| .o-startpage__intro { | ||
| text-wrap: balance; | ||
| margin-bottom: 2rem; | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| gap: 2rem; | ||
|
|
||
| @media (max-width: #{$breakpoint-md}) { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
Comment on lines
+188
to
+196
There was a problem hiding this comment. What added value does it have compared to Bootstrap? There was a problem hiding this comment. I see a few advantages:
There was a problem hiding this comment. According to my understanding, the discussion is about using bootstrap not as an depency, but as local css rules. If you want to remove bootstrap in total, we should do this in a separate branch and not accorded to this feature branch. There are many more occurencies, which have to be replaced either. There was a problem hiding this comment. I just thought that it makes sense to avoid Bootstrap for newly added content to reduce effort for the migration. But since I've done it in a separate commit anyway, I'll take it out and move it into a separate PR. |
||
|
|
||
| h2 { | ||
| font-family: Sansita,Arial,Helvetica,sans-serif; | ||
|
|
@@ -196,4 +205,47 @@ img { | |
| > div { | ||
| align-content: center; | ||
| } | ||
|
|
||
| @media (max-width: #{$breakpoint-md}) { | ||
| h2 { | ||
| font-size: 4.8rem; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .o-startpage__image { | ||
| @media (max-width: #{$breakpoint-md}) { | ||
| display: none; | ||
therobrob marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
| } | ||
|
|
||
| .o-startpage__shortcut-wrapper { | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr 1fr 3fr; | ||
| gap: 2rem; | ||
| margin-bottom: 2rem; | ||
|
|
||
| @media (max-width: #{$breakpoint-lg}) { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .o-startpage__search { | ||
| margin-bottom: 2rem; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .o-startpage__news-teaser-wrapper { | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr 1fr; | ||
| gap: 2rem; | ||
|
|
||
| @media (max-width: #{$breakpoint-md}) { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,44 +10,35 @@ | |
| border-radius: var(--border-radius-l); | ||
| display: flex; | ||
| flex-direction: column; | ||
therobrob marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
|
|
||
| .m-teaser--listview .m-teaser__wrapper { | ||
| margin-bottom: 2.4rem; | ||
| display: grid; | ||
| grid-template-columns: 1fr 2fr; | ||
|
|
||
| @media (max-width: #{$breakpoint-md}) { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .m-teaser__image img { | ||
| border-radius: var(--border-radius-l) 0 0 var(--border-radius-l); | ||
|
|
||
| @media (max-width: #{$breakpoint-md}) { | ||
| border-radius: var(--border-radius-l) var(--border-radius-l) 0 0; | ||
| width: 100%; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .m-teaser--shortcut-tile { | ||
| flex-basis: calc( 50% - 0.5rem ); | ||
|
|
||
| .m-teaser__wrapper { | ||
| width: 100%; | ||
| height: 11rem; | ||
| padding: 1.4rem; | ||
| justify-content: space-between; | ||
|
|
||
| span { | ||
|
|
@@ -59,16 +50,29 @@ | |
|
|
||
| a { | ||
| h3 { | ||
| overflow-wrap: normal; | ||
| word-break: normal; | ||
| white-space: normal; | ||
| hyphens: manual; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| transition: background 0.2s, color 0.2s; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| background: var(--link-hovered); | ||
| border-color: var(--link-hovered); | ||
| color: #fff; | ||
| } | ||
|
Comment on lines
+62
to
+67
There was a problem hiding this comment.
There was a problem hiding this comment.
What's your opinion here? There was a problem hiding this comment. My concerns are mostly about accessibility and usability. The teasers must look clickable and have to be accessible. What do you think of this suggestion:
There was a problem hiding this comment. Sounds good, let's do it! |
||
| } | ||
| } | ||
|
|
||
| .m-teaser__image img { | ||
| aspect-ratio: 16/9; | ||
| border-radius: var(--border-radius-l) var(--border-radius-l) 0 0; | ||
| object-fit: cover; | ||
| height: 100%; | ||
|
Comment on lines
+74
to
+75
There was a problem hiding this comment. in my opinion, we should show the images always in aspect-ratio 16/9. Don't you think so? There was a problem hiding this comment. I disagree here :) Let's have a look at the news list with a viewport that has a width of This is the previous version: I can see mainly two issues here:
Number 1 is probably easily fixable. Number 2 is more challenging: When I increase the preview lines, the height increases. When we would preserve the image ratio now, the width would also increase and takes away the space that I would use for the content preview. In the updated version, I have three preview lines. The aspect ratio is not 16:9 anymore, but because of the CSS object-fitting, it just zooms in slightly. Still looks good in my opinion.
There was a problem hiding this comment. These are two separate aspects of it:
Do you think, there is no way / no need to keep 16/9? Otherwise we lose control over the shown part of the image :) There was a problem hiding this comment. I don't think that there is a necessity to have an image ratio of 16/9. I would rather formulate the requirement as "The images should be displayed in a 16/9 ratio", so try to make it work where it works out. Most of the images don't depend on a specific parts of the image. I believe we're talking about a user group of less than 5% anyway (only users with a screen width between 768px and 992px see the images in a another screen ratio than 16/9). For those users, we have one of the following options:
What do you think about the proposal to keep number 1, but take it as discussion point to the next meeting. Then we can also hear the other opinions and come to a conclusion. I'd also implement whatever we decide on. |
||
| } | ||
|
|
||
| .m-teaser__dateline { | ||
|
|
@@ -80,5 +84,13 @@ | |
| } | ||
|
|
||
| .m-teaser__content { | ||
| padding: 1.4rem; | ||
| } | ||
|
|
||
| .m-teaser__text { | ||
| line-clamp: 3; | ||
therobrob marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| display: -webkit-box; | ||
| -webkit-line-clamp: 3; | ||
| -webkit-box-orient: vertical; | ||
| overflow: hidden; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| --- | ||
| title: "Overview of operators" | ||
| description: "Overview of the operators providing FIP benefits." | ||
| --- | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| {{ partial "menu" (dict "menuID" "main" "page" .) }} |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {{ return replaceRE `<span[^>]*class="[^"]*\bmaterial-symbols-rounded\b[^"]*"[^>]*>.*?</span>` "" . }} |
Uh oh!
There was an error while loading. Please reload this page.