Notes app :)
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

style changes

+28 -20
+22 -12
static/css/basic.css
··· 66 66 67 67 article { 68 68 border: 2px solid light-dark(#eee, #333); 69 - border-top: none; 70 - border-bottom: none; 71 - box-shadow: 3px 5px 5px light-dark(lightgray, rgb(59, 59, 59)); 69 + box-shadow: 3px 5px 5px light-dark(lightgray, hsl(250 15% 0% / 1)); 72 70 box-sizing: border-box; 73 71 } 74 72 ··· 111 109 .card-head { 112 110 --rule-start: 2rem; 113 111 --text-start: .3rem; 114 - background-color: light-dark(#fff, #000); 115 - background-image: linear-gradient(90deg, transparent var(--rule-start), light-dark(#abced4, #c86363) var(--rule-start), light-dark(#abced4, #c86363) calc(var(--rule-start) + 2px), transparent calc(var(--rule-start) + 2px)), linear-gradient(light-dark(#eee, #333) .1em, transparent .1em); 116 - background-size: 100% 2.6rem; 112 + --line-height: calc(2.6rem + 2px); 113 + 117 114 height: 3.9rem; 118 115 padding-top: 1.3rem; 116 + background-position: 0px -2px; 117 + 118 + } 119 + 120 + .ruled { 121 + --rule-color: light-dark(#abced4, #c86363); 122 + 123 + /* https://projects.verou.me/css3patterns/#lined-paper */ 124 + background-color: light-dark(white, black); 125 + background-image: 126 + linear-gradient(90deg, 127 + transparent var(--rule-start), 128 + var(--rule-color) var(--rule-start), 129 + var(--rule-color) calc(var(--rule-start) + 2px), 130 + transparent calc(var(--rule-start) + 2px)), 131 + linear-gradient(light-dark(#eee, #333) 2px, transparent 2px); 132 + background-size: 100% var(--line-height); 119 133 } 120 134 121 135 .card-head .headercontainer { ··· 161 175 .card { 162 176 --rule-start: 2rem; 163 177 --text-start: .3rem; 164 - background-color: light-dark(#fff, #000); 165 - background-image: linear-gradient(90deg, transparent var(--rule-start), light-dark(#abced4, #c86363) var(--rule-start), light-dark(#abced4, #c86363) calc(var(--rule-start) + 2px), transparent calc(var(--rule-start) + 2px)), linear-gradient(light-dark(#eee, #333) .1em, transparent .1em); 166 - background-size: 100% 21px; 178 + --line-height: 21px; 167 179 height: 42px; 168 180 position: relative; 169 181 } ··· 209 221 .card-body { 210 222 --rule-start: 2rem; 211 223 --text-start: .3rem; 212 - background-color: light-dark(#fff, #000); 213 - background-image: linear-gradient(90deg, transparent var(--rule-start), light-dark(#abced4, #c86363) var(--rule-start), light-dark(#abced4, #c86363) calc(var(--rule-start) + 2px), transparent calc(var(--rule-start) + 2px)), linear-gradient(light-dark(#eee, #333) .1em, transparent .1em); 224 + --line-height: 100%; 214 225 background-repeat: no-repeat; 215 - background-size: 100% 100%; 216 226 padding-top: 4px; 217 227 padding-bottom: 17px; 218 228 }
+2 -3
templates/components/task-item.html
··· 19 19 .list-item[checked] ::slotted(span), 20 20 task-item[checked] ::slotted(span) { 21 21 text-decoration: line-through; 22 + color: light-dark(gray, lightgray); 22 23 } 23 24 24 25 .list-item[day="tomorrow"] .today, ··· 41 42 var(--rule-color) var(--rule-start), 42 43 var(--rule-color) calc(var(--rule-start) + 2px), 43 44 transparent calc(var(--rule-start) + 2px)), 44 - linear-gradient(light-dark(#eee, #333) 0.1em, transparent 0.1em); 45 + linear-gradient(light-dark(#eee, #333) 2px, transparent 2px); 45 46 background-size: 100% var(--line-height); 46 47 background-position: 0px 17px; 47 48 ··· 51 52 font-family: var(--font); 52 53 position: relative; 53 54 display: block; 54 - 55 - 56 55 57 56 &:after { 58 57 content: '◦';
+4 -4
templates/list.html
··· 13 13 </style> 14 14 <article day="today" id="main"> 15 15 16 - <div class="card-head"> 16 + <div class="card-head ruled"> 17 17 <div role="tablist" class="headercontainer"> 18 18 <button active role="tab" class="header-today">Today</button> 19 19 <button role="tab" class="header-tomorrow"> ··· 22 22 </div> 23 23 </div> 24 24 25 - <div class="card"> 25 + <div class="card ruled"> 26 26 <form class="addtodo"> 27 27 <input id="input-when" name="when" type="hidden" value="today" /> 28 28 <label for="addtodoinput">I will...</label> ··· 34 34 35 35 </div> 36 36 37 - <div class="card-body today"> 37 + <div class="card-body today ruled"> 38 38 <ul> 39 39 {% for task in today %} 40 40 {% set message = task.text %} ··· 49 49 </div> 50 50 51 51 52 - <div class="card-body tomorrow"> 52 + <div class="card-body tomorrow ruled"> 53 53 <ul> 54 54 {% for task in tomorrow %} 55 55 {% set message = task.text %}
-1
templates/wrap.html
··· 12 12 <link rel="manifest" href="/static/meta/manifest.webmanifest"> <!-- PWA metadata --> 13 13 14 14 <!-- local styles --> 15 - <link rel="stylesheet" href="/static/css/out.css" /> 16 15 <link rel="stylesheet" href="/static/css/basic.css" /> 17 16 18 17 <!-- Preloads -->