SPD Lüdinghausen 4.0

Nach über zwei Jahren wurde es Zeit für eine Generalrenovierung der Homepage der SPD Lüdinghausen. Diese Arbeit war nun, im Vergleich mit der, bereits vor zweieinhalb Jahren erfolgten, Migration der Seite aus dem WebSozi-CMS auf WordPress, eine überschaubare Aktion.

Auch diese Webseite basiert nun auf dem umfangreichen und flexiblen Moesia Theme welches das auf TwentyThirteen basierende und heftig angepasste vorherige Design ersetzt. Moesia war schon das Gerüst für die Wahlkampfseite von Doris Krüger – die dabei gewonnenen Erfahrungen zahlten sich nachhaltig aus – obwohl es sich hier mehr um ein klassisches Layout mit Sidebar handelt.

Responsivität und Usability auf dem Stand der Technik… so sieht das aus!

http://spd.netzwerk-lh.de

One thought on “SPD Lüdinghausen 4.0

  1. Wer es nachbauen möchte: So sieht die style.css Datei des Moesia Child Theme aus :
    —-

    /*
    Theme Name: SPD LH 2016
    Description: SPD Theme for WordPress - Childtheme for Moesia by aThemes
    Author: Klaus Boettger
    Author URI: http://nexxtnetz.de
    Template: moesia
    Version: 1.0
    Tags:
    */
    @import url("../moesia/style.css");

    body {
    font-size:18px;
    overflow-x:hidden;
    max-width:1675px;
    }

    .container {
    width:100%!important;
    max-width:100%!important;
    margin-right:auto;
    margin-left:auto;
    padding-left:0;
    padding-right:0;
    }

    .sticky-wrapper {
    background-color:#fff;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0;
    }

    .site-branding {
    float:left;
    padding:1% 2%!important;
    }

    .site-logo {
    width:60px;
    height:auto;
    border:1px solid #FFF;
    }

    .is-sticky .site-branding .site-logo {
    max-width:60px!important;
    width:40%;
    height:auto;
    border:1px solid #FFF;
    }

    .is-sticky .site-branding {
    -webkit-transition:all .3s;
    transition:all .3s;
    padding:5px 0;
    }

    .main-navigation {
    display:block;
    float:right;
    margin-right:0;
    }

    .main-navigation ul {
    margin-top:2.5%;
    text-align:right;
    font-size:16px;
    text-transform:none;
    }

    .main-navigation ul ul a {
    color:#fff!important;
    font-size:16px!important;
    width:250px;
    font-weight:600;
    text-transform:uppercase;
    }

    .main-navigation ul ul {
    top:65%;
    float:right;
    right:0;
    }

    .main-navigation a:hover,.main-navigation ul ul a:hover {
    color:#FF0!important;
    }

    .main-navigation li {
    background:#e2000f;
    font-size:18px;
    padding:9px 15px!important;
    }

    .is-sticky .main-navigation li {
    -webkit-transition:all .9s;
    transition:all .9s;
    padding:9px 15px;
    }

    .sub-menu {
    margin-top:0;
    }

    a {
    color:#e2000f;
    text-decoration:none;
    }

    a:hover {
    color:#e2000f;
    text-decoration:underline;
    }

    .entry-title,.entry-meta {
    margin:15px 0 5px;
    }

    .home .entry-footer {
    visibility:hidden;
    position:absolute;
    }

    .entry-thumb {
    background-color:#fff;
    }

    .entry-title {
    border-left:10px solid #444;
    padding-left:25px;
    }

    .single-thumb {
    margin-bottom:30px;
    width:100%;
    }

    .entry-header {
    border-bottom:0 double #ebebeb;
    margin:15px;
    }

    .entry-footer {
    padding-top:10px;
    margin:0 2%;
    }

    .page-content,.entry-content,.entry-summary {
    padding:0 15px 15px;
    }

    .hentry .post-content,.single .hentry,.page .hentry {
    border:4px double #ebebeb;
    background-color:#fff;
    padding:0;
    }

    #sab-author {
    font-family:‘Open Sans’, sans-serif;
    font-weight:600;
    font-size:2em;
    line-height:40px;
    }

    .post-content {
    border:0 double #ebebeb;
    background-color:#fff;
    padding:0;
    }

    .isc_image_list_box,.isc_image_list_box a,.isc-source-text,.isc-source-text a {
    font-size:13px;
    color:#cfcfcf!important;
    }

    .isc_image_list_box {
    border-top:1px solid #cfcfcf;
    }

    head-stripe {
    background:#980267;
    }

    .fraktion-header {
    background:#980267;
    color:#fff;
    width:100%;
    height:100%;
    float:left;
    clear:right;
    padding-left:2%;
    margin:0;
    }

    .fraktion-foto {
    max-width:200px;
    height:auto;
    width:10.5%;
    margin:0 2% 0 0;
    }

    .tagline {
    text-transform:uppercase;
    }

    .bh-widget-area {
    background-color:#e8e8e8!important;
    margin-bottom:0;
    }

    .bh-widget-area .widget {
    padding:0!important;
    }

    .site-info {
    visibility:hidden;
    }

    .is-sticky .top-bar {
    height:auto;
    }

    .post-navigation .nav-previous,.post-navigation .nav-next,.paging-navigation .nav-previous,.paging-navigation .nav-next {
    background-color:#e3000f;
    box-shadow:0 0 1px #adadad;
    }

    .author-bio .avatar {
    display:0;
    margin:10% auto;
    }

    .widget-title,.widgettitle {
    border-bottom:4px double #ebebeb;
    border-top:4px double #ebebeb;
    margin:0 0 15px;
    padding:15px 0;
    }

    .social-widget ul {
    text-align:center;
    margin:0;
    }

    .social-widget li a::before {
    font-size:80px!important;
    }

    .moesia_recent_comments .avatar {
    margin-top:8px;
    }

    .footer-widget-area .widget-title {
    border-top:4px double #3A3A3A;
    border-bottom:4px double #3A3A3A;
    color:#E4E4E4;
    }

    .entry-thumb img,.single-thumb img {
    width:100%;
    height:auto;
    }

    @media only screen and min-width 1024px {
    .content-area {
    width:65%;
    float:left;
    max-width:1200px;
    margin-left:2.5%;
    }

    .widget-area {
    width:25%;
    float:left;
    background-color:#fff;
    border:4px double #ebebeb;
    margin-bottom:30px;
    margin-left:5%;
    margin-right:2.5%;
    padding:30px;
    }
    }

    @media only screen and max-width 1023px {
    .content-area,.widget-area {
    width:95%;
    margin-left:2.5%;
    margin-right:2.5%;
    }
    }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.