Memoji + color scheme

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/"

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
+}