search

codingdavinci / relaunch2018

This is the new Coding da Vinci website (online since September 2020).
https://codingdavinci.de
GNU General Public License v2.0
1 stars 1 forks source link

Implement General Styles (CSS) #32

Closed lohengruen closed 5 years ago

lohengruen commented 5 years ago

Main Frame / Wrapper Normally dimensions are 100% with a maximum width of 1280px, but in some cases I used different paddings (e.g. key visuals B & C)

Background color: #F5F5F5;

lohengruen commented 5 years ago

Menu Button Top Left

position:fixed

X: 25px Y: -76px W: 75px H: 54px X Constraint: Left Y Constraint: Top Font Family: Barlow Font Style: Medium Font Size: 36px Line Height: 43px Align: Left Fill: Solid

FFFFFF

Animation: When Menu opens, the ... inside the brackets gets replaced with a X

lohengruen commented 5 years ago

Fonts

Logo Font is 'Archive'. https://www.fontfabric.com/archive-free-font/

I don't know if there is a official webfont version of it available, but with the open license we are free to convert it to a woff and host it ourselves. At the moment, the font is only used in its vectorised form on logos etc., so there is no need to have it as a webfont, at least for now.

Text Font is 'Barlow' https://tribby.com/fonts/barlow/

Licensed under Open Font License (free to use in any context)

Webfont version can be downloaded here: https://www.dropbox.com/sh/9pbcvb88m3vmb7o/AAA8IQYKY5198JrhBkl7gGBia?dl=0

Text Styles (work in progress, will be added to regulary)

Normal Text Font Family: Barlow Font Style: Regular, Medium Font Size: 18px Line Height: 25px Align: Left Paragraph Spacing: 15px

Link Normal Text font-weight: normal; letter-spacing: 0.02em; color: #1D5D81; on mouse over-> text-decoration: underline;

h1 (section header) `Text Style: Section Header Font Family: Barlow Font Style: Medium Font Size: 36px Line Height: 43px Align: Left Paragraph Spacing: 15px Fill: Solid

5DC4B8`

h2 (page sub-headline) `Font Family: Barlow Font Style: Light Font Size: 20px Line Height: 29px Align: Left Fill: Solid

128A7C`

h4 (normal bold)

h5 (slightly bigger text) Font Family: Barlow Font Style: Regular, Medium Italic Font Size: 18px Line Height: 24px Align: Left Paragraph Spacing: 15px

image description `Font Family: Barlow Font Style: Light, Medium Font Size: 15px Line Height: 21px Align: Right Opacity: 50% Blend: Pass Through Fill Color Style: Gray 1 Fill: Solid

333333`

smaller text `Font Family: Barlow Font Style: Regular Font Size: 15px Line Height: 21px Align: Left Letter Spacing: 2% Paragraph Spacing: 15px Fill Color Style: Gray 2 Fill: Solid

4F4F4F`

Maybe change the pixel dimension to viewport dimensions (vh, vw), to make it easier to scale on mobile?

lohengruen commented 5 years ago

Footer

`/ BG /

position: absolute; width: 1280px; height: 322px; left: 0px; top: 0px;

background: #5DC4B8; `

`/ Mail Icon /

position: absolute; width: 11px; height: 9px; left: 911px; top: 171px;

/ Arrow Icon /

position: absolute; width: 15.5px; height: 8px; left: 925.5px; top: 76.5px; transform: rotate(-180deg);

/ Coding da Vinci - Der Kultur-Hackathon ist ein Projekt der Deutschen Digitalen Bibliothek, dem Forschungs- und Kompetenzzentrum Digitalisierung Berlin (digiS), der Open Knowledge Foundation Deutschland und Wikimedia Deutschland. /

position: absolute; width: 795px; height: 111px; left: 38px; top: 61px; font-family: Barlow; font-style: normal; font-weight: normal; line-height: 22px; font-size: 16px; letter-spacing: 0.02em; color: #4F4F4F;

/ Impressum & Datenschutz Kontakt Projektkoordination: Stephan Bartholmei (DDB), Anja Müller (digiS), Dominik Scholl (WMDE) codingdavinci {at} zib.de Credits & Lizenzen Font "Archive" von Svetoslav Simov/Fontfabric Wenn nicht anders angegeben, sind Textinhalte und bildliche Designelemente unter CC-BY 4.0 lizenziert. /

position: absolute; width: 330px; height: 304px; left: 910px; top: 61px; font-family: Barlow; font-style: normal; font-weight: 600; line-height: 22px; font-size: 15px; letter-spacing: 0.02em; color: #F2F2F2;`

Logos and images here: https://www.dropbox.com/sh/ckzl5ysb2ij6aqu/AABc0e-5wAcFHE9LROciQtDBa?dl=0

Snater commented 5 years ago

I had expected something different when you mentioned SCSS. ;-) The styles are not really useful as I need to rewrite them anyway (position absolute, px units). I am going to figure out the styles from the screen designs.

Snater commented 5 years ago

@lohengruen: Is there an icon font for the icons used in the footer (mail, arrow)? I see a lot of different font sizes and weights in use, i.e. the headings "Berichterstattung …" have a font size of 26px which does not match a font size of the heading styles supplied above. Seems a bit like we do not really have many truly global styles or would I just apply the h2 style specified above (as it seems to be a h2 heading per document structure)?

lohengruen commented 5 years ago

about the icons: For the moment I just used public domain icons from thenounproject.com, which I could export as .svg . But I was thinking of creating a custom icon font with http://fontello.com. I will generate a temporary one that you can use now, but it will probably get updated pretty soon.

About the general styles: Yes, I'm aware there are a lot of style discrepancies. I'm currently working on a more thorough typographic system that will include finer adjustments, and a lot of styles will be unified throughout the screen designs. I will have something for you in the next 2 hours.

lohengruen commented 5 years ago

Here is the link to our preliminary icon font: https://www.dropbox.com/sh/zc0app45t63u772/AAA9cAJHgdDGMZxU8AqXVMGTa?dl=0

If you need any specific icons for the UI, we could add them easily.

Snater commented 5 years ago

Just a note for the final font: Using { and } in a CSS class name won't work as that ends up having

.icon-{:before { content: '\e823'; }
.icon-}:before { content: '\e824'; }

in the CSS file when generating the font.

Snater commented 5 years ago

Another question: Are hover effects defined somewhere?

Snater commented 5 years ago

@lohengruen All styles according to https://github.com/codingdavinci/relaunch2018/issues/32#issuecomment-429797569, except the image caption, are visible on http://codingdavinci.snater.com/impressum-datenschutz now: h2-h6 styles, normal text, small text as well as additional custom styles that may be applied to links in the text.

On static pages, should it be possible to arrange paragraphs around images (like on the news article page) or are static pages rich text only? Put differently: What pages other than Impressum are left to be plain static? Do we have some page structure for the relaunch page?

Snater commented 5 years ago

So if we are going to have screen designs for every single page anyway (instead of having a basic screen design for static pages), then we can close this general issue. I have opened #34 for the About page, imprint screen design may be dropped into #6. As far as I can see, there won't be any other plain static pages.