Diff of /src/overview.css [000000] .. [d7fa72]

Switch to side-by-side view

--- a
+++ b/src/overview.css
@@ -0,0 +1,241 @@
+*{
+	box-sizing: border-box;
+	margin: 0;
+	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+}
+html{
+	height: 100%;
+}
+body{
+	height: 100%;
+	background:#ebebeb;
+}
+a{
+	color:#007bff;
+	text-decoration:none;
+	font-weight: bold;
+	-ms-touch-action:manipulation;
+	touch-action:manipulation;
+}
+a:hover{
+	color:#0056b3;
+	text-decoration:underline;
+}
+a:active{
+	color:#263c53;
+}
+a:visited{
+	color:#58a9ff;
+}
+nav a:visited{
+	color: #007bff;;
+}
+input[type=number]{
+	height: 25px;
+	font-size: 1rem;
+}
+button{
+	font-size: 1.1rem;
+	height: 24.4px;
+  display: inline-flex;
+  align-items: center;
+}
+h1, h2{
+	text-align: center;
+}
+main{
+	margin:0 auto;
+	padding: 1em 2em;
+	max-width: 1200px;
+}
+ul li{
+	padding:0.3rem;
+}
+nav{
+	width: 100%;
+	height: 60px;
+	background-color: #c8c8c8;
+	text-align: center;
+	font-size: 46px;
+}
+
+.container{
+  width: 100%;
+	max-width: 1200px;
+	margin: 0 auto;
+}
+
+#overview{
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: center;
+	align-items: center;
+}
+div:has(.preview-card){
+	position: relative;
+}
+.preview-card{
+	display: inline-block;
+	width: 10em;
+	height: 20em;
+	margin: 1em;
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-color: white;
+	text-align: center;
+}
+.preview-info{
+	position: absolute;
+	bottom: 20px;
+	left: 15px;
+	text-align: center;
+	width: 10em;
+}
+.info-tools{
+	display: flex;
+	justify-content: space-between;
+	font-size: 1.2rem;
+}
+.switch {
+  position: relative;
+	top: 5px;
+  display: inline-block;
+  width: 60px;
+  height: 20px;
+}
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+.slider:before {
+  position: absolute;
+  content: "";
+  width: 26px;
+  left: 4px;
+  bottom: 3px;
+  top: 3px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+input:checked + .slider {
+  background-color: #007bff;
+}
+input:focus + .slider {
+  box-shadow: 0 0 1px #007bff;
+}
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+#popup-list{
+	position: fixed;
+	width: auto;
+	max-height: 78vh;
+	left: 1vw;
+	top: 20vh;
+	overflow: auto;
+	font-weight: bold;
+	text-shadow: 0 0 1px rgb(255, 255, 255);
+	z-index: 999;
+}
+#popup-list tbody{
+	height: max-content;
+	background-color: rgba(245, 245, 245, 0.749);
+}
+.leaflet-container {
+height: 60em;
+width: 100%;
+max-width: 100%;
+max-height: 100%;
+border: 2px solid #5e5e5e;
+background: white;
+}
+.leaflet-container:hover{
+	cursor: crosshair;
+}
+.leaflet-control-attribution {
+	display: none;
+}
+table {
+	width: 100%;
+	margin-bottom: 20px;
+}
+td, th{
+	border: 2px solid #5e5e5e;
+}
+td:first-child{
+	width: 35%;
+}
+#map {
+	max-width: clamp(1200px, 80vw, 80vw);
+	height: 80vh;
+	margin: 0 auto;
+}
+.cut-viewer-container{
+	width: 95%;
+	margin: 0 auto;
+	display: flex;
+}
+.fragment-map {
+	position: relative;
+	flex: 0 1 1000%;
+}
+	#fragment {
+		height: 100%;
+	cursor: crosshair;
+}
+#markerInfo{
+	flex: 0 1 auto;
+}
+#markerInfo tr, td{
+	height: 1rem;
+}
+#markerInfo td:nth-child(2)::before, #markerInfo td:nth-child(3)::before{
+	content: '';
+  display: block;
+  width: 50px;
+}
+#markerInfo td:first-child::before {
+  content: '';
+  display: block;
+  width: 95px;
+}
+.marker {
+	position: absolute;
+	color: greenyellow;
+	font-weight: bold;
+	pointer-events: none;
+	white-space: nowrap;
+	opacity: 0.8;
+}
+.comment {
+	text-shadow: 0 0 5px black;
+	font-size: 3rem;
+	position: relative;
+	left: -25px;
+	top: -10px;
+}
+.marker-link{
+	color: #007bff;
+	font-weight: bold;
+	cursor: pointer;
+}
+.marker-link:hover{
+	text-decoration: underline;
+	color: #0056b3;
+}
\ No newline at end of file