Mind your Mind web application

css/breathing.css

@@ -0,0 +1,168 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+  margin: 0;
+}
+/*
+  3. Allow percentage-based heights in the application
+*/
+html, body {
+  height: 100%;
+}
+/*
+  Typographic tweaks!
+  4. Add accessible line-height
+  5. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+  6. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+  7. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+  font: inherit;
+}
+/*
+  8. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+/*
+  9. Create a root stacking context
+*/
+#root, #__next {
+  isolation: isolate;
+}
+
+/*
+ custom css
+*/
+
+body{
+  background-color: hsl(231.18, 55.56%, 16.86%);
+
+}
+
+.cont{
+  font-size: 28px;
+  font-weight: 800;
+  font-family: "Manrope", sans-serif;
+  padding: 1rem;
+  background-color: hsl(231.18, 55.56%, 16.86%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 4rem;
+} 
+
+
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .circle-progress {
+    width: 200px;
+    height: 200px;
+    background-color: #12f7eb;
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .circle-grow {
+    animation: grow 8s linear;
+  }
+
+  @keyframes grow {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.2); }
+    100% { transform: scale(1); }
+  }
+
+  .breath-input {
+    margin-bottom: 10px;
+  }
+
+  .start {
+    padding: 7px 16px;
+    background-color: #2bdcf3;
+    color: #3c3f3d;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .button-inactive {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+.target{
+    border: 2px solid rgb(233, 233, 235);
+    width: 240px;
+    height: 240px;
+    border-radius: 50%;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 20px;
+
+}
+
+.countdown p{
+font-size: 3rem;
+
+}
+
+p{
+  font-size: 2rem;
+  color: azure;
+}
+
+.cover{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+}
+
+.main, .ins{
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+hr{
+  width: 100%;
+  border: 1px solid rgb(233, 233, 235);
+}
+
+.inst{
+  font-size: 16px;
+}

css/morningpages.css

@@ -0,0 +1,99 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+    box-sizing: border-box;
+  }
+  /*
+    2. Remove default margin
+  */
+  * {
+    margin: 0;
+  }
+  /*
+    3. Allow percentage-based heights in the application
+  */
+  html, body {
+    height: 100%;
+  }
+  /*
+    Typographic tweaks!
+    4. Add accessible line-height
+    5. Improve text rendering
+  */
+  body {
+    line-height: 1.5;
+    background-color: hsl(218deg, 23%, 16%);
+    -webkit-font-smoothing: antialiased;
+  }
+  /*
+    6. Improve media defaults
+  */
+  img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+  }
+  /*
+    7. Remove built-in form typography styles
+  */
+  input, button, textarea, select {
+    font: inherit;
+  }
+  /*
+    8. Avoid text overflows
+  */
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+  /*
+    9. Create a root stacking context
+  */
+  #root, #__next {
+    isolation: isolate;
+  }
+
+  /*
+   custom css
+  */
+
+  #textareaContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+#textarea {
+    width: 80%;
+    height: 80%;
+    resize: none;
+    font-size: 18px;
+    padding: 10px;
+    background-color: beige;
+}
+
+#wordCount {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+}
+
+h1{
+    color: aliceblue;
+}
+
+p{
+    color: rgb(39, 201, 106);
+    text-align: center;
+}
+
+.droplet {
+    background-image: url("img/droplet.png");
+    background-size: cover;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    /* background-color: blue; */
+}

css/quotes.css

@@ -0,0 +1,108 @@
+@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Manrope:wght@800&display=swap");
+*, ::before, ::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body{
+  background-color: hsl(231.18, 55.56%, 16.86%);
+  height: 100vh;
+}
+
+.contain {
+  font-size: 28px;
+  font-weight: 800;
+  font-family: "Manrope", sans-serif;
+  padding: 1rem;
+  background-color: hsl(231.18, 55.56%, 16.86%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#advice {
+  width: 100%;
+  background-color: hsl(217deg, 19%, 24%);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  padding: 2rem;
+  position: relative;
+  line-height: 2.8rem;
+  margin: 10rem;
+}
+#advice #counter {
+  font-size: 12px;
+  color: hsl(150deg, 100%, 66%);
+  text-transform: uppercase;
+}
+#advice #entry {
+  text-align: center;
+  color: hsl(193deg, 38%, 86%);
+  margin-bottom: 2rem;
+}
+#advice picture {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 2rem;
+}
+#advice button {
+  all: unset;
+}
+#advice #dice {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background-color: hsl(150deg, 100%, 66%);
+  position: absolute;
+  bottom: -40px;
+  cursor: pointer;
+}
+@media (min-width: 500px) {
+  #advice {
+    width: 500px;
+  }
+}
+
+.attribution {
+  font-size: 11px;
+  text-align: center;
+  color: hsl(193deg, 38%, 86%);
+}
+
+.attribution a {
+  color: hsl(228deg, 45%, 44%);
+}
+
+header{
+  display: flex;
+  justify-content: space-between;
+  align-self: center;
+  font-size: 20px;
+  color: hsl(150deg, 100%, 66%);
+}
+header ul{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+
+ul{
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  color: hsl(150deg, 100%, 66%);
+  gap: .8rem;
+  font-size: 1.2rem;
+}