diff --git a/sass/style.scss b/sass/style.scss index ce97179..c40d07e 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,18 +1,26 @@ /* latin-ext */ @font-face { - font-family: 'Annie Use Your Telescope'; - font-style: normal; - font-weight: 400; - src: url("fonts/AnnieUseYourTelescope-Regular.ttf"); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; + font-family: 'Annie Use Your Telescope'; + font-style: normal; + font-weight: 400; + src: url("fonts/AnnieUseYourTelescope-Regular.ttf"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } + /* latin */ @font-face { - font-family: 'Annie Use Your Telescope'; - font-style: normal; - font-weight: 400; - src: url("fonts/AnnieUseYourTelescope-Regular.ttf"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + font-family: 'Annie Use Your Telescope'; + font-style: normal; + font-weight: 400; + src: url("fonts/AnnieUseYourTelescope-Regular.ttf"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +:root { + --carousel-width: 90%; + --background-color: #604845; + --font-color: #f0dfd8; + --duration: 20s; } h1, @@ -24,29 +32,41 @@ h5 { font-weight: 900; } -@media screen and (min-width: 920px) { - html { - font-size: 300%; - } -} - -/* 16px */ - - -:root { - --carousel-width: -2990px; +a { + text-decoration: none; } body { font-family: 'Annie Use Your Telescope'; font-weight: 600; - width: 80%; + width: 90%; align-self: center; text-align: center; margin: auto; + background-color: var(--background-color); + color: var(--font-color); } +@media screen and (min-width: 920px) { + :root { + --carousel-width: 70%; + + } + + html { + font-size: 300%; + } + + body { + width: 70%; + } +} + +/* 16px */ + + + .header { display: flex; position: sticky; @@ -54,76 +74,163 @@ body { } .header-element { - // align-items: center; - // justify-content: center; align-content: center; margin-left: 1em; margin-right: 1em; - } .header-element>img { height: 10ex; } -@keyframes scroll { - 0% { - transform: translateX(0); - } +.header-element>.button { + font-family: 'Annie Use Your Telescope'; + font-size: 100%; + font-weight: 600; + padding: 1ex 1em; + border: 1px outset var(--font-color); + border-radius: 1ex; + color: var(--font-color); + background-color: var(--background-color); + text-decoration: none; + transition: border 300ms, color 300ms, background-color 300ms; + text-wrap: nowrap; +} - 100% { - transform: translateX(var(--carousel-width)); +.header-element>.button:hover { + border: 1px inset var(--font-color); + color: var(--background-color); + background-color: var(--font-color); +} + +@media screen and (min-width: 920px) { + .mobile { + display: none; + visibility: hidden; } } -// @media screen and (min-width: 920px) { - .carousel::before, - .carousel::after { - background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); - content: ""; - height: 100%; - position: absolute; - width: 5%; - z-index: 2; +@media screen and (max-width: 920px) { + .desktop { + display: none; + visibility: hidden; } -// } -.carousel::after { - right: 0; - top: 0; - transform: rotateZ(180deg); + .header { + flex-direction: column; + } } -.carousel::before { - left: 0; - top: 0; -} .carousel { position: relative; + height: 60vh; +} + + +.slides { + height: 100%; + width: 100%; + position: relative; +} + +.slide { + position: absolute; + inset: 0; + /* top:0;right:0;bottom:0;left:0 */ display: flex; - flex-direction: row; - overflow: hidden; + align-items: center; + justify-content: center; + padding: 1rem; + opacity: 0; + transform: scale(1.02); + animation: fade var(--duration) linear infinite; + will-change: opacity, transform; } -// .carousel>.overlay { -// position: absolute; -// top: 0; -// left: 0; -// height: 100%; -// width: 100%; -// background: rgba(255, 0, 0, 0); -// background: radial-gradient(ellipse farthest-corner at center center, rgba(255, 0, 0, 0) 0%, #fff 80%); -// } - -.carousel-element { - animation: scroll 70s linear infinite; - background: #ffffff; - background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%); +/* Stagger the animation start times so slides take turns being visible */ +.slide:nth-child(1) { + animation-delay: calc(var(--duration) * 0/5 * -1); } -.carousel-element>img { +.slide:nth-child(2) { + animation-delay: calc(var(--duration) * 1/5 * -1); +} - height: 50vh; -} \ No newline at end of file +.slide:nth-child(3) { + animation-delay: calc(var(--duration) * 2/5 * -1); +} + +.slide:nth-child(4) { + animation-delay: calc(var(--duration) * 3/5 * -1); +} + +.slide:nth-child(5) { + animation-delay: calc(var(--duration) * 4/5 * -1); +} + + +@keyframes fade { + + /* Each slide is visible for 16% of the cycle (approx) and fades in/out smoothly */ + 0% { + opacity: 0; + transform: scale(1.02); + } + + 4% { + opacity: 1; + transform: scale(1); + } + + 20% { + opacity: 1; + transform: scale(1); + } + + 24% { + opacity: 0; + transform: scale(0.98); + } + + 100% { + opacity: 0; + transform: scale(0.98); + } +} + + +/* The images can have different intrinsic sizes — we center and preserve their aspect. */ +.slide img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + /* preserve image shape, letterbox if necessary */ + border-radius: 8px; + box-shadow: 0 6px 20px rgba(2, 6, 23, 0.35); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.06)); +} + +.footer { + background-color: var(--font-color); + color: var(--background-color); + border-radius: 1ex; + padding: 1ex; +} + +.footer-box { + display: flex; + flex-direction: column; +} + +.footer svg { + height: 4ex; +} + +.footer-item { + display: flex; + justify-content: space-around; + align-items: center; + text-align: left; +} diff --git a/templates/about.html b/templates/about.html index 4afde78..91491c7 100644 --- a/templates/about.html +++ b/templates/about.html @@ -9,31 +9,23 @@ {{ page.content | safe }}

-
- +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
{% endblock content %} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index ac8c5f8..a60aa6a 100644 --- a/templates/base.html +++ b/templates/base.html @@ -9,20 +9,83 @@ -
+
- Home + Home
oldrabbittown
- Über mich + Über mich
+
+
+ oldrabbittown +
+
+ Home + Über mich +
+
+
{% block content %} {% endblock content %}
+
+

Kontakt

+
+
+
+ + + + +

Beruflich: dienstleistungen.wicke@gmx.de +
Privat: manuel.wicke@gmx.de +

+
+
+ + + +

01621847185

+
+
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+
\ No newline at end of file