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"> <h2 id="page-subtitle">
~ <a href="mailto:bgoldsworthy96@gmail.com"><i class="fa fa-envelope"></i></a> ~ ~ <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="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://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> ~ <a href="https://github.com/Rumperuu"><i class="fa fa-github"></i></a> ~
<i class="fa fa-key"></i> 7FDCE988 ~ <i class="fa fa-key"></i> 7FDCE988 ~
</h2> </h2>
</div> </div>
</header> </header>
<div class="row" id="blog-row">
<ul class="col-2"> <div class="row" id="personal-row">
<li><a id="blog" class="hyperlink-button" href="blog">Blog</a></li> <div class="col-12">
</ul> <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>
<div class="row" id="portfolios-row"> <div class="row" id="portfolios-row">
<div class="col-12"> <div class="col-12">
<h5>Portfolios</h5> <h3 class="frontpage-section-title col-12">Portfolios</h3>
<ul> <ul>
<?php <?php
$portfolios = array("website", "program", "writing", "video", "other"); $portfolios = array("website", "program", "writing", "video", "other");
@ -50,21 +54,20 @@
foreach (get_post_types($args, 'objects', 'and') as $post_type) { foreach (get_post_types($args, 'objects', 'and') as $post_type) {
if (in_array($post_type->name, $portfolios)) { if (in_array($post_type->name, $portfolios)) {
$num = array_search($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) { foreach ($portfolios as $portfolio) {
echo "<div class=\"col-m-6 col-2 col-w-1\">";
echo $buttons[$portfolio]; echo $buttons[$portfolio];
echo "</div>";
} }
?> ?>
</ul> </ul>
</div> </div>
</div> </div>
<div class="row" id="experience-row"> <div class="row" id="experience-row">
<div class="col-12"> <div class="col-12">
<h5>Experience</h5> <h3 class="frontpage-section-title col-12">Experience</h3>
<ul> <ul>
<div class="col-m-6 col-2 col-w-1"> <div class="col-m-6 col-2 col-w-1">
<li><a id="all" class="hyperlink-button" href="experience">All (WIP)</a></li> <li><a id="all" class="hyperlink-button" href="experience">All (WIP)</a></li>
@ -81,6 +84,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="row" id="others-row"> <div class="row" id="others-row">
<div class="col-12"> <div class="col-12">
<ul> <ul>
@ -93,7 +97,8 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="row" id="icons-row"> <!--
<div class="row" id="social-cataloguing-row">
<div class="icons-wrapper col-12 col-m-12"> <div class="icons-wrapper col-12 col-m-12">
<ul> <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> <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> </ul>
</div> </div>
</div> </div>
-->
</main><!-- .site-main --> </main><!-- .site-main -->
</div><!-- .content-area --> </div><!-- .content-area -->

265
style.css
View file

@ -69,7 +69,7 @@
float: left; float: left;
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
width: 100%; width: 100%;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
@ -142,6 +142,14 @@ figcaption {
font-style: italic; font-style: italic;
} }
/******************
* 2.1.3 Special Containers
*/
#header-row {
margin-bottom: 15px;
}
/*************************************** /***************************************
* 2.2 Text * 2.2 Text
*/ */
@ -150,7 +158,7 @@ figcaption {
* 2.2.1 Headings * 2.2.1 Headings
*/ */
h1, h2, h3, h3 a, h4, h5 { h1, h2, h3, h4, h5, h6 {
margin: 0; margin: 0;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
color: var(--dark); color: var(--dark);
@ -159,7 +167,7 @@ h1, h2, h3, h3 a, h4, h5 {
#website-title { #website-title {
margin-left: 25px; margin-left: 25px;
text-align: center; text-align: center;
font-size: 8em; font-size: 3.5em;
font-weight: bold; font-weight: bold;
text-shadow: -1px -1px 0 white, text-shadow: -1px -1px 0 white,
1px -1px 0 white, 1px -1px 0 white,
@ -350,15 +358,100 @@ a:hover {
text-decoration: none; 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 { .author a {
border-radius: 0 35px 35px 0; border-radius: 0 35px 35px 0;
@ -386,96 +479,6 @@ a:hover {
color: #999; 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 { .author img {
padding: 5px; padding: 5px;
border-radius: 50%; border-radius: 50%;
@ -483,71 +486,10 @@ a:hover {
background-color: #95b2bf; 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 { .post-header-image .post-header-title {
position: absolute; position: absolute;
@ -983,8 +925,8 @@ float: right;
*/ */
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
h1 { #website-title {
text-align: left; font-size: 4.5em;
} }
.blog-post .entry-content { .blog-post .entry-content {
width: 80%; width: 80%;
@ -993,7 +935,10 @@ float: right;
} }
@media only screen and (min-width: 1024px) { @media only screen and (min-width: 1024px) {
h5 { #website-title {
font-size: 8em;
}
.frontpage-section-title {
text-align: left; text-align: left;
} }
#frontpage-img-wrapper { #frontpage-img-wrapper {

View file

@ -10,7 +10,7 @@
<div class="col-m-6 col-4 col-w-3"> <div class="col-m-6 col-4 col-w-3">
<a href="<?php the_permalink(); ?>"> <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"> <header class="entry-header">
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?> <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<span class="sticky-post"><?php _e( 'Featured', 'bengoldsworthy' ); ?></span> <span class="sticky-post"><?php _e( 'Featured', 'bengoldsworthy' ); ?></span>