Jump to content

Main Page: Difference between revisions

From the Vrienden Universe, a fictional wiki
← Older editNewer edit →

Walter61 (talk | contribs)

4 user groups
2,102 edits
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
from pathlib import Path
content = r'''__NOTOC__
<html>
<html>
<style>
<style>
.vu-page {
.vu-main {
--vu-border: var(--border-color-base, #a2a9b1);
--vu-border: var(--border-color-base, #a2a9b1);
--vu-text: var(--color-base, #202122);
--vu-text: var(--color-base, #202122);
Line 9: Line 13:
--vu-red: var(--color-destructive, #d33);
--vu-red: var(--color-destructive, #d33);
--vu-navy: #1B223D;
--vu-navy: #1B223D;
--vu-blue: #2c4265;
--vu-navy-light: #2b3d60;
--vu-blue: #78c7ff;
max-width: 1180px;
max-width: 1180px;
margin: 0 auto 32px;
margin: 0 auto 30px;
color: var(--vu-text);
color: var(--vu-text);
}
}


.vu-page,
.vu-main,
.vu-page * {
.vu-main * {
box-sizing: border-box;
box-sizing: border-box;
}
}


.vu-page a {
.vu-main a {
color: var(--vu-link);
color: var(--vu-link);
text-decoration: none;
text-decoration: none;
}
}


.vu-page a:hover {
.vu-main a:hover {
text-decoration: underline;
text-decoration: underline;
}
}


.vu-page a.new,
.vu-main a.new,
.vu-page a.new:visited {
.vu-main a.new:visited {
color: var(--vu-red) !important;
color: var(--vu-red) !important;
}
}


/* Masthead */
/* Header */


.vu-masthead {
.vu-header {
position: relative;
position: relative;
display: grid;
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
grid-template-columns: 240px minmax(0, 1fr);
min-height: 310px;
min-height: 285px;
overflow: hidden;
overflow: hidden;
border: 1px solid #3a506b;
border: 1px solid #3a506b;
background:
background: linear-gradient(118deg, #151b30 0%, #1B223D 55%, #2b3d60 100%);
linear-gradient(135deg, transparent 65%, rgba(255,255,255,0.04) 65%),
linear-gradient(115deg, var(--vu-navy), var(--vu-blue));
color: #e0f0ff;
color: #e0f0ff;
}
}


.vu-masthead::before,
.vu-header::before {
.vu-masthead::after {
content: "";
content: "";
position: absolute;
position: absolute;
width: 420px;
right: -130px;
height: 420px;
top: -210px;
border: 70px solid rgba(255,255,255,0.035);
width: 520px;
border-radius: 50%;
height: 520px;
pointer-events: none;
border: 90px solid rgba(255,255,255,0.035);
transform: rotate(18deg);
}
}


.vu-masthead::before {
.vu-header::after {
right: -230px;
content: "";
top: -250px;
position: absolute;
}
right: 0;
 
bottom: 0;
.vu-masthead::after {
width: 44%;
left: 80px;
height: 7px;
bottom: -390px;
background: var(--vu-blue);
clip-path: polygon(13px 0, 100% 0, 100% 100%, 0 100%);
}
}


.vu-emblem {
.vu-logo-panel {
position: relative;
position: relative;
z-index: 2;
z-index: 2;
Line 76: Line 80:
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
padding: 32px;
padding: 31px;
background: rgba(0,0,0,0.16);
background: linear-gradient(145deg, rgba(255,255,255,0.065), rgba(0,0,0,0.22));
border-right: 1px solid rgba(255,255,255,0.14);
border-right: 1px solid rgba(255,255,255,0.15);
}
}


.vu-emblem::after {
.vu-logo-panel::after {
content: "";
content: "";
position: absolute;
position: absolute;
right: -28px;
right: -36px;
top: 50%;
top: 50%;
width: 55px;
width: 70px;
height: 55px;
height: 70px;
background: var(--vu-navy);
background: #1B223D;
border-top: 1px solid rgba(255,255,255,0.14);
border-top: 1px solid rgba(255,255,255,0.15);
border-right: 1px solid rgba(255,255,255,0.14);
border-right: 1px solid rgba(255,255,255,0.15);
transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
}


.vu-emblem img {
.vu-logo-panel img {
position: relative;
position: relative;
z-index: 2;
z-index: 2;
Line 100: Line 104:
max-width: 175px;
max-width: 175px;
height: auto;
height: auto;
filter: drop-shadow(0 12px 15px rgba(0,0,0,0.45));
filter: drop-shadow(0 12px 16px rgba(0,0,0,0.48));
}
}


.vu-masthead-copy {
.vu-header-copy {
position: relative;
position: relative;
z-index: 2;
z-index: 2;
Line 109: Line 113:
flex-direction: column;
flex-direction: column;
justify-content: center;
justify-content: center;
padding: 42px 48px 42px 62px;
padding: 39px 45px 39px 62px;
}
}


Line 115: Line 119:
margin: 0 0 13px;
margin: 0 0 13px;
color: #fff;
color: #fff;
font-size: clamp(3rem, 7vw, 5.3rem);
font-size: clamp(3rem, 7vw, 5rem);
font-weight: 700;
font-weight: 700;
line-height: 0.95;
line-height: 0.95;
Line 121: Line 125:
}
}


.vu-lead {
.vu-subtitle {
max-width: 680px;
max-width: 700px;
margin-bottom: 22px;
margin-bottom: 20px;
color: #dbe7f5;
color: #dbe7f5;
font-size: 1.08rem;
font-size: 1.07rem;
line-height: 1.55;
line-height: 1.5;
}
}


.vu-top-links {
.vu-header-actions {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
gap: 9px;
gap: 8px;
}
}


.vu-top-link {
.vu-header-button {
display: inline-block;
display: inline-block;
padding: 9px 15px;
padding: 9px 15px;
border: 1px solid rgba(255,255,255,0.62);
border: 1px solid rgba(255,255,255,0.58);
color: #fff !important;
color: #fff !important;
font-weight: 700;
font-weight: 700;
Line 144: Line 148:
}
}


.vu-top-link:first-child {
.vu-header-button:first-child {
background: #fff;
background: #fff;
color: var(--vu-navy) !important;
color: var(--vu-navy) !important;
}
}


.vu-top-link:hover {
.vu-header-button:hover {
transform: translateY(-2px);
transform: translateY(-2px);
background: rgba(255,255,255,0.1);
background: rgba(255,255,255,0.1);
Line 155: Line 159:
}
}


.vu-top-link:first-child:hover {
.vu-header-button:first-child:hover {
background: #fff;
background: #fff;
}
/* Section headings */
.vu-section-heading {
display: flex;
align-items: center;
gap: 12px;
margin: 28px 0 15px;
}
.vu-section-heading::after {
content: "";
flex: 1;
height: 1px;
background: var(--vu-border);
}
.vu-section-heading span {
font-size: 1.45rem;
font-weight: 700;
}
}


Line 183: Line 166:


.vu-about {
.vu-about {
position: relative;
display: grid;
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
grid-template-columns: 145px minmax(0, 1fr);
margin-top: 18px;
margin-top: 15px;
overflow: hidden;
border-top: 1px solid var(--vu-border);
border-bottom: 1px solid var(--vu-border);
border-bottom: 1px solid var(--vu-border);
background: var(--vu-surface);
background: var(--vu-surface);
Line 196: Line 178:
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
min-height: 235px;
overflow: hidden;
overflow: hidden;
background: var(--vu-accent);
background: linear-gradient(135deg, var(--vu-accent) 0%, var(--vu-accent) 65%, transparent 65%);
color: var(--vu-link);
border-right: 1px solid var(--vu-border);
font-size: 4.5rem;
font-weight: 800;
letter-spacing: -0.14em;
}
}


.vu-about-mark span {
.vu-about-mark img {
transform: rotate(-90deg);
width: 95px;
opacity: 0.28;
height: auto;
opacity: 0.15;
}
}


.vu-about-copy {
.vu-about-copy {
padding: 23px 27px;
padding: 21px 25px;
border-left: 5px solid var(--vu-link);
border-left: 5px solid var(--vu-link);
}
}


.vu-about-copy h2 {
.vu-about-copy h2 {
margin: 0 0 12px;
margin: 0 0 10px;
color: var(--vu-text);
font-size: 1.45rem;
font-size: 1.45rem;
}
}


.vu-about-copy p {
.vu-about-copy p {
margin: 0 0 11px;
margin: 0 0 10px;
line-height: 1.58;
line-height: 1.56;
}
}


Line 229: Line 209:
}
}


/* Explore network */
/* Headings */


.vu-network {
.vu-heading {
position: relative;
display: grid;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 24px 0 4px;
gap: 13px;
margin: 25px 0 12px;
}
}


.vu-network::before {
.vu-heading-title {
content: "";
color: var(--vu-text);
position: absolute;
font-size: 1.45rem;
top: 51px;
font-weight: 700;
left: 7%;
}
right: 7%;
 
height: 3px;
.vu-heading-line {
background: linear-gradient(
height: 1px;
to right,
background: var(--vu-border);
transparent,
}
var(--vu-link) 10%,
 
var(--vu-link) 90%,
/* Explore */
transparent
 
);
.vu-explore {
opacity: 0.5;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--vu-border);
border-left: 1px solid var(--vu-border);
}
}


.vu-node {
.vu-explore-link {
position: relative;
position: relative;
z-index: 2;
display: grid;
display: flex;
grid-template-columns: 72px minmax(0, 1fr) 28px;
flex-direction: column;
align-items: center;
align-items: center;
text-align: center;
min-height: 94px;
padding-right: 18px;
overflow: hidden;
border-right: 1px solid var(--vu-border);
border-bottom: 1px solid var(--vu-border);
background: var(--vu-surface);
color: var(--vu-text) !important;
color: var(--vu-text) !important;
transition: background 0.15s ease, padding 0.15s ease;
}
}


.vu-node-dot {
.vu-explore-link:hover {
padding-right: 13px;
background: var(--vu-accent);
text-decoration: none !important;
}
 
.vu-explore-mark {
align-self: stretch;
display: flex;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
width: 58px;
margin-right: 17px;
height: 58px;
margin-bottom: 11px;
border: 4px solid var(--vu-surface);
border-radius: 50%;
background: var(--vu-navy);
background: var(--vu-navy);
color: #fff;
color: #fff;
font-size: 0.82rem;
font-size: 1.35rem;
font-weight: 700;
font-weight: 800;
box-shadow: 0 0 0 2px var(--vu-link);
clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%);
transition: transform 0.15s ease, background 0.15s ease;
}
 
.vu-explore-copy {
position: relative;
z-index: 2;
}
}


.vu-node:hover {
.vu-explore-title {
text-decoration: none !important;
display: block;
margin-bottom: 4px;
color: var(--vu-link);
font-size: 1.08rem;
font-weight: 700;
}
}


.vu-node:hover .vu-node-dot {
.vu-explore-description {
transform: scale(1.08);
display: block;
background: var(--vu-blue);
color: var(--vu-text);
font-size: 0.9rem;
line-height: 1.38;
}
}


.vu-node-title {
.vu-explore-arrow {
position: relative;
z-index: 2;
color: var(--vu-link);
color: var(--vu-link);
font-size: 1.55rem;
font-weight: 700;
font-weight: 700;
}
.vu-node-text {
margin-top: 5px;
font-size: 0.82rem;
line-height: 1.35;
}
}


/* Featured */
/* Featured */


.vu-feature-row {
.vu-feature-layout {
display: grid;
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.65fr);
gap: 16px;
gap: 14px;
}
}


.vu-featured {
.vu-feature {
position: relative;
position: relative;
min-height: 210px;
min-height: 245px;
padding: 24px 30px 24px 25px;
padding: 25px 31px;
overflow: hidden;
overflow: hidden;
border-left: 6px solid var(--vu-link);
border-left: 6px solid var(--vu-blue);
background: var(--vu-surface);
background: linear-gradient(118deg, var(--vu-surface) 0%, var(--vu-surface) 76%, var(--vu-accent) 76%);
clip-path: polygon(
0 0,
calc(100% - 42px) 0,
100% 42px,
100% 100%,
0 100%
);
}
}


.vu-featured::after {
.vu-feature::after {
content: "";
content: "";
position: absolute;
position: absolute;
top: 0;
top: 0;
right: 0;
right: 0;
width: 42px;
width: 52px;
height: 42px;
height: 52px;
background: var(--vu-accent);
background: var(--vu-navy-light);
border-left: 1px solid var(--vu-border);
clip-path: polygon(100% 0, 100% 100%, 0 0);
border-bottom: 1px solid var(--vu-border);
opacity: 0.9;
}
 
.vu-feature-watermark {
position: absolute;
right: 22px;
bottom: -22px;
width: 150px;
opacity: 0.055;
pointer-events: none;
}
}


.vu-featured-label {
.vu-feature-label {
margin-bottom: 12px;
position: relative;
z-index: 2;
margin-bottom: 9px;
color: var(--vu-link);
color: var(--vu-link);
font-size: 0.78rem;
font-size: 0.76rem;
font-weight: 700;
font-weight: 700;
letter-spacing: 0.14em;
letter-spacing: 0.15em;
text-transform: uppercase;
text-transform: uppercase;
}
}


.vu-featured-content {
.vu-feature h2 {
line-height: 1.55;
position: relative;
z-index: 2;
margin: 0 0 11px;
color: var(--vu-text);
font-size: 1.52rem;
}
 
.vu-feature p {
position: relative;
z-index: 2;
max-width: 760px;
margin: 0 0 10px;
line-height: 1.52;
}
 
.vu-feature-link {
position: relative;
z-index: 2;
display: inline-block;
margin-top: 4px;
padding: 8px 14px;
border-left: 4px solid var(--vu-link);
background: var(--vu-accent);
color: var(--vu-link) !important;
font-weight: 700;
}
}


.vu-featured-loading {
.vu-feature-link:hover {
color: #72777d;
text-decoration: none !important;
}
}


/* Browse control strip */
/* Browse */


.vu-browse {
.vu-browse {
position: relative;
position: relative;
padding: 22px;
padding: 21px;
overflow: hidden;
overflow: hidden;
background: var(--vu-navy);
background: linear-gradient(145deg, var(--vu-navy) 0%, var(--vu-navy) 72%, var(--vu-navy-light) 72%);
color: #e0f0ff;
color: #e0f0ff;
}
}


.vu-browse::before {
.vu-browse-watermark {
content: "VU";
position: absolute;
position: absolute;
right: -15px;
right: -14px;
bottom: -42px;
bottom: -24px;
color: rgba(255,255,255,0.035);
width: 150px;
font-size: 9rem;
opacity: 0.045;
font-weight: 800;
pointer-events: none;
letter-spacing: -0.12em;
}
}


Line 381: Line 405:
z-index: 2;
z-index: 2;
margin: 0 0 13px;
margin: 0 0 13px;
padding-bottom: 9px;
border-bottom: 1px solid rgba(255,255,255,0.28);
color: #fff;
color: #fff;
font-size: 1.35rem;
font-size: 1.35rem;
}
}


.vu-browse-links {
.vu-browse-buttons {
position: relative;
position: relative;
z-index: 2;
z-index: 2;
Line 393: Line 419:
}
}


.vu-browse-link {
.vu-browse-button {
display: block;
display: block;
padding: 9px 11px;
padding: 10px 11px;
border-left: 3px solid #88ccff;
border-left: 3px solid var(--vu-blue);
background: rgba(255,255,255,0.07);
background: rgba(255,255,255,0.08);
color: #e0f0ff !important;
color: #e0f0ff !important;
font-weight: 650;
font-weight: 650;
transition: background 0.15s ease, padding 0.15s ease;
}
}


.vu-browse-link:hover {
.vu-browse-button:hover {
background: rgba(255,255,255,0.13);
padding-left: 14px;
background: rgba(255,255,255,0.15);
text-decoration: none !important;
text-decoration: none !important;
}
/* People slideshow */
.vu-people {
position: relative;
overflow: hidden;
border: 1px solid var(--vu-border);
background: var(--vu-surface);
}
.vu-people::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 7px;
background: linear-gradient(90deg, var(--vu-blue), var(--vu-navy-light));
z-index: 3;
}
.vu-people-stage {
display: grid;
grid-template-columns: minmax(290px, 38%) minmax(0, 1fr);
min-height: 390px;
}
.vu-person-image {
position: relative;
overflow: hidden;
background: var(--vu-navy);
}
.vu-person-image::after {
content: "";
position: absolute;
right: -1px;
top: 0;
width: 72px;
height: 100%;
background: var(--vu-surface);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
z-index: 2;
}
.vu-person-image img {
width: 100%;
height: 100%;
min-height: 390px;
object-fit: cover;
display: block;
transition: opacity 0.25s ease, transform 0.5s ease;
}
.vu-people.is-changing .vu-person-image img {
opacity: 0.35;
transform: scale(1.03);
}
.vu-person-copy {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 42px 50px 42px 34px;
overflow: hidden;
}
.vu-person-copy::after {
content: "";
position: absolute;
right: -45px;
bottom: -55px;
width: 220px;
height: 220px;
border: 42px solid var(--vu-accent);
transform: rotate(18deg);
opacity: 0.8;
}
.vu-person-kicker {
position: relative;
z-index: 2;
margin-bottom: 9px;
color: var(--vu-link);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.vu-person-title {
position: relative;
z-index: 2;
margin: 0 0 13px;
color: var(--vu-text);
font-size: clamp(1.8rem, 4vw, 2.8rem);
line-height: 1.08;
}
.vu-person-extract {
position: relative;
z-index: 2;
max-width: 720px;
margin: 0 0 18px;
font-size: 1rem;
line-height: 1.62;
}
.vu-person-open {
position: relative;
z-index: 2;
align-self: flex-start;
display: inline-block;
padding: 9px 14px;
border-left: 4px solid var(--vu-link);
background: var(--vu-accent);
color: var(--vu-link) !important;
font-weight: 700;
}
.vu-person-open:hover {
text-decoration: none !important;
}
.vu-people-controls {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 11px 14px;
border-top: 1px solid var(--vu-border);
background: var(--vu-accent);
}
.vu-slide-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 36px;
padding: 0 12px;
border: 1px solid var(--vu-border);
background: var(--vu-surface);
color: var(--vu-link);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.vu-slide-button:hover,
.vu-slide-button:focus {
border-color: var(--vu-link);
outline: none;
}
.vu-slide-progress {
position: relative;
height: 4px;
margin: 0 8px;
overflow: hidden;
background: var(--vu-border);
}
.vu-slide-progress-bar {
width: 0;
height: 100%;
background: var(--vu-link);
}
.vu-people.is-playing .vu-slide-progress-bar {
animation: vu-slide-progress 9s linear forwards;
}
.vu-slide-count {
min-width: 62px;
text-align: right;
color: var(--vu-text);
font-size: 0.88rem;
font-weight: 700;
}
.vu-people-status {
position: absolute;
left: 15px;
top: 15px;
z-index: 5;
padding: 7px 10px;
background: rgba(27,34,61,0.88);
color: #fff;
font-size: 0.82rem;
}
.vu-people-status[hidden] {
display: none;
}
@keyframes vu-slide-progress {
from { width: 0; }
to { width: 100%; }
}
}


Line 411: Line 640:
.vu-guide {
.vu-guide {
display: grid;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
border-top: 1px solid var(--vu-border);
border-top: 1px solid var(--vu-border);
border-bottom: 1px solid var(--vu-border);
border-bottom: 1px solid var(--vu-border);
Line 417: Line 646:


.vu-guide-copy {
.vu-guide-copy {
padding: 23px 27px 23px 0;
padding: 21px 25px 21px 0;
}
}


.vu-guide-copy h2,
.vu-guide-copy h2,
.vu-families h2 {
.vu-family-area h2 {
margin: 0 0 11px;
margin: 0 0 10px;
font-size: 1.35rem;
color: var(--vu-text);
font-size: 1.3rem;
}
}


.vu-guide-copy p {
.vu-guide-copy p {
margin: 0 0 10px;
margin: 0 0 10px;
line-height: 1.56;
line-height: 1.53;
}
}


Line 435: Line 665:
}
}


.vu-families {
.vu-route-buttons {
padding: 23px 0 23px 27px;
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 13px;
}
 
.vu-route-button {
display: inline-block;
padding: 8px 11px;
border-bottom: 3px solid var(--vu-link);
background: var(--vu-accent);
color: var(--vu-link) !important;
font-weight: 650;
}
 
.vu-route-button:hover {
text-decoration: none !important;
transform: translateY(-1px);
}
 
.vu-family-area {
padding: 21px 0 21px 25px;
border-left: 1px solid var(--vu-border);
border-left: 1px solid var(--vu-border);
}
}


.vu-family-list {
.vu-family-links {
position: relative;
display: grid;
display: grid;
gap: 8px;
gap: 6px;
padding-left: 18px;
}
 
.vu-family-list::before {
content: "";
position: absolute;
left: 4px;
top: 7px;
bottom: 7px;
width: 2px;
background: var(--vu-link);
opacity: 0.45;
}
}


.vu-family-link {
.vu-family-link {
position: relative;
position: relative;
display: block;
display: grid;
padding: 7px 10px;
grid-template-columns: 8px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 8px 11px;
background: var(--vu-accent);
background: var(--vu-accent);
color: var(--vu-link) !important;
color: var(--vu-link) !important;
font-weight: 650;
font-weight: 650;
transition: padding 0.15s ease;
}
}


.vu-family-link::before {
.vu-family-link::before {
content: "";
content: "";
position: absolute;
width: 8px;
left: -18px;
height: 100%;
top: 50%;
width: 10px;
height: 10px;
border: 2px solid var(--vu-surface);
border-radius: 50%;
background: var(--vu-link);
background: var(--vu-link);
transform: translateY(-50%);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
}


.vu-family-link:hover {
.vu-family-link:hover {
padding-left: 14px;
text-decoration: none !important;
text-decoration: none !important;
transform: translateX(2px);
}
}


/* Footer information */
/* Footer */


.vu-information {
.vu-information {
Line 491: Line 728:
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
gap: 1px;
margin-top: 18px;
margin-top: 15px;
border: 1px solid var(--vu-border);
background: var(--vu-border);
background: var(--vu-border);
border: 1px solid var(--vu-border);
}
}


.vu-information section {
.vu-information section {
padding: 19px 22px;
padding: 18px 21px;
background: var(--vu-surface);
background: var(--vu-surface);
}
}


.vu-information h2 {
.vu-information h2 {
margin: 0 0 8px;
margin: 0 0 7px;
font-size: 1.25rem;
color: var(--vu-text);
font-size: 1.2rem;
}
}


Line 513: Line 751:
.vu-notice {
.vu-notice {
display: grid;
display: grid;
grid-template-columns: 165px minmax(0, 1fr);
grid-template-columns: 155px minmax(0, 1fr);
margin-top: 14px;
margin-top: 12px;
border: 1px solid #ab7f2a;
border: 1px solid #ab7f2a;
background: #fef6e7;
background: #fef6e7;
Line 528: Line 766:
}
}


.vu-notice-text {
.vu-notice-copy {
padding: 15px 18px;
padding: 15px 18px;
color: var(--vu-text);
line-height: 1.5;
line-height: 1.5;
}
}


/* Red links */
/* Missing pages */


.vu-page a.new,
.vu-main a.new,
.vu-page a.new:visited {
.vu-main a.new:visited {
color: var(--vu-red) !important;
color: var(--vu-red) !important;
}
}


.vu-page .vu-top-link.new {
.vu-main .vu-header-button.new {
border-color: var(--vu-red);
border-color: var(--vu-red);
color: #ff8a8a !important;
color: #ff8b8b !important;
}
}


.vu-page .vu-node.new .vu-node-dot {
.vu-main .vu-explore-link.new .vu-explore-mark {
background: var(--vu-red);
background: var(--vu-red);
box-shadow: 0 0 0 2px var(--vu-red);
}
}


.vu-page .vu-node.new .vu-node-title,
.vu-main .vu-explore-link.new .vu-explore-title,
.vu-page .vu-family-link.new {
.vu-main .vu-family-link.new,
.vu-main .vu-route-button.new,
.vu-main .vu-feature-link.new {
color: var(--vu-red) !important;
color: var(--vu-red) !important;
}
}
Line 557: Line 797:
/* Dark mode */
/* Dark mode */


html.skin-theme-clientpref-night .vu-page,
html.skin-theme-clientpref-night .vu-main,
body.skin-theme-clientpref-night .vu-page {
body.skin-theme-clientpref-night .vu-main {
--vu-border: #444;
--vu-border: #444;
--vu-text: #d0d0d0;
--vu-text: #d0d0d0;
Line 573: Line 813:


@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .vu-page {
html.skin-theme-clientpref-os .vu-main {
--vu-border: #444;
--vu-border: #444;
--vu-text: #d0d0d0;
--vu-text: #d0d0d0;
Line 590: Line 830:


@media (max-width: 900px) {
@media (max-width: 900px) {
.vu-masthead {
.vu-header {
grid-template-columns: 190px minmax(0, 1fr);
grid-template-columns: 190px minmax(0, 1fr);
}
}


.vu-masthead-copy {
.vu-header-copy {
padding: 34px 32px 34px 48px;
padding: 34px 31px 34px 48px;
}
}


.vu-network {
.vu-feature-layout,
grid-template-columns: repeat(3, minmax(0, 1fr));
.vu-guide {
row-gap: 24px;
grid-template-columns: 1fr;
}
}


.vu-network::before {
.vu-people-stage {
display: none;
grid-template-columns: 42% minmax(0, 1fr);
}
}


.vu-feature-row,
.vu-person-copy {
.vu-guide {
padding: 36px 34px 36px 24px;
grid-template-columns: 1fr;
}
}


.vu-families {
.vu-family-area {
padding: 21px 0;
padding: 20px 0;
border-top: 1px solid var(--vu-border);
border-top: 1px solid var(--vu-border);
border-left: 0;
border-left: 0;
Line 624: Line 863:


@media (max-width: 650px) {
@media (max-width: 650px) {
.vu-masthead {
.vu-header {
grid-template-columns: 1fr;
grid-template-columns: 1fr;
text-align: center;
text-align: center;
}
}


.vu-emblem {
.vu-logo-panel {
min-height: 150px;
min-height: 145px;
border-right: 0;
border-right: 0;
border-bottom: 1px solid rgba(255,255,255,0.14);
border-bottom: 1px solid rgba(255,255,255,0.15);
}
}


.vu-emblem::after {
.vu-logo-panel::after {
display: none;
display: none;
}
}


.vu-emblem img {
.vu-logo-panel img {
max-width: 120px;
max-width: 120px;
}
}


.vu-masthead-copy {
.vu-header-copy {
padding: 28px 20px;
padding: 27px 20px 31px;
}
}


.vu-top-links {
.vu-header-actions,
.vu-route-buttons {
justify-content: center;
justify-content: center;
}
}
Line 656: Line 896:


.vu-about-mark {
.vu-about-mark {
min-height: 70px;
display: none;
font-size: 2.8rem;
}
 
.vu-about-mark span {
transform: none;
}
}


Line 669: Line 904:
}
}


.vu-network {
.vu-explore {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: 1fr;
}
 
.vu-people-stage {
grid-template-columns: 1fr;
}
 
.vu-person-image {
height: 300px;
}
 
.vu-person-image::after {
display: none;
}
 
.vu-person-image img {
min-height: 300px;
}
 
.vu-person-copy {
padding: 28px 22px 32px;
}
 
.vu-people-controls {
grid-template-columns: auto auto minmax(50px, 1fr) auto;
}
}


Line 677: Line 936:
grid-template-columns: 1fr;
grid-template-columns: 1fr;
}
}
}


.vu-browse-links {
@media (max-width: 430px) {
.vu-title {
font-size: 2.75rem;
}
 
.vu-header-button {
width: 100%;
text-align: center;
}
 
.vu-browse-buttons {
grid-template-columns: 1fr;
grid-template-columns: 1fr;
}
.vu-explore-link {
grid-template-columns: 62px minmax(0, 1fr) 22px;
}
}
}
}
</style>
</style>


<div class="vu-page">
<div class="vu-main">


<header class="vu-masthead">
<header class="vu-header">
<div class="vu-emblem">
<div class="vu-logo-panel">
<img src="/wiki/Special:Redirect/file/Vu-logo.png" alt="Vrienden Universe logo">
<img src="/wiki/Special:Redirect/file/Vu-logo.png" alt="Vrienden Universe logo">
</div>
</div>


<div class="vu-masthead-copy">
<div class="vu-header-copy">
<div class="vu-title">Vrienden Universe</div>
<div class="vu-title">Vrienden Universe</div>


<div class="vu-lead">
<div class="vu-subtitle">
People, families, locations, organizations and events documented across one connected history.
The history of De Vrienden and the wider world recorded around them.
</div>
</div>


<nav class="vu-top-links">
<div class="vu-header-actions">
<a class="vu-top-link" data-title="Timeline" href="/wiki/Timeline">Timeline</a>
<a class="vu-header-button" data-wiki-title="Timeline" href="/wiki/Timeline">Timeline</a>
<a class="vu-top-link" href="/wiki/Special:Random">Random page</a>
<a class="vu-header-button" href="/wiki/Special:Random">Random page</a>
<a class="vu-top-link" href="/wiki/Special:RecentChanges">Recent changes</a>
<a class="vu-header-button" href="/wiki/Special:RecentChanges">Recent changes</a>
</nav>
</div>
</div>
</div>
</header>
</header>


<section class="vu-about">
<section class="vu-about">
<div class="vu-about-mark"><span>VU</span></div>
<div class="vu-about-mark">
<img src="/wiki/Special:Redirect/file/Vu-logo.png" alt="">
</div>


<div class="vu-about-copy">
<div class="vu-about-copy">
Line 714: Line 990:
<p>
<p>
The <strong>Vrienden Universe</strong> began in 2019 as
The <strong>Vrienden Universe</strong> began in 2019 as
<a data-title="De Lijers De Vrienden" href="/wiki/De_Lijers_De_Vrienden"><strong>De Lijers De Vrienden</strong></a>,
<a data-wiki-title="De Lijers De Vrienden" href="/wiki/De_Lijers_De_Vrienden"><strong>De Lijers De Vrienden</strong></a>,
a project about <a data-title="De Vrienden" href="/wiki/De_Vrienden">De Vrienden</a>.
a project about <a data-wiki-title="De Vrienden" href="/wiki/De_Vrienden">De Vrienden</a>.
It expanded as related people, families, locations, organizations and events were documented.
The project expanded as related pages were added and became a single encyclopedia covering the wider history around its original subject.
</p>
 
<p>
The wiki now contains hundreds of connected pages. Articles share dates, relationships,
places and events, allowing readers to move from one subject into the wider history.
</p>
</p>


<p>
<p>
The site has been developed over several years to preserve and present the complete
The wiki now contains hundreds of connected pages developed over several years.
history and stories recorded across the wiki.
Information established on one page is carried into related articles, allowing readers to follow the same history throughout the site.
</p>
</p>
</div>
</div>
</section>
</section>


<div class="vu-section-heading"><span>Explore</span></div>
<div class="vu-heading">
<div class="vu-heading-title">Explore</div>
<div class="vu-heading-line"></div>
</div>


<nav class="vu-network">
<nav class="vu-explore">
<a class="vu-node" data-title="Category:People" href="/wiki/Category:People">
<a class="vu-explore-link" data-wiki-title="Category:People" href="/wiki/Category:People">
<span class="vu-node-dot">01</span>
<span class="vu-explore-mark">P</span>
<span class="vu-node-title">People</span>
<span class="vu-explore-copy">
<span class="vu-node-text">Biographies and personal histories</span>
<span class="vu-explore-title">People</span>
<span class="vu-explore-description">Biographies recorded across the wiki.</span>
</span>
<span class="vu-explore-arrow">›</span>
</a>
</a>


<a class="vu-node" data-title="Category:Locations" href="/wiki/Category:Locations">
<a class="vu-explore-link" data-wiki-title="Category:Locations" href="/wiki/Category:Locations">
<span class="vu-node-dot">02</span>
<span class="vu-explore-mark">L</span>
<span class="vu-node-title">Locations</span>
<span class="vu-explore-copy">
<span class="vu-node-text">Countries, cities and other places</span>
<span class="vu-explore-title">Locations</span>
<span class="vu-explore-description">Places documented throughout the history.</span>
</span>
<span class="vu-explore-arrow">›</span>
</a>
</a>


<a class="vu-node" data-title="Category:Families" href="/wiki/Category:Families">
<a class="vu-explore-link" data-wiki-title="Category:Families" href="/wiki/Category:Families">
<span class="vu-node-dot">03</span>
<span class="vu-explore-mark">F</span>
<span class="vu-node-title">Families</span>
<span class="vu-explore-copy">
<span class="vu-node-text">Family lines and relationships</span>
<span class="vu-explore-title">Families</span>
<span class="vu-explore-description">Family lines and their members.</span>
</span>
<span class="vu-explore-arrow">›</span>
</a>
</a>


<a class="vu-node" data-title="Category:Organizations" href="/wiki/Category:Organizations">
<a class="vu-explore-link" data-wiki-title="Category:Organizations" href="/wiki/Category:Organizations">
<span class="vu-node-dot">04</span>
<span class="vu-explore-mark">O</span>
<span class="vu-node-title">Organizations</span>
<span class="vu-explore-copy">
<span class="vu-node-text">Governments, companies and groups</span>
<span class="vu-explore-title">Organizations</span>
<span class="vu-explore-description">Institutions and organized groups.</span>
</span>
<span class="vu-explore-arrow">›</span>
</a>
</a>


<a class="vu-node" data-title="Category:Events" href="/wiki/Category:Events">
<a class="vu-explore-link" data-wiki-title="Category:Events" href="/wiki/Category:Events">
<span class="vu-node-dot">05</span>
<span class="vu-explore-mark">E</span>
<span class="vu-node-title">Events</span>
<span class="vu-explore-copy">
<span class="vu-node-text">Political, military and social events</span>
<span class="vu-explore-title">Events</span>
<span class="vu-explore-description">Events recorded throughout the history.</span>
</span>
<span class="vu-explore-arrow">›</span>
</a>
</a>


<a class="vu-node" data-title="Category:Eras" href="/wiki/Category:Eras">
<a class="vu-explore-link" data-wiki-title="Category:Eras" href="/wiki/Category:Eras">
<span class="vu-node-dot">06</span>
<span class="vu-explore-mark">H</span>
<span class="vu-node-title">Eras</span>
<span class="vu-explore-copy">
<span class="vu-node-text">Historical periods used by the wiki</span>
<span class="vu-explore-title">Eras</span>
<span class="vu-explore-description">The historical periods used by the wiki.</span>
</span>
<span class="vu-explore-arrow">›</span>
</a>
</a>
</nav>
</nav>


<div class="vu-section-heading"><span>Featured and browse</span></div>
<div class="vu-heading">
<div class="vu-heading-title">Featured and browse</div>
<div class="vu-heading-line"></div>
</div>
 
<div class="vu-feature-layout">
<section class="vu-feature">
<img class="vu-feature-watermark" src="/wiki/Special:Redirect/file/Vu-logo.png" alt="">
 
<div class="vu-feature-label">Featured page</div>


<div class="vu-feature-row">
<h2>
<section class="vu-featured">
<a data-wiki-title="Reichsministerium für Bergbau und Rohstoffe" href="/wiki/Reichsministerium_f%C3%BCr_Bergbau_und_Rohstoffe">
<div class="vu-featured-label">Featured page</div>
Reichsministerium für Bergbau und Rohstoffe
</a>
</h2>


<div id="vu-featured-content" class="vu-featured-content">
<p>
<div class="vu-featured-loading">Loading featured page…</div>
The Reichsministerium für Bergbau und Rohstoffe was a central ministry of the
</div>
<a data-wiki-title="Government of the Tanoa Einsatzgruppen" href="/wiki/Government_of_the_Tanoa_Einsatzgruppen">Government of the Tanoa Einsatzgruppen</a>.
It administered mining and the state supply of raw materials.
</p>
 
<p>
The ministry supported the command economy of
<a data-wiki-title="Tanoa" href="/wiki/Tanoa">Tanoa</a>
and supplied the regime's industrial system.
</p>
 
<a class="vu-feature-link" data-wiki-title="Reichsministerium für Bergbau und Rohstoffe" href="/wiki/Reichsministerium_f%C3%BCr_Bergbau_und_Rohstoffe">
Open page
</a>
</section>
</section>


<nav class="vu-browse">
<nav class="vu-browse">
<img class="vu-browse-watermark" src="/wiki/Special:Redirect/file/Vu-logo.png" alt="">
<h2>Browse</h2>
<h2>Browse</h2>


<div class="vu-browse-links">
<div class="vu-browse-buttons">
<a class="vu-browse-link" href="/wiki/Special:AllPages">All pages</a>
<a class="vu-browse-button" href="/wiki/Special:AllPages">All pages</a>
<a class="vu-browse-link" href="/wiki/Special:Categories">Categories</a>
<a class="vu-browse-button" href="/wiki/Special:Categories">Categories</a>
<a class="vu-browse-link" href="/wiki/Special:NewPages">New pages</a>
<a class="vu-browse-button" href="/wiki/Special:NewPages">New pages</a>
<a class="vu-browse-link" href="/wiki/Special:RecentChanges">Recent changes</a>
<a class="vu-browse-button" href="/wiki/Special:RecentChanges">Recent changes</a>
<a class="vu-browse-link" href="/wiki/Special:Random">Random page</a>
<a class="vu-browse-button" href="/wiki/Special:Random">Random page</a>
<a class="vu-browse-link" href="/wiki/Special:SpecialPages">Special pages</a>
<a class="vu-browse-button" href="/wiki/Special:SpecialPages">Special pages</a>
</div>
</div>
</nav>
</nav>
</div>
</div>


<div class="vu-section-heading"><span>How to use this wiki</span></div>
<div class="vu-heading">
<div class="vu-heading-title">People</div>
<div class="vu-heading-line"></div>
</div>
 
<section class="vu-people" id="vu-people-slider" aria-label="People slideshow">
<div class="vu-people-status" id="vu-people-status">Loading random biographies…</div>
 
<div class="vu-people-stage">
<div class="vu-person-image">
<img
id="vu-person-image"
src="/wiki/Special:Redirect/file/ToonioNoord.jpg"
alt="Toonio Noord">
</div>
 
<div class="vu-person-copy">
<div class="vu-person-kicker">From Category:People</div>
 
<h2 class="vu-person-title" id="vu-person-title">Toonio Noord</h2>
 
<p class="vu-person-extract" id="vu-person-extract">
Toonio Noord, born 4 April 1969, is a Dutch registration official and former security guard from Vriendendam. He works for the Stichting Noord Registratiebureau and is a member of the Noord family.
</p>
 
<a
class="vu-person-open"
id="vu-person-link"
href="/wiki/Toonio_Noord">
Open biography
</a>
</div>
</div>
 
<div class="vu-people-controls">
<button class="vu-slide-button" id="vu-person-prev" type="button" aria-label="Previous person">‹</button>
<button class="vu-slide-button" id="vu-person-toggle" type="button" aria-label="Pause slideshow">Pause</button>
 
<div class="vu-slide-progress" aria-hidden="true">
<div class="vu-slide-progress-bar"></div>
</div>
 
<div class="vu-slide-count" id="vu-person-count">1 / 1</div>
 
<button class="vu-slide-button" id="vu-person-next" type="button" aria-label="Next person">›</button>
</div>
</section>
 
<div class="vu-heading">
<div class="vu-heading-title">How to use this wiki</div>
<div class="vu-heading-line"></div>
</div>


<section class="vu-guide">
<section class="vu-guide">
<div class="vu-guide-copy">
<div class="vu-guide-copy">
<h2>Start with a subject</h2>
<h2>Choose a starting point</h2>


<p>
<p>
Most pages connect to related people, families, organizations, locations and events.
Most articles link directly to the subjects needed to continue through the history.
Readers can begin with a broad subject and continue through the links inside each article.
Readers can begin with <a data-wiki-title="De Vrienden" href="/wiki/De_Vrienden">De Vrienden</a>
or select a broader section above.
</p>
</p>


<p>
<p>
<a data-title="De Vrienden" href="/wiki/De_Vrienden">De Vrienden</a>
The principal family pages provide the main route from De Vrienden into family history.
was the original subject of the project. Its pages lead into the principal families
Index pages provide access to the rest of the site.
and wider history documented across the wiki.
</p>
</p>


<p>
<div class="vu-route-buttons">
The <a data-title="Timeline" href="/wiki/Timeline">Timeline</a>,
<a class="vu-route-button" data-wiki-title="Timeline" href="/wiki/Timeline">Timeline</a>
<a data-title="Factions" href="/wiki/Factions">Factions</a> and
<a class="vu-route-button" data-wiki-title="Factions" href="/wiki/Factions">Factions</a>
<a data-title="List of organizations" href="/wiki/List_of_organizations">List of organizations</a>
<a class="vu-route-button" data-wiki-title="List of organizations" href="/wiki/List_of_organizations">Organizations</a>
provide broader routes through the site.
</div>
</p>
</div>
</div>


<div class="vu-families">
<div class="vu-family-area">
<h2>Principal families</h2>
<h2>Principal families</h2>


<div class="vu-family-list">
<div class="vu-family-links">
<a class="vu-family-link" data-title="Noord family" href="/wiki/Noord_family">Noord family</a>
<a class="vu-family-link" data-wiki-title="Noord family" href="/wiki/Noord_family">Noord family</a>
<a class="vu-family-link" data-title="Paap family" href="/wiki/Paap_family">Paap family</a>
<a class="vu-family-link" data-wiki-title="Paap family" href="/wiki/Paap_family">Paap family</a>
<a class="vu-family-link" data-title="Van Hetten family" href="/wiki/Van_Hetten_family">Van Hetten family</a>
<a class="vu-family-link" data-wiki-title="Van Hetten family" href="/wiki/Van_Hetten_family">Van Hetten family</a>
<a class="vu-family-link" data-title="Hoos family" href="/wiki/Hoos_family">Hoos family</a>
<a class="vu-family-link" data-wiki-title="Hoos family" href="/wiki/Hoos_family">Hoos family</a>
<a class="vu-family-link" data-title="Schroeter family" href="/wiki/Schroeter_family">Schroeter family</a>
<a class="vu-family-link" data-wiki-title="Schroeter family" href="/wiki/Schroeter_family">Schroeter family</a>
</div>
</div>
</div>
</div>
Line 839: Line 1,206:


<p>
<p>
Information about contributions and the purpose of the site is available on the
Information about contributing is available on the
<a data-title="Vrienden Universe:Community" href="/wiki/Vrienden_Universe:Community">community page</a>.
<a data-wiki-title="Vrienden Universe:Community" href="/wiki/Vrienden_Universe:Community">community page</a>.
</p>
</p>
</section>
</section>
Line 848: Line 1,215:


<p>
<p>
Information about the content and scope of the site is available in the
Information about the scope of the site is available in the
<a data-title="Vrienden Universe:General disclaimer" href="/wiki/Vrienden_Universe:General_disclaimer">disclaimer</a>.
<a data-wiki-title="Vrienden Universe:General disclaimer" href="/wiki/Vrienden_Universe:General_disclaimer">disclaimer</a>.
</p>
</p>
</section>
</section>
Line 857: Line 1,224:
<div class="vu-notice-title">Content notice</div>
<div class="vu-notice-title">Content notice</div>


<div class="vu-notice-text">
<div class="vu-notice-copy">
This wiki contains material intended for mature audiences. Some pages include violence,
This wiki contains material intended for mature audiences.
abuse, exploitation and other disturbing subjects. Reader discretion is advised.
Some pages contain disturbing subject matter. Reader discretion is advised.
</div>
</div>
</div>
</div>
Line 867: Line 1,234:
<script>
<script>
(function () {
(function () {
if (!window.mw || !mw.loader) {
"use strict";
return;
 
function ready(callback) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", callback);
} else {
callback();
}
}
}


mw.loader.using(["mediawiki.api", "mediawiki.util"]).then(function () {
ready(function () {
var api = new mw.Api();
var root = document.querySelector(".vu-main");
var root = document.querySelector(".vu-page");


if (!root) {
if (!root || !window.fetch) {
return;
return;
}
}


var links = Array.prototype.slice.call(
var scriptPath = window.mw && mw.config
root.querySelectorAll("a[data-title]")
? mw.config.get("wgScriptPath")
: "/wiki";
 
var articlePath = window.mw && mw.config
? mw.config.get("wgArticlePath")
: "/wiki/$1";
 
var apiUrl = scriptPath + "/api.php";
var fallbackImage = "/wiki/Special:Redirect/file/Vu-logo.png";
 
function wikiUrl(title) {
if (window.mw && mw.util) {
return mw.util.getUrl(title);
}
 
return articlePath.replace(
"$1",
encodeURIComponent(title.replace(/ /g, "_"))
);
}
 
function api(parameters) {
var search = new URLSearchParams(parameters);
return fetch(apiUrl + "?" + search.toString(), {
credentials: "same-origin"
}).then(function (response) {
if (!response.ok) {
throw new Error("API request failed");
}
return response.json();
});
}
 
/* Preserve normal red-link behavior for HTML anchors. */
 
var staticLinks = Array.prototype.slice.call(
root.querySelectorAll("a[data-wiki-title]")
);
);


var titles = links
var staticTitles = staticLinks
.map(function (link) {
.map(function (link) {
return link.getAttribute("data-title");
return link.getAttribute("data-wiki-title");
})
})
.filter(function (title, index, allTitles) {
.filter(function (title, index, allTitles) {
Line 891: Line 1,299:
});
});


for (var i = 0; i < titles.length; i += 50) {
function markMissingLinks() {
(function (batch) {
if (!staticTitles.length) {
api.get({
return;
action: "query",
}
titles: batch.join("|"),
 
formatversion: 2
api({
}).then(function (data) {
action: "query",
var missing = {};
format: "json",
formatversion: "2",
titles: staticTitles.join("|")
}).then(function (data) {
var missing = {};
 
if (data.query && data.query.pages) {
data.query.pages.forEach(function (page) {
if (page.missing) {
missing[page.title] = true;
}
});
}


if (data.query && data.query.pages) {
staticLinks.forEach(function (link) {
data.query.pages.forEach(function (page) {
var title = link.getAttribute("data-wiki-title");
if (page.missing) {
 
missing[page.title] = true;
if (!missing[title]) {
}
return;
});
}
}


links.forEach(function (link) {
link.classList.add("new");
var title = link.getAttribute("data-title");
link.href =
scriptPath +
"/index.php?title=" +
encodeURIComponent(title.replace(/ /g, "_")) +
"&action=edit&redlink=1";
link.title = title + " (page does not exist)";
});
}).catch(function () {
return;
});
}
 
markMissingLinks();


if (missing[title]) {
/* Random people slideshow. */
link.classList.add("new");
 
link.href = mw.util.getUrl(title, {
var slider = document.getElementById("vu-people-slider");
action: "edit",
var status = document.getElementById("vu-people-status");
redlink: 1
var image = document.getElementById("vu-person-image");
});
var title = document.getElementById("vu-person-title");
link.title = title + " (page does not exist)";
var extract = document.getElementById("vu-person-extract");
var link = document.getElementById("vu-person-link");
var count = document.getElementById("vu-person-count");
var previous = document.getElementById("vu-person-prev");
var next = document.getElementById("vu-person-next");
var toggle = document.getElementById("vu-person-toggle");
 
if (
!slider ||
!status ||
!image ||
!title ||
!extract ||
!link ||
!count ||
!previous ||
!next ||
!toggle
) {
return;
}
 
var people = [];
var current = 0;
var timer = null;
var playing = true;
var interval = 9000;
 
function shuffle(items) {
for (var i = items.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temporary = items[i];
items[i] = items[j];
items[j] = temporary;
}
return items;
}
 
function shorten(text, limit) {
if (!text) {
return "Open the biography to read more.";
}
 
var clean = text.replace(/\s+/g, " ").trim();
 
if (clean.length <= limit) {
return clean;
}
 
var shortened = clean.slice(0, limit);
var sentence = Math.max(
shortened.lastIndexOf(". "),
shortened.lastIndexOf("! "),
shortened.lastIndexOf("? ")
);
 
if (sentence > 180) {
return shortened.slice(0, sentence + 1);
}
 
var space = shortened.lastIndexOf(" ");
return shortened.slice(0, space > 0 ? space : limit) + "…";
}
 
function restartProgress() {
slider.classList.remove("is-playing");
void slider.offsetWidth;
 
if (playing) {
slider.classList.add("is-playing");
}
}
 
function schedule() {
if (timer) {
window.clearTimeout(timer);
}
 
restartProgress();
 
if (!playing || people.length < 2) {
return;
}
 
timer = window.setTimeout(function () {
show(current + 1);
}, interval);
}
 
function show(index) {
if (!people.length) {
return;
}
 
current = (index + people.length) % people.length;
var person = people[current];
 
slider.classList.add("is-changing");
 
window.setTimeout(function () {
image.src = person.image || fallbackImage;
image.alt = person.title;
title.textContent = person.title;
extract.textContent = shorten(person.extract, 620);
link.href = person.url || wikiUrl(person.title);
count.textContent = (current + 1) + " / " + people.length;
 
window.setTimeout(function () {
slider.classList.remove("is-changing");
}, 40);
}, 150);
 
schedule();
}
 
function setPlaying(value) {
playing = value;
toggle.textContent = playing ? "Pause" : "Play";
toggle.setAttribute(
"aria-label",
playing ? "Pause slideshow" : "Play slideshow"
);
 
if (playing) {
schedule();
} else {
if (timer) {
window.clearTimeout(timer);
}
slider.classList.remove("is-playing");
}
}
 
previous.addEventListener("click", function () {
show(current - 1);
});
 
next.addEventListener("click", function () {
show(current + 1);
});
 
toggle.addEventListener("click", function () {
setPlaying(!playing);
});
 
slider.addEventListener("mouseenter", function () {
if (playing && timer) {
window.clearTimeout(timer);
slider.classList.remove("is-playing");
}
});
 
slider.addEventListener("mouseleave", function () {
if (playing) {
schedule();
}
});
 
image.addEventListener("error", function () {
if (image.src.indexOf("Vu-logo.png") === -1) {
image.src = fallbackImage;
}
});
 
function loadCategoryMembers(continuation, collected) {
var parameters = {
action: "query",
format: "json",
formatversion: "2",
list: "categorymembers",
cmtitle: "Category:People",
cmnamespace: "0",
cmtype: "page",
cmlimit: "max"
};
 
if (continuation) {
parameters.cmcontinue = continuation;
}
 
return api(parameters).then(function (data) {
var members = collected.concat(
data.query && data.query.categorymembers
? data.query.categorymembers
: []
);
 
if (data.continue && data.continue.cmcontinue) {
return loadCategoryMembers(
data.continue.cmcontinue,
members
);
}
 
return members;
});
}
 
function loadPeopleDetails(members) {
var selected = shuffle(members.slice()).slice(0, 18);
var pageIds = selected.map(function (member) {
return member.pageid;
});
 
if (!pageIds.length) {
throw new Error("No people found");
}
 
return api({
action: "query",
format: "json",
formatversion: "2",
pageids: pageIds.join("|"),
prop: "extracts|pageimages|info",
exintro: "1",
explaintext: "1",
exchars: "750",
piprop: "thumbnail|original",
pithumbsize: "900",
inprop: "url"
}).then(function (data) {
var pages = data.query && data.query.pages
? data.query.pages
: [];
 
return pages
.filter(function (page) {
return page && page.title && !page.missing;
})
.map(function (page) {
var pageImage = "";
 
if (page.thumbnail && page.thumbnail.source) {
pageImage = page.thumbnail.source;
} else if (page.original && page.original.source) {
pageImage = page.original.source;
}
}
return {
title: page.title,
extract: page.extract || "",
image: pageImage,
url: page.fullurl || wikiUrl(page.title)
};
});
});
});
});
})(titles.slice(i, i + 50));
}
}


var featured = document.getElementById("vu-featured-content");
status.hidden = false;


if (featured) {
loadCategoryMembers("", [])
api.get({
.then(loadPeopleDetails)
action: "parse",
.then(function (loadedPeople) {
text: "{{Featured box}}",
if (!loadedPeople.length) {
title: "Main Page",
throw new Error("No biographies loaded");
prop: "text",
disablelimitreport: 1,
formatversion: 2
}).then(function (data) {
if (data.parse && data.parse.text) {
featured.innerHTML = data.parse.text;
}
}
}).catch(function () {
 
featured.textContent = "The featured page could not be loaded.";
people = shuffle(loadedPeople);
status.hidden = true;
show(0);
})
.catch(function () {
status.textContent = "The random biographies could not be loaded.";
people = [{
title: "Toonio Noord",
extract: extract.textContent,
image: image.src,
url: link.href
}];
count.textContent = "1 / 1";
setPlaying(false);
});
});
}
});
});
})();
})();
Line 954: Line 1,632:


[[Category:Reference pages]]
[[Category:Reference pages]]
'''
path = Path("/mnt/data/VU_Main_Page_with_People_Slideshow.html")
path.write_text(content, encoding="utf-8")
print(f"Created {path} ({path.stat().st_size:,} bytes)")

Revision as of 12:43, 19 June 2026

from pathlib import Path

content = r

Vrienden Universe logo
Vrienden Universe
The history of De Vrienden and the wider world recorded around them.
Timeline Random page Recent changes

About the wiki

The Vrienden Universe began in 2019 as De Lijers De Vrienden, a project about De Vrienden. The project expanded as related pages were added and became a single encyclopedia covering the wider history around its original subject.

The wiki now contains hundreds of connected pages developed over several years. Information established on one page is carried into related articles, allowing readers to follow the same history throughout the site.

Explore
Featured and browse
Featured page

Reichsministerium für Bergbau und Rohstoffe

The Reichsministerium für Bergbau und Rohstoffe was a central ministry of the Government of the Tanoa Einsatzgruppen. It administered mining and the state supply of raw materials.

The ministry supported the command economy of Tanoa and supplied the regime's industrial system.

Open page
People
Loading random biographies…
Toonio Noord
From Category:People

Toonio Noord

Toonio Noord, born 4 April 1969, is a Dutch registration official and former security guard from Vriendendam. He works for the Stichting Noord Registratiebureau and is a member of the Noord family.

Open biography
1 / 1
How to use this wiki

Choose a starting point

Most articles link directly to the subjects needed to continue through the history. Readers can begin with De Vrienden or select a broader section above.

The principal family pages provide the main route from De Vrienden into family history. Index pages provide access to the rest of the site.

Timeline Factions Organizations

Principal families

Noord family Paap family Van Hetten family Hoos family Schroeter family

Community

Information about contributing is available on the community page.

Details

Information about the scope of the site is available in the disclaimer.

Content notice
This wiki contains material intended for mature audiences. Some pages contain disturbing subject matter. Reader discretion is advised.

path = Path("/mnt/data/VU_Main_Page_with_People_Slideshow.html") path.write_text(content, encoding="utf-8") print(f"Created {path} ({path.stat().st_size:,} bytes)")

Retrieved from "https://vriendenuniverse.org/wiki/index.php?title=Main_Page&oldid=9143"