From 54890f3a59b477cc338e51a73993480e4a0b33ae Mon Sep 17 00:00:00 2001 From: Lcfvs Date: Fri, 13 Jul 2018 21:08:31 +0200 Subject: [PATCH] Improved card + card readme --- components/header/popdown/popdown.css | 2 +- components/header/popdown/popdown.min.css | 2 +- components/header/popdown/readme.md | 2 +- components/main/card/card.css | 6 ++---- components/main/card/card.min.css | 4 ++-- components/main/card/readme.md | 15 ++++++++++++++- components/menu/expanded/expanded.css | 2 +- components/menu/expanded/expanded.min.css | 2 +- components/menu/expanded/readme.md | 2 +- components/menu/mini/mini.css | 2 +- components/menu/mini/mini.min.css | 2 +- components/menu/mini/readme.md | 2 +- css-ui.css | 2 +- css-ui.min.css | 2 +- package.json | 2 +- readme.md | 2 +- 16 files changed, 31 insertions(+), 20 deletions(-) diff --git a/components/header/popdown/popdown.css b/components/header/popdown/popdown.css index 1799b1d..4e4f147 100644 --- a/components/header/popdown/popdown.css +++ b/components/header/popdown/popdown.css @@ -1,4 +1,4 @@ -/* {"name":"css-ui","version":"2.4.1","author":"Lcf.vs ","license":"MIT"} */ +/* {"name":"css-ui","version":"2.4.2","author":"Lcf.vs ","license":"MIT"} */ body > header > ol { float: right; height: 100%; diff --git a/components/header/popdown/popdown.min.css b/components/header/popdown/popdown.min.css index 8a7691d..490c4b7 100644 --- a/components/header/popdown/popdown.min.css +++ b/components/header/popdown/popdown.min.css @@ -1,2 +1,2 @@ -/* {"name":"css-ui","version":"2.4.1","author":"Lcf.vs ","license":"MIT"} */ +/* {"name":"css-ui","version":"2.4.2","author":"Lcf.vs ","license":"MIT"} */ body>header>ol{float:right;height:100%}body>header>ol>li{display:inline-block;width:3em;height:3em;float:left;counter-reset:items}body>header>ol>li>a{position:absolute;display:block;text-align:center;z-index:1;width:3em;line-height:3em;top:0}body>header>ol>li>a:first-of-type,body>header>ol>li>a:first-of-type:focus~a,body>header>ol>li>a:first-of-type:focus~p{z-index:2}body>header>ol>li>a~p,body>header>ol>li>ol{width:15em;overflow-x:hidden;line-height:3em;top:3em;position:absolute;margin-left:-12em;z-index:-1;-webkit-transform:scaleY(0);-ms-transform:scaleY(0);-o-transform:scaleY(0);transform:scaleY(0);-ms-transform-origin:top;-o-transform-origin:top;-webkit-transform-origin:top;transform-origin:top;transition:-ms-transform .2s .2s;transition:-o-transform .2s .2s;transition:-webkit-transform .2s .2s;transition:transform .2s .2s}body>header>ol>li>ol{text-align:right}body>header>ol>li>a~p,body>header>ol>li>ol>li{text-align:justify}body>header>ol>li>p{overflow-x:hidden;top:0;padding:0 .5em}body>header>ol>li>a:focus+ol:empty+p,body>header>ol>li>a:focus+ol:not(:empty),body>header>ol>li>a:focus+p{max-height:calc(100vh - 3.5em);-ms-transform:scaleY(1);-o-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}body>header>ol>li>ol>li{counter-increment:items}body>header>ol>li>a:not(:focus)+ol:not(:empty)~a:after{content:'+';content:counter(items);color:rgba(255,255,255,.8);background:rgba(255,0,0,1);font-size:.8em;padding:.3em;line-height:.5em;border-radius:.3em;position:absolute;display:inline-block;vertical-align:super;top:.5em;margin-left:-.5em;z-index:2} \ No newline at end of file diff --git a/components/header/popdown/readme.md b/components/header/popdown/readme.md index 8cb31be..a5024c9 100644 --- a/components/header/popdown/readme.md +++ b/components/header/popdown/readme.md @@ -3,7 +3,7 @@ ## CDN ```html - + ``` ## Usage diff --git a/components/main/card/card.css b/components/main/card/card.css index a2edfa9..b90b8f7 100644 --- a/components/main/card/card.css +++ b/components/main/card/card.css @@ -1,4 +1,4 @@ -/* {"name":"css-ui","version":"2.4.1","author":"Lcf.vs ","license":"MIT"} */ +/* {"name":"css-ui","version":"2.4.0","author":"Lcf.vs ","license":"MIT"} */ a > figure:first-child:last-child { display: inline-block; position: relative; @@ -10,9 +10,7 @@ a > figure:first-child:last-child { a > figure:first-child:last-child img { max-width: 100%; min-width: 100%; - max-height: 100%; - min-height: 100%; - display: block; + display: inline-block; } a > figure:first-child:last-child figcaption { diff --git a/components/main/card/card.min.css b/components/main/card/card.min.css index 46da667..a2e79cf 100644 --- a/components/main/card/card.min.css +++ b/components/main/card/card.min.css @@ -1,2 +1,2 @@ -/* {"name":"css-ui","version":"2.4.1","author":"Lcf.vs ","license":"MIT"} */ -a>figure:first-child:last-child,a>figure:first-child:last-child img{min-width:100%;display:inline-block}a>figure:first-child:last-child{position:relative;border:.063em solid rgba(0,0,0,1);text-align:center}a>figure:first-child:last-child figcaption{position:absolute;display:block;width:100%;border-top:.063em solid rgba(0,0,0,1);background:rgba(255,255,255,1);bottom:0} \ No newline at end of file +/* {"name":"css-ui","version":"2.4.2","author":"Lcf.vs ","license":"MIT"} */ +a>figure:first-child:last-child{display:inline-block;position:relative;border:.063em solid rgba(0,0,0,1);min-width:100%;text-align:center}a>figure:first-child:last-child img{max-width:100%;min-width:100%;display:inline-block}a>figure:first-child:last-child figcaption{position:absolute;display:block;width:100%;border-top:.063em solid rgba(0,0,0,1);background:rgba(255,255,255,1);bottom:0} \ No newline at end of file diff --git a/components/main/card/readme.md b/components/main/card/readme.md index 2828289..4b7d6e0 100644 --- a/components/main/card/readme.md +++ b/components/main/card/readme.md @@ -3,7 +3,7 @@ ## CDN ```html - + ``` ## Usage @@ -15,4 +15,17 @@
Image legend
+``` + +## Custom style + +```css +a > figure:first-child:last-child { + height: 20em; + width: 20em; +} + +a > figure:first-child:last-child img { + max-height: 17em; /* based on your max fig caption height */ +} ``` \ No newline at end of file diff --git a/components/menu/expanded/expanded.css b/components/menu/expanded/expanded.css index 1fcf738..5fe5474 100644 --- a/components/menu/expanded/expanded.css +++ b/components/menu/expanded/expanded.css @@ -1,4 +1,4 @@ -/* {"name":"css-ui","version":"2.4.1","author":"Lcf.vs ","license":"MIT"} */ +/* {"name":"css-ui","version":"2.4.2","author":"Lcf.vs ","license":"MIT"} */ @media only screen and (min-width: 50em) { body { width: calc(100vw - 15em); diff --git a/components/menu/expanded/expanded.min.css b/components/menu/expanded/expanded.min.css index 7c544ed..8d28d8a 100644 --- a/components/menu/expanded/expanded.min.css +++ b/components/menu/expanded/expanded.min.css @@ -1,2 +1,2 @@ -/* {"name":"css-ui","version":"2.4.1","author":"Lcf.vs ","license":"MIT"} */ +/* {"name":"css-ui","version":"2.4.2","author":"Lcf.vs ","license":"MIT"} */ @media only screen and (min-width:50em){body{width:calc(100vw - 15em);margin-left:15em}body>header>h1{left:1em}body>nav>[tabindex="1"],body>nav>[tabindex="-1"]{display:none}body>nav>[tabindex="1"]+a+ol,body>nav>[tabindex="1"]+a+ol>li>a{width:15em}} \ No newline at end of file diff --git a/components/menu/expanded/readme.md b/components/menu/expanded/readme.md index cf4efba..d1976f8 100644 --- a/components/menu/expanded/readme.md +++ b/components/menu/expanded/readme.md @@ -3,7 +3,7 @@ ## CDN ```html - + ``` ## Usage diff --git a/components/menu/mini/mini.css b/components/menu/mini/mini.css index a6f4a5c..5323388 100644 --- a/components/menu/mini/mini.css +++ b/components/menu/mini/mini.css @@ -1,4 +1,4 @@ -/* {"name":"css-ui","version":"2.4.1","author":"Lcf.vs ","license":"MIT"} */ +/* {"name":"css-ui","version":"2.4.2","author":"Lcf.vs ","license":"MIT"} */ @media only screen and (min-width: 50em) { body { width: calc(100vw - 3em); diff --git a/components/menu/mini/mini.min.css b/components/menu/mini/mini.min.css index abafbe6..d8161b9 100644 --- a/components/menu/mini/mini.min.css +++ b/components/menu/mini/mini.min.css @@ -1,2 +1,2 @@ -/* {"name":"css-ui","version":"2.4.1","author":"Lcf.vs ","license":"MIT"} */ +/* {"name":"css-ui","version":"2.4.2","author":"Lcf.vs ","license":"MIT"} */ @media only screen and (min-width:50em){body{width:calc(100vw - 3em);margin-left:3em}body>nav>[tabindex="1"]:not(:focus)+a+ol,body>nav>[tabindex="1"]:not(:focus)+a+ol>li>a{width:3em}} \ No newline at end of file diff --git a/components/menu/mini/readme.md b/components/menu/mini/readme.md index 734f43a..02da8b1 100644 --- a/components/menu/mini/readme.md +++ b/components/menu/mini/readme.md @@ -3,7 +3,7 @@ ## CDN ```html - + ``` ## Usage diff --git a/css-ui.css b/css-ui.css index c132117..839947d 100644 --- a/css-ui.css +++ b/css-ui.css @@ -1,4 +1,4 @@ -/* {"name":"css-ui","version":"2.4.1","author":"Lcf.vs ","license":"MIT"} */ +/* {"name":"css-ui","version":"2.4.2","author":"Lcf.vs ","license":"MIT"} */ :after, :before, a, abbr, acronym, address, article, aside, audio, b, big, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, nav, object, ol, output, p, pre, progress, q, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, u, ul, var, video { font: inherit; vertical-align: baseline; diff --git a/css-ui.min.css b/css-ui.min.css index b019f6e..d8fb0bb 100644 --- a/css-ui.min.css +++ b/css-ui.min.css @@ -1,2 +1,2 @@ -/* {"name":"css-ui","version":"2.4.1","author":"Lcf.vs ","license":"MIT"} */ +/* {"name":"css-ui","version":"2.4.2","author":"Lcf.vs ","license":"MIT"} */ :after,:before,a,abbr,acronym,address,article,aside,audio,b,big,blockquote,body,button,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,progress,q,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,u,ul,var,video{font:inherit;vertical-align:baseline;box-sizing:border-box;border:none;outline:0;list-style:none;text-decoration:none;background:0 0;margin:0;padding:0;color:inherit}:active,:focus{outline:0}html{font-size:1em;overflow-x:hidden}body{display:table;width:100%;height:100%}body>header,body>nav{position:fixed;top:0;left:0;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}body>header{width:100%;height:3em;z-index:1}body>header>h1{position:fixed;left:3em;line-height:3em}body>nav{bottom:0;margin-top:3em;z-index:1}body>nav>[tabindex="1"],body>nav>[tabindex="-1"]{position:fixed;top:0;display:block;width:3em;text-align:center;line-height:3em;z-index:1}body>nav>[tabindex="1"]{z-index:2}body>nav>[tabindex="1"]:focus{opacity:0;pointer-events:none}body>nav>[tabindex="1"]+a+ol{height:100%;width:0;-ms-transition:width .2s .2s;-o-transition:width .2s .2s;-webkit-transition:width .2s .2s;transition:width .2s .2s}body>nav>[tabindex="1"]:focus+a+ol,body>nav>[tabindex="1"]:focus+a+ol>li>a{width:15em}body>nav>[tabindex="-1"]+ol>li{height:3em}body>nav>[tabindex="-1"]+ol>li>a{-webkit-transition:width .2s .2s;transition:width .2s .2s;overflow-x:hidden;line-height:3em;display:inline-block;min-width:100%;white-space:nowrap;width:0}body>nav>[tabindex="-1"]+ol>li>a:before{width:3em;display:inline-block;text-align:center}body>nav>[tabindex="-1"]+ol>li>a:focus,body>nav>[tabindex="-1"]+ol>li>a:hover{background:rgba(255,255,255,.3)}body>nav>[tabindex="1"]:focus+a+ol:before{content:'';display:block;width:100%;height:100%;position:fixed;top:3em;left:0;z-index:-1;background-color:rgba(0,0,0,.3)}main{top:3em;position:relative;display:table-cell;vertical-align:middle;text-align:center;padding:1em;height:calc(100vh - 3em)}main>h1{font-weight:700;margin:auto;display:block}main>*{display:inline-block;margin:.5em;padding:.5em;width:95%;text-align:left} \ No newline at end of file diff --git a/package.json b/package.json index 56f5f2c..2dde783 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lcf.vs/css-ui", - "version": "2.4.1", + "version": "2.4.2", "description": "A pure CSS base to make a responsive user interface", "main": "css-ui.min.css", "scripts": { diff --git a/readme.md b/readme.md index ea90291..d39c65e 100644 --- a/readme.md +++ b/readme.md @@ -23,7 +23,7 @@ A pure CSS base to make a responsive user interface. ### Using a CDN ```html - + ``` ```html