sarsooxyz.hugo/assets/scss/main.scss
Andy Pack 4b1bf40b28
All checks were successful
Deploy Hugo site to Prod / Build Container (push) Successful in 7m4s
fonts, theme update, icons
2024-10-18 18:50:54 +01:00

304 lines
6.4 KiB
SCSS

:root {
// --shadow-colour: #828282;
--shadow-colour: #3f0aff;
}
p {
white-space: normal;
}
.silkscreen-regular,
.categories > a,
.tags > span > a,
.taxonomy-element > a {
font-family: "Silkscreen", sans-serif;
font-weight: 400;
font-style: normal;
}
.navigation-title {
font-size: 4rem !important;
vertical-align: middle;
}
.about > *,
.content header h1,
.navigation-title {
font-family: "Pirata One", apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "游ゴシック", "PingFang SC", STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif !important;
font-weight: 400 !important;
font-style: normal !important;
}
.about {
user-select: none;
}
.about > h1 {
font-size: 5rem !important;
}
.about > h2 {
font-size: 3rem !important;
}
@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
///////////////////////
.avatar {
img {
--shift: 20px;
--transition-time: 1s;
border-style: solid;
border-width: 7px;
border-color: black;
@media (prefers-reduced-motion: no-preference) {
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: 13px;
border-width: 5px;
}
}
///////////////////////
// BOX LINK
///////////////////////
.box-link {
--shift: 8px;
--border-radius: 10px;
position: relative;
width: 100%;
height: 17rem;
display: flex;
justify-content: center;
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;
}
}
}
.text-section {
z-index: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
p {
color: white;
text-align: center !important;
text-shadow: 3px 3px 5px black;
margin: 0;
}
.center-link-text {
color: white;
cursor: pointer;
text-underline-offset: 3px;
text-decoration-skip-ink: auto;
}
}
///////////////////////
// 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);
}
///////////////////////
// ART GRID
///////////////////////
.art-grid {
--shift: 5px;
--duration: 0.2s;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
& > figure > img {
border: 5px solid black;
@include shadowed;
}
& > .art-col-2 {
grid-column: span 2;
}
& > .art-col-3 {
grid-column: span 3;
}
& > .art-row-2 {
grid-row: span 2;
}
& > .art-row-3 {
grid-row: span 3;
}
}
.art-home-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
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) {
.art-grid {
grid-template-columns: repeat(2, 1fr);
}
.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;
}
}