.github/index.html at main · DOEBELING/.github · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DÖBELING Projektbüro on GitHub</title>
    <meta name="description" content="Open-source projects by DÖBELING Projektbüro in Fürth, Germany: project management, business analysis and web development.">
    <meta name="theme-color" content="#78022D">
    <link rel="canonical" href="https://doebeling.dev">

    <link rel="icon" href="assets/favicon.ico" sizes="16x16 24x24 32x32 48x48">
    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">

    <meta property="og:title" content="DÖBELING Projektbüro on GitHub">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://doebeling.dev">
    <meta property="og:locale" content="en_GB">
    <meta property="og:description" content="Open-source projects by DÖBELING Projektbüro in Fürth, Germany: project management, business analysis and web development.">
    <meta property="og:image" content="https://doebeling.dev/assets/og-image.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="DÖBELING Projektbüro">
    <meta name="twitter:card" content="summary_large_image">

    <style>
        /* Brand colours from the corporate design manual (marke/farben/farben.css) */
        :root {
            --port-wine: #78022d;
            --ink: #22262b;
            --paper: #ffffff;
            --night: #0e1114;
            --light-grey: #e7e7e8;
            --background: var(--paper);
            --text: var(--ink);
        }
        @media (prefers-color-scheme: dark) {
            :root {
                --background: var(--night);
                --text: var(--paper);
            }
        }
        * { box-sizing: border-box; }
        html, body { height: 100%; margin: 0; }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100%;
            padding: 3rem 1.5rem 1.5rem;
            background: var(--background);
            color: var(--text);
            font-family: Biome, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
            font-weight: 300;
            text-align: center;
        }
        main {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* One column as wide as the logo; divider and button start on the
           wordmark's left edge (28.62 % of the logo width in D15-quer) */
        .brand {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 3rem;
            width: min(600px, calc(100vw - 6rem));
            --wordmark-left: 28.62%;
        }
        @media (max-width: 640px) {
            /* stacked logo: the wordmark starts on the logo's left edge */
            .brand { width: min(316px, calc(100vw - 5rem)); --wordmark-left: 0%; }
            /* stacked logo is symmetric, so the button sits on its centre axis */
            .brand .cta { align-self: center; margin-left: 0; }
        }
        /* Divider: light grey line across the wordmark's width, outside the logo's clear space */
        .divider {
            width: calc(100% - var(--wordmark-left));
            height: 1px;
            margin: 0 0 0 var(--wordmark-left);
            border: 0;
            background: var(--light-grey);
        }
        .logo { display: block; width: 100%; line-height: 0; }
        .logo img { max-width: 100%; height: auto; }
        /* Logo width follows the minimum sizes and the clear space (0.339 × tile side) of the CD manual */
        .logo img { width: 100%; }
        .cta {
            display: inline-block;
            margin-left: var(--wordmark-left);
            padding: 0.9rem 2rem;
            /* Tile shape: top-left and bottom-right corners rounded */
            border-radius: 0.9rem 0 0.9rem 0;
            background: var(--port-wine);
            color: var(--paper);
            font-size: 1.1rem;
            font-weight: 400;
            text-decoration: none;
            transition: opacity 0.3s;
        }
        .cta:hover, .cta:focus-visible { opacity: 0.85; }
        footer { margin-top: 3rem; font-size: 0.85rem; opacity: 0.6; }
        footer a { color: var(--text); text-decoration: none; }
        footer a:hover, footer a:focus-visible { text-decoration: underline; }
        footer span { margin: 0 0.6em; }
    </style>
</head>
<body>

<main>
<div class="brand">

<a class="logo" href="https://www.Doebeling.de" title="DÖBELING Projektbüro">
    <picture>
        <source media="(max-width: 640px) and (prefers-color-scheme: dark)" srcset="assets/logo-stacked-dark.svg">
        <source media="(max-width: 640px)" srcset="assets/logo-stacked-light.svg">
        <source media="(prefers-color-scheme: dark)" srcset="assets/logo-dark.svg">
        <img src="assets/logo-light.svg" width="600" height="128" alt="DÖBELING Projektbüro">
    </picture>
</a>

<hr class="divider">

<a class="cta" href="https://github.com/DOEBELING">Show Projects on GitHub</a>

</div>
</main>

<footer>
    <a href="https://legal.doebeling.de/impressum/">Imprint</a><span>·</span><a href="https://legal.doebeling.de/datenschutzerklaerung/">Data Protection</a>
</footer>

</body>
</html>