Commit e158c0d9 authored by Jakob Moser's avatar Jakob Moser
Browse files

Massively rework front page

parent 798a66f2

landing.php

+40 −51
Changes for landing.php: 40 added lines, 51 removed lines.
Original line number Diff line number Diff line 
<?php

/*

    Template Name: Landing Page

    Theme: Fachschaft Computerlinguistik

    Landing Custom Template File

/**

 * Template Name: Landing Page

 *

 * Template for the landing page (= "home page", "start page"). WordPress

 * identifies this file by its "Template Name", which can be whatever you want.

 * After creating a page in the WordPress admin area, you can select this

 * template from a list of templates by its name.

 */



get_header();

?>

<main>

<main class="landing">

    <header>

        <h1><?php bloginfo('name');?></h1>

        <h2><?php bloginfo('description');?></h2>

    </header>

    <div class="home-row">

        <div class="home-row-icon icon-ticker"></div>

        <div class="home-row-content">

            <p>

    <section class="ticker">

        <?php echo apply_filters('the_content', $post->post_content); ?>

            </p>

        </div>

    </div>

    <div class="home-row">

        <div class="home-row-icon icon-news"></div>

        <div class="home-row-content">

            <div class="home-news-main">

                <?php

                    $recent_posts = wp_get_recent_posts(array('numberposts'=>4));

                ?>

                <div class="home-news-main-content">

                    <h3><a href="<?php echo get_permalink($recent_posts[0]["ID"]); ?>" class="post-title-box"><?php echo $recent_posts[0]["post_title"]; ?></a></h3>

    </section>

    <section class="news">

        <?php $recent_posts = wp_get_recent_posts(array('numberposts'=>4)); ?>



        <article>

		    <header>

                <h3><a href="<?php echo get_permalink($recent_posts[0]["ID"]); ?>"><?php echo $recent_posts[0]["post_title"]; ?></a></h3>

		    </header>

		    <div class="content">

                <?php

                    if ( !post_password_required($recent_posts[0]["ID"]) ) {

                        echo substr(wp_strip_all_tags($recent_posts[0]["post_content"]), 0, 250).'...';
@@ -41,8 +38,9 @@ get_header(); 
                    }

                ?>

		    </div>

            </div>

            <div class="home-news-sidebar">

	    </article>



        <aside>

            <ul>

                <?php

                    for ($i = 1; $i < 4; $i++) {
@@ -59,35 +57,26 @@ get_header(); 
                    }

                ?></a>

            </div>

            </div>

        </div>

    </div>

    <div class="home-row">

        <div class="home-row-icon icon-rocket"></div>

        <div class="home-row-content link-list">

            <br>

        </aside>

    </section>

    <section class="rocket">

        <ul class="link-list">

            <?php

                if (get_bloginfo('language') === 'de-DE') {

                    echo '<li>Im nur für Studierende zugänglichen <a href="http://fs-co.li/wiki">Wiki</a> findet ihr Protokolle, Infos und vieles mehr.</li>';

                    echo '<li>Wenn ihr Fragen habt, könnt ihr uns auch einfach eine <a href="#" onclick="javascript:var mid=\'o:fs-coli@cl.\';window.location=\'mailt\'+mid+\'uni-heidelberg.de\';">Mail</a> schreiben.</li>';

                } else {

                    echo '<li>You can find protocols, info and more in the <a href="http://fs-co.li/wiki">Wiki</a>, which is only accessible for students.</li>';

                    echo '<li>If you have any questions, you can send us an <a href="#" onclick="javascript:var mid=\'o:fs-coli@cl.\';window.location=\'mailt\'+mid+\'uni-heidelberg.de\';">email</a>.</li>';

                }

            ?>

            <?php if (get_bloginfo('language') === 'de-DE'): ?>

                <li>Im nur für Studierende zugänglichen <a href="http://fs-co.li/wiki">Wiki</a> findet ihr Protokolle, Infos und vieles mehr.</li>

                <li>Wenn ihr Fragen habt, könnt ihr uns auch einfach eine <a href="mailto:fs-coli@cl.uni-heidelberg.de">Mail</a> schreiben.</li>

            <?php else: ?>

                <li>You can find protocols, info and more in the <a href="http://fs-co.li/wiki">Wiki</a>, which is only accessible for students.</li>

                <li>If you have any questions, you can send us an <a href="mailto:fs-coli@cl.uni-heidelberg.de">email</a>.</li>

            <?php endif; ?>

        </ul>

            <br>

            <br>

            <br>

            <?php

                if (get_bloginfo('language') === 'de-DE') {

                    echo '<p>Ansonsten k&ouml;nnt ihr auch Post in den FS-Briefkasten werfen oder uns einfach irgendwo auf dem Campus abfangen. Es gibt kein Entkommen!</p>';

                } else {

                    echo '<p>You can also just contact us via our real-life mailbox in the ICL or approach us on campus. There is no escape!<p>';

                }

            ?>

        </div>

    </div>



        <p>

            <?php if (get_bloginfo('language') === 'de-DE'): ?>

                Ansonsten könnt ihr auch Post in den FS-Briefkasten werfen oder uns einfach irgendwo auf dem Campus abfangen. Es gibt kein Entkommen!

            <?php else: ?>

                You can also just contact us via our real-life mailbox in the ICL or approach us on campus. There is no escape!

            <?php endif; ?>

        </p>

    </section>

</main>

<?php get_footer();?>

style.css

+34 −41
Changes for style.css: 34 added lines, 41 removed lines.
Original line number Diff line number Diff line
@@ -4,7 +4,7 @@ Theme URI: https://gitlab.cl.uni-heidelberg.de/fachschaft/wp-theme 
Description: Ein zeitloses WordPress-Theme für die Fachschaft Computerlinguistik in Heidelberg, gehalten in den Farben rot, grau und schwarz. Seit Mitte 2020 nach Anpassungen von Jakob Moser sogar leidlich responsive.

Author: personads :: Maximilian Müller-Eberstein

Author URI: https://personads.me/

Version: 1.00-snapshot-24

Version: 1.00-snapshot-26

Tags: fs-coli, custom



License: GNU General Public License v3.0
@@ -53,12 +53,12 @@ body > header, main, body > footer { 
}



/* However, when there is an aside, place the aside in the left column and main in the right column */

aside {

body > aside {

    grid-column-start: 1;

    grid-column-end: 2;

}



aside + main {

body > aside + main {

    grid-column-start: 2;

    grid-column-end: 3;

}
@@ -464,19 +464,14 @@ main > header h2 { 
    text-align: right;

}



div.home-row {

    position: relative;

    width: 100%;

main.landing section {

    border-style: solid;

    border-color: var(--accent-color);

    border-width: 1px 0px 0px 0px;

}



div.home-row-content {

    padding: 2em;

}



div.home-row-icon {

main.landing section::before {

    display: block;

    position: absolute;

    left: 50%;
@@ -485,55 +480,57 @@ div.home-row-icon { 
    background-repeat: no-repeat;

    background-size: contain;

    transform: translate(-50%, -40%);

    margin-top: -2em;

    content: "";

}



div.home-row .icon-ticker {

main.landing section.ticker::before {

    left: 2em;

}



.icon-ticker {

.icon-ticker, main.landing section.ticker::before {

    background-image: url("img/ticker.png");

}



.icon-news {

.icon-news, main.landing section.news::before {

    background-image: url("img/news.png");

}



.icon-rocket {

.icon-rocket, main.landing section.rocket::before {

    background-image: url("img/rocket.png");

}



/* -- homepage news listing styles */



div.home-news-main {

    display: inline-block;

    width: 75%;

    vertical-align: top;

main.landing section.news {

    display: grid;

    grid-template-columns: 75fr 25fr;

    column-gap: 2em;

}



div.home-news-main-content {

    margin-right: 1em;

main.landing section.news aside {

    border-style: solid;

    border-color: var(--light-gray);

    border-width: 0px 0px 0px 1px;

}



div.home-news-main .post-title-box {

    margin-bottom: 1em;

.news article {

    padding: 0;

}



div.home-news-sidebar {

    display: inline-block;

    width: 24%;

    vertical-align: top;

    border-style: solid;

    border-color: var(--light-gray);

    border-width: 0px 0px 0px 1px;

.news article .content {

    margin-top: 2em;

}



div.home-news-sidebar li {

.news aside li {

    list-style: none;

    margin: 0.25em 0;

}



div.home-news-sidebar .more {

.news aside li a {

    margin-bottom: initial !important;

}



.news aside .more {

    text-align: right;

}
@@ -562,7 +559,7 @@ div.home-news-sidebar .more { 


/* - posts listing styles */



aside {

body > aside {

    margin: 2em 0;

    padding: 1em;

    background-color: var(--background-color);
@@ -714,12 +711,12 @@ article { 
    padding: 2em;

}



main:not(.list) article {

main:not(.list):not(.landing) article {

    display: grid;

    grid-template-rows: max-content 1fr max-content;

}



article > header {

main:not(.landing) article > header {

    width: 100%;

    height: 200px;

    margin: -2em 0 0 -2em;
@@ -737,7 +734,7 @@ article > header { 
    align-items: end;

}



article > header h1, .post-title h1 a, .home-news-main-content h3 a, .home-news-sidebar li a {

article > header h1, .post-title h1 a, .news article h3 a, .news aside li a {

    display: inline-block;

    padding: 0.5em;

    background-color: rgba(0, 0, 0, 0.8);
@@ -756,16 +753,12 @@ article > header h1, .post-title h1 a, .home-news-main-content h3 a, .home-news- 
    padding: 0.27em;

}



.home-news-sidebar li a {

    margin-bottom: initial;

}



.content {

    position: relative;

    margin-top: 3.5em;

}



.content::after {

main:not(.landing) .content::after {

    content: "";

    display: block;

    position: absolute;