living styleguide

Typography

abcdefghijklmnopqrstuvwxyz

Headings

text-elements

fonts

Itc avant garde gothic

Itc avant garde gothic s

headings

size : minimum 36px maximum 55px
color : Primary, Secondary or white
line-height : 1.4

text elements

size : minimum 16px maximum 20px
color : Primary, Secondary or white
line-height : 1.2

CSS

headings
                            :nth-child(1){
                            /* outline: solid; */
                            background-color: var(--cp-grey);
                            font-size: 2.8rem;
                            font-family:'itcagg4';
                            max-width:15rem ;
                            }
                            :nth-child(2){
                            color: var(--cp-primary);
                            font-size: 2.8rem;
                            font-family:'itcagg4';
                            max-width:15rem ;
                            }

images and media

Big image

Picture type : banner
Picture width : span full viewport
color : orginal colors
color with text : black & white with linear-gradient of of primary color
Additions : Svg landmark, bottom center

Small image

Picture type : cards and maps
Picture width : span container
color : original colors
color with text : no image, secondary color
Additions : Svg landmark, bottom center

Icons

Picture type : Svg
Picture width : 2rem
color : primary/white

Video

video type : Banner
video width : span full viewport
color : original
additions : Svg landmark, bottom center

Video

video type : player
video width : container
color : original

CSS

images-media
                            .components ul{
                                display: grid;
                                grid-template-columns: [border-start] minmax(0px,.3fr) [button-start] 1fr [mid] 1fr [button-end] minmax(0px,.3fr) [border-end]  ;
                                grid-template-rows: auto;
                                gap: var(--vg-n);
                                
                        
                                > li{
                                    grid-column: button;
                                }
                            }

buttons

Call to action Button

color : Primary
Text : white
hover : background-color : darken

Link button

color : Primary
Text : white
hover : background-color : darken
: text-color : secondary

Action button

color : Secondary/Tertiary
Text : white
hover :background-color : darken

Hamburger button

color : Tertiary/white
Text : white
hover : background-color : darken
: text-color : primary/secondary

CSS

button
                            & > li:nth-of-type(3) button{
                                background-color: var(--cp-secondary);
                                color: var(--cp-white);
                                font-size: 2em;
                                
                                &:hover{
                                    background-color: var(--cp-secondary-hover);
                                    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.471);
                                }
                                &:active{
                                   scale:calc(1 - 0.008) ;
                                   outline: 3px solid var(--cp-grey);
                                }
                            }

navigation

Cultuur

Horeca

Film

Market

Music

shop

Search

Positioning : center of cntainer
Color : white
Color button : secondary
background-color : primary

Date

Positioning : center of cntainer
Color : white
Color button : secondary
background-color : secondary

Tabs

Positioning : top center of cntainer
Color Svg : white
background-color : secondary
hover : opacity 1
paragraph display content

CSS

navigation
                            & > article .search{
                                outline:solid #0a3250;
                                display: inline-flex;
                                width: 100%;
                                >input{
                                    all: unset;
                                    flex-grow: 1;
                                    background-color: var(--cp-white);
                                }
                                > button{
                                    all: unset;
                                    flex-basis: content;
                                    background-color: var(--cp-secondary);
                                    color: var(--cp-white);
                                    padding: 2px;
                                    display: grid;
                                    place-items: center;
                                   > svg{
                                        scale:0.8;
                                    }
                                }
                                > button:active{
                                    outline: 2px solid var(--cp-white);
                                    z-index: 2;
                                }
                            }

Colors

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est nostrum cupiditate quod possimus rerum quis eos distinctio aspernatur tenetur neque.