ktyl
/
ktyl.dev
1
0
Fork 0
Code Issues 18 Pull Requests 1 Packages Projects 1 Releases Wiki Activity

gallery spacing and some colours

This commit is contained in:
ktyl 2021-12-21 00:35:20 +00:00
parent 7b84d7448c
commit 82d78ac326
3 changed files with 36 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/inc_css/portfolio.css
View File

@ -1,68 +1,57 @@
.demoTile { .demoTile {
opacity: 0.7; /*opacity: 0.7;*/
transition: opacity 0.3s; transition: opacity 0.3s;
max-width: 15vw; max-width: 15vw;
display: inline; display: inline;
} }
.demoTile:hover { .demoTile:hover {
opacity: 1.0; /*opacity: 1.0;*/
} }
.demoTiles { .demoTiles {
position: absolute; position: absolute;
background-color:white; background-color:white;
left:27.5%; /*left:27.5%;*/
top: var(--title-height); top: var(--title-height);
margin-top:40px; margin-top:40px;
} }
.page.portfolio { .page.portfolio {
padding-top: 0; padding-top: 0;
width: 70%; width: 50%;
right: 0;
margin:0; margin-left:auto;
padding:0; margin-right:auto;
transform: translate(-40%,0);
transform: translate(-50%,0);
} }
.portfolio h1 { .portfolio h1 {
margin: 1em 0 0 0; margin-top: 1.2em;
text-align: center;
} }
.portfolio p { .portfolio p {
background-color: var(--clear);
border-style: none;
text-align: center;
} }
/* gallery img */
.wrapper { .wrapper {
margin-top: 1em; margin-top: 1em;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;
/*background-color: var(--background);*/
display: grid; 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 { .wrapper img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.1s ease-in; 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 { .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%);
} }

4
src/root/colors.css
View File

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

22
src/root/styles.css
View File

@ -73,17 +73,31 @@ a.fsText:hover {
} }
.page p { .page p {
margin: 0 0px; margin: 0;
padding-top: 20px; margin-right: 1em;
padding: .6em;
color: var(--foreground); 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 { .page h1 {
color: var(--foreground-inactive); color: var(--foreground-inactive);
font-size: 1.3em; font-size: 1.5em;
font-weight: bold; font-weight: bold;
margin: .5em;
} }
#include socials.css #include socials.css