commit c5be18cf8f1088cd60c44412f637d276cc861805 · katproto.girlonthemoon.xyz/girlonthemoon

site/assets/images/video_poster.jpg

This is a binary file and will not be displayed.

+100 -33

site/assets/styles/main.css

···

       9
       9
        
           /* left: 50%; */

     

       10
       10
        
           /* transform: translateX(-50%) translateY(-50%); */

     

       11
       11
        
         }

     

       12
       12
       +
       

     

       13
       13
       +
         main video {

     

       14
       14
       +
         	width: 100% !important;

     

       15
       15
       +
         }

     

       12
       16
        
       }

     

       13
       17
        
       

     

       14
       18
        
       @media only screen and (max-width: 1080px) {

     
···

       22
       26
        
           /* left: 50%; */

     

       23
       27
        
           /* transform: translateX(-50%) translateY(-50%); */

     

       24
       28
        
         }

     

       29
       29
       +
        

     

       30
       30
       +
         main video {

     

       31
       31
       +
         	width: 100% !important;

     

       32
       32
       +
         }

     

       33
       33
       +
       }

     

       34
       34
       +
       

     

       35
       35
       +
       :root {

     

       36
       36
       +
       	--text-color: #1e6899;

     

       37
       37
       +
       	--text-color-white: #fff;

     

       38
       38
       +
       	--header-text-color: #330099;

     

       39
       39
       +
       	--background-color: #fff;

     

       40
       40
       +
       	--background-image: url("../images/139.png");

     

       41
       41
       +
       	--accent-color: #9999ff;

     

       42
       42
       +
       	--accent-color-darker: #746fd4;

     

       43
       43
       +
       	--accent-color-darkest: #330099;

     

       44
       44
       +
       	--link-color: #5656e1;

     

       25
       45
        
       }

     

       26
       46
        
       

     

       27
       47
        
       body {

     

       28
       28
       -
       margin: 0;

     

       29
       29
       -
       background: url('../images/139.png');

     

       48
       48
       +
       	margin: 0;

     

       49
       49
       +
       	background: var(--background-image);

     

       30
       50
        
       }

     

       31
       51
        
       

     

       32
       52
        
       @font-face {

     

       33
       33
       -
       font-family: 'Raleway';

     

       34
       34
       -
       font-weight: 400;

     

       35
       35
       -
       src: url('../fonts/Raleway-VariableFont_wght.ttf') 

     

       53
       53
       +
       	font-family: 'Raleway';

     

       54
       54
       +
       	font-weight: 400;

     

       55
       55
       +
       	src: url('../fonts/Raleway-VariableFont_wght.ttf') 

     

       36
       56
        
       }

     

       37
       57
        
       

     

       38
       58
        
       main {

     

       39
       39
       -
       width: 30%;

     

       40
       40
       -
       min-height: 300px;

     

       41
       41
       -
       background: #fff;

     

       42
       42
       -
       padding: 1em;

     

       43
       43
       -
       margin: auto;

     

       44
       44
       -
       color: #1e6899;

     

       45
       45
       -
       font: 1rem 'Raleway', sans-serif;

     

       59
       59
       +
       	width: 30%;

     

       60
       60
       +
       	min-height: 300px;

     

       61
       61
       +
       	background: var(--background-color);

     

       62
       62
       +
       	padding: 1em;

     

       63
       63
       +
       	margin: auto;

     

       64
       64
       +
       	color: var(--text-color);

     

       65
       65
       +
       	font: 1rem 'Raleway', sans-serif;

     

       46
       66
        
       }

     

       47
       67
        
       

     

       48
       68
        
       img.meimg {

     
···

       51
       71
        
       }

     

       52
       72
        
       

     

       53
       73
        
       h1,h2,h3,h4 {

     

       54
       54
       -
       font-family: 'Raleway', sans-serif;

     

       55
       55
       -
       color: #330099;

     

       56
       56
       -
       margin: auto;

     

       57
       57
       -
       text-transform: uppercase;

     

       58
       58
       -
       text-align: center;

     

       59
       59
       -
       font-weight: 200;

     

       74
       74
       +
       	font-family: 'Raleway', sans-serif;

     

       75
       75
       +
       	color: var(--accent-color-darkest);

     

       76
       76
       +
       	margin: 0;

     

       77
       77
       +
       	text-align: left;

     

       78
       78
       +
       	text-transform: uppercase;

     

       79
       79
       +
       	font-weight: 200;

     

       80
       80
       +
       }

     

       81
       81
       +
       

     

       82
       82
       +
       h1 {

     

       83
       83
       +
       	text-align: center;

     

       60
       84
        
       }

     

       61
       85
        
       

     

       62
       86
        
       ul {

     

       63
       63
       -
       padding-left: 1em;

     

       87
       87
       +
       	padding-left: 1em;

     

       64
       88
        
       }

     

       65
       89
        
       

     

       66
       90
        
       ul li {

     

       67
       67
       -
       margin: .5em 0 .5em 0;

     

       91
       91
       +
       	margin: .5em 0 .5em 0;

     

       68
       92
        
       }

     

       69
       93
        
       

     

       70
       94
        
       

     

       71
       95
        
       ::selection {

     

       72
       72
       -
       color: #fff;

     

       73
       73
       -
       background: #330099;

     

       96
       96
       +
       	color: var(--text-color-white);

     

       97
       97
       +
       	background: var(--accent-color-darkest);

     

       74
       98
        
       }

     

       75
       99
        
       

     

       76
       100
        
       .highlight {

     

       77
       77
       -
       background: #9999ff;

     

       78
       78
       -
       color: #fff;

     

       101
       101
       +
       	background: var(--accent-color);

     

       102
       102
       +
       	color: #fff;

     

       103
       103
       +
       }

     

       104
       104
       +
       

     

       105
       105
       +
       h2.highlight {

     

       106
       106
       +
       	width: fit-content;

     

       107
       107
       +
       	padding: 0 2rem 0 2rem;

     

       108
       108
       +
       	margin: 1rem 0 1rem 0;

     

       79
       109
        
       }

     

       80
       110
        
       

     

       81
       111
        
       .desc::before {

     

       82
       82
       -
       content: "↳";

     

       83
       83
       -
       color: #330099;

     

       112
       112
       +
       	content: "↳";

     

       113
       113
       +
       	color: var(--accent-color-darkest);

     

       114
       114
       +
       	margin: 0 .5rem .5rem 0;

     

       84
       115
        
       }

     

       85
       116
        
       

     

       86
       117
        
       a:link, a:link:active, a:visited, a:visited:active {

     

       87
       87
       -
       color: #5656e1;

     

       88
       88
       -
       text-decoration-thickness: 1px;

     

       89
       89
       -
       text-underline-offset: 4px;

     

       118
       118
       +
       	color: var(--link-color);

     

       119
       119
       +
       	text-decoration-thickness: 1px;

     

       120
       120
       +
       	text-underline-offset: 4px;

     

       90
       121
        
       }

     

       91
       122
        
       

     

       92
       123
        
       a:hover {

     

       93
       93
       -
       text-decoration: none;

     

       124
       124
       +
       	text-decoration: none;

     

       94
       125
        
       }

     

       95
       126
        
       

     

       96
       127
        
       a:link.highlight, a:link:active.highlight, a:visited.highlight, a:visited:active.highlight {

     

       97
       97
       -
       color: #fff;

     

       98
       98
       -
       text-decoration: none;

     

       128
       128
       +
       	color: var(--text-color-white);

     

       129
       129
       +
       	text-decoration: none;

     

       99
       130
        
       }

     

       100
       131
        
       

     

       101
       132
        
       a:hover.highlight, a:hover.highlight::selection {

     

       102
       102
       -
       background: #746fd4;

     

       133
       133
       +
       	background: var(--accent-color-darker);

     

       134
       134
       +
       }

     

       135
       135
       +
       

     

       136
       136
       +
       summary::marker {

     

       137
       137
       +
       	content: "↳ ";

     

       138
       138
       +
       	font-weight: bold;

     

       139
       139
       +
       	color: var(--accent-color-darkest);

     

       140
       140
       +
       }

     

       141
       141
       +
       

     

       142
       142
       +
       hr {

     

       143
       143
       +
       	width: 75%;

     

       144
       144
       +
       	border: 1px dashed var(--accent-color-darker);

     

       145
       145
       +
       }

     

       146
       146
       +
       

     

       147
       147
       +
       time {

     

       148
       148
       +
       	color: var(--accent-color);

     

       149
       149
       +
       }

     

       150
       150
       +
       

     

       151
       151
       +
       dt {

     

       152
       152
       +
       	font-weight: bold;

     

       153
       153
       +
       }

     

       154
       154
       +
       

     

       155
       155
       +
       dd {

     

       156
       156
       +
       	margin: .5rem 0 .5rem 0;

     

       157
       157
       +
       }

     

       158
       158
       +
       

     

       159
       159
       +
       video {

     

       160
       160
       +
       	display: block;

     

       161
       161
       +
       	margin: .5rem auto .5rem auto;

     

       162
       162
       +
       	width: 500px !important;

     

       163
       163
       +
       	height: auto;

     

       164
       164
       +
       	aspect-ratio: 16 / 9;

     

       165
       165
       +
       }

     

       166
       166
       +
       

     

       167
       167
       +
       video[poster] {

     

       168
       168
       +
       	object-fit: cover;

     

       169
       169
       +
       	

     

       103
       170
        
       }

     

       104
       171
        
       

     

       105
       172
        
       .githashtag {

site/config.php

···

       1
       1
       +
       <?php

     

       2
       2
       +
       

     

       3
       3
       +
       define("BASE_URL", "https://girlonthemoon.xyz/");

site/hcard.php

···

       1
       1
       +
       <?php include("../config.php"); ?>

     

       2
       2
       +
       

     

       1
       3
        
       <style>

     

       2
       4
        
       .mf-card {

     

       3
       5
        
       	padding: 1em 1em 1.5em 1em;

     
···

       32
       34
        
       		<dl>

     

       33
       35
        
       			<dt><a href="https://lachesis.proven.lol/">proofs.lol</a></dt>

     

       34
       36
        
       				<dd>provenf68641</dd>

     

       37
       37
       +
       			<dt><a href="assets/misc/pgp.txt" class="u-key" rel="pgpkey">PGP key</a></dt>

     

       35
       38
        
       		</dl>

     

       36
       39
        
       	</div>

     

       37
       40
        
       </div>

+6 -1

site/head.php

···

       1
       1
       +
       <?php include("config.php"); ?>

     

       2
       2
       +
       

     

       1
       3
        
       <head>

     

       4
       4
       +
       	<base href="<?=BASE_URL?>">

     

       2
       5
        
       	<meta charset="UTF-8">

     

       3
       3
       -
       

     

       6
       6
       +
       	

     

       7
       7
       +
       	<meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       8
       8
       +
       	

     

       4
       9
        
       	<meta name="author" content="kat, girl on the moon">

     

       5
       10
        
       	<meta name="description" content="why do you look so blue?">

     

       6
       11

site/index.php

···

       26
       26
        
       

     

       27
       27
        
       	<p>in my spare time i can be found messing with my servers and deploying sites for fun. servers are a huge passion for me and i am ecstatic anytime someone shows interest in them. feel free to talk to me anytime about my work and about servers in general.</p>

     

       28
       28
        
       

     

       29
       29
       +
       	<hr>

     

       30
       30
       +
       

     

       29
       31
        
       	<?php include "nav.php" ?>

     

       30
       32
        
       

     

       31
       33
        
       	<div style="text-align:center;"><img src="assets/images/81824br5uyrfrsr.gif" alt="a 3D animated pink and gray cat dancing on two legs'"></div>

+5 -2

site/nav.php

···

       1
       1
        
       <nav>

     

       2
       2
       -
       	<p><span aria-hidden="true">🔗</span> <a href="docs.php">docs</a></p>

     

       3
       2
        
       

     

       4
       3
        
       	<p><?php

     

       5
       4
        
       		$hash = getenv("RESHASH");

     
···

       7
       6
        
       		echo "<span class='githashtag' aria-hidden='true'>#</span><a class='githashlink' href='$hashUrl'>$hash</a>";

     

       8
       7
        
       	?></p>

     

       9
       8
        
       

     

       10
       10
       -
       	<p><span aria-hidden="true">🌐</span> <a href="https://bubblegum.girlonthemoon.xyz/">blog</a>, <a href="https://sakura.girlonthemoon.xyz">garden</a>, <a href="mailto:witnesslachesis@disroot.org">email</a>, <a href="assets/misc/pgp.txt">PGP key</a></p>

     

       9
       9
       +
       	<p><span aria-hidden="true">🔗</span> <a href="docs.php">docs</a>, <a href="/vids">videos</a></p>

     

       10
       10
       +
       

     

       11
       11
       +
       	<p><span aria-hidden="true">🌐</span> <a href="https://bubblegum.girlonthemoon.xyz/">blog</a>, <a href="https://sakura.girlonthemoon.xyz">garden</a></p>

     

       12
       12
       +
       	 

     

       13
       13
       +
       	<p><span aria-hidden="true">📧</span> <a href="mailto:witnesslachesis@disroot.org?subject=hi%20from%20your%20site">email</a>, <a href="assets/misc/pgp.txt">PGP key</a></p>

     

       11
       14
        
       

     

       12
       15
        
       	<p><span aria-hidden="true">💙</span> <a href="https://www.patreon.com/c/girlonthemoon">patreon</a>, <a href="https://ko-fi.com/girlonthemoon">ko-fi</a></p>

     

       13
       16

+100

site/vids/index.php

···

       1
       1
       +
       <?php

     

       2
       2
       +
       

     

       3
       3
       +
       include "../httpheaders.php";

     

       4
       4
       +
       

     

       5
       5
       +
       ?>

     

       6
       6
       +
       

     

       7
       7
       +
       <!DOCTYPE html>

     

       8
       8
       +
       <html lang="en">

     

       9
       9
       +
       

     

       10
       10
       +
       <?php include "../head.php" ?>

     

       11
       11
       +
       

     

       12
       12
       +
       <body>

     

       13
       13
       +
       

     

       14
       14
       +
       <main>

     

       15
       15
       +
       	<header>

     

       16
       16
       +
       		<h1 class="highlight" id="vids">vids</h1>

     

       17
       17
       +
       	</header>

     

       18
       18
       +
       

     

       19
       19
       +
       		<section aria-labelledby="guitar">

     

       20
       20
       +
       			<h2 id="guitar" class="highlight">guitar</h2>

     

       21
       21
       +
       

     

       22
       22
       +
       			<p>

     

       23
       23
       +
       				guitar became a hobby of mine through high school guitar classes. having dabbled in ukulele before and knowing how to read tab as a result,

     

       24
       24
       +
       				i exceled.

     

       25
       25
       +
       			</p>

     

       26
       26
       +
       	

     

       27
       27
       +
       			<p>

     

       28
       28
       +
       				in the years since, my time and energy have grown more limited, and i don't play nearly as much as i used to, or as much as i'd

     

       29
       29
       +
       				like to.

     

       30
       30
       +
       			</p>

     

       31
       31
       +
       	

     

       32
       32
       +
       			<p>

     

       33
       33
       +
       				sometimes, though, i like to record what i play.

     

       34
       34
       +
       			</p>

     

       35
       35
       +
       

     

       36
       36
       +
       			<hr>

     

       37
       37
       +
       			

     

       38
       38
       +
       			<dl>

     

       39
       39
       +
       				<dt>ditto - newjeans (<time datetime="2025-08-31">august 2025</time>)</dt>

     

       40
       40
       +
       					<dd>

     

       41
       41
       +
       						<details>

     

       42
       42
       +
       							<summary>watch on site</summary>

     

       43
       43
       +
       

     

       44
       44
       +
       							<video controls preload="none" poster="assets/images/video_poster.jpg">

     

       45
       45
       +
       								<source src="https://stash.4-walls.net/vids/kat/2025_08_31_ditto.mp4" type="video/mp4" />

     

       46
       46
       +
       								download the <a href="https://stash.4-walls.net/vids/kat/2025_08_31_ditto.mp4" download>MP4 file</a>

     

       47
       47
       +
       							</video>

     

       48
       48
       +
       						</details>

     

       49
       49
       +
       					</dd>

     

       50
       50
       +
       			

     

       51
       51
       +
       				<dt>jesus & austria - cake bake betty (<time datetime="2023-04-25">april 2023</time>)</dt>

     

       52
       52
       +
       					<dd>

     

       53
       53
       +
       						<details>

     

       54
       54
       +
       							<summary>watch on site</summary>

     

       55
       55
       +
       								<video controls preload="none" poster="assets/images/video_poster.jpg">

     

       56
       56
       +
       									<source src="https://stash.4-walls.net/vids/kat/2023_04_25_jesusaustria.mp4" type="video/mp4" />

     

       57
       57
       +
       									download the <a href="https://stash.4-walls.net/vids/kat/2023_04_25_jesusaustria.mp4" download>MP4 file</a>

     

       58
       58
       +
       								</video>

     

       59
       59
       +
       						</details>

     

       60
       60
       +
       					</dd>

     

       61
       61
       +
       

     

       62
       62
       +
       				<dt>random shit (<time datetime="2023-02">february 2023</time>)</dt>

     

       63
       63
       +
       					<dd>

     

       64
       64
       +
       						<details>

     

       65
       65
       +
       							<summary>watch on site</summary>

     

       66
       66
       +
       								<video controls preload="none" poster="assets/images/video_poster.jpg">

     

       67
       67
       +
       									<source src="https://stash.4-walls.net/vids/kat/2025_02_randomshit.mp4" type="video/mp4" />

     

       68
       68
       +
       									download the <a href="https://stash.4-walls.net/vids/kat/2025_02_randomshit.mp4" download>MP4 file</a>

     

       69
       69
       +
       								</video>

     

       70
       70
       +
       						</details>

     

       71
       71
       +
       					</dd>

     

       72
       72
       +
       

     

       73
       73
       +
       				<dt>river - AKB48 (<time datetime="2020-11">november 2020</time>)</dt>

     

       74
       74
       +
       					<dd>

     

       75
       75
       +
       						<details>

     

       76
       76
       +
       							<summary>watch on site</summary>

     

       77
       77
       +
       								<video controls preload="none" poster="assets/images/video_poster.jpg">

     

       78
       78
       +
       									<source src="https://stash.4-walls.net/vids/kat/2020_11_river.mp4" type="video/mp4" />

     

       79
       79
       +
       									download the <a href="https://stash.4-walls.net/vids/kat/2020_11_river.mp4" download>MP4 file</a>

     

       80
       80
       +
       								</video>

     

       81
       81
       +
       						</details>

     

       82
       82
       +
       					</dd>

     

       83
       83
       +
       

     

       84
       84
       +
       				<dt>morning of the slag ravine - joe hisaishi (<time datetime="2020-03">march 2020</time>)</dt>

     

       85
       85
       +
       					<dd>

     

       86
       86
       +
       						<details>

     

       87
       87
       +
       							<summary>watch on site</summary>

     

       88
       88
       +
       								<video controls preload="none" poster="assets/images/video_poster.jpg">

     

       89
       89
       +
       									<source src="https://stash.4-walls.net/vids/kat/2020_03_morningslagravine.mp4" type="video/mp4" />

     

       90
       90
       +
       									download the <a href="https://stash.4-walls.net/vids/kat/2020_03_morningslagravine.mp4" download>MP4 file</a>

     

       91
       91
       +
       								</video>

     

       92
       92
       +
       						</details>

     

       93
       93
       +
       					</dd>

     

       94
       94
       +
       			</dl>

     

       95
       95
       +
       		</section>

     

       96
       96
       +
       </main>

     

       97
       97
       +
       

     

       98
       98
       +
       </body>

     

       99
       99
       +
       

     

       100
       100
       +
       </html>