uim.bootstrap.bs5.demos.examples.cover source code

1 module uim.bootstrap.bs5.demos.examples.cover;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("examples/cover", new class DH5AppPage {
7 		this() { 
8 			super(); 
9 			this
10 			.created(DateTime(2020, 12, 20, 10, 10, 0))
11 			.changed(timeLastModified(__FILE_FULL_PATH__))
12 			.parameters([
13 					"pageTitle": "Starter Page - Bootstrap 5 Demo",
14           ])
15           .styles(`/* Custom default button */
16 .btn-secondary,
17 .btn-secondary:hover,
18 .btn-secondary:focus {
19   color: #333;
20   text-shadow: none; /* Prevent inheritance from body */
21 }
22 
23 
24 /*
25  * Base structure
26  */
27 
28 body {
29   text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
30   box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
31 }
32 
33 .cover-container {
34   max-width: 42em;
35 }
36 
37 
38 /*
39  * Header
40  */
41 
42 .nav-masthead .nav-link {
43   padding: .25rem 0;
44   font-weight: 700;
45   color: rgba(255, 255, 255, .5);
46   background-color: transparent;
47   border-bottom: .25rem solid transparent;
48 }
49 
50 .nav-masthead .nav-link:hover,
51 .nav-masthead .nav-link:focus {
52   border-bottom-color: rgba(255, 255, 255, .25);
53 }
54 
55 .nav-masthead .nav-link + .nav-link {
56   margin-left: 1rem;
57 }
58 
59 .nav-masthead .active {
60   color: #fff;
61   border-bottom-color: #fff;
62 }
63 
64       .bd-placeholder-img {
65         font-size: 1.125rem;
66         text-anchor: middle;
67         -webkit-user-select: none;
68         -moz-user-select: none;
69         user-select: none;
70       }
71 
72       @media (min-width: 768px) {
73         .bd-placeholder-img-lg {
74           font-size: 3.5rem;
75         }
76       }`).styles(["href":"cover.css", "rel":"stylesheet"]);
77 		} 
78 			
79     override string content() { 
80 //  <body class="d-flex h-100 text-center text-white bg-dark">
81 
82       return 
83 H5Header(["container d-flex w-100 h-100 p-3 mx-auto flex-column"], 
84   H5Header(["mb-auto"], 
85     H5Div(
86       H5H3(["float-md-start mb-0"], "Cover"),
87       H5Header(["nav-masthead justify-content-center float-md-end"], 
88         BS5NavLink(["active"], ["aria-current":"page", "href":"#"], "Home"),
89         BS5NavLink(["href":"#"], "Features"),
90         BS5NavLink(["href":"#"], "Contact")
91       )
92     )
93   ),
94   H5Header([""], 
95     H5H1("Cover your page."),
96     H5P(["lead"], "Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own."),
97     H5Header( 
98       H5A(["btn btn-lg btn-secondary fw-bold border-white bg-white"], ["href":"#"], "Learn more"),
99     )
100   ),
101   H5Header(["auto text-white-50"], 
102     H5P("Cover template")
103   )
104 ).toString;
105 
106     }
107   });
108 }
109