Commit 5d09681d authored by René Rösner's avatar René Rösner
Browse files

Merge branch 'feature/354-design-richtlinien' into 'main'

planning#354: Changed default font to avira next and uses semibold styles for headlines

See merge request !25
parents bce54afc 12d3da3b
Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
Files: .env.example .editorconfig .gitignore package.json README.md
lib/contentful/* lib/utils/* lib/assets/data/*
yarn.lock ci/* components/* lib/* pages/* views/*.tsx styles/*.scss
public/*.png public/*.svg public/*.svg public/robots.txt
*.js *.ts
Copyright: 2022 FIT-Connect contributors
License: EUPL-1.2
Files: lib/assets/fonts/Montserrat/*
Copyright: 2011 The Montserrat Project Authors
License: OFL-1.1
Copyright 2011 The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
......@@ -37,7 +37,7 @@ export default ({ title, description, img, children }: HeaderOptions) => {
className={'w-24 h-24'}
/>
)}
<h1 className="p-5 text-3xl lg:text-5xl font-extrabold tracking-tight text-gray-900 overflow-hidden">
<h1 className="p-5 text-3xl lg:text-5xl tracking-tight text-gray-900 overflow-hidden">
{title}
</h1>
</header>
......
Montserrat Variable Font
========================
This download contains Montserrat as both variable fonts and static fonts.
Montserrat is a variable font with this axis:
wght
This means all the styles are contained in these files:
Montserrat-VariableFont_wght.ttf
Montserrat-Italic-VariableFont_wght.ttf
If your app fully supports variable fonts, you can now pick intermediate styles
that aren’t available as static fonts. Not all apps support variable fonts, and
in those cases you can use the static font files for Montserrat:
static/Montserrat-Thin.ttf
static/Montserrat-ExtraLight.ttf
static/Montserrat-Light.ttf
static/Montserrat-Regular.ttf
static/Montserrat-Medium.ttf
static/Montserrat-SemiBold.ttf
static/Montserrat-Bold.ttf
static/Montserrat-ExtraBold.ttf
static/Montserrat-Black.ttf
static/Montserrat-ThinItalic.ttf
static/Montserrat-ExtraLightItalic.ttf
static/Montserrat-LightItalic.ttf
static/Montserrat-Italic.ttf
static/Montserrat-MediumItalic.ttf
static/Montserrat-SemiBoldItalic.ttf
static/Montserrat-BoldItalic.ttf
static/Montserrat-ExtraBoldItalic.ttf
static/Montserrat-BlackItalic.ttf
Get started
-----------
1. Install the font files you want to use
2. Use your app's font picker to view the font family and all the
available styles
Learn more about variable fonts
-------------------------------
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
https://variablefonts.typenetwork.com
https://medium.com/variable-fonts
In desktop apps
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
Online
https://developers.google.com/fonts/docs/getting_started
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
Installing fonts
MacOS: https://support.apple.com/en-us/HT201749
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
Android Apps
https://developers.google.com/fonts/docs/android
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
License
-------
Please read the full license text (OFL.txt) to understand the permissions,
restrictions and requirements for usage, redistribution, and modification.
You can use them in your products & projects – print or digital,
commercial or otherwise.
This isn't legal advice, please consider consulting a lawyer and see the full
license for all details.
......@@ -143,7 +143,7 @@ export default function ({ services }) {
</Link>
</div>
<h1>
<span className="overflow-hiddenmt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-7xl">
<span className="overflow-hiddenmt-1 block text-4xl tracking-tight sm:text-5xl xl:text-7xl">
<span className="block text-gray-900">Verfügbare Plattformen &amp; Basisdienste</span>
</span>
</h1>
......@@ -211,7 +211,7 @@ export default function ({ services }) {
<div aria-labelledby={'service-' + key}>
<div className="flex justify-between">
<div className="flex space-x-3">
<div className="flex-shrink-0">
<div className="flex-shrink-0 xl:py-6">
{service?.logo
? (
<img
......@@ -226,7 +226,7 @@ export default function ({ services }) {
/>
)}
</div>
<div className="min-w-0 flex-1">
<div className="min-w-0 flex-1 xl:py-6">
<p className="text-lg font-medium text-gray-900">
<Link href={`/resources/${service.slug}`} passHref>
<a className="hover:underline">
......
......@@ -5,3 +5,21 @@
@import 'additional/utility-patterns.scss';
@import 'additional/tooltip.scss';
@font-face {
font-family: 'Montserrat';
src: url('../lib/assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 125 950;
font-stretch: 75% 125%;
font-style: normal;
}
@layer base {
html {
font-family: 'Montserrat';
}
h1 {
@apply font-semibold;
}
}
\ No newline at end of file
module.exports = {
mode: 'jit',
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./views/**/*.{js,jsx,ts,tsx}'
],
theme: {
extend: {
colors: {
yellow: {
400: '#FFC819'
}
},
boxShadow: {
xs: '0 0 0 1px rgba(0, 0, 0, 0.16)',
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.16)',
default:
mode: 'jit',
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./views/**/*.{js,jsx,ts,tsx}',
],
theme: {
extend: {
colors: {
yellow: {
400: '#FFC819',
},
},
boxShadow: {
xs: '0 0 0 1px rgba(0, 0, 0, 0.16)',
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.16)',
default:
'0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.03)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.02)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.15)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.04)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
none: 'none'
},
spacing: {
'9/16': '56.25%',
'3/4': '75%',
'1/1': '100%'
},
fontFamily: {
inter: ['Inter', 'sans-serif']
},
fontSize: {
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '2rem',
'4xl': '2.625rem',
'5xl': '3.25rem',
'6xl': '5.5rem'
},
inset: {
'1/2': '50%',
full: '100%'
},
letterSpacing: {
tighter: '-0.02em',
tight: '-0.01em',
normal: '0',
wide: '0.01em',
wider: '0.02em',
widest: '0.4em'
},
lineHeight: {
none: '1',
tighter: '1.125',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2',
3: '.75rem',
4: '1rem',
5: '1.2rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem'
},
minWidth: {
10: '2.5rem',
48: '12rem'
},
opacity: {
90: '0.9'
},
scale: {
98: '.98'
},
backgroundImage: {
'banner-texture': `url('${process.env.NEXT_PUBLIC_BASE_PATH ? process.env.NEXT_PUBLIC_BASE_PATH : ''}/img/connectwork.png')`
},
customForms: (theme) => ({
default: {
'input, textarea, multiselect, select, checkbox, radio': {
backgroundColor: theme('colors.white'),
borderColor: theme('colors.gray.300'),
borderRadius: theme('borderRadius.default'),
'&:focus': {
outline: undefined,
boxShadow: undefined,
borderColor: theme('colors.gray.500')
}
},
'input, textarea, multiselect, select': {
backgroundColor: theme('colors.white'),
fontSize: undefined,
lineHeight: undefined,
paddingTop: theme('spacing.3'),
paddingRight: theme('spacing.4'),
paddingBottom: theme('spacing.3'),
paddingLeft: theme('spacing.4')
},
'input, textarea': {
'&::placeholder': {
color: theme('colors.gray.500')
}
},
select: {
paddingRight: theme('spacing.10'),
iconColor: theme('colors.gray.400')
},
'checkbox, radio': {
color: theme('colors.gray.800'),
backgroundColor: theme('colors.white'),
borderRadius: theme('borderRadius.sm')
}
}
})
}
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms')
]
md: '0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.02)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.15)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.04)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
none: 'none',
},
spacing: {
'9/16': '56.25%',
'3/4': '75%',
'1/1': '100%',
},
fontFamily: {
montserrat: ['Montserrat', 'sans-serif'],
},
fontSize: {
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '2rem',
'4xl': '2.625rem',
'5xl': '3.25rem',
'6xl': '5.5rem',
},
inset: {
'1/2': '50%',
full: '100%',
},
letterSpacing: {
tighter: '-0.02em',
tight: '-0.01em',
normal: '0',
wide: '0.01em',
wider: '0.02em',
widest: '0.4em',
},
lineHeight: {
none: '1',
tighter: '1.125',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2',
3: '.75rem',
4: '1rem',
5: '1.2rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
},
minWidth: {
10: '2.5rem',
48: '12rem',
},
opacity: {
90: '0.9',
},
scale: {
98: '.98',
},
backgroundImage: {
'banner-texture': `url('${process.env.NEXT_PUBLIC_BASE_PATH ? process.env.NEXT_PUBLIC_BASE_PATH : ''}/img/connectwork.png')`,
},
customForms: (theme) => ({
default: {
'input, textarea, multiselect, select, checkbox, radio': {
backgroundColor: theme('colors.white'),
borderColor: theme('colors.gray.300'),
borderRadius: theme('borderRadius.default'),
'&:focus': {
outline: undefined,
boxShadow: undefined,
borderColor: theme('colors.gray.500'),
},
},
'input, textarea, multiselect, select': {
backgroundColor: theme('colors.white'),
fontSize: undefined,
lineHeight: undefined,
paddingTop: theme('spacing.3'),
paddingRight: theme('spacing.4'),
paddingBottom: theme('spacing.3'),
paddingLeft: theme('spacing.4'),
},
'input, textarea': {
'&::placeholder': {
color: theme('colors.gray.500'),
},
},
select: {
paddingRight: theme('spacing.10'),
iconColor: theme('colors.gray.400'),
},
'checkbox, radio': {
color: theme('colors.gray.800'),
backgroundColor: theme('colors.white'),
borderRadius: theme('borderRadius.sm'),
},
},
}),
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
],
}
import { IconSend, IconRoute, IconSteeringWheel, IconBug, IconManualGearbox, IconBrandOpenSource, IconRocket } from '@tabler/icons'
import { IconSend, IconRoute, IconSteeringWheel, IconBug, IconManualGearbox, IconBrandOpenSource, IconRocket, IconArrowBigRight } from '@tabler/icons'
import Link from 'next/link'
const featuredModules = [
......@@ -78,7 +78,7 @@ export default () => {
className="h-6 w-6 text-white"
/>
</div>
<h1 className="overflow-hidden py-1 sm:py-0.5 m-4 text-2xl sm:text-3xl font-extrabold tracking-tight text-white drop-shadow-md">
<h1 className="overflow-hidden py-1 sm:py-0.5 m-4 text-2xl sm:text-3xl tracking-tight text-white drop-shadow-md">
{blogEntry.headline}
</h1>
</div>
......@@ -93,17 +93,21 @@ export default () => {
className="h-6 w-6 text-white"
/>
</div>
<h1 className="overflow-hidden py-1 sm:py-0.5 m-4 text-2xl sm:text-3xl font-extrabold tracking-tight text-white drop-shadow-md">
<h1 className="overflow-hidden py-1 sm:py-0.5 m-4 text-2xl sm:text-3xl tracking-tight text-white drop-shadow-md">
Direkt loslegen!
</h1>
</div>
<p className="p-8 mt-6 max-w-7xl text-lg text-gray-800 bg-white rounded-t-2xl">
Mit den folgenden Ressourcen kannst Du direkt loslegen und mehr über die Föderale IT-Infrastruktur von Bund und Ländern erfahren und Anwendungen für die Öffentliche Verwaltung erstellen. Pespektivisch werden an dieser Stelle konkrete Entwicklungsszenarien mit den jeweils dafür benötigten Entwicklungsressourcen zusammengestellt.
</p>
<div className="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
<div className="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8 flex">
<Link href="/resources" passHref>
<a className="text-base font-bold text-yellow-400 hover:text-yellow-600">
Zu den Entwicklungsressourcen<span aria-hidden="true"> &rarr;</span>
<a className="justify-start text-base text-yellow-400 hover:text-yellow-600 inline-flex space-x-2">
<span className="font-bold xl:py-0.5">Zu den Entwicklungsressourcen</span>
<IconArrowBigRight
className="h-7 w-7 xl:py-1"
aria-hidden="true"
/>
</a>
</Link>
</div>
......@@ -131,12 +135,16 @@ export default () => {
{link.description}
</p>
</div>
<div className="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
<div className="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8 flex">
<a
href={link.href}
className="text-base font-medium text-yellow-400 hover:text-yellow-600"
className="justify-start text-base text-yellow-400 hover:text-yellow-600 inline-flex space-x-2"
>
Mehr erfahren<span aria-hidden="true"> &rarr;</span>
<span className="font-medium xl:py-0.5">Mehr erfahren </span>
<IconArrowBigRight
className="h-7 w-7 xl:py-1"
aria-hidden="true"
/>
</a>
</div>
</div>
......
......@@ -11,7 +11,7 @@ export default () => {
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
<div className="sm:text-center md:max-w-4xl md:mx-auto lg:col-span-8 lg:text-left">
<h1 className="xl:pb-1">
<span className="mt-1 block text-3xl tracking-tight font-extrabold sm:text-5xl xl:text-7xl">
<span className="mt-1 block text-3xl tracking-tight sm:text-5xl xl:text-7xl">
<span className="block text-gray-900">Das Föderale</span>
<span className="block text-yellow-400">
Entwicklungsportal
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment