From cac65f4d9419bcf6227f17439269c821c6b3ab29 Mon Sep 17 00:00:00 2001
From: PROTechThor <patrathewhiz@gmail.com>
Date: Thu, 1 Apr 2021 17:57:32 +0100
Subject: [PATCH] Make landing page responsive

---
 _includes/footer.html         |  6 ++--
 _includes/header.html         |  1 +
 assets/css/main.css           | 52 ++++++++++++++++++++++++++++-
 assets/images/gitter-logo.svg | 62 +++++++++++++++++++++++++++++++++++
 index.html                    |  8 ++---
 5 files changed, 121 insertions(+), 8 deletions(-)
 create mode 100644 assets/images/gitter-logo.svg

diff --git a/_includes/footer.html b/_includes/footer.html
index f005078..f944182 100755
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -6,11 +6,11 @@
 							<div class="row collapse-at-2">
 								<section class="6u">
                                 <!-- Icons -->
-                                <h3>Join us!</h3>
+                                <h3 class="join">Join us!</h3>
 					<ul class="icons">
                             <li><a href="https://twitter.com/{{ site.twitterUsername }}" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
 						<li><a href="https://github.com/{{ site.githubUsername }}" class="icon fa-github"><span class="label">GitHub</span></a></li>
-                        <li><a href="https://gitter.im/{{ site.githubUsername }}" class="icon fa-gitter"><span class="label">Gitter</span></a></li>
+                        <li><a href="https://gitter.im/{{ site.githubUsername }}" class="icon fa-gitter"><img class="gitterbutton" src="/assets/images/gitter-logo.svg" alt="Small Gitter logo"/></a></li>
 					</ul>
 								</section>
 							</div>
@@ -26,7 +26,7 @@
 				<!-- Copyright -->
 					<div class="copyright">
 						<ul class="menu">
-                                <li>&copy; MISP project. Software released under approved open source licenses and content released as CC BY-SA 3.0.</li><li><img src="{{ site.baseurl }}/assets/images/en_cef.png" width="50%" height="50%"/></li><li><a href="https://www.misp-standard.org/"><img src="https://www.misp-standard.org/assets/images/misp-standard.png" /></a></li>
+                                <li>&copy; MISP project. Software released under approved open source licenses and content released as CC BY-SA 3.0.</li><li><img class="sponsor-img" src="{{ site.baseurl }}/assets/images/en_cef.png"/></li><li><a href="https://www.misp-standard.org/"><img src="https://www.misp-standard.org/assets/images/misp-standard.png" /></a></li>
 						</ul>
 					</div>
 
diff --git a/_includes/header.html b/_includes/header.html
index 9b2698e..e045104 100755
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -9,6 +9,7 @@
     <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
 		<meta name="keywords" content="MISP, CTI, malware, threat, cyber, intelligence, information exchange, sharing, open source, MISP threat sharing, Malware Information Sharing Platform, Threat Intelligence Platform, TIP, information sharing, threatintel" />
     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}/assets/images/ico/favicon-144.png">
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ site.baseurl }}/assets/images/ico/favicon-114.png">
diff --git a/assets/css/main.css b/assets/css/main.css
index c6ed157..928b2c1 100755
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1965,10 +1965,10 @@
 	}
 
 /* Image */
+
 	p img {
 	  width: 100%;
 	}
-
 	.image {
 		border: 0;
 		display: inline-block;
@@ -2293,6 +2293,18 @@
 			margin: 0;
 		}
 
+	.feature-overview{
+		display:flex;
+		flex-wrap: wrap;
+		position: relative;
+		justify-content: center;
+	}
+
+	.feature-box {
+		position: relative;
+		width: 400px;
+	}
+
 /* Header */
 
 	#header {
@@ -2580,6 +2592,33 @@
 			font-size: 0.9em;
 		}
 
+		#footer .menu {
+			margin-left: -10%;
+		}
+
+		#footer .sponsor-img {
+			width: 50%;
+		}
+
+		#footer .join {
+			text-align: center !important;
+		}
+
+		#footer .icons,  #footer .icons li{
+			padding-left:0;
+			padding: 3px;
+			text-align:center !important;
+		}
+
+		.gitterbutton {
+  			opacity: 0.8;
+  			transition: 0.2s ease;
+		}
+
+		.gitterbutton:hover {
+  			opacity: 1;
+		}
+
 /* Wide */
 
 	@media screen and (max-width: 1680px) {
@@ -2662,6 +2701,10 @@
 				#footer .container {
 					margin-bottom: 1em;
 				}
+				
+				#footer .gitterbutton{
+					width: 16px;
+				}
 
 	}
 
@@ -3088,6 +3131,10 @@
 				width: 30%;
 			}
 
+			.feature-box {
+				width: 300px;
+			}
+
 		/* Banner */
 
 			#banner {
@@ -3116,5 +3163,8 @@
 				padding: 2em 20px;
 				text-align: left;
 			}
+			#footer .sponsor-img {
+				width: 90%;
+			}
 
 	}
diff --git a/assets/images/gitter-logo.svg b/assets/images/gitter-logo.svg
new file mode 100644
index 0000000..3eaf212
--- /dev/null
+++ b/assets/images/gitter-logo.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   aria-hidden="true"
+   focusable="false"
+   data-prefix="fab"
+   data-icon="gitter"
+   class="svg-inline--fa fa-gitter fa-w-12"
+   role="img"
+   viewBox="0 0 22.000002 32"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="gitter-logo.svg"
+   width="22.000002"
+   height="32"
+   inkscape:version="1.0.2 (1.0.2+r75+1)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1533"
+     inkscape:window-height="845"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="1.8009126"
+     inkscape:cx="14.123048"
+     inkscape:cy="39.503108"
+     inkscape:window-x="67"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     fill="currentColor"
+     d="M 3.1500015,20.156251 H 0 V 0 H 3.1500015 Z M 9.4312503,4.7562492 H 6.2812518 V 32 h 3.1499985 z m 6.2875007,0 H 12.568752 V 32 h 3.149999 z m 6.281251,-0.00625 H 18.85 V 20.187494 h 3.150002 z"
+     id="path835"
+     style="fill:#474747;fill-opacity:1;stroke-width:0.0625002" />
+</svg>
diff --git a/index.html b/index.html
index a407957..113e4de 100755
--- a/index.html
+++ b/index.html
@@ -17,22 +17,22 @@ layout: default
 <!-- Highlights -->
 	<section class="wrapper style1">
 		<div class="container">
-			<div class="row double">
-				<section class="4u">
+			<div class="row double feature-overview">
+				<section class="4u feature-box">
 					<div class="box highlight">
 						<i class="icon major fa-share-alt"></i>
 						<h3>The key is Automation</h3>
                         <p>Isn't it sad to have a lot of data and not use it because it's too much work? Thanks to MISP you can store your IOCs in a structured manner, and thus enjoy the correlation, automated exports for IDS, or SIEM, in STIX or OpenIOC and synchronize to other MISPs. You can now leverage the value of your data without effort and in an automated manner. <br/> Check out MISP <a href="features.html">features</a>.</p>
 					</div>
 				</section>
-				<section class="4u">
+				<section class="4u feature-box">
 					<div class="box highlight">
 						<i class="icon major fa-thumbs-up"></i>
 						<h3>Simply Threats</h3>
 						<p>The primary goal of MISP is to be used. This is why simplicity is the driving force behind the project. Storing and especially using information about threats and malware should not be difficult. MISP is there to help you get the maximum out of your data without unmanageable complexity.</p>
 					</div>
 				</section>
-				<section class="4u">
+				<section class="4u feature-box">
 					<div class="box highlight">
 						<i class="icon major fa-users"></i>
 						<h3>By giving you will receive</h3>