diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css index b240345..3f99993 100644 --- a/assets/css/stylesheet.css +++ b/assets/css/stylesheet.css @@ -5,7 +5,7 @@ body { } .header { - padding-top: 80px; + padding-top: 70px; padding-left: 60px; text-align: left; } @@ -27,6 +27,8 @@ body { box-sizing: border-box; } +/* ----- column left ------ */ + .column-left { width: 50%; margin-top: 40px; @@ -41,7 +43,7 @@ body { .command-bar { height: 40px; - width: 80%; + width: 70%; font-size: 16px; padding-left: 20px; border-radius: 30px; @@ -65,7 +67,6 @@ body { outline: none; } - .command-button { display: flex; width: 20%; @@ -115,7 +116,10 @@ body { text-align: right; } +/* ----- column right ------ */ + .flip-card { + display: flex; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; @@ -123,34 +127,42 @@ body { align-items: center; text-align: center; margin-left: 30px; - margin-top: -90px; + margin-top: 40px; + height: 50vh; } .flip-card.visible { + display: flex; opacity: 1; visibility: visible; } +.flip-card-inner { + display: flex; + width: 100%; + height: 160%; + text-align: center; + border-radius: 30px; + border: 1.7px solid black; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); +} + .tendrils { + display: flex; padding-top: 15px; + padding-left: 10px; + padding-right: 10px; width: 100%; } -.info_layer { - padding-top: 15px; - padding-bottom: 20px; +.tendril-top { + align-items: flex-start; } -.flip-card-inner { - position: relative; - width: 100%; - height: 160%; - text-align: center; - border-radius: 30px; - border: 1.7px solid black; - transition: transform 0.6s; - transform-style: preserve-3d; - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); +.tendril-bottom { + align-items: flex-end; } .flip-card:hover .flip-card-inner { @@ -165,16 +177,15 @@ body { backface-visibility: hidden; } -.flip-card-front { - - background-color: #d4d1d0; - border-radius: 30px; - color: black; +.flip-card-back { + display: flex; + align-items: center; + background-color: #d4d1d0; + color: black; + border-radius: 30px; + transform: rotateY(180deg); } -.flip-card-back { - background-color: #d4d1d0; - color: black; - border-radius: 30px; - transform: rotateY(180deg); +.info_layer { + padding: 25px; } \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 1df5532..41a2ca3 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -22,7 +22,7 @@ var responses = { "parent": { screen: "Definition: When a process creates a new process it is called a parent. For example, if you were to start a process and then this would divide into two (like a fork), the initial process would be the parent and the subsequent the child.", paper: "Formulate an idea and let it spread. Congratulations, you are a parent now.", - concept: "They say it takes a village to raise a child, the same goes for an idea. The village can be a community of practice. Your knowledge comes directly from within your own community of practice, that group of people and objects that while engaging in ongoing interactions and rituals influenced you, and I am not talking just about your family, friends, colleagues, yoga classmates, but about computers, boundary objects as well. You need a community of practice to raise an idea that can be freed from any type of hierarchical influence, collateral pain and marginalization.", + info_layer: "They say it takes a village to raise a child, the same goes for an idea. The village can be a community of practice. Your knowledge comes directly from within your own community of practice, that group of people and objects that while engaging in ongoing interactions and rituals influenced you, and I am not talking just about your family, friends, colleagues, yoga classmates, but about computers, boundary objects as well. You need a community of practice to raise an idea that can be freed from any type of hierarchical influence, collateral pain and marginalization.", }, "interrupt": { screen: "Definition: An event that changes the order in which instructions for a process are executed, altering the flow of a program.", diff --git a/index.html b/index.html index aa43e5a..b499a97 100644 --- a/index.html +++ b/index.html @@ -37,12 +37,12 @@ -