Merge pull request #14 from AdamasFR/feature/profile_background_png

Feature > Utiliser un fond transparent pour la photo de profil

_sass/dark-theme.scss

@@ -54,4 +54,9 @@
     p{
         color:white;
     }
+
+    #photoProfil{
+        background-color:darken(#5c9ead,30%);
+    }
+
 }

_sass/main.scss

@@ -60,7 +60,6 @@ body{
 
 @import "../node_modules/bulma/bulma";
 @import "icon";
-@import "dark-theme";
 
 #idCard {
 
@@ -132,16 +131,9 @@ footer small{
     color:$white;
 }
 
-#photoProfil.dark{
-    display:none;
+// Photo de Profil
+#photoProfil{
+    background-color:lightgray;
 }
 
-@media (prefers-color-scheme: dark){
-    #photoProfil.dark{
-        display:block;
-    }
-
-    #photoProfil.light{
-        display:none;
-    }
-}
+@import "dark-theme";

css/main.css

@@ -7032,41 +7032,6 @@ label.panel-block {
 .icon-print:before {
   content: "\e906"; }
 
-/**
-    Dark Theme
-**/
-@media (prefers-color-scheme: dark) {
-  .dark-theme-only {
-    display: inline; }
-  .hero {
-    background-color: #1d343a !important;
-    color: #ffffff; }
-  #photosAndButtons .card-content {
-    background-color: #142529 !important; }
-  p.title,
-  span.title {
-    color: #ffffff; }
-  p.subtitle {
-    color: #ffffff; }
-  .is-primary {
-    background-color: #142529 !important; }
-  .tile.is-vertical {
-    background-color: unset; }
-  .is-info {
-    background-color: #132225 !important; }
-  section.hero.is-primary.is-bold {
-    background-image: none;
-    background-color: #25444b !important; }
-  body footer {
-    background-color: #111f22 !important; }
-  .button {
-    background-color: #132225;
-    border-color: #25444b;
-    border-width: 4px;
-    color: white; }
-  p {
-    color: white; } }
-
 #idCard .hero-body {
   padding-bottom: 2rem;
   padding-top: 2rem; }
@@ -7115,11 +7080,42 @@ section#contact .button {
 footer small {
   color: #ffffff; }
 
-#photoProfil.dark {
-  display: none; }
+#photoProfil {
+  background-color: lightgray; }
 
+/**
+    Dark Theme
+**/
 @media (prefers-color-scheme: dark) {
-  #photoProfil.dark {
-    display: block; }
-  #photoProfil.light {
-    display: none; } }
+  .dark-theme-only {
+    display: inline; }
+  .hero {
+    background-color: #1d343a !important;
+    color: #ffffff; }
+  #photosAndButtons .card-content {
+    background-color: #142529 !important; }
+  p.title,
+  span.title {
+    color: #ffffff; }
+  p.subtitle {
+    color: #ffffff; }
+  .is-primary {
+    background-color: #142529 !important; }
+  .tile.is-vertical {
+    background-color: unset; }
+  .is-info {
+    background-color: #132225 !important; }
+  section.hero.is-primary.is-bold {
+    background-image: none;
+    background-color: #25444b !important; }
+  body footer {
+    background-color: #111f22 !important; }
+  .button {
+    background-color: #132225;
+    border-color: #25444b;
+    border-width: 4px;
+    color: white; }
+  p {
+    color: white; }
+  #photoProfil {
+    background-color: #25444b; } }

index.html

@@ -35,11 +35,8 @@
                     <div id="photosAndButtons" class="column is-3-widescreen is-3-tablet">
                         <div class="card">
                             <div class="card-image">
-                                <figure id="photoProfil" class="image light">
-                                    <img src="images/profile_opt.jpg" alt="Une Photo de moi">
-                                </figure>
-                                <figure id="photoProfil" class="image dark">
-                                    <img src="images/profile_nuit_opt.jpg" alt="Une Photo de moi">
+                                <figure id="photoProfil" class="image">
+                                    <img src="images/profile_opt.png" alt="Une Photo de moi">
                                 </figure>
                             </div>
                             <div class="card-content">