Begin reformatting

This commit is contained in:
Rumps 2017-01-13 17:07:01 +00:00
parent df05493b43
commit ef054b321c
27 changed files with 7408 additions and 7457 deletions

View file

@ -23,22 +23,26 @@
<h2 id="page-subtitle">
~ <a href="mailto:bgoldsworthy96@gmail.com"><i class="fa fa-envelope"></i></a> ~
<a href="bitcoin:1HApEg2robrRCx4rTKKeFj25unoaX65QUc"><i class="fa fa-btc"></i></a> ~
<a href="https://www.facebook.com/Rumperuu"><i class="fa fa-facebook-official"></i></a> ~
<a href="https://twitter.com/rumperuu"><i class="fa fa-twitter"></i></a> ~
<a href="https://uk.linkedin.com/in/rumperuu"><i class="fa fa-linkedin"></i></a> ~
<a href="https://github.com/Rumperuu"><i class="fa fa-github"></i></a> ~
<i class="fa fa-key"></i> 7FDCE988 ~
</h2>
</div>
</header>
<div class="row" id="blog-row">
<ul class="col-2">
<li><a id="blog" class="hyperlink-button" href="blog">Blog</a></li>
</ul>
<div class="row" id="personal-row">
<div class="col-12">
<h3 class="frontpage-section-title col-12">Personal</h3>
<ul>
<li class="col-m-6 col-1"><a id="blog" class="hyperlink-button" href="blog">Blog</a></li>
<li class="col-m-6 col-1"><a id="wishlist" class="hyperlink-button" href="wishlist">Wishlist</a></li>
</ul>
</div>
</div>
<div class="row" id="portfolios-row">
<div class="col-12">
<h5>Portfolios</h5>
<h3 class="frontpage-section-title col-12">Portfolios</h3>
<ul>
<?php
$portfolios = array("website", "program", "writing", "video", "other");
@ -50,21 +54,20 @@
foreach (get_post_types($args, 'objects', 'and') as $post_type) {
if (in_array($post_type->name, $portfolios)) {
$num = array_search($post_type->name, $portfolios);
$buttons[$post_type->name] = "<li><a id=\"".($post_type->name)."\" class=\"hyperlink-button\" href=\"".($post_type->name)."\">".($post_type->labels->name)."</a></li>";
$buttons[$post_type->name] = "<li class=\"col-m-6 col-2\"><a id=\"".($post_type->name)."\" class=\"hyperlink-button\" href=\"".($post_type->name)."\">".($post_type->labels->name)."</a></li>";
}
}
foreach ($portfolios as $portfolio) {
echo "<div class=\"col-m-6 col-2 col-w-1\">";
echo $buttons[$portfolio];
echo "</div>";
}
?>
</ul>
</div>
</div>
<div class="row" id="experience-row">
<div class="col-12">
<h5>Experience</h5>
<h3 class="frontpage-section-title col-12">Experience</h3>
<ul>
<div class="col-m-6 col-2 col-w-1">
<li><a id="all" class="hyperlink-button" href="experience">All (WIP)</a></li>
@ -81,6 +84,7 @@
</ul>
</div>
</div>
<div class="row" id="others-row">
<div class="col-12">
<ul>
@ -93,7 +97,8 @@
</ul>
</div>
</div>
<div class="row" id="icons-row">
<!--
<div class="row" id="social-cataloguing-row">
<div class="icons-wrapper col-12 col-m-12">
<ul>
<li><a href="https://www.goodreads.com/Rumperuu"><div class="icon" style="background-image: url('http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/gr.png');"></div></a></li>
@ -104,6 +109,7 @@
</ul>
</div>
</div>
-->
</main><!-- .site-main -->
</div><!-- .content-area -->

265
style.css
View file

@ -69,7 +69,7 @@
float: left;
padding-right: 15px;
padding-left: 15px;
width: 100%;
width: 100%;
}
@media only screen and (min-width: 768px) {
@ -142,6 +142,14 @@ figcaption {
font-style: italic;
}
/******************
* 2.1.3 Special Containers
*/
#header-row {
margin-bottom: 15px;
}
/***************************************
* 2.2 Text
*/
@ -150,7 +158,7 @@ figcaption {
* 2.2.1 Headings
*/
h1, h2, h3, h3 a, h4, h5 {
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: 'Montserrat', sans-serif;
color: var(--dark);
@ -159,7 +167,7 @@ h1, h2, h3, h3 a, h4, h5 {
#website-title {
margin-left: 25px;
text-align: center;
font-size: 8em;
font-size: 3.5em;
font-weight: bold;
text-shadow: -1px -1px 0 white,
1px -1px 0 white,
@ -350,15 +358,100 @@ a:hover {
text-decoration: none;
}
li a.hyperlink-button {
width: 100%;
}
.index-item {
border-bottom: 2px solid var(--dark);
overflow: hidden;
background-color: var(--light);
height: 250px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
display: flex;
flex-direction: column;
margin-top: 7.5px;
margin-bottom: 7.5px;
}
.index-item header {
background-color: var(--light);
opacity: 0.75;
margin-top: auto;
text-align: center;
padding: 15px;
max-height: 40%;
}
.index:hover .index-item {
filter: sepia(1);
}
.index:hover .index-item:hover {
opacity: 1;
filter: none;
}
/***************************************
* 2.4 Images
*/
#frontpage-img-wrapper {
border-radius: 50%;
margin: auto;
overflow: hidden;
height: 150px;
width: 150px;
border: 2px solid #003D52;
}
#frontpage-img {
max-width: 150%;
height: 150%;
}
.entry-content img:not(.latex) {
border: 2px solid #444;
}
.latex {
vertical-align: middle;
}
.aligncenter {
text-align: center;
margin: 1em auto 1em auto;
display: block;
}
.entry-content img {
max-width: 100%;
height: auto;
}
.post-header-image {
height:100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
text-align:center;
}
.sampler {
width: 100%;
height: 60vh;
}
/*
* UNFINISHED
*/
* AUTHOR STUFF - CURRENTLY UNNECESSARY
*
.author a {
border-radius: 0 35px 35px 0;
@ -386,96 +479,6 @@ a:hover {
color: #999;
}
.index article {
border-bottom: 2px solid var(--dark);
overflow: hidden;
background-color: var(--light);
height: 250px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
display: flex;
flex-direction: column;
margin-top: 7.5px;
margin-bottom: 7.5px;
}
.index article header {
background-color: var(--light);
opacity: 0.75;
margin-top: auto;
text-align: center;
padding: 15px;
max-height: 40%;
}
.index:hover article {
filter: sepia(1);
}
.index:hover article:hover {
opacity: 1;
filter: none;
}
/*
* 4. Images
*/
#frontpage-img-wrapper {
border-radius: 50%;
margin: auto;
overflow: hidden;
height: 150px;
width: 150px;
border: 2px solid #003D52;
}
#frontpage-img {
max-width: 150%;
height: 150%;
}
.post-thumbnail {
float: left;
overflow: hidden;
width: 100%;
height: 15em;
cursor: pointer;
background-color: #fff;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.post-thumbnail .post-thumbnail-label {
position: relative;
text-align: center;
opacity: 0;
font-size: 2em;
color: #003D52;
height: 100%;
line-height: 240px;
}
.post-thumbnail:hover .post-thumbnail-label {
animation: both fadeinanddarken 0.3s;
}
.single-img .title {
position: relative;
top: 50%;
left: 30%;
}
.entry-content img:not(.latex) {
border: 2px solid #444;
}
.latex {
vertical-align: middle;
}
.author img {
padding: 5px;
border-radius: 50%;
@ -483,71 +486,10 @@ a:hover {
background-color: #95b2bf;
}
.post-header-image {
height:100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
text-align:center;
}
.aligncenter {
text-align: center;
margin: 1em auto 1em auto;
display: block;
}
*/
.blog-post .entry-content img {
height: auto;
max-width: 100%;
}
.sampler {
width: 100%;
height: 60vh;
}
/*
* 5. Article List View
*/
article.entry-header {
margin-bottom: -100px;
}
.post-details {
position: relative;
overflow: hidden;
width: auto;
margin-top: 10px;
margin-bottom: 10px;
text-align: justify;
padding: 20px;
}
.post-details header, .post-details footer, .post-details .entry-content {
width: 100%;
overflow: hidden;
line-height: 2.3em;
}
.post-details footer {
height: 4.5em;
position: absolute;
bottom: 0;
left: 0;
padding: 0 0 0 10px;
}
.author {
opacity: 0.7;
}
.author:hover {
opacity: 1;
}
.post-header-image .post-header-title {
position: absolute;
@ -983,8 +925,8 @@ float: right;
*/
@media only screen and (min-width: 768px) {
h1 {
text-align: left;
#website-title {
font-size: 4.5em;
}
.blog-post .entry-content {
width: 80%;
@ -993,7 +935,10 @@ float: right;
}
@media only screen and (min-width: 1024px) {
h5 {
#website-title {
font-size: 8em;
}
.frontpage-section-title {
text-align: left;
}
#frontpage-img-wrapper {

View file

@ -10,7 +10,7 @@
<div class="col-m-6 col-4 col-w-3">
<a href="<?php the_permalink(); ?>">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
<article id="post-<?php the_ID(); ?>" class="index-item" style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
<header class="entry-header">
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<span class="sticky-post"><?php _e( 'Featured', 'bengoldsworthy' ); ?></span>