Featured project
-Maturita prep in one app — on every platform.
-- My biggest project yet: a free, open-source app for the Czech maturita exam. Lessons come with exercises and quizzes, - the C# course runs your code right beside the text, and progress stats keep track of it all. - It even updates itself — CI builds every push, and the app offers the new build. -
-
- From German and Czech literature to computer networks, maths, AutoCAD and C#.
-SwiftUI on Mac and iPhone, Kotlin + Compose on Android, Windows and Linux.
-Each one with notes, a quiz and a plot to put back in order.
-Both languages, ten color themes, light and dark mode.
-Self-hosted
diff --git a/style.css b/style.css index a8aeab4..1b9de4d 100644 --- a/style.css +++ b/style.css @@ -359,8 +359,7 @@ a:hover { margin: 1.25rem 0 1.75rem; } -.hero-actions, -.feature-actions { +.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; @@ -410,12 +409,6 @@ a:hover { border-color: var(--ink); } -.btn svg { - width: 1.05rem; - height: 1.05rem; - fill: currentColor; -} - /* —— About —— */ .about-text { max-width: 42rem; @@ -444,187 +437,6 @@ a:hover { font-weight: 650; } -/* —— Feature (Graduately) —— */ -.feature { - --feature-shadow: rgba(0, 0, 0, 0.55); - --feature-edge: transparent; - --feature-word: min(11.4vw, 12rem); - overflow: hidden; -} - -:root[data-theme="light"] .feature { - --feature-shadow: rgba(17, 21, 28, 0.22); - --feature-edge: rgba(17, 21, 28, 0.22); -} - -.feature-backdrop { - margin: 0 calc(50% - 50vw) 1.25rem; - font-family: var(--font-display); - font-size: var(--feature-word); - font-weight: 800; - letter-spacing: -0.05em; - line-height: 0.82; - text-align: center; - white-space: nowrap; - color: var(--ink); - opacity: 0.07; - mask-image: linear-gradient(180deg, #000 35%, transparent 105%); - pointer-events: none; - user-select: none; -} - -.feature-grid { - display: grid; - gap: 3rem; - align-items: center; -} - -.feature .feature-title { - margin: 0 0 1rem; - font-size: clamp(2.25rem, 11.5vw, 3.75rem); - letter-spacing: -0.04em; - line-height: 1; -} - -.feature-kicker { - display: block; - margin-bottom: 0.45rem; - font-family: var(--font-body); - font-size: clamp(1.05rem, 1.6vw, 1.25rem); - font-style: italic; - font-weight: 500; - letter-spacing: 0; - line-height: 1.2; - color: var(--ink-soft); -} - -.feature-tagline { - margin: 0 0 1rem; - font-family: var(--font-display); - font-size: 1.2rem; - font-weight: 600; - letter-spacing: -0.02em; - line-height: 1.35; -} - -.feature-text { - max-width: 34rem; - margin: 0 0 1.75rem; - color: var(--muted); -} - -.feature-media { - position: relative; - isolation: isolate; - padding: 1rem 0 2.5rem; - perspective: 1800px; -} - -.feature-media::before { - content: ""; - position: absolute; - inset: 5% 0 0 10%; - z-index: -1; - background: radial-gradient(closest-side, var(--glow), transparent); - filter: blur(24px); -} - -.feature-window { - width: 100%; - height: auto; - transform: rotateX(10deg) rotateY(-18deg) rotateZ(2deg); - transform-origin: 60% 50%; - filter: drop-shadow(0 0 1px var(--feature-edge)) drop-shadow(0 30px 40px var(--feature-shadow)); - transition: transform 0.8s var(--ease); -} - -.feature-media:hover .feature-window { - transform: rotateX(5deg) rotateY(-9deg) rotateZ(1deg); -} - -.feature-icon { - position: absolute; - left: -1rem; - bottom: 0; - width: clamp(4rem, 9vw, 6.5rem); - height: auto; - border-radius: 22%; - box-shadow: 0 18px 36px var(--feature-shadow); - transform: rotate(-8deg); - transition: transform 0.8s var(--ease); -} - -.feature-media:hover .feature-icon { - transform: rotate(-4deg) translateY(-4px); -} - -.feature-stats { - display: grid; - gap: 1.75rem 2rem; - margin: 3.5rem 0 0; - padding: 0; - list-style: none; -} - -.feature-stats li { - padding-top: 1.1rem; - border-top: 1px solid var(--line-strong); -} - -.feature-stats h3 { - margin: 0 0 0.45rem; - font-size: 0.75rem; - font-weight: 650; - letter-spacing: 0.14em; - text-transform: uppercase; - color: var(--accent-ink); -} - -.feature-stats strong { - display: block; - margin-bottom: 0.3rem; - font-family: var(--font-display); - font-size: clamp(2rem, 3.2vw, 2.6rem); - font-weight: 750; - letter-spacing: -0.04em; - line-height: 1; - text-transform: none; - color: var(--ink); -} - -.feature-stats p { - margin: 0; - color: var(--muted); - font-size: 0.95rem; -} - -@media (min-width: 560px) { - .feature-stats { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -@media (min-width: 900px) { - .feature-grid { - grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); - } - - .feature .feature-title { - font-size: clamp(2.25rem, 5.5vw - 0.3rem, 3.75rem); - } - - .feature-media { - align-self: start; - margin-top: calc(var(--feature-word) * -0.7); - } -} - -@media (min-width: 1000px) { - .feature-stats { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } -} - /* —— Services —— */ .service-list { list-style: none;