:root{
--accent: #5292ff;
--darker: #1453e7;
--overlay1: #fbffe9c1;
--code: #ff402c;
--garden: #00b013;
--life: #0038ff;
--art: #ff2f4f;
}
.mainContainer{
overflow: hidden;
display: flex;
}
.title{
color: var(--offblack);
}
.kaoani{
image-rendering: pixelated;
}
.journalSidebar{
width: 20%;
background-color: #d1ecff56;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 20px;
padding: 20px 0 ;
}
.sidebarButtons{
width: 80%;
}
#journalJumpTo{
width: 100%;
color: var(--darker);
text-align: center;
}
.jumpTitle{
letter-spacing: 1cqw;
background-color: var(--overlay);
display: block;
width: 100%;
border-top: 1px solid var(--accent);
padding-top: 10px;
}
#journalJumpTo ul{
margin: auto;
width: 100%;
padding: 0;
}
.jumpEntry{
width: 100%;
padding: 0 5px;
list-style: none;
margin: 5px 0;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--darker);
font-size: 0.9em;
}
.jumpEntry span{
text-align: right;
}
.jumpEntry:hover{
cursor: pointer;
background-color: var(--overlay);
}
.journalContainer{
width: 80%;
overflow: hidden;
display: flex;
flex-direction: column;
}
#contentHead{
padding-top: 3%;
width: 95%;
height: min-content;
margin: auto;
margin-bottom: 10px;
}
#contentWrapper{
scrollbar-color: var(--overlay1) transparent;
overflow: auto;
width: 100%;
height: 90%;
padding: 10px 50px;
display: flex;
gap: 20px;
margin-bottom: 0;
}
#entriesWrapper{
width: 100%;
}
#calendarWrapper{
width: 95%;
aspect-ratio: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: var(--accent);
border-radius: 20px;
}
#calendar{
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
width: 90%;
margin-bottom: 3px;
margin-top: 10px;
}
#calendar td{
text-align: center;
font-size: 0.8em;
color: var(--accent);
border: 1px solid var(--accent);
}
#calendar td div{
padding: 1px;
width: 100%;
aspect-ratio: 1;
}
#calendarHead{
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
width: 90%;
display: flex;
justify-content: space-between;
}
#printedDate{
display: block;
margin: auto;
margin-top: 5px;
font-family: "Porkys";
font-size: 1.2rem;
letter-spacing: 0.2rem;
text-shadow:
1px 1px 0 var(--overlay1),
1px -1px 0 var(--overlay1),
-1px 1px 0 var(--overlay1),
-1px -1px 0 var(--overlay1);
}
button{
background-color: var(--overlay1);
border: 1px solid var(--accent);
border-radius: 5px;
color: var(--accent);
}
button:hover{
background-color: var(--overlay);
cursor: pointer;
}
#status{
width: 100%;
margin: auto;
margin-bottom: 10px;
height: min-content;
padding: 10px 20px;
background-color: var(--accent);
color: white;
}
#status a{
color: var(--darker);
}
/*JOURNAL ENTRY*/
.entry{
position: relative;
padding: 20px;
border-radius: 20px;
margin-bottom: 1%;
animation: bgScrolling 3s infinite;
animation-timing-function: linear;
}
.entry span{display: block;}
.entryTitle{
font-family: "Nunito";
color: black;
font-weight: 600;
font-size: 1.5em;
}
.entryDate{
font-size: 0.7em;
}
.entryContent{
overflow: hidden;
height: min-content;
background-color: #fdfff3e2;
padding: 10px 25px;
margin-bottom: 5px;
border-radius: 50px;
text-align: justify;
}
.entryContent video,
.entryContent img{
border-radius: 10px;
}
.entryContent table{
width: 80%;
margin: auto;
}
.entryContent table video,
.entryContent table img{
width: 100%;
max-height: 300px;
}
.entryContent video:hover,
.entryContent img:hover{
cursor: pointer;
opacity: 0.8;
}
.entryContent blockquote{
width: max-content;
max-width: 80%;
overflow: hidden;
margin: auto;
padding: 3%;
}
.entryContent hr{
border-bottom: 0;
}
.entryContent a{color: var(--accent);}
.entryContent a:hover{color: var(--darker);}
/*#region ENTRY STYLING*/
@keyframes bgScrolling {
0% {background-position: 50px 50px, 120px 120px;}
}
.code{
border: 1px solid #ff402c;
background: url('data:image/svg+xml, '), #ffab3e;
background-size: 50px;
}
.garden{
border: 1px solid #00b013;
background: url('data:image/svg+xml, '), #95ea7d;
background-size: 50px;
}
.thoughts{
border: 1px solid #000;
background:url('data:image/svg+xml, '), #2e2f33;
background-size: 50px;
}
.life{
border: 1px solid #4a9cff;
background:url('data:image/svg+xml, '), #b3f1ff;
background-size: 50px;
}
.art{
border: 1px solid #ff2f4f;
background: url('data:image/svg+xml, '), #ff3838;
background-size: 50px;
}
.other{
border: 1px solid #2d1576;
background: url('data:image/svg+xml, '), #772cda;
background-size: 50px;
}
/*#endregion ENTRY STYLING*/
.entry .kaoani{
position: absolute;
right: 5%;
}
.modal{
position: fixed;
padding-top: 100px;
background-color: rgba(255, 255, 255, 0.657);
width: 100vw;
height: 100vh;
display: none;
}
#modalWrapper{
position: relative;
margin: auto;
height: 80%;
width: min-content;
max-width: 95vw;
display: block;
overflow: hidden;
}
.modalContent{
display: block;
max-height: 100%;
max-width: 95vw;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
#close{
position: absolute;
top: 0;
right: 0;
color: white;
font-size: 4em;
}
#close:hover{
cursor: pointer;
}
@media only screen and (max-width: 750px){
#contentHead{
margin-top: 0;
}
#contentWrapper{
padding: 10px;
}
}
@media only screen and (max-width: 1050px){
body{
font-size: 0.8em;
overflow: hidden;
}
.mainGrid{height: 100vh;}
.mainContainer{
flex-direction: column;
}
.journalSidebar{
flex-direction: row;
width: 100%;
height: fit-content;
align-items: flex-start;
gap: 0;
padding: 10px
}
.sidebarButtons{
width: min-content;
margin: 0 10px;
}
#calendarWrapper{display: none;}
#journalJumpTo{display:none;}
.journalContainer{width: 100%;}
}