]>
Git — Sourcephile - julm/camera.git/blob - index.css
2 text-rendering: optimizeLegibility
;
12 background-color: white
;
13 border-bottom: 1px solid black
;
23 grid-auto-flow: dense
;
25 /* Grow the pictures when the screen grows,
26 * fitting as many 640x360 videos per row as possible,
27 * without resizing a video more than its width,
28 * substracting 2*5px for the margins.
30 grid-template-columns: repeat
(auto-fit
, minmax
(310px, 1fr));
35 @media screen and (min-width: 320px) {
37 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
40 @media screen and (min-width: 768px) {
42 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
48 list-style-type: none
;
51 .camera > ul > li.highlight-box {
55 .camera > ul > li.highlight-tall {
58 .camera > ul > li.highlight-wide {
61 .camera > ul > li img {
62 border: 1px solid black
;
63 box-shadow: 1px 3px 8px rgba
(0, 0, 0, 0.5);
70 .camera > ul > li video {
71 border: 1px solid black
;
72 box-shadow: 1px 3px 8px rgba
(0, 0, 0, 0.5);
73 background-color: black
;
80 .camera > ul > li video.orient-90 {
82 .camera
> ul
> li:target img
,
83 .camera > ul > li:target video {
84 border: 1px solid blue
;
87 .camera > ul > li div.item {
89 flex-direction: column
;
91 .camera > ul > li div.item > span.comment {
92 display: inline-block
;
93 margin: 1ex 1ex 1ex 1ex;
97 .camera > ul > li span.infos {
104 //margin: 1ex 1ex 1ex 1ex;
105 /*-webkit-text-stroke: 1px black;*/
106 flex-direction: column
;
107 justify-content: space-between
;
109 .camera > ul > li:hover span.infos {
112 .camera > ul > li:hover span.infos > span {
114 background-color: black
;
117 .camera > ul > li span.links {
123 right: -1px; /* 0 is not perfectly aligned */
124 //margin: 1ex 1ex 1ex 1ex;
125 text-decoration: none
;
126 flex-direction: column
;
128 justify-content: space-between
;
129 /*-webkit-text-stroke: 1px black;*/
131 .camera > ul > li:hover span.links {
134 .camera > ul > li span.links > a {
136 background-color: black
;
137 text-decoration: none
;
138 padding: 2px 0px 2px 2px;