Is there a way to turn my flex 50/50 Split View CSS to 70/30?-CodePudding

html {
    transition: all 0.5s ease-out;
  }
  
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  .split-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-color: #111;
  }
  
  .box {
    position: relative;
    flex-basis: 50%;
    height: 100%;
    transition: 0.6s all cubic-bezier(0.2, 0.6, 0.7, 1);
    background-position: center;
  }
  
  .box:hover {
    flex-basis: calc(100% / 13 * 9);
  }
  
  .box__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s all ease-out;
    transition: 0.8s all cubic-bezier(1, 0, 0, 1);
  }
  
  .box-1 {
    background-size: cover;
    font-family: 'Kanit', sans-serif;
  }
  
  .box-1 .box__overlay {
    background-color: rgba(96, 155, 116, 0.2);
  }
  
  .box-1:hover .box__overlay {
    background-color: rgba(96, 155, 116, 0.1);
  }
  
  .box-1 .box__title {
    position: absolute;
    bottom: 0;
    text-align: left;
    margin: 0.5em 0.8em;
    color: white;
    font-size: calc(30px   20 * ((100vw - 320px) / 680));
    word-spacing: 100vw;
  }
  
  .box-2 {
    background-size: cover;
    font-family: 'Kanit', sans-serif;
  }
  
  .box-2 .box__overlay {
    background-color: rgba(96, 155, 116, 0.8);
  }
  
  .box-2:hover .box__overlay {
    background-color: rgba(0, 157, 157, 0.5);
  }
  
  .box-2 .box__title {
    position: absolute;
    bottom: 0;
    text-align: right;
    margin: 0.5em 0.8em;
    color: #fff;
    font-size: calc(30px   15 * ((100vw - 320px) / 680));
    word-spacing: 100vw;
  }

<!DOCTYPE html>
<html>

<head>
  <title>Oco, online coworking</title>
  <meta charset="UTF-8">
  <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=Kanit:wght@200&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}" type="text/css">
</head>

<body>

<section >
  <div >
    <a href="{{ url_for('study_hub')}}" >
      <h1 >Study Hub</h1>
    </a>
  </div>

  <div >
    <div >
      <h1 >About</h1>
    </div>
  </div>
</section>

</body>

</html>

complete beginner, stuck at this, 'elp

I'm trying to access the individual boxes' css so I can change the ratio to a 70/30 screen layout, rather than the current 50/50, but no matter what I change it either completely scuffs my transitions, or the whole thing breaks.
Any of my trial and error details will likely not be of any help either, sooo sorry to just hand this to you. <3

CodePudding user response：

Is this what you are looking for? Just give the boxes individual flex-basis values. Right now they both share the same value of 50%. Even if you change that to something like 70%, they both share the same value and they both can't take 70% so it effectively remains at 50%.

html {
    transition: all 0.5s ease-out;
  }
  
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  .split-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-color: #111;
  }
  
  .box {
    position: relative;
    height: 100%;
    transition: 0.6s all cubic-bezier(0.2, 0.6, 0.7, 1);
    background-position: center;
  }
  
  .box:hover {
    flex-basis: calc(100% / 13 * 9);
  }
  
  .box__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s all ease-out;
    transition: 0.8s all cubic-bezier(1, 0, 0, 1);
  }
  
  .box-1 {
    flex-basis: 30%;
    background-size: cover;
    font-family: 'Kanit', sans-serif;
  }
  
  .box-1 .box__overlay {
    background-color: rgba(96, 155, 116, 0.2);
  }
  
  .box-1:hover .box__overlay {
    background-color: rgba(96, 155, 116, 0.1);
  }
  
  .box-1 .box__title {
    position: absolute;
    bottom: 0;
    text-align: left;
    margin: 0.5em 0.8em;
    color: white;
    font-size: calc(30px   20 * ((100vw - 320px) / 680));
    word-spacing: 100vw;
  }
  
  .box-2 {
    flex-basis: 70%;
    background-size: cover;
    font-family: 'Kanit', sans-serif;
  }
  
  .box-2 .box__overlay {
    background-color: rgba(96, 155, 116, 0.8);
  }
  
  .box-2:hover .box__overlay {
    background-color: rgba(0, 157, 157, 0.5);
  }
  
  .box-2 .box__title {
    position: absolute;
    bottom: 0;
    text-align: right;
    margin: 0.5em 0.8em;
    color: #fff;
    font-size: calc(30px   15 * ((100vw - 320px) / 680));
    word-spacing: 100vw;
  }

<!DOCTYPE html>
<html>

<head>
  <title>Oco, online coworking</title>
  <meta charset="UTF-8">
  <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=Kanit:wght@200&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}" type="text/css">
</head>

<body>

<section >
  <div >
    <a href="{{ url_for('study_hub')}}" >
      <h1 >Study Hub</h1>
    </a>
  </div>

  <div >
    <div >
      <h1 >About</h1>
    </div>
  </div>
</section>

</body>

</html>