Flatten edges

main
Martin Braun 4 hours ago
parent 7d1c5bf469
commit b60aaacc16
  1. 2
      en/imprint.html
  2. 2
      en/index.html
  3. 2
      en/join.html
  4. 2
      en/program.html
  5. 2
      en/recap.html
  6. 2
      en/venue.html
  7. 2
      imprint.html
  8. 2
      index.html
  9. 2
      program.html
  10. 2
      recap.html
  11. 75
      styles-5.3.css
  12. 2
      venue.html

@ -8,7 +8,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="../image/poster.png" />
<link rel="stylesheet" type="text/css" href="../styles-5.2.css">
<link rel="stylesheet" type="text/css" href="../styles-5.3.css">
<title>5th Tübingen Digital Freedom Days</title>
</head>

@ -8,7 +8,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="../image/poster.png" />
<link rel="stylesheet" type="text/css" href="../styles-5.2.css">
<link rel="stylesheet" type="text/css" href="../styles-5.3.css">
<title>5th Tübingen Digital Freedom Days</title>
</head>

@ -8,7 +8,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="../image/poster.png" />
<link rel="stylesheet" type="text/css" href="../styles-5.2.css">
<link rel="stylesheet" type="text/css" href="../styles-5.3.css">
<title>5th Tübingen Digital Freedom Days</title>
</head>

@ -8,7 +8,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="../image/poster.png" />
<link rel="stylesheet" type="text/css" href="../styles-5.2.css">
<link rel="stylesheet" type="text/css" href="../styles-5.3.css">
<title>5th Tübingen Digital Freedom Days</title>
</head>

@ -8,7 +8,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="../image/poster.png" />
<link rel="stylesheet" type="text/css" href="../styles-5.2.css">
<link rel="stylesheet" type="text/css" href="../styles-5.3.css">
<title>5th Tübingen Digital Freedom Days</title>
</head>

@ -8,7 +8,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="../image/poster.png" />
<link rel="stylesheet" type="text/css" href="../styles-5.2.css">
<link rel="stylesheet" type="text/css" href="../styles-5.3.css">
<script src="../venue.js"></script>
<title>5th Tübingen Digital Freedom Days</title>
</head>

@ -8,7 +8,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png" />
<link rel="stylesheet" type="text/css" href="styles-5.2.css">
<link rel="stylesheet" type="text/css" href="styles-5.3.css">
<title>5. Tübinger Tage der digitalen Freiheit</title>
</head>

@ -8,7 +8,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png" />
<link rel="stylesheet" type="text/css" href="styles-5.2.css">
<link rel="stylesheet" type="text/css" href="styles-5.3.css">
<title>5. Tübinger Tage der digitalen Freiheit</title>
</head>

@ -8,7 +8,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png" />
<link rel="stylesheet" type="text/css" href="styles-5.2.css">
<link rel="stylesheet" type="text/css" href="styles-5.3.css">
<title>5. Tübinger Tage der digitalen Freiheit</title>
</head>

@ -8,7 +8,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png" />
<link rel="stylesheet" type="text/css" href="styles-5.2.css">
<link rel="stylesheet" type="text/css" href="styles-5.3.css">
<title>5. Tübinger Tage der digitalen Freiheit</title>
</head>

@ -3,6 +3,36 @@
* Handcrafted with by x~alotl
*/
/**
* Variables
**/
:root {
/* Colors */
--plum: #26175e;
--sage: #f0fff1;
--box: #f0fff1;
--text: #26175e;
--button: #52ffdc;
--active: #2b8b8d;
--link: #3203dd;
--shadowRgb: 125, 112, 122;
--boxShadow: 0 0 12px rgba(var(--shadowRgb), 0.3);
/* Animated Title */
--weightMin: 200;
--weightMax: 900;
--duration: 2200ms;
--step: 70ms;
/* Box Clipping */
--boxEdge: 40px;
}
/**
* Font Faces
*/
@ -36,29 +66,6 @@
/**
* Global Variables
**/
:root {
--plum: #26175e;
--sage: #f0fff1;
--box: #f0fff1;
--text: #26175e;
--button: #52ffdc;
--active: #2b8b8d ;
--link: #3203dd;
--shadow-rgb: 125, 112, 122;
--box-shadow: 0 0 12px rgba(var(--shadow-rgb), 0.3);
/* Animated Title Variables */
--wght-min: 200;
--wght-max: 900;
--dur: 2200ms;
--step: 70ms;
}
/**
* Base
@ -217,7 +224,13 @@ b {
margin-bottom: 2em;
padding: 0.5em 2em 1.4em 2em;
border: none;
box-shadow: var(--box-shadow);
box-shadow: var(--boxShadow);
clip-path: polygon(var(--boxEdge) 0%,
100% 0%,
100% calc(100% - var(--boxEdge)),
calc(100% - var(--boxEdge)) 100%,
0% 100%,
0% var(--boxEdge));
}
.box-grid {
@ -278,7 +291,7 @@ b {
transition: background-color 0.3s ease;
border-radius: 0;
margin: 0 auto;
box-shadow: var(--box-shadow);
box-shadow: var(--boxShadow);
}
.button:hover {
@ -374,12 +387,12 @@ b {
transition: background-color 0.3s ease, color 0.3s ease;
text-align: center;
margin: 0 5px;
box-shadow: var(--box-shadow);
box-shadow: var(--boxShadow);
}
.navigationbar a:hover {
transform: scale(1.1);
box-shadow: 0 0 16px rgba(var(--shadow-rgb), 0.5);
box-shadow: 0 0 16px rgba(var(--shadowRgb), 0.5);
}
.navigationbar a.active {
@ -427,8 +440,8 @@ b {
.title .ch {
display: inline-block;
will-change: font-variation-settings;
font-variation-settings: "wght" var(--wght-min);
animation: wghtWave var(--dur) cubic-bezier(.45, 0, .1, 1) infinite alternate;
font-variation-settings: "wght" var(--weightMin);
animation: wghtWave var(--duration) cubic-bezier(.45, 0, .1, 1) infinite alternate;
animation-delay: calc(var(--i) * var(--step));
}
@ -439,11 +452,11 @@ b {
@keyframes wghtWave {
from {
font-variation-settings: "wght" var(--wght-min);
font-variation-settings: "wght" var(--weightMin);
}
to {
font-variation-settings: "wght" var(--wght-max);
font-variation-settings: "wght" var(--weightMax);
}
}

@ -8,7 +8,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png" />
<link rel="stylesheet" type="text/css" href="styles-5.2.css">
<link rel="stylesheet" type="text/css" href="styles-5.3.css">
<script src="venue.js"></script>
<title>5. Tübinger Tage der digitalen Freiheit</title>
</head>

Loading…
Cancel
Save