diff --git a/README.md b/README.md index 6f3735c..ed0459d 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ Bygget til eksamen mandag **1. juni 2026**, men generelt nyttig for faget. ## Hva får du +- **Fast-track** — hele pensum kondensert til 5 moduler etter eksamensstrukturen, gjentakelsesfritt, med huskeregler, eksempler og «eksamensfeller». Egen fremdriftsmåler (lest-markering lagres lokalt) - **Sammendrag** av alle 12 forelesninger som lesbare sider - **120 flashcards** med flip-animasjon, kategori-filter og «glemt/ok/kunne»-markering - **49 quiz-spørsmål** med umiddelbar feedback og forklaringer @@ -58,7 +59,7 @@ SMF/ │ ├── data/ # JSON: flashcards (120), quiz (49), exam (16) │ ├── notes/ # Symlink til ../notes │ └── vendor/ # marked.min.js (markdown-renderer) -├── notes/ # Markdown-sammendrag per uke + tldr.md +├── notes/ # Markdown-sammendrag per uke + tldr.md + fast-track.md ├── pdf/ # PDF-versjoner av forelesningene └── *.pptx # Originale PowerPoints fra Martina ``` diff --git a/app/css/style.css b/app/css/style.css index bfb85c5..c64f5de 100644 --- a/app/css/style.css +++ b/app/css/style.css @@ -1935,3 +1935,302 @@ blockquote { .app { grid-template-columns: 1fr; } .canvas { padding: 0; } } + +/* =================================================== + Fast-track — kondensert læringsspor + =================================================== */ +.sidebar__link--fasttrack .sidebar__link-num { + color: var(--accent-2); + font-weight: 700; +} + +/* Hero */ +.ft-hero { + padding: var(--sp-7) 0 var(--sp-6); + border-bottom: 1px solid var(--line); + margin-bottom: var(--sp-7); +} +.ft-hero__badge { + display: inline-block; + font-family: var(--f-mono); + font-size: var(--s-0); + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--accent-2); + border: 1px solid var(--line-strong); + border-radius: var(--radius); + padding: 4px 10px; + margin-bottom: var(--sp-4); +} +.ft-hero__title { + font-family: var(--f-display); + font-weight: 300; + font-size: var(--s-7); + line-height: 1.05; + color: var(--ink); + margin-bottom: var(--sp-4); +} +.ft-hero__title em { font-style: italic; color: var(--accent-2); } +.ft-hero__sub { + font-size: var(--s-3); + line-height: 1.6; + color: var(--ink-2); + max-width: 60ch; +} +.ft-hero__sub strong { color: var(--ink); } + +/* Progress */ +.ft-progress { margin-top: var(--sp-6); max-width: 480px; } +.ft-progress__head { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: var(--sp-2); +} +.ft-progress__label { + font-family: var(--f-mono); + font-size: var(--s-0); + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--muted); +} +.ft-progress__count { + font-family: var(--f-mono); + font-size: var(--s-1); + color: var(--accent-2); + font-variant-numeric: tabular-nums; +} +.ft-progress__track { + height: 6px; + background: var(--surface-2); + border-radius: 99px; + overflow: hidden; +} +.ft-progress__bar { + height: 100%; + width: 0; + background: linear-gradient(90deg, var(--accent-2), var(--accent)); + border-radius: 99px; + transition: width 0.6s var(--ease); +} + +/* Module grid */ +.ft-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: var(--sp-4); +} +.ft-card { + display: flex; + flex-direction: column; + padding: var(--sp-5); + background: var(--surface); + border: 1px solid var(--line); + border-top: 3px solid var(--ft-color, var(--accent)); + border-radius: var(--radius-lg); + transition: transform 0.25s var(--ease), border-color 0.25s, background 0.25s; + position: relative; +} +.ft-card:hover { + transform: translateY(-4px); + background: var(--surface-2); +} +.ft-card__top { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--sp-3); +} +.ft-card__num { + font-family: var(--f-mono); + font-size: var(--s-4); + color: var(--ft-color, var(--accent)); + font-variant-numeric: tabular-nums; +} +.ft-card__check { + width: 22px; height: 22px; + border-radius: 50%; + border: 1.5px solid var(--line-strong); + display: flex; align-items: center; justify-content: center; + font-size: var(--s-0); + color: transparent; + transition: all 0.25s; +} +.ft-card--done .ft-card__check { + background: var(--ft-color, var(--accent)); + border-color: var(--ft-color, var(--accent)); + color: var(--bg); +} +.ft-card__eyebrow { + font-family: var(--f-mono); + font-size: var(--s-0); + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--muted); + margin-bottom: 6px; +} +.ft-card__title { + font-family: var(--f-display); + font-weight: 400; + font-size: var(--s-5); + line-height: 1.15; + color: var(--ink); + margin-bottom: var(--sp-3); +} +.ft-card__desc { + font-size: var(--s-1); + line-height: 1.55; + color: var(--ink-2); + flex: 1; + margin-bottom: var(--sp-4); +} +.ft-card__foot { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: var(--sp-3); + border-top: 1px solid var(--line); +} +.ft-card__mins { + font-family: var(--f-mono); + font-size: var(--s-0); + color: var(--subtle); +} +.ft-card__arrow { + font-size: var(--s-1); + color: var(--ft-color, var(--accent)); + font-weight: 500; + transition: transform 0.2s var(--ease); +} +.ft-card:hover .ft-card__arrow { transform: translateX(5px); } + +/* Mark-as-read button */ +.ft-done-btn { + font-family: var(--f-mono); + font-size: var(--s-0); + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--muted); + background: var(--surface); + border: 1px solid var(--line-strong); + border-radius: 99px; + padding: 6px 16px; + cursor: pointer; + transition: all 0.2s; +} +.ft-done-btn:hover { color: var(--ink); border-color: var(--ink-2); } +.ft-done-btn--active { + color: var(--bg); + background: var(--accent-2); + border-color: var(--accent-2); +} + +/* Module body callouts — passed through as raw HTML from markdown */ +.ft-body .callout { + display: flex; + gap: var(--sp-4); + margin: var(--sp-5) 0; + padding: var(--sp-4) var(--sp-5); + border-radius: var(--radius-lg); + background: var(--surface); + border: 1px solid var(--line); + border-left: 3px solid var(--accent); + font-size: var(--s-1); + line-height: 1.6; + align-items: flex-start; +} +.ft-body .callout > div { color: var(--ink-2); } +.ft-body .callout strong { color: var(--ink); } +.ft-body .callout__label { + flex-shrink: 0; + font-family: var(--f-mono); + font-size: 0.6875rem; + letter-spacing: 0.12em; + text-transform: uppercase; + font-weight: 700; + padding-top: 2px; + min-width: 7.5em; + color: var(--accent); +} +.ft-body .callout--huske { + border-left-color: var(--accent-2); + background: color-mix(in srgb, var(--accent-2) 7%, var(--surface)); +} +.ft-body .callout--huske .callout__label { color: var(--accent-2); } +.ft-body .callout--eksempel { + border-left-color: var(--theme-baerekraft); + background: color-mix(in srgb, var(--theme-baerekraft) 8%, var(--surface)); +} +.ft-body .callout--eksempel .callout__label { color: var(--theme-baerekraft); } +.ft-body .callout--felle { + border-left-color: var(--accent); + background: color-mix(in srgb, var(--accent) 8%, var(--surface)); +} +.ft-body .callout--felle .callout__label { color: var(--accent); } + +@media (max-width: 640px) { + .ft-body .callout { flex-direction: column; gap: var(--sp-2); } + .ft-body .callout__label { min-width: 0; } +} + +/* Home promo */ +.ft-promo { + padding: var(--sp-7) 0; + border-top: 1px solid var(--line); +} +.ft-promo__card { + display: flex; + align-items: center; + gap: var(--sp-5); + padding: var(--sp-5) var(--sp-6); + background: var(--surface); + border: 1px solid var(--line); + border-radius: var(--radius-lg); + transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s; +} +.ft-promo__card:hover { + transform: translateY(-3px); + background: var(--surface-2); + border-color: var(--line-strong); +} +.ft-promo__icon { + font-family: var(--f-display); + font-size: var(--s-8); + line-height: 1; + color: var(--accent-2); + flex-shrink: 0; +} +.ft-promo__body { flex: 1; } +.ft-promo__label { + font-family: var(--f-mono); + font-size: var(--s-0); + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--accent-2); + margin-bottom: 6px; +} +.ft-promo__title { + font-family: var(--f-display); + font-weight: 400; + font-size: var(--s-5); + color: var(--ink); + margin-bottom: 6px; +} +.ft-promo__title em { font-style: italic; color: var(--accent-2); } +.ft-promo__desc { + font-size: var(--s-1); + line-height: 1.55; + color: var(--ink-2); + max-width: 64ch; +} +.ft-promo__arrow { + font-size: var(--s-6); + color: var(--accent-2); + transition: transform 0.2s var(--ease); +} +.ft-promo__card:hover .ft-promo__arrow { transform: translateX(8px); } + +@media (max-width: 640px) { + .ft-promo__card { flex-direction: column; align-items: flex-start; gap: var(--sp-3); } + .ft-promo__arrow { align-self: flex-end; } +} diff --git a/app/index.html b/app/index.html index f93eef1..26f0c99 100644 --- a/app/index.html +++ b/app/index.html @@ -33,6 +33,10 @@ 00 Oversikt + + » + Fast-track + ! tl;dr — i farta @@ -221,6 +225,18 @@ +
+ +
»
+
+
Fast-track
+
Mye repetisjon mellom ukene? Hopp over den.
+
Hele pensum kondensert til fem moduler — hvert begrep lært én gang, med huskeregler, eksempler og eksamensfeller. Følg fremdriften din underveis.
+
+
+
+
+
!
@@ -346,6 +362,40 @@ + + + +