Skip to Content

Changes for page Academy

Last modified by Erik Bakker on 2024/09/24 16:12
From version 55.1
edited by Erik Bakker
on 2022/04/25 15:42
Change comment: There is no comment for this version
To version 28.1
edited by Erik Bakker
on 2022/04/21 15:44
Change comment: Added object

Summary

Details

Page properties
Content
... ... @@ -1,66 +1,1 @@
1 -{{html}}
2 -<html
3 -
4 -<head>
5 -
6 - <title>Card Hover Effect</title>
7 -
8 - <meta name="viewport" content="width=device-width, initial-scale=1">
9 -
10 - <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
11 -
12 - <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
13 -
14 - crossorigin="anonymous">
15 -
16 -</head>
17 -
18 -<body>
19 -
20 - <div class="container">
21 -
22 -
23 -
24 - <div class="card">
25 -
26 - <div class="slide slide1">
27 -
28 - <div class="content">
29 -
30 - <div class="icon">
31 -
32 - <i class="fa fa-user-circle" aria-hidden="true"></i>
33 -
34 - </div>
35 -
36 - </div>
37 -
38 - </div>
39 -
40 - <div class="slide slide2">
41 -
42 - <div class="content">
43 -
44 - <h3>
45 -
46 - Hello there!
47 -
48 - </h3>
49 -
50 - <p>Trust yourself and keep going.</p>
51 -
52 - </div>
53 -
54 - </div>
55 -
56 - </div>
57 -
58 -
59 -
60 - </div>
61 -
62 -</body>
63 -
64 -</html>
65 -{{/html}}
66 -
1 +{{dashboard/}}
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,1 +1,0 @@
1 -long
Code
... ... @@ -1,161 +1,0 @@
1 -body {
2 -
3 - margin: 0;
4 -
5 - padding: 0;
6 -
7 - min-height: 100vh;
8 -
9 - display: flex;
10 -
11 - align-items: center;
12 -
13 - justify-content: center;
14 -
15 - font-family: sans-serif;
16 -
17 - background-color: #f1f1f1;
18 -
19 -}
20 -
21 -.container .card .icon {
22 -
23 - position: absolute;
24 -
25 - top: 0;
26 -
27 - left: 0;
28 -
29 - width: 100%;
30 -
31 - height: 100%;
32 -
33 - background: #2c73df;
34 -
35 -}
36 -
37 -.container .card .icon .fa {
38 -
39 - position: absolute;
40 -
41 - top: 50%;
42 -
43 - left: 50%;
44 -
45 - transform: translate(-50%, -50%);
46 -
47 - font-size: 80px;
48 -
49 - color: #fff;
50 -
51 -}
52 -
53 -.container .card .slide {
54 -
55 - width: 300px;
56 -
57 - height: 200px;
58 -
59 - transition: 0.5s;
60 -
61 -}
62 -
63 -.container .card .slide.slide1 {
64 -
65 - position: relative;
66 -
67 - display: flex;
68 -
69 - justify-content: center;
70 -
71 - align-items: center;
72 -
73 - z-index: 1;
74 -
75 - transition: .7s;
76 -
77 - transform: translateY(100px);
78 -
79 -}
80 -
81 -.container .card:hover .slide.slide1{
82 -
83 - transform: translateY(0px);
84 -
85 -}
86 -
87 -.container .card .slide.slide2 {
88 -
89 - position: relative;
90 -
91 - display: flex;
92 -
93 - justify-content: center;
94 -
95 - align-items: center;
96 -
97 - padding: 20px;
98 -
99 - box-sizing: border-box;
100 -
101 - transition: .8s;
102 -
103 - transform: translateY(-100px);
104 -
105 - box-shadow: 0 20px 40px rgba(0,0,0,0.4);
106 -
107 -}
108 -
109 -.container .card:hover .slide.slide2{
110 -
111 - transform: translateY(0);
112 -
113 -}
114 -
115 -.container .card .slide.slide2::after{
116 -
117 - content: "";
118 -
119 - position: absolute;
120 -
121 - width: 30px;
122 -
123 - height: 4px;
124 -
125 - bottom: 15px;
126 -
127 - left: 50%;
128 -
129 - left: 50%;
130 -
131 - transform: translateX(-50%);
132 -
133 - background: #2c73df;
134 -
135 -}
136 -
137 -.container .card .slide.slide2 .content p {
138 -
139 - margin: 0;
140 -
141 - padding: 0;
142 -
143 - text-align: center;
144 -
145 - color: #414141;
146 -
147 -}
148 -
149 -.container .card .slide.slide2 .content h3 {
150 -
151 - margin: 0 0 10px 0;
152 -
153 - padding: 0;
154 -
155 - font-size: 24px;
156 -
157 - text-align: center;
158 -
159 - color: #414141;
160 -
161 -}
Content Type
... ... @@ -1,1 +1,0 @@
1 -CSS
Name
... ... @@ -1,1 +1,0 @@
1 -TestCSSExtension
Parse content
... ... @@ -1,1 +1,0 @@
1 -Yes
Use this extension
... ... @@ -1,1 +1,0 @@
1 -currentPage
XWiki.DocumentSheetBinding[0]
XWiki.GadgetClass[0]
content
... ... @@ -1,0 +1,9 @@
1 +{{velocity}}
2 +#set ($extraParams = '')
3 +#if ($doc.space != 'Main')
4 + #set ($escapedDocumentReference = $services.rendering.escape($services.model.serialize($doc.documentReference,
5 + 'default'), 'xwiki/2.1'))
6 + #set ($extraParams = "root='document:$escapedDocumentReference'")
7 +#end
8 +{{documentTree showTranslations="false" showAttachments="false" compact="true" $extraParams /}}
9 +{{/velocity}}
position
... ... @@ -1,0 +1,1 @@
1 +1,1
title
... ... @@ -1,0 +1,1 @@
1 +#if ($doc.space == 'Main')$services.localization.render('platform.dashboard.wiki.pages')#{else}$services.localization.render('platform.dashboard.space.documents', [$doc.plainTitle])#end
XWiki.GadgetClass[1]
content
... ... @@ -1,0 +1,198 @@
1 +{{code}}
2 +@import url('https://fonts.googleapis.com/css?family=Heebo:400,700|Open+Sans:400,700');
3 +
4 +:root {
5 + --color: #3c3163;
6 + --transition-time: 0.5s;
7 +}
8 +
9 +* {
10 + box-sizing: border-box;
11 +}
12 +
13 +body {
14 + margin: 0;
15 + min-height: 100vh;
16 + font-family: 'Open Sans';
17 + background: #fafafa;
18 +}
19 +
20 +a {
21 + color: inherit;
22 +}
23 +
24 +.cards-wrapper {
25 + display: grid;
26 + justify-content: center;
27 + align-items: center;
28 + grid-template-columns: 1fr 1fr 1fr;
29 + grid-gap: 4rem;
30 + padding: 4rem;
31 + margin: 0 auto;
32 + width: max-content;
33 +}
34 +
35 +.card {
36 + font-family: 'Heebo';
37 + --bg-filter-opacity: 0.5;
38 + background-image: linear-gradient(rgba(0,0,0,var(--bg-filter-opacity)),rgba(0,0,0,var(--bg-filter-opacity))), var(--bg-img);
39 + height: 20em;
40 + width: 15em;
41 + font-size: 1.5em;
42 + color: white;
43 + border-radius: 1em;
44 + padding: 1em;
45 + /*margin: 2em;*/
46 + display: flex;
47 + align-items: flex-end;
48 + background-size: cover;
49 + background-position: center;
50 + box-shadow: 0 0 5em -1em black;
51 + transition: all, var(--transition-time);
52 + position: relative;
53 + overflow: hidden;
54 + border: 10px solid #ccc;
55 + text-decoration: none;
56 +}
57 +
58 +.card:hover {
59 + transform: rotate(0);
60 +}
61 +
62 +.card h1 {
63 + margin: 0;
64 + font-size: 1.5em;
65 + line-height: 1.2em;
66 +}
67 +
68 +.card p {
69 + font-size: 0.75em;
70 + font-family: 'Open Sans';
71 + margin-top: 0.5em;
72 + line-height: 2em;
73 +}
74 +
75 +.card .tags {
76 + display: flex;
77 +}
78 +
79 +.card .tags .tag {
80 + font-size: 0.75em;
81 + background: rgba(255,255,255,0.5);
82 + border-radius: 0.3rem;
83 + padding: 0 0.5em;
84 + margin-right: 0.5em;
85 + line-height: 1.5em;
86 + transition: all, var(--transition-time);
87 +}
88 +
89 +.card:hover .tags .tag {
90 + background: var(--color);
91 + color: white;
92 +}
93 +
94 +.card .date {
95 + position: absolute;
96 + top: 0;
97 + right: 0;
98 + font-size: 0.75em;
99 + padding: 1em;
100 + line-height: 1em;
101 + opacity: .8;
102 +}
103 +
104 +.card:before, .card:after {
105 + content: '';
106 + transform: scale(0);
107 + transform-origin: top left;
108 + border-radius: 50%;
109 + position: absolute;
110 + left: -50%;
111 + top: -50%;
112 + z-index: -5;
113 + transition: all, var(--transition-time);
114 + transition-timing-function: ease-in-out;
115 +}
116 +
117 +.card:before {
118 + background: #ddd;
119 + width: 250%;
120 + height: 250%;
121 +}
122 +
123 +.card:after {
124 + background: white;
125 + width: 200%;
126 + height: 200%;
127 +}
128 +
129 +.card:hover {
130 + color: var(--color);
131 +}
132 +
133 +.card:hover:before, .card:hover:after {
134 + transform: scale(1);
135 +}
136 +
137 +.card-grid-space .num {
138 + font-size: 3em;
139 + margin-bottom: 1.2rem;
140 + margin-left: 1rem;
141 +}
142 +
143 +.info {
144 + font-size: 1.2em;
145 + display: flex;
146 + padding: 1em 3em;
147 + height: 3em;
148 +}
149 +
150 +.info img {
151 + height: 3em;
152 + margin-right: 0.5em;
153 +}
154 +
155 +.info h1 {
156 + font-size: 1em;
157 + font-weight: normal;
158 +}
159 +
160 +/* MEDIA QUERIES */
161 +@media screen and (max-width: 1285px) {
162 + .cards-wrapper {
163 + grid-template-columns: 1fr 1fr;
164 + }
165 +}
166 +
167 +@media screen and (max-width: 900px) {
168 + .cards-wrapper {
169 + grid-template-columns: 1fr;
170 + }
171 + .info {
172 + justify-content: center;
173 + }
174 + .card-grid-space .num {
175 + /margin-left: 0;
176 + /text-align: center;
177 + }
178 +}
179 +
180 +@media screen and (max-width: 500px) {
181 + .cards-wrapper {
182 + padding: 4rem 2rem;
183 + }
184 + .card {
185 + max-width: calc(100vw - 4rem);
186 + }
187 +}
188 +
189 +@media screen and (max-width: 450px) {
190 + .info {
191 + display: block;
192 + text-align: center;
193 + }
194 + .info h1 {
195 + margin: 0;
196 + }
197 +}
198 +{{/code}}
position
... ... @@ -1,0 +1,1 @@
1 +1, 2
title
... ... @@ -1,0 +1,1 @@
1 +$services.localization.render('rendering.macro.code.name')