commit 18b07261a0d90d5db5b29ef8901eb40c21239bdd · katproto.girlonthemoon.xyz/girlonthemoon

caddy/Caddyfile

···

       2
       2
        
       	root * /var/www/gotm

     

       3
       3
        
       	php_fastcgi php-fpm-gotm:9000

     

       4
       4
        
       	file_server

     

       5
       5
       +
       

     

       6
       6
       +
       	handle_path /ruru {

     

       7
       7
       +
       		root * /var/www/gotm

     

       8
       8
       +
       		file_server

     

       9
       9
       +
       	}

     

       5
       10
        
       }

site/ruru/assets/fonts/VictorMono-Italic.ttf

This is a binary file and will not be displayed.

site/ruru/assets/fonts/VictorMono-Regular.ttf

This is a binary file and will not be displayed.

site/ruru/assets/images/ima_bg_00015_N-edit.png

This is a binary file and will not be displayed.

+92

site/ruru/assets/styles/main.css

···

       1
       1
       +
       @font-face {

     

       2
       2
       +
       	font-family: "Victor Mono";

     

       3
       3
       +
       	src: url("../fonts/VictorMono-Regular.ttf");

     

       4
       4
       +
       }

     

       5
       5
       +
       

     

       6
       6
       +
       @font-face {

     

       7
       7
       +
       	font-family: "Victor Mono Italic";

     

       8
       8
       +
       	src: url("../fonts/VictorMono-Italic.ttf");

     

       9
       9
       +
       }

     

       10
       10
       +
       

     

       11
       11
       +
       :root {

     

       12
       12
       +
       	--bg-image: url("../images/ima_bg_00015_N-edit.png");

     

       13
       13
       +
       	--bg-color: rgb(255,252,237,0.9);

     

       14
       14
       +
       	--font-normal: "Victor Mono", sans-serif;

     

       15
       15
       +
       	--font-italic: "Victor Mono Italic", sans-serif;

     

       16
       16
       +
       	--font-size: 1.1rem;

     

       17
       17
       +
       	--main-color: #3caab8;

     

       18
       18
       +
       	--accent-color: #e3841e;

     

       19
       19
       +
       }

     

       20
       20
       +
       

     

       21
       21
       +
       ::selection {

     

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

     

       23
       23
       +
       	color: white;

     

       24
       24
       +
       }

     

       25
       25
       +
       

     

       26
       26
       +
       body {

     

       27
       27
       +
       	background: var(--bg-image);

     

       28
       28
       +
       	font-family: var(--font-normal);

     

       29
       29
       +
       	font-size: var(--font-size);

     

       30
       30
       +
       	color: var(--main-color);

     

       31
       31
       +
       	margin: 0 auto;

     

       32
       32
       +
       }

     

       33
       33
       +
       

     

       34
       34
       +
       #wrapper {

     

       35
       35
       +
       	margin: 0 auto;

     

       36
       36
       +
       	width: 700px;

     

       37
       37
       +
       	background: var(--bg-color);

     

       38
       38
       +
       	backdrop-filter: blur(5px);

     

       39
       39
       +
       	border-radius: 10px;

     

       40
       40
       +
       	padding: 1em;

     

       41
       41
       +
       }

     

       42
       42
       +
       

     

       43
       43
       +
       hgroup > p {

     

       44
       44
       +
       	text-align: center;

     

       45
       45
       +
       	font-size: 1.2rem;

     

       46
       46
       +
       	margin: .5rem;

     

       47
       47
       +
       }

     

       48
       48
       +
       

     

       49
       49
       +
       h1,h2,h3,h4 {

     

       50
       50
       +
       	margin: 0;

     

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

     

       52
       52
       +
       	font-family: var(--font-italic);

     

       53
       53
       +
       }

     

       54
       54
       +
       

     

       55
       55
       +
       h1 {

     

       56
       56
       +
       	text-align: center;

     

       57
       57
       +
       	font-size: 3.1rem;

     

       58
       58
       +
       }

     

       59
       59
       +
       

     

       60
       60
       +
       h2,h3,h4 {

     

       61
       61
       +
       	margin: 1rem 0 1rem 0;

     

       62
       62
       +
       }

     

       63
       63
       +
       

     

       64
       64
       +
       i {

     

       65
       65
       +
       	font-family: var(--font-italic);

     

       66
       66
       +
       	font-style: normal;

     

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

     

       68
       68
       +
       }

     

       69
       69
       +
       

     

       70
       70
       +
       iframe {

     

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

     

       72
       72
       +
       }

     

       73
       73
       +
       

     

       74
       74
       +
       details {

     

       75
       75
       +
       	margin-top: 1rem;

     

       76
       76
       +
       }

     

       77
       77
       +
       

     

       78
       78
       +
       summary {

     

       79
       79
       +
       	cursor: pointer;

     

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

     

       81
       81
       +
       }

     

       82
       82
       +
       

     

       83
       83
       +
       a:link, a:link:active, a:visited, a:visited:active {

     

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

     

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

     

       86
       86
       +
       	text-underline-offset: 3px;

     

       87
       87
       +
       }

     

       88
       88
       +
       

     

       89
       89
       +
       a:not(:is(:hover, :focus)) {

     

       90
       90
       +
         text-decoration-color: 

     

       91
       91
       +
           color-mix(in srgb, currentColor, transparent 45%);

     

       92
       92
       +
       }

+76

site/ruru/assets/styles/reset.css

···

       1
       1
       +
       /* by piccalil.li */

     

       2
       2
       +
       

     

       3
       3
       +
       

     

       4
       4
       +
       /* Box sizing rules */

     

       5
       5
       +
       *,

     

       6
       6
       +
       *::before,

     

       7
       7
       +
       *::after {

     

       8
       8
       +
         box-sizing: border-box;

     

       9
       9
       +
       }

     

       10
       10
       +
       

     

       11
       11
       +
       /* Prevent font size inflation */

     

       12
       12
       +
       html {

     

       13
       13
       +
         -moz-text-size-adjust: none;

     

       14
       14
       +
         -webkit-text-size-adjust: none;

     

       15
       15
       +
         text-size-adjust: none;

     

       16
       16
       +
       }

     

       17
       17
       +
       

     

       18
       18
       +
       /* Remove default margin in favour of better control in authored CSS */

     

       19
       19
       +
       body, h1, h2, h3, h4, p,

     

       20
       20
       +
       figure, blockquote, dl, dd {

     

       21
       21
       +
         margin-block-end: 0;

     

       22
       22
       +
       }

     

       23
       23
       +
       

     

       24
       24
       +
       /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

     

       25
       25
       +
       ul[role='list'],

     

       26
       26
       +
       ol[role='list'] {

     

       27
       27
       +
         list-style: none;

     

       28
       28
       +
       }

     

       29
       29
       +
       

     

       30
       30
       +
       /* Set core body defaults */

     

       31
       31
       +
       body {

     

       32
       32
       +
         min-height: 100vh;

     

       33
       33
       +
         line-height: 1.5;

     

       34
       34
       +
       }

     

       35
       35
       +
       

     

       36
       36
       +
       /* Set shorter line heights on headings and interactive elements */

     

       37
       37
       +
       h1, h2, h3, h4,

     

       38
       38
       +
       button, input, label {

     

       39
       39
       +
         line-height: 1.1;

     

       40
       40
       +
       }

     

       41
       41
       +
       

     

       42
       42
       +
       /* Balance text wrapping on headings */

     

       43
       43
       +
       h1, h2,

     

       44
       44
       +
       h3, h4 {

     

       45
       45
       +
         text-wrap: balance;

     

       46
       46
       +
       }

     

       47
       47
       +
       

     

       48
       48
       +
       /* A elements that don't have a class get default styles */

     

       49
       49
       +
       a:not([class]) {

     

       50
       50
       +
         text-decoration-skip-ink: auto;

     

       51
       51
       +
         color: currentColor;

     

       52
       52
       +
       }

     

       53
       53
       +
       

     

       54
       54
       +
       /* Make images easier to work with */

     

       55
       55
       +
       img,

     

       56
       56
       +
       picture {

     

       57
       57
       +
         max-width: 100%;

     

       58
       58
       +
         display: block;

     

       59
       59
       +
       }

     

       60
       60
       +
       

     

       61
       61
       +
       /* Inherit fonts for inputs and buttons */

     

       62
       62
       +
       input, button,

     

       63
       63
       +
       textarea, select {

     

       64
       64
       +
         font-family: inherit;

     

       65
       65
       +
         font-size: inherit;

     

       66
       66
       +
       }

     

       67
       67
       +
       

     

       68
       68
       +
       /* Make sure textareas without a rows attribute are not tiny */

     

       69
       69
       +
       textarea:not([rows]) {

     

       70
       70
       +
         min-height: 10em;

     

       71
       71
       +
       }

     

       72
       72
       +
       

     

       73
       73
       +
       /* Anything that has been anchored to should have extra scroll margin */

     

       74
       74
       +
       :target {

     

       75
       75
       +
         scroll-margin-block: 5ex;

     

       76
       76
       +
       }

+78

site/ruru/index.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
       

     

       4
       4
       +
       <head>

     

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

     

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

     

       7
       7
       +
       	<meta name="author" content="kat, girlonthemoon.xyz">

     

       8
       8
       +
       	<meta name="description" content="in the orange light: for dambara ruru">

     

       9
       9
       +
       

     

       10
       10
       +
       	<link rel="icon" type="image/x-icon" href="assets/images/favicon.png">

     

       11
       11
       +
       	<link rel="stylesheet" href="assets/styles/reset.css">

     

       12
       12
       +
       	<link rel="stylesheet" href="assets/styles/main.css">

     

       13
       13
       +
       

     

       14
       14
       +
       	<title>in the orange light</title>

     

       15
       15
       +
       </head>

     

       16
       16
       +
       

     

       17
       17
       +
       <body>

     

       18
       18
       +
       

     

       19
       19
       +
       <div id="wrapper">

     

       20
       20
       +
       	<main>

     

       21
       21
       +
       		<hgroup>

     

       22
       22
       +
       			<h1>in the orange light</h1>

     

       23
       23
       +
       			<p>dedicated to <i>Dambara Ruru</i>.</p>

     

       24
       24
       +
       			<p><small>(created for <a href="https://html.energy/html-day/2025/index.html">HTML day 2025</a>!)</small></p>

     

       25
       25
       +
       		</hgroup>

     

       26
       26
       +
       

     

       27
       27
       +
       		<article>

     

       28
       28
       +
       			<section id="about">

     

       29
       29
       +
       				<h2>Who is Dambara Ruru?</h2>

     

       30
       30
       +
       

     

       31
       31
       +
       				<p><i>Dambara Ruru</i> is a member of the j-pop idol group <i>Juice=Juice</i>! She is, as of 2025, their leader, and has been a member since 2017.</p>

     

       32
       32
       +
       

     

       33
       33
       +
       				<p><i>Ruru</i> joined <i>Hello! Project</i> in 2013 as a trainee, hoping to join their flagship group, <i>Morning Musume</i>. As a former student of the famous Hiroshima talent school, her dream of becoming an idol was born through <i>Sayashi Riho</i>, a fellow student who went on to join Morning Musume. Inspired by Riho, <i>Ruru</i> would go on to audition, and successfully become a Hello! Project trainee.</p>

     

       34
       34
       +
       

     

       35
       35
       +
       				<p>In the years she was a trainee, <i>Ruru</i> would work hard to join a Hello! Project group. By 2017, she would find her wish granted, as it was announced that she would be part of the second generation of Juice=Juice, which was initially formed with six members in 2013.</p>

     

       36
       36
       +
       				<p><i>Ruru</i> would make her official debut with Juice=Juice with the song <i>Fiesta! Fiesta!</i>, a fiery, intense song that <i>Ruru</i> would deliver the opening lines to. Her intro to the song would become iconic; her fierce delivery would set the tone for the song that would follow.</p>

     

       37
       37
       +
       

     

       38
       38
       +
       				<p>As of 2025, <i>Ruru</i> has gone from a hopeful, newly debuted idol to the leader of the group she was once new to. Known for her friendliness and dedication to being an idol, as well as her sunny smile and strong vocals, it's hard not to love <i>Dambara Ruru</i>!</p>

     

       39
       39
       +
       			</section>

     

       40
       40
       +
       

     

       41
       41
       +
       			<section id="fan-story">

     

       42
       42
       +
       				<h2>My story as a Dambara Ruru kami-oshi</h2>

     

       43
       43
       +
       

     

       44
       44
       +
       				<p>I first became a fan of <i>Dambara Ruru</i> in late 2019. Being a new fan of Hello! Project, I was first a fan of <i>Suzuki Airi</i>, who had long since graduated from idol life into a solo career. I found <i>Ruru</i> through other fans, initially; as she is favored by Western fans, and especially known for her vocal prowess, it was not long until I discovered her. As soon as I started watching videos of her performing and interacting with her fellow members, I fell in LOVE!</p>

     

       45
       45
       +
       

     

       46
       46
       +
       				<p>Through the years, <i>Ruru</i> has become a massive emotional support for me. As my personal life grew more difficult, <i>Ruru</i> was always there for me in spirit; I always had pictures of her to smile at, videos of her to feel pride from, and so much more. <i>Ruru</i> has been there for me through the toughest times, and I will always treasure the day I discovered her for that reason. <span aria-label="teary face">:')</span> </p>

     

       47
       47
       +
       			</section>

     

       48
       48
       +
       

     

       49
       49
       +
       			<section id="propaganda">

     

       50
       50
       +
       				<h2>Dambara Ruru propaganda!</h2>

     

       51
       51
       +
       

     

       52
       52
       +
       				<p>Still not convinced? <i>Ruru</i> <del>propaganda</del> advertising is here to help! There's a sampling of videos featuring <i>Ruru</i> below for you to decide whether or not you are ready to accept her as your lord and savior— I mean, your oshi.</p>

     

       53
       53
       +
       

     

       54
       54
       +
       				<details>

     

       55
       55
       +
       					<summary>Ruru videos!</summary>

     

       56
       56
       +
       					

     

       57
       57
       +
       					<h3>friendliness</h3>

     

       58
       58
       +
       						<iframe width="500" height="300" src="https://www.youtube.com/embed/PdNdG94IGso" title="Dambara Ruru visits Hayashi Niina&#39;s home to welcome her as Juice=Juice&#39;s new member" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

     

       59
       59
       +
       

     

       60
       60
       +
       						<iframe width="500" height="300" src="https://www.youtube.com/embed/rY5UfW90yiE" title="Dambara Ruru talks about a song that brings back a memory of Uemura Akari" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

     

       61
       61
       +
       

     

       62
       62
       +
       						<iframe width="500" height="300" src="https://www.youtube.com/embed/xXRyeRgjbYY" title="Dambara Ruru talks about what led to her auditioning" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

     

       63
       63
       +
       					<h3>vocals</h3>

     

       64
       64
       +
       						<iframe width="500" height="300" src="https://www.youtube.com/embed/e_yuH2bMBpc" title="プラスティック・ラブ(Acoustic ver.)  段原瑠々" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

     

       65
       65
       +
       

     

       66
       66
       +
       						<iframe width="500" height="300" src="https://www.youtube.com/embed/YVsMJlwGtJQ" title="Manatsu no Kaijitsu" frameborder="0"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

     

       67
       67
       +
       

     

       68
       68
       +
       						<iframe width="500" height="300" src="https://www.youtube.com/embed/_YZf11CEuSg" title="Juice=Juice 段原瑠々 『真夏の果実』Cover" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

     

       69
       69
       +
       				</details>

     

       70
       70
       +
       			</section>

     

       71
       71
       +
       		</article>

     

       72
       72
       +
       		

     

       73
       73
       +
       	</main>

     

       74
       74
       +
       </div>

     

       75
       75
       +
       

     

       76
       76
       +
       </body>

     

       77
       77
       +
       

     

       78
       78
       +
       </html>