485 lines
8.1 KiB
CSS
485 lines
8.1 KiB
CSS
* {
|
|
font-family:Hermit,Hack,monospace;
|
|
}
|
|
:root {
|
|
--bg-opacity:rgba(255,255,255,0.9);
|
|
--bg-opacity-2:rgba(255,255,255,0.3);
|
|
--box-shadow:0 0 2em #eee;
|
|
--bg-opacity:rgba(0,0,0,0.9);
|
|
--bg-opacity-2:rgba(0,0,0,0.3);
|
|
--box-shadow:0 0 2em #111;
|
|
--accent:#d3c610;
|
|
--bg:#101024;
|
|
--text:#eee;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-opacity:rgba(0,0,0,0.9);
|
|
--bg-opacity-2:rgba(0,0,0,0.3);
|
|
--box-shadow:0 0 2em #111;
|
|
--accent:#d3c610;
|
|
}
|
|
}
|
|
body {
|
|
max-width: 65rem;
|
|
}
|
|
a {
|
|
text-decoration:none;
|
|
transition:all 0.5s;
|
|
}
|
|
a:hover {
|
|
color:var(--text);
|
|
}
|
|
header {
|
|
padding:0;
|
|
background:var(--bg);
|
|
}
|
|
body.home header {
|
|
/*animation: lower-in;
|
|
animation-duration: 2s;*/
|
|
}
|
|
body.home footer {
|
|
margin-top:4em;
|
|
}
|
|
body.section footer,
|
|
body.page footer {
|
|
margin-top:2em;
|
|
}
|
|
header section {
|
|
overflow:hidden;
|
|
}
|
|
header section, footer section {
|
|
max-width: 65rem;
|
|
margin:auto;
|
|
}
|
|
header section nav {
|
|
float:right;
|
|
}
|
|
header section nav a {
|
|
border:0;
|
|
margin:0;
|
|
}
|
|
header section nav a::after {
|
|
content:"";
|
|
position:relative;
|
|
width:60%;
|
|
display:block;
|
|
transition: width 0.5s,border-color 0.5s, transform 0.5s;
|
|
border-bottom:2px solid var(--text);
|
|
float:right;
|
|
}
|
|
header section nav a:hover::after {
|
|
width:100%;
|
|
border-color:var(--accent) !important;
|
|
transform: rotate(5deg) scale(120%);
|
|
}
|
|
header section nav a:nth-child(odd):hover::after {
|
|
transform: rotate(-5deg) scale(120%);
|
|
}
|
|
body main {
|
|
position:relative;
|
|
}
|
|
body.home main {
|
|
animation:fade-in-left;
|
|
animation-duration:2s;
|
|
}
|
|
body.home div.main.homepage {
|
|
margin:1em;
|
|
}
|
|
footer {
|
|
text-align:left;
|
|
border-color:rgba(200,200,200,0.15);
|
|
}
|
|
|
|
body.section .main, body.page .main {
|
|
padding:1em 4em;
|
|
}
|
|
.row {
|
|
width:100%;
|
|
height:auto;
|
|
display:block;
|
|
overflow:hidden;
|
|
}
|
|
.row div.cell-2,
|
|
.row div.cell-3,
|
|
.row div.cell-4,
|
|
.row div.cell-5 {
|
|
float:left;
|
|
}
|
|
.row div.cell-2 {
|
|
width:50%;
|
|
}
|
|
.row div.cell-2.margin {
|
|
width:48%;
|
|
margin-right:2%;
|
|
}
|
|
.row div.cell-3 {
|
|
width:33.3333333%;
|
|
}
|
|
.row div.cell-3.margin {
|
|
width:31.3333333%;
|
|
margin-right:2%;
|
|
}
|
|
.row div.cell-4 {
|
|
width:25%;
|
|
}
|
|
.row div.cell-4.margin {
|
|
width:23%;
|
|
margin-right:2%;
|
|
}
|
|
.row div.cell-5 {
|
|
width:20%;
|
|
}
|
|
.row div.cell-5.margin {
|
|
width:18%;
|
|
margin-right:2%;
|
|
}
|
|
.row div.margin:last-child{
|
|
margin-right:0;
|
|
}
|
|
|
|
.row::after {
|
|
clear:both;
|
|
}
|
|
.intro {
|
|
margin-top:10em;
|
|
margin-bottom:5em;
|
|
}
|
|
.me {
|
|
text-align:right;
|
|
margin:2em;
|
|
margin-left: 0.6em;
|
|
}
|
|
.me .my-name h1 {
|
|
text-align:left;
|
|
float:none;
|
|
/*margin-left:1.2em;*/
|
|
}
|
|
.me .my-name h1::before {
|
|
content:"#\0020";
|
|
color:var(--accent);
|
|
}
|
|
.me h1 {
|
|
overflow:hidden;
|
|
}
|
|
.me h1 .letter {
|
|
animation: type;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.2s;
|
|
width:0;
|
|
visibility: collapse;
|
|
display: inline-block;
|
|
}
|
|
.me h1 .letter:nth-child(1) {
|
|
animation-delay: 1.6s;
|
|
}
|
|
.me h1 .letter:nth-child(2) {
|
|
animation-delay: 1.8s;
|
|
}
|
|
.me h1 .letter:nth-child(3) {
|
|
animation-delay: 2.0s;
|
|
}
|
|
.me h1 .letter:nth-child(4) {
|
|
animation-delay: 2.10s;
|
|
}
|
|
.me h1 .letter:nth-child(5) {
|
|
animation-delay: 2.16s;
|
|
}
|
|
.me h1 .letter:nth-child(6) {
|
|
animation-delay: 2.22s;
|
|
}
|
|
.me h1 .letter:nth-child(7) {
|
|
animation-delay: 2.6s;
|
|
}
|
|
.me h1 .letter:nth-child(8) {
|
|
animation-delay: 2.8s;
|
|
}
|
|
.me h1 .letter:nth-child(9) {
|
|
animation-delay: 2.86s;
|
|
}
|
|
.me h1 .letter:nth-child(10) {
|
|
animation-delay: 2.92s;
|
|
}
|
|
.me h1 .letter:nth-child(11) {
|
|
animation-delay: 3.0s;
|
|
}
|
|
.me h1 .cursor {
|
|
animation:cursor-blink;
|
|
animation-duration: 1.5s;
|
|
animation-iteration-count: 3;
|
|
visibility:hidden;
|
|
opacity:0;
|
|
}
|
|
|
|
.me .my-image {
|
|
width:12.5em;
|
|
float:none;
|
|
/* margin: auto;*/
|
|
}
|
|
.me .my-image img {
|
|
max-width:8em;
|
|
margin-left:3.2em;
|
|
display:block;
|
|
position:relative;
|
|
transition:all 0.5s;
|
|
opacity:1;
|
|
}
|
|
.me .my-image img:hover {
|
|
transform:scale(1.2) rotate(5deg);
|
|
}
|
|
.me .my-name {
|
|
width:100%;
|
|
overflow:hidden;
|
|
display:block;
|
|
}
|
|
|
|
.my-things {
|
|
margin:2em;
|
|
margin-left:6em;
|
|
text-align:right;
|
|
}
|
|
.poem-info {
|
|
font-size:0.6em;
|
|
}
|
|
.section-list {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
overflow:hidden;
|
|
}
|
|
.item,
|
|
.tech .item,
|
|
.recipes .item {
|
|
border:1px solid #aaa;
|
|
border-radius: 0.2em;
|
|
transition: background 0.5s;
|
|
overflow:hidden;
|
|
box-sizing: border-box;
|
|
margin-right:1em;
|
|
margin-bottom:1em;
|
|
}
|
|
.item:hover,
|
|
.tech .item:hover {
|
|
background:#b2ecFb;
|
|
}
|
|
|
|
.recipes .item:hover {
|
|
background:#ffff00;
|
|
}
|
|
.item a,
|
|
.tech .item a,
|
|
.recipes .item a {
|
|
padding:2em;
|
|
text-align: center;
|
|
color: var(--text);
|
|
display:block;
|
|
}
|
|
|
|
.item h3,
|
|
.tech .item h3,
|
|
.recipes .item h3 {
|
|
margin-top:0;
|
|
}
|
|
#website-list .item {
|
|
width:49%;
|
|
margin-right:1%;
|
|
min-height:15em;
|
|
transition: opacity 1.25s;
|
|
transition-delay: 0s;
|
|
pointer-events: auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
#website-list .item:hover {
|
|
background:none;
|
|
}
|
|
#website-list .item .website-image {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover !important;
|
|
border: 0;
|
|
height: 100%;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
outline: currentcolor none 0px;
|
|
transition: all 3s, filter 1.5s;
|
|
transform-origin: top center;
|
|
filter: grayscale(0.5);
|
|
}
|
|
#website-list .item:hover .website-image,
|
|
#website-list .item:active .website-image {
|
|
transform: scale(1.5);
|
|
filter: grayscale(0);
|
|
}
|
|
#website-list .item .web-summary p {
|
|
font-size:0.8em;
|
|
padding-left:1em;
|
|
padding-right:1em;
|
|
color:var(--text);
|
|
}
|
|
#website-list .item a {
|
|
border:1px solid var(--border);
|
|
display:block;
|
|
width:max-content;
|
|
margin:auto;
|
|
margin-bottom:0.5em;
|
|
padding:0.5em 1em;
|
|
color:var(--text);
|
|
}
|
|
#website-list .item a:hover {
|
|
background:var(--bg);
|
|
}
|
|
#website-list .item:hover .web-summary,
|
|
#website-list .item:active .web-summary {
|
|
transform: translateY(1%);
|
|
background:var(--bg-opacity);
|
|
}
|
|
#website-list .item .web-summary {
|
|
bottom:0;
|
|
position:absolute;
|
|
text-align:center;
|
|
margin: auto;
|
|
width:101%;
|
|
height:auto;
|
|
background:var(--bg-opacity-2);
|
|
transition: all 2s;
|
|
transform: translateY(100%);
|
|
box-shadow: var(--box-shadow);
|
|
}
|
|
#website-list .item h3 {
|
|
padding-top:0.5em;
|
|
margin-bottom:0;
|
|
}
|
|
|
|
|
|
.light-text {
|
|
color:#ddd !important;
|
|
}
|
|
.dark-text {
|
|
color:#222 !important;
|
|
}
|
|
.item .row,
|
|
.tech .row,
|
|
.recipes .row {
|
|
margin-bottom:1em;
|
|
}
|
|
footer div.inline {
|
|
float:left;
|
|
}
|
|
footer div.inline:last-child {
|
|
float:right;
|
|
}
|
|
footer .footer-links ul
|
|
{
|
|
float:left;
|
|
}
|
|
footer .footer-links ul li
|
|
{
|
|
padding-bottom:0.5em;
|
|
list-style-type: none;
|
|
}
|
|
footer .footer-links ul li a
|
|
{
|
|
|
|
color:var(--text);
|
|
text-decoration: none;
|
|
}
|
|
footer .footer-links ul li a:hover {
|
|
color:var(--accent);
|
|
}
|
|
footer .footer-links ul li a::after
|
|
{
|
|
content:"";
|
|
position:relative;
|
|
width:20%;
|
|
display:block;
|
|
transition: width 0.5s, border-color 0.5s, transform 0.5s;
|
|
border-bottom:2px solid var(--text);
|
|
}
|
|
footer .footer-links ul li a:hover::after
|
|
{
|
|
width:75%;
|
|
border-bottom:2px solid var(--accent);
|
|
transform: rotate(-5deg) scale(120%);
|
|
}
|
|
footer .footer-links ul li:nth-child(odd) a:hover::after {
|
|
transform: rotate(5deg) scale(120%);
|
|
|
|
}
|
|
footer .footer-links::after
|
|
{
|
|
clear: both;
|
|
}
|
|
footer .social-links {
|
|
padding-right:3rem;
|
|
text-align:right;
|
|
overflow: hidden;
|
|
|
|
}
|
|
footer .social-links a {
|
|
margin-left:0.6em;
|
|
}
|
|
footer .social-links img {
|
|
height:auto;
|
|
width:2em;
|
|
filter: grayscale(1);
|
|
transition: transform 0.5s, filter 0.5s;
|
|
margin-top:1em;
|
|
}
|
|
footer .social-links img:hover {
|
|
height:auto;
|
|
transform: scale(120%) rotate(15deg);
|
|
filter: grayscale(0);
|
|
}
|
|
|
|
ul.pagination {
|
|
list-style-type: none;
|
|
margin:auto;
|
|
text-align:center;
|
|
padding-left:0;
|
|
|
|
}
|
|
ul.pagination li {
|
|
display:inline-block;
|
|
margin-right:0.5em;
|
|
border-radius: 0.2em;
|
|
transition:all 0.5s;
|
|
}
|
|
ul.pagination li:hover {
|
|
background:#ccc;
|
|
}
|
|
ul.pagination li a {
|
|
|
|
padding:0.2em 0.5em;
|
|
color:var(--text);
|
|
}
|
|
ul.pagination li:hover a {
|
|
color:#555;
|
|
}
|
|
ul.pagination li.active a {
|
|
font-weight: bold;
|
|
}
|
|
ul.pagination li.disabled a {
|
|
color:#ccc;
|
|
}
|
|
ul.pagination li.disabled:hover {
|
|
background: none;
|
|
color:var(--text) !important;
|
|
}
|
|
a.nocolouring {
|
|
text-decoration:none;
|
|
color:var(--text);
|
|
}
|
|
#lastmod{
|
|
float:left;
|
|
position:relative;
|
|
max-width:50%;
|
|
}
|
|
#taglist{
|
|
float:right;
|
|
position:relative;
|
|
max-width:50%;
|
|
}
|