diff --git a/package.json b/package.json index 0780854..6965376 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "description": "website for sp-codes.de", "scripts": { - "compile-sass": "node-sass --output-style compressed --importer=node_modules/node-sass-tilde-importer src/scss/main.scss dist/css/main.css", + "compile-sass": "node-sass --output-style compressed --importer=node_modules/node-sass-tilde-importer src/scss/ -o dist/css/", "watch:eleventy": "eleventy --serve", "watch:sass": "npm run compile-sass -- --watch", "start": "npm-run-all compile-sass --parallel watch:*", diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 98618b1..338d3a6 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -31,7 +31,8 @@ title: sp-codes - + + diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk index 246a92a..b74ed9c 100644 --- a/src/_includes/layouts/home.njk +++ b/src/_includes/layouts/home.njk @@ -1,9 +1,11 @@ --- layout: base.njk --- -
+
- +
diff --git a/src/img/samuel.png b/src/img/samuel.png deleted file mode 100644 index 45d5f76..0000000 Binary files a/src/img/samuel.png and /dev/null differ diff --git a/src/img/sp-codes.ico b/src/img/sp-codes.ico new file mode 100644 index 0000000..afa2029 Binary files /dev/null and b/src/img/sp-codes.ico differ diff --git a/src/img/sp-codes.png b/src/img/sp-codes.png new file mode 100644 index 0000000..41f3dbf Binary files /dev/null and b/src/img/sp-codes.png differ diff --git a/src/img/sp-codes.svg b/src/img/sp-codes.svg new file mode 100644 index 0000000..d0b5348 --- /dev/null +++ b/src/img/sp-codes.svg @@ -0,0 +1 @@ + diff --git a/src/scss/logo.scss b/src/scss/logo.scss new file mode 100644 index 0000000..1172ba0 --- /dev/null +++ b/src/scss/logo.scss @@ -0,0 +1,49 @@ +// vivus instant logo animation + +.cEsZQnrx_0 { + stroke-dasharray: 1405 1407; + stroke-dashoffset: 1406; + animation: cEsZQnrx_draw 1300ms ease-out 0ms forwards; +} + +.cEsZQnrx_1 { + stroke-dasharray: 572 574; + stroke-dashoffset: 573; + animation: cEsZQnrx_draw 1300ms ease-out 175ms forwards; +} + +.cEsZQnrx_2 { + stroke-dasharray: 530 532; + stroke-dashoffset: 531; + animation: cEsZQnrx_draw 1300ms ease-out 350ms forwards; +} + +.cEsZQnrx_3 { + stroke-dasharray: 620 622; + stroke-dashoffset: 621; + animation: cEsZQnrx_draw 1300ms ease-out 525ms forwards; +} + +.cEsZQnrx_4 { + stroke-dasharray: 1088 1090; + stroke-dashoffset: 1089; + animation: cEsZQnrx_draw 1300ms ease-out 700ms forwards; +} + +@keyframes cEsZQnrx_draw { + 100% { + stroke-dashoffset: 0; + } +} + +@keyframes cEsZQnrx_fade { + 0% { + stroke-opacity: 1; + } + 93.54838709677419% { + stroke-opacity: 1; + } + 100% { + stroke-opacity: 0; + } +} diff --git a/src/scss/main.scss b/src/scss/main.scss index 7bb1a57..ebbac55 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -54,11 +54,13 @@ a { .logo { display: block; margin: 0 auto; - max-width: 256px; - max-height: 256px; - background-color: #fff; - border-radius: 50%; - border: 2px solid #000; + max-width: 128px; + max-height: 128px; + transition: transform .5s ease-in-out; + + &:hover { + transform: rotate(360deg); + } } .nav { @@ -265,8 +267,8 @@ pre { @media (max-width: 767.98px) { .logo { - max-width: 128px; - max-height: 128px; + max-width: 96px; + max-height: 96px; } .fa-4x { font-size: 2em; @@ -285,4 +287,4 @@ pre { width: 2em; height: 2em; } -} +} \ No newline at end of file