Vers. 1.0
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"tabWidth": 4,
|
||||
"useTabs": false,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 80,
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,8 @@
|
||||
## Lizenzhinweis
|
||||
|
||||
Dieses Projekt dient ausschließlich schulischen Zwecken
|
||||
und ist nicht für die Veröffentlichung vorgesehen.
|
||||
|
||||
|
||||
Der JavaScript Teil und CSS Teil für die Animation ist bis auf kleine Optimierungen vollständig
|
||||
mit Copilot generiert oder von https://stackoverflow.com kopiert.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
+90
@@ -0,0 +1,90 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Linus Torvalds — Informationsseite</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Kurzinformationen über Linus Torvalds, den Erfinder des Linux-Kernels und Git."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="images/tux.avif" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<h1>Linus Torvalds</h1>
|
||||
<p class="tagline">
|
||||
Erfinder des Linux-Kernels & Schöpfer von Git
|
||||
</p>
|
||||
<div>
|
||||
<a class="main-link" href="links.html">Links</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
<section class="bio">
|
||||
<img
|
||||
src="images/LinusT.jpg"
|
||||
alt="Linus Torvalds"
|
||||
class="portrait"
|
||||
/>
|
||||
<div class="summary">
|
||||
<h2>Kurzbiographie</h2>
|
||||
<p>
|
||||
Linus Benedict Torvalds (* 28. Dezember 1969 in
|
||||
Helsinki, Finnland) ist ein Softwareentwickler, bekannt
|
||||
als Initiator und Hauptentwickler des Linux-Kernels. Er
|
||||
ist außerdem der ursprüngliche Autor von Git, dem
|
||||
verteilten Versionskontrollsystem.
|
||||
</p>
|
||||
<p>
|
||||
Torvalds veröffentlichte den ersten Linux-Kernel 1991
|
||||
und betreut seitdem die Entwicklung in einer
|
||||
Maintainer-Rolle. Seine Arbeit hat die Welt der
|
||||
Open-Source-Software nachhaltig geprägt.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Zeitleiste</h3>
|
||||
<ol id="timeline" class="timeline">
|
||||
<li>
|
||||
<button class="toggle">
|
||||
1991 — Linux veröffentlicht
|
||||
</button>
|
||||
<div class="content">
|
||||
Torvalds kündigte Linux in einer Usenet-Nachricht an
|
||||
und veröffentlichte den Kernel unter einer freien
|
||||
Lizenz.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<button class="toggle">2005 — Git entsteht</button>
|
||||
<div class="content">
|
||||
Als Reaktion auf Probleme mit der vorherigen
|
||||
Versionsverwaltung entwickelte Torvalds Git, ein
|
||||
schnelles verteiltes System.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<button class="toggle">Aktiv</button>
|
||||
<div class="content">
|
||||
Er ist weiterhin als Maintainer aktiv und
|
||||
kommentiert die Entwicklung des Kernels und der
|
||||
Open-Source-Community.
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<small>Quellen: Wikipedia, Kernel.org, Git-Website</small>
|
||||
</footer>
|
||||
|
||||
<script src="script.js" async defer></script>
|
||||
</body>
|
||||
</html>
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Links</title>
|
||||
<meta name="description" content="Nützliche Links zu Linus Torvalds, Linux und Git.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="images/tux.avif">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<h1>Linus Torvalds</h1>
|
||||
<p class="tagline">Erfinder des Linux-Kernels & Schöpfer von Git</p>
|
||||
<div>
|
||||
<a class="main-link" href="index.html">Hauptseite</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<ul class="links">
|
||||
<li><a href="https://git-scm.com/" target="_blank" rel="noopener">Git — Offizielle Seite</a></li>
|
||||
<li><a href="https://github.com/torvalds" target="_blank" rel="noopener">GitHub — Linus Torvalds</a></li>
|
||||
<li><a href="https://de.wikipedia.org/wiki/Linus_Torvalds" target="_blank" rel="noopener">Wikipedia (DE) — Linus Torvalds</a></li>
|
||||
<li><a href="https://www.kernel.org/" target="_blank" rel="noopener">Kernel.org — Offizielle Linux-Kernel-Website</a></li>
|
||||
</ul>
|
||||
|
||||
<script src="script.js" async defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
(() => {
|
||||
// wrap content into .inner for independent inner animation
|
||||
document.querySelectorAll('.timeline .content').forEach((c) => {
|
||||
if (!c.querySelector('.inner')) {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'inner';
|
||||
wrap.innerHTML = c.innerHTML;
|
||||
c.innerHTML = '';
|
||||
c.appendChild(wrap);
|
||||
}
|
||||
});
|
||||
|
||||
// delegate clicks for toggles
|
||||
document.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.toggle');
|
||||
if (!btn) return;
|
||||
const content = btn.nextElementSibling;
|
||||
if (!content) return;
|
||||
toggle(content, btn);
|
||||
});
|
||||
|
||||
function toggle(content, button) {
|
||||
const isOpen = content.classList.contains('open');
|
||||
|
||||
// ensure we have an inner element
|
||||
const inner = content.querySelector('.inner') || content;
|
||||
|
||||
// measure current height
|
||||
const computed = getComputedStyle(content);
|
||||
const startHeight = parseFloat(computed.height) || 0;
|
||||
|
||||
// freeze current height so transition starts from visual state
|
||||
content.style.height = startHeight + 'px';
|
||||
|
||||
if (isOpen) {
|
||||
// close: remove open class to start inner exit animation, then collapse height
|
||||
content.classList.remove('open');
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
content.setAttribute('aria-hidden', 'true');
|
||||
|
||||
// after paint, animate height to 0
|
||||
requestAnimationFrame(() => {
|
||||
// start from the frozen pixel height
|
||||
content.style.height = startHeight + 'px';
|
||||
requestAnimationFrame(() => {
|
||||
content.style.height = '0px';
|
||||
});
|
||||
});
|
||||
|
||||
const onEnd = (ev) => {
|
||||
if (ev.propertyName !== 'height') return;
|
||||
content.style.height = '';
|
||||
content.removeEventListener('transitionend', onEnd);
|
||||
};
|
||||
content.addEventListener('transitionend', onEnd);
|
||||
|
||||
} else {
|
||||
// open: add class first so computed scrollHeight includes padding/margins
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
content.setAttribute('aria-hidden', 'false');
|
||||
|
||||
// ensure starting height (likely 0)
|
||||
content.style.height = startHeight + 'px';
|
||||
|
||||
// paint, add class, then measure target height
|
||||
requestAnimationFrame(() => {
|
||||
content.classList.add('open');
|
||||
requestAnimationFrame(() => {
|
||||
const target = content.scrollHeight;
|
||||
content.style.height = target + 'px';
|
||||
|
||||
const onEnd = (ev) => {
|
||||
if (ev.propertyName !== 'height') return;
|
||||
content.style.height = '';
|
||||
content.removeEventListener('transitionend', onEnd);
|
||||
};
|
||||
content.addEventListener('transitionend', onEnd);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,183 @@
|
||||
:root {
|
||||
--bg: #152035;
|
||||
--fg: #e6eef8;
|
||||
--expand-duration: 360ms;
|
||||
--expand-easing: cubic-bezier(.2,.9,.2,1);
|
||||
--muted: #9aa6b2;
|
||||
--accent: #60a5fa;
|
||||
--card: #0e1a2e;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family:
|
||||
Inter,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial;
|
||||
background: #060e20;
|
||||
color: #e6eef8;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
padding: 28px 20px;
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0.02), transparent);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
.site-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.tagline {
|
||||
margin: 4px 0 0;
|
||||
color: #7c7f83;
|
||||
}
|
||||
|
||||
.site-header h1 {
|
||||
grid-column: 1;
|
||||
justify-self: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.site-header .tagline {
|
||||
grid-column: 2;
|
||||
justify-self: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-header > div {
|
||||
grid-column: 3;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 980px;
|
||||
margin: 28px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.bio {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
.portrait {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.summary {
|
||||
font-size: 20px;
|
||||
}
|
||||
.timeline {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.timeline li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.toggle {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
background: var(--card);
|
||||
color: #e6eef8;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content {
|
||||
padding: 0 12px;
|
||||
margin-top: 0;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
color: #7c7f83;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height var(--expand-duration) var(--expand-easing), opacity 220ms ease;
|
||||
opacity: 0;
|
||||
will-change: height, opacity;
|
||||
}
|
||||
|
||||
.content.open {
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.content .inner {
|
||||
transform-origin: top;
|
||||
transform: translateY(6px);
|
||||
opacity: 0;
|
||||
transition: transform 300ms var(--expand-easing), opacity 220ms ease;
|
||||
will-change: transform, opacity;
|
||||
padding: 10px 0 6px;
|
||||
}
|
||||
|
||||
.content.open .inner {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
.site-footer {
|
||||
max-width: 980px;
|
||||
margin: 40px auto;
|
||||
padding: 10px 20px;
|
||||
color: #ffffff;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.portrait {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-link {
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
border: 1px solid #7c7f83;
|
||||
padding: 6px 0;
|
||||
border-radius: 6px;
|
||||
color: #e6eef8;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.main-link:hover {
|
||||
background: rgba(255, 255, 255, 0.24);
|
||||
border-color: #7c7f83;
|
||||
}
|
||||
.links {
|
||||
font-size: 20px;
|
||||
list-style: none;
|
||||
padding: 10px;
|
||||
margin: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
Reference in New Issue
Block a user