252 lines
6.4 KiB
SCSS
252 lines
6.4 KiB
SCSS
@use "../reset";
|
|
@use "../variable";
|
|
@use "../components/navbar";
|
|
|
|
/* 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,
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(
|
|
to top right,
|
|
variable.$blue,
|
|
lighten(variable.$blue, 50%)
|
|
);
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
|
|
.container {
|
|
display: flex;
|
|
height: 100vh;
|
|
|
|
.div1 {
|
|
width: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
h1 {
|
|
font-size: 60px;
|
|
color: variable.$white;
|
|
font-family: variable.$font-header;
|
|
font-weight: 300;
|
|
padding: 80px 0px 0px 45px;
|
|
}
|
|
|
|
p {
|
|
font-family: variable.$font-body;
|
|
color: variable.$blue;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
max-width: 560px;
|
|
margin-top: 20px;
|
|
padding: 0px 0px 0px 50px;
|
|
}
|
|
|
|
.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: variable.$font-body; /* Font style */
|
|
font-size: 16px; /* Font size */
|
|
font-weight: bold; /* Bold text */
|
|
color: variable.$blue; /* Text color */
|
|
border: 2px solid variable.$blue; /* Button border */
|
|
border-radius: 30px; /* Rounded edges for the button */
|
|
background-color: variable.$white; /* Transparent background */
|
|
cursor: pointer; /* Pointer cursor on hover */
|
|
transition: all 0.3s ease; /* Smooth transition on hover */
|
|
margin-top: 25px; /* Space between text and next element */
|
|
|
|
&:hover {
|
|
background-color: variable.$blue; /* Change background color on hover */
|
|
color: variable.$white; /* Change text color on hover */
|
|
}
|
|
|
|
.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: variable.$blue; /* Circle background color */
|
|
color: variable.$white; /* Arrow color */
|
|
border-radius: 50%; /* Make the icon circular */
|
|
transition: all 0.3s ease; /* Smooth transition on hover */
|
|
}
|
|
|
|
&:hover .icon {
|
|
background-color: variable.$white; /* Change circle background on hover */
|
|
color: variable.$blue; /* Change arrow color on hover */
|
|
}
|
|
}
|
|
|
|
/* General button styling */
|
|
.buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: left;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 20px;
|
|
padding-right: 85px;
|
|
margin-top: 20px;
|
|
|
|
button {
|
|
padding: 3.5px 23px;
|
|
font-size: 16px;
|
|
font-family: variable.$font-body;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
|
margin: 0px 0px 0px 70px;
|
|
|
|
&.psyc-button {
|
|
background-color: variable.$pink;
|
|
color: variable.$blue;
|
|
|
|
&:hover {
|
|
background-color: darken(variable.$pink, 10%);
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
&.imp-button {
|
|
background-color: variable.$green;
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: darken(variable.$green, 10%);
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
&.spirit-button {
|
|
background-color: variable.$white;
|
|
color: variable.$blue;
|
|
|
|
&:hover {
|
|
background-color: lighten(variable.$blue, 60%);
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
&.code-button {
|
|
background-color: variable.$orange;
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: darken(variable.$orange, 10%);
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.div2 {
|
|
width: 50%;
|
|
padding-left: 30px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
a {
|
|
text-decoration: none; // Removes the underline
|
|
}
|
|
|
|
.entrya {
|
|
background-color: variable.$pink;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
border: none;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
height: 300px;
|
|
width: 300px;
|
|
margin: 32px 0px 0px 35px;
|
|
transition: transform 0.3s ease;
|
|
animation: buttonEntry 1s ease-in-out;
|
|
|
|
h2 {
|
|
font-size: 20px;
|
|
color: variable.$blue;
|
|
margin-bottom: 10px;
|
|
font-family: variable.$font-header;
|
|
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 */
|
|
}
|
|
|
|
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 */
|
|
}
|
|
|
|
p {
|
|
padding-top: 20px;
|
|
color: variable.$blue;
|
|
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: variable.$font-body;
|
|
}
|
|
|
|
&:hover {
|
|
transform: translate(60px, 0px);
|
|
transform: translateY(-5px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// .entryb {
|
|
// grid-area: 1 / 3 / 2 / 4;
|
|
// background-color: variable.$green;
|
|
// color: black;
|
|
// }
|
|
|
|
// .entryc {
|
|
// border-radius: 10px;
|
|
// background-color: variable.$orange;
|
|
// color: black; }
|
|
|
|
// .entryd {
|
|
// background-color: variable.$white;
|
|
// color: black;
|
|
// border-radius: 10px;
|
|
// }
|