Improve pagination, re-arrange styles, remove styles yet to be dealt with (fb3be450) · Commits · Fachschaft / fscoli-next

index.php

+6 −3

Original line number	Diff line number	Diff line
		@@ -12,7 +12,7 @@

		get_header();
		?>
		<aside>
		<aside class="levitating">
		<h1>
		<div class="square-icon icon-news"></div>
		<?php
		@@ -63,7 +63,10 @@ get_header();
		</div>
		</article>
		<?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 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(); ?>

landing.php

+1 −1

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

style.css

+48 −440

Original line number	Diff line number	Diff line
		@@ -68,6 +68,13 @@ body > aside + main {
		grid-column-end: 3;
		}

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

		/* -- Header (containing the menu) and footer (containing copyright info) -- */
		body > header, body > footer {
		font-family: "Inconsolata", monospace;
		@@ -104,14 +111,21 @@ body > header::after {
		margin-top: -2px;
		}

		body > header div.logo {
		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;
		}

		body > header div.logo:hover {
		body > header .logo:hover {
		background-color: var(--accent-color);
		}

		@@ -254,170 +268,11 @@ main.landing section.news aside {
		border-width: 0px 0px 0px 1px;
		}

		/* ======================================================================= */
		/* -- Main content -- */
		main:not(.list) {
		display: grid;
		grid-template-rows: 1fr;
		}

		/* - general styles */

		img.aligncenter {
		display: block;
		margin-left: auto;
		margin-right: auto;
		}

		img.alignleft {
		float: left;
		}

		img.alignright {
		float: right;
		}

		figcaption {
		text-align: center;
		width: 100%;
		}

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

		.logo-link {
		border: none;
		}

		.home-row-content.link-list {
		main.landing section.varia {
		text-align: center;
		}

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

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

		ul.link-list li a {
		display: inline-block;
		margin: 0.25em;
		padding: 0.3em;
		border: 1px solid var(--accent-color);
		box-shadow: 0px 0px 5px var(--light-gray);
		font-size: 1.25em;
		}

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



		.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.rocket::before {
		background-image: url("img/rocket.png");
		}

		/* -- homepage news listing styles */


		.news article {
		padding: 0;
		}

		.news article .content {
		margin-top: 2em;
		}

		.news aside li {
		list-style: none;
		margin: 0.25em 0;
		}

		.news aside li a {
		margin-bottom: initial !important;
		}

		.news aside .more {
		text-align: right;
		}

		/* - search result page */
		.search-term {
		color: gray;
		margin-top: 5px;
		}

		.search-term::before {
		content: "„";
		}

		.search-term:empty::before {
		content: "Kein Suchterm angegeben";
		font-style: italic;
		}

		.search-term::after {
		content: "“";
		}

		.search-term:empty::after {
		content: "";
		}

		/* - posts listing styles */
		body > aside {
		margin: 2em 0;
		height: max-content;
		}

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

		aside .link-list li a {
		font-size: 0.8em;
		}

		aside select {
		margin-left: 2em;
		}

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

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

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

		main.list .content::before {
		content: "";
		display: block;
		@@ -454,38 +313,6 @@ main.list .content::after {
		border-color: #fff transparent;
		}

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

		.content.error404 {
		text-align: center;
		}

		.content.error404 .icon {
		margin: 0.25em;
		font-size: 10em;
		}

		.content.error404 div {
		display: inline-block;
		vertical-align: middle;
		}

		main:not(.landing).list article > 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;
		}

		main.list .post-title {
		position: absolute;
		top: -1.5em;
		@@ -499,272 +326,53 @@ main.list .post-meta-timestamp {
		opacity: 0.5;
		}

		.page-selector a {
		display: inline-block;
		margin: 0.25em;
		padding: 0.3em;
		border: 1px solid var(--accent-color);
		box-shadow: 0px 0px 5px var(--light-gray);
		}

		.page-selector-previous {
		text-align: left;
		}

		.page-selector-previous a {
		border-left-width: 2px;
		}

		.page-selector-next {
		text-align: right;
		}

		.page-selector-next a {
		border-right-width: 2px;
		}

		/* - post styles */

		article {
		padding: 2em;
		}

		main:not(.list):not(.landing) article {
		/* ==== Utilities: Pagination ==== */
		.pagination {
		display: grid;
		grid-template-rows: max-content 1fr max-content;
		}

		main:not(.landing) article > 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;
		}

		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);
		border-style: solid;
		border-color: var(--accent-color);
		border-width: 0px 0px 0px 2px;
		box-shadow: 0px 0px 3px var(--shadow-color);
		text-align: left;
		font-family: "Inconsolata", monospace;
		font-weight: normal;
		color: #fff;
		margin-bottom: -2.5em;
		}

		.post-title h1 a {
		padding: 0.27em;
		}

		.content {
		position: relative;
		margin-top: 3.5em;
		}

		main:not(.landing):not(.list) .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;
		}

		.content p {
		grid-template-columns: max-content 1fr max-content;
		margin-bottom: 1em;
		}

		.content > img {
		max-width: 100%;
		height: auto;
		}

		.content > h1,
		.content > h2 {
		margin: 0.25em 0em;
		padding: 0.25em;
		border-style: solid;
		border-color: var(--accent-color);
		border-width: 0px 0px 0px 2px;
		}

		article > footer {
		margin: 2em -2em -2em -2em;
		padding: 1em;
		background-color: rgba(153, 0, 0, 0.5);
		text-align: right;
		color: #fff;
		}

		.post-meta-timestamp {
		font-size: 0.7em;
		}

		/* - special styles */

		.triple-picture-container {
		position: relative;
		width: 1024px;
		height: 574px;
		margin: 0 0 2em 50%;
		transform: translateX(-50%);
		}

		.triple-picture-container img {
		display: none;
		position: absolute;
		left: 0;
		z-index: -1;
		}

		.triple-picture-container div {
		display: inline-block;
		}

		.triple-picture-container .triple-picture-container-first {
		width: 35%;
		height: 100%;
		}

		.triple-picture-container .triple-picture-container-first img {
		display: block;
		}

		.triple-picture-container .triple-picture-container-second {
		left: 35%;
		width: 30%;
		height: 100%;
		}

		.triple-picture-container .triple-picture-container-second:hover img {
		.pagination a {
		display: block;
		margin: 0.25em;
		padding: 0.3em;
		border: 1px solid var(--accent-color);
		box-shadow: 0 0 5px var(--light-gray);
		}

		.triple-picture-container .triple-picture-container-third {
		left: 65%;
		width: 30%;
		height: 100%;
		}

		.triple-picture-container .triple-picture-container-third:hover img {
		display: block;
		}

		@media (max-width: 830px) {
		header nav {
		display: inherit;
		height: inherit;
		white-space: inherit;
		}

		header nav ul {
		margin: 0;
		padding: 0;
		}

		header nav li {
		display: block;
		height: inherit;
		padding: 0 15px;
		line-height: 35px;
		}

		header nav li:hover {
		border-radius: 0;
		}

		header nav li > ul {
		display: block;
		}

		header nav li ul {
		border: none;
		box-shadow: none;
		position: inherit;
		margin: 0;
		padding: 0;
		}

		header nav li li {
		margin-left: 0;
		}

		header {
		position: relative;
		padding-top: 5px;
		}

		header div.logo {
		margin: 0 auto;
		display: block;
		}

		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;
		.pagination .older-posts {
		grid-column-start: 1;
		grid-column-end: 2;
		}

		div.home-news-sidebar ul {
		margin: 0;
		.pagination .newer-posts {
		grid-column-start: 3;
		grid-column-end: 4;
		}

		div.home-news-sidebar .more {
		text-align: left;
		line-height: 30px;
		/* ==== Utilities: Search term strings ==== */
		.search-term {
		color: gray;
		}

		body > footer .copyright {
		float: none;
		display: block;
		margin-top: 10px;
		.search-term::before {
		content: "„";
		}

		.nav-toggle {
		display: block;
		padding: 0 15px;
		margin-top: 15px;
		line-height: 35px;
		.search-term:empty::before {
		content: "Kein Suchterm angegeben";
		font-style: italic;
		}

		header nav {
		display: none;
		.search-term::after {
		content: "“";
		}

		header nav:target {
		display: block;
		}
		.search-term:empty::after {
		content: "";
		}

		/* ======================================================================= */

		/* ==== Text markup elements ==== */
		a {
		color: var(--accent-color);