Jump to content

Main Page: Difference between revisions

From the Vrienden Universe, a fictional wiki
← Older editNewer edit →
Walter61 (talk | contribs)
Bureaucrats, Interface administrators, Suppressors, Administrators
2,052 edits
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
__NOTOC__
<html>
<html>
<style>
<style>
.vu-main {
.vu-page {
--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);
--vu-muted: #54595d;
--vu-surface: var(--background-color-neutral-subtle, #f8f9fa);
--vu-surface: var(--background-color-neutral-subtle, #f8f9fa);
--vu-accent: var(--background-color-progressive-subtle, #eaf3ff);
--vu-accent: var(--background-color-progressive-subtle, #eaf3ff);
--vu-link: var(--color-progressive, #36c);
--vu-link: var(--color-progressive, #36c);
--vu-header: #1B223D;
--vu-red: var(--color-destructive, #d33);
--vu-header-border: #3a506b;
--vu-navy: #1B223D;
--vu-header-text: #e0f0ff;
--vu-blue: #2c4265;
 
max-width: 1180px;
max-width: 1200px;
margin: 0 auto 32px;
margin: 0 auto 36px;
color: var(--vu-text);
color: var(--vu-text);
}
}


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


.vu-main h2 {
.vu-page a {
margin: 34px 0 17px;
color: var(--vu-link);
padding-bottom: 9px;
text-decoration: none;
border-bottom: 2px solid var(--vu-border);
}
color: var(--vu-text);
 
font-size: 1.65rem;
.vu-page a:hover {
line-height: 1.3;
text-decoration: underline;
}
 
.vu-page a.new,
.vu-page a.new:visited {
color: var(--vu-red) !important;
}
}


/* Header */
/* Masthead */


.vu-hero {
.vu-masthead {
position: relative;
display: grid;
display: grid;
grid-template-columns: minmax(0, 1fr) 230px;
grid-template-columns: 240px minmax(0, 1fr);
align-items: center;
min-height: 310px;
gap: 38px;
overflow: hidden;
padding: 44px;
border: 1px solid #3a506b;
margin-bottom: 25px;
border: 1px solid var(--vu-header-border);
border-radius: 14px;
background:
background:
linear-gradient(
linear-gradient(135deg, transparent 65%, rgba(255,255,255,0.04) 65%),
125deg,
linear-gradient(115deg, var(--vu-navy), var(--vu-blue));
#1B223D 0%,
color: #e0f0ff;
#263654 58%,
}
#304a69 100%
 
);
.vu-masthead::before,
color: var(--vu-header-text);
.vu-masthead::after {
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
content: "";
overflow: hidden;
position: absolute;
width: 420px;
height: 420px;
border: 70px solid rgba(255,255,255,0.035);
border-radius: 50%;
pointer-events: none;
}
 
.vu-masthead::before {
right: -230px;
top: -250px;
}
}


.vu-hero-title {
.vu-masthead::after {
margin-bottom: 16px;
left: 80px;
color: #ffffff;
bottom: -390px;
font-size: clamp(2.8rem, 7vw, 5rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
}
}


.vu-hero-text {
.vu-emblem {
max-width: 720px;
position: relative;
margin-bottom: 24px;
z-index: 2;
color: #dbe7f5;
display: flex;
font-size: 1.08rem;
align-items: center;
line-height: 1.6;
justify-content: center;
padding: 32px;
background: rgba(0,0,0,0.16);
border-right: 1px solid rgba(255,255,255,0.14);
}
}


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


.vu-hero-logo img {
.vu-emblem img {
position: relative;
z-index: 2;
width: 100%;
width: 100%;
max-width: 220px;
max-width: 175px;
height: auto;
height: auto;
filter: drop-shadow(0 10px 13px rgba(0, 0, 0, 0.38));
filter: drop-shadow(0 12px 15px rgba(0,0,0,0.45));
}
}


/* Header buttons */
.vu-masthead-copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: 42px 48px 42px 62px;
}
 
.vu-title {
margin: 0 0 13px;
color: #fff;
font-size: clamp(3rem, 7vw, 5.3rem);
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.045em;
}


.vu-action-row {
.vu-lead {
max-width: 680px;
margin-bottom: 22px;
color: #dbe7f5;
font-size: 1.08rem;
line-height: 1.55;
}
 
.vu-top-links {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
gap: 9px;
}
}


.vu-action {
.vu-top-link {
display: inline-block;
display: inline-block;
padding: 9px 15px;
border: 1px solid rgba(255,255,255,0.62);
color: #fff !important;
font-weight: 700;
transition: background 0.15s ease, transform 0.15s ease;
}
}


.vu-action a {
.vu-top-link:first-child {
display: inline-block;
background: #fff;
padding: 10px 17px;
color: var(--vu-navy) !important;
border: 1px solid rgba(255, 255, 255, 0.65);
}
border-radius: 7px;
 
background: #ffffff;
.vu-top-link:hover {
color: #1B223D !important;
transform: translateY(-2px);
font-weight: 700;
background: rgba(255,255,255,0.1);
text-decoration: none !important;
text-decoration: none !important;
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}
}


.vu-action-secondary a {
.vu-top-link:first-child:hover {
background: transparent;
background: #fff;
color: #ffffff !important;
}
}


.vu-action a:hover {
/* Section headings */
transform: translateY(-2px);
 
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28);
.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 123: Line 183:


.vu-about {
.vu-about {
padding: 27px 30px;
position: relative;
border: 1px solid var(--vu-border);
display: grid;
border-left: 6px solid var(--vu-link);
grid-template-columns: 160px minmax(0, 1fr);
border-radius: 10px;
margin-top: 18px;
overflow: hidden;
border-bottom: 1px solid var(--vu-border);
background: var(--vu-surface);
background: var(--vu-surface);
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.07);
}
}


.vu-about h2 {
.vu-about-mark {
margin-top: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 235px;
overflow: hidden;
background: var(--vu-accent);
color: var(--vu-link);
font-size: 4.5rem;
font-weight: 800;
letter-spacing: -0.14em;
}
 
.vu-about-mark span {
transform: rotate(-90deg);
opacity: 0.28;
}
 
.vu-about-copy {
padding: 23px 27px;
border-left: 5px solid var(--vu-link);
}
 
.vu-about-copy h2 {
margin: 0 0 12px;
font-size: 1.45rem;
}
}


.vu-about p {
.vu-about-copy p {
margin: 0 0 15px;
margin: 0 0 11px;
font-size: 1rem;
line-height: 1.58;
line-height: 1.67;
}
}


.vu-about p:last-child {
.vu-about-copy p:last-child {
margin-bottom: 0;
margin-bottom: 0;
}
}


/* Explore */
/* Explore network */


.vu-explore-grid {
.vu-network {
position: relative;
display: grid;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 15px;
gap: 12px;
padding: 24px 0 4px;
}
}


.vu-explore-card {
.vu-network::before {
content: "";
position: absolute;
top: 51px;
left: 7%;
right: 7%;
height: 3px;
background: linear-gradient(
to right,
transparent,
var(--vu-link) 10%,
var(--vu-link) 90%,
transparent
);
opacity: 0.5;
}
 
.vu-node {
position: relative;
z-index: 2;
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
min-height: 190px;
align-items: center;
padding: 22px;
text-align: center;
border: 1px solid var(--vu-border);
color: var(--vu-text) !important;
border-radius: 10px;
}
background: var(--vu-surface);
 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
.vu-node-dot {
transition:
display: flex;
transform 0.15s ease,
align-items: center;
border-color 0.15s ease,
justify-content: center;
box-shadow 0.15s ease;
width: 58px;
height: 58px;
margin-bottom: 11px;
border: 4px solid var(--vu-surface);
border-radius: 50%;
background: var(--vu-navy);
color: #fff;
font-size: 0.82rem;
font-weight: 700;
box-shadow: 0 0 0 2px var(--vu-link);
transition: transform 0.15s ease, background 0.15s ease;
}
 
.vu-node:hover {
text-decoration: none !important;
}
}


.vu-explore-card:hover {
.vu-node:hover .vu-node-dot {
transform: translateY(-3px);
transform: scale(1.08);
border-color: var(--vu-link);
background: var(--vu-blue);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.13);
}
}


.vu-explore-title {
.vu-node-title {
margin-bottom: 10px;
color: var(--vu-link);
font-size: 1.23rem;
font-weight: 700;
font-weight: 700;
}
}


.vu-explore-title a {
.vu-node-text {
color: var(--vu-link);
margin-top: 5px;
text-decoration: none;
font-size: 0.82rem;
line-height: 1.35;
}
}


.vu-explore-title a:hover {
/* Featured */
text-decoration: underline;
 
.vu-feature-row {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
gap: 16px;
}
}


.vu-explore-text {
.vu-featured {
margin-bottom: 18px;
position: relative;
font-size: 0.95rem;
min-height: 210px;
line-height: 1.55;
padding: 24px 30px 24px 25px;
overflow: hidden;
border-left: 6px solid var(--vu-link);
background: var(--vu-surface);
clip-path: polygon(
0 0,
calc(100% - 42px) 0,
100% 42px,
100% 100%,
0 100%
);
}
}


.vu-card-button {
.vu-featured::after {
display: block;
content: "";
margin-top: auto;
position: absolute;
top: 0;
right: 0;
width: 42px;
height: 42px;
background: var(--vu-accent);
border-left: 1px solid var(--vu-border);
border-bottom: 1px solid var(--vu-border);
}
}


.vu-card-button a {
.vu-featured-label {
display: inline-block;
margin-bottom: 12px;
padding: 8px 13px;
color: var(--vu-link);
border: 1px solid var(--vu-link);
font-size: 0.78rem;
border-radius: 6px;
color: var(--vu-link) !important;
font-weight: 700;
font-weight: 700;
text-decoration: none !important;
letter-spacing: 0.14em;
text-transform: uppercase;
}
}


.vu-card-button a:hover {
.vu-featured-content {
background: var(--vu-accent);
line-height: 1.55;
}
}


/* Featured */
.vu-featured-loading {
 
color: #72777d;
.vu-featured {
padding: 23px;
border: 1px solid var(--vu-border);
border-radius: 10px;
background: var(--vu-surface);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
}


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


.vu-browse {
.vu-browse {
padding: 25px;
position: relative;
border: 1px solid var(--vu-border);
padding: 22px;
border-radius: 11px;
overflow: hidden;
background: var(--vu-surface);
background: var(--vu-navy);
color: #e0f0ff;
}
 
.vu-browse::before {
content: "VU";
position: absolute;
right: -15px;
bottom: -42px;
color: rgba(255,255,255,0.035);
font-size: 9rem;
font-weight: 800;
letter-spacing: -0.12em;
}
}


.vu-browse-intro {
.vu-browse h2 {
margin-bottom: 17px;
position: relative;
line-height: 1.6;
z-index: 2;
margin: 0 0 13px;
color: #fff;
font-size: 1.35rem;
}
}


.vu-button-grid {
.vu-browse-links {
position: relative;
z-index: 2;
display: grid;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
gap: 7px;
}
}


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


.vu-browse-button a {
.vu-browse-link:hover {
display: flex;
background: rgba(255,255,255,0.13);
align-items: center;
justify-content: center;
min-height: 52px;
padding: 11px 14px;
border: 1px solid var(--vu-border);
border-radius: 7px;
background: var(--vu-accent);
color: var(--vu-link) !important;
font-weight: 700;
text-align: center;
text-decoration: none !important;
text-decoration: none !important;
transition:
transform 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease;
}
}


.vu-browse-button a:hover {
/* Guide */
transform: translateY(-2px);
 
border-color: var(--vu-link);
.vu-guide {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.11);
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
border-top: 1px solid var(--vu-border);
border-bottom: 1px solid var(--vu-border);
}
}


/* Guide and notice */
.vu-guide-copy {
padding: 23px 27px 23px 0;
}


.vu-guide-grid {
.vu-guide-copy h2,
display: grid;
.vu-families h2 {
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
margin: 0 0 11px;
gap: 16px;
font-size: 1.35rem;
margin-top: 27px;
}
}


.vu-guide {
.vu-guide-copy p {
padding: 24px;
margin: 0 0 10px;
border: 1px solid var(--vu-border);
line-height: 1.56;
border-radius: 10px;
background: var(--vu-surface);
}
}


.vu-guide h2 {
.vu-guide-copy p:last-child {
margin-top: 0;
margin-bottom: 0;
}
}


.vu-guide p {
.vu-families {
line-height: 1.63;
padding: 23px 0 23px 27px;
border-left: 1px solid var(--vu-border);
}
}


.vu-start-links,
.vu-family-list {
.vu-family-links {
position: relative;
display: flex;
display: grid;
flex-wrap: wrap;
gap: 8px;
gap: 8px;
margin: 15px 0;
padding-left: 18px;
}
}


.vu-start-link,
.vu-family-list::before {
.vu-family-link {
content: "";
display: inline-block;
position: absolute;
left: 4px;
top: 7px;
bottom: 7px;
width: 2px;
background: var(--vu-link);
opacity: 0.45;
}
}


.vu-start-link a,
.vu-family-link {
.vu-family-link a {
position: relative;
display: inline-block;
display: block;
padding: 8px 12px;
padding: 7px 10px;
border: 1px solid var(--vu-border);
border-radius: 6px;
background: var(--vu-accent);
background: var(--vu-accent);
color: var(--vu-link) !important;
color: var(--vu-link) !important;
font-weight: 650;
font-weight: 650;
}
.vu-family-link::before {
content: "";
position: absolute;
left: -18px;
top: 50%;
width: 10px;
height: 10px;
border: 2px solid var(--vu-surface);
border-radius: 50%;
background: var(--vu-link);
transform: translateY(-50%);
}
.vu-family-link:hover {
text-decoration: none !important;
text-decoration: none !important;
transform: translateX(2px);
}
}


.vu-start-link a:hover,
/* Footer information */
.vu-family-link a:hover {
 
border-color: var(--vu-link);
.vu-information {
text-decoration: underline !important;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
margin-top: 18px;
background: var(--vu-border);
border: 1px solid var(--vu-border);
}
 
.vu-information section {
padding: 19px 22px;
background: var(--vu-surface);
}
 
.vu-information h2 {
margin: 0 0 8px;
font-size: 1.25rem;
}
 
.vu-information p {
margin: 0;
line-height: 1.5;
}
}


.vu-notice {
.vu-notice {
padding: 24px;
display: grid;
grid-template-columns: 165px minmax(0, 1fr);
margin-top: 14px;
border: 1px solid #ab7f2a;
border: 1px solid #ab7f2a;
border-top: 5px solid #ab7f2a;
border-radius: 10px;
background: #fef6e7;
background: #fef6e7;
}
}


.vu-notice h2 {
.vu-notice-title {
margin-top: 0;
display: flex;
border-bottom-color: #ab7f2a;
align-items: center;
padding: 15px 18px;
background: #ab7f2a;
color: #fff;
font-weight: 700;
}
}


.vu-notice p {
.vu-notice-text {
line-height: 1.6;
padding: 15px 18px;
line-height: 1.5;
}
}


/* Bottom panels */
/* Red links */


.vu-bottom-grid {
.vu-page a.new,
display: grid;
.vu-page a.new:visited {
grid-template-columns: repeat(2, minmax(0, 1fr));
color: var(--vu-red) !important;
gap: 16px;
margin-top: 17px;
}
}


.vu-bottom-panel {
.vu-page .vu-top-link.new {
padding: 23px;
border-color: var(--vu-red);
border: 1px solid var(--vu-border);
color: #ff8a8a !important;
border-radius: 10px;
background: var(--vu-surface);
}
}


.vu-bottom-panel h2 {
.vu-page .vu-node.new .vu-node-dot {
margin-top: 0;
background: var(--vu-red);
font-size: 1.35rem;
box-shadow: 0 0 0 2px var(--vu-red);
}
}


.vu-bottom-panel p {
.vu-page .vu-node.new .vu-node-title,
margin-bottom: 0;
.vu-page .vu-family-link.new {
line-height: 1.62;
color: var(--vu-red) !important;
}
}


/* Dark mode */
/* Dark mode */


html.skin-theme-clientpref-night .vu-main,
html.skin-theme-clientpref-night .vu-page,
body.skin-theme-clientpref-night .vu-main {
body.skin-theme-clientpref-night .vu-page {
--vu-border: #444444;
--vu-border: #444;
--vu-text: #d0d0d0;
--vu-text: #d0d0d0;
--vu-muted: #a2a9b1;
--vu-surface: #1e1e1e;
--vu-surface: #1e1e1e;
--vu-accent: #252f42;
--vu-accent: #252f42;
--vu-link: #88ccff;
--vu-link: #88ccff;
--vu-red: #ff6b6b;
}
}


Line 389: Line 573:


@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .vu-main {
html.skin-theme-clientpref-os .vu-page {
--vu-border: #444444;
--vu-border: #444;
--vu-text: #d0d0d0;
--vu-text: #d0d0d0;
--vu-muted: #a2a9b1;
--vu-surface: #1e1e1e;
--vu-surface: #1e1e1e;
--vu-accent: #252f42;
--vu-accent: #252f42;
--vu-link: #88ccff;
--vu-link: #88ccff;
--vu-red: #ff6b6b;
}
}


Line 403: Line 587:
}
}


/* Responsive layout */
/* Responsive */


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


.vu-hero {
.vu-masthead-copy {
grid-template-columns: minmax(0, 1fr) 190px;
padding: 34px 32px 34px 48px;
padding: 35px;
}
}
}


@media (max-width: 700px) {
.vu-network {
.vu-hero {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: 1fr;
row-gap: 24px;
padding: 29px 21px;
text-align: center;
}
}


.vu-hero-logo {
.vu-network::before {
grid-row: 1;
display: none;
}
}


.vu-hero-logo img {
.vu-feature-row,
max-width: 165px;
.vu-guide {
grid-template-columns: 1fr;
}
}


.vu-action-row {
.vu-families {
justify-content: center;
padding: 21px 0;
border-top: 1px solid var(--vu-border);
border-left: 0;
}
}


.vu-guide-grid,
.vu-guide-copy {
.vu-bottom-grid {
padding-right: 0;
grid-template-columns: 1fr;
}
}
}
}


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


.vu-hero-title {
.vu-emblem {
font-size: 2.7rem;
min-height: 150px;
border-right: 0;
border-bottom: 1px solid rgba(255,255,255,0.14);
}
}


.vu-action {
.vu-emblem::after {
display: block;
display: none;
width: 100%;
}
}


.vu-action a {
.vu-emblem img {
display: block;
max-width: 120px;
text-align: center;
}
}


.vu-about,
.vu-masthead-copy {
.vu-featured,
padding: 28px 20px;
.vu-browse,
.vu-guide,
.vu-notice,
.vu-bottom-panel {
padding: 19px;
}
}
}
</style>
</html>


<div class="vu-main">
.vu-top-links {
justify-content: center;
}


<div class="vu-hero">
.vu-about {
grid-template-columns: 1fr;
}


<div class="vu-hero-copy">
.vu-about-mark {
min-height: 70px;
font-size: 2.8rem;
}


<div class="vu-hero-title">Vrienden Universe</div>
.vu-about-mark span {
transform: none;
}


<div class="vu-hero-text">
.vu-about-copy {
Browse the people, places, organizations and events documented across the wiki.
border-top: 5px solid var(--vu-link);
</div>
border-left: 0;
}


<div class="vu-action-row">
.vu-network {
<span class="vu-action">[[Timeline|Timeline]]</span>
grid-template-columns: repeat(2, minmax(0, 1fr));
<span class="vu-action vu-action-secondary">[[Special:Random|Random page]]</span>
}
<span class="vu-action vu-action-secondary">[[Special:AllPages|All pages]]</span>
</div>


</div>
.vu-information,
.vu-notice {
grid-template-columns: 1fr;
}


<div class="vu-hero-logo">
.vu-browse-links {
[[File:Vu-logo.png|220px|alt=Vrienden Universe logo|link=Main Page]]
grid-template-columns: 1fr;
</div>
}
}
</style>


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


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


== About the wiki ==
<div class="vu-masthead-copy">
<div class="vu-title">Vrienden Universe</div>


The '''Vrienden Universe''' is an encyclopedia website that began in 2019 as '''[[De Lijers De Vrienden]]''', a project about [[De Vrienden]]. As the project grew, it expanded to document the wider history surrounding its original subjects. The site now contains hundreds of connected pages.
<div class="vu-lead">
People, families, locations, organizations and events documented across one connected history.
</div>


The wiki follows one continuity. Articles are written so that dates, relationships, locations, organizations and events remain consistent across the site.
<nav class="vu-top-links">
<a class="vu-top-link" data-title="Timeline" href="/wiki/Timeline">Timeline</a>
<a class="vu-top-link" href="/wiki/Special:Random">Random page</a>
<a class="vu-top-link" href="/wiki/Special:RecentChanges">Recent changes</a>
</nav>
</div>
</header>


The site covers people, families, countries, settlements, organizations and historical events. Internal links allow readers to move between related pages and follow how subjects developed across different periods.
<section class="vu-about">
<div class="vu-about-mark"><span>VU</span></div>


Hundreds of pages and several years of work have been put into the site. Its purpose is to preserve and organize the history and stories documented across the wiki.
<div class="vu-about-copy">
<h2>About the wiki</h2>


</div>
<p>
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 project about <a data-title="De Vrienden" href="/wiki/De_Vrienden">De Vrienden</a>.
It expanded as related people, families, locations, organizations and events were documented.
</p>


== Explore ==
<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>


<div class="vu-explore-grid">
<p>
The site has been developed over several years to preserve and present the complete
history and stories recorded across the wiki.
</p>
</div>
</section>


<div class="vu-explore-card">
<div class="vu-section-heading"><span>Explore</span></div>


<div class="vu-explore-title">[[Timeline|Timeline]]</div>
<nav class="vu-network">
<a class="vu-node" data-title="Category:People" href="/wiki/Category:People">
<span class="vu-node-dot">01</span>
<span class="vu-node-title">People</span>
<span class="vu-node-text">Biographies and personal histories</span>
</a>


<div class="vu-explore-text">
<a class="vu-node" data-title="Category:Locations" href="/wiki/Category:Locations">
Follow events in chronological order and move between the historical periods covered by the wiki.
<span class="vu-node-dot">02</span>
</div>
<span class="vu-node-title">Locations</span>
<span class="vu-node-text">Countries, cities and other places</span>
</a>


<span class="vu-card-button">[[Timeline|Open timeline]]</span>
<a class="vu-node" data-title="Category:Families" href="/wiki/Category:Families">
<span class="vu-node-dot">03</span>
<span class="vu-node-title">Families</span>
<span class="vu-node-text">Family lines and relationships</span>
</a>


</div>
<a class="vu-node" data-title="Category:Organizations" href="/wiki/Category:Organizations">
 
<span class="vu-node-dot">04</span>
<div class="vu-explore-card">
<span class="vu-node-title">Organizations</span>
 
<span class="vu-node-text">Governments, companies and groups</span>
<div class="vu-explore-title">[[:Category:People|People]]</div>
</a>
 
<div class="vu-explore-text">
Browse biographies and records of people from different countries, families, organizations and periods.
</div>
 
<span class="vu-card-button">[[:Category:People|Browse people]]</span>
 
</div>


<div class="vu-explore-card">
<a class="vu-node" data-title="Category:Events" href="/wiki/Category:Events">
<span class="vu-node-dot">05</span>
<span class="vu-node-title">Events</span>
<span class="vu-node-text">Political, military and social events</span>
</a>


<div class="vu-explore-title">[[:Category:Locations|Locations]]</div>
<a class="vu-node" data-title="Category:Eras" href="/wiki/Category:Eras">
<span class="vu-node-dot">06</span>
<span class="vu-node-title">Eras</span>
<span class="vu-node-text">Historical periods used by the wiki</span>
</a>
</nav>


<div class="vu-explore-text">
<div class="vu-section-heading"><span>Featured and browse</span></div>
Browse countries, cities, regions, settlements, buildings, rivers and other documented places.
</div>


<span class="vu-card-button">[[:Category:Locations|Browse locations]]</span>
<div class="vu-feature-row">
<section class="vu-featured">
<div class="vu-featured-label">Featured page</div>


</div>
<div id="vu-featured-content" class="vu-featured-content">
<div class="vu-featured-loading">Loading featured page…</div>
</div>
</section>


<div class="vu-explore-card">
<nav class="vu-browse">
<h2>Browse</h2>


<div class="vu-explore-title">[[List of organizations|Organizations]]</div>
<div class="vu-browse-links">
<a class="vu-browse-link" href="/wiki/Special:AllPages">All pages</a>
<a class="vu-browse-link" href="/wiki/Special:Categories">Categories</a>
<a class="vu-browse-link" href="/wiki/Special:NewPages">New pages</a>
<a class="vu-browse-link" href="/wiki/Special:RecentChanges">Recent changes</a>
<a class="vu-browse-link" href="/wiki/Special:Random">Random page</a>
<a class="vu-browse-link" href="/wiki/Special:SpecialPages">Special pages</a>
</div>
</nav>
</div>


<div class="vu-explore-text">
<div class="vu-section-heading"><span>How to use this wiki</span></div>
Find governments, companies, institutions, military structures, political groups and criminal organizations.
</div>


<span class="vu-card-button">[[List of organizations|Browse organizations]]</span>
<section class="vu-guide">
<div class="vu-guide-copy">
<h2>Start with a subject</h2>


</div>
<p>
Most pages connect to related people, families, organizations, locations and events.
Readers can begin with a broad subject and continue through the links inside each article.
</p>


<div class="vu-explore-card">
<p>
<a data-title="De Vrienden" href="/wiki/De_Vrienden">De Vrienden</a>
was the original subject of the project. Its pages lead into the principal families
and wider history documented across the wiki.
</p>


<div class="vu-explore-title">[[Factions|Factions]]</div>
<p>
The <a data-title="Timeline" href="/wiki/Timeline">Timeline</a>,
<a data-title="Factions" href="/wiki/Factions">Factions</a> and
<a data-title="List of organizations" href="/wiki/List_of_organizations">List of organizations</a>
provide broader routes through the site.
</p>
</div>


<div class="vu-explore-text">
<div class="vu-families">
Read about alliances, movements, rival groups and political powers documented across the wiki.
<h2>Principal families</h2>
</div>


<span class="vu-card-button">[[Factions|Browse factions]]</span>
<div class="vu-family-list">
<a class="vu-family-link" data-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-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-title="Schroeter family" href="/wiki/Schroeter_family">Schroeter family</a>
</div>
</div>
</section>


</div>
<div class="vu-information">
<section>
<h2>Community</h2>


<div class="vu-explore-card">
<p>
Information about contributions and the purpose of the site is available on the
<a data-title="Vrienden Universe:Community" href="/wiki/Vrienden_Universe:Community">community page</a>.
</p>
</section>


<div class="vu-explore-title">[[Special:Categories|Categories]]</div>
<section>
<h2>Details</h2>


<div class="vu-explore-text">
<p>
Use the category index to browse subjects by type, location, organization, family or historical period.
Information about the content and scope of the site is available in the
</div>
<a data-title="Vrienden Universe:General disclaimer" href="/wiki/Vrienden_Universe:General_disclaimer">disclaimer</a>.
</p>
</section>
</div>


<span class="vu-card-button">[[Special:Categories|Open categories]]</span>
<div class="vu-notice">
<div class="vu-notice-title">Content notice</div>


</div>
<div class="vu-notice-text">
This wiki contains material intended for mature audiences. Some pages include violence,
abuse, exploitation and other disturbing subjects. Reader discretion is advised.
</div>
</div>


</div>
</div>


== Featured ==
<script>
(function () {
if (!window.mw || !mw.loader) {
return;
}


<div class="vu-featured">
mw.loader.using(["mediawiki.api", "mediawiki.util"]).then(function () {
var api = new mw.Api();
var root = document.querySelector(".vu-page");


{{Featured box}}
if (!root) {
return;
}


</div>
var links = Array.prototype.slice.call(
 
root.querySelectorAll("a[data-title]")
== Browse the wiki ==
);
 
<div class="vu-browse">


<div class="vu-browse-intro">
var titles = links
Use these pages to find new, recently edited or randomly selected articles.
.map(function (link) {
</div>
return link.getAttribute("data-title");
})
.filter(function (title, index, allTitles) {
return title && allTitles.indexOf(title) === index;
});


<div class="vu-button-grid">
for (var i = 0; i < titles.length; i += 50) {
<span class="vu-browse-button">[[Special:AllPages|All pages]]</span>
(function (batch) {
<span class="vu-browse-button">[[Special:Categories|All categories]]</span>
api.get({
<span class="vu-browse-button">[[Special:NewPages|New pages]]</span>
action: "query",
<span class="vu-browse-button">[[Special:RecentChanges|Recent changes]]</span>
titles: batch.join("|"),
<span class="vu-browse-button">[[Special:Random|Random page]]</span>
formatversion: 2
<span class="vu-browse-button">[[Special:SpecialPages|Special pages]]</span>
}).then(function (data) {
</div>
var missing = {};


</div>
if (data.query && data.query.pages) {
data.query.pages.forEach(function (page) {
if (page.missing) {
missing[page.title] = true;
}
});
}


<div class="vu-guide-grid">
links.forEach(function (link) {
var title = link.getAttribute("data-title");


<div class="vu-guide">
if (missing[title]) {
link.classList.add("new");
link.href = mw.util.getUrl(title, {
action: "edit",
redlink: 1
});
link.title = title + " (page does not exist)";
}
});
});
})(titles.slice(i, i + 50));
}


== How to use this wiki ==
var featured = document.getElementById("vu-featured-content");


The wiki can be read by starting from a broad subject page and following the links inside its articles. Pages connect to related people, families, locations, organizations and events.
if (featured) {
 
api.get({
<div class="vu-start-links">
action: "parse",
<span class="vu-start-link">[[De Vrienden]]</span>
text: "{{Featured box}}",
<span class="vu-start-link">[[Timeline]]</span>
title: "Main Page",
<span class="vu-start-link">[[Factions]]</span>
prop: "text",
<span class="vu-start-link">[[List of organizations|Organizations]]</span>
disablelimitreport: 1,
<span class="vu-start-link">[[:Category:People|People]]</span>
formatversion: 2
<span class="vu-start-link">[[:Category:Locations|Locations]]</span>
}).then(function (data) {
</div>
if (data.parse && data.parse.text) {
 
featured.innerHTML = data.parse.text;
[[De Vrienden]] is a useful starting point because the project originally focused on the group before expanding into the wider encyclopedia. The five principal family pages provide access to their members and histories.
}
 
}).catch(function () {
<div class="vu-family-links">
featured.textContent = "The featured page could not be loaded.";
<span class="vu-family-link">[[Noord family]]</span>
});
<span class="vu-family-link">[[Paap family]]</span>
}
<span class="vu-family-link">[[Van Hetten family]]</span>
});
<span class="vu-family-link">[[Hoos family]]</span>
})();
<span class="vu-family-link">[[Schroeter family]]</span>
</script>
</div>
</html>
 
Internal links show how information from one page relates to subjects documented elsewhere.
 
</div>
 
<div class="vu-notice">
 
== Content notice ==
 
This wiki contains material intended for mature audiences. Some pages include graphic violence, abuse, exploitation and other disturbing subjects.
 
The wiki is recommended for readers aged '''18 or older'''. Reader discretion is advised.
 
See the [[Vrienden Universe:General disclaimer|Disclaimer]] for further information.
 
</div>
 
</div>
 
<div class="vu-bottom-grid">
 
<div class="vu-bottom-panel">
 
== Community ==
 
Pages explaining the purpose of the wiki and the contribution process are available through the community section. Many established pages are protected, while selected areas remain open to proposals that fit the existing history.
 
See [[Vrienden Universe:Community|Community]] for further information.
 
</div>
 
<div class="vu-bottom-panel">
 
== Details ==
 
For information about the content, structure and scope of the site, see the [[Vrienden Universe:General disclaimer|Disclaimer]].
 
</div>
 
</div>
 
</div>


[[Category:Vrienden Universe]]
[[Category:Vrienden Universe]]

Revision as of 12:24, 19 June 2026

Vrienden Universe logo
Vrienden Universe
People, families, locations, organizations and events documented across one connected history.
VU

About the wiki

The Vrienden Universe began in 2019 as De Lijers De Vrienden, a project about De Vrienden. It expanded as related people, families, locations, organizations and events were documented.

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.

The site has been developed over several years to preserve and present the complete history and stories recorded across the wiki.

Explore
Featured and browse
Featured page
Loading featured page…
How to use this wiki

Start with a subject

Most pages connect to related people, families, organizations, locations and events. Readers can begin with a broad subject and continue through the links inside each article.

De Vrienden was the original subject of the project. Its pages lead into the principal families and wider history documented across the wiki.

The Timeline, Factions and List of organizations provide broader routes through the site.

Principal families

Noord family Paap family Van Hetten family Hoos family Schroeter family

Community

Information about contributions and the purpose of the site is available on the community page.

Details

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

Content notice
This wiki contains material intended for mature audiences. Some pages include violence, abuse, exploitation and other disturbing subjects. Reader discretion is advised.

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