Repository navigation
Images for the site - #59
Closed
matsygfors wants to merge 14 commits into
Closed
matsygfors wants to merge 14 commits into
matsygfors wants to merge 14 commits into
Conversation
…text The hero now has a wide picture anchored to the right edge. It continues in under the heading and lead and fades to the page background (--paper) towards the left, so the text lies on a nearly white area and stays readable. No frame, border, radius, shadow or divider. Desktop (above 760 px): the hero is a positioned grid container with overflow: hidden and the text vertically centred in the left column of a 1fr / .9fr grid. The picture fills the right 88%, object-fit: cover, with a 90deg gradient overlay on a pseudo-element (white to transparent at 60%, built with color-mix on --paper, so no new colour). Mobile: the picture sits on top at full width (64vw high), the text starts over its lower part (44vw padding) and the fade runs downwards instead. The heading and lead get their own max widths (35rem / 30rem) so the text stays over the part of the picture that has faded the most; without it the end of the lead ran over the busiest part of the artwork on wide screens. The focus point is to the right (object-position) so the figure at the right is not cropped on tablet and mobile. The picture is decorative (alt="" and aria-hidden) and the first image on the page, so it has fetchpriority="high" and is not lazy loaded; width/height are added by the build. Its path is a content field, intro.image in _data/home/content.json, so it can be swapped without touching CSS (remove the field to hide it). Height, padding, focus and text widths are variables at the top of home.scss; README describes them and what kind of picture to use. home-hero.webp is a placeholder (399 KB) for the final picture. Trade-off: the hero is now 400-520 px high (grows with the width, matching the mockup) instead of about 260 px, so the space from the lead down to "Athega i korthet" grows on larger screens (64 px before, 160 px at 1440 px, 36 px instead of 40 on mobile). Lower --home-hero-min-height to tighten it. Checked in headless Chrome at 1440, 1024, 768, 390 and 1920 px: no horizontal scroll, text never on a dark part of the picture. Build, npm test (18/18) and npm run check (255 pages) pass. Only Chrome has been tried; color-mix needs Safari 16.2+, Chrome 111+ or Firefox 113+. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
A line with only a Markdown image in a {% section "hero" %} becomes the
hero's decorative picture, anchored to the right edge. It covers the label,
heading and lead and fades into the page behind them; any summary and links
come below it on plain white, like on the homepage.
The homepage hero now uses the same structure and styles, which move from
home.scss to hero.scss. The picture is shown at most 760px wide so that it
stays sharp on retina screens. The fade is a single gradient whose length
(--hero-fade-length) is shorter on wide screens, where the picture starts to
the right of the text, and a soft glow around the letters keeps the text clear
where the picture shows behind it. The look is tuned with --hero-* variables.
Covered by a parser test and documented in README.md and CLAUDE.md.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…nd Jobba Use the new flat-colour pictures on the five company and service pages and replace the homepage picture. They are lossless WebP, 140-260 KB each; the originals are kept outside the repository. Shorten the Teknikgranskning lead to "Vi granskar kod, arkitektur, skalbarhet och kvalitet och skapar tydliga rapporter." to keep the hero low. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The blog archive and all year archives get the same hero picture as the other pages. The picture's markup (the picture anchored to the right with the text in front of it) now lives in components/hero-zone.html and is used by the homepage intro, the hero section and the blog archive instead of three copies. The built HTML of every page that is not a blog archive is unchanged. The blog picture is set on the hero_image line at the top of blog/archive.html; remove the line to hide it. Documented in README.md and CLAUDE.md. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The Jobba picture now spells VÄLKOMMEN with the Ä, and the Teknikgranskning picture has its misspelt paper labels fixed (ARCHITECTURE, DOCUMENTATION, DEPENDENCIES, INFRASTRUCTURE). Lossless WebP, as before. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The larger logo and the four-column service grid started at 1281px, while the content kept growing until --shell reached its 1216px cap at 1322px. The breakpoint now sits at 1321px, so the logo, the grid and the hero fade all switch where the content stops growing, and above 1322px the page is only centred. On wide screens the hero picture's right edge sits 40px right of the last menu item instead of at the screen edge (--hero-media-right). Three fixes for the hero picture that do not show on screen: - Print and PDF: the picture is left out. It printed as a faint box and the fade, a background, could paint over the first line of the lead. - Forced-colours modes such as Windows high contrast: the picture is left out, since the fade is not drawn there and the picture would sit unfaded behind the text. - Browsers without color-mix() get the same fade drawn with plain white. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Member
Author
|
Ha gärna åsikter på bilderna. Det är ett första försök. |
_data/fonts.json holds fonts to try and what was found about each one (licence, file size, glyph coverage, readability, layout problems). Two keys choose the fonts, headings for h1-h6 and body for everything else, so they can be mixed. The layout builds one Google Fonts link and the CSS variables --font-heading and --font-body from them. Per font, the file can set the weight, a size scale for the headings through font-size-adjust (smaller letters without changing the heading boxes or the spacing around them), line spacing, letter and word spacing, and extra CSS. Six fonts are recorded: Henny Penny, Love Ya Like A Sister, Risque, Karla, Ranchers and Corben Bold with DM Sans. The default is system, the stack that was used before, and it is what is committed: with both keys set to system the built site is byte for byte the same as without this change (all 256 HTML pages compared against a build of the previous commit). A Google font makes every visitor's browser contact Google, which the site avoided on purpose in 8b30074, so the fonts are for trying locally, and README.md and CLAUDE.md say to set both keys back to system before committing or publishing, or to self-host the font. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Add two options to _data/fonts.json, with what was found when each was tried: - corben-regular, the lighter Corben, tried after Corben Bold was judged too bold for headings. - grandstander, a variable font used for headings at weight 500 and scaled to 90 % with font-size-adjust. The notes cover glyph coverage, file size, layout problems over 12 page types and 12 widths, and how the text reads over the hero pictures. The README lists the new options. Both keys still default to system, so the built site is unchanged. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Text sizes, fonts and weights are now set only in base.scss: five sizes (--text-page, --text-section, --text-card, --text-body, --text-small), three font variables and four weights, handed to the parts of the page in one list of type roles. Component styles no longer set font-size, font-weight, font-family or letter-spacing. A page shows at most five text sizes (before: up to seven on desktop and nine on mobile) and the article has no scale of its own. The lead uses the heading font in dark text, the labels (eyebrows, card numbers, footer headings) keep the body font also when they are headings, and running text has one size everywhere. The home service grid, the focus grid, the step grid, the case grid and the values rows are replaced by one component, .card-list with .card, which comes in two variants only: the hairline table and the numbered list. The columns follow the number of cards. The font trial in _data/fonts.json now only sets CSS variables on <html> instead of writing its own rules. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Grandstander (headings) and DM Sans (text) are the typefaces of the site. Their latin woff2 files and SIL OFL licence texts are added under assets/fonts/, declared in fonts.scss and preloaded from the layout, so a visit sends no request to Google (the reason commit 8b30074 removed Google Fonts). _data/fonts.json selects them for headings and body; options with a google field remain only as trial candidates. npm run check now fails when a page links to fonts.googleapis.com or fonts.gstatic.com, so a trial font cannot be published by mistake. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
With Grandstander, words of ten letters or more were hyphenated as soon as they did not fit the rest of a line, so the second card on the home page read "AI & maski-ninlärning" and many other 10-16 letter words were split needlessly. Only words of 17 letters or more are hyphenated now; shorter ones move whole to the next line. Words that cannot fit a box otherwise, such as "Produktionssättning" in four columns or "organisationsscheman" on a phone, are still hyphenated. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Member
Author
|
Nya fonter och previewbilder |
The four service cards on the home page get a 4:3 picture above the heading, set with an optional image field on each service in content.json. The pictures are cropped from the pages' own hero pictures (45-58 KB WebP in assets/img/home/, loaded lazily). Any card can start with a picture (a .card > img rule: 4:3, and 16:10 on a phone), so the cards on the other pages can use the same mechanism. AI för industri has no hero picture of its own yet, so its card uses a crop of the AI-labbet picture until a dedicated one is supplied; replacing a file with one of the same name is enough. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Every hero now shows the label, a large headline and the lead, then the picture at the width of the page, without fade and with rounded corners, and a thin orange line below it. The summary and links follow below the line. The layout is the same on every screen size; only the shape of the picture changes (2.9:1, 2.4:1 and 16:9). The picture is no longer anchored to the right edge behind the text, so the fade, the text glow and their variables are gone from hero.scss. The lead is set in the body font without the orange bar. The home headline is now the "Nyfikna på att utforska nytt" line with an orange full stop, and the expert line is the lead. The headline gets its own size (--text-display) and can be spaced tighter than other headings (--tracking-display, --leading-display) through the type roles in base.scss. All pages share the same hero classes: the home-only home-page-hero class is removed, and the README no longer suggests per-page hero CSS. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Newsreader replaces Grandstander as the heading font on every page, so a page uses two fonts: Newsreader for all headings and the big figures, and DM Sans for everything else. It is hosted in assets/fonts/ with its licence text and preloaded (weight 700, a static instance at optical size 72: 24 KB instead of the 129 KB variable file), so a visit still sends no request to Google. The hero headline is set tighter than the other headings (displayTracking and displayLeading in fonts.json). Words of 17 letters or more are hyphenated, as before. Grandstander stays as a hosted alternative in fonts.json. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Member
|
Superseeded av #61 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Enligt Chrilles
