Browse Source

Styling finished; different poster font sizes

Jakub Valenta 3 years ago
parent
commit
d25c5ab89a
13 changed files with 123 additions and 119 deletions
  1. 2 2
      data.yml
  2. 82 82
      jekyll/css/main.scss
  3. 11 10
      jekyll/index.html
  4. 17 23
      strategies-html
  5. 1 0
      texts/01.yml
  6. 1 0
      texts/02.yml
  7. 1 0
      texts/03.yml
  8. 2 0
      texts/04.yml
  9. 2 2
      texts/05.yml
  10. 1 0
      texts/06.yml
  11. 1 0
      texts/07.yml
  12. 1 0
      texts/08.yml
  13. 1 0
      texts/09.yml

+ 2 - 2
data.yml

@@ -8,8 +8,8 @@ baseurl:
   cs: "/strategie"
   en: "/strategies"
 name:
-  cs: Strategie pro nezačlenění. K vašemu svobodnému užití.
-  en: Strategie pro nezačlenění. K vašemu svobodnému užití.
+  cs: "Strategie pro nezačlenění. K~vašemu svobodnému užití."
+  en: "Strategie pro nezačlenění. K~vašemu svobodnému užití."
 author: Jakub Valenta
 dateCreated: 2015
 dateCreatedFormatted: '2015'

+ 82 - 82
jekyll/css/main.scss

@@ -6,14 +6,18 @@
 
 $color_black: #000;
 $color_gray: #999;
-$color_light: #ddd;
+$color_light: #e9e9e9;
 $color_lighter: #f0f0f0;
 $color_white: #fff;
 
+$base_font_size: 12;
+
+$size_factor: 2.2;
+
 body {
-    font-family: 'robotolight', 'Arial', 'Helvetica', sans-serif;
-    line-height: 1.2;
     margin: 0;
+    font-size: 10/$base_font_size*100%;
+    font-family: 'robotolight', 'Arial', 'Helvetica', sans-serif;
     background: $color_lighter;
 }
 
@@ -27,6 +31,17 @@ li {
     padding: 0;
 }
 
+a {
+    color: $color_black;
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+        text-decoration: underline;
+    }
+}
+
 .sr-only {
     position: absolute;
     left: -10000px;
@@ -36,105 +51,90 @@ li {
     overflow: hidden;
 }
 
-.text {
-    font-family: serif;
-    padding: 4em;
-    max-width: 20em;
+h1,
+h2,
+h3 {
+    font-family: 'robotomedium';
+    font-weight: normal;
 }
 
-.posters {
+main {
+    width: 2 * ($size_factor * 21 + 4em);
+    margin: 3em auto;
     @extend %clearfix;
-    font-size: 80%;
 }
+
 .poster {
     float: left;
-    width: 21 * 1.5em;
-    height: 29.7 * 1.5em;
-    padding: 2em;
+    position: relative;
+    width: $size_factor * 21em;
+    height: $size_factor * 29.7em;
     margin: 2em;
+    padding: $size_factor * 4em;
+    padding-bottom: $size_factor * 2.5em;
+    padding: 8em;
+    box-sizing: border-box;
     background: $color_white;
+    box-shadow: 0.25em 0.25em 0.5em $color_light;
 
-    h2,
-    h3 {
-        font-family: 'robotomedium';
-        font-weight: normal;
-    }
-}
-
-.nav {
-    padding: 3em 0;
-    font-size: 80%;
-    text-align: center;
-
-    li {
-        display: inline;
-        padding: 0 0.5em;
-        text-transform: lowercase;
-        list-style-type: none;
-    }
-    a:hover,
-    a:focus,
-    a:active {
-        text-decoration: none;
+    h2 {
+        font-size: 100%;
+        position: absolute;
+        left: 8em;
+        bottom: 7em;
     }
-}
-
-.archive {
-    .poll {
+    h3 {
+        line-height: 1.6;
+        min-height: 38%;
+        padding-top: 8em;
         box-sizing: border-box;
     }
-}
-
-@media screen and (min-width: 1441px) {
-    .archive {
-        .poll {
-            width: 20%;
-        }
-        .poll:nth-child(5n+1) {
-            clear: left;
-        }
+    p {
+        padding-bottom: 0.7em;
     }
 }
-@media screen and (min-width: 1025px) and (max-width: 1440px) {
-    .archive {
-        .poll {
-            width: 25%;
-        }
-        .poll:nth-child(4n+1) {
-            clear: left;
-        }
-    }
+.scriptsize p {
+    font-size: 8/$base_font_size*100%;
+    padding-bottom: 0.5em;
 }
-@media screen and (min-width: 641px) and  (max-width: 1024px) {
-    .archive {
-        .poll {
-            width: 33.3%;
-        }
-        .poll:nth-child(3n+1) {
-            clear: left;
-        }
-    }
+.tiny p {
+    font-size: 6/$base_font_size*100%;
+    line-height: 1.1;
+    padding-bottom: 0.1em;
 }
-@media screen and (min-width: 481px) and  (max-width: 640px) {
-    .archive {
-        .poll {
-            width: 50%;
-        }
-        .poll:nth-child(2n+1) {
-            clear: left;
+.tiny div {
+    column-count: 2;
+    -moz-column-count:2;
+    -webkit-column-count: 2;
+    column-gap: 4em;
+    -moz-column-gap: 4em;
+    -webkit-column-gap: 4em;
+}
+
+.text {
+    background: transparent;
+    padding: 0;
+    box-shadow: none;
+
+    h1 {
+        width: 15em;
+        font-size: 100%;
+
+        &:after {
+            content: '-';
+            display: block;
         }
     }
-    .current .poll {
-        font-size: 150%;
+    p {
+        padding: 0;
     }
 }
-@media screen and (max-width: 480px) {
-    .archive {
-        .poll {
-            width: 100%;
-        }
+
+@media screen and (max-width: 1340px) {
+    main {
+        width: 1 * ($size_factor * 21 + 4em);
     }
-    .current .poll {
-        font-size: 110%;
+    .text {
+        height: 10em;
     }
 }

+ 11 - 10
jekyll/index.html

@@ -2,17 +2,18 @@
 layout: default
 ---
 <main itemscope itemtype="http://schema.org/VisualArtwork">
-  <div class="text">
+  <div class="poster text">
     {% include header.html %}
   </div>
-
-  <div class="posters">
-    {% for post in site.posts %}
-    <div class="poster">
-      <h2>{{ post.title | smartify }}</h2>
-      <h3>{{ post.heading | markdownify }}</h3>
-      <div>{{ post.text | markdownify }}</div>
-    </div>
-    {% endfor %}
+  {% for post in site.posts reversed %}
+  {% if post.classname %}
+  <div class="poster {{ post.classname }}">
+  {% else %}
+  <div class="poster">
+  {% endif %}
+    <h2>{{ post.title | smartify }}</h2>
+    <h3>{{ post.heading | smartify | replace: '\\', '<br>' }}</h3>
+    <div>{{ post.text | markdownify }}</div>
   </div>
+  {% endfor %}
 </main>

+ 17 - 23
strategies-html

@@ -9,18 +9,6 @@ import yaml
 import art_lib
 
 
-def tex_to_plain(s):
-    return s.replace('\\\\', '\n').replace('~', '\u00A0')
-
-
-def tex_to_html(s):
-    return s.replace('\\\\', '<br>').replace('~', '&#160;')
-
-
-def markdown_escape(s):
-    return s.replace('"', '\"')
-
-
 def main():
     PATH_SRC = 'jekyll'
     PATH_DIST = 'dist'
@@ -33,13 +21,12 @@ def main():
     TEXTS_EXT = '.yml'
 
     files = []
-    for entry in os.scandir(PATH_TEXTS):
+    for entry in sorted(os.scandir(PATH_TEXTS), key=lambda x: x.name):
         if not entry.name.startswith('.') and entry.is_file()\
            and entry.name.endswith(TEXTS_EXT):
             files.append((
                 entry.path,
-                entry.name,
-                datetime.datetime.fromtimestamp(entry.stat().st_mtime)
+                entry.name
             ))
 
     configs = art_lib.jekyll_get_configs(
@@ -63,23 +50,30 @@ def main():
         )
 
         for file in files:
-            post_basename, _ = os.path.splitext(file[1])
-            post_date = file[2].strftime('%Y-%m-%d')
             with open(file[0], 'r') as f:
                 post_data = yaml.load(f.read())
+            post_basename, _ = os.path.splitext(file[1])
+            post_date = datetime.datetime.strptime(
+                post_data['date'], '%Y-%m-%d'
+            )
+            if 'fontsize' in post_data:
+                post_fontsize = post_data['fontsize']
+            else:
+                post_fontsize = None
             post_context = {
                 'yaml': yaml.dump({
-                    'name': tex_to_plain(post_data['title']),
-                    'timestamp': file[2].strftime('%Y-%m-%d %H:%M:%S'),
-                    'title': tex_to_plain(post_data['title']),
-                    'heading': tex_to_plain(post_data['heading']),
-                    'text': tex_to_plain(post_data['text']),
+                    'name': art_lib.tex_to_plain(post_data['title']),
+                    'timestamp': post_date.strftime('%Y-%m-%d %H:%M:%S'),
+                    'title': art_lib.tex_to_plain(post_data['title']),
+                    'heading': art_lib.tex_to_plain(post_data['heading']),
+                    'text': art_lib.tex_to_plain(post_data['text']),
+                    'classname': post_fontsize,
                 }, default_flow_style=False)
             }
             art_lib.jekyll_write_post(
                 path_template,
                 path_posts,
-                post_date,
+                post_date.strftime('%Y-%m-%d'),
                 post_basename,
                 post_context
             )

+ 1 - 0
texts/01.yml

@@ -25,3 +25,4 @@ text: |
   Ukázal jsem V., jak by mohl pouštět video ze svého počítače.
 
   Nechtěl jsem zvát profesora na naší akci.
+date: "2015-06-02"

+ 1 - 0
texts/02.yml

@@ -22,3 +22,4 @@ text: |
   Ne.
 
   Asi žádný nemam.
+date: "2015-06-02"

+ 1 - 0
texts/03.yml

@@ -6,3 +6,4 @@ text: |
   snadno srolovat.
 
   Zaměstnance galerie jsem instruoval, aby vám nebránili.
+date: "2015-06-02"

+ 2 - 0
texts/04.yml

@@ -45,3 +45,5 @@ text: |
   Házím v~Osvětimi vzteky papíry.
 
   Mám nechutný knírek.
+date: "2015-06-02"
+fontsize: "scriptsize"

+ 2 - 2
texts/05.yml

@@ -54,8 +54,6 @@ text: |
 
   Tomáš Džadoň~-- Apokalypsa na AVU nabrala stredoškoský charakter (video, 2015)
 
-  \columnbreak
-
   Pedagogický sbor AVU~-- Hodnocení studentských prací za zimní semestr (happening, 2015)
 
   Kolektiv INTM1~-- Ulička hamby I.~-- pro pedagogy (performance, 2015)
@@ -113,3 +111,5 @@ text: |
 
   ISIL a~Martin Kyrych~-- Destroying Mosul's museum\\
   (video performance, 2015)'
+date: "2015-06-02"
+fontsize: "tiny"

+ 1 - 0
texts/06.yml

@@ -13,3 +13,4 @@ text: |
   že jsme všichni museli najít konsenzus.
 
   Teď je opět nezamykám.
+date: "2015-06-02"

+ 1 - 0
texts/07.yml

@@ -4,3 +4,4 @@ heading: |
   se stalo součástí skutečnosti.
 text: |
   Od teď, když se někomu představuji, lžu.
+date: "2015-06-02"

File diff suppressed because it is too large
+ 1 - 0
texts/08.yml


+ 1 - 0
texts/09.yml

@@ -1,3 +1,4 @@
 title: "Strategie: Vyjadřovat se pouze tím, co jsem nezamýšlel"
 heading: ""
 text: ""
+date: "2015-06-02"