Skip to content
Snippets Groups Projects
Verified Commit fe68f575 authored by Jakob Görgen's avatar Jakob Görgen
Browse files

re-styled website

parent 9aa80fd8
No related branches found
No related tags found
No related merge requests found
Pipeline #109621 passed
Hide whitespace changes
Inline Side-by-side
Showing
with 225 additions and 143 deletions
_includes/footer.html
+ 23
− 29
View file @ fe68f575
<footer>
<div class="container" id="bottombar">
<div class="footer-inner">
......@@ -7,35 +6,30 @@
{%- include newsletter.html %}
</div>
<div class="footer-right">
<div class="mpisws-logo">
<a href="https://www.mpi-sws.org">
<img src="/assets/images/mpi-sws-lamp-white.svg"
alt="MPI-SWS Logo"
<div class="mpisws-logo">
<a href="https://www.mpi-sws.org">
<img src="/assets/images/mpi-sws-lamp-white.svg" alt="MPI-SWS Logo"
title="Max Planck Institute for Software Systems">
</a>
<a href="https://www.mpg.de/en">
<img src="/assets/images/logo-mpg-white.svg"
alt="Max Planck Society Logo"
title="Max Planck Society">
</a>
</div>
<nav class="social" title="Social Navigation">
<ul>
<li><a href="https://github.com/simbricks" class="github" title="GitHub"></a></li>
<li><a href="https://twitter.com/sim_bricks" class="twitter" title="Twitter"></a></li>
<li><a href="mailto:info@simbricks.io" class="email" title="Email"></a></li>
<li><a href="https://www.linkedin.com/company/simbricks/" class="linkedin" title="LinkedIn"></a></li>
<li><a href="/join-slack" class="slack" title="Slack"></a></li>
</ul>
</nav>
<div class="copyright">&copy; SimBricks, 2022&ndash;2024 &mdash;
<a href="https://imprint.mpi-klsb.mpg.de/sws/simbricks.io"
class="imprint">Imprint</a>
&mdash;
<a href="https://data-protection.mpi-klsb.mpg.de/sws/simbricks.io"
class="data-protection">Data Protection</a>
</div>
</a>
<a href="https://www.mpg.de/en">
<img src="/assets/images/logo-mpg-white.svg" alt="Max Planck Society Logo" title="Max Planck Society">
</a>
</div>
<nav class="social" title="Social Navigation">
<ul>
<li><a href="https://github.com/simbricks" class="github" title="GitHub"></a></li>
<li><a href="https://twitter.com/sim_bricks" class="twitter" title="Twitter"></a></li>
<li><a href="mailto:info@simbricks.io" class="email" title="Email"></a></li>
<li><a href="https://www.linkedin.com/company/simbricks/" class="linkedin" title="LinkedIn"></a></li>
<li><a href="/join-slack" class="slack" title="Slack"></a></li>
</ul>
</nav>
<div class="copyright">&copy; SimBricks, 2022&ndash;2024 &mdash;
<a href="https://imprint.mpi-klsb.mpg.de/sws/simbricks.io" class="imprint">Imprint</a>
&mdash;
<a href="https://data-protection.mpi-klsb.mpg.de/sws/simbricks.io" class="data-protection">Data Protection</a>
</div>
</div>
</div>
</div>
</footer>
</footer>
\ No newline at end of file
_layouts/about.html
+ 1
− 1
View file @ fe68f575
......@@ -73,7 +73,7 @@ layout: base
</section>
{% endfor %}
<section>
<section class="get-in-touch">
<div class="container">
<h2 class="category">Get in Touch</h2>
{{ content }}
......
_layouts/home.html
+ 40
− 41
View file @ fe68f575
......@@ -5,20 +5,20 @@ layout: base
<article class="home">
<section class="video">
<div class="container">
<div class="col-video">
<video controls src="/assets/videos/simbricks_demo.mp4"
preload="none" width="100%"
poster="/assets/images/simbricks_demo_poster.png">
simbricks_demo.mp4
</video>
</div>
<div class="col-cta">
<a class="button-demo"
href="{{ site.baseurl }}/demo/"
title="Try SimBricks Now">Try SimBricks Now</a>
<div class="card">
<div class="video-div">
<video controls src="/assets/videos/simbricks_demo.mp4" preload="none" width="100%"
poster="/assets/images/simbricks_demo_poster.png">
simbricks_demo.mp4
</video>
</div>
<div class="try-button">
<a href="{{ site.baseurl }}/demo/" title="Try SimBricks Now">Try SimBricks Now</a>
</div>
</div>
</div>
</section>
<section class="advantages">
<div class="container">
<h2>SimBricks Helps You ...</h2>
......@@ -49,21 +49,23 @@ layout: base
</ul>
</div>
</section>
<section class="social-proof">
<div class="container">
<h2>Our Partners</h2>
<ul>
<li><a href="https://www.mpi-sws.org">
<img src="/assets/images/mpi-sws-lamp.svg" alt="MPI-SWS"/>
</a></li>
<img src="/assets/images/mpi-sws-lamp.svg" alt="MPI-SWS" />
</a></li>
<li><a href="https://www.maximize-incubator.com/">
<img src="/assets/images/logo-maximize.png" alt="MAX!mize"/>
</a></li>
<img src="/assets/images/logo-maximize.png" alt="MAX!mize" />
</a></li>
<li><a href="https://www.tum-venture-labs.de/labs/software-ai/">
<img src="/assets/images/tum_vl_logo.png" alt="TUM Venture Labs SW/AI"/>
</a></li>
<img src="/assets/images/tum_vl_logo.png" alt="TUM Venture Labs SW/AI" />
</a></li>
<li><a href="https://saarland-informatics-campus.de/">
<img src="/assets/images/logo-sic.png" alt="Saarland Informatics Campus"/>
</a></li>
<img src="/assets/images/logo-sic.png" alt="Saarland Informatics Campus" />
</a></li>
</ul>
</div>
</section>
......@@ -72,40 +74,37 @@ layout: base
<div class="container">
<h2>Easy Virtual Prototyping with Modular Composition</h2>
<div class="twocol">
<div class="showcase">
<img src="/assets/images/overview_sys.svg" class="sys"
alt="Example of a heterogeneous system configuration with three hosts,
<div class="showcase">
<img src="/assets/images/overview_sys.svg" class="sys" alt="Example of a heterogeneous system configuration with three hosts,
a server with the DPU being built and an SSD and two clients with
regular NICs. All hosts are connected to a network of just one
switch."/>
<h3>&#x21D3; from System to Virtual Prototype Simulation &#x21D3;</h3>
<img src="/assets/images/overview_sim.svg"
alt="Example of a SimBricks simulation configuration with three
switch." />
<h3>&#x21D3; from System to Virtual Prototype Simulation &#x21D3;</h3>
<img src="/assets/images/overview_sim.svg" alt="Example of a SimBricks simulation configuration with three
simulated hosts, a server and two clients. We simulate the server in
gem5 and connect to an SSD simulated through FEMU and a Corundum FPGA
NIC simulated through Verilator. The two clients are simulated in QEMU
and connect to a PCIe behavioral NIC model. All three hosts are
connected through a network simulated in ns-3.">
</div>
<div class="features">
<ul>
<li><span class="feature feature-fullsystem">Full-System</span></li>
<li><span class="feature feature-fast">Fast</span></li>
<li><span class="feature feature-scalable">Scalable</span></li>
<li><span class="feature feature-extensible">Extensible</span></li>
<li><span class="feature feature-easy">Easy</span></li>
</ul>
</div>
<div class="features">
<ul>
<li><span class="feature feature-fullsystem">Full-System</span></li>
<li><span class="feature feature-fast">Fast</span></li>
<li><span class="feature feature-scalable">Scalable</span></li>
<li><span class="feature feature-extensible">Extensible</span></li>
<li><span class="feature feature-easy">Easy</span></li>
</ul>
<div class="learnmore">
<a href="/technology.html">Learn More </a>
<div class="learnmore">
<a href="/technology.html">Learn More </a>
</div>
</div>
</div>
</div>
<div class="cta">
<a class="button-book"
href="{{ site.baseurl }}/booking/co-founder"
title="Talk to a Co-Founder">Talk to a Co-Founder</a>
<a class="button-book" href="{{ site.baseurl }}/booking/co-founder" title="Talk to a Co-Founder">Talk to a
Co-Founder</a>
</div>
</div>
</section>
......
_layouts/technology.html
+ 1
− 1
View file @ fe68f575
......@@ -12,7 +12,7 @@ layout: base
{{content}}
</div>
</section>
<section>
<section class="coder">
<div class="container">
<div class="coder-card">
<img src="/assets/images/coder.png" alt="Coder-Example-Image" style="width:100%">
......
_sass/about.scss
+ 4
− 0
View file @ fe68f575
......@@ -70,4 +70,8 @@ article.about {
}
}
}
section.get-in-touch {
@include sec-grey;
}
}
\ No newline at end of file
_sass/base-design.scss
+ 47
− 4
View file @ fe68f575
$col-os-grey: hsl(90, 1%, 32%) !default;
$col-os-grey_l1: hsl(0, 0%, 90%) !default;
$col-os-grey_l2: hsl(0, 0%, 98%) !default;
$col-os-green: hsl(58, 50%, 51%) !default;
$col-os-orange: hsl(23, 85%, 62%) !default;
$col-os-purple: hsl(290, 30%, 44%) !default;
......@@ -79,6 +81,11 @@ a, a:hover, a:active {
color: white;
}
@mixin sec-green-l1 {
background: linear-gradient(to bottom, $col-sb-gre, $col-sb-gre_l3);
color: white;
}
@mixin sec-white {
background-color: white;
}
......@@ -88,6 +95,26 @@ a, a:hover, a:active {
color: white;
}
@mixin sec-grey-l2 {
background-color: $col-os-grey_l2;
color: white;
}
@mixin sec-grey-l1 {
background-color: $col-os-grey_l1;
color: black;
}
@mixin sec-grey-l1-gradient {
background: linear-gradient(to bottom, white, $col-os-grey_l1);
color: black;
}
@mixin sec-grey-l1-gradient-inverse {
background: linear-gradient(to top, white, $col-os-grey_l1);
color: black;
}
@mixin sec-orange {
background-color: $col-sb-org;
color: white;
......@@ -99,10 +126,25 @@ a, a:hover, a:active {
}
@mixin sec-bluegradient {
background: linear-gradient(to right, $col-sb-blu, $col-sb-blu-d1);
background: linear-gradient(to bottom, $col-sb-blu, $col-sb-blu-d1);
color: white;
}
@mixin sec-bluegradient-inverse {
background: linear-gradient(to top, $col-sb-blu, $col-sb-blu-d1);
color: white;
}
@mixin sec-blue-gradient {
background: linear-gradient(to bottom, white, $col-sb-blu-d1);
color: black;
}
@mixin sec-blue-gradient-inverse {
background: linear-gradient(to top, white, $col-sb-blu);
color: black;
}
section {
@include sec-white;
}
......@@ -183,7 +225,7 @@ nav#navbar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
a {
border-radius: .5em;
border-radius: $border-radius;
padding: 4px 8px;
}
}
......@@ -195,7 +237,6 @@ nav#navbar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 1px $col-sb-org solid;
border-radius: .5em;
background-color: white;
color: $col-sb-org-l1;
}
......@@ -301,6 +342,7 @@ footer {
section.faq {
background-color: $col-os-grey_l2;
ul {
list-style: none;
......@@ -309,7 +351,8 @@ section.faq {
div {
padding: 1rem;
border: 2px $col-sb-org solid;
border-radius: 1em;
border-radius: $border-radius;
background-color: white;
h3 {
font-size: 1.2rem;
......
_sass/base-layout.scss
+ 3
− 2
View file @ fe68f575
$width: 850px;
$max-page-width: 1200px;
$width: 950px;
$max-page-width: 100%; //1400px;
section, header, footer {
max-width: $max-page-width;
......@@ -20,6 +20,7 @@ nav#navbar {
div.navcontainer {
width: auto;
max-width: 1200px;
margin: 0px auto;
height: 3em;
a.brand-logo {
......
_sass/blog.scss
+ 13
− 2
View file @ fe68f575
......@@ -5,7 +5,7 @@ article.blog {
padding: 10px;
min-width: 388px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
background-color: hsl(0, 0%, 99%);
div.people {
position: absolute;
......@@ -30,6 +30,12 @@ article.blog {
margin-bottom: 1rem;
margin-right: 45px;
min-height: 30px;
a {
color: $col-sb-org-l1;
}
a:hover {
color: $col-sb-org;
}
}
p {
......@@ -40,10 +46,13 @@ article.blog {
div.link {
a {
color: $col-sb-org;
color: $col-sb-org-l1;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: $col-sb-org;
}
}
}
......@@ -68,6 +77,7 @@ article.blog {
div.post-block {
flex: 0 1 48%;
margin: 0 auto;
border-radius: $border-radius;
div.description {
height: 130px;
......@@ -107,6 +117,7 @@ article.blog-post {
div.call-to-action {
margin-top: 2rem;
border-radius: $border-radius;
a {
font-family: $font-title;
font-weight: normal;
......
_sass/home.scss
+ 62
− 43
View file @ fe68f575
......@@ -23,39 +23,37 @@ body.home {
@include sec-white;
div.container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
div {
min-width: 34%;
}
div.col-video {
flex: 2;
}
div.col-cta {
display: flex;
align-items: center;
flex: 0.4;
padding-top: 1rem;
padding-bottom: 1rem;
a.button-demo {
display: block;
text-align: center;
font-size: 1.2rem;
font-weight: normal;
font-family: $font-title;
background-color: $col-sb-org-l1;
border-radius: 1em;
color: white;
padding: 1rem;
width: 100%;
.card {
border-radius: $border-radius;
transition: 0.3s;
width: 80%;
margin: auto;
.video-div {
video {
border-radius: 8px;
}
}
a.button-demo:hover {
background-color: $col-sb-org;
.try-button {
margin: auto;
width: fit-content;
padding-top: 20px;
a {
display: inline-block;
padding: 10px 10px;
background-color: $col-sb-org-l1;
color: white;
text-align: center;
display: inline-block;
font-size: 3vh;
margin: 4px 2px;
border-radius: $border-radius;
}
a:hover {
background-color: $col-sb-org;
}
}
}
......@@ -85,7 +83,7 @@ body.home {
margin-top: 1rem;
$gap: 35px;
$block-size: math.div(($width - $gap), 2);
$block-size: calc((#{$width} - #{$gap}) / 2);
gap: $gap;
li {
......@@ -93,6 +91,7 @@ body.home {
min-height: calc(0.9 * $block-size);
background-color: $col-sb-blu;
border-radius: $border-radius;
background-image: url('/assets/images/bricks_outlines.svg');
background-size: 205%;
......@@ -135,25 +134,34 @@ body.home {
}
section.social-proof {
@include sec-green-l1;
h2 {
font-size: 3rem;
}
ul {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
gap: 1rem 2.5rem;
gap: 1rem 3.5rem;
flex-wrap: wrap;
padding: 0px;
margin: 0px;
width: 100%;
li {
display: flex;
align-content: center;
height: 4rem;
a {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
img {
max-height: 3rem;
max-width: 14rem;
......@@ -164,6 +172,7 @@ body.home {
}
section.product {
div.twocol {
display: flex;
flex-direction: row;
......@@ -205,7 +214,8 @@ body.home {
text-align: center;
}
span.feature::before, span.feature::after {
span.feature::before,
span.feature::after {
content: "";
text-align: center;
font-family: $font-fa;
......@@ -218,28 +228,34 @@ body.home {
span.feature::before {
padding-right: 1rem;
}
span.feature::after {
padding-left: 1rem;
}
span.feature-fullsystem::before, span.feature-fullsystem::after {
span.feature-fullsystem::before,
span.feature-fullsystem::after {
content: "\f6ff";
}
span.feature-scalable::before, span.feature-scalable::after {
span.feature-scalable::before,
span.feature-scalable::after {
content: "\e4b7";
}
span.feature-fast::before, span.feature-fast::after {
span.feature-fast::before,
span.feature-fast::after {
//content: "\f625"; spedometer
content: "\f135";
}
span.feature-extensible::before, span.feature-extensible::after {
span.feature-extensible::before,
span.feature-extensible::after {
content: "\f12e";
}
span.feature-easy::before, span.feature-easy::after {
span.feature-easy::before,
span.feature-easy::after {
content: "\f5dc";
}
}
......@@ -294,7 +310,7 @@ body.home {
}
button.slick-disabled {
color: $col-os-grey;
color: black; // $col-os-grey;
cursor: default;
}
......@@ -308,10 +324,12 @@ body.home {
div.news-item {
position: relative;
margin: 0rem 0.25rem;
padding: 0.75rem;
margin: 0rem 0.5rem;
padding: 1rem;
border: 1px #ccc solid;
border: 1px #e9e7e7 solid;
background-color: white;
border-radius: $border-radius;
height: 16rem;
div.date {
......@@ -345,6 +363,7 @@ body.home {
justify-content: center;
}
}
section.product {
div.twocol {
flex-direction: column;
......
_sass/research.scss
+ 1
− 0
View file @ fe68f575
......@@ -5,6 +5,7 @@ article.research {
padding: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: $border-radius;
div.people {
position: absolute;
......
_sass/technology.scss
+ 30
− 20
View file @ fe68f575
......@@ -23,6 +23,10 @@ body.technology {
flex-wrap: wrap;
gap: 2rem;
video {
border-radius: $border-radius;
}
div {
min-width: 34%;
}
......@@ -51,7 +55,7 @@ body.technology {
}
section.features {
@include sec-green;
@include sec-green-l1;
ul {
list-style: none;
......@@ -122,7 +126,8 @@ body.technology {
margin-top: 1rem;
$gap: 35px;
$block-size: math.div(($width - $gap), 2);
// $block-size: math.div(($width - $gap), 2);
$block-size: calc((#{$width} - #{$gap}) / 2);
gap: $gap;
li {
......@@ -130,6 +135,7 @@ body.technology {
min-height: calc(0.9 * $block-size);
background-color: $col-sb-blu;
border-radius: $border-radius;
background-image: url('/assets/images/bricks_outlines.svg');
background-size: 205%;
......@@ -268,24 +274,28 @@ body.technology {
}
}
.coder-card {
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
transition: 0.3s;
img {
border-radius: 8px;
}
div {
padding: 20px;
}
a {
color: black;
section.coder {
@include sec-grey-l1-gradient;
.coder-card {
border-radius: $border-radius;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
transition: 0.3s;
img {
border-radius: 8px;
}
div {
padding: 20px;
}
a {
color: black;
}
a:hover {
text-decoration: underline;
}
}
a:hover {
text-decoration: underline;
.coder-card:hover {
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.1);
}
}
.coder-card:hover {
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.1);
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment