Further unify blog page and styles (efdde8fe) · Commits · Fachschaft / fscoli-next

index.php

+12 −10

Original line number	Diff line number	Diff line
		@@ -12,9 +12,8 @@

		get_header();
		?>
		<aside class="levitating">
		<aside class="levitating list-meta">
		<h1>
		<div class="square-icon icon-news"></div>
		<?php
		if ( is_category() ) {
		single_cat_title();
		@@ -28,7 +27,7 @@ get_header();
		<br>
		<h2>Kategorien</h2>
		<br>
		<ul class="link-list">
		<ul class="categories seamless box-links">
		<?php wp_list_categories(array('title_li'=>'')); ?>
		</ul>
		<br>
		@@ -41,7 +40,7 @@ get_header();
		</select>
		<br>
		<br>
		<a href="<?php bloginfo('rss2_url'); ?>" class="rss-link">
		<a href="<?php bloginfo('rss2_url'); ?>" class="rss">
		zum RSS-Feed
		</a>
		</aside>
		@@ -49,18 +48,21 @@ get_header();
		<main class="list">
		<?php while ( have_posts() ) : the_post(); ?>
		<article>
		<header
		<?php if ( has_post_thumbnail($post->ID) ) : ?>
		<header style="background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>');"></header>
		style="background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>');"
		<?php endif; ?>
		<div class="post-title">
		>
		<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
		</div>
		<div class="post-meta-timestamp">
		<?php the_date(); ?>
		</div>
		</header>

		<div class="content">
		<?php the_excerpt(); ?>
		</div>

		<footer>
		<time><?php the_date(); ?></time>
		</footer>
		</article>
		<?php endwhile; ?>

landing.php

+1 −1

Original line number	Diff line number	Diff line
		@@ -59,7 +59,7 @@ get_header();
		</aside>
		</section>
		<section class="varia">
		<ul class="links">
		<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>

style.css

+92 −48

Original line number	Diff line number	Diff line
		@@ -79,8 +79,8 @@ body > aside.levitating {
		height: max-content;
		}

		/* -- Header (containing the menu) and footer (containing copyright info) -- */
		body > header, body > footer {
		/* -- Header (containing the menu), footer (containing copyright info), potential sidebars -- */
		body > header, body > footer, body > aside h1 {
		font-family: "Inconsolata", monospace;
		}

		@@ -150,6 +150,11 @@ body > footer a {
		border: none;
		}

		body > aside h2 {
		font-size: 1.1em;
		font-weight: normal;
		}

		/* -- Navigation bar -- */
		header .nav-toggle {
		display: none;
		@@ -218,8 +223,9 @@ article .content img {
		height: auto;
		}

		article time {
		article footer time {
		font-size: 0.7em;
		display: block;
		}

		article .content h1,
		@@ -350,9 +356,18 @@ main.landing section::before {
		}

		main.landing section.ticker::before {
		background-image: url("img/ticker.png");
		left: 2em;
		}

		main.landing section.news::before {
		background-image: url("img/news.png");
		}

		main.landing section.varia::before {
		background-image: url("img/rocket.png");
		}

		main.landing section.news {
		display: grid;
		grid-template-columns: 75fr 25fr;
		@@ -390,38 +405,6 @@ main.landing section.varia {
		text-align: center;
		}

		main.landing section.varia ul.links {
		display: inline-block;
		text-align: left;
		}

		main.landing section.varia ul.links li {
		list-style: none;
		color: inherit;
		}

		main.landing section.varia ul.links li 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;
		}

		/* ==== Custom styles: Landing page (cont.) / Utilities: Icons ==== */
		.icon-ticker, main.landing section.ticker::before {
		background-image: url("img/ticker.png");
		}

		.icon-news, main.landing section.news::before {
		background-image: url("img/news.png");
		}

		.icon-rocket, main.landing section.varia::before {
		background-image: url("img/rocket.png");
		}

		/* ==== Custom styles: Post listing (e.g. blog) page ==== */
		main.list {
		padding: 0 8%;
		@@ -433,37 +416,50 @@ main.list article {
		box-shadow: 0px 0px 10px var(--shadow-color);
		}

		main.list article > header h1 {
		padding: 0;
		position: absolute;
		top: -1em;
		}

		main.list article > header h1 a {
		display: block;
		color: inherit;
		border: none;
		padding: 0.27em;
		}

		main.list .content {
		margin-top: 1.5em;
		}

		main.list .content::before {
		main.list footer::before {
		content: "";
		display: block;
		position: absolute;
		right: -2em;
		width: 0px;
		height: 0px;
		bottom: -5em;
		border-width: 32px 0px 0px 32px;
		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 .content::after {
		main.list footer::after {
		content: "";
		display: block;
		position: absolute;
		right: -2em;
		width: 0px;
		height: 0px;
		bottom: -4.7em;
		border-width: 30px 0px 0px 30px;
		right: 0;
		width: 0;
		height: 0;
		bottom: -1.7em;
		border-width: 30px 0 0 30px;
		border-style: solid;
		border-color: #fff transparent;
		}

		main.list time {
		main.list footer time {
		position: absolute;
		top: 0.5em;
		right: 1em;
		@@ -471,6 +467,35 @@ main.list time {
		opacity: 0.5;
		}

		.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: "";
		}

		.list-meta select {
		margin-left: 2em;
		}

		.list-meta a.rss {
		display: block;
		border: none;
		font-size: 0.8em;
		color: #8d8d8d;
		text-align: right;
		}

		.list-meta .categories li a {
		font-size: 0.8em;
		}

		/* ==== Utilities: Pagination ==== */
		.pagination {
		display: grid;
		@@ -528,6 +553,15 @@ a {
		transition: text-shadow 0.2s;
		}

		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;
		}

		a:hover {
		text-shadow: 0 0 1px var(--light-gray);
		}
		@@ -618,6 +652,16 @@ ul li {
		list-style: square;
		}

		ul.seamless {
		display: inline-block;
		text-align: left;
		}

		ul.seamless li {
		list-style: none;
		color: inherit;
		}

		/* -- Form elements -- */
		select {
		-webkit-appearance: none;