studio Site ↗
, page-scoped classes) ---- */ .settings-cards { display: grid; gap: clamp(14px, 1.5vw, 20px); margin-top: 4px; } .set-card { background: var(--st-card); border: 1px solid var(--st-line-soft); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: clamp(14px, 1.7vw, 20px); } .set-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--st-line-soft); margin-bottom: 16px; } .set-head__num { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--st-mute); border: 1px solid var(--st-line); border-radius: 999px; padding: 3px 9px; flex: none; margin-top: 2px; } .set-head__text { min-width: 0; flex: 1 1 18ch; } .set-head__title { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(19px, 2vw, 24px); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 4px; } .set-head__sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--st-mute); margin: 0; } .set-field { display: grid; gap: 6px; } .set-field + .set-field { margin-top: 15px; } .set-field__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .set-label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #3c3731; font-weight: 700; } .set-id { font-family: var(--f-mono); font-size: 10px; color: var(--st-mute); background: rgba(17,17,17,.05); border-radius: 4px; padding: 1px 6px; } .set-count { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--st-mute); letter-spacing: .04em; white-space: nowrap; } .set-count b { color: var(--ink); font-weight: 700; } .set-input, .set-area { width: 100%; font-family: var(--f-mono); font-size: 13px; line-height: 1.45; color: var(--ink); background: #fff; border: 1px solid var(--st-line); border-radius: var(--r-sm); padding: 10px 12px; outline: none; transition: border-color .18s ease, box-shadow .18s ease; resize: vertical; } .set-area { min-height: 92px; } .set-input:focus, .set-area:focus { border-color: rgba(139,0,0,.45); box-shadow: 0 0 0 3px rgba(139,0,0,.1); } .set-input[readonly] { background: #f6f2ea; color: #3c3731; cursor: default; } .set-row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: 10px; } .set-save { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--r-sm); background: var(--st-active); color: #fff; font-size: 13px; font-weight: 700; padding: 9px 16px; cursor: pointer; box-shadow: 0 8px 18px -14px rgba(139,0,0,.9); transition: background .18s ease, transform .18s ease, opacity .18s ease; } .set-save:hover { background: #a01111; transform: translateY(-1px); } .set-save:active { transform: none; } .set-save[disabled] { opacity: .55; cursor: not-allowed; transform: none; } .set-status { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--st-mute); } .set-status.is-ok { color: var(--green); } .set-status.is-err { color: #a01111; } .set-flag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; background: rgba(238,148,65,.18); color: #8a4a0e; white-space: nowrap; } .set-warn { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-family: var(--f-mono); font-size: 10.5px; line-height: 1.5; color: #8a4a0e; background: rgba(238,148,65,.12); border: 1px solid rgba(238,148,65,.35); border-radius: var(--r-sm); padding: 7px 10px; } .set-list { display: grid; gap: 2px; } .set-item { padding: 14px 0; border-top: 1px solid var(--st-line-soft); } .set-item:first-child { padding-top: 0; border-top: 0; } .set-empty { font-family: var(--f-mono); font-size: 11px; color: var(--st-mute); letter-spacing: .04em; padding: 8px 0; } /* ---- card 4: read-only site info ---- */ .set-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; } .set-info__k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-mute); margin: 0 0 5px; } .set-info__v { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink); margin: 0; overflow-wrap: anywhere; } .set-info__v a { border-bottom: 1px solid currentColor; color: var(--st-active); } .set-theme { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12.5px; } .set-theme .set-sw { width: 18px; height: 18px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px rgba(17,17,17,.22); background: #8b0000; } .set-specimens { display: grid; gap: 6px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--st-line-soft); } .set-specimen { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .set-specimen__name { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-mute); flex: none; width: 8.5rem; } .set-specimen__a { font-family: var(--f-display); font-size: 21px; letter-spacing: .01em; } .set-specimen__b { font-family: var(--f-body); font-size: 15px; } .set-specimen__c { font-family: var(--f-mono); font-size: 12.5px; } .set-open { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--st-line-soft); font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--st-mute); } .set-open a { color: var(--st-active); border-bottom: 1px solid currentColor; padding-bottom: 1px; } .set-skeleton { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--st-mute); padding: 22px 0; } @media (max-width: 520px) { .set-count { margin-left: 0; } .set-specimen__name { width: auto; } }
studio Site ↗

De instellingen van Bakkerij FUNK.

Google & delen, zaakgegevens, social links en waar je site technisch hangt — alles voor de site.

Je studio wordt geladen…