/* =========================================================================== Allahs navne --------------------------------------------------------------------------- Ét navn ad gangen. Navnene gled før forbi som en række kort, der kørte af sig selv. Der stod fem-seks ad gangen, og ingen af dem havde plads til mere end navnet og en linje af betydningen — resten lå i et felt under båndet. Man læste altså aldrig et navn færdigt dér, hvor det stod. Nu står der ét navn, og det får hele fladen. Det skifter af sig selv, og uret under det viser, hvor langt man er. Der var før en knap i overskriften, som foldede alle navnene ud i et gitter med et søgefelt. Den er taget af efter ejerens beslutning, og med den gik både gitteret, søgefeltet og kortene. 1 Navnet, der står 2 Uret 3 Smalle skærme 4 Uden bevægelse =========================================================================== */ /* --- 1 · Navnet, der står -------------------------------------------------- */ .allah-attributes-cards { --card-gap: clamp(.85rem, 1.2vw, 1.25rem); position: relative; } /* Scenen er tre spalter: en knap, navnet, en knap. Uret står i midterspalten under navnet, så stregen begynder præcis dér, hvor feltet begynder. Knapperne er sat med «grid-area» og ikke af rækkefølgen i koden. Derfor kan navnet stå først i koden — det er dét, en skærmlæser skal møde først — mens den forrige knap alligevel står til venstre for det på skærmen. */ .allah-attribute-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(.6rem, 1.5vw, 1.5rem); } .allah-attribute-stage > .allah-attribute-detail { grid-area: 1 / 2; } .allah-attribute-step--prev { grid-area: 1 / 1; } .allah-attribute-step--next { grid-area: 1 / 3; } .allah-attribute-stage > .allah-attribute-position { grid-area: 2 / 2; } /* Samme glas som feltet, men rundt og i lille format. De sidder ud for midten af navnet — «align-items: center» på scenen — og bliver ikke højere end feltet, uanset hvor langt navnet er. */ .allah-attribute-step { width: clamp(2.5rem, 1.1vw + 2.1rem, 3.3rem); aspect-ratio: 1; display: grid; place-items: center; padding: 0 0 .18em; border: 1px solid rgba(255, 235, 188, .24); border-radius: 50%; background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 38px rgba(1, 8, 6, .34); color: var(--allah-gold-bright); font: 400 1.6rem/1 var(--serif); cursor: pointer; backdrop-filter: blur(20px) saturate(1.35); transition: border-color .18s ease, background .18s ease, transform .18s ease; } .allah-attribute-step:hover, .allah-attribute-step:focus-visible { border-color: rgba(255, 235, 188, .5); background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06)); transform: scale(1.08); } .allah-attribute-step:active { transform: scale(.96); } /* Den danske tekst står til venstre, den arabiske form til højre — samme vej som i «Grundlaget». Rækkefølgen i skabelonen er den samme, så en skærmlæser hører det i den orden, øjet ser det. */ .allah-attribute-detail { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(15rem, .72fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; /* Den afsatte højde er sat efter det længste navn, så de fleste navne efterlader luft. Den luft deles over og under i stedet for at samle sig i bunden — så ser feltet ud, som om det er sat sådan med vilje. */ align-content: center; padding: clamp(2rem, 4vw, 3.6rem); /* Selve glasset — kant, bund, sløring — står i «allah-glass» i allah.css, som feltet også bærer. Her står kun det, der er særligt for navnene: de to spalter og den afsatte højde. */ /* Højden er sat af, ikke regnet ud af teksten. Navnene er forskellige i længde, og uden en afsat plads ville afsnittet hoppe op og ned, hver gang navnet skiftede. Målet er ikke gættet. Alle nioghalvfems felter er målt ved fem skærmbredder. Det højeste er An-Nur — Lyset — hvis vers 24:35 er det længste af dem alle: 800 px bred skærm → 422 px højt 1100 → 449 1440 → 527 1920 → 527 (spalten vokser ikke mere) Linjen herunder går gennem de tre første og flader ud ved den fjerde. På en telefon står de to spalter under hinanden — se nederst. */ min-height: clamp(26.5rem, 16.4vw + 18.2rem, 33rem); transition: opacity .16s ease, transform .16s ease; } /* Feltet toner ud og ind, når navnet skifter. */ .allah-attribute-detail.is-changing { opacity: .2; transform: translateY(4px); } .allah-attribute-detail-heading p { margin: 0; color: var(--allah-gold); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .allah-attribute-detail-heading { text-align: right; } .allah-attribute-detail-heading h3 { margin: .55rem 0; color: var(--allah-gold-bright); font: 400 clamp(3rem, 5.4vw, 5.6rem)/1.35 "Uthman Taha Naskh", "Traditional Arabic", serif; } .allah-attribute-detail-heading > span { color: #e7dfcc; font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .allah-attribute-detail-copy { max-width: 66ch; color: #cddad3; } .allah-attribute-detail-meaning { margin: 0 0 1rem; color: #fff; font: 600 clamp(1.12rem, 1.8vw, 1.45rem)/1.45 var(--serif); } .allah-attribute-detail-copy .reading { color: #cddad3; } .allah-attribute-detail-verse { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--allah-line); } /* Versene er meget forskellige i længde: 112:2 er tre ord, mens Ayat al-Kursi fylder over hundrede. Et loft og ikke en fast højde: et kort vers fylder kun sine egne linjer, så der ikke står et hul under det, og et langt får en blød afslutning i stedet for et hårdt klip. Linket under fører til versets egen side, hvor det står helt. */ .allah-attribute-detail-verse blockquote { max-height: 5.6em; overflow: hidden; margin: 0 0 .8rem; color: #edd6a6; font: 400 clamp(1.25rem, 2.1vw, 1.85rem)/1.85 "Uthman Taha Naskh", "Traditional Arabic", serif; text-align: right; -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, #000 66%, transparent 100%); } .allah-attribute-detail-verse p { margin: 0 0 .7rem; color: #b6c5bd; font-size: .92rem; line-height: 1.55; } .allah-attribute-detail-verse a, .allah-attribute-detail-verse > span { display: inline-flex; gap: .5rem; align-items: center; color: var(--allah-gold-bright); font-size: .76rem; font-weight: 800; letter-spacing: .08em; } .allah-attribute-detail-verse > span { color: #7f8d86; } .allah-attribute-detail-verse a span { display: inline-block; transition: transform .22s ease; } .allah-attribute-detail-verse a:hover, .allah-attribute-detail-verse a:focus-visible { color: #fff; } .allah-attribute-detail-verse a:hover span { transform: translateX(4px); } /* --- 2 · Uret -------------------------------------------------------------- */ /* Samme sprog som Koranens slider: nummeret, en streg, der fylder op, og antallet. Stregen viser, hvornår det næste navn kommer, så skiftet ikke overrasker midt i en sætning. js/allah-attributes.js flytter den. */ .allah-attribute-position { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; max-width: 22rem; margin: 1.6rem 0 0; align-self: start; color: var(--allah-gold); font: italic 700 .68rem/1 var(--serif); font-variant-numeric: tabular-nums; } .allah-attribute-position i { height: 1px; overflow: hidden; background: rgba(255, 255, 255, .16); } .allah-attribute-position i b { width: 100%; height: 100%; display: block; background: var(--allah-gold-bright); transform: scaleX(0); transform-origin: left; } /* --- 3 · Smalle skærme ----------------------------------------------------- */ @media (max-width: 760px) { .allah-attribute-detail { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.5rem; } .allah-attribute-detail-heading h3 { text-align: center; } .allah-attribute-detail-heading p, .allah-attribute-detail-heading > span { display: block; text-align: center; } /* Stablet bliver feltet højere. Målt på alle nioghalvfems ved 390 px er det højeste 619 px — Al-Quddus, hvis sammenhæng er den længste. */ .allah-attribute-detail { min-height: 39rem; } .allah-attribute-position { max-width: none; } /* På en telefon er der ingen plads ved siden af feltet. Så lægger navnet sig over hele bredden, og de to knapper stiller sig på hver sin side af uret nedenunder — samme tre ting, en anden rækkefølge. */ .allah-attribute-stage > .allah-attribute-detail { grid-area: 1 / 1 / auto / -1; } .allah-attribute-step--prev { grid-area: 2 / 1; } .allah-attribute-stage > .allah-attribute-position { grid-area: 2 / 2; margin: 1.3rem 0 0; } .allah-attribute-step--next { grid-area: 2 / 3; } .allah-attribute-step { margin-top: 1.1rem; } } /* --- 4 · Uden bevægelse ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .allah-attribute-detail, .allah-attribute-step { transition: none; } .allah-attribute-step:hover, .allah-attribute-step:focus-visible, .allah-attribute-step:active { transform: none; } }