evan/ewpratten.com
1
Fork 0
Code Actions

Changed up website design

Browse Source
This commit is contained in:
Evan Pratten 2020-01-21 13:56:42 -05:00
parent 88d4f5ab9e
commit 2f1f9a1663
No known key found for this signature in database
GPG Key ID: 93AC7B3D071356D3
6 changed files with 89 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/advert.html
View File

@ -13,7 +13,7 @@
adverts = [ adverts = [
'Want to waste away your period 4 english class by playing games? Check out <a href="https://rsninja.dev">rsninja.dev</a>', 'Want to waste away your period 4 english class by playing games? Check out <a href="https://rsninja.dev">rsninja.dev</a>',
'Is dark mode too cheery? Check out <a href="https://exvacuum.dev">exvacuum.dev</a>', 'Is dark mode too cheery? Check out <a href="https://exvacuum.dev">exvacuum.dev</a>',
'{Advertisement text here} <a href="https://hyperlisk.dev">hyperlisk.dev</a>' // '{Advertisement text here} <a href="https://hyperlisk.dev">hyperlisk.dev</a>'
] ]
// Display random advert // Display random advert

9
_includes/footer.html
View File

@ -1,13 +1,6 @@
<!-- <div id="particles-js"></div> --> <!-- <div id="particles-js"></div> -->
<div class="container foot" style="text-align:center;"> <br><br>
<br>
<span class="site-info">
Site design by: <a href="https://retrylife.ca">Evan Pratten</a> |
This site was last updated at: {{site.time}}
</span>
</div>
<!-- Brython --> <!-- Brython -->
<script src="/assets/js/brython.js"></script> <script src="/assets/js/brython.js"></script>

30
_includes/nav.html
View File

@ -1,19 +1,21 @@
<nav class="navbar navbar-dark sticky-top bg-dark navbar-expand-lg"> <nav class="navbar navbar-dark sticky-top bg-dark navbar-expand-lg">
<!-- Navbar content --> <!-- Navbar content -->
<!-- <div class="container"> --> <div class="container">
<a class="navbar-brand" href="{{site.baseurl}}/">{{site.title}}</a> <a class="navbar-brand" href="{{site.baseurl}}/"><span>{{site.title}}</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto"> <div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="{{site.baseurl}}/blog">Blog</a> <a class="nav-item nav-link" href="{{site.baseurl}}/blog">Blog</a>
<a class="nav-item nav-link" href="{{site.baseurl}}/projects">Projects</a> <a class="nav-item nav-link" href="{{site.baseurl}}/projects">Projects</a>
<!-- <a class="nav-item nav-link" href="{{site.baseurl}}/music">Music</a> --> <!-- <a class="nav-item nav-link" href="{{site.baseurl}}/music">Music</a> -->
<!-- <a class="nav-item nav-link" href="{{site.baseurl}}/documentation">Documentation</a> --> <!-- <a class="nav-item nav-link" href="{{site.baseurl}}/documentation">Documentation</a> -->
<a class="nav-item nav-link" href="{{site.baseurl}}/about">About</a> <a class="nav-item nav-link" href="{{site.baseurl}}/about">About</a>
</div>
</div> </div>
<!-- </div> -->
</div> </div>
</nav> </nav>
<br>

12
_layouts/about.html
View File

@ -16,6 +16,18 @@
</div> </div>
</div> </div>
<br>
<div class="reactive-bg">
<div class="post container" id="advert">
<span >
Site design by: <a href="https://retrylife.ca">Evan Pratten</a> |
This site was last updated at: {{site.time}}
</span>
</div>
</div>
{% include footer.html %} {% include footer.html %}

4
_layouts/home.html
View File

@ -7,13 +7,15 @@
{% include nav.html %} {% include nav.html %}
<!-- Header --> <!-- Header -->
<div class="header" style="height:30vh"> <div class="header container" style="height:30vh">
<div class="home-header"> <div class="home-header">
</div> </div>
</div> </div>
<div class="reactive-bg"> <div class="reactive-bg">
<div class="home container"> <div class="home container">
<div class="profile"> <div class="profile">
<img src="{{site.baseurl}}/assets/images/human-profile.jpg"> <img src="{{site.baseurl}}/assets/images/human-profile.jpg">
</div> </div>

81
assets/css/main.css
View File

@ -3,6 +3,7 @@ body {
padding: 0; padding: 0;
font-family: 'IBM Plex Mono', monospace; font-family: 'IBM Plex Mono', monospace;
font-family: 'IBM Plex Sans', sans-serif; font-family: 'IBM Plex Sans', sans-serif;
background-color: #343a40;
} }
.foot {} .foot {}
@ -19,11 +20,16 @@ body {
.header { .header {
height: 35vh; height: 35vh;
/* max-width: 1140px; */
margin: auto;
background-color: #ebeef1; background-color: #ebeef1;
background-image: url('/assets/images/banner.jpg'); background-image: url('/assets/images/banner.jpg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
overflow: hidden;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
} }
.table-fix { .table-fix {
@ -91,22 +97,42 @@ a h5 {
.post.container { .post.container {
padding: 20px; padding: 20px;
font-family: 'IBM Plex Sans', sans-serif; font-family: 'IBM Plex Sans', sans-serif;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* border-radius: 15px; border-radius: 5px;
transform: translateY(-30px); */ /* transform: translateY(-30px); */
background-color: #fff; background-color: #fff;
} }
#advert{ #advert {
/* background-color: #343a40; */ /* background-color: #343a40; */
/* color:#fff; */ /* color:#fff; */
text-align:center; text-align: center;
/* padding:5; */ padding: 10;
font-size: medium;
} }
#advert p{ #advert p {
padding:0; padding: 0;
margin:0; margin: 0;
}
.nav-item.nav-link {
padding-top: .4125rem;
padding-bottom: .3125rem;
line-height: inherit;
}
.navbar-brand span {
background-color: #fff;
color: #343a40;
font-weight: bolder;
padding-left: 5;
padding-right: 5;
}
.navbar-brand {
margin-right: 0;
color: #343a40;
} }
.home.container { .home.container {
@ -114,6 +140,8 @@ a h5 {
font-family: 'Noto Sans TC', sans-serif; font-family: 'Noto Sans TC', sans-serif;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #fff; background-color: #fff;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
} }
.container .profile { .container .profile {
@ -209,29 +237,30 @@ blockquote p {
} }
kbd { kbd {
margin: 0px 0.1em; margin: 0px 0.1em;
padding: 0.1em 0.6em; padding: 0.1em 0.6em;
border-radius: 3px; border-radius: 3px;
border: 1px solid rgb(204, 204, 204); border: 1px solid rgb(204, 204, 204);
color: rgb(51, 51, 51); color: rgb(51, 51, 51);
line-height: 1.4; line-height: 1.4;
font-size: 10px; font-size: 10px;
display: inline-block; display: inline-block;
box-shadow: 0px 1px 0px rgba(0,0,0,0.2), inset 0px 0px 0px 2px #ffffff; box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px #ffffff;
background-color: rgb(247, 247, 247); background-color: rgb(247, 247, 247);
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
} }
.highlight { .highlight {
background-color: #faf9f9; background-color: #faf9f9;
border-radius:5px; border-radius: 5px;
} }
pre { pre {
padding:3px; padding: 3px;
} }
} }