thumb

projects/postit-identity/postit-identity.md

@@ -33,19 +33,19 @@ We designed 8 types of post-it: from text and image post-it to complex card layo
 
 The basic type of post-it was the text one. We went with a super big font-size and an unexpected alignment. After a certain amount of characters the font-size is set to shrink a bit for a small text version.
 
-![Text](/soupboat/~kamo/static/img/post-it/text.jpg)
+
+![Text](post-it/text.jpg)
 _From What is a loot box?_
 
-![Text Small](/soupboat/~kamo/static/img/post-it/small-text.jpg)
+![Text Small](post-it/small-text.jpg)
 _From Life Hacks!_
 
 
 
 ### Dialogue
-
 It can display text in the four corners of the postit. Used for the NIM dialogue and some single word sentence in What is a loot box?
 
-![Dialogue](/soupboat/~kamo/static/img/post-it/dialogue.jpg)
+![Dialogue](post-it/dialogue.jpg)
 _Dialogue_
 
 
@@ -54,10 +54,10 @@ _Dialogue_
 
 Definitions and cells are the main modules for the Crossword Imaginary Grid Game from Emma. Each cell occupies a position in a grid, and is used to build the crossword structure. The definitions indicate a starting point and some hints to guess the word.
 
-![Image](/soupboat/~kamo/static/img/post-it/definition.jpg)
+![Image](post-it/definition.jpg)
 _Definition_
 
-![Picutre](/soupboat/~kamo/static/img/post-it/cell.jpg)
+![Picutre](post-it/cell.jpg)
 _Cell_
 
 
@@ -67,7 +67,7 @@ _Cell_
 
 Card designed starting from the layout Miriam prepared for her version of the game Quartet.
 
-![Card](/soupboat/~kamo/static/img/post-it/card.jpg)
+![Card](post-it/card.jpg)
 _Card_
 
 
@@ -76,10 +76,10 @@ _Card_
 
 For images we decided on a full page approach. We have two post-it: image is for normal images, while picture is for graphics that folllow the pubblication main color. Both can display a caption in overlay.
 
-![Image](/soupboat/~kamo/static/img/post-it/image.jpg)
+![Image](post-it/image.jpg)
 _From Katamari Fanfic_
 
-![Picutre](/soupboat/~kamo/static/img/post-it/picture.jpg)
+![Picutre](post-it/picture.jpg)
 _From Xquisite Branch_
 
 
@@ -88,7 +88,7 @@ _From Xquisite Branch_
 
 For QR code we choose to be as messy as possible. QR carries a specific visual language. We tried to force it into something else by cloning each code in repetition, with a glitchy result.
 
-![NIM Fanfic](/soupboat/~kamo/static/img/post-it/qr.jpg)
+![NIM Fanfic](post-it/qr.jpg)
 _QR codes_
 
 
@@ -98,16 +98,16 @@ _QR codes_
 
 We played a lot with the contributions' cover. The starting point was always the title of the special issue in the bitsi font. On top of that we designed some sketches related to the contents.
 
-![Katamari](/soupboat/~kamo/static/img/post-it/orange-katamari.svg)
+![Katamari](post-it/orange-katamari.svg)
 _Katamari Fanfic_
 
-![unfinished thoughts](/soupboat/~kamo/static/img/post-it/orange-unfinished-thoughts.svg)
+![unfinished thoughts](post-it/orange-unfinished-thoughts.svg)
 _Unfinished Thoughts_
 
-![NIM Fanfic](/soupboat/~kamo/static/img/post-it/orange-nim.svg)
+![NIM Fanfic](post-it/orange-nim.svg)
 _NIM Fanfic_
 
-![Crosswords](/soupboat/~kamo/static/img/post-it/orange-crossword.svg)
+![Crosswords](post-it/orange-crossword.svg)
 _Imaginary Crossword Grig Game_
 
 
@@ -115,5 +115,5 @@ _Imaginary Crossword Grig Game_
 
 For the index we used the combination of normal and bitsi font. This approach was reused then in the SI17 home page.
 
-![Index](/soupboat/~kamo/static/img/post-it/index.jpg)
+![Index](post-it/index.jpg)
 _Index_

static/css/home2.css

@@ -0,0 +1,51 @@
+html,
+body {
+  margin: 0;
+  box-sizing: border-box;
+  font-family: sans-serif;
+  font-size: 18px;
+  background-color: #fff;
+}
+
+.homepage-intro {
+  margin: var(--app-margin);
+}
+
+tr {
+  position: relative;
+  vertical-align: top;
+}
+
+.thumb { 
+  width: 128px;
+  height: 128px;
+}
+
+.thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+}
+
+.title--name {
+  margin: 0;
+}
+
+.title a:after {
+  content: "";
+}
+
+.title--description {
+  opacity: 0.4;
+}
+
+main.content {
+    max-width: 1280px;
+    margin-inline: auto;
+}
+
+
+
+@media (max-width: 991.98px) {
+}

templates/home2.html

@@ -29,7 +29,12 @@
         <table id="table">
                 {% for project in projects %}
                 <tr>
-                    <td><img class="thumb" src="projects/{{project.slug}}/thumb_{{project.cover}}" alt=""></td>
+
+                    <td class="thumb">
+                        {% if project.cover %}
+                            <img src="projects/{{project.slug}}/thumb_{{project.cover}}" alt="">
+                        {% endif %}
+                    </td>
                     <td class="title">
                         <h3 class="title--name">
                             <a href="projects/{{project.slug}}/" class="stretched-link">

templates/project.html

@@ -65,7 +65,7 @@
         {% block cover %}
         {% if cover and cover_alt %}
         <figure class="header--cover">
-            <img src="{{url_for('static', filename='img/' + cover)}}" alt="{{cover_alt}}" />
+            <img src="{{cover}}" alt="{{cover_alt}}" />
         </figure>
         {% endif %}
         {% endblock %}