pretty close to style, just looks bad on phone

princeton-sns · Oct 20, 2018 · 0083c1e · 0083c1e
1 parent 793f581
commit 0083c1e
Show file tree

Hide file tree

Showing 9 changed files with 558 additions and 40 deletions.
diff --git a/_data/projects.yml b/_data/projects.yml
@@ -15,7 +15,8 @@
         - Ittai Abraham
         - Dahlia Malkhi
       venue: USENIX Annual Technical Conference 2016 (ATC ’16) Denver, Colorado, June 2016
-      pdf: http://sns.cs.princeton.edu/wp-content/uploads/2016/10/atc2016.pdf
+      paper: http://sns.cs.princeton.edu/wp-content/uploads/2016/10/atc2016.pdf
+      presentation: https://www.usenix.org/conference/atc16/technical-sessions/presentation/tai
       year: 2016
       award:
         - Best Paper Award
@@ -28,7 +29,7 @@
         - Aaron Blankenstein
         - Michael J. Freedman
       venue: In Proc. IEEE Security and Privacy (SP ’14), San Jose, CA, May 2014.
-      pdf: http://sns.cs.princeton.edu/docs/passe-sp14-final.pdf
+      paper: http://sns.cs.princeton.edu/docs/passe-sp14-final.pdf
       year: 2014
   people:
     - mfreed

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -19,15 +19,48 @@
 <header>
   <h1>{{ site.title }}</h1>
   <h2>{{ site.subtitle }}</h2>
-  <nav>
-    <ol>
-      <li><a href="/">Home</a></li>
-      <li><a href="/projects">Projects</a></li>
-      <li><a href="/people">People</a></li>
-      <li><a href="/publications">Publications</a></li>
-    </ol>
-  </nav>
 </header>
+<nav>
+<ol>
+<li><a href="/">Home</a></li>
+<li><a href="/projects">Projects</a></li>
+<li><a href="/people">People</a></li>
+<li><a href="/publications">Publications</a></li>
+</ol>
+</nav>
 {{ content }}
+<aside>
+  <div>
+    <h3>People</h3>
+  {%- assign leaders = site.data.people | where: "type", "leader" | where: "active", "true" -%}
+  {%- assign phds = site.data.people | where: "type", "phd" | where: "active", "true" -%}
+    <ul>
+    {%- for person in leaders -%}
+    <li><a href="{{person.url}}">{{person.name}} (Group Leader)</a></li>
+    {% endfor %}
+    {%- for person in phds -%}
+    <li><a href="{{person.url}}">{{person.name}} (PhD)</a></li>
+    {% endfor %}
+    </ul>
+  </div>
+  <div>
+    <h3>Updates</h3>
+    <a href="#">My Tweets</a>
+  </div>
+</aside>
+<footer>
+  <div>
+    <h3>Princeton</h3>
+    <p>
+      <a href="https://wiki.sns.cs.princeton.edu" title="Private Group Wiki">SNS Group Wiki</a>
+    </p>
+    <p>
+      <a href="http://www.cs.princeton.edu/">Princeton Computer Science</a>
+    </p>
+    <p>
+      <a href="http://www.princeton.edu/">Princeton University</a>
+    </p>
+  </div>
+</footer>
 </body>
 </html>
diff --git a/_layouts/project.html b/_layouts/project.html
@@ -2,21 +2,27 @@
 layout: default
 ---
 {%- assign project = site.data.projects | where: "id", page.project_id | first -%}
-<article>
+<article class="project">
   <h1>{{ page.title | escape }}</h1>
   {{ content }}
   <h2>Publications</h2>
-  <ol>
+  <ul class="publications">
   {%- for publication in project.publications -%}
     <li>
       <h3>{{ publication.title }}</h3>
-      <p>{{ publication.people | array_to_sentence_string }}. {{ publication.venue }}</p>
-      {%- if publication.pdf -%}
-      <p>Paper: <a href="{{ publication.pdf }}">PDF</a></p>
+      <p class="authors">{{ publication.people | array_to_sentence_string }}.</p>
+      <p class="venue">{{ publication.venue }}</p>
+      <p>
+      {%- if publication.paper -%}
+        [<a href="{{ publication.presentation }}">paper</a>]
       {%- endif -%}
+      {%- if publication.presentation -%}
+        [<a href="{{ publication.presentation }}">presentation</a>]
+      {%- endif -%}
+      </p>
     </li>
   {% endfor %}
-  </ol>
+  </ul>
   <h2>People</h2>
   <ul>
   {%- for p in project.people -%}

diff --git a/_sass/base.scss b/_sass/base.scss
@@ -5,33 +5,206 @@ html {
 body {
   font-family: $body-font;
   line-height: 1.5;
+  display: grid;
+  @media screen and (max-width: $desktop) {
+    grid-template-columns: auto ($tablet - 160px) auto;
+    grid-template-areas:
+      "header header header"
+      "nav nav nav"
+      ". content ."
+      ". people ."
+      "footer footer footer";
+  }
+  @media screen and (min-width: $desktop) {
+    grid-template-columns: auto ($tablet - 160px) 240px auto;
+    grid-column-gap: 3em;
+    grid-template-areas:
+      "header header header header"
+      "nav nav nav nav"
+      ". content people ."
+      "footer footer footer footer";
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: $heading-font;
+  margin: 0;
+}
+
+a {
+  color: #bc360a;
+  text-decoration: none;
+  &:hover, &:active, &:focus {
+    color: #ea9629;
+    text-decoration: underline;
+  }
+}
+
+
+body > aside {
+  grid-area: people;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  font-size: 0.9em;
+
+  > div {
+    background-color: #f7f5e7;
+    padding: 1em;
+    margin-bottom: 1em;
+
+    h3 {
+      padding: 0;
+      margin: 0;
+      margin-bottom: 0.5em;
+      font-weight: 300;
+      font-style: italic;
+      font-family: $body-font;
+      font-size: 1.5em;
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      li {
+        padding: 0.35em 0;
+      }
+    }
+  }
+}
+
+body > footer {
+  grid-area: footer;
+  background-color: #220e10;
+  > div {
+    padding: 1em 3em;
+    @media screen and (min-width: $desktop) {
+      width: $desktop;
+      margin: 0 auto;
+    }
+
+    h3 {
+      color: #fff;
+      font-size: 1.3em;
+      font-weight: 300;
+      font-family: $body-font;
+      font-style: italic;
+    }
+  }
 }
 
 body > header {
-  padding-left: 1em;
-  padding-right: 1em;
+  display: grid;
+  grid-area: header;
+  @media screen and (max-width: $desktop) {
+    grid-template-columns: auto $tablet auto;
+  }
+  @media screen and (min-width: $desktop) {
+    grid-template-columns: auto $desktop auto;
+  }
+  grid-row-gap: 3.75em;
+  grid-template-areas:
+    ". masthead ."
+    ". tagline  .";
 
   background: url(/assets/img/masthead.png) no-repeat scroll top;
-  background-size: $tablet auto;
+  background-size: auto 100%;
+  padding-top: 3.75em;
 
   h1 {
+    grid-area: masthead;
     font-family: $masthead-font;
-  }
-
-  h1 {
     margin: 0;
-    font-size: 1.9em;
+    font-size: 3.75em;
   }
 
   h2 {
+    grid-area: tagline;
     margin: 0;
     font-family: $body-font;
-    font-size: 1.3em;
+    font-size: 1.5em;
     font-weight: 300;
     font-style: italic;
   }
 }
+
+nav {
+  grid-area: nav;
+  display: grid;
+  @media screen and (max-width: $desktop) {
+    grid-template-columns: auto $tablet auto;
+  }
+  @media screen and (min-width: $desktop) {
+    grid-template-columns: auto $desktop auto;
+  }
+  grid-template-areas: ". items .";
+  margin: 0;
+  background-color: #f7f5e7;
+  ol {
+    grid-area: items;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    li {
+      display: inline-block;
+      text-align: center;
+      a {
+        display: inline-block;
+        color: #141412;
+        text-decoration: none;
+        font-size: 1em;
+        padding: 1em 1.45em 1em 0;
+
+        &:hover, &:hover {
+          background-color: #220e10;
+          color: white;
+        }
+      }
+    }
+  }
+}
+
+body > article {
+  grid-area: content;
+  padding: 1em 0;
+
+  h1 {
+    font-size: 3em;
+    font-weight: normal;
+  }
+
+  h2 {
+    font-size: 1.4em;
+  }
+
+  img.alignleft {
+    width: 96px;
+    height: 96px;
+    float: left;
+    margin: 5px 20px 5px 0;
+  }
+}
+
+ul.publications {
+  list-style-type: square;
+}
+
+ul.publications, ol.publications {
+  h3 {
+    color: red;
+    font-size: 1em;
+    font-weight: normal;
+    font-family: inherit;
+    padding: 0;
+    margin: 0;
+  }
+  p {
+    padding: 0;
+    margin: 0;
+
+    &.venue {
+      font-style: italic;
+    }
+  }
+}
+