diff options
Diffstat (limited to 'xslt/common/css')
-rw-r--r-- | xslt/common/css/core.css.tmpl | 21 | ||||
-rw-r--r-- | xslt/common/css/mallard.css.tmpl | 34 |
2 files changed, 55 insertions, 0 deletions
diff --git a/xslt/common/css/core.css.tmpl b/xslt/common/css/core.css.tmpl index bd19c49c..1ed0ff12 100644 --- a/xslt/common/css/core.css.tmpl +++ b/xslt/common/css/core.css.tmpl @@ -226,6 +226,27 @@ dl.compact dt { margin-top: 0.2em; } dl.compact dt:first-child { margin-top: 0; } dl.compact dt + dt { margin-top: 0; } +div.tiles { + display: flex; + flex-flow: row wrap; + align-items: stretch; + justify-content: stretch; + vertical-align: top; + clear: both; + margin: 0 -10px; +} +div.tiles > * { + vertical-align: top; + margin: 0; + padding: 10px; + max-width: none; +} +div.tiles > *:empty { padding: 0 10px; height: 0; } +div.tile4 { flex: 1 0 {{$html.grid.size div 4 - 20}}px; } +div.tile3 { flex: 1 0 {{$html.grid.size div 3 - 20}}px; } +div.tile2 { flex: 1 0 {{$html.grid.size div 2 - 20}}px; } +div.tile1 { flex: 1 0 {{$html.grid.size - 20}}px; } + a { text-decoration: none; color: {{$color.fg.blue}}; diff --git a/xslt/common/css/mallard.css.tmpl b/xslt/common/css/mallard.css.tmpl index 0c533b1d..56c3f786 100644 --- a/xslt/common/css/mallard.css.tmpl +++ b/xslt/common/css/mallard.css.tmpl @@ -166,6 +166,7 @@ a.ui-overlay-close { background-color: {{$color.blue}}; color: {{$color.bg}}; } +<!-- FIXME drop this in favor of tiles CSS in core.css --> div.links-tiles { display: flex; flex-flow: row wrap; @@ -214,6 +215,39 @@ div.links-tile > a > span.links-tile-text > span.desc { color: {{$color.fg.dark}}; } +<!-- links/@style = 'experimental-gnome-tiles' --> +a.ex-gnome-tile { + display: block; + border: solid 1px {{$color.gray}}; + transition: box-shadow 0.5s linear; +} +a.ex-gnome-tile:hover { + box-shadow: 0px 2px 4px {{$color.gray}}; +} +span.ex-gnome-tile-banner { + display: block; + height: 112px; + background: {{$color.fg.blue}}; + overflow: hidden; +} +span.ex-gnome-tile-banner img { + width: 128px; height: 128px; + margin-{{$left}}: 64px; + margin-top: -8px; + transform: rotate(-10deg); +} +span.ex-gnome-tile-title { + color: {{$color.fg}}; + display: block; + margin: 10px 20px; + font-size: 1.2em; +} +span.ex-gnome-tile-desc { + color: {{$color.fg.gray}}; + display: block; + margin: 10px 20px; +} + <!-- links/@style = 'grid' --> div.links-grid-container { margin-left: -10px; |