Font change social share

layouts/_default/baseof.html

@@ -17,6 +17,8 @@
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&display=swap"
     rel="stylesheet">
+  <script src="/js/popper.min.js"></script>
+
   {{- block "head" . -}}{{- end }}
   {{ else }}
   {{ end }}
@@ -46,6 +48,11 @@
   {{- partial "sections/v3/navbar.html" . -}}
   {{- block "main" . -}}{{- end }}
   {{- partial "sections/v3/footer.html" . -}}
+  <script>
+    $(function () {
+      $('[data-toggle="tooltip"]').tooltip()
+    })
+  </script>
   <script>
     $('.darkmode-label').click(function () {
       $("body").toggleClass("darkmode");

layouts/_default/single.html

@@ -20,6 +20,61 @@
 
 {{ if eq .Site.Params.version 3 }}
 <section style="font-family: 'Roboto', sans-serif;">
+
+  <div class="bottom-share d-none">
+    <div class="my-1 mb-3 share-container">
+      <div class="d-block my-1 text-center" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px">
+          <path fill="#03a9f4"
+            d="M42,37c0,2.762-2.239,5-5,5H11c-2.762,0-5-2.238-5-5V11c0-2.762,2.238-5,5-5h26c2.761,0,5,2.238,5,5 V37z" />
+          <path fill="#fff"
+            d="M36,17.12c-0.882,0.391-1.999,0.758-3,0.88c1.018-0.604,2.633-1.862,3-3 c-0.951,0.559-2.671,1.156-3.793,1.372C31.311,15.422,30.033,15,28.617,15C25.897,15,24,17.305,24,20v2c-4,0-7.9-3.047-10.327-6 c-0.427,0.721-0.667,1.565-0.667,2.457c0,1.819,1.671,3.665,2.994,4.543c-0.807-0.025-2.335-0.641-3-1c0,0.016,0,0.036,0,0.057 c0,2.367,1.661,3.974,3.912,4.422C16.501,26.592,16,27,14.072,27c0.626,1.935,3.773,2.958,5.928,3c-1.686,1.307-4.692,2-7,2 c-0.399,0-0.615,0.022-1-0.023C14.178,33.357,17.22,34,20,34c9.057,0,14-6.918,14-13.37c0-0.212-0.007-0.922-0.018-1.13 C34.95,18.818,35.342,18.104,36,17.12" />
+        </svg>
+      </div>
+
+      <div class="d-block my-1 text-center" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="48px" data-name="Layer 1" viewBox="0 0 32 32">
+          <path fill="#ea4435"
+            d="M16.58,19.1068l-12.69-8.0757A3,3,0,0,1,7.1109,5.97l9.31,5.9243L24.78,6.0428A3,3,0,0,1,28.22,10.9579Z" />
+          <path fill="#00ac47" d="M25.5,5.5h4a0,0,0,0,1,0,0v18a3,3,0,0,1-3,3h0a3,3,0,0,1-3-3V7.5a2,2,0,0,1,2-2Z"
+            transform="rotate(180 26.5 16)" />
+          <path fill="#ffba00"
+            d="M29.4562,8.0656c-.0088-.06-.0081-.1213-.0206-.1812-.0192-.0918-.0549-.1766-.0823-.2652a2.9312,2.9312,0,0,0-.0958-.2993c-.02-.0475-.0508-.0892-.0735-.1354A2.9838,2.9838,0,0,0,28.9686,6.8c-.04-.0581-.09-.1076-.1342-.1626a3.0282,3.0282,0,0,0-.2455-.2849c-.0665-.0647-.1423-.1188-.2146-.1771a3.02,3.02,0,0,0-.24-.1857c-.0793-.0518-.1661-.0917-.25-.1359-.0884-.0461-.175-.0963-.267-.1331-.0889-.0358-.1837-.0586-.2766-.0859s-.1853-.06-.2807-.0777a3.0543,3.0543,0,0,0-.357-.036c-.0759-.0053-.1511-.0186-.2273-.018a2.9778,2.9778,0,0,0-.4219.0425c-.0563.0084-.113.0077-.1689.0193a33.211,33.211,0,0,0-.5645.178c-.0515.022-.0966.0547-.1465.0795A2.901,2.901,0,0,0,23.5,8.5v5.762l4.72-3.3043a2.8878,2.8878,0,0,0,1.2359-2.8923Z" />
+          <path fill="#4285f4" d="M5.5,5.5h0a3,3,0,0,1,3,3v18a0,0,0,0,1,0,0h-4a2,2,0,0,1-2-2V8.5a3,3,0,0,1,3-3Z" />
+          <path fill="#c52528"
+            d="M2.5439,8.0656c.0088-.06.0081-.1213.0206-.1812.0192-.0918.0549-.1766.0823-.2652A2.9312,2.9312,0,0,1,2.7426,7.32c.02-.0475.0508-.0892.0736-.1354A2.9719,2.9719,0,0,1,3.0316,6.8c.04-.0581.09-.1076.1342-.1626a3.0272,3.0272,0,0,1,.2454-.2849c.0665-.0647.1423-.1188.2147-.1771a3.0005,3.0005,0,0,1,.24-.1857c.0793-.0518.1661-.0917.25-.1359A2.9747,2.9747,0,0,1,4.3829,5.72c.089-.0358.1838-.0586.2766-.0859s.1853-.06.2807-.0777a3.0565,3.0565,0,0,1,.357-.036c.076-.0053.1511-.0186.2273-.018a2.9763,2.9763,0,0,1,.4219.0425c.0563.0084.113.0077.169.0193a2.9056,2.9056,0,0,1,.286.0888,2.9157,2.9157,0,0,1,.2785.0892c.0514.022.0965.0547.1465.0795a2.9745,2.9745,0,0,1,.3742.21A2.9943,2.9943,0,0,1,8.5,8.5v5.762L3.78,10.9579A2.8891,2.8891,0,0,1,2.5439,8.0656Z" />
+        </svg>
+      </div>
+
+      <div class="d-block my-1 text-center" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="38px" height="48px">
+          <path fill="#4CAF50"
+            d="M8.002 0h-.004C3.587 0 0 3.588 0 8a7.94 7.94 0 0 0 1.523 4.689l-.997 2.972 3.075-.983A7.93 7.93 0 0 0 8.002 16C12.413 16 16 12.411 16 8s-3.587-8-7.998-8z" />
+          <path fill="#FAFAFA"
+            d="M12.657 11.297c-.193.545-.959.997-1.57 1.129-.418.089-.964.16-2.802-.602-2.351-.974-3.865-3.363-3.983-3.518-.113-.155-.95-1.265-.95-2.413s.583-1.707.818-1.947c.193-.197.512-.287.818-.287.099 0 .188.005.268.009.235.01.353.024.508.395.193.465.663 1.613.719 1.731.057.118.114.278.034.433-.075.16-.141.231-.259.367-.118.136-.23.24-.348.386-.108.127-.23.263-.094.498.136.23.606.997 1.298 1.613.893.795 1.617 1.049 1.876 1.157.193.08.423.061.564-.089.179-.193.4-.513.625-.828.16-.226.362-.254.574-.174.216.075 1.359.64 1.594.757.235.118.39.174.447.273.056.099.056.564-.137 1.11z" />
+        </svg>
+      </div>
+    </div>
+
+    <div class="text-center" data-toggle="tooltip" data-placement="left" title="Share this article">
+      <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 25 25">
+        <g transform="translate(0 -1027.362)">
+          <circle cx="657.054" cy="437.094" r="15.268" fill="#9257a2" fill-rule="evenodd"
+            transform="translate(-525.439 682.007) scale(.81871)" />
+          <path fill="#6c4676"
+            style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal"
+            d="M 12.943359 24.984375 A 12.5 12.5 0 0 0 13.384766 24.96875 A 12.5 12.5 0 0 0 14.625 24.818359 A 12.5 12.5 0 0 0 15.84375 24.544922 A 12.5 12.5 0 0 0 17.029297 24.150391 A 12.5 12.5 0 0 0 18.169922 23.640625 A 12.5 12.5 0 0 0 19.253906 23.017578 A 12.5 12.5 0 0 0 20.269531 22.291016 A 12.5 12.5 0 0 0 21.208984 21.466797 A 12.5 12.5 0 0 0 22.060547 20.552734 A 12.5 12.5 0 0 0 22.816406 19.558594 A 12.5 12.5 0 0 0 23.470703 18.492188 A 12.5 12.5 0 0 0 24.013672 17.367188 A 12.5 12.5 0 0 0 24.441406 16.193359 A 12.5 12.5 0 0 0 24.496094 15.974609 L 14.265625 5.7441406 C 13.812473 5.2910406 13.187396 5.0097656 12.5 5.0097656 C 11.12521 5.0097656 10 6.1349656 10 7.5097656 C 10 7.5307656 10.005259 7.5493125 10.005859 7.5703125 C 9.4896699 7.8077125 9.0133544 8.1147296 8.5878906 8.4804688 C 8.374766 8.6636758 8.1738297 8.8614634 7.9882812 9.0722656 C 7.0619905 10.124095 6.5 11.499953 6.5 13.009766 C 6.5 13.488466 6.573385 13.948784 6.6796875 14.396484 C 5.9748502 14.839884 5.5 15.620266 5.5 16.509766 C 5.5 17.197166 5.7812253 17.822291 6.234375 18.275391 L 12.943359 24.984375 z "
+            color="#000" font-family="sans-serif" font-weight="400" transform="translate(0 1027.362)" />
+          <path fill="#fff"
+            d="m 7.9941406,1 c -1.3747895,0 -2.5,1.1252 -2.5,2.5 0,0.02072 0.00535,0.039943 0.00586,0.060547 C 3.4352817,4.5101164 1.9941406,6.5842949 1.9941406,9 c 0,0.4787281 0.073385,0.9389814 0.1796875,1.386719 C 1.4689908,10.830108 0.99414062,11.610545 0.99414062,12.5 c 0,1.3748 1.12521048,2.5 2.49999998,2.5 0.6665407,0 1.2712865,-0.268072 1.7207032,-0.697266 C 6.0479519,14.74009 6.9900874,15 7.9941406,15 8.9981981,15 9.9421095,14.741984 10.775391,14.304688 11.224611,14.732762 11.828584,15 12.494141,15 c 1.374789,0 2.5,-1.1252 2.5,-2.5 0,-0.887901 -0.472993,-1.667522 -1.175782,-2.111328 C 13.924794,9.941126 13.994141,9.4787929 13.994141,9 c 0,-2.4173981 -1.439125,-4.4947611 -3.50586,-5.4433594 4.46e-4,-0.019294 0.0059,-0.037245 0.0059,-0.056641 0,-1.3748 -1.1252108,-2.5 -2.5000004,-2.5 z m 0,1 c 0.8343495,0 1.5,0.6657 1.5,1.5 0,0.8344 -0.6656505,1.5 -1.5,1.5 -0.8343494,0 -1.5,-0.6656 -1.5,-1.5 0,-0.8343 0.6656506,-1.5 1.5,-1.5 z M 5.7363281,4.5507812 C 6.1363719,5.4015827 6.9962448,6 7.9941406,6 8.9914269,6 9.8515843,5.4027009 10.251953,4.5527344 11.874506,5.3778725 12.994141,7.0495149 12.994141,9 c 0,0.358063 -0.04812,0.702711 -0.119141,1.039062 C 12.74983,10.019561 12.62455,10 12.494141,10 c -1.37479,0 -2.5000004,1.1252 -2.5000004,2.5 0,0.347738 0.073318,0.676884 0.2031254,0.978516 C 9.5317018,13.806899 8.7887215,14 7.9941406,14 7.1996182,14 6.4561816,13.808725 5.7910156,13.480469 5.9212525,13.178414 5.9941406,12.848348 5.9941406,12.5 c 0,-1.3748 -1.1252104,-2.5 -2.5,-2.5 C 3.3643933,10 3.2397998,10.01975 3.1152344,10.03906 3.0437876,9.7026723 2.9941406,9.3583587 2.9941406,9 c 0,-1.9503184 1.1196952,-3.6242663 2.7421875,-4.4492188 z M 3.4941406,11 c 0.8343495,0 1.5,0.6657 1.5,1.5 0,0.8344 -0.6656505,1.5 -1.5,1.5 -0.8343494,0 -1.5,-0.6656 -1.5,-1.5 0,-0.8343 0.6656506,-1.5 1.5,-1.5 z m 9.0000004,0 c 0.834349,0 1.5,0.6657 1.5,1.5 0,0.8344 -0.665651,1.5 -1.5,1.5 -0.83435,0 -1.5,-0.6656 -1.5,-1.5 0,-0.8343 0.66565,-1.5 1.5,-1.5 z"
+            color="#000" font-family="sans-serif" font-weight="400" overflow="visible"
+            transform="translate(4.506 1031.372)"
+            style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal" />
+        </g>
+      </svg>
+    </div>
+  </div>
   <div class="container">
     <div class="row blog-page-color">
       <div class="col-md-9 py-4 px-0">

layouts/index.html

@@ -53,10 +53,12 @@
 <head>
   <title>{{- .Site.Title -}}</title>
   <meta name="description" content="{{ .Site.Params.description }}">
+
+
   <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet"
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    media="all">
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
   {{ template "_internal/google_analytics.html" . }}
   {{- partial "sections/v3/head.html" . -}}
   <link rel="stylesheet" href="/css/v3/v3.css" media="all">
@@ -162,6 +164,9 @@
       $(".text-muted")
         .addClass("darkmode-text-muted")
         .removeClass("text-muted");
+      $(".about-backdark").toggleClass("about-back");
+      $(".education-backdark").toggleClass("education-back");
+      $(".achievements-backdark").toggleClass("achievements-back");
     }
   </script>
 </body>

static/css/v3/post.css

@@ -5,6 +5,19 @@ body {
   font-family: "Roboto", sans-serif;
   background-color: #eaedf0;
 }
+
+.bottom-share {
+  position: fixed;
+  z-index: 1000;
+  bottom: 20px;
+  right: 25px;
+}
+.bottom-share button {
+  overflow: hidden;
+  height: 50px;
+  width: 50px;
+  border-radius: 50%;
+}
 .blog-page-color {
   color: #3a3b3c !important;
 }

static/css/v3/v3.css

@@ -2,7 +2,7 @@ html {
   scroll-behavior: smooth;
 }
 body {
-  font-family: "Roboto", sans-serif;
+  font-family: "Noto Sans KR", sans-serif;
   background-color: #eaedf0;
 }
 a:hover {
@@ -12,7 +12,7 @@ a:hover {
 /* v3 home */
 .name {
   padding-left: 3%;
-  border-left: 3px solid #007bff;
+  border-left: 4px solid #007bff;
 }
 .hi-text {
   font-size: 20px;
@@ -35,6 +35,8 @@ a:hover {
   border-radius: 50px !important;
   cursor: pointer;
   font-size: 18px;
+  font-weight: 500 !important;
+  border: 2px solid;
 }
 .social-icon {
   padding: 2%;
@@ -110,6 +112,8 @@ a:hover {
   padding-right: 2%;
   font-size: 17px;
   border: 1px solid #007bff;
+  border-radius: 5%;
+  border-radius: 10px !important;
 }
 .contact-btn:hover {
   color: #007bff !important;
@@ -330,7 +334,7 @@ a:hover {
 
 /* v3 Achievements */
 .achievements-back {
-  background-color: #e5e6df;
+  background-color: #dce6f1;
 }
 .achiv-card:hover {
   filter: grayscale(100%);