foundation: Add basic stuff for CSS & JS

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/Makefile.am b/Makefile.am
index 0affc3b5a6fc63dd19931435bb9495d5cb9251c8..2087c3771d6dc1875d84ff9832944838303f90d4 100644 (file)
--- a/Makefile.am
+++ b/Makefile.am
@@ -341,13 +341,18 @@ dist_static_DATA = \
 
 staticdir = $(datadir)/static
 
-dist_static_css_DATA = \
-       src/static/css/bootstrap-responsive.min.css \
-       src/static/css/bootstrap.min.css \
-       src/static/css/style.css
+static_css_DATA = \
+       src/static/css/site.css
 
 static_cssdir = $(staticdir)/css
 
+EXTRA_DIST += \
+       src/static/css/_fonts.scss \
+       src/static/css/site.scss
+
+CLEANFILES += \
+       src/static/css/site.css
+
 dist_static_font_DATA = \
        src/static/font/fontawesome-webfont.eot \
        src/static/font/fontawesome-webfont.svg \
@@ -375,15 +380,17 @@ dist_static_images_DATA = \
 
 static_imagesdir = $(staticdir)/images
 
-dist_static_js_DATA = \
-       src/static/js/bootstrap.min.js \
+static_js_DATA = \
+       src/static/js/foundation.min.js \
        src/static/js/jquery.js \
        src/static/js/pbs.js \
-       src/static/js/popper.min.js \
        src/static/js/prettify.js
 
 static_jsdir = $(staticdir)/js
 
+CLEANFILES += \
+       src/static/js/foundation.min.js
+
 # ------------------------------------------------------------------------------
 
 if HAVE_SYSTEMD
@@ -445,3 +452,6 @@ UGLIFYJS_PROCESS = \
 
 %.min.js: %.js
        $(UGLIFYJS_PROCESS)
+
+src/static/js/foundation.min.js: src/third-party/foundation-sites/dist/js/foundation.js
+       $(UGLIFYJS_PROCESS)

diff --git a/src/static/css/.gitignore b/src/static/css/.gitignore
new file mode 100644 (file)
index 0000000..b3a5267
--- /dev/null
+++ b/src/static/css/.gitignore
@@ -0,0 +1 @@
+*.css

diff --git a/src/static/css/_fonts.scss b/src/static/css/_fonts.scss
new file mode 100644 (file)
index 0000000..107f9d0
--- /dev/null
+++ b/src/static/css/_fonts.scss
@@ -0,0 +1,53 @@
+/* latin-ext */
+@font-face {
+       font-family: "Prompt";
+       font-style: normal;
+       font-weight: 400;
+       src: local("Prompt Regular"), local("Prompt-Regular"), url(../fonts/Prompt-Regular.ttf) format("truetype");
+       unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+       font-family: "Prompt";
+       font-style: normal;
+       font-weight: 400;
+       src: local("Prompt Regular"), local("Prompt-Regular"), url(../fonts/Prompt-Regular.ttf) format("truetype");
+       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+       font-family: 'Prompt';
+       font-style: normal;
+       font-weight: 500;
+       src: local('Prompt Medium'), local('Prompt-Medium'), url(../fonts/Prompt-Medium.ttf) format("truetype");
+       unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+       font-family: 'Prompt';
+       font-style: normal;
+       font-weight: 500;
+       src: local('Prompt Medium'), local('Prompt-Medium'), url(../fonts/Prompt-Medium.ttf) format("truetype");
+       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+       font-family: "Prompt";
+       font-style: normal;
+       font-weight: 700;
+       src: local("Prompt Bold"), local("Prompt-Bold"), url(../fonts/Prompt-Bold.ttf) format("truetype");
+       unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+       font-family: "Prompt";
+       font-style: normal;
+       font-weight: 700;
+       src: local("Prompt Bold"), local("Prompt-Bold"), url(../fonts/Prompt-Bold.ttf) format("truetype");
+       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

diff --git a/src/static/css/site.scss b/src/static/css/site.scss
new file mode 100644 (file)
index 0000000..8c514ef
--- /dev/null
+++ b/src/static/css/site.scss
@@ -0,0 +1,84 @@
+/*
+       Global Settings
+*/
+$body-font-family:                             Prompt, sans-serif;
+
+// Colour Palette
+$foundation-palette: (
+       primary:                                        #ff2e53,
+       secondary:                                      #767676,
+       success:                                        #3adb76,
+       warning:                                        #e7e247,
+       alert:                                          #cc4b37,
+);
+
+// Import fonts
+@import "fonts";
+
+/*
+       Import Foundation Sites
+*/
+@import "../../third-party/foundation-sites/scss/foundation";
+
+// Global styles
+@include foundation-global-styles;
+@include foundation-forms;
+@include foundation-typography;
+
+// Enable the XY Grid
+@include foundation-xy-grid-classes;
+
+// Generic components
+@include foundation-button;
+@include foundation-button-group;
+@include foundation-close-button;
+@include foundation-label;
+@include foundation-progress-bar;
+@include foundation-slider;
+@include foundation-switch;
+@include foundation-table;
+
+// Basic components
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-callout;
+@include foundation-card;
+@include foundation-dropdown;
+@include foundation-pagination;
+@include foundation-tooltip;
+
+// Containers
+@include foundation-accordion;
+@include foundation-media-object;
+@include foundation-orbit;
+@include foundation-responsive-embed;
+@include foundation-tabs;
+@include foundation-thumbnail;
+
+// Menu-based containers
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-accordion-menu;
+@include foundation-drilldown-menu;
+@include foundation-dropdown-menu;
+
+// Layout components
+@include foundation-off-canvas;
+@include foundation-reveal;
+@include foundation-sticky;
+@include foundation-title-bar;
+@include foundation-top-bar;
+
+// Helpers
+@include foundation-float-classes;
+// @include foundation-flex-classes;
+@include foundation-visibility-classes;
+// @include foundation-prototype-classes;
+
+/*
+       Custom CSS
+*/
+
+.top-bar {
+       margin-bottom: 1rem;
+}

diff --git a/src/static/js/.gitignore b/src/static/js/.gitignore
new file mode 100644 (file)
index 0000000..121531a
--- /dev/null
+++ b/src/static/js/.gitignore
@@ -0,0 +1 @@
+*.min.js

diff --git a/src/templates/base.html b/src/templates/base.html
index 500cf35a59198106c32a78dbdc2a7cc477479a73..7ebae46cedd23455c53205bb64eaf7b078575f6c 100644 (file)
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="no-js" lang="en">
        <head>
-               <title>{{ hostname }} - {% block title %}{{ _("No title given") }}{% end block %}</title>
-               <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+               <meta charset="utf-8">
+               <meta name="viewport" content="width=device-width, initial-scale=1">
+               <meta name="description" content="{{ _("Pakfire Build Service") }}">
                <meta name="author" content="IPFire.org - Pakfire Development Team" />
 
-               <!-- styling stuff -->
-               <link rel="stylesheet" type="text/css" href="{{ static_url("css/bootstrap.min.css") }}" />
-               <link rel="stylesheet" type="text/css" href="{{ static_url("css/style.css") }}" />
-               <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css">
+               <title>{{ hostname }} - {% block title %}{{ _("No title given") }}{% end block %}</title>
 
-               <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+               <link rel="stylesheet" type="text/css" href="{{ static_url("css/site.css") }}" />
+               <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css">
        </head>
 
        <body>
@@ -116,8 +115,7 @@
 
                <!-- include javascript files -->
                <script src="{{ static_url("js/jquery.js") }}"></script>
-               <script src="{{ static_url("js/popper.min.js") }}"></script>
-               <script src="{{ static_url("js/bootstrap.min.js") }}"></script>
+               <script src="{{ static_url("js/foundation.min.js") }}"></script>
                <script src="{{ static_url("js/prettify.js") }}"></script>
                <script src="{{ static_url("js/pbs.js") }}"></script>
        </body>