Complete rework + eleventy
This commit is contained in:
commit
5f2e7393f7
86 changed files with 2785 additions and 0 deletions
500
static/main.css
Normal file
500
static/main.css
Normal file
|
|
@ -0,0 +1,500 @@
|
|||
:root {
|
||||
--theme-color: #4c6d6e;
|
||||
--theme-color-lighter: #84b9bb;
|
||||
--theme-color-variation: #22e6ed;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: .2s;
|
||||
color: lightgray;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--theme-color-lighter);
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
border-bottom: thick solid rgba(255, 255, 255, 0.1);
|
||||
width: 100%;
|
||||
box-shadow:
|
||||
2px 7px 5px rgba(0,0,0,0.3),
|
||||
0px -4px 10px rgba(0,0,0,0.3);
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
header div {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#everythingHelper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#everythingHelper .bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
opacity: .5;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100% 100%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
header ul {
|
||||
transition: .2s;
|
||||
font-size: larger;
|
||||
margin: auto 0 auto 0;
|
||||
padding: 0;
|
||||
opacity: 0.6;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
header ul a {
|
||||
transition: .2s;
|
||||
color: white;
|
||||
}
|
||||
|
||||
header ul a:hover {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
header ul:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#mainHelper {
|
||||
padding-top: 3rem;
|
||||
max-width: 50vw;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
|
||||
0px -4px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
blockquote, main p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
main h1, main h2 {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
main h2 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
b {
|
||||
color: var(--theme-color-lighter);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 2.8em;
|
||||
}
|
||||
|
||||
#headerSubtitle {
|
||||
color: white;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: var(--theme-color-lighter);
|
||||
}
|
||||
|
||||
textarea, input, button {
|
||||
border: thick solid var(--theme-color-lighter);
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#sound {
|
||||
height: 1.5em;
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
#sound:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#linksHelper {
|
||||
margin: auto 1em auto auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#soundDiv {
|
||||
margin-left: auto;
|
||||
inline-size: fit-content;
|
||||
padding: 0;
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#soundDiv p {
|
||||
margin: 0 auto 0 auto;
|
||||
}
|
||||
|
||||
#headerLinks {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#headerLinks a {
|
||||
margin-right: .2em;
|
||||
margin-left: .2em;
|
||||
}
|
||||
|
||||
#headerLinks:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#headerLinks a:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#headerLinks a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
header div:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#headerSquareMusic img, #headerSquareVideo img, #headerSquareCode img, #defaultSquare img {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.headerSquare, #defaultSquare {
|
||||
transition: .4s;
|
||||
border: medium solid white;
|
||||
height: 7vh;
|
||||
overflow: hidden;
|
||||
width: 10vh;
|
||||
opacity: .4;
|
||||
padding: .4em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.headerSquare img, #defaultSquare img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.headerSquare:hover, #defaultSquare {
|
||||
z-index: 1;
|
||||
/* height: 10vh; */
|
||||
/* background-color: black; */
|
||||
}
|
||||
|
||||
.headerSquare.selected, #defaultSquare.selected {
|
||||
opacity: 1;
|
||||
height: 10vh;
|
||||
box-shadow:
|
||||
2px 7px 5px rgba(0,0,0,0.4),
|
||||
0px -4px 10px rgba(0,0,0,0.4);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#homeSquares {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: .4s;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
margin-right: 3vw;
|
||||
margin-bottom: 3rem;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
div.hs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.hs.selected {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.ytembed {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.margarinaColor {
|
||||
color: #ff85e1;
|
||||
}
|
||||
|
||||
.hsProjectImage {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.hsProjectImage img {
|
||||
height: 10vh;
|
||||
}
|
||||
|
||||
#hsCode {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#hsCode.selected {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ellipsis-loader {
|
||||
animation: 1.8s infinite ellipsis-loader;
|
||||
display: inline-block;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 140px;
|
||||
margin: auto;
|
||||
}
|
||||
.ellipsis-loader__dot {
|
||||
animation: 1.8s infinite ellipsis-loader__dot;
|
||||
background: #FFF;
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
}
|
||||
.ellipsis-loader__dot:nth-child(1) {
|
||||
animation-delay: 0.15s;
|
||||
left: -13px;
|
||||
}
|
||||
.ellipsis-loader__dot:nth-child(2) {
|
||||
animation-delay: 0.3s;
|
||||
left: -26px;
|
||||
}
|
||||
.ellipsis-loader__dot:nth-child(3) {
|
||||
animation-delay: 0.45s;
|
||||
left: -39px;
|
||||
}
|
||||
.ellipsis-loader__dot:nth-child(4) {
|
||||
animation-delay: 0.6s;
|
||||
left: -52px;
|
||||
}
|
||||
|
||||
#telnetSimulation {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#telnetSimulation div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#telnetSimulation div textarea {
|
||||
width: 100%;
|
||||
resize: none;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#telnetSimulationInput {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#telnetSimulationLoadingHolder {
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#youtubeVideo p {
|
||||
font-size: 2vh;
|
||||
}
|
||||
|
||||
#youtubeVideoImage {
|
||||
width: 100%;
|
||||
transition: .3s;
|
||||
box-shadow:
|
||||
2px 7px 5px rgba(0,0,0,0.3),
|
||||
0px -4px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
#youtubeVideoImage:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
#languageList {
|
||||
font-size: 2vh;
|
||||
}
|
||||
|
||||
#languageList li {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#languageList li a {
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.languagesHighlightedLink {
|
||||
color: var(--theme-color-variation);
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
animation: fadeIn .5s ease-in 1 forwards;
|
||||
}
|
||||
.fadeOut {
|
||||
opacity: 1;
|
||||
animation: fadeOut .5s ease-out 1 forwards;
|
||||
}
|
||||
|
||||
@keyframes ellipsis-loader {
|
||||
0%, 25% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(20px);
|
||||
}
|
||||
}
|
||||
@keyframes ellipsis-loader__dot {
|
||||
0% {
|
||||
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform: translateX(0);
|
||||
}
|
||||
55% {
|
||||
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
opacity: 1;
|
||||
transform: translateX(98px);
|
||||
}
|
||||
75%, 100% {
|
||||
transform: translateX(212px);
|
||||
}
|
||||
90% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
body {
|
||||
font-size: 2vh;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-top: 1.4rem;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header ul {
|
||||
margin: auto;
|
||||
margin-bottom: 1.4rem;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
main h1 {
|
||||
font-size: 3vh;
|
||||
}
|
||||
|
||||
#headerLinks {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#homeTitle {
|
||||
font-size: 4vh;
|
||||
}
|
||||
|
||||
#linksHelper {
|
||||
margin: 0 auto 0 auto;
|
||||
}
|
||||
|
||||
#mainHelper {
|
||||
flex-direction: column;
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
#homeSquares {
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 40vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.headerSquare, #defaultSquare {
|
||||
aspect-ratio: 1/1;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.headerSquare.selected, #defaultSqaure.selected {
|
||||
height: unset!important;
|
||||
}
|
||||
|
||||
|
||||
#languageList {
|
||||
font-size: 2.5vh;
|
||||
}
|
||||
|
||||
#postHeader {
|
||||
/* border-bottom: 8px dashed rgba(255, 255, 255, 0.1); */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#homeSquares {
|
||||
width: 60vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
#homeSquares {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fadeOut {
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue