Index: static/css/demo.css |
=================================================================== |
new file mode 100644 |
--- /dev/null |
+++ b/static/css/demo.css |
@@ -0,0 +1,73 @@ |
+/*! |
+ * This file is part of website-defaults |
+ * Copyright (C) 2016-2017 eyeo GmbH |
+ * |
+ * website-defaults is free software: you can redistribute it and/or |
+ * modify it under the terms of the GNU General Public License as published by |
+ * the Free Software Foundation, either version 3 of the License, or |
+ * (at your option) any later version. |
+ * |
+ * website-defaults is distributed in the hope that it will be useful, |
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of |
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
+ * GNU General Public License for more details. |
+ * |
+ * You should have received a copy of the GNU General Public License |
+ * along with website-defaults. If not, see <http://www.gnu.org/licenses/>. |
+ */ |
+ |
+/* The following styles are for demonstration purposes **only** */ |
+ |
+body |
+{ |
+ margin: 3em 0; |
+} |
+ |
+/** |
+ * Highlight text with inverse colors and padding |
+ */ |
+.inverse-text |
+{ |
+ padding: 0.5em 1em; |
+ color: #fff; |
+ background-color: #000; |
+} |
+ |
+/** |
+ * Tablet width container |
+ */ |
+.tablet |
+{ |
+ width: 720px; |
+} |
+ |
+/** |
+ * Mobile width container |
+ */ |
+.mobile |
+{ |
+ width: 540px; |
+} |
+ |
+/* Collapse mobile & tablet container widths to 100% on small screens */ |
+ |
+.mobile, |
+.tablet |
+{ |
+ max-width: 100%; |
+} |
+ |
+.mobile .column, |
+.tablet .column |
+{ |
+ width: 100%; |
+} |
+ |
+@media(min-width: 768px) |
+{ |
+ /* Collapse one fourth columns to one half columns inside tablet containers */ |
+ .tablet .column.one-fourth |
+ { |
+ width: 50%; |
+ } |
+} |