Commit e8023a42 authored by haukao's avatar haukao
Browse files

Added change of font. This concludes the customization optiosn for the user :)

Closes issue #12
parent 89a5a655
html { html {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
header { header {
padding-top: 2%; padding-top: 2%;
padding-bottom: 2%; padding-bottom: 2%;
margin-bottom: 2%; margin-bottom: 2%;
background-color: #202040; background-color: #202040;
} }
body { body {
background-color: #1b1b36; background-color: #1b1b36;
color: #e5e5e5; color: #e5e5e5;
text-align: center; text-align: center;
padding: 0.5%; padding: 0.5%;
height: 100%; height: 100%;
line-height: 2; line-height: 2;
font-size: 1.1rem; font-size: 1.1rem;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
h1 { h1 {
margin: auto; margin: auto;
line-height: 1.2; line-height: 1.2;
} }
header > h1 { header>h1 {
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
font-size: 5.05rem; font-size: 5.05rem;
}
#lightfavouritebutton {
background: white;
} }
h2 { h2 {
line-height: 1.2; line-height: 1.2;
font-weight: 400; font-weight: 400;
font-size: 3.4rem; font-size: 3.4rem;
text-decoration: underline; text-decoration: underline;
} }
h3 { h3 {
line-height: 1.2; line-height: 1.2;
font-size: 2.25rem; font-size: 2.25rem;
} }
#wrapperdiv { #wrapperdiv {
padding-left: 5%; padding-left: 5%;
padding-right: 5%; padding-right: 5%;
height: 100%; height: 100%;
} }
button { button {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
border: 1px solid #602080; border: 1px solid #602080;
box-sizing: border-box; box-sizing: border-box;
font-weight: 300; font-weight: 300;
color: #e5e5e5; color: #e5e5e5;
text-align: center; text-align: center;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
background-color: #602080; background-color: #602080;
margin-bottom: 3%; margin-bottom: 3%;
padding: 1%; padding: 1%;
width: 20%; width: 20%;
} }
button:hover { button:hover {
color: #000000; color: #000000;
background-color: #e5e5e5; background-color: #e5e5e5;
transform: scale(1.1); transform: scale(1.1);
} }
.buttons { .buttons {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
align-items: flex-start; align-items: flex-start;
} }
.buttons2 { .buttons2 {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
align-items: flex-start; align-items: flex-start;
} }
#redbtn { #redbtn {
background-color: red; background-color: red;
} }
#greenbtn { #greenbtn {
background-color: green; background-color: green;
} }
#bluebtn { #bluebtn {
background-color: blue; background-color: blue;
} }
.navigation { .navigation {
background-color: #b030b0; background-color: #b030b0;
} }
#muteButton { #muteButton {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-evenly; justify-content: space-evenly;
} }
#canvasAndLines { #canvasAndLines {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: space-evenly; justify-content: space-evenly;
} }
p { p {
font-family: Esteban; font-weight: 350;
font-weight: 350;
} }
#lines { #lines {
width: 50%; width: 50%;
} }
#wrapperdiv hr { #wrapperdiv hr {
border: 0; border: 0;
height: 1px; height: 1px;
background-image: linear-gradient(to right, #202040, #b030b0, #202040); background-image: linear-gradient(to right, #202040, #b030b0, #202040);
} }
canvas { canvas {
border: 7px double #b030b0; border: 7px double #b030b0;
background: black; background: black;
width: 400px; width: 400px;
height: 500px; height: 500px;
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
} }
.lds-ring { .lds-ring {
display: inline-block; display: inline-block;
position: center; position: center;
width: 80px; width: 80px;
height: 80px; height: 80px;
} }
.lds-ring div { .lds-ring div {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
position: absolute; position: absolute;
width: 64px; width: 64px;
height: 64px; height: 64px;
margin: 8px; margin: 8px;
border: 8px solid rgb(158, 45, 45); border: 8px solid rgb(158, 45, 45);
border-radius: 50%; border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #b030b0 transparent transparent transparent; border-color: #b030b0 transparent transparent transparent;
} }
.lds-ring div:nth-child(1) { .lds-ring div:nth-child(1) {
animation-delay: -0.45s; animation-delay: -0.45s;
} }
.lds-ring div:nth-child(2) { .lds-ring div:nth-child(2) {
animation-delay: -0.3s; animation-delay: -0.3s;
} }
.lds-ring div:nth-child(3) { .lds-ring div:nth-child(3) {
animation-delay: -0.15s; animation-delay: -0.15s;
} }
@keyframes lds-ring { @keyframes lds-ring {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
/*Example width: ipad 768 width*/
@media only screen and (max-width: 770px) and (min-width: 550px) {
html {
height: 100vh;
width: 100vw;
margin: 0;
}
body {
margin: 0%;
padding: 0%;
width: 100vw;
height: 100vh;
}
button {
transition: 0.5s ease-in-out;
width: 100%;
border-radius: 12px;
}
.buttons {
flex-wrap: wrap;
}
/* /*Example width: ipad 768 width*/
@media only screen and (max-width: 770px) and (min-width: 550px) {
html {
height: 100vh;
width: 100vw;
margin: 0;
}
body {
margin: 0%;
padding: 0%;
width: 100vw;
height: 100vh;
}
button {
transition: 0.5s ease-in-out;
width: 100%;
border-radius: 12px;
}
.buttons {
flex-wrap: wrap;
}
/*
No hover property on tablet and mobile devices. No hover property on tablet and mobile devices.
*/ */
button:hover { button:hover {
transform: unset; transform: unset;
background-color: #602080; background-color: #602080;
color: #e5e5e5; color: #e5e5e5;
} }
header > h1 { header>h1 {
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
font-size: 4rem; font-size: 4rem;
} }
h2 {
h2 { line-height: 1.2;
line-height: 1.2; font-weight: 400;
font-weight: 400; font-size: 2.6rem;
font-size: 2.6rem; text-decoration: underline;
text-decoration: underline; }
} h3 {
line-height: 1.2;
h3 { font-size: 2rem;
line-height: 1.2; }
font-size: 2rem; #canvasAndLines {
} display: flex;
flex-direction: column;
#canvasAndLines { justify-content: center;
display: flex; flex-wrap: wrap;
flex-direction: column; align-items: center;
justify-content: center; }
flex-wrap: wrap; #lines {
align-items: center; margin-top: 5%;
} }
#lines {
margin-top: 5%;
}
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
html { html {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
margin: 0; margin: 0;
} }
body { body {
margin: 0%; margin: 0%;
padding: 0%; padding: 0%;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
button {
button { transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out; width: 100%;
width: 100%; border-radius: 12px;
border-radius: 12px; }
} .buttons {
flex-wrap: wrap;
.buttons { }
flex-wrap: wrap; /*
}
/*
No hover property on tablet and mobile devices. No hover property on tablet and mobile devices.
*/ */
button:hover { button:hover {
transform: unset; transform: unset;
background-color: #602080; background-color: #602080;
color: #e5e5e5; color: #e5e5e5;
} }
#canvasAndLines {
#canvasAndLines { display: flex;
display: flex; flex-direction: row-reverse;
flex-direction: row-reverse; flex-wrap: wrap;
flex-wrap: wrap; }
} #lines {
margin-top: 5%;
#lines { width: unset;
margin-top: 5%; }
width: unset; canvas {
} width: 100%;
height: auto;
canvas { }
width: 100%; header>h1 {
height: auto; text-decoration: none;
} font-weight: 500;
font-size: 3rem;
header > h1 { }
text-decoration: none; h2 {
font-weight: 500; line-height: 1.2;
font-size: 3rem; font-weight: 400;
} font-size: 2rem;
text-decoration: underline;
h2 { }
line-height: 1.2; h3 {
font-weight: 400; line-height: 1.2;
font-size: 2rem; font-size: 1.3rem;
text-decoration: underline; }
} }
\ No newline at end of file
h3 {
line-height: 1.2;
font-size: 1.3rem;
}
}
...@@ -91,6 +91,7 @@ const App: React.FC = () => { ...@@ -91,6 +91,7 @@ const App: React.FC = () => {
return; return;
} }
setSessionStack(stack); setSessionStack(stack);
console.log(stack)
}; };
/** /**
...@@ -110,6 +111,7 @@ const App: React.FC = () => { ...@@ -110,6 +111,7 @@ const App: React.FC = () => {
setInstallation(fetchedPoetryList[0]); setInstallation(fetchedPoetryList[0]);
setLoading(false); setLoading(false);
setUserEdit(false); setUserEdit(false);
changeFont(font);
}; };
/** /**
...@@ -128,7 +130,6 @@ const App: React.FC = () => { ...@@ -128,7 +130,6 @@ const App: React.FC = () => {
if (userEdit || force) { if (userEdit || force) {
animate(index, specification); animate(index, specification);
setColor(specification); setColor(specification);
console.log("Color: " + specification);
updateHistory(theme, specification, font); updateHistory(theme, specification, font);
} }
setUserEdit(false); setUserEdit(false);
...@@ -219,9 +220,9 @@ const App: React.FC = () => { ...@@ -219,9 +220,9 @@ const App: React.FC = () => {
/** /**
* Adds a new template to the sessionStack based on the current state * Adds a new template to the sessionStack based on the current state
* @param newTheme * @param newTheme
* @param newColor * @param newColor
* @param newFont * @param newFont
*/ */
const updateHistory = ( const updateHistory = (
newTheme: Theme, newTheme: Theme,
...@@ -239,12 +240,21 @@ const App: React.FC = () => { ...@@ -239,12 +240,21 @@ const App: React.FC = () => {
/** /**
* Loads the selected template from the template stack * Loads the selected template from the template stack
* @param index * @param index
*/ */
const loadSession = (index: number): void => { const loadSession = (index: number): void => {
const config: SessionConfig = sessionStack[index]; const config: SessionConfig = sessionStack[index];
animate(currentIndex, config.color); animate(currentIndex, config.color);
changeTheme(config.theme, false); changeTheme(config.theme, false);
changeFont(config.font, true);
};
const changeFont = (font: Font, force: boolean = false) => {
setFont(font);
document.getElementById("lines")!.style.fontFamily = font;
if (force) {
updateHistory(theme, color, font);
}
}; };
return ( return (
...@@ -282,29 +292,42 @@ const App: React.FC = () => { ...@@ -282,29 +292,42 @@ const App: React.FC = () => {
{!loading && installation !== undefined && ( {!loading && installation !== undefined && (
<div> <div>