Merge pull request #13 from offen/autoprefixer

Add autoprefixer to css pipeline

.dockerignore

@@ -0,0 +1 @@
+homepage/output

Dockerfile.python

@@ -1,3 +1,6 @@
-FROM python:3.7
+FROM nikolaik/python-nodejs:python3.7-nodejs12
+
+RUN npm install -g postcss-cli@^6.1.3 autoprefixer@^9.7.0
 
 ENV PATH="/root/.local/bin:$PATH"
+ENV NODE_PATH="/usr/lib/node_modules"

build/Dockerfile

@@ -5,7 +5,7 @@ ENV SITEURL=$siteurl
 
 COPY ./homepage /code/homepage
 
-RUN npm install svgo -g
+RUN npm install -g postcss-cli@^6.1.3 autoprefixer@^9.7.0 svgo@^1.3.0
 RUN apt-get update \
 	&& apt-get install -y libjpeg-progs optipng \
 	&& rm -rf /var/lib/apt/lists/*

docker-compose.yml

@@ -19,20 +19,12 @@ services:
       - database:/data
     environment:
       OFFEN_APP_EVENTRETENTIONPERIOD: 4464h
-      OFFEN_APP_DEVELOPMENT: '1'
       OFFEN_APP_DISABLESECURECOOKIE: '1'
       OFFEN_DATABASE_CONNECTIONSTRING: /data/offen.db
       OFFEN_SERVER_PORT: 8080
       OFFEN_SERVER_REVERSEPROXY: '1'
       OFFEN_SECRETS_COOKIEEXCHANGE: 8jeKYbbnywoYIZznu4HffQ==
       OFFEN_SECRETS_EMAILSALT: eypctS7SVKM1Ureb61db5Q==
-    depends_on:
-      - server_database
-
-  server_database:
-    image: postgres:11.2
-    environment:
-      POSTGRES_PASSWORD: develop
 
   homepage:
     build:

homepage/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}

homepage/requirements.txt

@@ -1,5 +1,5 @@
 pelican==4.0.1
 markdown==3.1.1
-webassets==0.12.1
+git+git://github.com/miracle2k/webassets#d1f3455e383446ca4ab0c644f326ee937e68e809
 cssmin==0.2.0
 libsass==0.19.3

homepage/theme/static/css/style.scss

@@ -132,9 +132,6 @@ CARDS
   display: flex;
 }
 .card {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
   flex-direction: column;
   width: 280px;
   color: $black-mid;
@@ -154,14 +151,9 @@ CARDS
 @media only screen and (max-width: 960px) {
   .card-deck,
   .footer-card-deck {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
     flex-direction: column;
   }
   .card-deck {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
     justify-content: center;
   }
   .card {
@@ -178,22 +170,15 @@ CARDS
 @media only screen and (min-width: 961px) {
   .card-deck,
   .footer-card-deck {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: row;
     flex-direction: row;
   }
   .card-deck {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
     justify-content: center;
   }
   .card:nth-child(2) {
     margin: 0 50px 0 50px;
   }
   .footer-card-deck {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
     justify-content: space-between;
   }
   .footer-card:nth-child(1),
@@ -379,8 +364,6 @@ BUTTONS
   margin: 40px 0 0 0;
 }
 .btn {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
   border-radius: 0px;
   padding: 8px 30px;
   text-align: center;

homepage/theme/templates/base.html

@@ -19,7 +19,7 @@
   <meta name="twitter:card" content="summary_large_image">
   <link rel="canonical" href="{{ SITEURL }}/{{ page.save_as }}">
   <link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
-  {% assets filters="libsass,cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.scss" %}
+  {% assets filters="libsass,postcss,cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.scss" %}
     <link rel="stylesheet" href="/{{ ASSET_URL }}">
   {% endassets %}
   {% if OFFEN_ACCOUNT_ID and not page.no_stats %}