Skip to content

Commit

Permalink
visual upd
Browse files Browse the repository at this point in the history
  • Loading branch information
@MiSTeR1995
MiSTeR1995 committed Sep 20, 2023
1 parent e4f7927 commit 77492ec
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 40 deletions.
42 changes: 16 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,23 +132,13 @@ <h1 class="title is-1 publication-title">
<div class="container is-max-desktop">
<div class="columns is-centered has-text-centered">
<div class="column is-four-fifths">
<h2 class="title is-3">TODO List</h2>
<h2 class="title is-5">TODO List</h2>
<div class="content has-text-justified">
<svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
<defs>
<linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
<stop offset="0%" stop-color="#209CEE"/>
<stop offset="100%" stop-color="#0FC0F5"/>
</linearGradient>

<linearGradient id="lineGradient">
<stop offset="0%" stop-color="#0FC0F5"/>
<stop offset="100%" stop-color="#209CEE"/>
</linearGradient>

<path id="todo__line" stroke="url(#lineGradient)" d="M21 12.3h168v0.1z"></path>
<path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
<path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
<path id="todo__line" stroke="#363636" d="M21 12.3h280v0.1z" ></path>
<path id="todo__box" stroke="#363636" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
<path id="todo__check" stroke="#2b8f30" d="M10 13l2 2 5-5"></path>
<circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle>
</defs>
</svg>
Expand All @@ -157,11 +147,11 @@ <h2 class="title is-3">TODO List</h2>
<label class="todo">
<input class="todo__state" type="checkbox" />

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
<use xlink:href="#todo__line" class="todo__line"></use>
<use xlink:href="#todo__box" class="todo__box"></use>
<use xlink:href="#todo__check" class="todo__check"></use>
<use xlink:href="#todo__circle" class="todo__circle"></use>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 25" class="todo__icon">
<use xlink:href="#todo__line" class="todo__line"></use>
<use xlink:href="#todo__box" class="todo__box"></use>
<use xlink:href="#todo__check" class="todo__check"></use>
<use xlink:href="#todo__circle" class="todo__circle"></use>
</svg>

<div class="todo__text">Data collection</div>
Expand All @@ -171,7 +161,7 @@ <h2 class="title is-3">TODO List</h2>

<input class="todo__state" type="checkbox" />

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 25" class="todo__icon">
<use xlink:href="#todo__line" class="todo__line"></use>
<use xlink:href="#todo__box" class="todo__box"></use>
<use xlink:href="#todo__check" class="todo__check"></use>
Expand All @@ -185,7 +175,7 @@ <h2 class="title is-3">TODO List</h2>
<label class="todo">
<input class="todo__state" type="checkbox" />

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 25" class="todo__icon">
<use xlink:href="#todo__line" class="todo__line"></use>
<use xlink:href="#todo__box" class="todo__box"></use>
<use xlink:href="#todo__check" class="todo__check"></use>
Expand All @@ -198,7 +188,7 @@ <h2 class="title is-3">TODO List</h2>
<label class="todo">
<input class="todo__state" type="checkbox" />

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 25" class="todo__icon">
<use xlink:href="#todo__line" class="todo__line"></use>
<use xlink:href="#todo__box" class="todo__box"></use>
<use xlink:href="#todo__check" class="todo__check"></use>
Expand All @@ -211,27 +201,27 @@ <h2 class="title is-3">TODO List</h2>
<label class="todo">
<input class="todo__state" type="checkbox" />

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 25" class="todo__icon">
<use xlink:href="#todo__line" class="todo__line"></use>
<use xlink:href="#todo__box" class="todo__box"></use>
<use xlink:href="#todo__check" class="todo__check"></use>
<use xlink:href="#todo__circle" class="todo__circle"></use>
</svg>

<div class="todo__text">arXiv paper submission</div>
<div class="todo__text">arXiv paper submission (after accepting)</div>
</label>

<label class="todo">
<input class="todo__state" type="checkbox" />

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 25" class="todo__icon">
<use xlink:href="#todo__line" class="todo__line"></use>
<use xlink:href="#todo__box" class="todo__box"></use>
<use xlink:href="#todo__check" class="todo__check"></use>
<use xlink:href="#todo__circle" class="todo__circle"></use>
</svg>

<div class="todo__text">Open code access</div>
<div class="todo__text">Release code and models (after accepting) </div>
</label>

</div>
Expand Down
30 changes: 16 additions & 14 deletions static/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@ body {
--tw-bg-opacity: 1;
background-color: rgba(23,23,23,var(--tw-bg-opacity));
}

.hero-body {
padding-bottom: 0;
}
section {
background-color: #fafafa;
}

.TODO-section {
padding: 50px 24px;
padding: 10px 24px;
margin-bottom: 20px;
}

.abstract-sect {
Expand Down Expand Up @@ -467,21 +470,22 @@ section {


:root {
--duration: 0.8s;
--duration: 0.65s;
}

.todo-list {
background: #FFF;
max-width: 25em;
font-size: 12px;
margin: auto;
padding: 0.5em 1em;
padding: 0.3em 0.2em;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.todo {
display: block;
position: relative;
padding: 1em 1em 1em 16%;
padding: 0.3em 0.3em 0.3em 13%;
margin: 0 auto;
cursor: pointer;
border-bottom: solid 1px #ddd;
Expand All @@ -499,7 +503,7 @@ section {
}

.todo__text {
color: saturate(#1B4A4E, 25%);
color: saturate(#1B4A4E, 15%);
transition: all var(--duration) linear var(--duration);
}

Expand All @@ -512,8 +516,8 @@ section {
height: auto;
margin: auto;
fill: none;
stroke: #27FDC7;
stroke-width: 2;
stroke: #363636;
stroke-width: 1;
stroke-linejoin: round;
stroke-linecap: round;
}
Expand Down Expand Up @@ -553,15 +557,14 @@ section {
}

.todo__check {
stroke: #209CEE;
stroke-dasharray: 9.8995 9.8995;
stroke-dashoffset: 9.8995;
transition-duration: calc(var(--duration) * 0.4);
}

.todo__line {
stroke-dasharray: 168 1684;
stroke-dashoffset: 168;
stroke-dasharray: 260 1684;
stroke-dashoffset: 260;
}

.todo__circle {
Expand All @@ -571,8 +574,7 @@ section {

.todo__state:checked ~ .todo__text {
transition-delay: 0s;
color: #5EBEC1;
opacity: 0.6;
opacity: 0.8;
}

.todo__state:checked ~ .todo__icon .todo__box {
Expand All @@ -581,7 +583,7 @@ section {
}

.todo__state:checked ~ .todo__icon .todo__line {
stroke-dashoffset: -8;
stroke-dashoffset: -5;
}

.todo__state:checked ~ .todo__icon .todo__check {
Expand Down

0 comments on commit 77492ec

Please sign in to comment.