Site: Pomodoro Plan Styling
04/25/15
Currently, I'm styling my pomodoro plans in the html, which means a lot of repeated html styling, which would make changing it later a pain. Better to make it so those planned pomodoros are styled in css and then I can give the html spans meaningful class names.
.pomodoros span {
display: inline-block;
height: 20px;
width: 12px;
}
.pomodoros span.normal {
border: 1px solid black;
}
.pomodoros span.ideal {
border: 1px solid turquoise;
}
.pomodoros span.second {
border: 1px solid red;
}
.pomodoros span.third {
border: 1px solid orange;
}
.pomodoros span.bus {
border-style: dotted;
}
And then I can use my findReplace script to make all the individual html styles into the proper class setting.
$ findReplace 'style="border:1px solid black;"' 'class="normal"' public/
$ findReplace 'style="border:1px solid turquoise;"' 'class="ideal"' public/
$ findReplace 'style="border:1px solid red;"' 'class="second"' public/
$ findReplace 'style="border:1px solid orange;"' 'class="third"' public/
$ findReplace 'style="border:1px dotted black;"' 'class="normal bus"' public/
And it works like a charm!