diff --git a/bb/brut/site.clj b/bb/brut/site.clj index e6ab18e..57676c4 100644 --- a/bb/brut/site.clj +++ b/bb/brut/site.clj @@ -301,34 +301,42 @@ [:code "err"]" to the class.\n"] [:div {:class "msg fatal"} [:strong - [:i {:class "ico"} "☒"]" Fatal"] + [:i {:class "ico"} "☠"]" Fatal"] " This is done by adding " [:code "fatal"]" to the class.\n"]] [:div {:class "col c6 gapless"} [:h2 "Strong Alerts"] [:br] [:div {:class "msg alert"} - [:strong "Alert Message"]"This is a normal message with " + [:strong "Alert Message"] + " This is a normal message with " [:code "msg"]".\n"] [:div {:class "msg alert info"} [:strong - [:i {:class "ico"} "☞"]" Alert Info"]"This is done by adding " + [:i {:class "ico"} "☞"] " Alert Info"] + " This is done by adding " [:code "info"]" to the class.\n"] [:div {:class "msg alert ok"} [:strong - [:i {:class "ico"} "☑"]" Alert OK"]"This is done by adding " + [:i {:class "ico"} "☑"] + " Alert OK"] + " This is done by adding " [:code "ok"]" to the class.\n"] [:div {:class "msg alert warn"} [:strong - [:i {:class "ico"} "☣"]" Alert Warning"]"This is done by adding " + [:i {:class "ico"} "☣"] + " Alert Warning"] + " This is done by adding " [:code "warn"]" to the class.\n"] [:div {:class "msg alert err"} [:strong - [:i {:class "ico"} "☒"]" Alert Error"]"This is done by adding " + [:i {:class "ico"} "☒"]" Alert Error"] + " This is done by adding " [:code "err"]" to the class.\n"] [:div {:class "msg alert fatal"} [:strong - [:i {:class "ico"} "☒"]" Alert Fatal"]"This is done by adding " + [:i {:class "ico"} "☠"]" Alert Fatal"] + " This is done by adding " [:code "fatal"]" to the class.\n"]]] messages-section {:title "Messages" :cards [messages]} @@ -393,13 +401,17 @@ basic-icons [:div.col.start [:h4 "Android Safe"] [:i {:class "ico block", :style "line-height: 1.5rem"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ¥£ ¢❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"] - [:div {:class "msg push"} "The "Android Safe" icons work everywhere, tested on hundreds of devices.\n"]] + [:div {:class "msg push"} + "The \"Android Safe\" icons work everywhere, tested on hundreds of devices."]] full-icons [:div.col.start [:h4 "Total Set"] [:i {:class "ico block", :style "line-height: 1.5rem"} "✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"] [:div {:class "msg warn push"} - "Although over 75% of Android devices we tested\nsupport all "Total Set" icons, if a substantial\nportion of your users use old Android devices\nyou should stick to the "Android Safe" set.\n(The "Total Set" does not include icons from the "Android Safe" set.)\n"]] + "Although over 75% of Android devices we tested support all \"Total Set\" icons, " + "if a substantial portion of your users use old Android devices you should stick to the " + " \"Android Safe\" set. (The \"Total Set\" does not include icons from the " + "\"Android Safe\" set.)"]] icons-section {:title "icons" :cards [basic-icons full-icons]} grid [:div diff --git a/brut.min.css b/brut.min.css index b43b7ee..6531765 100644 --- a/brut.min.css +++ b/brut.min.css @@ -1 +1 @@ -/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(200, 200, 200, 0.7);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}summary:hover{cursor:pointer}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:3.4rem}.huge{font-size:3rem;line-height:5.2rem}.hl{background:var(--fg);color:var(--bg)}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;line-height:1.5em}.doc p{text-indent:3rem}.tb,.btn{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:text-bottom}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.tb.info{color:var(--fg);background:var(--bg2)}.tb.ok{color:var(--fg);background:var(--nl)}.tb.warn{background:var(--n0);color:var(--bg)}.tb.err{background:var(--n2);color:var(--bg)}.tb.fatal{background:var(--fg);color:var(--bg)}.btn{background:var(--n0);border:solid 2px var(--fg);color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);vertical-align:bottom}.btn.info{color:var(--fg);background:var(--bg2)}.btn.ok{color:var(--fg);background:var(--nl)}.btn.warn{background:var(--n0);color:var(--bg)}.btn.err{background:var(--n2);color:var(--bg)}.btn.fatal{background:var(--fg);color:var(--bg)}.btn:hover{background:var(--n1);color:#fff}.btn.err:hover,.btn.fatal:hover,.btn.err:active,.btn.fatal:active,.btn.err:focus,.btn.fatal:focus{background:var(--fg)}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--bg2);border-left:5px solid var(--darken);padding:1rem}.msg.info{background:var(--bg2)}.msg.ok{background:var(--nl)}.msg.warn{background:var(--n0);color:var(--bg)}.msg.err{background:var(--n2);color:var(--bg)}.msg.fatal{background:var(--fg);color:var(--bg)} \ No newline at end of file +/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(200, 200, 200, 0.7);--cnt:#000;--na:#eee;--nb:#fff}}.info{filter:sepia(100%)hue-rotate(120deg)contrast(120%)saturate(3)}.ok{filter:sepia(100%)hue-rotate(40deg)contrast(120%)saturate(3)}.warn{filter:sepia(100%)hue-rotate(0)contrast(120%)saturate(3)}.err{filter:sepia(100%)hue-rotate(310deg)contrast(120%)saturate(3)}.fatal{filter:sepia(100%)hue-rotate(270deg)contrast(120%)saturate(3)}.alert{filter:invert(100%)}.alert.info{filter:sepia(100%)hue-rotate(0)brightness(80%)contrast(140%)saturate(3)invert(100%)}.alert.ok{filter:sepia(100%)hue-rotate(270deg)brightness(80%)contrast(140%)saturate(3)invert(100%)}.alert.warn{filter:sepia(100%)hue-rotate(180deg)brightness(60%)contrast(180%)saturate(3)invert(100%)}.alert.err{filter:sepia(100%)hue-rotate(140deg)brightness(100%)contrast(150%)saturate(3)invert(100%)}.alert.fatal{filter:sepia(100%)hue-rotate(80deg)brightness(80%)contrast(150%)saturate(3)invert(100%)}.alert img{filter:none}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}summary:hover{cursor:pointer}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:3.4rem}.huge{font-size:3rem;line-height:5.2rem}.hl{background:var(--fg);color:var(--bg)}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;line-height:1.5em}.doc p{text-indent:3rem}.tb,.btn{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:baseline}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.tb.info{color:var(--n2)}.tb.ok{color:var(--n2)}.tb.warn{color:var(--n2)}.tb.err{color:var(--n2)}.tb.fatal{color:var(--n2)}.btn{background:var(--n0);border:solid 2px var(--fg);color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);vertical-align:bottom}.btn.info{background:var(--n2)}.btn.ok{background:var(--n2)}.btn.warn{background:var(--n2)}.btn.err{background:var(--n2)}.btn.fatal{background:var(--n2)}.btn:hover{background:var(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:text-top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--bg2);border-left:5px solid var(--darken);padding:1rem}.msg.info{background:var(--n0)}.msg.ok{background:var(--n0)}.msg.warn{background:var(--n0)}.msg.err{background:var(--n0)}.msg.fatal{background:var(--n0)} \ No newline at end of file diff --git a/build.clj b/build.clj index e36d1cd..c15f149 100755 --- a/build.clj +++ b/build.clj @@ -13,7 +13,6 @@ (def sub-css ["colors" - "extended-colors" "general" "buttons" "grid" @@ -38,9 +37,7 @@ min-css (fs/file dist (str item ".min.css")) _ @(process ["lessc" (format "src/%s.less" item)] {:out css}) minified (-> @(process ["minify" css] {:out :string}) :out)] - (spit min-css minified) - (when-not (= "extended-colors" item) - (spit tmp-css minified :append true)))) + (spit min-css minified))) (fs/move tmp-css brut-css {:replace-existing true :atomic-move true}) diff --git a/build.sh b/build.sh index f6b078e..f437563 100755 --- a/build.sh +++ b/build.sh @@ -3,14 +3,12 @@ DIST="_build" TMPCSS="$DIST/tmp.css" DISTCSS="brut.min.css" -TMPFULLCSS="$DIST/tmp-full.css" -DISTFULLCSS="brut-nocolors.min.css" mkdir $DIST -p [ -f $TMPCSS ] && rm -f $TMPCSS -subtypes=(colors extended-colors general buttons grid components headings icons forms navbar tables messages) +subtypes=(colors general buttons grid components headings icons forms navbar tables messages) YEAR="$(date +"%Y")" echo -n "/* Copyright $YEAR Yann Esposito; MIT licensed */" >> $TMPCSS @@ -18,22 +16,15 @@ for item in "${subtypes[@]}"; do echo "building: $item" lessc "src/$item.less" > "$DIST/$item.css" minify "$DIST/$item.css" -o "$DIST/$item.min.css" - if [ "$item" != "extended-colors" ]; then - cat "$DIST/$item.min.css" >> $TMPFULLCSS - fi cat "$DIST/$item.min.css" >> $TMPCSS done [ -f $DISTCSS.bak ] && rm -f $DISTCSS.bak [ -f $DISTFULLCSS.bak ] && rm -f $DISTFULLCSS.bak [ -f $DISTCSS ] && mv $DISTCSS $DISTCSS.bak -[ -f $DISTFULLCSS ] && mv $DISTFULLCSS $DISTFULLCSS.bak mv $TMPCSS $DISTCSS -mv $TMPFULLCSS $DISTFULLCSS # cleanup rm -f $DISTCSS.bak rm -f $DISTFULLCSS.bak rm -f $TMPCSS -rm -f $TMPFULLCSS echo "Built: $DISTCSS" -echo "Built: $DISTFULLCSS" diff --git a/h/docs.html b/h/docs.html index e22fd9a..bfa94a6 100644 --- a/h/docs.html +++ b/h/docs.html @@ -202,33 +202,26 @@ </div> </div>
+The "Android Safe" icons work everywhere, tested on hundreds of devices.
<div class="col start"> <h4>Android Safe</h4><i class="ico block" style="line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ¥£ ¢❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i> <div class="msg push"> - The &quot;Android Safe&quot; icons work everywhere, - tested on hundreds of devices. + The "Android Safe" icons work everywhere, tested on hundreds + of devices. </div> </div>
+Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)
<div class="col start"> <h4>Total Set</h4><i class="ico block" style="line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩</i> <div class="msg warn push"> Although over 75% of Android devices we tested support all - &quot;Total Set&quot; icons, if a substantial portion - of your users use old Android devices you should stick to the - &quot;Android Safe&quot; set. (The &quot;Total - Set&quot; does not include icons from the - &quot;Android Safe&quot; set.) + "Total Set" icons, if a substantial portion of your users use + old Android devices you should stick to the "Android Safe" + set. (The "Total Set" does not include icons from the + "Android Safe" set.) </div> </div>
<span>
and <input>
tags. Example: ... </span> <input ...
$ ... </span><input ...$
@@ -347,13 +340,13 @@ you should stick to the "Android Safe" set.
ok
to the class.
warn
to the class.
err
to the class.
-fatal
to the class.
-msg
.
-info
to the class.
-ok
to the class.
-warn
to the class.
-err
to the class.
-fatal
to the class.
+fatal
to the class.
+msg
.
+info
to the class.
+ok
to the class.
+warn
to the class.
+err
to the class.
+fatal
to the class.
<div class="row"> <div class="col c6 gapless"> @@ -379,34 +372,34 @@ you should stick to the "Android Safe" set. adding <code>err</code> to the class. </div> <div class="msg fatal"> - <strong><i class="ico">☒</i> Fatal</strong> This is done by + <strong><i class="ico">☠</i> Fatal</strong> This is done by adding <code>fatal</code> to the class. </div> </div> <div class="col c6 gapless"> <h2>Strong Alerts</h2><br></br> <div class="msg alert"> - <strong>Alert Message</strong>This is a normal message with - <code>msg</code>. + <strong>Alert Message</strong> This is a normal message + with <code>msg</code>. </div> <div class="msg alert info"> - <strong><i class="ico">☞</i> Alert Info</strong>This is + <strong><i class="ico">☞</i> Alert Info</strong> This is done by adding <code>info</code> to the class. </div> <div class="msg alert ok"> - <strong><i class="ico">☑</i> Alert OK</strong>This is done + <strong><i class="ico">☑</i> Alert OK</strong> This is done by adding <code>ok</code> to the class. </div> <div class="msg alert warn"> - <strong><i class="ico">☣</i> Alert Warning</strong>This is + <strong><i class="ico">☣</i> Alert Warning</strong> This is done by adding <code>warn</code> to the class. </div> <div class="msg alert err"> - <strong><i class="ico">☒</i> Alert Error</strong>This is + <strong><i class="ico">☒</i> Alert Error</strong> This is done by adding <code>err</code> to the class. </div> <div class="msg alert fatal"> - <strong><i class="ico">☒</i> Alert Fatal</strong>This is + <strong><i class="ico">☠</i> Alert Fatal</strong> This is done by adding <code>fatal</code> to the class. </div> </div> diff --git a/src/buttons.less b/src/buttons.less index be2f73a..dac717d 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -2,7 +2,7 @@ .tb { font-weight: bold; cursor: pointer; padding: 2px; - vertical-align: text-bottom; + vertical-align: baseline; } .tb:before,.tb:after { opacity: 0.3; display: inline-block;} .tb:before { content: "❬"; } @@ -12,11 +12,11 @@ .tb:active:before { content: "❰"; } .tb:active:after { content: "❱"; } .tb { - &.info { color: var(--fg); background: var(--bg2); } - &.ok { color: var(--fg); background: var(--nl); } - &.warn { background: var(--n0); color: var(--bg); } - &.err { background: var(--n2); color: var(--bg); } - &.fatal { background: var(--fg); color: var(--bg); } + &.info { color: var(--n2); } + &.ok { color: var(--n2); } + &.warn { color: var(--n2); } + &.err { color: var(--n2); } + &.fatal { color: var(--n2); } } .btn { @@ -31,26 +31,18 @@ box-shadow: 4px 4px var(--shadow); vertical-align: bottom; } - .btn { - &.info { color: var(--fg); background: var(--bg2); } - &.ok { color: var(--fg); background: var(--nl); } - &.warn { background: var(--n0); color: var(--bg); } - &.err { background: var(--n2); color: var(--bg); } - &.fatal { background: var(--fg); color: var(--bg); } + &.info { background: var(--n2); } + &.ok { background: var(--n2); } + &.warn { background: var(--n2); } + &.err { background: var(--n2); } + &.fatal { background: var(--n2); } } .btn:hover { background: var(--n1); color: #fff; } -.btn { - &.err, &.fatal { - &:hover,&:active,&:focus { - background: var(--fg); - } - } -} .btn:active,.btn:focus { color: #fff; diff --git a/src/colors.less b/src/colors.less index 4e8878b..9d06b87 100644 --- a/src/colors.less +++ b/src/colors.less @@ -1,6 +1,7 @@ @neutral: #999; @dark-neutral: darken(@neutral,10%); + :root { --bg: #fff; --fg: #000; @@ -41,7 +42,23 @@ } } +.info { filter: sepia(100%) hue-rotate(120deg) contrast(120%) saturate(3); } +.ok { filter: sepia(100%) hue-rotate(40deg) contrast(120%) saturate(3); } +.warn { filter: sepia(100%) hue-rotate(0deg) contrast(120%) saturate(3); } +.err { filter: sepia(100%) hue-rotate(310deg) contrast(120%) saturate(3); } +.fatal { filter: sepia(100%) hue-rotate(270deg) contrast(120%) saturate(3); } + +.alert { filter: invert(100%); } +.alert.info { filter: sepia(100%) hue-rotate(0deg) brightness(80%) contrast(140%) saturate(3) invert(100%); } +.alert.ok { filter: sepia(100%) hue-rotate(270deg) brightness(80%) contrast(140%) saturate(3) invert(100%); } +.alert.warn { filter: sepia(100%) hue-rotate(180deg) brightness(60%) contrast(180%) saturate(3) invert(100%); } +.alert.err { filter: sepia(100%) hue-rotate(140deg) brightness(100%) contrast(150%) saturate(3) invert(100%); } +.alert.fatal { filter: sepia(100%) hue-rotate(80deg) brightness(80%) contrast(150%) saturate(3) invert(100%); } + +.alert img { filter: none; } + .neutral { color: var(--n0); } .bg-neutral { background: var(--nl); } a { color: var(--fg); } + diff --git a/src/extended-colors.less b/src/extended-colors.less deleted file mode 100644 index e8b8882..0000000 --- a/src/extended-colors.less +++ /dev/null @@ -1,221 +0,0 @@ -@info: #59d; -@ok: #494; -@warn: #c90; -@err: #d33; -@fatal: #a3d; - -@dark-info: darken(@info,10%) ; -@dark-ok: darken(@ok,10%); -@dark-warn: darken(@warn,10%); -@dark-err: darken(@err,10%); -@dark-fatal: darken(@fatal,10%); - -:root { - --il: saturate(lighten(@info,25%),20%); - --i0: @info; - --i1: darken(@info,5%); - --i2: darken(@info,10%); - - --ol: saturate(lighten(@ok,25%),20%); - --o0: @ok; - --o1: darken(@ok,5%); - --o2: darken(@ok,10%); - - --wl: saturate(lighten(@warn,25%),20%); - --w0: @warn; - --w1: darken(@warn,5%); - --w2: darken(@warn,10%); - - --el: saturate(lighten(@err,25%),20%); - --e0: @err; - --e1: darken(@err,5%); - --e2: darken(@err,10%); - - --fl: saturate(lighten(@fatal,25%),20%); - --f0: @fatal; - --f1: darken(@fatal,5%); - --f2: darken(@fatal,10%); - /* alert messages */ - --ia: saturate(darken(@info,10%),25%); - --ib: saturate(darken(@info,0%),35%); - --oa: saturate(darken(@ok,10%),25%); - --ob: saturate(darken(@ok,0%),35%); - --wa: saturate(darken(@warn,10%),25%); - --wb: saturate(darken(@warn,0%),35%); - --ea: saturate(darken(@err,10%),25%); - --eb: saturate(darken(@err,0%),35%); - --fa: saturate(darken(@fatal,10%),25%); - --fb: saturate(darken(@fatal,0%),35%); -} - -@media (prefers-color-scheme: dark) { - :root { - --il: darken(@dark-info,10%); - --i0: @dark-info; - --i1: lighten(@dark-info,5%); - --i2: saturate(lighten(@dark-info,10%),10%); - - --ol: darken(@dark-ok,10%); - --o0: @dark-ok; - --o1: lighten(@dark-ok,5%); - --o2: saturate(lighten(@dark-ok,10%),10%); - - --wl: darken(@dark-warn,10%); - --w0: @dark-warn; - --w1: lighten(@dark-warn,5%); - --w2: saturate(lighten(@dark-warn,10%),10%); - - --el: darken(@dark-err,10%); - --e0: @dark-err; - --e1: lighten(@dark-err,5%); - --e2: saturate(lighten(@dark-err,10%),10%); - - --fl: darken(@dark-fatal,10%); - --f0: @dark-fatal; - --f1: lighten(@dark-fatal,5%); - --f2: saturate(lighten(@dark-fatal,10%),10%); - } -} - -.info { color: var(--i0); } -.bg-info { background: var(--il); } -.ok { color: var(--o0); } -.bg-ok { background: var(--ol); } -.warn { color: var(--w0); } -.bg-warn { background: var(--wl); } -.err { color: var(--e0); } -.bg-err { background: var(--el); } -.fatal { color: var(--f0); } -.bg-fatal { background: var(--fl); } - -/* Messages */ -.msg.info { - color: var(--fg); - background: var(--il); - border-color: var(--i0); -} -.msg.ok { - color: var(--fg); - background: var(--ol); - border-color: var(--o0); -} -.msg.warn { - color: var(--fg); - background: var(--wl); - border-color: var(--w0); -} -.msg.err { - color: var(--fg); - background: var(--el); - border-color: var(--e0); -} -.msg.fatal { - color: var(--fg); - background: var(--fl); - border-color: var(--f0); -} - -.msg.alert, .msg.alert * { - color: var(--cnt); - background: var(--na); - border-color: var(--nb); -} -.msg.alert.info, .msg.alert.info * { - color: #fff; - background: var(--ia); - border-color: var(--ib); -} -.msg.alert.ok, .msg.alert.ok * { - color: #fff; - background: var(--oa); - border-color: var(--ob); -} -.msg.alert.warn, .msg.alert.warn * { - color: #fff; - background: var(--wa); - border-color: var(--wb); -} -.msg.alert.err, .msg.alert.err * { - color: #fff; - background: var(--ea); - border-color: var(--eb); -} -.msg.alert.fatal, .msg.alert.fatal * { - color: #fff; - background: var(--fa); - border-color: var(--fb); -} - -/* Buttons */ - -.tb.info { color: var(--i0); - &:hover { color: var(--i1); } - &:active { color: var(--i2); } - } -.tb.ok { color: var(--o0); - &:hover { color: var(--o1); } - &:active { color: var(--o2); } - } -.tb.warn { color: var(--w0); - &:hover { color: var(--w1); } - &:active { color: var(--w2); } - } -.tb.err { color: var(--e0); - &:hover { color: var(--e1); } - &:active { color: var(--e2); } - } -.tb.fatal { color: var(--f0); - &:hover { color: var(--f1); } - &:active { color: var(--f2); } - } - - -.btn.info { - background: var(--i0); - &:hover { - background: var(--i1); - } - - &:active, &:focus { - background: var(--i2); - } -} - -.btn.ok { - background: var(--o0); - &:hover { - background: var(--o1); - } - &:active, &:focus { - background: var(--o2); - } -} - -.btn.warn { - background: var(--w0); - &:hover { - background: var(--w1); - } - &:active, &:focus { - background: var(--w2); - } -} - -.btn.err { - background: var(--e0); - &:hover { - background: var(--e1); - } - &:active, &:focus { - background: var(--e2); - } -} -.btn.fatal { - background: var(--f0); - &:hover { - background: var(--f1); - } - &:active, &:focus { - background: var(--f2); - } -} diff --git a/src/general.less b/src/general.less index 1d3dba2..b4fbf67 100644 --- a/src/general.less +++ b/src/general.less @@ -61,3 +61,4 @@ table { font-size: 1rem; } text-indent: 3rem; } } + diff --git a/src/icons.less b/src/icons.less index b598137..044b10b 100644 --- a/src/icons.less +++ b/src/icons.less @@ -1,5 +1,5 @@ .ico { font: 20px Arial Unicode MS, Lucida Sans Unicode; line-height: 10px; - vertical-align: top; + vertical-align: text-top; } diff --git a/src/messages.less b/src/messages.less index faf6328..f5d6b36 100644 --- a/src/messages.less +++ b/src/messages.less @@ -2,9 +2,9 @@ background: var(--bg2); border-left: 5px solid var(--darken); padding: 1rem; - &.info { background: var(--bg2); } - &.ok { background: var(--nl); } - &.warn { background: var(--n0); color: var(--bg); } - &.err { background: var(--n2); color: var(--bg); } - &.fatal { background: var(--fg); color: var(--bg); } + &.info { background: var(--n0); } + &.ok { background: var(--n0); } + &.warn { background: var(--n0); } + &.err { background: var(--n0); } + &.fatal { background: var(--n0); } }