diff options
Diffstat (limited to 'site/public/site.css')
-rw-r--r-- | site/public/site.css | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/site/public/site.css b/site/public/site.css index 3c9bc03..6c79aa9 100644 --- a/site/public/site.css +++ b/site/public/site.css | |||
@@ -11,3 +11,47 @@ | |||
11 | li p { | 11 | li p { |
12 | margin: 2px; | 12 | margin: 2px; |
13 | } | 13 | } |
14 | |||
15 | /* OUTER CONTAINER */ | ||
16 | .tcontainer { | ||
17 | width: 100%; | ||
18 | overflow: hidden; /* Hide scroll bar */ | ||
19 | } | ||
20 | |||
21 | /* MIDDLE CONTAINER */ | ||
22 | .ticker-wrap { | ||
23 | width: 100%; | ||
24 | padding-left: 100%; /* Push contents to right side of screen */ | ||
25 | background-color: #eee; | ||
26 | } | ||
27 | |||
28 | /* INNER CONTAINER */ | ||
29 | @keyframes ticker { | ||
30 | 0% { transform: translate3d(0, 0, 0); } | ||
31 | 100% { transform: translate3d(-100%, 0, 0); } | ||
32 | } | ||
33 | |||
34 | .ticker-move { | ||
35 | /* Basically move items from right side of screen to left in infinite loop */ | ||
36 | display: inline-block; | ||
37 | white-space: nowrap; | ||
38 | padding-right: 100%; | ||
39 | animation-iteration-count: infinite; | ||
40 | animation-timing-function: linear; | ||
41 | animation-name: ticker; | ||
42 | animation-duration: 30s; | ||
43 | } | ||
44 | |||
45 | .ticker-move:hover{ | ||
46 | animation-play-state: paused; /* Pause scroll on mouse hover */ | ||
47 | } | ||
48 | |||
49 | /* ITEMS */ | ||
50 | .ticker-item { | ||
51 | display: inline-block; /* Lay items in a horizontal line */ | ||
52 | padding: 0 5px; | ||
53 | } | ||
54 | |||
55 | .ticker-item::before { | ||
56 | content: " ✑ "; | ||
57 | } | ||