more css changes, smarter box link
All checks were successful
Deploy Hugo site to Prod / Build Container (push) Successful in 24s

This commit is contained in:
Andy Pack 2024-10-13 22:44:17 +01:00
parent acff8b8366
commit ea61941c25
Signed by: sarsoo
GPG Key ID: A55BA3536A5E0ED7
4 changed files with 80 additions and 40 deletions

View File

@ -3,6 +3,29 @@
--shadow-colour: #3f0aff;
}
@mixin shadowed {
box-shadow: var(--shift) var(--shift) 2px var(--shadow-colour);
translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
@media (prefers-reduced-motion: no-preference) {
transition: box-shadow, translate;
transition-duration: var(--duration);
transition-timing-function: ease-in-out;
&:hover {
box-shadow: 0px 0px 0px var(--shadow-colour);
translate: none;
}
}
}
.shadowed {
--shift: 8px;
--duration: 0.2s;
@include shadowed;
}
///////////////////////
// AVATAR
@ -18,14 +41,7 @@
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 {
@ -67,10 +83,9 @@
position: relative;
width: 100%;
height: 17rem;
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
@ -131,27 +146,26 @@
}
}
div {
.text-section {
z-index: 0;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 5%;
margin-left: 5%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
p {
color: white;
margin: auto;
text-align: center !important;
text-shadow: 0px 2px black;
text-shadow: 3px 3px 5px black;
margin: 0;
}
a {
.center-link-text {
color: white;
cursor: pointer;
text-align: center !important;
text-underline-offset: 3px;
text-decoration-skip-ink: all;
text-decoration-skip-ink: auto;
}
}
@ -174,6 +188,7 @@
.art-grid {
--shift: 5px;
--duration: 0.2s;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
@ -181,19 +196,7 @@
& > figure > img {
border: 5px solid black;
box-shadow: var(--shift) var(--shift) 2px var(--shadow-colour);
translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
@media (prefers-reduced-motion: no-preference) {
transition: box-shadow, translate;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
&:hover {
box-shadow: 0px 0px 0px var(--shadow-colour);
translate: none;
}
}
@include shadowed;
}
& > .art-col-2 {
@ -217,7 +220,20 @@
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
gap: 20px;
}
.dev-grid {
display: grid;
gap: 20px;
}
.dev-grid-col-2 {
grid-template-columns: repeat(2, 1fr);
}
.dev-grid-col-3 {
grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 768px) {
@ -228,4 +244,23 @@
.art-home-grid {
grid-template-columns: repeat(2, 1fr);
}
.dev-grid {
grid-template-columns: repeat(1, 1fr);
}
}
.youtube-embed {
iframe {
--shift: 8px;
--duration: .2s;
width: 100%;
aspect-ratio: 16/9;
border-radius: 20px;
border: 5px solid black;
@include shadowed;
}
}

View File

@ -12,9 +12,11 @@ aliases:
[![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://git.sarsoo.xyz/sarsoo/-/packages?q=&type=container)
[![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://git.sarsoo.xyz/sarsoo/-/packages?q=&type=helm)
<div class="dev-grid dev-grid-col-2">
{{% image-box-link src="/posts/mixonomer/PlaylistExample.png" href="/posts/mixonomer" title="Mixonomer" caption="Python + React" %}}
{{% image-box-link src="/posts/selector/dashboard.png" href="/posts/selector/" title="Selector" caption="C# + TypeScript + Vue.js" %}}
</div>
# [Infrastructure]({{< relref "infra" >}})
@ -26,11 +28,13 @@ Basically, Terraform creates and destroys infrastructure, Ansible manages the OS
[Read More]({{< relref "infra" >}})
<div class="dev-grid dev-grid-col-3">
{{% image-box-link src="/posts/visual-search/mapSurfaceWithMax2.png" href="/posts/visual-search" title="Visual Search" caption="MATLAB" %}}
{{% image-box-link src="/posts/lpss/hood_m_gram.png" href="/posts/lpss" title="Speech Synthesiser" caption="MATLAB" %}}
{{% image-box-link src="/posts/lpss/hood_m_gram.png" href="/posts/lpss" title="Speech Synth" caption="MATLAB" %}}
{{% image-box-link src="/posts/markov/StateTopology.png" href="/posts/markov" title="Hidden Markov Models" caption="Python + Numpy" %}}
</div>
# [Holoportation](/holo)
@ -45,15 +49,17 @@ The holograms are captured in the form of a __point cloud__, a cluster of colour
My undergraduate dissertation documented extending the [__LiveScan3D__](https://github.com/MarekKowalski/LiveScan3D) holoportation platform to allow multi-source streaming. The existing capabilities allowed a single scene to be captured in real-time and streamed elsewhere for viewing, multi-source allows multiple independent scenes to be received and composited at the same time (a many-to-one system).
{{< youtube NP0aVjuk5fU >}}
{{< youtube id=NP0aVjuk5fU autoplay=true controls=false loop=true class=youtube-embed >}}
[Read More](/holo)
<div class="dev-grid dev-grid-col-3">
{{% image-box-link src="/posts/dnstp/server.png" href="/posts/dnstp" title="dnstp" caption="Rust" %}}
{{% image-box-link src="/posts/draught/checkers-board.png" href="/posts/draught" title="Draught" caption="Rust + Js" %}}
{{% image-box-link src="/posts/game-of-life/gameoflife1.png" href="/posts/game-of-life" title="Game of Life" caption="Rust + Js" %}}
</div>
# [Mixonomer](/mixonomer)

View File

@ -42,7 +42,7 @@ My undergraduate dissertation was tasked with extending the original software to
The development works by including an ID to indicate what source a frame of footage represents.
{{< youtube NP0aVjuk5fU >}}
{{< youtube id=NP0aVjuk5fU autoplay=true controls=false loop=true class=youtube-embed >}}
###### A couple of recorded sources operating in the virtual space. A third live one is connected part way through

View File

@ -2,12 +2,11 @@
<div class="box-link">
<span aria-hidden="true"></span>
<img loading="lazy" alt="" src="{{ .Get "src" }}">
<div>
<div class="text-section">
<p style="font-size:30px;">
<a href="{{ .Get "href" }}">{{ .Get "title" }}</a>
<a class="center-link-text" href="{{ .Get "href" }}">{{ .Get "title" }}</a>
</p>{{if isset .Params "caption" }}
<p style="font-family: monospace;
margin-top: 20px;">{{ .Get "caption" }}</p>{{end}}
<p style="font-family: monospace;">{{ .Get "caption" }}</p>{{end}}
</div>
</div>
</div>