<!-- components/1-base/b_reset.txp -->

<!-- components/1-base/b_fonts.txp -->

<!-- components/1-base/b_typeset.txp --> <div class="u_baseline-grid"> <div> <h1>Lorem Khaled Ipsum is a major key to success.</h1> <p>To succeed you must believe. When you believe, you will succeed. The key to more success is to have a lot of pillows.</p> <h2>Egg whites, turkey sausage, wheat toast, water.</h2> <p>Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. They key is to have every key, the key to open every door.</p> <p>It’s on you how you want to live your life. Everyone has a choice. I pick my choice, squeaky clean.</p> <h3>Let’s see what Chef Dee got that they don’t want us to eat.</h3> <p>Life is what you make it, so let’s make it. They key is to have every key, the key to open every door. We don’t see them, we will never see them. The first of the month is coming, we have to get money, we have no choice.</p> <h4>The weather is amazing.</h4> <p>It cost money to eat and they don’t want you to eat. Walk with me through the pathway of more success.</p> <p><small>Take this journey with me, Lion! In life there will be road blocks but we will over come it. Let’s see what Chef Dee got that they don’t want us to eat.</p></small> </div> </div>

<!-- components/1-base/b_colours.txp --> <style> .bg--beigepink1 { background-color: var(--beigepink1); } .bg--whiteLC { background-color: var(--whiteLC); } .bg--charcoal { background-color: var(--charcoal); } .bg--grey2 { background-color: var(--grey2); } .bg--grey { background-color: var(--grey); } .bg--silver { background-color: var(--silver); } .bg--black { background-color: var(--black); } .bg--grey3 { background-color: var(--grey3); } .bg--grey4 { background-color: var(--grey4); } .bg--grey1 { background-color: var(--grey1); } .bg--blue1 { background-color: var(--blue1); } .bg--bluepale { background-color: var(--bluepale); } .bg--blue6 { background-color: var(--blue6); } .bg--blue7 { background-color: var(--blue7); } .bg--greenpale2 { background-color: var(--greenpale2); } .bg--blue2 { background-color: var(--blue2); } .bg--blue3 { background-color: var(--blue3); } .bg--blue8 { background-color: var(--blue8); } .bg--green7 { background-color: var(--green7); } .bg--greenpale1 { background-color: var(--greenpale1); } .bg--blue { background-color: var(--blue); } .bg--blue4 { background-color: var(--blue4); } .bg--bluedark { background-color: var(--bluedark); } .bg--green { background-color: var(--green); } .bg--green6 { background-color: var(--green6); } .bg--greenpale { background-color: var(--greenpale); } .bg--green1 { background-color: var(--green1); } .bg--green3 { background-color: var(--green3); } .bg--green4 { background-color: var(--green4); } .bg--green5 { background-color: var(--green5); } .bg--olive { background-color: var(--olive); } .bg--green2 { background-color: var(--green2); } .bg--yellowbeige2 { background-color: var(--yellowbeige2); } .bg--yelloworange { background-color: var(--yelloworange); } .bg--yelloworange1 { background-color: var(--yelloworange1); } .bg--yellow { background-color: var(--yellow); } .bg--orange { background-color: var(--orange); } .bg--orange2 { background-color: var(--orange2); } .bg--orangepale { background-color: var(--orangepale); } .bg--orange1 { background-color: var(--orange1); } .bg--red1 { background-color: var(--red1); } .bg--pink2 { background-color: var(--pink2); } .bg--red2 { background-color: var(--red2); } .bg--red3 { background-color: var(--red3); } .bg--redbeige { background-color: var(--redbeige); } .bg--red { background-color: var(--red); } .bg--pink { background-color: var(--pink); } .bg--purple { background-color: var(--purple); } .bg--brown { background-color: var(--brown); } .bg--brown3 { background-color: var(--brown3); } .bg--redbeige1 { background-color: var(--redbeige1); } .bg--beigepink { background-color: var(--beigepink); } .bg--brown2 { background-color: var(--brown2); } .bg--brown4 { background-color: var(--brown4); } .bg--beige { background-color: var(--beige); } .bg--beigepink2 { background-color: var(--beigepink2); } .bg--brown1 { background-color: var(--brown1); } .bg--brown6 { background-color: var(--brown6); } .bg--charcoal1 { background-color: var(--charcoal1); } .bg--brown7 { background-color: var(--brown7); } .bg--brown5 { background-color: var(--brown5); } .bg--black1 { background-color: var(--black1); } .bg--black2 { background-color: var(--black2); } .farbe { width: 15vw; display: inline-block; vertical-align: top; padding: 1em; min-height: 15vw; color: var(--white); } .farbe span { font-size: 11px; display: block; /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } </style> <h1>Colour Palette</h1> <p>by Le Corbusier</p> <h2>Neutrals</h2> <div class="farbe bg--whiteLC"> LCwhite <span>blancivoire</span> </div> <div class="farbe bg--silver"> silver <span>grisclair31</span> </div> <div class="farbe bg--grey"> grey <span>grismoyen</span> </div> <div class="farbe bg--grey1"> grey1 <span>grisclair59</span> </div> <div class="farbe bg--grey2"> grey2 <span>gris31</span> </div> <div class="farbe bg--grey3"> grey3 <span>gris59</span> </div> <div class="farbe bg--grey4"> grey4 <span>grisfonce59</span> </div> <div class="farbe bg--charcoal"> charcoal <span>grisfonce31</span> </div> <div class="farbe bg--charcoal1"> charcoal1 <span>ombrenaturelle31</span> </div> <div class="farbe bg--black"> black <span>noirdivoire</span> </div> <div class="farbe bg--black1"> black1 <span>terredombrebrulee59</span> </div> <div class="farbe bg--black2"> black2 <span>ombrenaturelle59</span> </div> <h2>Blues</h2> <div class="farbe bg--bluedark"> bluedark <span>bleuoutremerfonce</span> </div> <div class="farbe bg--blue"> blue <span>xxx</span> </div> <div class="farbe bg--blue1"> blue1 <span>bleuoutremer31</span> </div> <div class="farbe bg--blue2"> blue2 <span>bleuceruleen31</span> </div> <div class="farbe bg--blue3"> blue3 <span>ceruleenvif</span> </div> <div class="farbe bg--blue4"> blue4 <span>bleuceruleen59</span> </div> <div class="farbe bg--bluepale"> bluepale <span>outremermoyen</span> </div> <div class="farbe bg--blue6"> blue6 <span>outremerclair</span> </div> <div class="farbe bg--blue7"> blue7 <span>outremerpale</span> </div> <div class="farbe bg--blue8"> blue8 <span>ceruleenmoyen</span> </div> <h2>Greens</h2> <div class="farbe bg--green"> green <span>vert</span> </div> <div class="farbe bg--green1"> green1 <span>vertfonce</span> </div> <div class="farbe bg--green2"> green2 <span>vert59</span> </div> <div class="farbe bg--green3"> green3 <span>vertclair</span> </div> <div class="farbe bg--green4"> green4 <span>vertclair</span> </div> <div class="farbe bg--green5"> green5 <span>vertjauneclair</span> </div> <div class="farbe bg--green6"> green6 <span>vertanglaisclair</span> </div> <div class="farbe bg--greenpale"> greenpale <span>vertanglaispale</span> </div> <div class="farbe bg--greenpale1"> greenpale1 <span>ceruleenpale</span> </div> <div class="farbe bg--green7"> green7 <span>ceruleenclair</span> </div> <div class="farbe bg--greenpale2"> greenpale2 <span>outremergris</span> </div> <div class="farbe bg--olive"> olive <span>vertolivevif</span> </div> <h2>Yellows</h2> <div class="farbe bg--yellow"> yellow <span>lejaunevif</span> </div> <div class="farbe bg--yelloworange"> yelloworange <span>ocrejauneclair</span> </div> <div class="farbe bg--yelloworange1"> yelloworange1 <span>terresienneclaire59</span> </div> <div class="farbe bg--yellowbeige2"> yellowbeige2 <span>ocre</span> </div> <h2>Oranges</h2> <div class="farbe bg--orange1"> orange1 <span>orangevif</span> </div> <div class="farbe bg--orange"> orange <span>orange</span> </div> <div class="farbe bg--orange2"> orange2 <span>orangeclair</span> </div> <div class="farbe bg--orangepale"> orangepale <span>orangepale</span> </div> <h2>Reds</h2> <div class="farbe bg--red"> red <span>rougevermillon59</span> </div> <div class="farbe bg--red1"> red1 <span>rougevermillon31</span> </div> <div class="farbe bg--red2"> red2 <span>rougecarmin</span> </div> <div class="farbe bg--red3"> red3 <span>rougerubia</span> </div> <div class="farbe bg--pink"> pink <span>rosevif</span> </div> <div class="farbe bg--pink2"> pink2 <span>rosepale</span> </div> <div class="farbe bg--redbeige"> redbeige <span>roseclair</span> </div> <div class="farbe bg--redbeige1"> redbeige1 <span>locrerougemoyen</span> </div> <h2>Purple</h2> <div class="farbe bg--purple"> purple <span>lerubis</span> </div> <h2>Browns</h2> <div class="farbe bg--brown1"> brown1 <span>terredombrebrulee31</span> </div> <div class="farbe bg--brown2"> brown2 <span>terresiennebrulee31</span> </div> <div class="farbe bg--brown"> brown <span>terresiennebrulee59</span> </div> <div class="farbe bg--brown3"> brown3 <span>locrerouge</span> </div> <div class="farbe bg--brown4"> brown4 <span>terresiennebrique</span> </div> <div class="farbe bg--beige"> beige <span>terresienneclaire31</span> </div> <div class="farbe bg--beigepink"> beigepink <span>locrerougeclair</span> </div> <div class="farbe bg--beigepink1"> beigepink1 <span>blanc</span> </div> <div class="farbe bg--beigepink2"> beigepink2 <span>terresiennepale</span> </div> <div class="farbe bg--brown5"> brown5 <span>ombrenaturelleclaire</span> </div> <div class="farbe bg--brown6"> brown6 <span>ombrebruleeclaire</span> </div> <div class="farbe bg--brown7"> brown7 <span>ombrenaturellemoyenne</span> </div>