styling: changes to contributor page

rosenpass · Aug 28, 2024 · d358031 · d358031
1 parent b5ec29d
commit d358031
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 108 deletions.
diff --git a/content/en/contributors.html b/content/en/contributors.html
@@ -8,76 +8,31 @@
     weight: 50
 type: community
 --- 
-
-{{< blocks/lead color="secondary" >}}
-<h3 id="contact">Contact</h3>
+{{< blocks/lead color="dark" >}}
+<h3>Contributors & Contact</h3>
 {{< /blocks/lead >}}
-
-{{< blocks/section color="white" >}}
-
-<div class="container">
-	<div class="row justify-content-center">
-		<p class="contact-blerb col-xs-12 col-md-10">We are happy to answer any inquiries via the methods listed below. Please note that we are a free and independent group of developers and researchers, with limited administrative resources. Your time-to-reply may therefore vary.</p>
-	</div>
-	<div class="row contact justify-content-center">
-		<div class="col col-md-5 col-sm-12 text-center">
-				<h4>Please direct email inquiries as follows:</h4>
-
-			<div class="contact-box">
-				<h5>General inquiries</h5>
-
-				<a href="mailto: [email protected]">[email protected]</a>
-
-				<h5>Security issues and bug reports</h5>
-
-				<a href="mailto: [email protected]">[email protected]</a> <a href="/keys/[email protected]">(Open PGP key)</a>
-
-				<h5>Report other problems and ask for support</h5>
-
-				<a href="mailto: [email protected]">[email protected]</a>
-
-				<h5>Press contact and interview requests</h5>
-
-				<p><a href=""mailto: press:rosenpass.eu">[email protected]</a></p>
-			</div>
-		</div>
-
-		<div class="col col-md-5 col-sm-12 text-center">
-			<h4>Socials:</h4>
-			<div class="contact-box">
-					<h5> Follow us on Mastodon:</h5>
-					<p>
-						<a href="https://chaos.social/@rosenpass" target="_blank">
-							<div class="row social-container">
-								<i class="fa-brands fa-mastodon fa-2xl mastodon"></i>
-								<p>The Rosenpass Project is on Mastodon</p>
-							</div>
-						</a> 
-					</p>
-
-				<h5 >We maintain a <a href="https://matrix.org/">Matrix</a> chatroom for informal queries, development and use questions, and as a broad point of contact:</h5>
-				<p>
-					<a href="https://matrix.to/#/#rosenpass:matrix.org">
-						<div class="row social-container">
-							<img src="/icons/Matrix.svg" class="social-svg">
-							<p>Click here to join the Rosenpass room on Matrix</p>
-						</div>
-					</a>
-				</p>
-			</div>	
-		</div>
+{{< blocks/section color="white">}}
+	<img src="/icons/RosenPass-Logo.svg" height="300px"></img>
+	<p class="text-center">Find out more about the Rosenpass team, Rosenpass contributors, our partners, and how to reach us!</p>
+	<div class="rp-buttonrow mx-auto contact-buttons">
+			<a class="btn btn-lg btn-light mr-3 mb-4" href="#team"">
+			<span>Team</span>
+			</a>
+			<a class="btn btn-lg btn-primary mr-3 mb-4" href="#codethanks">
+				<span>Code Contributors</span> 
+			</a>
+			<a class="btn btn-lg btn-secondary mr-3 mb-4" href="#supportfrom">
+			<span>Funding Partners</span>
+			</a>
+			<a class="btn btn-lg btn-dark mr-3 mb-4" href="#contact">
+				<span>Contact</span>
+			</a>
 	</div>
-</div>
-			{{< /blocks/section >}}
-
-
+{{< /blocks/section >}}
 
-{{< blocks/lead color="primary" >}}
+{{< blocks/lead color="light" >}}
 	<h3 id="team">Team</h3>
 {{< /blocks/lead >}}
-
-
-
 <div id="main-contributors" class="row">
 {{< blocks/member 
 	contribution="Protocol Design and Coordination" 
@@ -91,11 +46,7 @@ <h3 id="team">Team</h3>
 {{< blocks/member 
 	contribution="Cryptographic Analysis" 
 	name="Benjamin “blipp” Lipp" 
-	affiliation="Post-doc researcher"
-	institute="MPI-SP"
-	institutetitle="Max Planck Institute for Security and Privacy"
-	instituteweb="mpi-sp.org"
-	mail="[email protected]" 
+	mail="[email protected]" 
 	web="benjaminlipp.de" 
 	github="blipp" 
 	>}}
@@ -137,14 +88,47 @@ <h3 id="team">Team</h3>
 	mail="[email protected]"
 	github="cvengler"
 	>}}
+</div>
 
+{{< blocks/lead color="primary" >}}
+<h3 id="codethanks">Code Contributors</h3>
+{{< /blocks/lead >}}
+{{< blocks/section color="white" >}}
+<p class="text-center codethanks-blerb">
+The Rosenpass tool is only made possible due to the contributions of a wide variety of people, inside and outside the core team, ranging from academic crytographers to Rust enthusiasts. Their wealth of experience, knowledge, and perspectives have driven the code we present today. We are grateful for their committment to a secure, free, open source internet, as well as the contributions of each and every one.
+</p>
+<a href="https://github.com/rosenpass/rosenpass/graphs/contributors" alt="Link to Rosenpass' GitHub contributor page"><img src="/icons/github-mark.svg" class="github-svg"></img></a>
+<div class="row contributors codethanks-list">
+	{{< blocks/contributor github="koraa">}}
+	{{< blocks/contributor github="prabhpreet">}}
+	{{< blocks/contributor github="cvengler">}}
+	{{< blocks/contributor github="aparcar">}}
+	{{< blocks/contributor github="pqcfox">}}
+	{{< blocks/contributor github="TeXhackse">}}
+	{{< blocks/contributor github="Mullana">}}
+	{{< blocks/contributor github="blipp">}}
+	{{< blocks/contributor github="br-olf">}}
+	{{< blocks/contributor github="AliceOrunitia">}}
+	{{< blocks/contributor github="Rixxc">}}
+	{{< blocks/contributor github="pcwizz">}}
+	{{< blocks/contributor github="wahjava">}}
+	{{< blocks/contributor github="ajuvo">}}
+	{{< blocks/contributor github="sevenautumns">}}
+	{{< blocks/contributor github="marek22k">}}
+	{{< blocks/contributor github="mogery">}}
+	{{< blocks/contributor github="TimMellor">}}
+	{{< blocks/contributor github="stv0g">}}
+	{{< blocks/contributor github="lorenzleutgeb">}}
+	{{< blocks/contributor github="ezhil56x">}}
+	{{< blocks/contributor github="AlooDon">}}
+	{{< blocks/contributor github="beau2am">}}
+	{{< blocks/contributor github="rex4539">}}
 </div>
+{{< /blocks/section >}}
 
-{{< blocks/lead color="dark" >}}
+{{< blocks/lead color="secondary" >}}
 <h3 id="supportfrom">With support from</h3>
-
 {{< /blocks/lead >}}
-
 {{< blocks/section color="light" >}}
 <div class="container mobile-display">
 	<div class="text-center row">
@@ -200,42 +184,64 @@ <h3 id="supportfrom">With support from</h3>
 		</div>
 	</div>
 </div>
-
-
 {{< /blocks/section >}}
 
-{{< blocks/lead color="secondary" >}}
-<h3>With thanks to all who have contributed to the codebase</h3>
+{{< blocks/lead color="dark" >}}
+<h3 id="contact">Contact</h3>
 {{< /blocks/lead >}}
+{{< blocks/section color="white" >}}
+<div class="container">
+	<div class="row justify-content-center">
+		<p class="contact-blerb col-xs-12 col-md-10">We are happy to answer any enquiries via the methods listed below. Please note that we are a free and independent group of developers and researchers, with limited administrative resources. We endeavour to respond promptly to all enquiries.</p>
+	</div>
+	<div class="row contact justify-content-center">
+		<div class="col col-md-5 col-sm-12 text-center">
+			<i class="fa-regular fa-envelope fa-2xl align-bottom contact-icon"></i>
+			<h4>Please direct email inquiries as follows:</h4>
+			<div class="contact-box">
+				<h5>General inquiries</h5>
+
+				<a href="mailto: [email protected]">[email protected]</a>
+
+				<h5>Security issues and bug reports</h5>
+
+				<a href="mailto: [email protected]">[email protected]</a> <a href="/keys/[email protected]">(Open PGP key)</a>
+
+				<h5>Report other problems and ask for support</h5>
+
+				<a href="mailto: [email protected]">[email protected]</a>
+
+				<h5>Press contact and interview requests</h5>
+
+				<p><a href=""mailto: press:rosenpass.eu">[email protected]</a></p>
+			</div>
+		</div>
 
-{{< blocks/section color="light" >}}
-
-<div class="row contributors">
-	{{< blocks/contributor github="koraa">}}
-	{{< blocks/contributor github="prabhpreet">}}
-	{{< blocks/contributor github="cvengler">}}
-	{{< blocks/contributor github="aparcar">}}
-	{{< blocks/contributor github="pqcfox">}}
-	{{< blocks/contributor github="TeXhackse">}}
-	{{< blocks/contributor github="Mullana">}}
-	{{< blocks/contributor github="blipp">}}
-	{{< blocks/contributor github="br-olf">}}
-	{{< blocks/contributor github="AliceOrunitia">}}
-	{{< blocks/contributor github="Rixxc">}}
-	{{< blocks/contributor github="pcwizz">}}
-	{{< blocks/contributor github="wahjava">}}
-	{{< blocks/contributor github="ajuvo">}}
-	{{< blocks/contributor github="sevenautumns">}}
-	{{< blocks/contributor github="marek22k">}}
-	{{< blocks/contributor github="mogery">}}
-	{{< blocks/contributor github="TimMellor">}}
-	{{< blocks/contributor github="stv0g">}}
-	{{< blocks/contributor github="lorenzleutgeb">}}
-	{{< blocks/contributor github="ezhil56x">}}
-	{{< blocks/contributor github="AlooDon">}}
-	{{< blocks/contributor github="beau2am">}}
-	{{< blocks/contributor github="rex4539">}}
+		<div class="col col-md-5 col-sm-12 text-center">
+			<i class="fa-regular fa-comments fa-2xl align-bottom contact-icon"></i>
+			<h4>Socials:</h4>
+			<div class="contact-box">
+					<h5> Follow us on Mastodon:</h5>
+					<p>
+						<a href="https://chaos.social/@rosenpass" target="_blank">
+							<div class="row social-container">
+								<i class="fa-brands fa-mastodon fa-2xl mastodon"></i>
+								<p>The Rosenpass Project is on Mastodon</p>
+							</div>
+						</a> 
+					</p>
+
+				<h5 >We maintain a <a href="https://matrix.org/">Matrix</a> chatroom for informal queries, development and use questions, and as a broad point of contact:</h5>
+				<p>
+					<a href="https://matrix.to/#/#rosenpass:matrix.org">
+						<div class="row social-container">
+							<img src="/icons/Matrix.svg" class="social-svg">
+							<p>Click here to join the Rosenpass room on Matrix</p>
+						</div>
+					</a>
+				</p>
+			</div>	
+		</div>
+	</div>
 </div>
-
-
-{{< /blocks/section >}}
+{{< /blocks/section >}}
diff --git a/static/css/rosenpass.css b/static/css/rosenpass.css
@@ -1053,16 +1053,65 @@ background-color: #00000095;
   }
 }
 
+.contact-buttons div .btn {
+  font-size: medium;
+  width: 11rem;
+}
+
+.contact-buttons {
+  display: flex;
+  justify-content: space-evenly;
+  min-width: 60vw;
+  width: auto;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.contact-buttons .btn {
+  flex: 0 0 auto;
+  margin: 0 7px;
+  width: 186px;
+  font-size: 18px;
+}
+
+@media (max-width: 774px) {
+  .contact-buttons {
+    flex-direction: column;
+    justify-content: center;
+  }
+  .contact-buttons .btn {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
 .contact .col {
 background-color: var(--bs-light);
 margin: 0.1rem;
 }
 
+
+.contact-icon {
+  color: #403F4C;
+}
+
+a:has(.github-svg){
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 1.5rem;
+}
+
+.github-svg {
+  width: 100px;
+}
+
 .contact-blerb {
   padding-left: 5vw;
   padding-right: 5vw;
   text-align: center;
   margin-bottom: 1rem;
+  max-width: 1200px;
 }
 
 .contact .contact-box h5 {
@@ -1085,7 +1134,7 @@ margin: 0.1rem;
 
 #main-contributors {
   padding-top: 2rem;
-  padding-bottom: 1rem;
+  padding-bottom: 0rem;
 }
 
 #main-contributors .member {
@@ -1174,6 +1223,22 @@ margin: 0.1rem;
   }
 }
 
+.row:has(.codethanks-blerb) {
+  flex-direction: column;
+}
+
+.codethanks-blerb {
+  max-width: 956px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.row.codethanks-list {
+  padding-right: calc(5vw + 2rem);
+  max-width: 1400px;
+  margin-left: auto;
+  margin-right: auto;
+}
 
 #main-contributors .github-pic {
   width: 120px;