Skip to content
Snippets Groups Projects
Commit efdde8fe authored by Jakob Moser's avatar Jakob Moser
Browse files

Further unify blog page and styles

parent e62ffab9
No related branches found
No related tags found
1 merge request!2Resolve "Rewrite theme"
Hide whitespace changes
Inline Side-by-side
index.php
+ 14
− 12
View file @ efdde8fe
......@@ -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>
<?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>
<?php endif; ?>
<div class="post-title">
<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>
</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
View file @ efdde8fe
......@@ -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
View file @ efdde8fe
......@@ -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;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment