updated font css, hover css
This commit is contained in:
		
							
								
								
									
										14
									
								
								index.html
									
									
									
									
									
								
							
							
						
						
									
										14
									
								
								index.html
									
									
									
									
									
								
							@@ -100,6 +100,10 @@ $(document).ready(function(){
 | 
				
			|||||||
		todayFormatted = today.toString();
 | 
							todayFormatted = today.toString();
 | 
				
			||||||
	
 | 
						
 | 
				
			||||||
		$("#byline").html("<p>blackout poem inspired by " + book.title + " by " + book.author + "</p><p>composed on: " + todayFormatted) + "</p>"; 
 | 
							$("#byline").html("<p>blackout poem inspired by " + book.title + " by " + book.author + "</p><p>composed on: " + todayFormatted) + "</p>"; 
 | 
				
			||||||
 | 
							
 | 
				
			||||||
 | 
							 $(this).text(function(i, text){
 | 
				
			||||||
 | 
					          return text === "Blackout!" ? "Un-Blackout!" : "Blackout!";
 | 
				
			||||||
 | 
					      })
 | 
				
			||||||
	}); // compose 
 | 
						}); // compose 
 | 
				
			||||||
	
 | 
						
 | 
				
			||||||
	// reset everything back 
 | 
						// reset everything back 
 | 
				
			||||||
@@ -157,15 +161,17 @@ $(document).ready(function(){
 | 
				
			|||||||
	<p>Click on a word to select it, click on it again to unselect. When you’ve found your poem hit Blackout! Get a screen shot and copy the words below!</p>
 | 
						<p>Click on a word to select it, click on it again to unselect. When you’ve found your poem hit Blackout! Get a screen shot and copy the words below!</p>
 | 
				
			||||||
</header>
 | 
					</header>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<nav>
 | 
					 | 
				
			||||||
	<button class="helpbtn btn btn-mn">Help</button> - <button id="lock" class="btn btn-mn">Lock</button> - <button id="compose" class="btn btn-mn">Blackout!</button> - <button id="clear" class="btn btn-mn">Start Over</button> - <button id="screen" class="btn btn-mn">Save as image</button>
 | 
					 | 
				
			||||||
</nav>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<div id="poem_header">
 | 
					<div id="poem_header">
 | 
				
			||||||
	<h2>Invaders from the Dark</h2>
 | 
						<h2>Invaders from the Dark</h2>
 | 
				
			||||||
	<h3>Greye La Spina</h3>
 | 
						<h3>Greye La Spina</h3>
 | 
				
			||||||
</div>
 | 
					</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<nav>
 | 
				
			||||||
 | 
						<button class="helpbtn btn btn-mn">Help</button> - <button id="clear" class="btn btn-mn">Start Over</button> - <button id="compose" class="btn btn-mn">Blackout!</button> - <button id="screen" class="btn btn-mn">Save as image</button>
 | 
				
			||||||
 | 
					</nav>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<main id="poem">
 | 
					<main id="poem">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	<div id="spina" class="unlock">
 | 
						<div id="spina" class="unlock">
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										21
									
								
								style.css
									
									
									
									
									
								
							
							
						
						
									
										21
									
								
								style.css
									
									
									
									
									
								
							@@ -13,20 +13,25 @@ Written by Jacob Haddon https://jacobhaddon.com
 | 
				
			|||||||
@font-face {
 | 
					@font-face {
 | 
				
			||||||
font-family: "lora";
 | 
					font-family: "lora";
 | 
				
			||||||
src: local("Lora"),
 | 
					src: local("Lora"),
 | 
				
			||||||
		url("fonts/Lora/Lora-VariableFont_wght.ttf");
 | 
							url("fonts/Lora/webfonts/Lora-Regular.woff2")   format('woff2'),
 | 
				
			||||||
 | 
							url("fonts/Lora/variable/Lora-VariableFont_wght.ttf")  format('truetype');
 | 
				
			||||||
 | 
							font-style: normal;
 | 
				
			||||||
 | 
							font-weight: normal;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@font-face {
 | 
					@font-face {
 | 
				
			||||||
font-family: "brygada";
 | 
					font-family: "brygada";
 | 
				
			||||||
src: local("Brygada1918"),
 | 
					src: local("Brygada1918"),
 | 
				
			||||||
		url("fonts/Brygada_1918/Brygada1918-VariableFont_wght.ttf");
 | 
							url("fonts/Brygada_1918/Brygada1918-VariableFont_wght.ttf")  format('truetype');
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@font-face {
 | 
					@font-face {
 | 
				
			||||||
font-family: "lora";
 | 
					font-family: "lora";
 | 
				
			||||||
src: local("Lora"),
 | 
					src: local("Lora"),
 | 
				
			||||||
		url("fonts/Lora/Lora-VariableFont_wght.ttf");
 | 
							url("fonts/Lora/webfonts/Lora-Italic.woff2")   format('woff2'),
 | 
				
			||||||
 | 
							url("fonts/Lora/variable/Lora-Italic-VariableFont_wght.ttf");
 | 
				
			||||||
font-weight: normal;
 | 
					font-weight: normal;
 | 
				
			||||||
 | 
					font-style: italic;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
body {
 | 
					body {
 | 
				
			||||||
@@ -96,6 +101,8 @@ a:hover {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
.click {
 | 
					.click {
 | 
				
			||||||
	background-color: Plum;
 | 
						background-color: Plum;
 | 
				
			||||||
 | 
							/*background-color: RebeccaPurple;*/
 | 
				
			||||||
 | 
						/*color: #ffffff;*/
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/* Styles for the buttons */
 | 
					/* Styles for the buttons */
 | 
				
			||||||
@@ -113,8 +120,10 @@ a:hover {
 | 
				
			|||||||
	color: #ffffff;
 | 
						color: #ffffff;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
.btn-mn:hover {
 | 
					.btn-mn:hover {
 | 
				
			||||||
	background-color: Plum;
 | 
					/*	background-color: Plum;
 | 
				
			||||||
	color: #000000;
 | 
						color: #000000;*/
 | 
				
			||||||
 | 
					background-color: black;
 | 
				
			||||||
 | 
					color: white;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.btn-hlp-bx {
 | 
					.btn-hlp-bx {
 | 
				
			||||||
@@ -137,7 +146,9 @@ a:hover {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
.clickDone {
 | 
					.clickDone {
 | 
				
			||||||
	background-color: white;
 | 
						background-color: white;
 | 
				
			||||||
 | 
						
 | 
				
			||||||
	padding: 2px;
 | 
						padding: 2px;
 | 
				
			||||||
 | 
						color: black;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.done {
 | 
					.done {
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user