jessebot/tiny_personal_website
1
0
Fork 0
mirror of https://github.com/jessebot/tiny_personal_website.git synced 2025-10-01 01:48:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding responsive-ness

Browse source
This commit is contained in:
JesseBot 2017-07-16 03:43:52 +00:00
parent 6122551c72
commit 5d3a0bd386
2 changed files with 49 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

55
css/main.css
View file

@ -30,10 +30,6 @@ h3, h4, h5 {
font-weight: lighter;
}
h5 {
margin-left:5px;
}
/**********card and nav**********/
.card {
border: 1px solid #383737;
@ -41,6 +37,7 @@ h5 {
background-color: #3d3d3d;
color: white;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
width: 350px;
}
.top-desc {
opacity: .7;
@ -52,8 +49,8 @@ h5 {
color: white;
padding: .5rem;
position: absolute;
top: -20px;
left: 121px;
top: -30px;
left: 60px;
bottom: 0px;
right: 0px;
box-shadow: 2px 2px 4px 0px rgba(21, 21, 21, 0.75);
@ -130,27 +127,65 @@ h5 {
text-align: center;
}
.container {
position: fixed;
padding: 0;
top: 7%;
left: 7%;
}
@media (min-width: 576px) {
.container {
padding: 40px 10px 20px 10px;
top: 8%;
left: 10%;
}
.top-desc {
top: -30px;
left: 60px;
}
.card {
width: 400px;
}
}
@media (min-width: 768px) {
.container {
padding: 40px 0px 20px 0px;
top: 8%;
left: 13%;
}
.top-desc {
top: -30px;
left: 60px;
}
.card {
width: 400px;
}
}
@media (min-width: 992px) {
.container {
padding: 40px 0px 20px 0px;
top: 8%;
left: 5%;
}
.card {
width: 475px;
}
.top-desc {
top: -20px;
left: 121px;
}
}
@media (min-width: 1200px) {
.container {
padding: 40px 50px 0px 50px;
top: 8%;
left: 5%;
}
.card {
width: 475px;
}
.top-desc {
top: -20px;
left: 121px;
}
}

12
views/index.tpl
View file

@ -1,11 +1,9 @@
% include('header.tpl')
<div class="container align-self-center">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-9 col-md-11 col-sm-12">
<div class="card mx-auto" style="width: 475px;">
<img class="img-fluid" src="/images/{{globals['image']}}" alt="What I look like.">
<div class="container">
<div class="card mx-auto">
<img class="img-fluid rounded" src="/images/{{globals['image']}}" alt="What I look like.">
<!-- overlay -->
<pre class="top-desc">
<pre class="top-desc rounded">
{{globals['name'].upper()}} = {'occupation': '{{globals['occupation']}}',
% final_item = len(globals['skills']) - 1
% for i, skill in enumerate(globals['skills']):
@ -75,7 +73,5 @@
</div> <!-- row -->
</div> <!-- card footer -->
</div> <!-- card -->
</div> <!-- col -->
</div> <!-- row -->
% include('footer.tpl')