442 lines
12 KiB
CSS
442 lines
12 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
img,
|
|
picture,
|
|
video,
|
|
canvas,
|
|
svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
input,
|
|
button,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
#root,
|
|
#__next {
|
|
isolation: isolate;
|
|
}
|
|
|
|
/* Style each tag in an html */
|
|
/* describe to chatgpt what you want, good at css, or css reference */
|
|
/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
|
|
@keyframes buttonEntry {
|
|
0% {
|
|
opacity: 0; /* Start invisible */
|
|
transform: translateY(30px); /* Start below the viewport */
|
|
}
|
|
100% {
|
|
opacity: 1; /* Fully visible */
|
|
transform: translateY(0); /* End at its normal position */
|
|
}
|
|
}
|
|
body {
|
|
margin: 0px;
|
|
background: linear-gradient(to top right, #3b3561, rgb(191.3, 187.1, 217.9));
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.blog {
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 50px;
|
|
margin: 0px 50px;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
gap: 20px;
|
|
}
|
|
.blog .div1 {
|
|
grid-area: 1/1/3/3;
|
|
padding-top: 160px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 200px 0px 0px 0px;
|
|
/* General button styling */
|
|
}
|
|
.blog .div1 h1 {
|
|
font-size: 60px;
|
|
color: #f7ebec;
|
|
font-family: "Lexend", serif;
|
|
font-weight: 300;
|
|
padding-bottom: 20px;
|
|
}
|
|
.blog .div1 .read-more-btn {
|
|
display: inline-flex; /* Flex container for text and icon */
|
|
align-items: center; /* Center text and icon vertically */
|
|
justify-content: center; /* Center content horizontally */
|
|
padding: 10px 20px; /* Button padding */
|
|
font-family: "Space Grotesk", monospace; /* Font style */
|
|
font-size: 16px; /* Font size */
|
|
font-weight: bold; /* Bold text */
|
|
color: #3b3561; /* Text color */
|
|
border: 2px solid #3b3561; /* Button border */
|
|
border-radius: 30px; /* Rounded edges for the button */
|
|
background-color: #f7ebec; /* Transparent background */
|
|
cursor: pointer; /* Pointer cursor on hover */
|
|
transition: all 0.3s ease; /* Smooth transition on hover */
|
|
}
|
|
.blog .div1 .read-more-btn:hover {
|
|
background-color: #3b3561; /* Change background color on hover */
|
|
color: #f7ebec; /* Change text color on hover */
|
|
}
|
|
.blog .div1 .read-more-btn .icon {
|
|
display: flex; /* Flex for the icon */
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 10px; /* Space between text and icon */
|
|
width: 20px; /* Icon circle width */
|
|
height: 20px; /* Icon circle height */
|
|
background-color: #3b3561; /* Circle background color */
|
|
color: #f7ebec; /* Arrow color */
|
|
border-radius: 50%; /* Make the icon circular */
|
|
transition: all 0.3s ease; /* Smooth transition on hover */
|
|
}
|
|
.blog .div1 .read-more-btn:hover .icon {
|
|
background-color: #f7ebec; /* Change circle background on hover */
|
|
color: #3b3561; /* Change arrow color on hover */
|
|
}
|
|
.blog .div1 .buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: left;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 20px;
|
|
padding-right: 85px;
|
|
margin-top: 20px;
|
|
}
|
|
.blog .div1 .buttons button {
|
|
padding: 3.5px 23px;
|
|
margin: 80px;
|
|
font-size: 16px;
|
|
font-family: "Space Grotesk", monospace;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
|
}
|
|
.blog .div1 .buttons button.psyc-button {
|
|
background-color: #ddbdd5;
|
|
color: #3b3561;
|
|
margin: 0px 0px 0px 70px;
|
|
}
|
|
.blog .div1 .buttons button.psyc-button:hover {
|
|
background-color: rgb(203.66, 155.34, 191.58);
|
|
transform: scale(1.05);
|
|
}
|
|
.blog .div1 .buttons button.imp-button {
|
|
background-color: #4b8f8c;
|
|
color: white;
|
|
margin: 0px 0px 0px 70px;
|
|
}
|
|
.blog .div1 .buttons button.imp-button:hover {
|
|
background-color: rgb(57.4541284404, 109.5458715596, 107.247706422);
|
|
transform: scale(1.05);
|
|
}
|
|
.blog .div1 .buttons button.code-button {
|
|
background-color: #dd614a;
|
|
color: white;
|
|
margin: 0px 0px 0px 70px;
|
|
}
|
|
.blog .div1 .buttons button.code-button:hover {
|
|
background-color: rgb(205.4139534884, 64.688372093, 38.5860465116);
|
|
transform: scale(1.05);
|
|
}
|
|
.blog .div1 .buttons button.spirit-button {
|
|
background-color: #f7ebec;
|
|
color: #3b3561;
|
|
margin: 0px 0px 0px 70px;
|
|
}
|
|
.blog .div1 .buttons button.spirit-button:hover {
|
|
background-color: rgb(209, 206, 206);
|
|
transform: scale(1.05);
|
|
}
|
|
.blog .div2 {
|
|
padding-top: 30px;
|
|
height: 200px; /* Set desired height */
|
|
width: 300px;
|
|
}
|
|
.blog .div2 .entrya {
|
|
grid-area: 1/3/2/4;
|
|
background-color: #ddbdd5;
|
|
color: black;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
border: none;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
position: fixed;
|
|
right: 410px;
|
|
top: 40px;
|
|
height: 300px;
|
|
width: 300px;
|
|
transition: transform 0.3s ease;
|
|
animation: buttonEntry 1s ease-in-out;
|
|
}
|
|
.blog .div2 .entrya h2 {
|
|
font-size: 20px;
|
|
color: #3b3561;
|
|
margin-bottom: 10px;
|
|
font-family: "Lexend", serif;
|
|
font-weight: 500;
|
|
overflow: hidden; /* Hide overflowing text */
|
|
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
|
|
max-width: 250px; /* Restrict container width */
|
|
display: -webkit-box; /* Enables multi-line truncation */
|
|
-webkit-line-clamp: 1; /* Limit to 2 lines */
|
|
-webkit-box-orient: vertical; /* Vertical text orientation */
|
|
white-space: normal; /* Allow wrapping within the box */
|
|
align-content: center;
|
|
}
|
|
.blog .div2 .entrya p {
|
|
padding-top: 20px;
|
|
color: #3b3561;
|
|
font-size: 0.9rem;
|
|
overflow: hidden; /* Hide overflowing text */
|
|
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
|
|
max-width: 300px; /* Restrict container width */
|
|
display: -webkit-box; /* Enables multi-line truncation */
|
|
-webkit-line-clamp: 2; /* Limit to 2 lines */
|
|
-webkit-box-orient: vertical; /* Vertical text orientation */
|
|
white-space: normal; /* Allow wrapping within the box */
|
|
font-family: "Space Grotesk", monospace;
|
|
}
|
|
.blog .div2 .entrya:hover {
|
|
transform: translate(60px, 0px);
|
|
transform: translateY(-5px);
|
|
}
|
|
.blog .div2 .entrya img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
width: 200px; /* Set desired width */
|
|
border-radius: 10px; /* Optional: Rounded corners */
|
|
display: block; /* Ensures it's treated as a block element */
|
|
margin: 0 auto; /* Centers the image horizontally */
|
|
}
|
|
.blog .div2 .entrya {
|
|
animation: buttonEntry 1s ease-in-out;
|
|
}
|
|
.blog .div3 {
|
|
grid-area: 1/4/2/5;
|
|
padding-top: 30px;
|
|
width: 300px;
|
|
}
|
|
.blog .div3 .entryb {
|
|
grid-area: 1/3/2/4;
|
|
background-color: #4b8f8c;
|
|
color: black;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
border: none;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
position: fixed;
|
|
right: 90px;
|
|
top: 40px;
|
|
height: 300px;
|
|
width: 300px;
|
|
transition: transform 0.3s ease;
|
|
animation: buttonEntry 1s ease-in-out;
|
|
}
|
|
.blog .div3 .entryb h2 {
|
|
font-size: 20px;
|
|
color: #3b3561;
|
|
margin-bottom: 10px;
|
|
font-family: "Lexend", serif;
|
|
font-weight: 500;
|
|
overflow: hidden; /* Hide overflowing text */
|
|
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
|
|
max-width: 250px; /* Restrict container width */
|
|
display: -webkit-box; /* Enables multi-line truncation */
|
|
-webkit-line-clamp: 1; /* Limit to 2 lines */
|
|
-webkit-box-orient: vertical; /* Vertical text orientation */
|
|
white-space: normal; /* Allow wrapping within the box */
|
|
align-content: center;
|
|
}
|
|
.blog .div3 .entryb p {
|
|
padding-top: 20px;
|
|
color: #f7ebec;
|
|
font-size: 0.9rem;
|
|
overflow: hidden; /* Hide overflowing text */
|
|
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
|
|
max-width: 300px; /* Restrict container width */
|
|
display: -webkit-box; /* Enables multi-line truncation */
|
|
-webkit-line-clamp: 2; /* Limit to 2 lines */
|
|
-webkit-box-orient: vertical; /* Vertical text orientation */
|
|
white-space: normal; /* Allow wrapping within the box */
|
|
font-family: "Space Grotesk", monospace;
|
|
}
|
|
.blog .div3 .entryb:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
.blog .div3 .entryb img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
width: 200px; /* Set desired width */
|
|
border-radius: 10px; /* Optional: Rounded corners */
|
|
display: block; /* Ensures it's treated as a block element */
|
|
margin: 0 auto; /* Centers the image horizontally */
|
|
}
|
|
.blog .div4 {
|
|
grid-area: 2/3/3/4;
|
|
width: 300px;
|
|
}
|
|
.blog .div4 .entryc {
|
|
border-radius: 10px;
|
|
background-color: #dd614a;
|
|
color: black;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
border: none;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease;
|
|
animation: buttonEntry 1s ease-in-out;
|
|
position: fixed;
|
|
right: 410px;
|
|
bottom: 35px;
|
|
height: 300px;
|
|
width: 300px;
|
|
}
|
|
.blog .div4 .entryc h2 {
|
|
font-size: 20px;
|
|
color: #3b3561;
|
|
margin-bottom: 10px;
|
|
font-family: "Lexend", serif;
|
|
font-weight: 500;
|
|
overflow: hidden; /* Hide overflowing text */
|
|
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
|
|
max-width: 250px; /* Restrict container width */
|
|
display: -webkit-box; /* Enables multi-line truncation */
|
|
-webkit-line-clamp: 1; /* Limit to 2 lines */
|
|
-webkit-box-orient: vertical; /* Vertical text orientation */
|
|
white-space: normal; /* Allow wrapping within the box */
|
|
align-content: center;
|
|
}
|
|
.blog .div4 .entryc p {
|
|
padding-top: 20px;
|
|
color: #f7ebec;
|
|
font-size: 0.9rem;
|
|
overflow: hidden; /* Hide overflowing text */
|
|
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
|
|
max-width: 300px; /* Restrict container width */
|
|
display: -webkit-box; /* Enables multi-line truncation */
|
|
-webkit-line-clamp: 2; /* Limit to 2 lines */
|
|
-webkit-box-orient: vertical; /* Vertical text orientation */
|
|
white-space: normal; /* Allow wrapping within the box */
|
|
font-family: "Space Grotesk", monospace;
|
|
}
|
|
.blog .div4 .entryc:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
.blog .div4 .entryc img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
width: 200px; /* Set desired width */
|
|
border-radius: 10px; /* Optional: Rounded corners */
|
|
display: block; /* Ensures it's treated as a block element */
|
|
margin: 0 auto; /* Centers the image horizontally */
|
|
}
|
|
.blog .div5 {
|
|
grid-area: 2/4/3/5;
|
|
width: 300px;
|
|
}
|
|
.blog .div5 .entryd {
|
|
grid-area: 1/3/2/4;
|
|
background-color: #f7ebec;
|
|
color: black;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
border: none;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease;
|
|
animation: buttonEntry 1s ease-in-out;
|
|
position: fixed;
|
|
right: 90px;
|
|
bottom: 35px;
|
|
height: 300px;
|
|
width: 300px;
|
|
}
|
|
.blog .div5 .entryd h2 {
|
|
font-size: 20px;
|
|
color: #3b3561;
|
|
margin-bottom: 10px;
|
|
font-family: "Lexend", serif;
|
|
font-weight: 500;
|
|
overflow: hidden; /* Hide overflowing text */
|
|
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
|
|
max-width: 250px; /* Restrict container width */
|
|
display: -webkit-box; /* Enables multi-line truncation */
|
|
-webkit-line-clamp: 1; /* Limit to 2 lines */
|
|
-webkit-box-orient: vertical; /* Vertical text orientation */
|
|
white-space: normal; /* Allow wrapping within the box */
|
|
align-content: center;
|
|
}
|
|
.blog .div5 .entryd p {
|
|
padding-top: 20px;
|
|
color: #3b3561;
|
|
font-size: 14px;
|
|
overflow: hidden; /* Hide overflowing text */
|
|
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
|
|
max-width: 300px; /* Restrict container width */
|
|
display: -webkit-box; /* Enables multi-line truncation */
|
|
-webkit-line-clamp: 2; /* Limit to 2 lines */
|
|
-webkit-box-orient: vertical; /* Vertical text orientation */
|
|
white-space: normal; /* Allow wrapping within the box */
|
|
font-family: "Space Grotesk", monospace;
|
|
}
|
|
.blog .div5 .entryd:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
.blog .div5 .entryd img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
width: 200px; /* Set desired width */
|
|
border-radius: 10px; /* Optional: Rounded corners */
|
|
display: block; /* Ensures it's treated as a block element */
|
|
margin: 0 auto; /* Centers the image horizontally */
|
|
}
|
|
|
|
/*# sourceMappingURL=index.css.map */
|