Bearbeiten von „Neue Startseite Chameleon“

__NOTOC__
<div class="infobox-wrapper">
    <div class="infobox">
        <h1>Willkommen bei TÜpedia</h1>
        <p style="font-weight: 600; color: #aaa; font-style: italic;">Stadtlexikon, Bildersammlung, Chronik</p>
        <p>TÜpedia ist Tübingens Stadt-Lexikon mit Chronik, zu dem jeder mit seinem Wissen und Bildern beitragen kann.</p>
        <hr />
        <p>Du brauchst Dich hierzu nicht anmelden und kannst Änderungen anonym durchführen. <span style="font-weight: 500;">Sei mutig und verbessere Artikel.</span></p>
    </div>
    <div class="infobox">
        <h1>Bild der Woche</h1>
        <div class="full-wrapper"></div>
    </div>
</div>
<div class="infobox-wrapper">
    <div class="infobox">
        <h1>Mitmachen</h1>
        <p><img src="https://www.foreigndocumentsexpress.com/images/fde2/Icons/verified.png" style="width: 80px; float: right; margin-left: 16px;" />Du hast einen Fehler gefunden oder aber es fehlt Information? Dann wähle einfach <i style='font-weight: 500'>Bearbeiten</i> am oberen Ende der Seite und ergänze die Information.</p>
        <hr />
        <p>Sollte etwas nicht richtig formatiert sein, so ist das nicht schlimm. Ein erfahrener Autor wird es in Kürze korrigieren.</p>
    </div>
    <div class="infobox">
        <h1>Artikel des Monats</h1>
        <div class="box-image" />
        <p>Das '''[[Antiquariat Heckenhauer]]''' am [[Holzmarkt]] 5 ist das Stammhaus der Buchhandlung J.J. Heckenhauer. Seit über 400 Jahren wird dort die Buchkunst gepflegt. [[1596]] wurde durch Magister Erhard Cellius die damals dritte Buchdruckerei Tübingens dort gegründet.</p>
    </div>
</div>
<div class="infobox-wrapper">
    <div class="infobox">
        <h1>Weißt Du etwas hierüber?</h1>
        <p>Folgende Artikel benötigen weitere Informationen</p>
        <ul>
            <li>[[Esszimmer]]</li>
            <li>[[Metzgerei Thun]]</li>
            <li>[[Volksgarten]]</li>
        </ul>
        <div class="button more">mehr anzeigen</div>
    </div>
    <div class="infobox">
        <h1>Kannst Du hiervon ein Foto machen?</h1>
        <p><img src="https://cdn0.iconfinder.com/data/icons/hand-gesture-4/154/gesture-fingers-hand-mobile-smartphone-512.png" style="width: 120px; float: right; margin-left: 16px;" />TÜpedia benötigt aktuell Bilder von</p>
        <ul>
            <li>[[Rose Lustnau]]</li>
            <li>[[Shooter Stars]]</li>
            <li>[[Stadtpost]]</li>
        </ul>
        <div class="button more">mehr anzeigen</div>
    </div>
</div>

<htmltag tagname="link" href="https://fonts.googleapis.com/css?family=Fira+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
<htmltag tagname="style">
<nowiki>


.infobox-wrapper {
    display: flex;
    flex-direction: row;
}

.thumb.tright {
    margin-left: 30px;
}

#bodyContent p, #firstHeading, h1, h2, body, p {
  font-family: 'Fira Sans' !important;
}

h2 {
    margin-top: 30px;
}

#firstHeading {
    display: none;
}

.color-bar {
    height: 0;
    overflow: hidden;
}

#bodyContent p {
    text-align: justify;
    font-size: 16px !important;
    line-height: 1.5;
}

#p-logo {
    display: none;
}

.box-image {
    background-image: url('https://www.tuepedia.de/images/e/e5/J._J._Heckenhauer_Antiquariat.jpg');
    background-size: cover;
    background-position: 50% 50%;
    width: 200px;
    height: calc(100% - 48px);
    float: right;
    display: inline-block;
    box-sizing: border-box;
    margin-left: 16px;
    cursor: pointer;
}

.infobox {
    box-sizing: border-box;
    margin-bottom: 16px;
    flex-grow: 1;
    width: 100%;
    box-shadow: 0 1px 3px 1px #ddd;
    background-color: white;
}

.infobox:nth-child(odd) {
    margin-right: 16px;
}

.infobox p {
    padding: 8px 16px;
    text-align: justify;
}

.infobox h1 {
    margin: 0 !important;
    padding: 14px 16px;
    font-size: 18px !important;
    border-bottom: 1px solid #eee !important;
    color: #333;
}

.infobox hr {
    margin: 0 16px;
    background-color: #eee !important;
    border-color: #eee !important;
    border-width: 0.5px;
}

.infobox .full-wrapper {
    height: 250px;
    background-size: cover;
    background-image: url('https://www.tuepedia.de/images/9/9e/Neckarfront_01.jpg');
    cursor: pointer;
}

#content {
    padding: 0;
}

#content li {
    font-size: 16px;
    padding: 4px 0;
}

#content #toc li {
    padding: 0;
}

body {
    background-color: #eee;
}

.contentHeader {
    margin: 0 -28px;
}

.infobox ul {
    margin-left: 20px;
}

.mw-content-ltr .thumbcaption {
    text-align: left;
    font-style: italic;
    font-weight: 500;
    color: #333;
    padding-left: 8px;
    padding-bottom: 0;
}

div.more {
    display: inline-block;
    padding: 8px 16px;
    background-color: #ccc;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    float: right;
    margin: 0 16px 16px 0;
}

div.more:hover {
    background-color: #ddd;
}

div.more:active {
    background-color: #bbb;
}

@media all and (max-width: 900px) {
    .infobox-wrapper {
        flex-wrap: wrap;
    }

    .infobox:nth-child(odd) {
        margin-right: 0;
    }
}
</nowiki>
</htmltag>