all repos — aaoth.xyz @ 25843593a10da466a1e769b8fdf17284e24d37e6

aaoth.xyz website 

add art gallery and tweak header

i think that the pictures are just placeholders now. i will try to
improve this 'gallery' a bit later.

also, header is now fixed with transparent background.
la-ninpre leobrekalini@gmail.com
Tue, 23 Feb 2021 01:46:02 +0300
commit

25843593a10da466a1e769b8fdf17284e24d37e6

parent

2b8adf6d9f919755b18813ceea37b80d6fabc062

11 files changed, 69 insertions(+), 20 deletions(-)

jump to
M _config.yml → _config.yml 
@@ -11,13 +11,22 @@
 excerpt_separator: <!--more-->
 
 defaults:
-  -
-    scope:
+  - scope:
       path: ""
     values:
       layout: "default"
-  -
-    scope:
+
+  - scope:
       path: "_posts"
     values:
       layout: "post"
+
+  - scope:
+      path: "assets/img"
+    values:
+      image: true
+
+  - scope:
+      path: "assets/img/art"
+    values:
+      art: true
M _includes/navigation.html → _includes/navigation.html 
@@ -4,5 +4,5 @@ {% for item in site.data.navigation %}
 		<li><a href="{{ item.link }}" {% if page.url == item.link %}class="current"{% endif %}>{{ item.name }}</a></li>
 		{% endfor %}
 	</ul>
-	<img src="/assets/img/aaoth-logo.png" alt="aaoth" width="378px" height="102px">
+	<img src="/assets/img/aaoth-logo.png" alt="aaoth" width="376px" height="auto">
 </nav>
M _layouts/default.html → _layouts/default.html 
@@ -11,9 +11,9 @@ <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
 	</head>
 	<body>
 		{% include navigation.html %}
-
+        <div class="content">
 		{{ content }}
-
+        </div>
 		{% include footer.html %}
 	</body>
 </html>
M _sass/main.scss → _sass/main.scss 
@@ -9,6 +9,7 @@ $color-darker-grey: #101010;
 $color-link-idle: #707070;
 $color-link-hover: #999999;
 $color-nav-current: #333333;
+$nav-alpha: 0.95;
 $border-main: 5px solid;
 $border-nav: $border-main $color-main-grey;
 $border-dark: $border-main $color-dark-grey;

@@ -23,7 +24,7 @@
 body {
     max-width: 835px;
     min-width: 378px;
-    margin: 20px auto 0 auto;
+    margin: 0 auto;
     padding: 8px;
     color: $color-dark-bg;
     font: 100% $body-font;

@@ -39,12 +40,23 @@
 .current {
     color: $color-nav-current;
     pointer-events: none;
+    font-weight: 500;
 }
 
 nav {
     display: flex;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    max-width: 843px;
+    height: 102px;
     font: 400 1.5em $font-title;
     letter-spacing: -1.2px;
+    background: rgba($color-main-bg, $nav-alpha);
+    
+    img {
+        margin-right: 8px;
+    }
 
     ul {
         display: inline-flex;

@@ -70,10 +82,13 @@ padding: 0;
     li {
         list-style-type:none;
     }
+}
+
+.content {
+    margin-top: 95px;
 }
 
 .about {
-    padding: 1em 0;
     display: flex;
     flex-direction: row;
     img#avatar {

@@ -122,9 +137,12 @@ }
 }
 
 .post-page {
+    margin-bottom: 10px;
     .post-header {
+        height: 4em;
         ul {
             display: flex;
+            float: right;
             flex-direction: row;
             li {
                 margin-right: 0.5em;

@@ -138,7 +156,20 @@ }
     }
 
     ul {
-        padding-left: 20px;
+        padding-left: 10px;
+    }
+}
+
+.art {
+    display: flex;
+    flex-flow: row wrap;
+
+    .art-img {
+        img {
+            width: 100%;
+            height: auto;
+            image-orientation: from-image;
+        }
     }
 }
 

@@ -186,18 +217,15 @@ }
 }
 
 @media only screen and (max-width: 760px) {
-    body p {
-        padding-top: 1em;
-    }
     footer p {
         padding: 0;
     }
     nav {
         margin-bottom: 5vh;
+        height: 130px;
         ul {
             width: 100%;
-            padding: 0;
-            padding-top: 30px;
+            padding-top: 48px;
             position: relative;
             top: 5vh;
         }

@@ -205,6 +233,9 @@ img {
             position: absolute;
             top: 0;
         }
+    }
+    .content {
+        margin-top: 140px;
     }
     .about {
         flex-direction: column-reverse;

@@ -243,6 +274,7 @@ body {
         color: $color-main-bg;
     }
     nav {
+        background: rgba($color-dark-bg, $nav-alpha);
         ul {
             border-bottom: $border-dark;
         }
M art.md → art.md 
@@ -3,4 +3,16 @@ title: art
 permalink: /art/
 ---
 
-here i'll show some graphical stuff
+{% assign image_files = site.static_files | where: "art", true %}
+
+here are some photos and pictures.
+
+feel free to use them if and as you wish (don't forget to attribute).
+
+<div class="art">
+{% for img in image_files %}
+    <div class="art-img">
+        <img src="{{ img.path }}" alt="{{ img.name }}">
+    </div>
+{% endfor %}
+</div>
M blog.md → blog.md 
@@ -3,10 +3,6 @@ title: blog
 permalink: /blog/
 ---
 
-# miscellaneous posts
-
-about different things
-
 filter by tag: {% for tag in site.tags %}[{{ tag[0] }}](/tags/{{ tag[0] }})
 {% endfor %}