mirror of
https://github.com/balkian/balkian.github.com.git
synced 2025-08-24 04:32:20 +00:00
add surface go
This commit is contained in:
J. Fernando Sánchez
@@ -24,7 +24,7 @@
|
||||
<header id="header">
|
||||
<ul class="navbar" id="navbar">
|
||||
<a href="/">
|
||||
<li {{ if ( eq .URL "/" ) }}
|
||||
<li {{ if ( eq .Params.url "/" ) }}
|
||||
class="active"
|
||||
{{ end }} >
|
||||
<i class="fa fa-home fa-large"></i>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{{ define "site_title" }}{{ .Title }}{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
{{ range (.Paginate (where .Data.Pages "Type" "post")).Pages }}
|
||||
{{ range (.Paginate (where .Site.RegularPages "Type" "post")).Pages }}
|
||||
{{ .Render "content-list" }}
|
||||
{{ end }}
|
||||
<!-- Pagination -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{{ if .Site.Params.orderByPublishDate }}
|
||||
{{ $.Scratch.Set "recentPosts" .Site.Pages.ByPublishDate.Reverse }}
|
||||
{{ $.Scratch.Set "recentPosts" .Site.RegularPages.ByPublishDate.Reverse }}
|
||||
{{ else }}
|
||||
{{ $.Scratch.Set "recentPosts" .Site.Pages }}
|
||||
{{ $.Scratch.Set "recentPosts" .Site.RegularPages }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .Site.Params.postAmount.sidebar }}
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
<div id="sidebar" class="fixed">
|
||||
<div id="badge" class="flip-container" ontouchstart="this.classList.toggle('hover');">
|
||||
<div class="flipper sticky">
|
||||
<div class="flipper sticky expand">
|
||||
<div class="front">
|
||||
<!-- front content -->
|
||||
<img id="avatar" src="{{ "/img/me.png" | relURL }}">
|
||||
<img id="avatar" class="expandx" src="{{ "/img/me.png" | relURL }}">
|
||||
</div>
|
||||
<div class="back">
|
||||
<!-- back content -->
|
||||
<img id="picture" src="{{ "/img/me-bat.png" | relURL }}">
|
||||
<!-- <img id="picture" src="{{ "/img/me-bat.png" | relURL }}"> -->
|
||||
<div id="about">
|
||||
<!-- <h1 class="title">Interests</h1> -->
|
||||
<div class="icons vertical-center">
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fab fa-inverse fa-stack-1x fa-linux"></i></span><span class="explanation">Linux user</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fab fa-inverse fa-stack-1x fa-android"></i></span><span class="explanation">Android dev and user</span></span>
|
||||
<a href="http://github.com/balkian" target="_blank"><span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fab fa-inverse fa-stack-1x fa-github"></i> </span><span class="explanation">Github user</span></span></a>
|
||||
<a href="http://gitlab.com/balkian" target="_blank"><span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fab fa-inverse fa-stack-1x fa-gitlab"></i> </span><span class="explanation">GitLab user</span></span></a>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fab fa-inverse fa-stack-1x fa-stack-exchange"></i> </span><span class="explanation">StackExchange fan</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-music"></i> </span><span class="explanation">Music lover</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-film"></i> </span><span class="explanation">Movie fan</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-laptop"></i> </span><span class="explanation">Always on a PC</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-moon"></i> </span><span class="explanation">Night owl</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-terminal"></i></span> <span class="explanation">CLI user</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-flag"></i></span> <span class="explanation">I love languages</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-code"></i> </span> <span class="explanation">I love programming</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="about">
|
||||
<!-- <h1 class="title">Interests</h1> -->
|
||||
<div class="icons">
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fab fa-inverse fa-stack-1x fa-linux"></i></span><span class="explanation">Linux user</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fab fa-inverse fa-stack-1x fa-android"></i></span><span class="explanation">Android dev and user</span></span>
|
||||
<a href="http://github.com/balkian" target="_blank"><span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fab fa-inverse fa-stack-1x fa-github"></i> </span><span class="explanation">Github user</span></span></a>
|
||||
<a href="http://gitlab.com/balkian" target="_blank"><span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fab fa-inverse fa-stack-1x fa-gitlab"></i> </span><span class="explanation">GitLab user</span></span></a>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fab fa-inverse fa-stack-1x fa-stack-exchange"></i> </span><span class="explanation">StackExchange fan</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-music"></i> </span><span class="explanation">Music lover</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-film"></i> </span><span class="explanation">Movie fan</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-laptop"></i> </span><span class="explanation">Always on a PC</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-moon"></i> </span><span class="explanation">Night owl</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-terminal"></i></span> <span class="explanation">CLI user</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-flag"></i></span> <span class="explanation">I love languages</span></span>
|
||||
<span class="coolicon"><span class="fa-stack"> <i class="fas fa-square fa-stack-2x" ></i><i class="fas fa-inverse fa-stack-1x fa-code"></i> </span> <span class="explanation">I love programming</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="entries">
|
||||
<h2 class="title">Latest entries</h2>
|
||||
|
||||
@@ -58,6 +58,7 @@ body {
|
||||
|
||||
.toc ul {
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
}
|
||||
.toc li:before {
|
||||
content: "";
|
||||
@@ -102,18 +103,53 @@ body {
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 28%;
|
||||
width: 25%;
|
||||
text-align: right;
|
||||
padding-left: 50px;
|
||||
padding-left: 2%;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
#badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
#contentwrapper {
|
||||
width: 1200px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#badge{
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 850px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 290px;
|
||||
}
|
||||
|
||||
.front, .back {
|
||||
height: 250px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
#badge{
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0px auto 10px;
|
||||
width: 80%;
|
||||
height: 180px;
|
||||
width: 250px;
|
||||
height: 300px;
|
||||
padding: 0;
|
||||
/* margin-top: -2em; */
|
||||
-webkit-transform: rotate(-4deg);
|
||||
@@ -124,10 +160,17 @@ body {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#badge * {
|
||||
.expandx {
|
||||
width: 100%;
|
||||
}
|
||||
.expandy {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.expand {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* entire container, keeps perspective */
|
||||
|
||||
.flip-container {
|
||||
@@ -159,23 +202,29 @@ body {
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* hide back of pane during swap */
|
||||
.front, .back {
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 1%;
|
||||
padding-bottom: 10%;
|
||||
background-color: black;
|
||||
box-shadow: -5px 5px 5px #555;
|
||||
-webkit-box-shadow: -5px 5px 15px #555;
|
||||
-moz-box-shadow: -5px 5px 15px #555;
|
||||
|
||||
/* backface-visibility: hidden; */
|
||||
/* -webkit-backface-visibility: hidden; */
|
||||
/* transform: rotateX(0deg); */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 1%;
|
||||
padding-bottom: 10%;
|
||||
background-color: black;
|
||||
box-shadow: -5px 5px 5px #555;
|
||||
-webkit-box-shadow: -5px 5px 15px #555;
|
||||
-moz-box-shadow: -5px 5px 15px #555;
|
||||
}
|
||||
|
||||
.back {
|
||||
backface-visibility: hidden;
|
||||
|
||||
}
|
||||
|
||||
/* front pane, placed above back */
|
||||
@@ -185,9 +234,11 @@ body {
|
||||
|
||||
/* back, initially hidden pane */
|
||||
.back {
|
||||
transform: rotateY(180deg);
|
||||
-webkit-transform: rotateY(180deg);
|
||||
z-index: 4;
|
||||
transform: rotateY(180deg);
|
||||
-webkit-transform: rotateY(180deg);
|
||||
z-index: 4;
|
||||
/* height: 100%; */
|
||||
background-color: #ffd700bb;
|
||||
}
|
||||
|
||||
.sticky:after {
|
||||
@@ -245,28 +296,12 @@ body {
|
||||
.toc {
|
||||
padding: 1em;
|
||||
position: fixed;
|
||||
border-color: black;
|
||||
border: 1px solid;
|
||||
border: 1px solid lightgray;
|
||||
background-color: white;
|
||||
height: max-content;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
#contentwrapper {
|
||||
width: 1200px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#badge{
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -818,3 +853,11 @@ pre {
|
||||
margin:0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@@ -13,3 +13,8 @@ min_version = 0.18
|
||||
[author]
|
||||
name = "J. Fernando Sánchez"
|
||||
homepage = "http://balkian.com"
|
||||
|
||||
[markup]
|
||||
[markup.tableOfContents]
|
||||
endLevel = 3
|
||||
startLevel = 1
|
||||
Reference in New Issue
Block a user