Raffa3l.github.io/index.html at main · Raffa3l/Raffa3l.github.io · 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
138
<!DOCTYPE html>
<html lang="de-CH">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>logicc.ch</title>
<meta name="description" content="Innerhalb dieser Zone werden verschiedene Dienste bereitgestellt.">
<style>
  :root{
    --bg: #0b0e0d;
    --fg: #d7ddd9;
    --muted: #7c8a83;
    --accent: #5fbf8f;
    --border: #1e2622;
  }
  *{ box-sizing: border-box; }
  html{ background: var(--bg); }
  body{
    margin: 0;
    padding: 4rem 1.5rem 6rem;
    background: var(--bg);
    color: var(--fg);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 15px;
    line-height: 1.6;
  }
  main{ max-width: 720px; margin: 0 auto; }
  .prompt{ color: var(--accent); }
  h1{
    font-size: 1rem;
    font-weight: 400;
    margin: 0 0 2.5rem;
    color: var(--muted);
  }
  h1 span{ color: var(--fg); }
  .caret{
    display: inline-block;
    width: 0.55em;
    height: 1em;
    background: var(--accent);
    margin-left: 2px;
    vertical-align: text-bottom;
    transform: translateY(-0.12em);
    animation: blink 1.1s steps(1) infinite;
  }
  @media (prefers-reduced-motion: reduce){ .caret{ animation: none; opacity: 1; } }
  @keyframes blink{ 50%{ opacity: 0; } }

  .readme{
    border: 1px solid var(--border);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2.5rem;
  }
  .readme .path{
    color: var(--muted);
    font-size: 0.8rem;
    margin: 0 0 1rem;
    text-transform: none;
  }
  .readme h2{
    font-size: 1rem;
    font-weight: 400;
    color: var(--fg);
    margin: 0 0 1rem;
  }
  .readme h2::before{ content: "# "; color: var(--accent); }
  .readme p{ margin: 0 0 0.75rem; }
  .readme p:last-child{ margin-bottom: 0; }
  .readme .tagline{ color: var(--muted); font-style: normal; }
  .readme .tagline::before{ content: "* "; color: var(--accent); }
  .readme .tagline::after{ content: " *"; color: var(--accent); }
  .readme a{ color: var(--accent); text-decoration: none; }
  .readme a:hover, .readme a:focus-visible{ text-decoration: underline; }

  .prompt-line{ color: var(--fg); margin: 0 0 2.5rem; }

  table{ width: 100%; border-collapse: collapse; }
  caption{ text-align: left; color: var(--muted); font-weight: 400; margin-bottom: 0.75rem; }
  th{
    text-align: left;
    font-weight: 400;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    padding: 0.4rem 0.75rem 0.4rem 0;
  }
  td{
    padding: 0.55rem 0.75rem 0.55rem 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
  }
  td.path a{ color: var(--accent); text-decoration: none; }
  td.path a:hover, td.path a:focus-visible{ text-decoration: underline; }
  td.desc{ color: var(--fg); }
  td.type{ color: var(--muted); white-space: nowrap; }
  a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

  footer{
    margin-top: 3rem;
    color: var(--muted);
    font-size: 0.85rem;
  }
  footer a{ color: var(--muted); }
</style>
</head>
<body>
<main>
  <h1><span class="prompt">user@logicc</span>:~$ cat README.md</h1>

  <section class="readme">
    <p class="path">/README.md</p>
    <h2>Zone Logicc</h2>
    <p class="tagline">Plattform für digitale Anwendungen</p>
    <p>Diese Plattform dient als Basis für Online&#8209;Projekte, Experimente und praxisorientierte Anwendungen.</p>
    <p>Kontakt: <a id="contact-link" href="#" rel="nofollow">E-Mail-Adresse anzeigen</a><noscript> hello [at] logicc [dot] ch</noscript></p>
    <p>logicc.ch · Private Schweizer Plattform · <span id="current-year">2026</span></p>
    <p>EOF</p>
  </section>

  <p class="prompt-line"><span class="prompt">user@logicc</span>:~$&nbsp;<span class="caret" aria-hidden="true"></span></p>

</main>
<script>
(function(){
  var user = "hello";
  var domain = "logicc" + "." + "ch";
  var link = document.getElementById("contact-link");
  if(!link){ return; }
  var address = user + "@" + domain;
  link.setAttribute("href", "mailto:" + address);
  link.textContent = address;
  link.removeAttribute("rel");

  var yearEl = document.getElementById("current-year");
  if(yearEl){ yearEl.textContent = new Date().getFullYear(); }
})();
</script>
</body>
</html>