diff --git a/content/_index.md b/content/_index.md index fddc653..4a0c530 100644 --- a/content/_index.md +++ b/content/_index.md @@ -2,8 +2,8 @@ title = "June" [extra] -avatar = "june.png" -style = "dracula.css" +avatar = "memoji.jpg" +style = "never-dreamed-of-this.css" twitter = "https://twitter.com/juin_en_anglais" mastodon = "https://social.lacoloc.cafe/june" liberapay = "https://liberapay.com/juin_en_anglais/" diff --git a/sass/memoji.scss b/sass/memoji.scss new file mode 100644 index 0000000..dbf0f52 --- /dev/null +++ b/sass/memoji.scss @@ -0,0 +1,146 @@ +/* + Color scheme based on my memoji +*/ + +:root { + --font-family: 'b612'; + --font: 'b612', sans-serif; + + --buff: #f4da95ff; + --beaver: #b48b78ff; + --medium-champagne: #feecadff; + --eerie-black: #141416ff; + --baby-pink: #e0b9b1ff; + --bdazzled-blue: #3D5B90; + --royal-blue-dark: #001D60; +} + +@font-face { + font-family: 'b612'; + src: url('fonts/b612-regular.ttf') format('truetype'); +} + +body{ + background-color: var(--medium-champagne); + color: var(--royal-blue-dark); +} + +footer{ + text-align: center; + + color:var(--eerie-black); + + font-family: var(--font); + font-size: 0.75rem; + font-weight: 400; +} + +footer a { + color: var(--royal-blue-dark) +} + +#userPhoto{ + width: 96px; + height: 96px; + + display: block; + + margin: 35px auto 20px; + + border-radius: 50%; + border: solid var(--bdazzled-blue) 2px; +} + +#userName{ + width: 100%; + + color: var(--eerie-black); + + 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(--medium-champagne); + color:var(--royal-blue-dark); + + font-family: var(--font); + font-size: 1rem; + font-weight: 500; + + border-radius: 5px; + border: solid var(--royal-blue-dark) 1px; + + text-align: center; + text-decoration: none; + + transition: all .25s cubic-bezier(.08,.59,.29,.99); + +} + +.link:hover{ + background-color: var(--royal-blue-dark); + color: var(--medium-champagne); +} + +#social-links { + display: flex; + justify-content: center; +} + +.social { + background-color: var(--royal-blue-dark); + height: 32px; + width: 32px; + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; //webkit compatibility + mask-position: center; + -webkit-mask-position: center; //webkit compatibility + display: inline-block; +} +.social:hover { + background-color: var(--eerie-black); +} +.social#instagram { + mask-image: url("/img/social/instagram.svg"); + -webkit-mask-image: url("/img/social/instagram.png"); //webkit compatibility +} +.social#liberapay { + mask-image: url("/img/social/liberapay.svg"); + -webkit-mask-image: url("/img/social/liberapay.png"); //webkit compatibility +} +.social#linkedin { + mask-image: url("/img/social/linkedin.svg"); + -webkit-mask-image: url("/img/social/linkedin.png"); //webkit compatibility +} +.social#mastodon { + mask-image: url("/img/social/mastodon.svg"); + -webkit-mask-image: url("/img/social/mastodon.png"); //webkit compatibility +} +.social#pleroma { + mask-image: url("/img/social/pleroma.svg"); + -webkit-mask-image: url("/img/social/pleroma.png"); //webkit compatibility +} +.social#twitter { + mask-image: url("/img/social/twitter.svg"); + -webkit-mask-image: url("/img/social/twitter.png"); //webkit compatibility +} diff --git a/static/img/pfp/memoji.jpg b/static/img/pfp/memoji.jpg new file mode 100644 index 0000000..c7949e0 Binary files /dev/null and b/static/img/pfp/memoji.jpg differ