Переглянути джерело

Restyling grafica pagina opera d'arte

Giulia Cacioli 2 роки тому
батько
коміт
32d0e96e7d
9 змінених файлів з 321 додано та 314 видалено
  1. 277 267
      OA.html
  2. 21 16
      css/OA.css
  3. 0 5
      css/landing-page.css
  4. 7 14
      css/place_people.css
  5. 0 0
      css/styles.min.css
  6. 2 2
      index.html
  7. 4 4
      js/OA.js
  8. 2 6
      ricerca.html
  9. 8 0
      scss/_global.scss

+ 277 - 267
OA.html

@@ -1,299 +1,309 @@
 <!doctype html>
 <html>
+
 <head>
-<meta charset="utf-8">
-<title>MOCKY - Il mockup di RESTORE</title>
-<link href="Untitled1.css" rel="stylesheet">
-<link href="index.css" rel="stylesheet">
-<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
-<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
-<link href="css/place_people.css" rel="stylesheet">
-<link href="css/OA.css" rel="stylesheet">
-<link href="css/datafilter.css" rel="stylesheet">
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
-<script src="https://d3js.org/d3.v4.min.js"></script>
-<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="description" content="">
+	<meta name="author" content="">
 
-<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
-  <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="screen.css" />
+	<title>Restore - Opera d'arte</title>
 
-  <link rel="stylesheet" href="js/dist/MarkerCluster.css" />
-  <link rel="stylesheet" href="js/dist/MarkerCluster.Default.css" />
-  <script src="js/dist/leaflet.markercluster-src.js"></script>
+	<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+	<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
+	<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
+	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
 
+	<link href="css/place_people.css" rel="stylesheet">
+	<link href="css/OA.css" rel="stylesheet">
 
-</head>
-<body>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
+	<script src="https://d3js.org/d3.v4.min.js"></script>
 
-	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <div class="container-fluid">
-      <img src="img/Logo.png" style="width:100px;">
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="navbar-nav" style="margin-left:auto;">
-          <a class="button-link" href="index.html"><button class="btn btn-menu" type="button">Home</button></a>
-          <a class="button-link" href="http://restore.ovi.cnr.it/"><button class="btn btn-menu" type="button">Progetto</button></a>
-          <a class="button-link" href="ricerca.html"><button class="btn btn-menu" type="button">Ricerca</button></a>
-          <a class="button-link" href="#"><button class="btn btn-menu" type="button">Indici</button></a>
-          <a class="button-link" href="#"><button class="btn btn-menu" type="button">Percorsi</button></a>
-          <a class="button-link" href="standard.html"><button class="btn btn-menu" type="button">Standard</button></a>
-          <div class="dropdown">
-            <button class="btn btn-menu dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sparql
-            </button>
-            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it:8890/sparql/">Endpoint Sparql</a>
-              <a class="dropdown-item" href="sparql.html">Query</a>
-            </div>
-          </div>
-          <a class="button-link" href="download.html"><button class="btn btn-menu" type="button">Download</button></a>
-          <div class="dropdown">
-            <button class="btn btn-menu dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Collegamenti esterni
-            </button>
-            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              <a class="dropdown-item" href="http://ckan.restore.ovi.cnr.it/">CKAN</a>
-              <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it/lodlive/">LOD</a>
-            </div>
-          </div>
-        </div>
-    </div>
-  </nav>
+	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+	<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
 
-	<div id="container_persona">
-		<div class="row" id="col_graph">
-		    <div class="col-2">
-		      dataset: 
-		    </div>  
-		    <div class="col-10" id="grafo"></div>
-		</div>
+	<link rel="stylesheet" href="js/dist/MarkerCluster.css" />
+	<link rel="stylesheet" href="js/dist/MarkerCluster.Default.css" />
+	<script src="js/dist/leaflet.markercluster-src.js"></script>
+
+	<link href="css/styles.min.css" rel="stylesheet">
+</head>
 
+<body>
+	<header class="sticky-top">
+		<nav class="navbar navbar-expand-lg navbar-light bg-white">
+			<div class="container-fluid">
+				<div class="navbar-brand">
+					<img src="img/Logo.png" width="100" alt="Restore" />
+				</div>
+				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+				<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
+					<ul class="navbar-nav">
+						<li class="nav-item">
+							<a class="nav-link" href="index.html">Home</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="http://restore.ovi.cnr.it/">Progetto</a>
+						</li>
+						<li class="nav-item active">
+							<a class="nav-link" href="#">Ricerca</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#">Indici</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#">Percorsi</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="standard.html">Standard</a>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sparql</a>
+							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+								<a class="dropdown-item" href="http://dev.restore.ovi.cnr.it:8890/sparql/">Endpoint Sparql</a>
+								<a class="dropdown-item" href="sparql.html">Query</a>
+							</div>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="download.html">Download</a>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Collegamenti esterni</a>
+							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
+								<a class="dropdown-item" href="http://ckan.restore.ovi.cnr.it/" target="_blank">CKAN</a>
+								<a class="dropdown-item" href="http://dev.restore.ovi.cnr.it/lodlive/" target="_blank">LOD</a>
+							</div>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+	</header>
 
-		<div class="row">
-		    <div class="col"> 
-          <h2 id="nome_oggetto"></h2>
-          <h4 id="time"></h4>
-          <h3 id="artist_name"></h3>
-		      
-		    </div>  
-		 </div>
+	<main>
+		<section id="container_persona">
+			<div id="col_graph">
+				<div class="w-content">
+					<div class="container-fluid">
+						<div class="row">
+							<div class="col-auto">
+								<span>Dataset:</span>
+							</div>
+							<div class="col-auto" id="grafo"></div>
+						</div>
+					</div>
+				</div>
+			</div>
 
-	<div class="row">
-    <div class="col" id="info_OA">
-      
+			<div class="w-content section-small">
+				<div class="container-fluid">
+					<div class="col oa-box-info">
+						<div class="container-fluid">
+							<div class="row oa-title">
+								<div class="col">
+									<span id="time"></span>
+									<h1 id="nome_oggetto"></h1>
+									<span id="artist_name"></span>
+								</div>
+							</div>
 
-       <div class="row" id="NCT" style="display:none;">
-          <div class="col-4">
-            Codice Univoco del Bene (NCT): 
-          </div>
-          <div class="col" id="identifier">
-             
-          </div>  
-       </div>
+							<div class="row">
+								<div class="col" id="info_OA">
+									<div class="row" id="NCT" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Codice Univoco del Bene (NCT):</span>
+										</div>
+										<div class="col" id="identifier"></div>
+									</div>
 
-       <div class="row" id="SGTT" style="display:none;">
-          <div class="col-4">
-            Titolo: 
-          </div> 
-          <div class="col" id="title">
-            
-          </div>  
-       </div>
+									<div class="row" id="SGTT" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Titolo:</span>
+										</div>
+										<div class="col" id="title"></div>
+									</div>
 
-       <div class="row" id="OGTD" style="display:none;">
-          <div class="col-4" >
-            Oggetto: 
-          </div> 
-          <div class="col" id="type">
-             
-          </div>  
-       </div>
+									<div class="row" id="OGTD" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Oggetto:</span>
+										</div>
+										<div class="col" id="type"></div>
+									</div>
 
-       <div class="row" id="LDCN" style="display:none;">
-          <div class="col-4">
-            Luogo di conservazione: 
-          </div>
-          <div class="col" id="owner">
-             
-          </div>  
-       </div>
+									<div class="row" id="LDCN" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Luogo di conservazione:</span>
+										</div>
+										<div class="col" id="owner"></div>
+									</div>
 
-       <div class="row" id="LDCS" style="display:none;">
-          <div class="col-4">
-            Localizzazione: 
-          </div> 
-          <div class="col" id="location">
-            
-          </div>  
-       </div>
+									<div class="row" id="LDCS" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Localizzazione:</span>
+										</div>
+										<div class="col" id="location"></div>
+									</div>
 
-       <div class="row" id="SGTI" style="display:none;">
-          <div class="col-4">
-            Soggetto: 
-          </div>
-          <div class="col" id="subject">
-            
-          </div>  
-       </div>
+									<div class="row" id="SGTI" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Soggetto:</span>
+										</div>
+										<div class="col" id="subject"></div>
+									</div>
 
-       <div class="row" id="AUT" style="display:none;">
-          <div class="col-4">
-            Attribuzioni: 
-          </div>
-          <div class="col" id="artist">
-            
-          </div>  
-       </div>
+									<div class="row" id="AUT" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Attribuzioni:</span>
+										</div>
+										<div class="col" id="artist"></div>
+									</div>
 
-       <div class="row" id="CMM" style="display:none;">
-          <div class="col-4">
-            Committente: 
-          </div>
-          <div class="col" id="client">
-            
-          </div>  
-       </div>
+									<div class="row" id="CMM" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Committente:</span>
+										</div>
+										<div class="col" id="client"></div>
+									</div>
 
-       <div class="row" id="MIS" style="display:none;">
-          <div class="col-4">
-            Dimensioni: 
-          </div> 
-          <div class="col" id="dimensions">
-            
-          </div>  
-       </div>
+									<div class="row" id="MIS" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Dimensioni:</span>
+										</div>
+										<div class="col" id="dimensions"></div>
+									</div>
 
-       <div class="row" id="MTC" style="display:none;">
-          <div class="col-4">
-            Materia e Tecnica: 
-          </div>
-          <div class="col">
-            <p><span id="materials"></span><span id="technique"></span></p>
-            
-          </div>  
-       </div>
+									<div class="row" id="MTC" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Materia e Tecnica:</span>
+										</div>
+										<div class="col">
+											<span id="materials"></span>
+											<span id="technique"></span>
+										</div>
+									</div>
 
-       <div class="row" id="STCC" style="display:none;">
-          <div class="col-4">
-            Condizione: 
-          </div> 
-          <div class="col" id="condition">
-            
-          </div>  
-       </div>
+									<div class="row" id="STCC" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Condizione:</span>
+										</div>
+										<div class="col" id="condition"></div>
+									</div>
 
-       <div class="row" id="NSC" style="display:none;">
-          <div class="col-4">
-            Notizie Storico Critiche: 
-          </div> 
-          <div class="col" id="description">
-            
-          </div>  
-       </div>
+									<div class="row" id="NSC" style="display:none;">
+										<div class="col-sm-4">
+											<span class="label">Notizie Storico Critiche:</span>
+										</div>
+										<div class="col" id="description"></div>
+									</div>
+								</div>
+							</div>
 
-  </div>
-</div>
+							<!-- <hr />
 
-<div id="placeholder_luoghi" class="row" style="margin-top:20px;">
-	<p class="section_box">Luoghi collegati a <span id="nome1"></span></p>
-</div>
-<div class="row">
-    <div class="col-9">
-      <div class="row">
-        <div class="col" id="people_map">
-          <div id="map"></div>
-        </div>
-      </div>
-    </div>
+							<div id="placeholder_luoghi" class="row">
+								<h2 class="section_box col">
+									Luoghi collegati a <span id="nome1"></span>
+								</h2>
+							</div>
 
-    <div class="col-3" id="references_persona">
-    	<div class="row">
-  			<div class="col">
-  		      <p class="head_box_person"><b>Luoghi</b></p>
-  			</div>
-		  </div>
-  		<div class="row">
-  			 <div class="col" id="list_places_person">
-  			       
-  			 </div> 
-  		</div> 
-    	
-    </div>
-  </div>
+							<div class="row">
+								<div class="col-9">
+									<div class="row">
+										<div class="col" id="people_map">
+											<div id="map"></div>
+										</div>
+									</div>
+								</div>
 
-  
-</div>
+								<div class="col-3" id="references_persona">
+									<div class="row">
+										<div class="col">
+											<p class="head_box_person"><b>Luoghi</b></p>
+										</div>
+									</div>
+									<div class="row">
+										<div class="col" id="list_places_person"></div>
+									</div>
+								</div>
+							</div> -->
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</main>
 
-  
+	<footer id="footer" class="footer">
+		<div class="container">
+			<div class="row">
+				<div class="col-lg-7 h-100 text-center text-lg-left my-auto">
+					<ul class="list-inline mb-2">
+						<li class="list-inline-item">
+							<a href="#">About</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Contact</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Terms of Use</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Privacy Policy</a>
+						</li>
+					</ul>
+					<p class="small mb-4 mb-lg-0">&copy; RESTORE 2021. All Rights Reserved.</p>
+				</div>
+				<div class="col-lg-5 h-100 text-center my-auto">
+					<ul class="partner-list list-inline mb-0">
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/CNR.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/RegioneToscana.jpg" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/European-Union.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/RepubblicaItaliana.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/POR-FSE-Regione-Toscana.png" />
+							</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="#">
+								<img class="img-logo" src="img/GiovaniSi.png" />
+							</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</footer>
 
-<div id="footer">
-    <footer class="footer bg-dark">
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
-          <ul class="list-inline mb-2">
-            <li class="list-inline-item">
-              <a href="#">About</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Contact</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Terms of Use</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Privacy Policy</a>
-            </li>
-          </ul>
-          <p class="text-muted small mb-4 mb-lg-0">&copy; RESTORE 2021. All Rights Reserved.</p>
-        </div>
-        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
-          <ul class="list-inline mb-0">
-            <li class="list-inline-item mr-3">
-              <a href="#">
-                <img class="img-logo" src="img/CNR.png" />
-              </a>
-            </li>
-            <li class="list-inline-item mr-3">
-              <a href="#">
-                <img class="img-logo" src="img/RegioneToscana.jpg" />
-              </a>
-            </li>
-            <li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/European-Union.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/RepubblicaItaliana.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/POR-FSE-Regione-Toscana.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/GiovaniSi.png" />
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </footer>
-</div>
-<script src="js/OA.js"></script>
-<!-- Bootstrap core JavaScript -->
-  <script src="vendor/jquery/jquery.min.js"></script>
-  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+	<script src="js/OA.js"></script>
+
+	<!-- Bootstrap core JavaScript -->
+	<script src="vendor/jquery/jquery.min.js"></script>
+	<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 </body>
+
 </html>

+ 21 - 16
css/OA.css

@@ -1,37 +1,42 @@
+.oa-title {
+    margin-bottom: 35px;
+}
+
 #time {
-  color: #898989;
-  font-style: italic;
-  font-weight: 400;
+    color: #898989;
+    font-style: italic;
+    font-weight: 400;
+    font-size: 19px;
 }
 
 #artist_name {
     font-style: italic;
     font-weight: 400;
     color: #696969;
+    font-size: 24px;
 }
 
 #nome_oggetto {
     color: #b61924;
     font-weight: 400;
+    font-size: 32px;
+    margin-bottom: 0;
 }
 
-#artist .row {
-  padding-left: 0px;
+#info_OA > .row {
+    margin-bottom: 10px;
 }
 
-#artist .col-9 {
-  padding-left: 0px;
+#info_OA .label {
+  font-weight: 600;
 }
 
-.btn-menu {
-  color: #a7a7a7;
-  text-transform: uppercase;
+#placeholder_luoghi {
+    margin-top: 25px;
 }
 
-.btn-menu:hover {
-  color: #fff;
+.oa-box-info {
+  background-color: white;
+  border-radius: 10px;
+  padding: 25px 20px;
 }
-
-.navbar-nav .active {
-  color: #fff;
-}

+ 0 - 5
css/landing-page.css

@@ -600,11 +600,6 @@ table a:hover {
     overflow: hidden;
     margin-bottom: 35px;
 }
-@media (min-width: 768px) {
-    .results {
-        width: 80%;
-    }
-}
 
 .section_title {
     background-color: #3f4149;

+ 7 - 14
css/place_people.css

@@ -166,23 +166,15 @@ header.masthead {
   width:auto;
 }
 
-.row {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  padding:1%;
-}
-
 #container_luogo .col{
   padding-left:0px;
   padding-right: 0px;
 }
 
-#container_persona .col{
+/* #container_persona .col{
   padding-left:0px;
   padding-right: 0px;
-}
+} */
 
 #map { 
   height: 100%; 
@@ -204,10 +196,10 @@ header.masthead {
 }
 
 #container_persona {
-  width: 80%;
+  /* width: 80%;
   margin-left: auto;
-  margin-right: auto;
-  background-color: #fff;
+  margin-right: auto; */
+  //background-color: #fff;
 }
 
 #info_luogo {
@@ -227,6 +219,7 @@ header.masthead {
   background-color: #b61924;
   color: #fff;
   font-size: 16px;
+  padding: 10px 0;
 }
 
 #nome_luogo{
@@ -482,7 +475,7 @@ text.source {
 }
 
 #list_places_person {
-  overflow: scroll;
+  overflow-y: auto;
   height:55vh;
 }
 

Різницю між файлами не показано, бо вона завелика
+ 0 - 0
css/styles.min.css


+ 2 - 2
index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
@@ -8,7 +8,7 @@
   <meta name="description" content="">
   <meta name="author" content="">
 
-  <title>Restore</title>
+  <title>Restore - smaRt accESs TO digital heRitage and mEmory</title>
 
   <!-- Bootstrap core CSS -->
   <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

+ 4 - 4
js/OA.js

@@ -244,10 +244,10 @@ function handle_Production(json) {
               } else {
                 $("#AUT").css("display", "flex");
                 artist_name += slice[1];
-                artist += "<div class='row'><div class='col-9'>" + 
-                          slice[1] + "</div><div class='col'><a target='_blank' href='" + 
-                          slice[0] + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div><div class='persona col' id='" + 
-                          slice[0] + "'><i class='fa fa-user' style='cursor:pointer'></i></div></div></div>";
+                artist += "<div class='d-flex'><div class='mr-3'>" +
+                          slice[1] + "</div><div class='d-flex ml-auto'><div class='mr-3'><a target='_blank' href='" +
+                          slice[0] + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div><div class='persona' id='" +
+                          slice[0] + "'><i class='fa fa-user' style='cursor:pointer'></i></div></div></div></div>";
               }
           }
         }

+ 2 - 6
ricerca.html

@@ -8,7 +8,7 @@
 	<meta name="description" content="">
 	<meta name="author" content="">
 
-	<title>Restore</title>
+	<title>Restore - Ricerca</title>
 
 	<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 	<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
@@ -124,7 +124,7 @@
 			</div>
 		</section>
 
-		<section class="section-small">
+		<section class="w-content section-small">
 			<div class="container-fluid">
 				<div class="loader" id="loader"></div>
 
@@ -207,13 +207,9 @@
 		</section>
 	</main>
 
-
-
 	<!-- Modal -->
 	<div id="myModal" class="modal"></div>
 
-
-
 	<footer id="footer" class="footer">
 		<div class="container">
 			<div class="row">

+ 8 - 0
scss/_global.scss

@@ -59,3 +59,11 @@ a {
         max-width: 1180px;
     }
 }
+
+@media (min-width: 768px) {
+    .w-content {
+        width: 80%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

Деякі файли не було показано, через те що забагато файлів було змінено