diff --git a/assets/sass/pages/audio.scss b/assets/sass/pages/audio.scss
index 6a1733c..3613893 100644
--- a/assets/sass/pages/audio.scss
+++ b/assets/sass/pages/audio.scss
@@ -21,7 +21,8 @@
padding-top: 330px;
@include media-down(lg) {
- padding-top: 400px;
+ padding-top: 50px;
+ width: 95%;
}
.audio-intro {
@@ -102,6 +103,13 @@
width: 100%;
pointer-events: none;
+ @include media-down(lg) {
+ left: auto;
+ top: auto;
+ position: relative;
+ margin-bottom: 50px;
+ }
+
.neon-text {
@include media-down(lg) {
font-size: 5rem;
@@ -159,12 +167,12 @@
gap: 20px;
@include media-down(lg) {
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
@include media-down(md) {
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: 1fr;
}
}
@@ -190,6 +198,27 @@
color: inherit;
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 {
border-color: #00ffff;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
diff --git a/assets/sass/pages/blog.scss b/assets/sass/pages/blog.scss
index 6bf08e6..1879456 100644
--- a/assets/sass/pages/blog.scss
+++ b/assets/sass/pages/blog.scss
@@ -37,6 +37,10 @@
.blog-header {
text-align: center;
padding-bottom: 20px;
+
+ @include media-down(lg) {
+ font-size: 0.75rem;
+ }
}
// Brand on bezel
@@ -607,6 +611,10 @@
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 255, 0, 0.2);
+
+ @include media-down(lg) {
+ text-align: right;
+ }
}
.blog-post-navigation {
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 8aa279c..5546f2c 100755
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -2,7 +2,6 @@
-
{{ block "title" . }}{{ .Site.Title }} {{ with .Params.Title }} | {{ .
@@ -19,8 +18,13 @@
}}
<!-- Chart.js for graphs - only load if page content contains graph shortcode -->
- {{ if or (findRE "{{<\\s*graph" .RawContent) (findRE "{{%\\s*graph" .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>
+ {{ if or (findRE "{{<\\s*graph" .RawContent) (findRE "{{%\\s*graph"
+ .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 }}
</head>