gallery spacing and some colours

src/inc_css/portfolio.css

@@ -1,68 +1,57 @@
 .demoTile {
-    opacity: 0.7;
+    /*opacity: 0.7;*/
     transition: opacity 0.3s;
     max-width: 15vw;
     display: inline;
 }
 
 .demoTile:hover {
-    opacity: 1.0;
+    /*opacity: 1.0;*/
 }
 
 .demoTiles {
     position: absolute;
     background-color:white;
-    left:27.5%;
+    /*left:27.5%;*/
     top: var(--title-height);
     margin-top:40px;
 }
 
 .page.portfolio {
     padding-top: 0;
-    width: 70%;
-    right: 0;
-    margin:0;
-    padding:0;
-    transform: translate(-40%,0);
+    width: 50%;
+
+    margin-left:auto;
+    margin-right:auto;
+
+    transform: translate(-50%,0);
 }
 
 .portfolio h1 {
-    margin: 1em 0 0 0;
+    margin-top: 1.2em;
+    text-align: center;
 }
 
 .portfolio p {
-
+    background-color: var(--clear);
+    border-style: none;
+    text-align: center;
 }
 
+/* gallery img */
 .wrapper {
     margin-top: 1em;
-
     width: 100%;
     height: 100%;
     background-color: transparent;
-    /*background-color: var(--background);*/
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
 }
-
-/* what the fuck 
- * https://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
- * */
 .wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.1s ease-in;
-
-    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
-    filter: gray; /* IE6-9 */
-    -webkit-filter: grayscale(50%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-
-    transition: all .3s ease;
 }
-
 .wrapper img:hover {
-    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-
-    -webkit-filter: grayscale(0%);
 }

src/root/colors.css

@@ -1,8 +1,8 @@
 :root {
     /* Special */
     --background: #eee;
-    --background-alt: #ccc;
-    --foreground: #222;
+    --background-alt: #b8b8b8;
+    --foreground: #444;
     --foreground-inactive: #777;
     --accent: lightpink;
     --clear: rgba(0,0,0,0);

src/root/styles.css

@@ -73,17 +73,31 @@ a.fsText:hover {
 }
 
 .page p {
-    margin: 0 0px;
-    padding-top: 20px;
+    margin: 0;
+    margin-right: 1em;
+    padding: .6em;
     color: var(--foreground);
-    opacity: 1.0;
+
+    font-size: 1.1em;
+
+    line-height: 1.25em;
+
+    background-color: var(--background);
+    border-radius: .5em;
+
+    width: 100%;
+    border-color: var(--background-alt);
+    border-width: 3px;
+    border-style: solid;
 }
 
 .page h1 {
     color: var(--foreground-inactive);
 
-    font-size: 1.3em;
+    font-size: 1.5em;
     font-weight: bold;
+
+    margin: .5em;
 }
 
 #include socials.css