10-minute-intro/index.html at main · davidrumseymapcenter/10-minute-intro · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>Introduction to the DRMC</title>

		<link rel="stylesheet" href="dist/reset.css">
		<link rel="stylesheet" href="dist/reveal.css">
		<link rel="stylesheet" href="dist/theme/white.css">

		<!-- Theme used for syntax highlighted code -->
		<link rel="stylesheet" href="plugin/highlight/monokai.css">
		<style>
			.highlight {
    			background-color: yellow; /* You can change this color to your preferred highlight color */
				}

			.white-text {
				color: white; /* Set the text color to white */
				padding: 20px; /* Add some padding for content inside the container */
				}

			.white-text h1 {
				color: white; /* Set the text color to white */
				padding: 20px; /* Add some padding for content inside the container */
				}

			.light-background {
				background-color: rgba(255, 255, 255, 0.5); /* Use rgba to set the background color with transparency */
				padding: 20px; /* Add padding for content inside the container */
				}
				.center-container {
      display: flex;
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      max-height: 90vh; /* Limit the maximum height of the container to 90% of the viewport height */
      overflow: auto; /* Add scrollbars if content overflows */
    }

    /* Define a grid container */
    .qr-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2 columns with equal width */
      gap: 10px; /* Reduce the gap between QR codes */
    }

    /* Style for individual QR code items */
    .qr-code {
      width: 100%; /* Ensure the QR codes take up the full width of their container */
      max-width: 300px; /* Limit the maximum width of each QR code */
      height: auto; /* Maintain aspect ratio */
    }

		</style>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section data-background-image="img/0119.jpg" data-background-size="cover">
					<div class="light-background"><h1>Welcome</h1>
					<h3>David Rumsey Map Center</h3>
					<p>Niles Dorn</p>
					<p>Laura Krueger</p>
					<p>Kristina Larsen</p>
					<p>Laura Swenson</p>
					<p>Evan Thornberry</p></div>
				</section>
					<aside class="notes">
				- Say your name and introduce others; explain your role + history at center
				- Center opened here at Stanford in 2016
					  </aside>
				</section>
				<section data-background-image="img/0107.jpg" data-background-size="cover">
					<aside class="notes">
				- Lives in SF, very involved with day-to-day operations
				- 80’s started collecting; 90’s website/digitization project
				- Use of DavidRumsey.com for discovery tools
					</aside>
				</section>

				<section>
					<h2>A <span class="highlight">Center</span></h2>
					<p><em>The DRMC works to curate and maintain the historical map collection at Stanford University Library. We serve as a multidisciplinary hub dedicated to advancing education, fostering learning, and supporting research through the use of historical spatial and cartographic data.</em></p>
					<aside class="notes">
						Here at the DRMC, we're responsible for curating and maintaining Stanford University Library's historical map collection. We actively promote engagement with historical maps, whether in their physical form or as digital surrogates, encouraging their use as valuable data sources. By digitizing and making this materials accessible virtually, we facilitate the integration of historical maps into digital and online environments. In that sense our mission is to foster and promote exploration through the use of historical materials and modern technology.
					</aside>
				</section>

				<section data-background-image="img/0002.jpg" data-background-size="cover">
					<div class="light-background"><h1>DRMC Space</h1>
					<p>Classes</p>
					<p>Conferences</p>
					<p>Exhibitions</p>
					<p>Reading Room</p>
					<p>Tours</p></div>
					<aside class="notes">
					- Classes like this
					- Conferences
					- Exhibitions (related to conferences; annual student competition)
					- Special Collections Reading Room (public can come and view)
					- Tours
					</aside>
				</section>
				<section class="dark-slide" data-background-image="img/0004.jpg" data-background-size="cover">
					<div class="white-text">

					<h1>Essential Takeaways</h1>
					<p>We're here for you</p>
					<p>Our site(s) are a great starting point</p>
					<p>Feel free to get in touch</p></div>
					<aside class="notes">
					- Librarians are here to help you find material in the collections
					- We want you to get an idea of what is possible
					- Everything we look at on screens can be accessed online
					- You can come back to review when it becomes relevant (specific assignment / project / research question)
					- There are self-paced tutorials available on how to discover and use
					</aside>
				</section>
				<section>
					<div class="white-text">

					<h2>Getting Started Online</h2>
					<div class="center-container">
					<div class="qr-grid">
						<!-- QR Code 1 -->
						<div class="qr-code">
						<small style="color:black";><a href="https://www.davidrumsey.com" target="_blank">davidrumsey.com</a></small>
						  <img src="img/davidrumsey.png" alt="QR Code 1">
						</div>

						<!-- QR Code 2 -->
						<div class="qr-code">
							<small style="color:black";><a href="https://searchworks.stanford.edu" target="_blank">searchworks.stanford.edu</a></small>
						  <img src="img/searchworks.png" alt="QR Code 2">
						</div>


					  </div>
					</div>
					<aside class="notes">

					</aside>
				</section>
				<section>
					<div class="white-text">

					<h2>Getting Started Online</h2>
					<div class="center-container">

						<!-- QR Code 1 -->
						<div class="qr-code">
						<small style="color:black";> <a href="https://library.stanford.edu/libraries/david-rumsey-map-center" target="_blank">library.stanford.edu/libraries/david-rumsey-map-center</a></small>
						  <img src="img/drmc.png" alt="QR Code 1">
						</div>


					</div>
					<aside class="notes">

					</aside>
				</section>
			</div>
		</div>

		<script src="dist/reveal.js"></script>
		<script src="plugin/notes/notes.js"></script>
		<script src="plugin/markdown/markdown.js"></script>
		<script src="plugin/highlight/highlight.js"></script>
		<script>
			// More info about initialization & config:
			// - https://revealjs.com/initialization/
			// - https://revealjs.com/config/
			Reveal.initialize({
				hash: true,

				// Learn about plugins: https://revealjs.com/plugins/
				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
			});
		</script>
	</body>
</html>