style changes

.eleventy.js

@@ -9,7 +9,6 @@ module.exports = function(config) {
     config.addLayoutAlias('page', 'page.njk')
 
     config.addPassthroughCopy('src/assets/images')
-    config.addPassthroughCopy('src/assets/styles/main.css')
 
     config.addTransform('htmlmin', function(content, outputPath) {
         if (outputPath.endsWith('.html')) {
@@ -30,7 +29,7 @@ module.exports = function(config) {
             layouts: 'layouts',
             data: 'data'
         },
-        templateFormats: ['njk', 'md'],
+        templateFormats: ['njk', 'md', 'css'],
         htmlTemplateEngine: 'njk',
         markdownTemplateEngine: 'njk',
         passthroughFileCopy: true

src/assets/styles/base/_layout.scss

@@ -19,13 +19,3 @@ body {
     width: 90%;
     max-width: 640px;
 }
-
-.beta {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 10px 20px;
-    background-color: $gray-darker;
-    color: #fff;
-    font-style: italic;
-}

src/assets/styles/components/_beta.scss

@@ -0,0 +1,22 @@
+.beta {
+    position: absolute;
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-style: solid;
+    border-width: 0 80px 80px 0;
+    border-color: transparent $gray-darker transparent transparent;
+
+    &::after {
+        content: 'beta';
+        display: block;
+        color: #fff;
+        font-style: italic;
+        transform: rotate(45deg);
+        position: absolute;
+        top: 12px;
+        right: -70px;
+    }
+}

src/assets/styles/main.scss

@@ -10,3 +10,4 @@
 @import 'components/button';
 @import 'components/webring';
 @import 'components/form';
+@import 'components/beta';

src/layouts/base.njk

@@ -14,7 +14,7 @@
     <div class="container">
         {{ content | safe }}
     </div>
-    <p class="beta">beta</p>
+    <div class="beta"></div>
 </body>
 </html>