diff --git a/404.php b/404.php
index d52cb7bc2c79251591378b68ffcc9a4735558cb4..e9c956e0ca1433f9ad77441226b46e74427f65d0 100644
--- a/404.php
+++ b/404.php
@@ -1,27 +1,25 @@
-<?php
-/*
- Theme: Fachschaft Computerlinguistik
- 404 Template File
-*/
-
-get_header();
- ?>
- <!-- content -->
- <div class="post-container">
- <div class="post-header">
- </div>
- <div class="post-title">
- <h1 class="post-title-box">Error: 404</h1>
- </div>
- <div class="post-content error404">
- <div class="icon">
- ?!
- </div>
- <div class="message">
- Die angefragte Seite existiert leider nicht.
- </div>
- </div>
- <div class="post-meta">
- </div>
- </div>
-<?php get_footer(); ?>
+<?php
+/**
+ * Template for the error 404 (Not Found) page.
+ *
+ * WordPress identifies this file by its name (which MUST be 404.php)
+ * and displays it whenever an HTTP 404 is sent.
+ *
+ * @see https://codex.wordpress.org/Creating_an_Error_404_Page
+ */
+
+get_header();
+?>
+<main>
+ <article>
+ <header>
+ <h1>Fehler: 404</h1>
+ </header>
+ <div class="content jumbo">
+ <div class="icon">?!</div>
+ <div class="message">Die angefragte Seite existiert leider nicht.</div>
+ </div>
+ <footer></footer>
+ </article>
+</main>
+<?php get_footer(); ?>
diff --git a/README.md b/README.md
index 6fc15948993467de97040cb672d330a5e5174b1a..83464f6e198e09a8a5cc113f0ebcc910a4f7d878 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,52 @@
-Repository icon made by <a href="https://www.flaticon.com/authors/monkik" title="monkik">monkik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
+# fscoli next
+
+Maintainer: Jakob Moser <moser@cl.uni-heidelberg.de>
+
+*Based on the ["Fachschaft Computerlinguistik WordPress Theme"][original] by [personads :: Maximilian Müller-Eberstein][personads].*
+
+<img alt="Promotional image for the theme" src="screenshot.png" width="400px" title="Hallo lieber Mit-Coli aus der Zukunft! Cool, dass du bis hierhin vorgestoßen bist :) Geht es der Website gut?"/>
+
+A timeless WordPress theme for the Fachschaft Computerlinguistik in Heidelberg in the colors red, gray and black.
+
+## :wrench: Download and install
+
+[**:inbox_tray: Download current version**][current-zip]
+
+Download the current version by clicking on the link above (this will download the ZIP file GitLab automatically prepares with all the current contents of this repository).
+
+Then, upload the file to WordPress in the "Themes" section and enable it. Done :)
+
+## :checkered_flag: Development
+
+The `master` branch of this repository is push-protected, so you cannot push changes directly to it. Instead, you should create a feature branch, commit all your changes there, push that branch and then merge it into master via a merge request.
+
+We recommend that you first create an issue describing what you want to do and then use GitLab's built-in "Create merge request and branch" feature for that. This way, it is also always documented who is working on which changes.
+
+You can of course also always change the branch protection in the settings, but we would recommend against that.
+
+## :scales: License
+
+The "fscoli next" WordPress theme is distributed under the terms of the [**GNU General Public License v3.0**][gpl-3.0].
+
+### Relationship to the original version
+
+"fscoli next" is based on the ["Fachschaft Computerlinguistik WordPress Theme"][original], Copyright 2015 personads, which is also distributed under the terms of the GNU General Public License v3.0.
+
+It contains modifications made by Jakob Moser in 2020 and 2021, namely added responsiveness, a few bug fixes and a rewrite of the underlying HTML, PHP and CSS. Jakob also modified the `screenshot.png` image to include the name of the new theme. The original design work by personads was left more or less intact, so there is little visual difference between the two themes.
+
+GitLab provides [a list of the differences between "fscoli next" and "Fachschaft Computerlinguistik WordPress Theme"][diff].
+
+### Differently licensed content
+
+* `style.css` includes a CSS snippet adapted from the Stack Overflow answer https://stackoverflow.com/a/52226523/ by [binaryfunt][binaryfunt] which is licensed under [**CC BY-SA 4.0**][cc-by-sa-4.0]. More details can be found in the respective file.
+* The [icon this repository uses](https://gitlab.cl.uni-heidelberg.de/uploads/-/system/project/avatar/720/web-design-padded.png) was made by [monkik][monkik] from [www.flaticon.com][flaticon] and is licensed under the **Flaticon License**.
+
+[original]:https://gitlab.cl.uni-heidelberg.de/fachschaft/wp-theme/-/tags/original
+[personads]:https://personads.me/
+[current-zip]:https://gitlab.cl.uni-heidelberg.de/fachschaft/wp-theme/-/archive/master/wp-theme-master.zip
+[gpl-3.0]:https://www.gnu.org/licenses/gpl-3.0.html
+[diff]:https://gitlab.cl.uni-heidelberg.de/fachschaft/wp-theme/-/compare/original...master
+[flaticon]:https://www.flaticon.com/
+[monkik]:https://www.flaticon.com/authors/monkik
+[binaryfunt]:https://stackoverflow.com/users/3217306/binaryfunt
+[cc-by-sa-4.0]:https://creativecommons.org/licenses/by-sa/4.0/
diff --git a/footer.php b/footer.php
index 64345e989bd7c13184b06bb528a6682d85d6d5fd..c3fd14322647f195b6ce87cc31ee150a6a8572e6 100644
--- a/footer.php
+++ b/footer.php
@@ -1,19 +1,17 @@
-<?php
-/*
- Theme: Fachschaft Computerlinguistik
- Footer Template File
-*/
-
-get_header();
- ?>
-
- <!-- footer -->
- <div id="footer">
- <div>
- <a href="<?php echo home_url()."/legal/#impressum"; ?>">Impressum</a> | <a href="<?php echo home_url()."/legal/#rechtliches"; ?>">Rechtliches</a> | <a href="<?php echo home_url()."/legal/#datenschutz"; ?>">Datenschutz</a>
- <span class="copyright">© Fachschaft Computerlinguistik, Heidelberg</span>
- </div>
- </div>
- <?php wp_footer(); ?>
- </body>
-</html>
+<?php
+/**
+ * Template for the footer.
+ *
+ * WordPress identifies this file by its name (which MUST be footer.php).
+ * It is included in the other templates by using get_footer();
+ *
+ * @see https://codex.wordpress.org/Theme_Development#Basic_Templates
+ */
+?>
+ <footer>
+ <a href="<?php echo home_url()."/legal/#impressum"; ?>">Impressum</a> | <a href="<?php echo home_url()."/legal/#rechtliches"; ?>">Rechtliches</a> | <a href="<?php echo home_url()."/legal/#datenschutz"; ?>">Datenschutz</a>
+ <span class="copyright">© Fachschaft Computerlinguistik, Heidelberg</span>
+ </footer>
+ <?php wp_footer(); ?>
+</body>
+</html>
diff --git a/functions.php b/functions.php
index 6b7950706f03417b0d10424fa7165582feec8085..9682fd3c4432b014d6144e730b11c05c61a5fe16 100644
--- a/functions.php
+++ b/functions.php
@@ -1,78 +1,26 @@
<?php
/*
- Theme: Fachschaft Computerlinguistik
- IFunctions File
+ Theme: Fachschaft Computerlinguistik
+ IFunctions File
*/
- // add support for theme functions
- // - add support for post thumbnails
- add_theme_support('post-thumbnails');
- // - add support for custom menus
- add_theme_support('menus');
- // - add support for header image
- add_theme_support('custom-header', array('default-image'=>get_template_directory_uri().'/img/header.jpg', 'uploads'=>true));
+ // add support for theme functions
+ // - add support for post thumbnails
+ add_theme_support('post-thumbnails');
+ // - add support for custom menus
+ add_theme_support('menus');
+ // - add support for header image
+ add_theme_support('custom-header', array('default-image'=>get_template_directory_uri().'/img/header.jpg', 'uploads'=>true));
- function register_my_menu() {
- register_nav_menu('new-menu',__( 'New Menu' ));
- }
- add_action( 'init', 'register_my_menu' );
-
- // add filters for theme
- // -add custom file types
- function fscoli_mime_types($mime_types){
- $mime_types['tex'] = 'application/x-tex'; //LaTeX files
- return $mime_types;
- }
- add_filter('upload_mimes', 'fscoli_mime_types', 1, 1);
- // - add custom colors
- add_filter('tiny_mce_before_init', 'fscoli_mce4_options');
- function fscoli_mce4_options( $init ) {
- $default_colours = '
- "000000", "Black",
- "993300", "Burnt orange",
- "333300", "Dark olive",
- "003300", "Dark green",
- "003366", "Dark azure",
- "000080", "Navy Blue",
- "333399", "Indigo",
- "333333", "Very dark gray",
- "800000", "Maroon",
- "FF6600", "Orange",
- "808000", "Olive",
- "008000", "Green",
- "008080", "Teal",
- "0000FF", "Blue",
- "666699", "Grayish blue",
- "808080", "Gray",
- "FF0000", "Red",
- "FF9900", "Amber",
- "99CC00", "Yellow green",
- "339966", "Sea green",
- "33CCCC", "Turquoise",
- "3366FF", "Royal blue",
- "800080", "Purple",
- "999999", "Medium gray",
- "FF00FF", "Magenta",
- "FFCC00", "Gold",
- "FFFF00", "Yellow",
- "00FF00", "Lime",
- "00FFFF", "Aqua",
- "00CCFF", "Sky blue",
- "993366", "Brown",
- "C0C0C0", "Silver",
- "FF99CC", "Pink",
- "FFCC99", "Peach",
- "FFFF99", "Light yellow",
- "CCFFCC", "Pale green",
- "CCFFFF", "Pale cyan",
- "99CCFF", "Light sky blue",
- "CC99FF", "Plum",
- "FFFFFF", "White"
- ';
- $custom_colours = '
- "990000", "fscoli dark red"
- ';
- $init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
- $init['textcolor_rows'] = 6;
- return $init;
- }
+ function register_my_menu() {
+ register_nav_menu('new-menu',__( 'New Menu' ));
+ }
+ add_action( 'init', 'register_my_menu' );
+
+ // add filters for theme
+ // -add custom file types
+ function fscoli_mime_types($mime_types){
+ $mime_types['tex'] = 'application/x-tex'; //LaTeX files
+ return $mime_types;
+ }
+ add_filter('upload_mimes', 'fscoli_mime_types', 1, 1);
?>
diff --git a/header.php b/header.php
index b3ea98d93790df73546040ea17f2329f811eeb3d..d3d4332682c66a68780d8039806237ee429ac2e1 100644
--- a/header.php
+++ b/header.php
@@ -1,41 +1,47 @@
-<?php
-/*
- Theme: Fachschaft Computerlinguistik
- Header Template File
-*/
-
-get_header();
- ?>
-
-<!DOCTYPE html>
-<html <?php language_attributes(); ?>>
- <head>
- <meta charset="<?php bloginfo('charset'); ?>"/>
- <title>
- <?php
- if ( is_front_page() ) {
- bloginfo('name');
- } elseif (is_home()) {
- echo 'Blog | '.get_bloginfo('name');
- } else {
- echo get_the_title($post->ID).' | '.get_bloginfo('name');
- }
- ?></title>
- <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri();?>" />
- <link rel="shortcut icon" href="<?php echo get_template_directory_uri();?>/img/favicon.png" />
- <link rel="alternate" type="application/rss+xml" title="fscoli blog" href="<?php bloginfo('rss2_url'); ?>" />
- <meta name="copyright" content="Fachschaft Computerlinguistik">
- <meta name="description" content="<?php bloginfo('description');?>" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <?php wp_head(); ?>
- </head>
- <body>
- <div id="top">
- <a class="logo-link" href="<?php echo home_url();?>"><div class="logo"></div></a>
- <a class="menu-toggle" href="#menu-container">Menü</a>
- <nav id="menu-container">
- <?php wp_nav_menu( array('container'=>'false', 'container-id'=>'menu-container', 'sort_column'=>'menu_order')); ?>
- </nav>
- </div>
- <div id="top-padding">
- </div>
+<?php
+/*
+ Theme: Fachschaft Computerlinguistik
+ Header Template File
+*/
+
+get_header();
+?>
+
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+ <head>
+ <title>
+ <?php
+ if(is_home()) {
+ echo 'Blog | ';
+ } elseif(is_search()) {
+ echo 'Suchergebnisse | ';
+ } elseif(!is_front_page()) {
+ // get_the_title does not escape the returned values
+ // (see https://developer.wordpress.org/reference/functions/get_the_title/#comment-1653)
+ // So, to be on the safe side, we escape it here.
+ echo esc_html(get_the_title($post->ID)).' | ';
+ }
+ bloginfo('name');
+ ?>
+ </title>
+
+ <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri();?>" />
+ <link rel="shortcut icon" href="<?php echo get_template_directory_uri();?>/img/favicon.png" />
+ <link rel="alternate" type="application/rss+xml" title="fscoli blog" href="<?php bloginfo('rss2_url'); ?>" />
+
+ <meta charset="<?php bloginfo('charset'); ?>" />
+ <meta name="copyright" content="Fachschaft Computerlinguistik" />
+ <meta name="description" content="<?php bloginfo('description');?>" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+ <?php wp_head(); ?>
+ </head>
+ <body class="<?php echo is_admin_bar_showing() ? 'has-admin-bar' : '';?>">
+ <header>
+ <a class="logo" href="<?php echo home_url();?>"></a>
+ <a class="nav-toggle" href="#nav">Menü</a>
+ <nav id="nav">
+ <?php wp_nav_menu(array('container'=>'false')); ?>
+ </nav>
+ </header>
diff --git a/img/test-img.jpg b/img/test-img.jpg
deleted file mode 100644
index e17031e0d3a9a61f9fd4b21b266f3d895d615fbc..0000000000000000000000000000000000000000
Binary files a/img/test-img.jpg and /dev/null differ
diff --git a/index.php b/index.php
index 163a98875c4ab508fe566c2ff256d707cb4e26d5..5688481ff376b4b973fe6ef9e7cca93769d7ef81 100644
--- a/index.php
+++ b/index.php
@@ -1,72 +1,74 @@
-<?php
-/*
- Theme: Fachschaft Computerlinguistik
- Index Template File
-*/
-
-get_header();
- ?> <!-- content -->
- <div id="content">
- <div class="sidebar">
- <div class="sidebar-content">
- <h1><div class="square-icon icon-news"></div>
- <?php
- if ( is_category() ) {
- single_cat_title();
- } elseif ( is_archive() ) {
- single_month_title(' ');
- } else {
- echo "Blog";
- }
- ?>
- </h1>
- <br>
- <h2>Kategorien</h2>
- <br>
- <ul class="link-list">
- <?php wp_list_categories(array('title_li'=>'')); ?>
- </ul>
- <br>
- <br>
- <h2>Archiv</h2>
- <br>
- <select onchange="document.location.href=this.options[this.selectedIndex].value;">
- <option>nach Monat</option>
- <?php wp_get_archives(array('format'=>'option')); ?>
- </select>
- <br>
- <br>
- <a href="<?php bloginfo('rss2_url'); ?>" class="rss-link">
- zum RSS-Feed
- </a>
- </div>
- </div>
- <div class="posts-listing">
- <div class="posts-container">
- <?php
- while ( have_posts() ) : the_post();
- ?>
- <div class="post-container">
- <?php if ( has_post_thumbnail($post->ID) ) : ?>
- <div class="post-header" style="background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>');">
- </div>
- <?php endif; ?>
- <div class="post-title">
- <a class="post-title-box" href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1></a>
- </div>
- <div class="post-meta-timestamp">
- <?php the_date(); ?>
- </div>
- <div class="post-content">
- <?php the_excerpt(); ?>
- </div>
- </div>
- <?php
- endwhile;
- ?>
- <div class="page-selector page-selector-previous"><?php next_posts_link( 'ältere Posts' ); ?></div>
- <div class="page-selector page-selector-next"><?php previous_posts_link( 'neuere Posts' ); ?></div>
- </div>
- </div>
- </div>
-<?php get_footer(); ?>
+<?php
+/**
+ * Template for the index page.
+ *
+ * WordPress identifies this file by its name (which MUST be index.php)
+ * and displays it whenever it has to display lists of posts. Furthermore,
+ * this page is used as the ultimate fallback page when there is no
+ * other template available.
+ *
+ * @see https://codex.wordpress.org/Theme_Development#Index_.28index.php.29
+ */
+
+get_header();
+?>
+<aside class="levitating list-meta">
+ <h1>
+ <?php
+ if ( is_category() ) {
+ single_cat_title();
+ } elseif ( is_archive() ) {
+ single_month_title(' ');
+ } else {
+ echo "Blog";
+ }
+ ?>
+ </h1>
+ <br>
+ <h2>Kategorien</h2>
+ <br>
+ <ul class="categories seamless box-links">
+ <?php wp_list_categories(array('title_li'=>'')); ?>
+ </ul>
+ <br>
+ <br>
+ <h2>Archiv</h2>
+ <br>
+ <select onchange="document.location.href=this.options[this.selectedIndex].value;">
+ <option>nach Monat</option>
+ <?php wp_get_archives(array('format'=>'option')); ?>
+ </select>
+ <br>
+ <br>
+ <a href="<?php bloginfo('rss2_url'); ?>" class="rss">
+ zum RSS-Feed
+ </a>
+</aside>
+
+<main class="list">
+ <?php while ( have_posts() ) : the_post(); ?>
+ <article>
+ <header
+ <?php if ( has_post_thumbnail($post->ID) ) : ?>
+ style="background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>');"
+ <?php endif; ?>
+ >
+ <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
+ </header>
+
+ <div class="content">
+ <?php the_excerpt(); ?>
+ </div>
+
+ <footer>
+ <time><?php the_date(); ?></time>
+ </footer>
+ </article>
+ <?php endwhile; ?>
+
+ <div class="pagination">
+ <div class="older-posts"><?php next_posts_link( '« Ältere Posts' ); ?></div>
+ <div class="newer-posts"><?php previous_posts_link( 'Neuere Posts »' ); ?></div>
+ </div>
+</main>
+<?php get_footer(); ?>
diff --git a/landing.php b/landing.php
index 79b47763c9f31c63a8dcd01891d64a2c9c4d6095..44cdc5bc083ba8cb1a80fd5e3631ede1871b5c32 100644
--- a/landing.php
+++ b/landing.php
@@ -1,99 +1,81 @@
<?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();
- ?>
- <!-- content -->
- <div id="heading">
- <div id="heading-content">
- <div id="heading-title">
- <h1><?php bloginfo('name');?></h1>
- <h2><?php bloginfo('description');?></h2>
- </div>
- </div>
- </div>
- <div class="home-row">
- <div class="home-row-icon icon-ticker"></div>
- <div class="home-row-content">
- <p>
- <?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>
- <?php
- if ( !post_password_required($recent_posts[0]["ID"]) ) {
- echo substr(wp_strip_all_tags($recent_posts[0]["post_content"]), 0, 250).'...';
- } else {
- if (get_bloginfo('language') === 'de-DE') {
- echo "<p>Den Inhalt des Posts könnt ihr euch nach Eingabe des Passworts durchlesen :)</p>";
- } else {
- echo "<p>You can only see the content of this post after entering your password. :)</p>";
- }
- }
- ?>
- </div>
- </div>
- <div class="home-news-sidebar">
- <ul>
- <?php
- for ($i = 1; $i < 4; $i++) {
- echo '<li><a href="'.get_permalink($recent_posts[$i]["ID"]).'" class="post-title-box">'.$recent_posts[$i]["post_title"].'</a></li>';
- }
- ?>
- </ul>
- <div class="more">
- <a href="<?php echo home_url()."/blog/"; ?>"><?php
- if (get_bloginfo('language') === 'de-DE') {
- echo "Ältere Posts...";
- } else {
- echo "older posts...";
- }
- ?></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>
- <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>';
- }
- ?>
- </ul>
- <br>
- <br>
- <br>
- <?php
+?>
+<main class="landing">
+ <header>
+ <h1><?php bloginfo('name');?></h1>
+ <h2><?php bloginfo('description');?></h2>
+ </header>
+ <section class="ticker">
+ <?php echo apply_filters('the_content', $post->post_content); ?>
+ </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).'...';
+ } else {
if (get_bloginfo('language') === 'de-DE') {
- echo '<p>Ansonsten könnt ihr auch Post in den FS-Briefkasten werfen oder uns einfach irgendwo auf dem Campus abfangen. Es gibt kein Entkommen!</p>';
+ echo "<p>Den Inhalt des Posts könnt ihr euch nach Eingabe des Passworts durchlesen :)</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>';
+ echo "<p>You can only see the content of this post after entering your password. :)</p>";
}
- ?>
- </div>
+ }
+ ?>
</div>
-<?php get_footer();
-/* vim: sts=4 sw=4 et si
-*/
-?>
+ </article>
+
+ <aside>
+ <ul>
+ <?php for ($i = 1; $i < 4; $i++): ?>
+ <li><a href="<?php echo get_permalink($recent_posts[$i]["ID"])?>" class="headinglike"><?php echo $recent_posts[$i]["post_title"]?></a></li>
+ <?php endfor; ?>
+
+ </ul>
+ <div class="more">
+ <a href="<?php echo home_url()."/blog/"; ?>"><?php
+ if (get_bloginfo('language') === 'de-DE') {
+ echo "Ältere Posts...";
+ } else {
+ echo "older posts...";
+ }
+ ?></a>
+ </div>
+ </aside>
+ </section>
+ <section class="varia">
+ <ul class="seamless box-links">
+ <?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>
+
+ <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();?>
diff --git a/page.php b/page.php
index f29f72b7413ca4d94ae33a92cef15747703058fb..ea15467409cc415b7bb43128e203380618e81bf0 100644
--- a/page.php
+++ b/page.php
@@ -1,30 +1,44 @@
-<?php
-/*
- Theme: Fachschaft Computerlinguistik
- Page Template File
-*/
-
-get_header();
- ?>
- <!-- content -->
- <div class="post-container">
- <div class="post-header"
- <?php
- echo ' style="background-image:url(\'';
- if ( has_post_thumbnail($post->ID) ) {
- echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
- } else {
- echo get_header_image();
- }
- echo '\');"';?> >
- </div>
- <div class="post-title">
- <h1 class="post-title-box"><?php echo get_the_title($post->ID); ?></h1>
- </div>
- <div class="post-content">
- <?php echo apply_filters('the_content', $post->post_content); ?>
- </div>
- <div class="post-meta">
- </div>
- </div>
-<?php get_footer(); ?>
+<?php
+/**
+ * Template for pages.
+ *
+ * WordPress identifies this file by its name (which MUST be page.php).
+ *
+ * Pages make up the scaffolding of the website and can usually be reached via
+ * different menu entries. They are expected to be always correct (or else somehow archived),
+ * and the author and publication date is normally irrelevant (if anything, the date of the last edit
+ * might be relevant).
+ *
+ * This means we neither display an author nor a date here.
+ *
+ * @see https://codex.wordpress.org/Theme_Development#Pages_.28page.php.29
+ */
+
+get_header();
+?>
+<main>
+ <article>
+ <header
+ <?php
+ echo ' style="background-image:url(\'';
+ if ( has_post_thumbnail($post->ID) ) {
+ echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
+ } else {
+ echo get_header_image();
+ }
+ echo '\');"';?> >
+ <h1><?php echo get_the_title($post->ID); ?></h1>
+ </header>
+ <div class="content">
+ <?php
+ if ( !post_password_required() ) {
+ echo apply_filters('the_content', $post->post_content);
+ } else {
+ echo get_the_password_form();
+ }
+ ?>
+ </div>
+ <footer></footer>
+ </article>
+</main>
+<?php get_footer(); ?>
diff --git a/screenshot.png b/screenshot.png
index d739ecb046fa07088c70186a1527f43dc894525a..aad1517aca5b2f57ab85ce01114a8022e5b1b767 100644
Binary files a/screenshot.png and b/screenshot.png differ
diff --git a/single.php b/single.php
index a57b9f746a303d305df2f4f4a04a8ed6ef55ab80..45c1c54521e07199667337f5e28b2a4b18eb303f 100644
--- a/single.php
+++ b/single.php
@@ -1,40 +1,45 @@
-<?php
-/*
- Theme: Fachschaft Computerlinguistik
- Single Template File
-*/
-
-get_header();
- ?>
- <!-- content -->
- <div class="post-container">
- <div class="post-header"
- <?php
- echo ' style="background-image:url(\'';
- if ( has_post_thumbnail($post->ID) ) {
- echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
- } else {
- echo get_header_image();
- }
- echo '\');"';?> >
- </div>
- <div class="post-title">
- <h1 class="post-title-box"><?php echo get_the_title($post->ID); ?></h1>
- </div>
- <div class="post-content">
- <?php
- if ( !post_password_required() ) {
- echo apply_filters('the_content', $post->post_content);
- } else {
- echo get_the_password_form();
- }
- ?>
- </div>
- <div class="post-meta">
- <?php
- echo '<div class="post-meta-author">'.get_the_author_meta('display_name', $post->post_author).'</div>';
- echo '<div class="post-meta-timestamp">'.get_the_date().'</div>';
- ?>
- </div>
- </div>
-<?php get_footer(); ?>
+<?php
+/**
+ * Template for single posts.
+ *
+ * WordPress identifies this file by its name (which MUST be single.php)
+ * and displays it whenever a single post is displayed.
+ *
+ * Single posts display an author and a post date and are general used
+ * for news articles (so a chronologically ordered list of posts makes sense,
+ * you would call that a "blog").
+ *
+ * @see https://codex.wordpress.org/Theme_Development#Single_Post_.28single.php.29
+ */
+
+get_header();
+?>
+<main>
+ <article>
+ <header
+ <?php
+ echo ' style="background-image:url(\'';
+ if ( has_post_thumbnail($post->ID) ) {
+ echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
+ } else {
+ echo get_header_image();
+ }
+ echo '\');"';?> >
+ <h1><?php echo get_the_title($post->ID); ?></h1>
+ </header>
+ <div class="content">
+ <?php
+ if ( !post_password_required() ) {
+ echo apply_filters('the_content', $post->post_content);
+ } else {
+ echo get_the_password_form();
+ }
+ ?>
+ </div>
+ <footer>
+ <div class="post-meta-author"><?php echo get_the_author_meta('display_name', $post->post_author);?></div>
+ <time><?php echo get_the_date();?></time>
+ </footer>
+ </article>
+</main>
+<?php get_footer(); ?>
diff --git a/style.css b/style.css
index 3ad206746f03f8b97858e171161385f00e04a4fc..0a840615d3ba644dcd3547148c6042d3a5ca9400 100644
--- a/style.css
+++ b/style.css
@@ -1,952 +1,936 @@
/*
-Theme Name: Fachschaft Computerlinguistik
-Theme URI: http://personads.me/x/fscoli-theme
-Description: The custom WordPress Theme for the Fachschaft Computerlinguistik in Heidelberg.
-Author: personads :: Maximilian Mueller-Eberstein
-Author URI: http://personads.me/
-Version: 0.87
-Tags: fs-coli, custom
-
-License: GNU General Public License v3.0
-License URI: http://www.gnu.org/licenses/gpl-3.0.html
-
-Fachschaft Computerlinguistik WordPress Theme, Copyright 2015 personads
-Fachschaft Computerlinguistik is distributed under the terms of the GNU GPL
-*/
-
-/* - element styles */
+ * Theme Name: fscoli next
+ * 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. +++ Detaillierte Angaben zu Lizenz, Änderungen und beitragenden Autoren finden sich in der style.css sowie im beiliegenden README.
+ * Tags: custom-header, custom-menu, blog, education, full-width-template
+ *
+ * Author: personads :: Maximilian Müller-Eberstein (ursprüngliche Version und Design); Jakob Moser (Code-Rewrite)
+ * Author URI: https://personads.me/
+ *
+ * Version: 1.0.0
+ *
+ * License: GNU General Public License v3.0
+ * License URI: https://www.gnu.org/licenses/gpl-3.0.html
+ *
+ * The "fscoli next" WordPress theme is based on the "Fachschaft Computerlinguistik WordPress Theme", Copyright 2015 personads.
+ * "Fachschaft Computerlinguistik WordPress Theme" is distributed under the terms of the GNU GPL and can be obtained at
+ * https://gitlab.cl.uni-heidelberg.de/fachschaft/wp-theme/-/tags/original
+ *
+ * The "fscoli next" WordPress theme contains modifications made by Jakob Moser (2020--2021), which are listed in more detail in
+ * the README.md provided with this theme. "fscoli next" is distributed under the terms of the GNU GPL.
+ *
+ * This file contains CSS rules adapted from the Stack Overflow answer https://stackoverflow.com/a/52226523/
+ * (question title: "Fixed header in CSS Grid") by binaryfunt (https://stackoverflow.com/users/3217306/binaryfunt),
+ * licensed under CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/). The adapted section is marked in the
+ * code below with @@@, where an explanation of the changes can also be found.
+ */
+
* {
- margin:0px;
- padding:0px;
+ margin: 0;
+ padding: 0;
}
+/* ==== Structural elements ==== */
body {
- position:absolute;
- top:0px;
- right:0px;
- bottom:0px;
- left:0px;
- font-family: "Open Sans", sans-serif;
- font-size: 17px;
- color:#242424;
- background:#fff;
- text-align:left;
-}
-
-a {
- color:#900;
- text-decoration:none;
- border-style:solid;
- border-width:0px 0px 1px 0px;
- border-color:#900;
- transition:text-shadow 0.2s;
+ /* Variables */
+ --accent-color: #990000;
+ --menu-shadow-color: #8a8a8a;
+ --light-gray: #cacaca;
+ --text-color: #242424;
+ --background-color: #ffffff;
+ --shadow-color: #424242;
+
+ /* Layout */
+ display: grid;
+ grid-template-rows: min-content 1fr min-content;
+ grid-template-columns: 2fr 8fr;
+ min-height: 100vh;
+
+ /* Font and appearance */
+ font-family: "Open Sans", sans-serif;
+ font-size: 17px;
+ color: var(--text-color);
+ background: var(--background-color);
}
-a:hover {
- text-shadow:0px 0px 1px #cacaca;
+body.has-admin-bar {
+ min-height: calc(100vh - 32px);
}
-a img {
- border-style:none;
+main {
+ display: grid;
}
-h1 {
- font-size:1.75em;
- font-weight:normal;
+/* By default: Let header, main and footer span the entire page */
+body > header,
+main,
+body > footer {
+ grid-column-start: 1;
+ grid-column-end: 3;
}
-h3 {
- margin-bottom: 10px;
-}
+/* However, when there is an aside, place the aside in the left column and main in the right column */
+body > aside {
+ grid-column-start: 1;
+ grid-column-end: 2;
-hr {
- border:0px;
- height:1px;
- margin:1em 0em 1em 0em;
- background-image:-webkit-linear-gradient(left, rgba(153,0,0,0), rgba(153,0,0,0.75), rgba(153,0,0,0));
- background-image:-moz-linear-gradient(left, rgba(153,0,0,0), rgba(153,0,0,0.75), rgba(153,0,0,0));
- background-image:-ms-linear-gradient(left, rgba(153,0,0,0), rgba(153,0,0,0.75), rgba(153,0,0,0));
+ padding: 1em;
+ background-color: var(--background-color);
+ border-right: 2px solid var(--accent-color);
+ box-shadow: 0 0 5px var(--shadow-color);
}
-table, th, tr, td {
- border:solid;
- border-color:rgba(153,0,0,0.2);
- border-collapse:collapse;
+body > aside + main {
+ grid-column-start: 2;
+ grid-column-end: 3;
}
-tr:nth-child(odd) {
- background-color:rgba(255,255,255,0.2);
+/* A levitating aside only takes up the height its content needs and has a top margin, which looks less
+massive than the classical aside that takes up all the page height */
+body > aside.levitating {
+ margin-top: 2em;
+ height: max-content;
}
-tr:nth-child(even) {
- background-color:rgba(153,0,0,0.1);
+/* -- Header (containing the menu), footer (containing copyright info), potential sidebars -- */
+body > header,
+body > footer,
+body > aside h1 {
+ font-family: "Inconsolata", monospace;
}
-td, th {
- padding:3px;
-}
+body > header {
+ z-index: 100;
+ border-style: solid;
+ border-width: 0px 0px 4px 0px;
+ border-color: var(--accent-color);
+ box-shadow: 0px 0px 15px var(--shadow-color);
-th {
- font-weight:normal;
- border-style:solid;
- border-width:0px 0px 2px 0px;
- border-color:#900;
- background-color:rgba(153,0,0,0.5);
- color:#fff;
+ background-color: var(--background-color);
}
-ul, ol {
- margin-left:1.5em;
+/* @@@ The following lines of code are adapted from https://stackoverflow.com/a/52226523/ (license details above). @@@
+ *
+ * We modified the CSS selector for the header and included another CSS rule in case the
+ * admin bar is shown before the header.
+ */
+body > header {
+ position: sticky;
+ top: 0;
}
-ul li {
- list-style: square;
+body.has-admin-bar > header {
+ top: 32px;
}
+/* @@@ End of adapted code @@@ */
-select {
- -webkit-appearance:none;
- appearance:none;
- margin:0.25em;
- padding:0.25em 1.5em 0.25em 0.25em;
- background-image:url("img/dropdown.png");
- background-repeat: no-repeat;
- background-position: center right;
- background-size: contain;
- background-color: #fff;
- border: 1px solid #990000;
- border-radius:5px;
- font-family: "Open Sans", sans-serif;
+body > header::before {
+ content: "";
+ position: relative;
+ float: right;
+ top: 100%;
+ border-width: 30px 0px 0px 30px;
+ border-style: solid;
+ border-color: var(--accent-color) transparent;
+ z-index: -1;
}
-input[type="password"] {
- margin: 0.25em;
- padding:0.25em;
- background-color: #fff;
- border: none;
- border-radius:5px;
- box-shadow: 0px 0px 2px #8d8d8d inset;
- font-size: 1em;
- font-family: "Open Sans", sans-serif;
+body > header::after {
+ content: "";
+ display: block;
+ position: absolute;
+ right: 0px;
+ border-width: 26px 0px 0px 26px;
+ border-style: solid;
+ border-color: var(--background-color) transparent;
+ margin-top: -2px;
+ z-index: -1;
}
-input[type="submit"] {
- margin: 0.25em;
- padding: 0.25em 0.5em;
- background-color: #fff;
+body > header .logo {
+ display: inline-block;
+ max-width: 350px;
+ max-height: 108px;
+ background-image: url("img/logo.png");
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-color: #000;
+ width: 250px;
+ height: 77px;
+ margin: 8px 0px -3px 10px;
+ transition: background-color 0.3s;
border: none;
- border-radius:5px;
- box-shadow: 0px 0px 2px #990000;
- font-size: 1em;
- font-family: "Open Sans", sans-serif;
- cursor: pointer;
- color: #990000;
- transition: box-shadow 0.2s;
}
-input[type="submit"]:hover {
- box-shadow: 0px 0px 5px #990000;
+body > header .logo:hover {
+ background-color: var(--accent-color);
}
-/* - easter egg: Pictures that change on hover - */
-.wp-block-gallery.easteregg .blocks-gallery-item:nth-child(2) {
- display: none;
+body > footer {
+ background-color: var(--light-gray);
+ box-shadow: 0px 0px 10px #8d8d8d inset;
+ color: #8d8d8d;
+ padding: 1em;
}
-.wp-block-gallery.easteregg:hover .blocks-gallery-item:nth-child(1) {
- display: none;
+body > footer .copyright {
+ float: right;
}
-.wp-block-gallery.easteregg:hover .blocks-gallery-item:nth-child(2) {
- display: flex;
+body > footer a {
+ color: #424242;
+ border: none;
}
-/* - adjust width of gallery - */
-.wp-block-gallery {
- width: 70%;
- margin-left: auto !important;
- margin-right: auto !important;
+body > aside h2 {
+ font-size: 1.1em;
+ font-weight: normal;
}
+@media (max-width: 705px) {
+ body > footer {
+ text-align: center;
+ }
-/* - general styles */
-
-img.aligncenter {
- display: block;
- margin-left: auto;
- margin-right: auto;
+ body > footer .copyright {
+ float: none;
+ display: block;
+ margin-top: 10px;
+ }
}
-img.alignleft {
- float:left;
+/* -- Navigation bar -- */
+header .nav-toggle {
+ display: none;
}
-img.alignright {
- float:right;
+header nav {
+ display: inline-block;
+ position: relative;
+ vertical-align: bottom;
}
-figcaption {
- text-align: center;
- width: 100%;
+header nav li {
+ display: inline-block;
+ padding: 3px 15px 7px 15px;
+ transition: background-color 0.3s;
+ border-radius: 5px 5px 0 0;
}
-div.logo {
- display:inline-block;
- max-width:350px;
- max-height:108px;
- background-image:url('img/logo.png');
- background-repeat:no-repeat;
- background-size:cover;
- background-color:#000;
+header nav li:hover {
+ background-color: rgba(153, 0, 0, 0.1);
}
-.logo-link {
- border: none;
+header nav li a {
+ border: none;
}
-.home-row-content.link-list {
- text-align: center;
+header nav li a[href="#"] {
+ cursor: default;
}
-ul.link-list {
- display: inline-block;
- text-align: left;
+header nav li > ul {
+ display: none;
+ position: absolute;
+ margin: 7px 0px 0px -15px;
+ padding: 0px;
+ border-width: 0px 4px 4px 4px;
+ border-style: solid;
+ border-color: var(--accent-color);
+ background-color: var(--background-color);
+ box-shadow: 0px 0px 10px var(--menu-shadow-color) inset;
}
-ul.link-list li {
- list-style: none;
- color:inherit;
-}
+header nav li > ul li {
+ display: block;
+ margin-left: -5px;
+ border-radius: 0px;
+}
+
+header nav li:hover > ul {
+ display: block;
+}
+
+@media (max-width: 615px) {
+ body > header {
+ padding-top: 5px;
+ position: static;
+ }
-ul.link-list li a {
- display:inline-block;
- margin:0.25em;
- padding: 0.3em;
- border: 1px solid #990000;
- box-shadow: 0px 0px 5px #cacaca;
- font-size:1.25em;
-}
+ body > header .logo {
+ margin: 0 auto;
+ display: block;
+ }
-div.square-icon {
- display: inline-block;
- width:1em;
- height:1em;
- margin:0.25em;
- background-repeat: no-repeat;
- background-size: contain;
- background-position: center;
- vertical-align: middle;
-}
+ header .nav-toggle {
+ display: block;
+ padding: 0 15px;
+ line-height: 35px;
+ border: none;
+ }
-/* - header styles */
+ header nav ul {
+ margin: 0;
+ padding: 0;
+ }
-#top {
- position:fixed;
- top:0px;
- right:0px;
- left:0px;
- z-index:100;
- border-style:solid;
- border-width:0px 0px 4px 0px;
- border-color:#900;
- background-color:#fff;
- box-shadow:0px 0px 15px #424242;
- font-family: 'Inconsolata', monospace;
-}
+ header nav li {
+ display: block;
+ padding: 0 15px;
+ line-height: 35px;
+ }
-#top::before {
- content:"";
- display:block;
- position:absolute;
- right:0px;
- width:0px;
- height:0px;
- bottom:-30px;
- border-width:30px 0px 0px 30px;
- border-style:solid;
- border-color:#900 transparent;
-}
+ header nav li:hover {
+ border-radius: 0;
+ }
-#top::after {
- content:"";
- display:block;
- position:absolute;
- right:0px;
- width:0px;
- height:0px;
- bottom:-25px;
- border-width:26px 0px 0px 26px;
- border-style:solid;
- border-color:#fff transparent;
-}
+ header nav li > ul {
+ display: block;
+ border: none;
+ box-shadow: none;
+ position: inherit;
+ margin: 0;
+ padding: 0;
+ }
+
+ header nav li > ul li {
+ margin-left: 0;
+ }
+
+ header nav {
+ display: none;
+ }
-#top div.logo {
- width:250px;
- height:77px;
- margin:8px 0px -3px 10px;
- transition:background-color 0.3s;
+ header nav:target {
+ display: block;
+ }
}
-#top div.logo:hover {
- background-color:#900;
+/* ==== General styles: Articles ==== */
+article {
+ padding: 2em;
}
-#top-padding {
- width:100%;
- height:85px;
+article .content p {
+ margin: 1em 0;
}
-/* -- menu styles */
+article .content img {
+ max-width: 100%;
+ height: auto;
+}
-.menu-toggle {
- display: none;
+article footer time {
+ font-size: 0.7em;
+ display: block;
}
-#menu-container {
- display:inline-block;
- position:relative;
- height:28px;
- white-space:nowrap;
- vertical-align:bottom;
+article .content h1,
+article .content h2 {
+ margin: 0.25em 0em;
+ padding: 0.25em;
+ border-style: solid;
+ border-color: var(--accent-color);
+ border-width: 0px 0px 0px 2px;
}
-#menu-container a {
- border:none;
- transition:none;
+article > header h1,
+article > header h3 a,
+.headinglike {
+ display: inline-block;
+ padding: 0.5em;
+ background-color: rgba(0, 0, 0, 0.8);
+ border-style: solid;
+ border-color: var(--accent-color);
+ border-width: 0 0 0 2px;
+ box-shadow: 0 0 3px var(--shadow-color);
+ text-align: left;
+ font-family: "Inconsolata", monospace;
+ font-weight: normal;
+ color: #fff;
+ margin-bottom: -2.5em;
+}
+
+/* ==== Custom styles: Articles on their own page (page.php or single.php) ==== */
+article:only-child {
+ display: grid;
+ grid-template-rows: max-content 1fr max-content;
}
-#menu-container a[href="#"] {
- cursor: default;
+article:only-child > header {
+ width: 100%;
+ height: 200px;
+ margin: -2em 0 0 -2em;
+ padding: 2em;
+ background-image: url("img/header.jpg");
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ box-shadow: 0px 0px 15px var(--shadow-color) inset;
+
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
+ justify-items: left;
+ align-items: end;
}
-#menu-container a:hover {
- text-decoration:none;
+article:only-child > footer {
+ margin: 2em -2em -2em -2em;
+ padding: 1em;
+ background-color: rgba(153, 0, 0, 0.5);
+ text-align: right;
+ color: #fff;
}
-#menu-container ul {
- display:inline;
+article:only-child .content {
+ position: relative;
+ margin-top: 2.5em;
}
-#menu-container li {
- display:inline-block;
- height:25px;
- padding:3px 15px 0px 15px;
- vertical-align:middle;
- transition:background-color 0.3s;
+article:only-child .content::after {
+ content: "";
+ display: block;
+ position: absolute;
+ right: -2em;
+ width: 0;
+ height: 0;
+ bottom: -62px;
+ border-width: 30px 0 0 30px;
+ border-style: solid;
+ border-color: #fff transparent;
}
-#menu-container li:hover {
- background-color: rgba(153,0,0,0.1);
- border-radius: 5px 5px 0px 0px;
+/* ==== Custom styles: Landing page ==== */
+main.landing > header {
+ height: 260px;
+
+ background-image: url("img/header.jpg");
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+
+ background-color: rgba(0, 0, 0, 0.2);
+ background-blend-mode: overlay;
+
+ font-family: "Inconsolata", monospace;
+ color: #fff;
+ padding-left: 2em;
+
+ display: grid;
+ grid-template-rows: 1fr max-content max-content 1fr;
+ grid-template-columns: max-content;
}
-#menu-container li:hover > ul {
- display:block;
+main.landing > header h1 {
+ grid-row-start: 2;
}
-#menu-container li ul {
- display:none;
- position:absolute;
- top:28px;
- margin:0px 0px 0px -15px;
- padding:0px;
- border-width:0px 4px 4px 4px;
- border-style:solid;
- border-color:#900;
- background:#fff;
- box-shadow:0px 0px 10px #8a8a8a inset;
+main.landing > header h2 {
+ font-size: 1.25em;
+ opacity: 0.75;
+ grid-row-start: 3;
+ text-align: right;
+ font-weight: normal;
}
-#menu-container li ul li:hover > ul {
- display:block;
+main.landing section {
+ border-style: solid;
+ border-color: var(--accent-color);
+ border-width: 1px 0px 0px 0px;
+ padding: 2em;
}
-#menu-container li ul li ul {
- display:none;
- position:absolute;
- top:0px;
- left:100%;
- margin:0px 0px 0px -10px;
- padding:0px;
- border-width:0px 0px 0px 5px;
- border-style:solid;
- border-color:#ba0000;
- background:#fff;
- box-shadow:0px 0px 10px #8a8a8a;
+main.landing section::before {
+ display: block;
+ position: absolute;
+ left: 50%;
+ width: 60px;
+ height: 60px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ transform: translate(-50%, -40%);
+ margin-top: -2em;
+ content: "";
}
-#menu-container li li {
- display:block;
- margin-left:-5px;
- border-radius: 0px;
+main.landing section.ticker::before {
+ background-image: url("img/ticker.png");
+ left: 2em;
}
-/* - heading styles */
+main.landing section.news::before {
+ background-image: url("img/news.png");
+}
-#heading {
- position:relative;
- width:100%;
- height:40%;
- background-image:url('img/header.jpg');
- background-repeat:no-repeat;
- background-size:cover;
- background-position:center;
- background-color:#cacaca;
- overflow:hidden;
+main.landing section.varia::before {
+ background-image: url("img/rocket.png");
}
-#heading-content {
- position:absolute;
- top:0px;
- right:0px;
- bottom:0px;
- left:0px;
- padding:2em;
- background-color:rgba(0,0,0,0.2);
- text-align:right;
- font-family: "Inconsolata", monospace;
- color:#fff;
+main.landing section.varia > :first-child {
+ margin-top: 1em;
}
-#heading-title {
- position:absolute;
- top:50%;
- transform:translateY(-50%);
+main.landing section.varia .seamless {
+ margin-bottom: 2.5em;
}
-#heading-title h2 {
- font-size: 1.25em;
- opacity: 0.75;
+main.landing section.news {
+ display: grid;
+ grid-template-columns: 75fr 25fr;
+ column-gap: 2em;
}
-div.home-row {
- position:relative;
- width:100%;
- border-style: solid;
- border-color: #900;
- border-width: 1px 0px 0px 0px;
+main.landing section.news article {
+ padding: 0;
}
-div.home-row-content {
- padding:2em;
+main.landing section.news article .content {
+ margin-top: 2em;
}
-div.home-row-icon {
- display: block;
- position:absolute;
- left:50%;
- width:60px;
- height:60px;
- background-repeat: no-repeat;
- background-size: contain;
- transform:translate(-50%,-40%);
+main.landing section.news aside {
+ border-style: solid;
+ border-color: var(--light-gray);
+ border-width: 0px 0px 0px 1px;
}
-div.home-row .icon-ticker {
- left: 2em;
+main.landing section.news aside li {
+ list-style: none;
+ margin: 0.25em 0;
}
-.icon-ticker {
- background-image: url("img/ticker.png");
+main.landing section.news aside li a {
+ margin-bottom: initial !important;
}
-.icon-news {
- background-image: url("img/news.png");
+main.landing section.news aside .more {
+ text-align: right;
}
-.icon-rocket {
- background-image: url("img/rocket.png");
+main.landing section.varia {
+ text-align: center;
}
-/* -- homepage news listing styles */
+/* Responsiveness for news section: Place sidebar below article if screen is to small */
+@media (max-width: 570px) {
+ main.landing section.news {
+ grid-template-columns: 1fr;
+ }
-div.home-news-main {
- display:inline-block;
- width:75%;
- vertical-align: top;
-}
+ main.landing section.news aside {
+ border: none;
+ margin-top: 2em;
+ }
-div.home-news-main-content {
- margin-right:1em;
-}
+ main.landing section.news aside ul {
+ margin-left: 0;
+ }
-div.home-news-main .post-title-box {
- margin-bottom:1em;
+ main.landing section.news aside .more {
+ line-height: 30px;
+ text-align: left;
+ }
}
-div.home-news-sidebar {
- display:inline-block;
- width:24%;
- vertical-align: top;
- border-style:solid;
- border-color:#cacaca;
- border-width:0px 0px 0px 1px;
+/* ==== Custom styles: Post listing (e.g. blog) page ==== */
+main.list {
+ padding: 0 8%;
}
-div.home-news-sidebar li {
- list-style: none;
- margin:0.25em 0;
+main.list article {
+ margin: 2em 0;
+ position: relative;
+ box-shadow: 0px 0px 10px var(--shadow-color);
}
-div.home-news-sidebar .more {
- text-align: right;
+main.list article:first-of-type {
+ margin-top: 4em;
}
-/* - posts listing styles */
-
-#content {
- width:100%;
- min-height:100%;
+main.list article > header h1 {
+ padding: 0;
+ position: absolute;
+ top: -1em;
}
-.sidebar {
- display:inline-block;
- width:20%;
- min-width:200px;
- vertical-align: top;
+main.list article > header h1 a {
+ display: block;
+ color: inherit;
+ border: none;
+ padding: 0.27em;
+}
+
+main.list .content {
+ margin-top: 1.5em;
+}
+
+main.list footer::before {
+ content: "";
+ display: block;
+ position: absolute;
+ right: 0;
+ width: 0;
+ height: 0;
+ bottom: -2em;
+ border-width: 32px 0 0 32px;
+ border-style: solid;
+ border-color: var(--light-gray) transparent;
+}
+
+main.list footer::after {
+ content: "";
+ display: block;
+ position: absolute;
+ right: 0;
+ width: 0;
+ height: 0;
+ bottom: -1.7em;
+ border-width: 30px 0 0 30px;
+ border-style: solid;
+ border-color: #fff transparent;
+}
+
+main.list footer time {
+ position: absolute;
+ top: 0.5em;
+ right: 1em;
+ font-size: 1em;
+ opacity: 0.5;
}
-.sidebar-content {
- margin:2em 0;
- padding:1em;
- background-color:#fff;
- border-style: solid;
- border-color: #990000;
- border-width: 0px 2px 0px 0px;
- box-shadow:0px 0px 5px #424242;
+main.list article .content {
+ position: relative;
+ z-index: 1;
}
-.sidebar-content h1, h2 {
- font-weight:normal;
+main.list article > header {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background-size: 100%;
+ background-position-y: center;
}
-.sidebar-content h1 {
- font-family: "Inconsolata", monospace;
- font-size: 1.75em;
+/* Only apply background-color and blending to headers that have a background-image set, otherwise all posts would have grey background */
+main.list article header[style*="background-image"] {
+ background-blend-mode: overlay;
+ background-color: #e8e8e8;
}
-.sidebar-content h2 {
- font-size: 1.1em;
+main.list article > header h1 {
+ left: 1.1em;
}
-.sidebar-content .link-list li a {
- font-size: 0.8em;
+.list-meta > h1::before {
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ margin: 0.25em;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+ vertical-align: middle;
+ background-image: url("img/news.png");
+ content: "";
}
-.sidebar-content select {
- margin-left: 2em;
+.list-meta select {
+ margin-left: 2em;
}
-.sidebar-content .rss-link {
- display: block;
- border: none;
- font-size: 0.8em;
- color:#8d8d8d;
- text-align:right;
+.list-meta a.rss {
+ display: block;
+ border: none;
+ font-size: 0.8em;
+ color: #8d8d8d;
+ text-align: right;
}
-.posts-listing {
- display:inline-block;
- position:relative;
- width:75%;
- min-width:700px;
- vertical-align: top;
+.list-meta .categories li a {
+ font-size: 0.8em;
}
-.posts-container {
- margin-left:55%;
- width:90%;
- transform:translateX(-50%);
+/* ==== Utilities: Pagination ==== */
+.pagination {
+ display: grid;
+ grid-template-columns: max-content 1fr max-content;
+ margin-bottom: 1em;
}
-.posts-listing .post-container {
- margin:4em 0;
- box-shadow: 0px 0px 10px #424242;
+.pagination a {
+ display: block;
+ margin: 0.25em;
+ padding: 0.3em;
+ border: 1px solid var(--accent-color);
+ box-shadow: 0 0 5px var(--light-gray);
}
-.posts-listing .post-content::before {
- content:"";
- display:block;
- position:absolute;
- right:-2em;
- width:0px;
- height:0px;
- bottom:-5em;
- border-width:32px 0px 0px 32px;
- border-style:solid;
- border-color:#cacaca transparent;
+.pagination .older-posts {
+ grid-column-start: 1;
+ grid-column-end: 2;
}
-.posts-listing .post-content::after {
- content:"";
- display:block;
- position:absolute;
- right:-2em;
- width:0px;
- height:0px;
- bottom:-4.7em;
- border-width:30px 0px 0px 30px;
- border-style:solid;
- border-color:#fff transparent;
+.pagination .newer-posts {
+ grid-column-start: 3;
+ grid-column-end: 4;
}
-.post-content.error404 {
- text-align:center;
+/* ==== Utilities: Search term strings ==== */
+.search-term {
+ color: gray;
}
-.post-content.error404 .icon {
- margin: 0.25em;
- font-size: 10em;
+.search-term::before {
+ content: "„";
}
-.post-content.error404 div {
- display: inline-block;
- vertical-align: middle;
+.search-term:empty::before {
+ content: "Kein Suchterm angegeben";
+ font-style: italic;
}
-.posts-listing .post-header {
- position:absolute;
- top:0px;
- left:0px;
- bottom:0px;
- right:0px;
- z-index:-1;
- height:auto;
- margin:0px;
- padding:0px;
- box-shadow:none;
- opacity:0.2;
+.search-term::after {
+ content: "“";
}
-.posts-listing .post-title {
- position:absolute;
- top:-0.5em;
+.search-term:empty::after {
+ content: "";
}
-.posts-listing .post-meta-timestamp {
- position:absolute;
- top:0.5em;
- right:1em;
- font-size: 1em;
- opacity:0.5;
+/* ==== Utilities: Jumbo content (used on 404 page) ==== */
+.content.jumbo {
+ text-align: center;
}
-.page-selector a {
- display:inline-block;
- margin:0.25em;
- padding: 0.3em;
- border: 1px solid #990000;
- box-shadow: 0px 0px 5px #cacaca;
+.content.jumbo .icon {
+ margin: 0.25em;
+ font-size: 10em;
}
-.page-selector-previous {
- text-align:left;
+.content.jumbo div {
+ display: inline-block;
+ vertical-align: middle;
}
-.page-selector-previous a {
- border-left-width: 2px;
+/* ==== Text markup elements ==== */
+a {
+ color: var(--accent-color);
+ border-color: var(--accent-color);
+ text-decoration: none;
+ border-style: solid;
+ border-width: 0 0 1px 0;
+ transition: text-shadow 0.2s;
}
-.page-selector-next {
- text-align:right;
+a.box,
+.box-links a {
+ display: inline-block;
+ margin: 0.25em;
+ padding: 0.3em;
+ border: 1px solid var(--accent-color);
+ box-shadow: 0 0 5px var(--light-gray);
+ font-size: 1.25em;
}
-.page-selector-next a {
- border-right-width: 2px;
+a:hover {
+ text-shadow: 0 0 1px var(--light-gray);
}
-/* - post styles */
-
-.post-container {
- position:relative;
- margin:0px 0px 0px 0px;
- padding:2em;
+a img {
+ border-style: none;
}
-.post-header {
- width:100%;
- height:200px;
- margin:-2em 0 0 -2em;
- padding:2em;
- background-image: url("img/header.jpg");
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
- box-shadow: 0px 0px 15px #424242 inset;
+h1 {
+ font-size: 1.75em;
+ font-weight: normal;
}
-.post-title .post-title-box {
- margin-top: -1.5em;
+h3 {
+ margin-bottom: 10px;
}
-.post-title-box {
- display:inline-block;
- padding:0.5em;
- background-color: rgba(0,0,0,0.8);
- border-style:solid;
- border-color:#900;
- border-width:0px 0px 0px 2px;
- box-shadow:0px 0px 3px #424242;
- text-align:left;
- font-family: "Inconsolata", monospace;
- font-weight: normal;
- color:#fff;
+hr {
+ border: none;
+ height: 1px;
+ margin: 1em 0 1em 0;
+ background: linear-gradient(
+ to left,
+ transparent,
+ rgba(153, 0, 0, 0.75),
+ transparent
+ );
}
-.post-content {
- position:relative;
- margin-top:1.5em;
+img.aligncenter {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
}
-.post-content::after {
- content:"";
- display:block;
- position:absolute;
- right:-2em;
- width:0px;
- height:0px;
- bottom:-62px;
- border-width:30px 0px 0px 30px;
- border-style:solid;
- border-color:#fff transparent;
+img.alignleft {
+ float: left;
}
-.post-content p {
- margin-bottom: 1em;
+img.alignright {
+ float: right;
}
-.post-content > img {
- max-width:100%;
- height:auto;
+figcaption {
+ text-align: center;
+ width: 100%;
}
-.post-content > h1, .post-content > h2 {
- margin:0.25em 0em;
- padding:0.25em;
- border-style: solid;
- border-color: #990000;
- border-width: 0px 0px 0px 2px;
+/* -- Tables -- */
+table,
+th,
+tr,
+td {
+ border: solid;
+ border-color: rgba(153, 0, 0, 0.2);
+ border-collapse: collapse;
}
-.post-meta {
- margin:2em -2em -2em -2em;
- padding:1em;
- background-color:rgba(153,0,0,0.5);
- text-align:right;
- color:#fff;
+tr:nth-child(odd) {
+ background-color: rgba(255, 255, 255, 0.2);
}
-.post-meta-timestamp {
- font-size:0.7em;
+tr:nth-child(even) {
+ background-color: rgba(153, 0, 0, 0.1);
}
-/* - footer styles */
-
-#footer {
- width:100%;
- background-color:#cacaca;
- box-shadow: 0px 0px 10px #8d8d8d inset;
- font-family: "Inconsolata", monospace;
- color:#8d8d8d;
+td,
+th {
+ padding: 3px;
}
-#footer > div {
- padding: 1em;
+th {
+ font-weight: normal;
+ border-style: solid;
+ border-width: 0px 0px 2px 0px;
+ border-color: var(--accent-color);
+ background-color: rgba(153, 0, 0, 0.5);
+ color: #fff;
}
-#footer .copyright {
- float: right;
+/* -- Lists -- */
+ul,
+ol {
+ margin-left: 1.5em;
}
-#footer a {
- color:#424242;
- border:none;
+ul li {
+ list-style: square;
}
-/* - special styles */
+ul.seamless {
+ display: inline-block;
+ text-align: left;
+}
-.triple-picture-container {
- position: relative;
- width: 1024px;
- height: 574px;
- margin: 0 0 2em 50%;
- transform: translateX(-50%);
+ul.seamless li {
+ list-style: none;
+ color: inherit;
}
-.triple-picture-container img {
- display: none;
- position: absolute;
- left: 0;
- z-index: -1;
+/* -- Form elements -- */
+select {
+ -webkit-appearance: none;
+ appearance: none;
+ margin: 0.25em;
+ padding: 0.25em 1.5em 0.25em 0.25em;
+ background-image: url("img/dropdown.png");
+ background-repeat: no-repeat;
+ background-position: center right;
+ background-size: contain;
+ background-color: #fff;
+ border: 1px solid var(--accent-color);
+ border-radius: 5px;
+ font-family: "Open Sans", sans-serif;
}
-.triple-picture-container div {
- display: inline-block;
+input[type="password"] {
+ margin: 0.25em;
+ padding: 0.25em;
+ background-color: #fff;
+ border: none;
+ border-radius: 5px;
+ box-shadow: 0px 0px 2px #8d8d8d inset;
+ font-size: 1em;
+ font-family: "Open Sans", sans-serif;
}
-.triple-picture-container .triple-picture-container-first {
- width: 35%;
- height: 100%;
+input[type="submit"] {
+ margin: 0.25em;
+ padding: 0.25em 0.5em;
+ background-color: #fff;
+ border: none;
+ border-radius: 5px;
+ box-shadow: 0px 0px 2px var(--accent-color);
+ font-size: 1em;
+ font-family: "Open Sans", sans-serif;
+ cursor: pointer;
+ color: var(--accent-color);
+ transition: box-shadow 0.2s;
}
-.triple-picture-container .triple-picture-container-first img {
- display: block;
+input[type="submit"]:hover {
+ box-shadow: 0px 0px 5px var(--accent-color);
}
-.triple-picture-container .triple-picture-container-second {
- left: 35%;
- width: 30%;
- height: 100%;
+/* -- Galleries -- */
+.wp-block-gallery {
+ width: 70%;
+ margin-left: auto !important;
+ margin-right: auto !important;
}
-.triple-picture-container .triple-picture-container-second:hover img {
- display: block;
+/* Easter egg: Pictures that change on hover */
+.wp-block-gallery.easteregg .blocks-gallery-item:nth-child(2) {
+ display: none;
}
-.triple-picture-container .triple-picture-container-third {
- left: 65%;
- width: 30%;
- height: 100%;
+.wp-block-gallery.easteregg:hover .blocks-gallery-item:nth-child(1) {
+ display: none;
}
-.triple-picture-container .triple-picture-container-third:hover img {
- display: block;
+.wp-block-gallery.easteregg:hover .blocks-gallery-item:nth-child(2) {
+ display: flex;
}
-/* Pills (a rounded group of multiple button-like entries, one of which can be active (red background), inactive
- entries have a white background (therefore making the whole thing looking somewhat like a pill)*/
+/* -- Pills --
+ * Pills are a rounded group of multiple button-like entries, one of which can be active (red background), inactive
+ * entries have a white background (therefore making the whole thing looking somewhat like a pill)
+ */
.pill {
- border: 2px solid #900;
+ border: 2px solid var(--accent-color);
margin: 0;
border-radius: 10px;
display: inline-flex;
}
+
.pill li {
display: inline;
list-style: none;
- border-right: 2px solid #900;
+ border-right: 2px solid var(--accent-color);
padding: 0 7px;
cursor: pointer;
}
+
.pill li:first-child {
- border-top-left-radius: 5px;
- border-bottom-left-radius: 5px;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
}
+
.pill li:last-child {
- border: none;
- border-top-right-radius: 5px;
- border-bottom-right-radius: 5px;
+ border: none;
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
}
+
.pill li.active {
- background-color: #900;
+ background-color: var(--accent-color);
color: white;
}
-
-@media(max-width: 830px) {
- #menu-container {
- display: inherit;
- height: inherit;
- white-space: inherit;
- }
-
- #menu-container ul {
- margin: 0;
- padding: 0;
- }
-
- #menu-container li {
- display: block;
- height: inherit;
- padding: 0 15px;
- line-height: 35px;
- }
-
- #menu-container li:hover {
- border-radius: 0;
- }
-
- #menu-container li > ul {
- display: block;
- }
-
- #menu-container li ul {
- border: none;
- box-shadow: none;
- position: inherit;
- margin: 0;
- padding: 0;
- }
-
- #menu-container li li {
- margin-left: 0;
- }
-
- #top {
- position: relative;
- }
-
- #top-padding {
- display: none;
- }
-
- #top {
- padding-top: 5px;
- }
-
- #top div.logo {
- margin: 0 auto;
- display: block;
- }
-
- #heading-content {
- padding: 0;
- }
-
- #heading-title {
- position: relative;
- text-align: center;
- }
-
- div.home-news-main {
- width: 100%;
- }
-
- div.home-news-main-content {
- margin-right: 0;
- }
-
- div.home-news-sidebar {
- width: 100%;
- border: none;
- margin-top: 20px;
- }
-
- div.home-news-sidebar ul {
- margin: 0;
- }
-
- div.home-news-sidebar .more {
- text-align: left;
- line-height: 30px;
- }
-
- #footer .copyright {
- float: none;
- display: block;
- margin-top: 10px;
- }
-
- .menu-toggle {
- display: block;
- padding: 0 15px;
- margin-top: 15px;
- line-height: 35px;
- }
-
- #menu-container {
- display: none;
- }
-
- #menu-container:target {
- display: block;
- }
-}