-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathUpdates.html
More file actions
412 lines (406 loc) · 22.5 KB
/
Copy pathUpdates.html
File metadata and controls
412 lines (406 loc) · 22.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
<!DOCTYPE html>
<html lang="en" data-selected-theme="alt">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Itim&family=Merriweather+Sans:wght@400;500;600;700;800&family=Spectral:wght@200;300;400;600;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="images/Favicons/Favicon512.png" sizes="512x512">
<link rel="icon" type="image/png" href="images/Favicons/Favicon192.png" sizes="192x192">
<link rel="icon" type="image/png" href="images/Favicons/Favicon180.png" sizes="180x180">
<link rel="icon" type="image/png" href="images/Favicons/Favicon32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/Favicons/Favicon16.png" sizes="16x16">
<link rel="icon" type="image/icon" href="images/Favicons/favicon.ico" sizes="48x48">
<style>
:root {
--hue: 290;
--hue2: 320;
--angle: 160deg;
--middleHR: "✿";
--middleImageHR: " ⋆⋅☆⋅⋆ ";
--middleLength: 7;
--middleAddition: "──";
--bg1l: 97.5%;
--bg2l: 85%;
--bqbg1l: 95%;
--bqbg2l: 80%;
}
img{
width: clamp(50%, 75%, 100%);
/* max-height: 30vw; */
/* width: auto; */
height: auto;
/* transform: translateX(calc(50vw - 50%)); */
border-radius: 15px;
border: 2px solid rgba(0, 0, 0, 0.5);
display: inline-block;
margin-top: 1em;
margin-bottom: 1em;
}
.card ul{
text-indent: 0px;
margin-left: 0px;
}
.posts{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 1.5em;
/* margin-left: 10%; */
/* margin-right: 10%; */
}
.card {
border-radius: 20px;
font-family: 'Itim', cursive;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
/* flex: 1 1 auto; */
display: block;
width: clamp(45ch, 52.5ch, 75ch);
/* height: clamp(30px, 200px, 100%); */
padding: 15px;
margin-top: calc(var(--step3) + 10px);
margin-right: calc(var(--step3) + 10px);
margin-left: calc(var(--step3) + 20px);
--step1: 7px;
--step2: 14px;
--step3: 21px;
--step1N: -7px;
--step2N: -14px;
--step3N: -21px;
--hueOne: 290;
--hueDif: 10;
--hueOneThird: calc(var(--hueOne) + var(--hueDif));
--hueTwoThird: calc(var(--hueOne) + var(--hueDif) + var(--hueDif));;
--hueThrThird: calc(var(--hueOne) + var(--hueDif) + var(--hueDif) + var(--hueDif));;
--bgColor: hsl(var(--hueOne), 90%, var(--bg1l));
--bgColor2: hsl(var(--hueOne), 60%, var(--bg2l));
background-color: var(--bgColor);
border: 3px solid hsl(var(--hueOne), 90%, 60%);
box-shadow: var(--step1) var(--step1N) 0 -3px var(--bgColor2), var(--step1) var(--step1N) 0 0px hsl(var(--hueOneThird), 90%, 60%),
var(--step2) var(--step2N) 0 -3px var(--bgColor2), var(--step2) var(--step2N) 0 0px hsl(var(--hueTwoThird), 90%, 60%),
var(--step3) var(--step3N) 0 -3px var(--bgColor2), var(--step3) var(--step3N) 0 0px hsl(var(--hueThrThird), 90%, 60%);
transition: box-shadow 1s, top 1s, left 1s;
&:hover {
top: -40px;
left: 40px;
box-shadow: 0 0 0 -3px var(--bgColor2), 0 0 0 0 hsl(var(--hueOneThird), 90%, 60%),
0 0 0 -3px var(--bgColor2), 0 0 0 0 hsl(var(--hueTwoThird), 90%, 60%),
0 0 0 -3px var(--bgColor2), 0 0 0 0 hsl(var(--hueThrThird), 90%, 60%);
}
> blockquote {
background: hsl(var(--hueOne), 100%, var(--bqbg1l));
border-left: 10px solid hsl(var(--hueOne), 80%, var(--bqbg2l));
margin: 0.75em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
border-radius: 10px;
}
> blockquote p{
text-align: left;
}
}
.card:hover {
top: -40px;
left: 40px;
box-shadow: 0 0 0 -3px var(--bgColor2), 0 0 0 0 hsl(var(--hueOneThird), 90%, 60%),
0 0 0 -3px var(--bgColor2), 0 0 0 0 hsl(var(--hueTwoThird), 90%, 60%),
0 0 0 -3px var(--bgColor2), 0 0 0 0 hsl(var(--hueThrThird), 90%, 60%);
}
.card > blockquote {
background: hsl(var(--hueOne), 100%, var(--bqbg1l));
border-left: 10px solid hsl(var(--hueOne), 80%, var(--bqbg2l));
margin: 0.75em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
border-radius: 10px;
}
.card > blockquote p{
text-align: left;
}
.card h2{
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
font-size: 1em;
/* font-weight: 600; */
}
.card a:link, .card a:visited, .card a:active{
text-decoration: underline hsl(var(--hue), 6%, 27%) solid 2px;
}
[data-selected-theme="alt"] .card a:link, [data-selected-theme="alt"] .card a:visited, [data-selected-theme="alt"] .card a:active {
text-decoration: underline hsl(var(--hue), 6%, 83%) solid 2px;
}
@media (max-width: 520px){
.posts{
margin-left:initial;
margin-right:initial;
}
.card{
width: clamp(20ch, 30ch, 40ch);
box-shadow: none;
margin-top: 0px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
}
@media (min-width: 521px){
img{
max-width: 100%;
height: clamp(5vh, auto, 50vh);
width: auto;
/* height: auto; */
/* transform: translateX(calc(50vw - 50%)); */
}
}
</style>
<link rel="stylesheet" href="CSS/HeadersAndDefaults.css?v=1">
<link rel="stylesheet" href="CSS/HrStyles.css?v=1">
<link rel="stylesheet" href="CSS/Nav.css?v=1">
<script src="nav.js"></script>
<script>window.onload = () => {
getVersionNumber();
let headStyles = `
<link rel="stylesheet" href="CSS/HeadersAndDefaults.css?v=${versionNumber}">
<link rel="stylesheet" href="CSS/HrStyles.css?v=${versionNumber}">
<link rel="stylesheet" href="CSS/Nav.css?v=${versionNumber}">
`;
document.querySelector('head').innerHTML += headStyles;
CreateNavbar("Updates");}</script>
</head>
<body>
<header>
<div class="navbar">
<h3 id="SiteName">Prismoria</h3>
<div class="flex-container">
<a href="index.html" id="TheParticle">The Particle</a>
<div class="dropdown">
<button class="dropbtn" id="Characters">Characters
</button>
<div class="dropdown-content">
<a href="Jay.html">Jay Star</a>
<a href="Jacob.html">Jacob Jackson</a>
<a href="Sam.html">Samuel Broteez</a>
<a href="Elliot.html">Elliot Evans</a>
<a href="River.html">River Lucero</a>
<a href="Lucian.html">Lucian Draven</a>
<a href="Adam.html">Adam Zondervan</a>
<!-- <a href="YoungElliot.html">(Younger) Elliot Evans</a>
<a href="Adam.html">Adam Zondervan</a>
<a href="Rene.html">Rene Tickle</a> -->
</div>
</div>
<a href="SomeStories.html" id="SomeStories">Some Stories</a>
<a href="Updates.html" id="Updates" class="Selected">Site Updates</a>
</div>
</div>
</header>
<main>
<section class="posts">
<article class="card">
<p>
February 22nd, 2025 - 12:49 PM - 1/1
</p>
<h2>
Each character now has their own 2 fonts (body and headings)!
</h2>
</article>
<article class="card">
<p>
February 21th, 2025 - 7:38 PM - 1/1
</p>
<h2>
MAJOR SITE REVAMP<br>
Mostly backend stuff, but
</h2>
<img src="images/Posts/OldCss.png">
<h2>is now</h2>
<img src="images/Posts/NewCss.png">
<h2>Plus a lot of other stuff similar to that!</h2>
</article>
<article class="card">
<p>
October 29th, 2024 - 9:48 PM - 1/1
</p>
<h2>
Development of my visual novel has started. There have also been some minor changes to the characters sheets along the way.<br>
The visual novel can be found at <a href="Game/MenuScreen.html">www.prismoria.site/Game/MenuScreen.html</a>. It's a tri-part novel to be able to tell my story from 3 perspectives: Jay, Sam, and Elliot. This may change.
</h2>
</article>
<article class="card">
<p>
June 8th, 2023 - 9:28 PM - 1/1
</p>
<h2>
I got a custom domain name! :D This site is now being hosted at <a href="https://www.prismoria.site">www.prismoria.site</a>! It still has SSL certification and everything. Spent a long time getting the DNS server to accept it.
</h2>
</article>
<article class="card">
<p>
June 4th, 2023 - 9:28 PM - 1/1
</p>
<h2>
I went ahead and created favicons for each of my characters. I might still add new ones that look better at a small scale (16x16 px of 32x32 px), but currently, there is a favicon for each character.<br><br>
<a href="Rene.html">Rene's</a> character sheet has finally been added. A lot of the info is still missing, but at least the page exists now.
</h2>
</article>
<article class="card">
<p>
May 29th, 2023 - 9:28 PM - 1/1
</p>
<h2>
Added a bunch of animations. Also got some JavaScript setup to be able to update the CSS version number based on the local storage of the device. Really just did stuff to clean up my previous code and spice up the user experience on the site.
</h2>
</article>
<article class="card">
<p>
May 28th, 2023 - 2/2
</p>
<h2>
I added color options! :D Finished right before I plan on going to bed. Been working on the stuff all day.
</h2>
</article>
<article class="card">
<p>
May 28th, 2023 - 1/2
</p>
<h2>
Spent all day attempting to use the Spotify API so I wouldn't have to include all the music files in the project and use up all that space, but I only got halfway. I don't know how to use React, having the embed of the Spotify player requires it. Plus, it may require the user to sign in to their own spotify account? I don't want that, the user might not have one.<br><br>For now, I'm sticking with downloading the songs I want to include and handling the music that way.<br>I also added <a href="Adam.html">Adam</a> to the list of characters I moved over to this site. And I moved this site from where it was before (A place being hosted by my university. I didn't want to use their system for these audio files, since those are larger files) to <a href="https://pages.github.com/">GitHub Pages</a>.
</h2>
</article>
<article class="card">
<p>
May 27th, 2023 - 1/1
</p>
<h2>
We have <i>sound</i> working in the character sheets! Set up the audio element to match the theme while also showing the name of the song playing above the controls.
</h2>
<blockquote>
<p>audio::-webkit-media-controls-volume-control-container</p>
<p>audio::-webkit-media-controls-enclosure</p>
<p>audio::-webkit-media-controls-time-remaining-display</p>
</blockquote>
<h2>Had to deal with styling elements like those.</h2>
</article>
<article class="card">
<p>
May 26th, 2023 - 1/1
</p>
<h2>
I learned what css versions are! I can now put all my css into external stylesheets and not have to worry about not being able to see the changes in my browser! So, I put all my css into separeate files except for some things that were unique for each page. Currently, I am going about this in a component-based route, attaching differnet component types when needed but leave the individual differences in the head of each file.<br><br>I also created <a href="Elliot.html">Elliot's</a> character sheet. The navigation bar now stays at the top of the screen at all times.
</h2>
</article>
<article class="card">
<p>
May 25th, 2023 - 1/1
</p>
<h2>
Updates here have been slow as I have recently started my new job! It started on the 15th, it's been taking up most of my time. Hopefully I still find time to update this site though!
</h2>
</article>
<article class="card">
<p>
May 12th, 2023 - 1/1
</p>
<h2>
Breakdown of some stuff that got done by 5pm today:
</h2>
<ul>
<li>Added <a href="Jacob.html">Jacob</a> to the list of characters fully move over to this site</li>
<li>Refactored the navbar to make responsive design easier</li>
<!-- <img src="images/Posts/5-12-HomeMobile.jpg">
<img src="images/Posts/5-12-CharacterMobile.jpg"> -->
<!-- <h2 style="text-align: center;">That's what the mobile version looks like currently</h2> -->
<li>Took the hr styling and threw it into a js file for html sites to call if they need an hr element. That way that giant block of styling isn't taking up space everywhere</li>
</ul>
</article>
<article class="card">
<p>
May 11th, 2023 - 3/3
</p>
<h2>
Okay, I am not going into as much detail anymore. Here's the breakdown of some stuff that happened / got done:
</h2>
<ul>
<li><a href="https://fossheim.io/">Sarah Fossheim</a> is great. I based these post appearances off of their work</li>
<li><a href="https://css-tricks.com/author/chriscoyier/">Chris Coyier</a> is also great. He actually made a thing called <a href="https://flickity.metafizzy.co/">Flickity</a>, which I used for the carousel in the <a href="index.html">homepage</a></li>
<li>Added a button the the navbar component that remains at the bottom of the screen to be able to quickly go back to the top of the page</li>
<li>Fiddled with the gradients more</li>
<li>The <i>Horizontal Rule</i> element, oh my goodness, that was so complicated for no reason. And that is a piece of CSS that I am copying and pasting into each page. But this time, there's a reason for that! It's so that I can change the symbol in the middle of the line.</li>
<li>The @media rules kept breaking on me, who knows why</li>
<li>Since I worked out most kinks in the design for <a href="Sam.html">Sam's</a> character sheet, creating <a href="Jay.html">Jay</a> was smooth and quick</li>
<li>I got my <a href="SomeStories.html">story page</a> set up!</li>
<li>After learning a bunch of stuff from looking stuff up and since my back was hurting from sitting for too long, I decided to just rest in bed and watch some YouTube. But, I still wanted to be productive, so I watched some stuff to learn better technique for CSS code. That's also where I got the idea of making this page and tracking my progress</li>
<li>I implemnted some tips from the videos I watched</li>
</ul>
</article>
<article class="card">
<p>
May 11th, 2023 - 2/3
</p>
<h2>
There is one element I want to be able to carry through multiple pages. Now that I'm moving on to making <a href="Jay.html">Jay</a>, I don't want to have to keep copying and pasting the code from place to place for the navigation bar at the top. But like mentioned before, I can't use external stylesheets. What's the net best choice?
</h2>
<blockquote><p>let CreateNavbar = () => { document .querySelector('head') .innerHTML += `<style> …</p></blockquote>
<h2>Create my own version of an external stylesheet. Yup. Fun times. I also did this with all the big chuncks of text in the character sheets so they wouldn't clutter the HTML semantics. The only thing that needs to be done in the HTML is for the script to be called.</h2>
</article>
<article class="card">
<p>
May 11th, 2023 - 1/3
</p>
<h2>
I found some more tutorials and stuff the the gradients. Woke up and went straight to work on this. I found out a better method for the gradients on all the separate elements: stop trying to figure it out, use blending modes.
</h2>
<blockquote><p>background-color: var(--sectionLabelColor);</p>
<p>mix-blend-mode: color-burn;</p>
<p>mix-blend-mode: saturation, luminosity;</p></blockquote>
<h2>It wasn't as dark as I wanted while keeping the saturation, so, I went the other way. The headers are a more pastel version of the background color. The body spans the entire page, the gradient was on that the entire time. It everything else just maintains that hue, the gradient will follow through. It was the same with the text:</h2>
<blockquote><p>color: var(--darkText);</p>
<p>mix-blend-mode: luminosity;</p></blockquote>
</article>
<article class="card">
<p>
May 10th, 2023 - 3/3
</p>
<h2>
Started the first character sheet for <a href="Sam.html">Sam</a>. No clue why, but I decided I wanted to have a dual color scheme, with a main color and a secondary color the the ENTIRE page gradients towards. Why did I do this to myself? Not only do I want the backgrounds to have a gradient throughout the page, I want the text to subtly change too. I found <a href="https://stackoverflow.com/questions/27791081/css-gradient-over-multiple-elements">this</a> code snippet and tried to use it:
</h2>
<blockquote class="quote"><p>background-image: linear-gradient(white, black);</p>
<p>background-size: cover;</p>
<p>background-position: center;</p>
<p>background-attachment: fixed;</p></blockquote>
<h2>
That had an... Interesting effect.<br>
I later found out this was because of the "background-attachment: fixed;" that caused this to happen, but instead of the gradient filling the entire page, it only covered the current view of the page; the height of the screen, not the page.
</h2>
</article>
<article class="card">
<p>
May 10th, 2023 - 2/3
</p>
<h2>
I got <a href="index.html">the first page</a> done! I'm trying my best to use scalable practices so that development doesn't become exponentially harder as time goes on, however, I cannot keep my CSS in external stylesheets. It may just be my computer, but if I upload a CSS file with the same name as another, replacing the old one, the new one seems to take no effect. So, I just keep all the style in the head, which is annoying.
</h2>
</article>
<article class="card">
<p>
May 10th, 2023 - 1/3
</p>
<h2>
Started this site. I have an old version of it <a href="https://sites.google.com/view/prismoria">here</a>. For some reason, some people I rp with can't access that <a href="https://www.google.com">Google</a> site though, so, I'm making my own website to hold all my information. This way, it's even more customizable too. Hopefully, I can move it off of my college profile eventually, but then I'd have to figure out how to hook up <a href="https://github.com/">GitHub</a> with HTML. I know that would be like a 5 minute tutorial or something, but I'm stubborn and don't feel like doing that right now.
</h2>
</article>
</section>
</main>
<footer>
<button data-theme="normal" aria-pressed="false" id="NormalMode"></button>
<button data-theme="alt" aria-pressed="true" id="AltMode"></button>
<!-- <button data-theme="custom" aria-pressed="false" id="CustMode"></button> -->
</footer>
</body>
</html>