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

OVERHAULED EVERYTHING. Totally new fresh style

Browse source
This commit is contained in:
JesseBot 2018-07-11 18:47:31 +00:00
parent e2ca07ab37
commit 94f52d9802
12 changed files with 19487 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

6805
css/bootstrap.css vendored Normal file
View file

File diff suppressed because it is too large Load diff

11
css/bootstrap.min.css vendored Executable file
View file

File diff suppressed because one or more lines are too long

175
css/font-style.css Normal file
View file

File diff suppressed because one or more lines are too long

884
css/main2.css Normal file
View file

@ -0,0 +1,884 @@
/*!
* BLOCKS - Responsive Dashboard Theme
*
* Copyright 2013
* Created by: Carlos Alvarez
* URL: http://Alvarez.is
* Designed and built based on Twitter Bootstrap.
*/
/* COLOR REFERENCE
- #1f1f1f (Background Color)
- #3d3d3d (Dash-unit and half-unit Section)
- #262626 (Footer)
- #fa1d2d (Red - Used in selectors, parragraphs, bars and other)
- #b2c831 (Green - Used in titles, badges, bars and other)
- #bdbdbd & #fff (Font colors)
*/
/**********BASE CONFIGURATIONS**********/
body {
background:#1f1f1f;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-family: 'Raleway', sans-serif;}
h3,h4 , h5 {
font-family: 'Open Sans', sans-serif;
font-weight:lighter;
}
h2{
font-size:22px;
}
h3 {
font-size:46px;
color:#b2c831
}
h5 {
color:#b2c831;
margin-left:5px;
}
/***********BLOCKS & WRAPS***********/
.aboutText {
padding-left: 10px;
padding-right: 5px;
padding-bottom: 10px;
}
.main-img {
border: 1px solid #383737;
background-image: url(../images/sep-half.png);
background-color: #3d3d3d;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
margin-top: 15px;
margin-bottom: 15px;
padding-left: 10px;
padding-right: 10px;
}
/*--- Dash Unit / Used in Dashboard page ---*/
.dash-unit {
margin-bottom: 30px;
padding-bottom:10px;
border: 1px solid #383737;
background-image:url('../images/sep-half.png');
background-color: #3d3d3d;
color:white;
/*--- height:290px; ---*/
}
.dash-unit:hover {
background-color: #4f4f4f;
-moz-box-shadow: 3px 3px 2px 0px #151515;
-webkit-box-shadow: 3px 3px 2px 0px #151515;
box-shadow: 3px 3px 2px 0px #151515;
}
.dash-unit dtitle {
font-size:11px;
text-transform:uppercase;
color:#ffffff;
margin:8px;
padding:0px;
height:inherit
}
.dash-unit hr {
border: 0;
border-top: 1px solid #151515;
border-top-style: dashed;
margin-top:3px;
}
.dash-unit h1 {
font-family: 'Raleway', sans-serif;
font-weight:300;
font-size: 20px;
line-height: 2px;
letter-spacing: 0px;
color: #ffffff;
padding-top:10px;
padding-left:5px;
margin-top:2px;
text-align:center;
}
.dash-unit h2 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 26px;
letter-spacing: 0px;
color: #ffffff;
padding-top:10px;
padding-left:5px;
margin-top:2px;
text-align:center;
}
.dash-unit h3 {
font-weight:300;
font-size: 15px;
line-height: 2px;
letter-spacing: 0px;
color: #b2c831;
padding-top:10px;
padding-left:5px;
margin-top:2px;
text-align:center;
}
.dash-unit p {
font-size: 14px;
font-weight: 200;
line-height: 16px;
color: inherit;
margin: 0 0 10px;
padding:5px;
}
.dash-unit h4 {
padding-left:5px;
margin-top:2px;
font-size: 13px;
font-weight:lighter;
line-height: 1;
letter-spacing: 0px;
color: #fff;
}
.dash-unit bold{
font-family: 'Open Sans', sans-serif;
font-size:26px;
font-weight:bold;
color:#fff;
vertical-align:middle;
}
/**********Half-Unit / Used in index.html**********/
.half-unit {
margin-bottom: 30px;
padding-bottom: 4px;
border: 1px solid #383737;
background-image:url('../images/sep-half.png');
background-color: #3d3d3d;
color:white;
height:130px;
}
.half-unit:hover {
background-color: #4f4f4f;
-moz-box-shadow: 3px 3px 2px 0px #151515;
-webkit-box-shadow: 3px 3px 2px 0px #151515;
box-shadow: 3px 3px 2px 0px #151515;
}
.half-unit dtitle {
font-size:10px;
text-transform:uppercase;
color:#ffffff;
margin:8px;
padding:0px;
height:inherit
}
.half-unit hr {
border: 0;
border-top: 1px solid #151515;
border-top-style: dashed;
margin-top:3px;
}
.half-unit h1 {
font-family: 'Raleway', sans-serif;
font-weight:300;
font-size: 20px;
line-height: 1;
letter-spacing: 0px;
color: #ffffff;
padding-top:10px;
padding-left:5px;
margin-top:2px;
text-align:center;
}
.half-unit h4 {
padding-left:5px;
margin-top:2px;
font-size: 13px;
font-weight:lighter;
line-height: 1;
letter-spacing: 0px;
color: #fff;
}
.half-unit bold{
font-family: 'Open Sans', sans-serif;
font-size:26px;
font-weight:bold;
color:#fff;
vertical-align:middle;
}
/**********Styling Elements**********/
.cont {
text-align:center;
margin-top:30px;
}
.cont ok {
color:#b2c831;
}
.cont bad {
color:#fa1d2d;
}
.cont2 {
text-align:center;
margin-top:-15px;
font-size:12px;
line-height:7px;
}
.cont2 bold{
font-size:10px;
font-weight:bold;
color:#b2c831
}
.text p {
font-family: 'Open Sans', sans-serif;
margin-left:8px;
font-size:14px;
line-height:18px;
}
.text grey {
font-size:11px;
color:silver
}
/***********Bootstrap Default Modifications***********/
.thumbnail {
border:0px;
text-align:center;
-webkit-box-shadow: 0px;
-moz-box-shadow: 0px;
box-shadow: 0px;
background: none;
text-align: center;
}
.modal-header {
background-image:url('../images/sep-half.png');
background-color: #4f4f4f;
color:#fff;
}
input[type=submit] {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
background: #b2c831;
color: #fff;
border: none;
padding: 8px 28px 10px 26px;
*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input[type=text], textarea {
background: #cdcbcc;
font-size: 13px;
display: block;
width: 100%;
border: none;
box-shadow: none;
height: 30px;
line-height: 18px;
padding: 0;
text-indent: 18px;
margin: 0 0 18px;
}
textarea {
line-height: 18px;
padding: 18px;
width: 100%;
text-indent: 0;
}
.textarea-container { margin: 0 18px; }
.textarea-container textarea { margin-left: -18px; }
#contact textarea { width: 100%; height: 45px; }
.progress-bar {
background-color: #b2c831;
}
/***********LineIcons Styles***********/
.info-user {
text-align:center;
font-size: 24px;
color: #b2c831;
}
.fs1 {
padding:5px 5px 5px 5px;
position:relative;
}
.fs1:hover {
position:relative;
color: #fff;
cursor:pointer
}
.fs2 {
padding:5px 5px 5px 5px;
position:relative;
font-size:35px;
vertical-align: text-bottom
}
/**********Clock Configuration**********/
digiclock {
font-size: 30px;
color: #fff;
text-align: center;
line-height: 60px;
margin-left: auto
}
.clockcenter {
text-align:center;
}
/**********Mail Style Configuration**********/
.framemail {
cursor: default;
}
.framemail .window {
font-size: 0;
margin-top: -1px;
overflow: hidden;
margin-left: -18px;
}
.framemail .window .mail li {
background-color:#3d3d3d;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
border-top: 1px solid #888;
position: relative;
margin-left:-18px;
}
.framemail .window .mail li:first-child {
border-top: none;
}
.framemail .window .mail li:hover {
background-color: #5d5b5b;
}
.framemail .window .mail li:after,
.framemail .window .mail li:before {
border-left: 8px solid transparent;
border-top: 8px solid #df6;
content: '';
height: 0;
position: absolute;
right: 0;
top: 0;
width: 0;
}
.framemail .window .mail li:before {
border-top-color: #bbb;
border-width: 9px;
}
.framemail .window .mail li:nth-child(1):after,
.framemail .window .mail li:nth-child(1):before {
border: none;
}
.framemail .window .mail li:nth-child(2):after {
border-top-color: #fa1d2d;
}
.framemail .window .mail li i {
display: inline-block;
height: 48px;
width: 6px;
}
.framemail .window .mail li .read {
background-color: #ddd;
}
.framemail .window .mail li .unread {
background: #b2c831;
}
.framemail .window .mail li img {
background: #819da2;
border-radius: 2px;
height: 36px;
left: 12px;
position: absolute;
top: 6px;
width: 36px;
}
.framemail .window .mail li p {
font: 13px/24px sans-serif;
left: 56px;
position: absolute;
top: 3px;
}
.framemail .window .mail li .sender {
color: #e9e8e8;
font-weight: bold;
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
.framemail .window .mail li .message {
color: #999;
overflow: hidden;
text-overflow: ellipsis;
top: 21px;
white-space: nowrap;
}
.framemail .window .mail li .message strong {
color: #999;
}
.framemail .window .mail li .actions {
height: 16px;
position: absolute;
right: 19px;
text-align: right;
top: 0;
width: 96px;
}
.framemail .window .mail li .actions img {
background: none;
display: inline-block;
height: 16px;
margin-left: 6px;
opacity: .1;
position: relative;
width: 16px;
}
.framemail .window .mail li:hover .actions img {
opacity: .25;
}
.framemail .window .mail li .actions img:hover {
opacity: .75;
}
/**********DONUT CHARTS STYLES**********/
#load {
width: 11.313em;
height: 11.313em;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 1.063em;
background-position: center center;
margin:auto;
}
#space {
width: 11.313em;
height: 11.313em;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 1.063em;
background-position: center center;
margin:auto;
}
/**********LINE AND BARS**********/
.section-graph {
position: relative;
height: 130px;
color: #fff;
background-image: linear-gradient(color-stops(#b2c831, #b2c831 50%, #b2c831 50%));
margin-bottom:20px;
}
.section-graph .graph-info {
z-index: 99;
position: absolute;
font-weight: bold;
margin-top: 12px;
margin-left: 21px;
width: 100px;
}
.section-graph .graph-info .graph-arrow {
width: 0;
height: 0;
margin-top: 18px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid white;
float: left;
}
.section-graph .graph-info .graph-info-big {
font-size: 24px;
float: left;
margin-left: 3px;
}
.section-graph .graph-info .graph-info-small {
margin-left: 3px;
font-size: 12px;
font-weight: normal;
color: rgba(255, 255, 255, 0.5);
clear: left;
margin-left: 8px;
}
/*
* Info Section
*/
.info-aapl {
text-align: center;
}
.info-aapl ul {
margin-left:30%;
}
.info-aapl li {
margin: 0;
display: block;
width: 9px;
height: 40px;
margin-right: 6px;
background-color: #f5f0ec;
float:left;
position: relative;
}
.info-aapl li span {
display: block;
width: 9px;
height: 40px;
position: absolute;
bottom: 0;
}
.info-aapl li span.orange {
background-color: #fa1d2d;
}
.info-aapl li span.green {
background-color: #b2c831;
}
/**********TWITTER WIDGET **********/
#jstwitter ul li{
color:#bdbdbd;
padding:.5em .75em;
}
#jstwitter ul{
margin-left:0;
list-style:none
}
#jstwitter:first-child{
border-top:0
}
ul#jstwitter li a{
font-size:10px;
font-style:italic;
color:#666;
text-decoration:none
}
/********** CUSTOMIZED BUTTON **********/
.btnnew {
display: inline-block;
*border-left: 0 none #707070;
border-right: 0 none #707070;
border-top: 0 none #707070;
border-bottom: 0 none #707070;
display: inline;
padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #b2c831;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #5a5a5a;
*background-color: #5a5a5a;
background-repeat: repeat-x;
*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
background-image: linear-gradient(to bottom, #707070, #707070);*
}
/********** SWITCH BUTTON **********/
.switch {
position: relative;
margin: 20px auto;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked + .switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #b2c831;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #b6c753, #b2c831);
background-image: -moz-linear-gradient(top, #b6c753, #b2c831);
background-image: -o-linear-gradient(top, #b6c753, #b2c831);
background-image: linear-gradient(to bottom, #b6c753, #b2c831);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.switch-blue .switch-selection {
background: #3aa2d0;
background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
}
.switch-yellow .switch-selection {
background: #fa1d2d;
background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d);
background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d);
background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d);
background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d);
}
/**********Gauge Chart**********/
#canvas {
display: block;
width: 150px;
margin: 30px auto;
}
/**********Accordion Styling**********/
.accordion-group {
border: 1px solid #222;
}
.accordion-heading {
background-color: #5a5a5a;
*background-color: #5a5a5a;
background-repeat: repeat-x;
*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
background-image: linear-gradient(to bottom, #707070, #707070);*
}
/**********Link Styling**********/
a {
color: #b2c831;
text-decoration: none;
}
a:hover {
color: #dff948;
text-decoration: none;
}
/**********FooterWrap Section**********/
#footerwrap {
width: 100%;
background:#262626;
background-image:url('../images/sep-half.png');
padding-top:25px;
padding-bottom: 40px;
border-top-style: solid;
border-top-width:8px;
border-top-color:#1d1d1d;
text-align:center
}
#footerwrap p {
color:white;
font-size:12px;
}
/***********FULLCALENDAR STYLE***********/
#external-events {
padding: 0 10px;
border: 1px solid #8b8b8a;
background-color: #8b8b8a;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
.external-event { /* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #b2c831;
color: #fff;
font-size: .85em;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #b2c831;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
width:100%;
}
/**********Media Styles**********/
@media (max-width: 360px){
/*Calendar Adsjustments*/
.fc-header {margin-top:15px;}
.fc-header-title h2{font-size:10px; }
.fc-header-right {display:none}
/* portrait tablet */
@media (min-width: 767px) and (max-width: 768px) {
.info-aapl ul {
margin-left:10px;
float:left;
}
#load {
margin-left:5px;
margin-right:10px;
}
#space {
margin-left:5px;
margin-right:10px;
}
}
/* Landscape iphone 5 and samsung galaxy */
@media (min-width: 560px) and (max-width: 685px) {
.info-aapl ul {
margin-left:40%;
}
}
@media (min-width: 750px) {
.container {
padding: 30px 35px 10px 10px;
}
}

172
css/tabs.css Normal file
View file

@ -0,0 +1,172 @@
div.bhoechie-tab-container{
z-index: 10;
padding: 0 !important;
border-radius: 4px;
-moz-border-radius: 4px;
border:1px solid #3d3d3d;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
}
div.bhoechie-tab-menu{
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
background-color: #3d3d3d;
}
div.bhoechie-tab-menu div.list-group{
background-color: #3d3d3d;
margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a:not(.active):last-child:hover,
div.bhoechie-tab-menu div.list-group>a:not(.active):last-child:focus,
div.bhoechie-tab-menu div.list-group>a:not(.active):first-child:hover,
div.bhoechie-tab-menu div.list-group>a:not(.active):first-child:focus {
border-color: #1f1f1f;
}
div.bhoechie-tab-menu div.list-group>a {
margin-bottom: 0;
padding: 0px 0px 0px 0px;
border-bottom-right-radius: 0;
-moz-border-bottom-right-radius: 0;
background-color: #3d3d3d;
background-image: url('../images/sep-half.png');
border-color: #383737;
}
div.bhoechie-tab-menu div.list-group>a .fa {
border-top-right-radius: 0;
-moz-border-top-right-radius: 0;
background-color: #3d3d3d;
background-image: url('../images/sep-half.png');
border-color: #383737;
}
div.bhoechie-tab-menu div.list-group>a:first-child{
border-top-right-radius: 0;
-moz-border-top-right-radius: 0;
background-color: #3d3d3d;
background-image: url('../images/sep-half.png');
border-color: #383737;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
border-bottom-right-radius: 0;
-moz-border-bottom-right-radius: 0;
border-color: #383737;
}
div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .fa{
background-color: #333333;
background-image: url('../images/sep-half.png');
border-color: #383737;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-left: 0;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 10px solid #333333;
background-image: url('../images/sep-half.png');
}
div.bhoechie-tab-content{
padding-left: 10px;
padding-top: 20px;
position: relative;
}
div.bhoechie-tab div.bhoechie-tab-content{
display: block;
}
div.bhoechie-tab div.bhoechie-tab-content:not(.active){
display: none;
}
.tab-pane {
padding-top: 15px;
padding-bottom: 20px;
margin-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
position: relative;
top: 20%;
transform: translateY(+10%);
}
.nav-tabs {
margin: 0 0 0 0;
border-bottom: 1px solid transparent;
background-image: url('../images/sep-half.png');
background-color: #3d3d3d;
}
.nav-tabs>li {
background-image: url('../images/sep-half.png');
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.nav-tabs>li>a,
.nav-tabs>li>a:focus,
.nav-tabs>li>a:hover {
padding-top: 25px;
padding-bottom: 25px;
background-color: #3d3d3d;
background-image: url('../images/sep-half.png');
}
.nav-tabs>li>a:focus,
.nav-tabs>li>a:hover {
border-color: #1f1f1f;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
background-color: #333333;
background-image: url('../images/sep-half.png');
border-bottom: 1px solid #333333;
border-top: 1px solid transparent;
border-left: 1px solid #333333;
border-right: 1px solid transparent;
}
.nav-tabs>li.active>a:after {
content: '';
position: absolute;
left: 35%;
top: 110%;
margin-top: -13px;
border-bottom: 20px solid transparent;
border-top: 20px solid #333333;
border-right: 25px solid transparent;
border-left: 25px solid transparent;
}
.container {
padding-top: 10px;
}
@media (min-width: 992px) {
.container {
padding-top: 95px;
}
}
@media (min-width: 768px) {
.container {
padding-top: 55px;
}
}

1999
js/bootstrap.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

7
js/bootstrap.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

9252
js/jquery.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

29
views/footer_main.tpl Normal file
View file

@ -0,0 +1,29 @@
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
$(document).ready(function() {
$("div.list-group>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var HalfUnit = $(this).parent().parent().parent()
var tabChildren = HalfUnit.children("div.bhoechie-tab").children("div.bhoechie-tab-content");
var tabChildrenActive = HalfUnit.children("div.bhoechie-tab").children("div.bhoechie-tab-content.active");
var index = $(this).index()
$(tabChildren).eq(index).addClass("active");
$(tabChildrenActive).removeClass("active");
});
});
$('#mainTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});
</script>
</body>
</html>

39
views/header_main.tpl Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Resume website for {{globals['name']}}">
<meta name="author" content="Jesse Hitch">
<meta name="theme-color" content="#1f1f1f" />
<link rel="icon" type="image/x-icon" href="/images/{{globals['favicon']}}">
<meta property="og:url" content="https://jessebot.io">
<meta property="og:image" content="/images/{{globals['image']}}">
<meta property="og:title" content="{{globals['website_title']}}">
<meta property="og:description" content="Resume website for {{globals['name']}}">
<meta property="og:type" content="profile">
<title>{{globals['website_title']}}</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<!-- Custom styles for this template -->
<link href="/css/main2.css" rel="stylesheet">
<link href="css/tabs.css" rel="stylesheet">
<link href="css/font-style.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
}
</style>
</head>
<body>
% if globals['fork_me']:
<a href="https://github.com/jessebot/tiny_personal_website" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#1f1f1f; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)']}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out']}}</style>
% end

184
views/index.tpl
View file

@ -1,76 +1,110 @@
% include('header.tpl')
<div class="container">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-7 col-lg-4 col-md-4 col-sm-7 col-xl-4 pb-1 m-1">
<img class="img-fluid rounded main-img"
src="/images/{{globals['image']}}"
alt="What I look like.">
</div>
<div class="col-10 col-sm-10 col-md-8 col-lg-6 offset-lg-1 offset-xl-1 pt-2 pb-2">
<div class="card mx-auto">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#about">About</a>
</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>
<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="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> <!-- 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>
<p class="card-text">
{{globals['profile_blurb']}}
</p>
</div> <!-- card block -->
<div class="card-footer">
<div class="row justify-content-between">
<div class="col-6">
<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: 54px;">
</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="left"
title="Linkedin" style="box-shadow: none;">
<img src="/images/linkedin.svg" class="img-fluid" style="height: 54px;">
</a>
</div><!-- circle -->
</div> <!-- col -->
</div> <!-- row -->
</div> <!-- card footer -->
</div> <!-- card -->
</div> <!-- col -->
</div> <!-- row -->
</div> <!-- container -->
% include('header_main.tpl')
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="dash-unit bhoechie-tab-container">
<dtitle>
<span aria-hidden="true" class="li_user fs1"></span>
{{globals['name']}}</dtitle>
<hr style="margin-bottom: 0;">
<img class="img-responsive img-rounded center-block main-img"
src="/images/{{globals['image']}}"
alt="What I look like."
style="width:250px;"
data-toggle="tooltip" data-placement="bottom"
title="{{globals['name']}}">
</div><!-- /.dash-unit -->
</div><!-- /.col -->
<div class="col-lg-8 col-md-4 col-sm-6 col-xl-8">
<div class="dash-unit bhoechie-tab-container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active col-lg-4 col-md-4 col-sm-4 col-xs-4 col-xl-4">
<a href="#resume" aria-control="resume" role="tab" data-toggle="tab">
<img src="/images/googledocs.svg" style="width: 64px;">
</a>
</li>
<li role="presentation" class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<a href="#linkedin" aria-control="linkedin" role="tab" data-toggle="tab">
<img src="/images/linkedin.svg" style="width: 64px;">
</a>
</li>
<li role="presentation" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 col-xl-6">
<a href="#github" aria-control="github" role="tab" data-toggle="tab">
<img src="/images/github-cat.svg" style="width: 64px;">
</a>
</li>
</ul>
<div class="tab-content">
<!-- Steam -->
<div role="tabpanel" class="tab-pane active" id="resume">
% include('footer.tpl')
<center>
<dtitle>
<span aria-hidden="true" class="li_note fs1"></span>
resume</dtitle>
<hr>
<h7>
<span aria-hidden="true" class="li_clip fs1"></span>
Download: <a href="{{globals['resume_pdf_URL']}}">PDF</a> or <a href="{{globals['resume_docx_URL']}}">Word Doc</a>
<br />
<br />
<span aria-hidden="true" class="li_world fs1"></span>
Go to <a target="_blank" href="{{globals['resume_live_doc_URL']}}">Google Doc</a>
</h7>
</center>
</div><!-- tab panel-->
<!-- Linkedin -->
<div role="tabpanel" class="tab-pane" id="linkedin">
<center>
<dtitle>
<span aria-hidden="true" class="li_world fs1"></span>
linkedin</dtitle>
<hr>
<h7>
<span aria-hidden="true" class="li_user fs1"></span>
<a target="_blank" href="{{globals['linkedin_URL']}}"
role="button" data-toggle="tooltip" data-placement="left"
title="Linkedin" style="box-shadow: none;">
LinkedIn Profile
</a>
</h7>
</center>
</div><!-- tab panel-->
<!-- Github section -->
<div role="tabpanel" class="tab-pane" id="github">
<center>
<dtitle>
<span aria-hidden="true" class="li_world fs1"></span>
github</dtitle>
<hr>
<h7>
<span aria-hidden="true" class="li_user fs1"></span>
<a target="_blank" href="https://github.com/{{globals['github_username']}}"
role="button" data-toggle="tooltip" data-placement="right"
title="GitHub" style="box-shadow: none;">
{{globals['github_username']}}
</a>
</h7>
</center>
</div><!-- tab panel-->
</div><!-- tab-content -->
</div><!-- /.dash-unit -->
</div><!-- /.col -->
<div class="col-xl-11 col-lg-11 col-md-4 col-sm-6">
<div class="dash-unit bhoechie-tab-container">
<dtitle>
<span aria-hidden="true" class="li_star fs1"></span>
About
</dtitle>
<hr>
<div class="aboutText">
{{globals['profile_blurb']}}
</div>
</div><!-- /.dash-unit -->
</div><!-- /.col -->
</div><!-- /.row ALL CARDS-->
</div><!-- /.container MAIN-->
% include('footer_main.tpl')

5
web_routes.py
View file

@ -48,6 +48,11 @@ def images(filename):
return static_file(filename, root=WEB_ROOT+'/images')
@route('/js/<filename>')
def js(filename):
return static_file(filename, root=WEB_ROOT+'/js')
@route('/css/<filename>')
def css(filename):
return static_file(filename, root=WEB_ROOT+'/css')