From f250bff42eab36933f6107685394fcf0d479431d Mon Sep 17 00:00:00 2001 From: Junon Date: Mon, 26 Apr 2021 17:28:37 +0200 Subject: [PATCH] Manage social links --- content/_index.md | 12 ++--- public/dracula.css | 1 + sass/darkmode.scss | 78 --------------------------------- sass/dracula.scss | 37 +++++++++++++++- static/img/social/instagram.svg | 45 +++++++++++++++++++ static/img/social/liberapay.svg | 1 + static/img/social/linkedin.svg | 45 +++++++++++++++++++ static/img/social/mastodon.svg | 1 + static/img/social/pleroma.svg | 1 + static/img/social/twitter.svg | 49 +++++++++++++++++++++ templates/index.html | 33 ++++++++++++++ 11 files changed, 215 insertions(+), 88 deletions(-) create mode 100644 public/dracula.css delete mode 100644 sass/darkmode.scss create mode 100644 static/img/social/instagram.svg create mode 100644 static/img/social/liberapay.svg create mode 100644 static/img/social/linkedin.svg create mode 100644 static/img/social/mastodon.svg create mode 100644 static/img/social/pleroma.svg create mode 100644 static/img/social/twitter.svg diff --git a/content/_index.md b/content/_index.md index 4c5b0cd..4abf683 100644 --- a/content/_index.md +++ b/content/_index.md @@ -4,6 +4,9 @@ title = "June" [extra] avatar = "june.png" style = "dracula.css" +twitter = "https://twitter.com/The_DNS_Witch" +pleroma = "https://social.lacoloc.cafe/june" +liberapay = "https://liberapay.com/June_Cafe/" +++ ## DNS Witch, le collectif @@ -21,14 +24,5 @@ style = "dracula.css" ## Blog ### https://june.blog.wehost.lgbt -## Liberapay -### https://liberapay.com/June_Cafe/ - ## uTip ### https://utip.io/june_cafe - -## Twitter -### https://twitter.com/The_DNS_Witch - -## Fediverse -### https://social.lacoloc.cafe/june diff --git a/public/dracula.css b/public/dracula.css new file mode 100644 index 0000000..6affbf1 --- /dev/null +++ b/public/dracula.css @@ -0,0 +1 @@ +:root{--font-family: 'b612';--font: 'b612', sans-serif;--background: #282a36;--selection:#44475a;--comment:#6272a4;--purple:#bd93f9;--white:#f8f8f2;--pink:#ff79c6;--orange: #ffb86c}@font-face{font-family:'b612';src:url("fonts/b612-regular.ttf") format("truetype")}body{background-color:var(--background);color:var(--white)}footer{text-align:center;color:var(--comment);font-family:var(--font);font-size:0.75rem;font-weight:400}footer a{color:var(--orange)}#userPhoto{width:96px;height:96px;display:block;margin:35px auto 20px;border-radius:50%;border:solid var(--purple) 2px}#userName{width:100%;color:var(--pink);font-family:var(--font);font-size:1rem;font-weight:400;text-align:center;text-decoration:none;line-height:1.25;display:block}#links{max-width:675px;width:auto;display:block;margin:27px auto}.link{display:block;margin-bottom:20px;padding:17px;background-color:var(--background);color:var(--comment);font-family:var(--font);font-size:1rem;font-weight:500;border-radius:5px;border:solid var(--purple) 1px;text-align:center;text-decoration:none;transition:all 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99)}.link:hover{background-color:var(--selection);color:var(--purple)}#social-links{display:flex;justify-content:center}.social{background-color:var(--comment);height:32px;width:32px;mask-repeat:no-repeat;mask-position:center;display:inline-block}.social:hover{background-color:var(--purple)}#instagram.social{mask-image:url("/img/social/instagram.svg")}#liberapay.social{mask-image:url("/img/social/liberapay.svg")}#linkedin.social{mask-image:url("/img/social/linkedin.svg")}#mastodon.social{mask-image:url("/img/social/mastodon.svg")}#pleroma.social{mask-image:url("/img/social/pleroma.svg")}#twitter.social{mask-image:url("/img/social/twitter.svg")} diff --git a/sass/darkmode.scss b/sass/darkmode.scss deleted file mode 100644 index 4ddca1e..0000000 --- a/sass/darkmode.scss +++ /dev/null @@ -1,78 +0,0 @@ -/* - DarkMode style sheet is based on the work of izmcm : - https://github.com/MichaelBarney/LinkFree/commits/master/Templates/DarkMode/ -*/ - -:root { - --bgColor:#1C1C1C; - --accentColor: #E6E6E6; - --font: 'b612', sans-serif; -} - -@font-face { - font-family: 'b612'; - src: url('fonts/b612-regular.ttf') format('truetype'); -} - -body{ - background-color: var(--bgColor); -} - -#userPhoto{ - width: 110px; - height: 110px; - display: block; - margin: 35px auto 20px; - border-radius: 50%; -} - -#userName{ - color: #bbb; - font-size: 1rem; - font-weight: 600; - line-height: 1.25; - display: block; - font-family: var(--font); - width: 100%; - text-align: center; - text-decoration: none; -} - -#links{ - max-width: 675px; - width: auto; - display: block; - margin: 27px auto; -} -.link{ - display: block; - background-color: var(--accentColor); - color: var(--bgColor); - font-family: var(--font); - text-align: center; - margin-bottom: 20px; - padding: 17px; - text-decoration: none; - font-size: 1rem; - transition: all .25s cubic-bezier(.08,.59,.29,.99); - border: solid var(--accentColor) 2px; -} - -.link:hover{ - background-color: var(--bgColor); - color: var(--accentColor); -} - -footer{ - text-align: center; - - color: #bbb; - - font-family: var(--font); - font-size: 0.75rem; - font-weight: 400; -} - -footer a { - color: var(--accentColor) -} \ No newline at end of file diff --git a/sass/dracula.scss b/sass/dracula.scss index 3cb1b1b..9c30c98 100644 --- a/sass/dracula.scss +++ b/sass/dracula.scss @@ -101,4 +101,39 @@ footer a { .link:hover{ background-color: var(--selection); color: var(--purple); -} \ No newline at end of file +} + +#social-links { + display: flex; + justify-content: center; +} + +.social { + background-color: var(--comment); + height: 32px; + width: 32px; + mask-repeat: no-repeat; + mask-position: center; + display: inline-block; +} +.social:hover { + background-color: var(--purple); +} +.social#instagram { + mask-image: url("/img/social/instagram.svg"); +} +.social#liberapay { + mask-image: url("/img/social/liberapay.svg"); +} +.social#linkedin { + mask-image: url("/img/social/linkedin.svg"); +} +.social#mastodon { + mask-image: url("/img/social/mastodon.svg"); +} +.social#pleroma { + mask-image: url("/img/social/pleroma.svg"); +} +.social#twitter { + mask-image: url("/img/social/twitter.svg"); +} diff --git a/static/img/social/instagram.svg b/static/img/social/instagram.svg new file mode 100644 index 0000000..85912ed --- /dev/null +++ b/static/img/social/instagram.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/social/liberapay.svg b/static/img/social/liberapay.svg new file mode 100644 index 0000000..bf78965 --- /dev/null +++ b/static/img/social/liberapay.svg @@ -0,0 +1 @@ +Liberapay icon \ No newline at end of file diff --git a/static/img/social/linkedin.svg b/static/img/social/linkedin.svg new file mode 100644 index 0000000..7c7cf97 --- /dev/null +++ b/static/img/social/linkedin.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/social/mastodon.svg b/static/img/social/mastodon.svg new file mode 100644 index 0000000..b84142a --- /dev/null +++ b/static/img/social/mastodon.svg @@ -0,0 +1 @@ +Mastodon icon \ No newline at end of file diff --git a/static/img/social/pleroma.svg b/static/img/social/pleroma.svg new file mode 100644 index 0000000..d2a7b7d --- /dev/null +++ b/static/img/social/pleroma.svg @@ -0,0 +1 @@ +Pleroma icon \ No newline at end of file diff --git a/static/img/social/twitter.svg b/static/img/social/twitter.svg new file mode 100644 index 0000000..3d8eb70 --- /dev/null +++ b/static/img/social/twitter.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/templates/index.html b/templates/index.html index b1b9a6e..cccc8cf 100644 --- a/templates/index.html +++ b/templates/index.html @@ -33,6 +33,39 @@ {% endfor %} {% endif %} {% endfor %} + + {% endif %} {% endblock toc %}