ritual/ritual.sh
ritual/ritual.sh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bit of a mobile pass on the audio page

Browse source
This commit is contained in:
Dan 2026-01-06 08:08:19 +00:00
parent 430ebf0113
commit 66383c9c55
3 changed files with 47 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

35
assets/sass/pages/audio.scss
View file

@ -21,7 +21,8 @@
padding-top: 330px; padding-top: 330px;
@include media-down(lg) { @include media-down(lg) {
padding-top: 400px; padding-top: 50px;
width: 95%;
} }
.audio-intro { .audio-intro {
@ -102,6 +103,13 @@
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
@include media-down(lg) {
left: auto;
top: auto;
position: relative;
margin-bottom: 50px;
}
.neon-text { .neon-text {
@include media-down(lg) { @include media-down(lg) {
font-size: 5rem; font-size: 5rem;
@ -159,12 +167,12 @@
gap: 20px; gap: 20px;
@include media-down(lg) { @include media-down(lg) {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 15px; gap: 15px;
} }
@include media-down(md) { @include media-down(md) {
grid-template-columns: repeat(2, 1fr); grid-template-columns: 1fr;
} }
} }
@ -190,6 +198,27 @@
color: inherit; color: inherit;
position: relative; position: relative;
@include media-down(lg) {
display: grid;
grid-template-columns: auto 1fr;
}
.track-cover {
@include media-down(lg) {
max-width: 100px;
}
@include media-down(md) {
max-width: 60px;
}
}
.track-details {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&:hover { &:hover {
border-color: #00ffff; border-color: #00ffff;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);

8
assets/sass/pages/blog.scss
View file

@ -37,6 +37,10 @@
.blog-header { .blog-header {
text-align: center; text-align: center;
padding-bottom: 20px; padding-bottom: 20px;
@include media-down(lg) {
font-size: 0.75rem;
}
} }
// Brand on bezel // Brand on bezel
@ -607,6 +611,10 @@
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 255, 0, 0.2); border-bottom: 1px solid rgba(0, 255, 0, 0.2);
@include media-down(lg) {
text-align: right;
}
} }
.blog-post-navigation { .blog-post-navigation {

10
layouts/_default/baseof.html
View file

@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="theme-color" content="#00ff00" /> <meta name="theme-color" content="#00ff00" />
<title> <title>
{{ block "title" . }}{{ .Site.Title }} {{ with .Params.Title }} | {{ . {{ block "title" . }}{{ .Site.Title }} {{ with .Params.Title }} | {{ .
@ -19,8 +18,13 @@
}} }}
<!-- Chart.js for graphs - only load if page content contains graph shortcode --> <!-- Chart.js for graphs - only load if page content contains graph shortcode -->
{{ if or (findRE "{{<\\s*graph" .RawContent) (findRE "{{%\\s*graph" .RawContent) }} {{ if or (findRE "{{<\\s*graph" .RawContent) (findRE "{{%\\s*graph"
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" integrity="sha384-9nhczxUqK87bcKHh20fSQcTGD4qq5GhayNYSYWqwBkINBhOfQLg/P5HG5lF1urn4" crossorigin="anonymous"></script> .RawContent) }}
<script
src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"
integrity="sha384-9nhczxUqK87bcKHh20fSQcTGD4qq5GhayNYSYWqwBkINBhOfQLg/P5HG5lF1urn4"
crossorigin="anonymous"
></script>
{{ end }} {{ end }}
</head> </head>