sarsoo/sarsooxyz.hugo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: sarsoo:256a476aefcc0cc8decfcc7acd1f383281b2152b
Branches Tags
sarsoo:master
sarsoo:local-k8s
sarsoo:overflow
sarsoo:selector-maui
sarsoo:kc
..
compare: sarsoo:7b6301860ce3e9a0d73d4549336369bd577bd6f7
Branches Tags
sarsoo:master
sarsoo:local-k8s
sarsoo:overflow
sarsoo:selector-maui
sarsoo:kc

No commits in common. "256a476aefcc0cc8decfcc7acd1f383281b2152b" and "7b6301860ce3e9a0d73d4549336369bd577bd6f7" have entirely different histories.
256a476aef ... 7b6301860c

10 changed files with 61 additions and 204 deletions
Show Stats Expand all files Collapse all files

169
assets/scss/main.scss
View File

@ -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);
}

20
assets/scss/reset.scss
View File

@ -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;
}
}

2
config.toml
View File

@ -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"

2
content/about.md
View File

@ -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

BIN
content/posts/mixonomer/PlaylistExample.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 243 KiB

After

Width:  |  Height:  |  Size: 122 KiB

BIN
content/posts/mixonomer/Playlists.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 213 KiB

After

Width:  |  Height:  |  Size: 130 KiB

BIN
content/posts/mixonomer/TagExample.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 189 KiB

After

Width:  |  Height:  |  Size: 88 KiB

3
layouts/partials/footer.html
View File

@ -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>

4
layouts/shortcodes/avatar.html
View File

@ -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;"/>

65
layouts/shortcodes/image-box-link.html
View File

@ -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>