Add tailwind and basic base.html styling
This commit is contained in:
Daniel Egger
parent
5c3c412968
commit
2411b8cf4b
|
|
@ -8,3 +8,5 @@
|
|||
.readthedocs.yml
|
||||
.travis.yml
|
||||
venv
|
||||
.direnv
|
||||
node_modules
|
||||
|
|
|
|||
|
|
@ -278,3 +278,5 @@ project.min.css
|
|||
vendors.js
|
||||
*.min.js
|
||||
.env
|
||||
|
||||
package-lock.json
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
version: 2
|
||||
|
||||
sphinx:
|
||||
configuration: docs/conf.py
|
||||
|
||||
build:
|
||||
image: testing
|
||||
|
||||
python:
|
||||
version: 3.9
|
||||
install:
|
||||
- requirements: requirements/local.txt
|
||||
20
gulpfile.js
20
gulpfile.js
|
|
@ -11,14 +11,13 @@ const autoprefixer = require('autoprefixer')
|
|||
const browserSync = require('browser-sync').create()
|
||||
|
||||
const cssnano = require ('cssnano')
|
||||
const imagemin = require('gulp-imagemin')
|
||||
const pixrem = require('pixrem')
|
||||
const plumber = require('gulp-plumber')
|
||||
const postcss = require('gulp-postcss')
|
||||
const reload = browserSync.reload
|
||||
const rename = require('gulp-rename')
|
||||
const sass = require('gulp-sass')(require('sass'))
|
||||
const spawn = require('child_process').spawn
|
||||
// const spawn = require('child_process').spawn
|
||||
const uglify = require('gulp-uglify-es').default
|
||||
|
||||
// Relative paths function
|
||||
|
|
@ -77,22 +76,6 @@ function scripts() {
|
|||
.pipe(dest(paths.js))
|
||||
}
|
||||
|
||||
// Image compression
|
||||
function imgCompression() {
|
||||
return src(`${paths.images}/*`)
|
||||
.pipe(imagemin()) // Compresses PNG, JPEG, GIF and SVG images
|
||||
.pipe(dest(paths.images))
|
||||
}// Run django server
|
||||
function asyncRunServer() {
|
||||
var cmd = spawn('gunicorn', [
|
||||
'config.asgi', '-k', 'uvicorn.workers.UvicornWorker', '--reload'
|
||||
], {stdio: 'inherit'}
|
||||
)
|
||||
cmd.on('close', function(code) {
|
||||
console.log('gunicorn exited with code ' + code)
|
||||
})
|
||||
}
|
||||
|
||||
// Browser sync server for live reload
|
||||
function initBrowserSync() {
|
||||
browserSync.init(
|
||||
|
|
@ -129,7 +112,6 @@ function watchPaths() {
|
|||
const generateAssets = parallel(
|
||||
styles,
|
||||
scripts,
|
||||
imgCompression
|
||||
)
|
||||
|
||||
// Set up dev environment
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
{
|
||||
"name": "vbv_lernwelt",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.0",
|
||||
"browser-sync": "^2.27.7",
|
||||
"cssnano": "^5.0.11",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-imagemin": "^7.1.0",
|
||||
"gulp-plumber": "^1.2.1",
|
||||
"gulp-postcss": "^9.0.1",
|
||||
"gulp-rename": "^2.0.0",
|
||||
|
|
@ -15,7 +13,8 @@
|
|||
"gulp-uglify-es": "^3.0.0",
|
||||
"pixrem": "^5.0.0",
|
||||
"postcss": "^8.3.11",
|
||||
"sass": "^1.43.4"
|
||||
"sass": "^1.43.4",
|
||||
"tailwindcss": "^3.0.18"
|
||||
},
|
||||
"engines": {
|
||||
"node": "16"
|
||||
|
|
@ -25,6 +24,7 @@
|
|||
],
|
||||
"scripts": {
|
||||
"dev": "gulp",
|
||||
"tailwind": "tailwindcss -i ./vbv_lernwelt/static/tailwind/input.css -o ./vbv_lernwelt/static/css/output.css --watch",
|
||||
"build": "gulp generate-assets"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
|
||||
|
||||
|
||||
|
||||
// project specific CSS goes here
|
||||
|
||||
////////////////////////////////
|
||||
//Variables//
|
||||
////////////////////////////////
|
||||
|
||||
// Alert colors
|
||||
|
||||
$white: #fff;
|
||||
$mint-green: #d6e9c6;
|
||||
$black: #000;
|
||||
$pink: #f2dede;
|
||||
$dark-pink: #eed3d7;
|
||||
$red: #b94a48;
|
||||
|
||||
////////////////////////////////
|
||||
//Alerts//
|
||||
////////////////////////////////
|
||||
|
||||
// bootstrap alert CSS, translated to the django-standard levels of
|
||||
// debug, info, success, warning, error
|
||||
|
||||
.alert-debug {
|
||||
background-color: $white;
|
||||
border-color: $mint-green;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: $pink;
|
||||
border-color: $dark-pink;
|
||||
color: $red;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -1,106 +1,178 @@
|
|||
{% load static i18n %}<!DOCTYPE html>
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
<html lang="{{ LANGUAGE_CODE }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>{% block title %}VBV Lernwelt{% endblock title %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="VBV Lernumgebung">
|
||||
<meta name="author" content="Iterativ GmbH">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>{% block title %}VBV Lernwelt{% endblock title %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="VBV Lernumgebung">
|
||||
<meta name="author" content="Iterativ GmbH">
|
||||
|
||||
<link rel="icon" href="{% static 'images/favicons/favicon.ico' %}">
|
||||
<link rel="icon" href="{% static 'images/favicons/favicon.ico' %}">
|
||||
|
||||
{% block css %}
|
||||
{% block css %}
|
||||
<!-- Your stuff: Third-party CSS libraries go here -->
|
||||
<!-- This file stores project-specific CSS -->
|
||||
<link href="{% static 'css/project.min.css' %}" rel="stylesheet">
|
||||
{% endblock %}
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
{# Placed at the top of the document so pages load faster with defer #}
|
||||
{% block javascript %}
|
||||
<!-- Your stuff: Third-party javascript libraries go here -->
|
||||
<!-- place project specific Javascript in this file -->
|
||||
<script defer src="{% static 'js/project.js' %}"></script>
|
||||
<link href="{% static 'css/output.css' %}" rel="stylesheet">
|
||||
{% endblock %}
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
{# Placed at the top of the document so pages load faster with defer #}
|
||||
{% block javascript %}
|
||||
<!-- Your stuff: Third-party javascript libraries go here -->
|
||||
<!-- place project specific Javascript in this file -->
|
||||
<script defer src="{% static 'js/project.js' %}"></script>
|
||||
|
||||
{% endblock javascript %}
|
||||
{% endblock javascript %}
|
||||
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="mb-1">
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="{% url 'home' %}">VBV Lernwelt</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="{% url 'home' %}">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'about' %}">About</a>
|
||||
</li>
|
||||
{# {% if request.user.is_authenticated %}#}
|
||||
{# <li class="nav-item">#}
|
||||
{# URL provided by django-allauth/account/urls.py #}
|
||||
{# <a class="nav-link" href="{% url 'users:detail' request.user.username %}">{% translate "My Profile" %}</a>#}
|
||||
{# </li>#}
|
||||
{# <li class="nav-item">#}
|
||||
{# URL provided by django-allauth/account/urls.py #}
|
||||
{# <a class="nav-link" href="{% url 'account_logout' %}">{% translate "Sign Out" %}</a>#}
|
||||
{# </li>#}
|
||||
{# {% else %}#}
|
||||
{# {% if ACCOUNT_ALLOW_REGISTRATION %}#}
|
||||
{# <li class="nav-item">#}
|
||||
{# URL provided by django-allauth/account/urls.py #}
|
||||
{# <a id="sign-up-link" class="nav-link" href="{% url 'account_signup' %}">{% translate "Sign Up" %}</a>#}
|
||||
{# </li>#}
|
||||
{# {% endif %}#}
|
||||
{# <li class="nav-item">#}
|
||||
{# URL provided by django-allauth/account/urls.py #}
|
||||
{# <a id="log-in-link" class="nav-link" href="{% url 'account_login' %}">{% translate "Sign In" %}</a>#}
|
||||
{# </li>#}
|
||||
{# {% endif %}#}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<body>
|
||||
|
||||
<div class="container mx-auto bg-blue-900">
|
||||
<div class="flex flex-col md:flex-row items-center p-4 text-white space-x-8">
|
||||
<div class="text-2xl mx-4">
|
||||
VBV Ausbildungsportal
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>Kurse / Shop</div>
|
||||
<div>Infos zu Berufen</div>
|
||||
<div>Branchennews</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
<div class="container">
|
||||
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div> <!-- /container -->
|
||||
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto">
|
||||
<div class="flex justify-between flex-col md:flex-row">
|
||||
<img class="w-full md:w-2/4" src="https://www.thezebra.com/insurance-news/wp-content/uploads/2016/01/Tree-fallen-on-car-1024x682.jpeg"/>
|
||||
<div class="w-full md:w-2/4 flex flex-col justify-center p-4 md:p-16">
|
||||
<h2 class="text-xl md:text-3xl font-bold">Machen Sie hier eine Selbstevaluation</h2>
|
||||
<p class="my-4 text-xl">Hier steht noch etwas mehr Text</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto bg-blue-100 border-t-2 border-gray-900">
|
||||
<div class="p-8 flex flex-col md:flex-row">
|
||||
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 px-4">
|
||||
<div class="bg-white rounded-lg overflow-hidden mb-10 shadow-md">
|
||||
<img
|
||||
src="https://cdn.tailgrids.com/1.0/assets/images/cards/card-01/image-01.jpg"
|
||||
alt="image"
|
||||
class="w-full"
|
||||
/>
|
||||
<div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="
|
||||
inline-block
|
||||
py-2
|
||||
px-7
|
||||
border border-[#E5E7EB]
|
||||
rounded-full
|
||||
text-base text-body-color
|
||||
font-medium
|
||||
hover:border-primary hover:bg-primary hover:text-white
|
||||
transition
|
||||
"
|
||||
>
|
||||
Kurs X
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block content %}
|
||||
<p>Use this document as a way to quick start any new project.</p>
|
||||
{% endblock content %}
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 px-4">
|
||||
<div class="bg-white rounded-lg overflow-hidden mb-10 shadow-md">
|
||||
<img
|
||||
src="https://cdn.tailgrids.com/1.0/assets/images/cards/card-01/image-02.jpg"
|
||||
alt="image"
|
||||
class="w-full"
|
||||
/>
|
||||
<div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="
|
||||
inline-block
|
||||
py-2
|
||||
px-7
|
||||
border border-[#E5E7EB]
|
||||
rounded-full
|
||||
text-base text-body-color
|
||||
font-medium
|
||||
hover:border-primary hover:bg-primary hover:text-white
|
||||
transition
|
||||
"
|
||||
>
|
||||
Kurs Y
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
<div class="w-full md:w-1/2 xl:w-1/3 px-4">
|
||||
<div class="bg-white rounded-lg overflow-hidden mb-10 shadow-md">
|
||||
<img
|
||||
src="https://cdn.tailgrids.com/1.0/assets/images/cards/card-01/image-03.jpg"
|
||||
alt="image"
|
||||
class="w-full"
|
||||
/>
|
||||
<div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="
|
||||
inline-block
|
||||
py-2
|
||||
px-7
|
||||
border border-[#E5E7EB]
|
||||
rounded-full
|
||||
text-base text-body-color
|
||||
font-medium
|
||||
hover:border-primary hover:bg-primary hover:text-white
|
||||
transition
|
||||
"
|
||||
>
|
||||
Kurs Z
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="p-8 text-right">weitere Kurse entdecken und buchen</p>
|
||||
|
||||
{% block modal %}{% endblock modal %}
|
||||
<div class="border-t-2 border-blue-400 m-8 p-8"></div>
|
||||
</div>
|
||||
|
||||
{% block inline_javascript %}
|
||||
{% comment %}
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
{% block modal %}{% endblock modal %}
|
||||
|
||||
{% block inline_javascript %}
|
||||
{% comment %}
|
||||
Script tags with only code, no src (defer by default). To run
|
||||
with a "defer" so that you run inline code:
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', () => {/* Run whatever you want */});
|
||||
window.addEventListener('DOMContentLoaded', () => {/* Run whatever you want */});
|
||||
</script>
|
||||
{% endcomment %}
|
||||
{% endblock inline_javascript %}
|
||||
</body>
|
||||
{% endcomment %}
|
||||
{% endblock inline_javascript %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue