Een ander thema

Kleine aanpassingen, groot resultaat…

Mijn site voelde nog niet goed. Er mag iets meer met kleur gespeeld worden, wat meer warme kleuren etc. De CSS (opmaak) is daarom aangepast.

Het probleem: veel te blauw en daardoor nog net niet je van het…

Blauw is een mooie maar wat koude kleur, maar het voelde nog niet goed. Ik wil graag een hi-tech maar ook warm thema. Rustig, warm en donker, maar niet duister.

De belangrijkste dingen die ik anders wou:

1. Minder blauw - nu kleuren die meer warmte uitstralen
2. Schetsachtig gevoel — iets wat doet denken aan het schetsgevoel van Excalidraw

Met behulp van Claude daarom wat mogelijke thema’s op basis van mijn eerdere thema uitgedacht. Claude gaf in de chat 3 voorbeelden terug, uiteindelijk heb ik een mooie mix gevonden.

Hieronder de drie thema’s zoals die door Claude zijn gegenereerd.

Eerste voorbeeld

Tweede voorbeeld

Derde voorbeeld

Ik vond de ‘amber’ variant eigenlijk nog te ‘glad’ en er zaten ook mooie dingen in de schetsvariant. De groene was eigenlijk een beetje de blauwe all over again. Niet helemaal m’n ding. Dus met Claude in de remix:

Het gekozen ontwerp

Het vervangen van de bestaande CSS

Aangezien ik Claude mijn hele CSS had gegeven was het aanpassen heel eenvoudig. Ik kon de CSS een op een vervangen.

En met name dit deel maakt een groot verschil.

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-alt: #111820;
  --text: #e8e0d0;
  --muted: #8b8070;
  --line: rgba(200, 175, 120, 0.16);
  --accent: #e8a030;
  --accent-hover: #c4822a;
  --max-width: 1120px;
  --narrow-width: 720px;
  --article-width: 780px;
  --radius: 5px 8px 5px 7px / 7px 5px 8px 5px;
  --radius-sm: 3px 5px 3px 4px / 4px 3px 5px 3px;
  --shadow: 3px 3px 0 rgba(232, 160, 48, 0.10);
}

Hierdoor krijgt m’n thema een mooie uniforme uitstraling.

Resultaat

Dezelfde structuur van de website, dezelfde Hugo-setup, maar een site die nu iets meer uitstraalt wat ik wil dat hij uitstraalt. De drie aanpassingen die het meeste doen:

• --accent: #e8a030 in plaats van blauw
• Asymmetrische border-radius op alle cards
• Harde box-shadow zonder blur, in amberkleur

Qua kleur een forse ingreep, maar ook relatief subtiele CSS-ingrepen met een mooi visueel effect. Ik ben er blij mee.