ein bisschen css
This commit is contained in:
parent
fe70089f2c
commit
da5d997050
2 changed files with 342 additions and 35 deletions
|
|
@ -0,0 +1,287 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Oxygen:400');
|
||||
@import url('https://fonts.googleapis.com/css?family=Madimi+One');
|
||||
|
||||
:root {
|
||||
--text-50: #efffe5;
|
||||
--text-100: #e0ffcc;
|
||||
--text-200: #c0ff99;
|
||||
--text-300: #a1ff66;
|
||||
--text-400: #81ff33;
|
||||
--text-500: #62ff00;
|
||||
--text-600: #4ecc00;
|
||||
--text-700: #3b9900;
|
||||
--text-800: #276600;
|
||||
--text-900: #143300;
|
||||
--text-950: #0a1a00;
|
||||
|
||||
--background-50: #f2f2f2;
|
||||
--background-100: #e6e6e6;
|
||||
--background-200: #cccccc;
|
||||
--background-300: #b3b3b3;
|
||||
--background-400: #999999;
|
||||
--background-500: #808080;
|
||||
--background-600: #666666;
|
||||
--background-700: #4d4d4d;
|
||||
--background-800: #333333;
|
||||
--background-900: #1a1a1a;
|
||||
--background-950: #0d0d0d;
|
||||
|
||||
--primary-50: #f1faeb;
|
||||
--primary-100: #e3f5d6;
|
||||
--primary-200: #c7eaae;
|
||||
--primary-300: #abe085;
|
||||
--primary-400: #8fd55d;
|
||||
--primary-500: #73cb34;
|
||||
--primary-600: #5ca22a;
|
||||
--primary-700: #457a1f;
|
||||
--primary-800: #2e5115;
|
||||
--primary-900: #17290a;
|
||||
--primary-950: #0b1405;
|
||||
|
||||
--secondary-50: #f5f8ed;
|
||||
--secondary-100: #eaf1da;
|
||||
--secondary-200: #d5e3b5;
|
||||
--secondary-300: #c0d590;
|
||||
--secondary-400: #abc76b;
|
||||
--secondary-500: #96b946;
|
||||
--secondary-600: #789438;
|
||||
--secondary-700: #5a6f2a;
|
||||
--secondary-800: #3c4a1c;
|
||||
--secondary-900: #1e250e;
|
||||
--secondary-950: #0f1207;
|
||||
|
||||
--accent-50: #edf6f8;
|
||||
--accent-100: #dbedf0;
|
||||
--accent-200: #b6dbe2;
|
||||
--accent-300: #92c8d3;
|
||||
--accent-400: #6db6c5;
|
||||
--accent-500: #49a4b6;
|
||||
--accent-600: #3a8392;
|
||||
--accent-700: #2c626d;
|
||||
--accent-800: #1d4249;
|
||||
--accent-900: #0f2124;
|
||||
--accent-950: #071012;
|
||||
|
||||
}
|
||||
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--text-50: #efffe5;
|
||||
--text-100: #e0ffcc;
|
||||
--text-200: #c0ff99;
|
||||
--text-300: #a1ff66;
|
||||
--text-400: #81ff33;
|
||||
--text-500: #62ff00;
|
||||
--text-600: #4ecc00;
|
||||
--text-700: #3b9900;
|
||||
--text-800: #276600;
|
||||
--text-900: #143300;
|
||||
--text-950: #0a1a00;
|
||||
|
||||
--background-50: #f2f2f2;
|
||||
--background-100: #e6e6e6;
|
||||
--background-200: #cccccc;
|
||||
--background-300: #b3b3b3;
|
||||
--background-400: #999999;
|
||||
--background-500: #808080;
|
||||
--background-600: #666666;
|
||||
--background-700: #4d4d4d;
|
||||
--background-800: #333333;
|
||||
--background-900: #1a1a1a;
|
||||
--background-950: #0d0d0d;
|
||||
|
||||
--primary-50: #f1faeb;
|
||||
--primary-100: #e3f5d6;
|
||||
--primary-200: #c7eaae;
|
||||
--primary-300: #abe085;
|
||||
--primary-400: #8fd55d;
|
||||
--primary-500: #73cb34;
|
||||
--primary-600: #5ca22a;
|
||||
--primary-700: #457a1f;
|
||||
--primary-800: #2e5115;
|
||||
--primary-900: #17290a;
|
||||
--primary-950: #0b1405;
|
||||
|
||||
--secondary-50: #f5f8ed;
|
||||
--secondary-100: #eaf1da;
|
||||
--secondary-200: #d5e3b5;
|
||||
--secondary-300: #c0d590;
|
||||
--secondary-400: #abc76b;
|
||||
--secondary-500: #96b946;
|
||||
--secondary-600: #789438;
|
||||
--secondary-700: #5a6f2a;
|
||||
--secondary-800: #3c4a1c;
|
||||
--secondary-900: #1e250e;
|
||||
--secondary-950: #0f1207;
|
||||
|
||||
--accent-50: #edf6f8;
|
||||
--accent-100: #dbedf0;
|
||||
--accent-200: #b6dbe2;
|
||||
--accent-300: #92c8d3;
|
||||
--accent-400: #6db6c5;
|
||||
--accent-500: #49a4b6;
|
||||
--accent-600: #3a8392;
|
||||
--accent-700: #2c626d;
|
||||
--accent-800: #1d4249;
|
||||
--accent-900: #0f2124;
|
||||
--accent-950: #071012;
|
||||
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--text-50: #0a1a00;
|
||||
--text-100: #143300;
|
||||
--text-200: #296600;
|
||||
--text-300: #3d9900;
|
||||
--text-400: #52cc00;
|
||||
--text-500: #66ff00;
|
||||
--text-600: #85ff33;
|
||||
--text-700: #a3ff66;
|
||||
--text-800: #c2ff99;
|
||||
--text-900: #e0ffcc;
|
||||
--text-950: #f0ffe5;
|
||||
|
||||
--background-50: #0d0d0d;
|
||||
--background-100: #1a1a1a;
|
||||
--background-200: #333333;
|
||||
--background-300: #4d4d4d;
|
||||
--background-400: #666666;
|
||||
--background-500: #808080;
|
||||
--background-600: #999999;
|
||||
--background-700: #b3b3b3;
|
||||
--background-800: #cccccc;
|
||||
--background-900: #e6e6e6;
|
||||
--background-950: #f2f2f2;
|
||||
|
||||
--primary-50: #0b1405;
|
||||
--primary-100: #17290a;
|
||||
--primary-200: #2e5115;
|
||||
--primary-300: #457a1f;
|
||||
--primary-400: #5ca22a;
|
||||
--primary-500: #73cb34;
|
||||
--primary-600: #8fd55d;
|
||||
--primary-700: #abe085;
|
||||
--primary-800: #c7eaae;
|
||||
--primary-900: #e3f5d6;
|
||||
--primary-950: #f1faeb;
|
||||
|
||||
--secondary-50: #0f1207;
|
||||
--secondary-100: #1e250e;
|
||||
--secondary-200: #3c4a1c;
|
||||
--secondary-300: #5a6f2a;
|
||||
--secondary-400: #789438;
|
||||
--secondary-500: #96b946;
|
||||
--secondary-600: #abc76b;
|
||||
--secondary-700: #c0d590;
|
||||
--secondary-800: #d5e3b5;
|
||||
--secondary-900: #eaf1da;
|
||||
--secondary-950: #f5f8ed;
|
||||
|
||||
--accent-50: #071012;
|
||||
--accent-100: #0f2124;
|
||||
--accent-200: #1d4249;
|
||||
--accent-300: #2c626d;
|
||||
--accent-400: #3a8392;
|
||||
--accent-500: #49a4b6;
|
||||
--accent-600: #6db6c5;
|
||||
--accent-700: #92c8d3;
|
||||
--accent-800: #b6dbe2;
|
||||
--accent-900: #dbedf0;
|
||||
--accent-950: #edf6f8;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Oxygen';
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-family: 'Madimi One';
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/* 16px */
|
||||
|
||||
h1 {
|
||||
font-size: 3.053rem;
|
||||
/* 48.8px */
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.442rem;
|
||||
/* 39.04px */
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.954rem;
|
||||
/* 31.2px */
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.563rem;
|
||||
/* 24.96px */
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.250rem;
|
||||
/* 20px */
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.800rem;
|
||||
/* 12.8px */
|
||||
}
|
||||
|
||||
.background-image {
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
#background {
|
||||
fill: var(--primary-600);
|
||||
}
|
||||
|
||||
#noise {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 70%;
|
||||
background-color: var(--background-200);
|
||||
padding: 1ex;
|
||||
box-shadow: 10px 10px 9px 1px rgba(0,0,0,0.32);
|
||||
border-radius: 1ex;
|
||||
}
|
||||
|
||||
/* Mobile only css */
|
||||
@media screen and (max-width: 920px) {
|
||||
.desktop {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop only css */
|
||||
@media screen and (min-width: 920px) {
|
||||
.mobile {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -2,7 +2,8 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>
|
||||
{% block title %}
|
||||
|
|
@ -29,12 +30,30 @@
|
|||
{% block extra_css %}
|
||||
{# Override this in templates to add extra stylesheets #}
|
||||
{% endblock %}
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body class="{% block body_class %}{% endblock %}">
|
||||
|
||||
<body class="{% block body_class %}{% endblock %}">
|
||||
{% wagtailuserbar %}
|
||||
|
||||
|
||||
<div class="content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<svg class="background-image desktop" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img"
|
||||
aria-hidden="true">
|
||||
<defs>
|
||||
<filter id="noiseFilter">
|
||||
<feTurbulence type="turbulence" baseFrequency="5" numOctaves="10" seed="42" result="turb" />
|
||||
<feColorMatrix in="turb" type="saturate" values="0" result="mono" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect id="background" x="0" y="0" width="100%" height="100%" />
|
||||
<rect id="noise" x="0" y="0" width="100%" height="100%" filter="url(#noiseFilter)" />
|
||||
|
||||
</svg>
|
||||
|
||||
{# Global javascript #}
|
||||
<script type="text/javascript" src="{% static 'js/wagtail_ahl.js' %}"></script>
|
||||
|
|
@ -42,5 +61,6 @@
|
|||
{% block extra_js %}
|
||||
{# Override this in templates to add extra javascript #}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue