source: main/adopters/nm/trunk/src/main/webapps/nmibis-content/xml/html_content/topic/_introduction.xml @ 19895

Last change on this file since 19895 was 19895, checked in by GarthBraithwaite_STG, 2 years ago

nm content - reimplemented basic /index.jsp which broke the image paths - updated to explicit baserequestpath vs relative.
File size: 3.9 KB
Line 
1<?xml version="1.0" encoding="ISO-8859-1"?>
2
3<CONTENT  xmlns:ibis="http://www.ibisph.org">
4
5        <style>
6                .TopImageNavigation
7                {
8                        text-align: center;
9                        margin-bottom: 1.5rem;
10                }
11                .TopImageNavigation .Container
12                {
13                        display:                        inline-block;
14                        position:                       relative;
15                        margin:                         0;
16                        padding:                        0;
17                        width:                          235px;
18                        height:                         235px;
19                        background:                     transparent 0 0 no-repeat;
20                        background-size:        contain;
21                }
22/* if implemented as img then can use width 24% and height: auto */
23                .TopImageNavigation .Container .Overlay
24                {
25                        display:                        inline-block;
26                        position:                       absolute;
27                        bottom:                         0;
28                        left:                           0;
29                        height:                         60px;
30                        width:                          100%;
31                        background-color:       rgb(7, 7, 7, 0.5);
32                        color:                          white;
33                        padding-top:            0.7rem;
34                        font-size:                      1.25rem;
35                        text-align:             center;
36                }
37
38
39                .TopImageNavigation #healthstatus
40                {
41                        background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthstatus-bw.jpg");
42                }
43                .TopImageNavigation #healthcare
44                {
45                        background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthcare-bw.jpg");
46                }
47                .TopImageNavigation #lifestyle
48                {
49                        background-image: url("<ibis:baseRequestPath/>view/image/topic/category/lifestyle-bw.jpg");
50                }
51                .TopImageNavigation #population
52                {
53                        background-image: url("<ibis:baseRequestPath/>view/image/topic/category/population-bw.jpg");
54                }
55
56                .TopImageNavigation #healthstatus:hover,
57                .TopicHealthStatus .TopImageNavigation #healthstatus
58                {
59                        background-color: transparent;
60                        background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthstatus.jpg");
61                }
62                .TopImageNavigation #healthcare:hover,
63                .TopicHealthCare .TopImageNavigation #healthcare
64                {
65                        background-color: transparent;
66                        background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthcare.jpg");
67                }
68                .TopImageNavigation #lifestyle:hover,
69                .TopicLifestyle .TopImageNavigation #lifestyle
70                {
71                        background-color: transparent;
72                        background-image: url("<ibis:baseRequestPath/>view/image/topic/category/lifestyle.jpg");
73                }
74                .TopImageNavigation #population:hover,
75                .TopicPopulation .TopImageNavigation #population
76                {
77                        background-color: transparent;
78                        background-image: url("<ibis:baseRequestPath/>view/image/topic/category/population.jpg");
79                }
80
81                .TopicLifestyle p:first-of-type,
82                .TopicPopulation p:first-of-type,
83                .TopicHealthCare p:first-of-type,
84                .TopicHealthStatus p:first-of-type
85                {
86                        margin-top:                     0;
87                }
88
89
90                .Container.TextIconBlocks
91                {
92                        margin:                         0 auto;
93                        max-width:                      900px;
94                }
95                .TextIconBlocks li
96                {
97                        display:                        inline-block;
98                        vertical-align:         top;
99                }
100                .TextIconBlocks li > a 
101                {
102                        display:                        inline-block;
103                        display:                        block;
104                        background-color:       #336699;
105                        width:                          170px;
106                        height:                         170px;
107                        padding:                        18px 20px 10px 20px;
108                        vertical-align:         top;
109                        font-size:                      1rem;
110                        text-align:             center;
111                        color:                          white;
112                }
113                .TextIconBlocks li a:hover
114                {
115                        background-color:       var(--background-color-hover);
116                        color:                          var(--color-hover);
117                }
118                .TextIconBlocks li a img
119                {
120                        display:                        block;
121                        height:                         64px;
122                        margin:                         0 auto 5px auto;
123                        background-color:       inherit;
124                }
125        </style>
126
127        <nav class="TopImageNavigation">
128                <a id="population" ibis:href="topic/population/Introduction.html" class="Container">
129                        <span class="Overlay">Population <br/>Characteristics
130                        </span>
131                </a>
132                <a id="healthcare" ibis:href="topic/healthcare/Introduction.html" class="Container">
133                        <span class="Overlay">Health Care <br/>Services
134                        </span>
135                </a>
136                <a id="lifestyle" ibis:href="topic/lifestyle/Introduction.html" class="Container">
137                        <span class="Overlay">Lifestyle and <br/>Risk Factors
138                        </span>
139                </a>
140                <a id="healthstatus" ibis:href="topic/healthstatus/Introduction.html" class="Container">
141                        <span class="Overlay">Health <br/>Status
142                        </span>
143                </a>
144        </nav>
145
146</CONTENT>
Note: See TracBrowser for help on using the repository browser.