mirror of
https://github.com/jessebot/tiny_personal_website.git
synced 2025-10-01 01:48:43 +00:00
tidying up code/style, also fixing hover on footer buttons
This commit is contained in:
parent
5d3a0bd386
commit
209df575cc
3 changed files with 44 additions and 31 deletions
16
css/main.css
16
css/main.css
|
|
@ -42,12 +42,12 @@ h3, h4, h5 {
|
|||
.top-desc {
|
||||
opacity: .7;
|
||||
background-color:rgba(0, 0, 0, 0.5);
|
||||
width: 375px;
|
||||
height: 150px;
|
||||
width: 390px;
|
||||
height: 170px;
|
||||
font-size: small;
|
||||
font-family: 'Cutive Mono';
|
||||
color: white;
|
||||
padding: .5rem;
|
||||
padding: 1.1rem;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 60px;
|
||||
|
|
@ -64,16 +64,13 @@ h3, h4, h5 {
|
|||
.card-footer {
|
||||
padding: .5rem 1.25rem;
|
||||
}
|
||||
.circle :hover,
|
||||
.circle :focus {
|
||||
.circle :hover {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
-moz-border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
margin-right: 20px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 3;
|
||||
|
|
@ -181,11 +178,8 @@ h3, h4, h5 {
|
|||
top: 8%;
|
||||
left: 5%;
|
||||
}
|
||||
.card {
|
||||
width: 475px;
|
||||
}
|
||||
.top-desc {
|
||||
top: -20px;
|
||||
left: 121px;
|
||||
left: 107px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
</div><!-- /.container -->
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
% include('header.tpl')
|
||||
<div class="container">
|
||||
<div class="card mx-auto">
|
||||
<img class="img-fluid rounded" src="/images/{{globals['image']}}" alt="What I look like.">
|
||||
<img class="img-fluid rounded" src="/images/{{globals['image']}}"
|
||||
alt="What I look like.">
|
||||
<!-- overlay -->
|
||||
<pre class="top-desc rounded">
|
||||
{{globals['name'].upper()}} = {'occupation': '{{globals['occupation']}}',
|
||||
|
|
@ -37,21 +38,32 @@
|
|||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="dropdown">
|
||||
<button class="dropdown-toggle border-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img src="/images/googledocs.svg" class="img-fluid docs-img">Resume
|
||||
<button class="dropdown-toggle border-0"
|
||||
type="button" id="dropdownMenuButton"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<img src="/images/googledocs.svg"
|
||||
class="img-fluid docs-img">Resume
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="menu-drop-item" target="_blank" href="{{globals['resume_live_doc_URL']}}" role="button" data-toggle="tooltip" data-placement="bottom" title="Go to Google doc, or download directly">Live Doc</a>
|
||||
<a class="menu-drop-item" target="_blank"
|
||||
href="{{globals['resume_live_doc_URL']}}" role="button"
|
||||
data-toggle="tooltip" data-placement="right"
|
||||
title="Google doc">Live Doc</a>
|
||||
<h6 class="dropdown-header">Direct Downloads</h6>
|
||||
<a class="menu-drop-item" href="{{globals['resume_pdf_URL']}}">Download .PDF</a>
|
||||
<a class="menu-drop-item" href="{{globals['resume_docx_URL']}}">Download .Docx</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="menu-drop-item"
|
||||
href="{{globals['resume_pdf_URL']}}">Download .PDF</a>
|
||||
<a class="menu-drop-item"
|
||||
href="{{globals['resume_docx_URL']}}">Download .Docx</a>
|
||||
</div> <!-- dropdown-menu -->
|
||||
</div> <!-- dropdown -->
|
||||
</li>
|
||||
</ul>
|
||||
</div> <!-- card header -->
|
||||
<div class="card-block">
|
||||
<h4 class="card-title"><span class="text-muted">Hi, I'm</span> {{globals['name']}}.</h4>
|
||||
<h4 class="card-title">
|
||||
<span class="text-muted">Hi, I'm</span> {{globals['name']}}.
|
||||
</h4>
|
||||
<p class="card-text">
|
||||
{{globals['profile_blurb']}}
|
||||
</p>
|
||||
|
|
@ -59,19 +71,27 @@
|
|||
<div class="card-footer">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-6">
|
||||
<a target="_blank" href="{{globals['github_URL']}}" role="button" data-toggle="tooltip" data-placement="bottom" title="Check out my GitHub">
|
||||
<img src="/images/github-cat.svg" class="img-fluid" style="height: 48px";>
|
||||
</a>
|
||||
<div class="circle">
|
||||
<a target="_blank" href="{{globals['github_URL']}}"
|
||||
role="button" data-toggle="tooltip" data-placement="right"
|
||||
title="GitHub" style="box-shadow: none;">
|
||||
<img src="/images/github-cat.svg" class="img-fluid"
|
||||
style="height: 48px;">
|
||||
</a>
|
||||
</div> <!-- circle -->
|
||||
</div> <!-- col -->
|
||||
<div class="col-6">
|
||||
<div class="circle">
|
||||
<a target="_blank" href="{{globals['linkedin_URL']}}" role="button" data-toggle="tooltip" data-placement="bottom" title="Connect with me on Linkedin">
|
||||
<img src="/images/linkedin.svg" class="img-fluid" style="height: 48px";>
|
||||
<a target="_blank" href="{{globals['linkedin_URL']}}"
|
||||
role="button" data-toggle="tooltip" data-placement="left"
|
||||
title="Linkedin" style="box-shadow: none;">
|
||||
<img src="/images/linkedin.svg" class="img-fluid" style="height: 48px;">
|
||||
</a>
|
||||
</div><!-- circle -->
|
||||
</div> <!-- col -->
|
||||
</div> <!-- row -->
|
||||
</div> <!-- row -->
|
||||
</div> <!-- card footer -->
|
||||
</div> <!-- card -->
|
||||
</div><!-- /.container -->
|
||||
|
||||
% include('footer.tpl')
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue