Compare commits
No commits in common. "256a476aefcc0cc8decfcc7acd1f383281b2152b" and "7b6301860ce3e9a0d73d4549336369bd577bd6f7" have entirely different histories.
256a476aef
...
7b6301860c
@ -1,169 +0,0 @@
|
||||
:root {
|
||||
// --shadow-colour: #828282;
|
||||
--shadow-colour: #3f0aff;
|
||||
}
|
||||
|
||||
|
||||
///////////////////////
|
||||
// AVATAR
|
||||
///////////////////////
|
||||
|
||||
.avatar {
|
||||
|
||||
img {
|
||||
--shift: 20px;
|
||||
--transition-time: 1s;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 7px;
|
||||
border-color: black;
|
||||
|
||||
// filter: drop-shadow(var(--shift) 8px 1px var(--shadow-colour));
|
||||
// translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
// transition: filter, translate;
|
||||
// transition-duration: 1s;
|
||||
// transition-timing-function: ease-in-out;
|
||||
|
||||
animation: shift-avatar 3s ease-in-out infinite alternate backwards;
|
||||
|
||||
@keyframes shift-avatar {
|
||||
from {
|
||||
filter: drop-shadow(0px 0px 0px var(--shadow-colour));
|
||||
translate: none;
|
||||
}
|
||||
to {
|
||||
filter: drop-shadow(var(--shift) 8px 1px var(--shadow-colour));
|
||||
translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
img:hover {
|
||||
filter: none;
|
||||
translate: none;
|
||||
// animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.avatar img {
|
||||
--shift: 1px;
|
||||
border-width: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////
|
||||
// BOX LINK
|
||||
///////////////////////
|
||||
|
||||
.box-link {
|
||||
--shift: 8px;
|
||||
--border-radius: 10px;
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: translate;
|
||||
transition-duration: 0.25s;
|
||||
transition-timing-function: ease-in-out;
|
||||
|
||||
animation: shift-image 0.3s backwards;
|
||||
@keyframes shift-image {
|
||||
from { translate: none; }
|
||||
to { translate: calc(var(--shift) * -1) calc(var(--shift) * -1); }
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
border-radius: var(--border-radius);
|
||||
opacity: .5;
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
/* object-position:38% 50%; */
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: hidden;
|
||||
object-fit: cover;
|
||||
border: 4px solid black;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shift) var(--shift) 1px var(--shadow-colour);
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: box-shadow;
|
||||
transition-duration: 0.25s;
|
||||
transition-timing-function: ease-in-out;
|
||||
animation: shift-shadow 0.3s backwards;
|
||||
@keyframes shift-shadow {
|
||||
from { box-shadow: none; }
|
||||
to { box-shadow: var(--shift) var(--shift) 1px var(--shadow-colour); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
&:hover {
|
||||
translate: none;
|
||||
|
||||
img {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
z-index: 0;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
margin-right: 5%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: white;
|
||||
margin: auto;
|
||||
text-align: center !important;
|
||||
text-shadow: 0px 2px black;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
text-align: center !important;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-skip-ink: all;
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////
|
||||
// FOOTER LOGO
|
||||
///////////////////////
|
||||
|
||||
.footer-logo {
|
||||
filter: contrast(100%);
|
||||
transition: filter 1s ease-in-out;
|
||||
}
|
||||
|
||||
.footer-logo:hover {
|
||||
filter: contrast(0%) drop-shadow(7px 7px 5px grey);
|
||||
}
|
@ -1,20 +0,0 @@
|
||||
html {
|
||||
hanging-punctuation: first last;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 75ch;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
:has(:target) {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 3rem;
|
||||
}
|
||||
}
|
@ -24,8 +24,6 @@ paginate = 40
|
||||
avatarurl = "images/avatar.jpg"
|
||||
hideColorSchemeToggle = true
|
||||
|
||||
customSCSS = ["scss/reset.scss", "scss/main.scss"]
|
||||
|
||||
[[params.social]]
|
||||
name = "Mastodon"
|
||||
icon = "fa-brands fa-mastodon fa-2x"
|
||||
|
@ -5,7 +5,7 @@ date: 2020-12-25T00:04:40+00:00
|
||||
|
||||
{{% avatar "/images/holo-avatar.jpg" %}}
|
||||
|
||||
🇬🇧 software engineer with experience in __fintech__.
|
||||
UK-based software engineer with experience in __fintech__.
|
||||
|
||||
[__Award-winning__](/dev-engineering/#awards), __first-class__ __masters__ [electronic engineering](/dev-engineering) graduate & previous __Disney__ intern
|
||||
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 243 KiB After Width: | Height: | Size: 122 KiB |
Binary file not shown.
Before Width: | Height: | Size: 213 KiB After Width: | Height: | Size: 130 KiB |
Binary file not shown.
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 88 KiB |
@ -18,6 +18,7 @@
|
||||
[<a href="{{ .Site.Params.commit }}/{{ .GitInfo.Hash }}">{{ .GitInfo.AbbreviatedHash }}</a>]
|
||||
{{ end }}
|
||||
|
||||
<img src="/images/andy.png" width="80px" class="footer-logo" />
|
||||
<img src="/images/andy.png" width="80px" />
|
||||
<span style="color: #b0b0b0">©</span>
|
||||
</section>
|
||||
</footer>
|
||||
|
@ -1,3 +1 @@
|
||||
<div class="avatar">
|
||||
<img src="{{ .Get 0 }}" style="border-radius: 50%; width: 30rem; margin-left: auto; margin-right: auto; display: block;"/>
|
||||
</div>
|
||||
<img src="{{ .Get 0 }}" style="border-radius: 50%; width: 40rem; margin-left: auto; margin-right: auto; display: block;"/>
|
@ -1,13 +1,62 @@
|
||||
<div>
|
||||
<div class="box-link">
|
||||
<span aria-hidden="true"></span>
|
||||
<img loading="lazy" alt="" src="{{ .Get "src" }}">
|
||||
<div>
|
||||
<p style="font-size:30px;">
|
||||
<a href="{{ .Get "href" }}">{{ .Get "title" }}</a>
|
||||
<div style="
|
||||
border: 50px black;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;">
|
||||
<span aria-hidden="true" style="
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
opacity: .5;
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
z-index: 1; "></span>
|
||||
<img loading="lazy" alt="" src="{{ .Get "src" }}" style="
|
||||
/* object-position:38% 50%; */
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
outline: none;
|
||||
border: 4px solid black;
|
||||
border-radius: 10px;
|
||||
box-shadow: 5px 5px;">
|
||||
<div style="
|
||||
z-index: 1;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
margin-right: 5%;
|
||||
margin-left: 5%;">
|
||||
<p style="
|
||||
font-size:30px; color: white;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
text-shadow: 0px 2px black;">
|
||||
<a href="{{ .Get "href" }}"
|
||||
style="
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-skip-ink: all;">{{ .Get "title" }}</a>
|
||||
</p>{{if isset .Params "caption" }}
|
||||
<p style="font-family: monospace;
|
||||
margin-top: 20px;">{{ .Get "caption" }}</p>{{end}}
|
||||
<p style="
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
text-shadow: 0px 1px black;">{{ .Get "caption" }}</p>{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
Loading…
Reference in New Issue
Block a user