changing fonts and positions bckplcs

master
ada 5 months ago
parent e908684d80
commit b38ecf6ed5

@ -1,4 +0,0 @@
# backplaces
hi

Binary file not shown.

@ -1,75 +1,47 @@
@font-face { @font-face {
font-family: 'Redaction-Regular'; font-family: 'Redaction-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction-Regular.woff2')format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_10-Regular'; font-family: 'Redaction_10-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_10-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction_10-Regular.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_20-Regular'; font-family: 'Redaction_20-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_20-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction_20-Regular.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_35-Regular'; font-family: 'Redaction_35-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_35-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction_35-Regular.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_50-Regular'; font-family: 'Redaction_50-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_50-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction_50-Regular.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_70-Regular'; font-family: 'Redaction_70-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_70-Regular.woff2') format('opentype'); src: url('./Redaction/Redaction_70-Regular.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_100-Regular'; font-family: 'Redaction_100-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_100-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction_100-Regular.woff2') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Karrik-Regular';
src: url('../css/fonts/karrik_fonts-main/WOFF/Karrik-Regular.woff') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'VG5000-Regular';
src: url('../css/fonts/vg5000-master/webfonts/VG5000-Regular_web.woff') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'WorkSans-Thin';
src: url('css/fonts/worksans/WorkSans-Thin.woff') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'WorkSans-Medium';
src: url('../css/fonts/worksans/WorkSans-Medium.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

Binary file not shown.

@ -1,7 +1,7 @@
body { body {
background-color: rgb(53, 67, 196); background-color: rgb(53, 67, 196);
min-height: 100vH; min-height: 100vH;
font-family: 'Redaction-Regular', serif; font-family: 'Redaction-Regular', serif;
} }
.container { .container {
@ -14,7 +14,6 @@ body {
font-family: 'Redaction_35-Regular', serif; font-family: 'Redaction_35-Regular', serif;
color: #FCF6F1ff; color: #FCF6F1ff;
font-size: 8rem; font-size: 8rem;
flex: 0 0 auto;
text-align: left; text-align: left;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -65,7 +64,7 @@ body {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #FCF6F1ff; color: #FCF6F1ff;
font-size: 20px; font-size: 1.5rem;
font-family: 'Redaction-Regular'; font-family: 'Redaction-Regular';
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
@ -81,7 +80,7 @@ body {
.letterBox { .letterBox {
line-height: 150%; line-height: 150%;
font-size: 17px; font-size: 1.3rem;
padding: 30px; padding: 30px;
margin: 60px; margin: 60px;
max-width: 99%; max-width: 99%;
@ -96,7 +95,7 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: right; justify-content: right;
position: absolute; position: absolute;
font-family: 'WorkSans-Medium';
} }
.letterContents { .letterContents {
@ -144,10 +143,11 @@ body {
display: block; display: block;
font-family: 'Redaction_35-Regular', serif; font-family: 'Redaction_35-Regular', serif;
color: #FCF6F1ff; color: #FCF6F1ff;
font-size: 5rem; /* Adjust font size */ font-size: 5rem;
position: relative;
left: -3rem;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: -40px; margin-top: -40px;
margin-left: -20px;
line-height: 100%; line-height: 100%;
} }
@ -177,7 +177,7 @@ body {
.letterBox { .letterBox {
line-height: 130%; line-height: 130%;
font-size: 12px; font-size: 1rem;
padding: 30px; padding: 30px;
margin: 30px; margin: 30px;
max-width: 99%; max-width: 99%;
@ -192,7 +192,11 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: right; justify-content: right;
position: absolute; position: absolute;
font-family: 'WorkSans-Medium';
}
.letterBox p {
margin-top: 0 ;
} }
.img-container .caption { .img-container .caption {

@ -13,7 +13,7 @@
</head> </head>
<body> <body>
<!-- nav --> <!-- nav -->
<a href="/index.html" target="_self"> <a href="../index.html" target="_self">
<img id="home" src="../photos/home-closed.png" alt="home"> <img id="home" src="../photos/home-closed.png" alt="home">
</a> </a>

@ -161,7 +161,7 @@ body {
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
body { body {
font-size: 13px; font-size: 14px;
} }
#about { #about {

@ -1,21 +1,21 @@
document.addEventListener('DOMContentLoaded', () => { // document.addEventListener('DOMContentLoaded', () => {
const title = document.querySelector('.title'); // const title = document.querySelector('.title');
const fonts = [ // const fonts = [
'Redaction-Regular', // 'Redaction-Regular',
'Redaction_10-Regular', // 'Redaction_10-Regular',
'Redaction_20-Regular', // 'Redaction_20-Regular',
'Redaction_35-Regular', // 'Redaction_35-Regular',
'Redaction_50-Regular', // 'Redaction_50-Regular',
'Redaction_70-Regular', // 'Redaction_70-Regular',
'Redaction_100-Regular' // 'Redaction_100-Regular'
]; // ];
let currentFontIndex = 0; // let currentFontIndex = 0;
title.addEventListener('click', () => { // title.addEventListener('click', () => {
currentFontIndex = (currentFontIndex + 1) % fonts.length; // currentFontIndex = (currentFontIndex + 1) % fonts.length;
title.style.fontFamily = fonts[currentFontIndex]; // title.style.fontFamily = fonts[currentFontIndex];
}); // });
}); // });
function openLetter() { function openLetter() {
$('#letterContents').html(` $('#letterContents').html(`
@ -25,7 +25,7 @@ function openLetter() {
<br><br> <br><br>
I created three backplaces for you: Solar Sibling, Hermit Fantasy, and Cake Intimacies. Each represents a unique performance or project. Some stories may evoke memories of pain. As you sit in the audience, know I am with you, holding your hand through each scene. If it feels overwhelming, you can step out, take a break, or leave. This isn't choreographed, and I care deeply for you. I created three backplaces for you: Solar Sibling, Hermit Fantasy, and Cake Intimacies. Each represents a unique performance or project. Some stories may evoke memories of pain. As you sit in the audience, know I am with you, holding your hand through each scene. If it feels overwhelming, you can step out, take a break, or leave. This isn't choreographed, and I care deeply for you.
<br><br> <br><br>
I hope you see what I saw in these stories. Safe dreams now. I'll talk to you soon. I hope you see what I saw in these stories. Safe dreams now, and I'll talk to you soon.
<br> <br>
ada ada
</p> </p>

@ -19,7 +19,7 @@
<button id="mute-btn">MUTE</button> <button id="mute-btn">MUTE</button>
<a href="/index.html" target="_blank"> <a href="../index.html" target="_blank">
<img id="home" src="../photos/home-closed.png" alt="home"> <img id="home" src="../photos/home-closed.png" alt="home">
</a> </a>

Loading…
Cancel
Save