added css:
This commit is contained in:
cabbbyy
48
style/hobbies.css
Normal file
48
style/hobbies.css
Normal file
@@ -0,0 +1,48 @@
|
||||
.hobbies {
|
||||
width: 100%;
|
||||
height: 100vh; /* adjust as you like */
|
||||
border-radius: 10px !important; /* ← rounded corners */
|
||||
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Horizontal‑scroll wrapper */
|
||||
.horizontal-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Inner scroller — flex row, full viewport height */
|
||||
.horizontal-section__inner {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Each card: same width as the container (70vw), stacked vertically inside */
|
||||
.card {
|
||||
flex: none;
|
||||
width: 100%; /* same as .container width (70vw) */
|
||||
margin-right: 1rem; /* gap between cards */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Image on top */
|
||||
.card img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Caption below */
|
||||
.card .caption {
|
||||
margin-top: 0.5rem;
|
||||
text-align: center;
|
||||
color: var(--fg-one);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
22
style/intro.css
Normal file
22
style/intro.css
Normal file
@@ -0,0 +1,22 @@
|
||||
.intro {
|
||||
width: 100%;
|
||||
height: 100vh; /* adjust as you like */
|
||||
border-radius: 10px !important; /* ← rounded corners */
|
||||
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
font-size: 7rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.intro b {
|
||||
font-size: 10rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.intro p {
|
||||
font-size: 3rem;
|
||||
}
|
||||
155
style/mapbox.css
Normal file
155
style/mapbox.css
Normal file
@@ -0,0 +1,155 @@
|
||||
/* map + overlay wrapper */
|
||||
.map-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Map */
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 70vh; /* adjust as you like */
|
||||
border-radius: 10px !important; /* ← rounded corners */
|
||||
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* removing watermark */
|
||||
.mapboxgl-ctrl-logo { display: none !important; }
|
||||
|
||||
/* Company list */
|
||||
.company-list {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
padding: 0.5rem;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
z-index: 1;
|
||||
color: var(--fg-one);
|
||||
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
backdrop-filter: blur(4px);
|
||||
border-radius: 10px !important; /* ← rounded corners */
|
||||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||||
}
|
||||
|
||||
/* company list button*/
|
||||
.company-list button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
background: none;
|
||||
border-radius: 10px; /* ← rounded corners */
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.company-list button:hover {
|
||||
background: rgb(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.company-list button + button {
|
||||
margin-top: 0.5rem; /* Only applies if there's a previous button */
|
||||
}
|
||||
|
||||
/* pressed company list button */
|
||||
|
||||
.company-list button.active {
|
||||
background: rgb(255, 255, 255, 0.2);
|
||||
filter: drop-shadow(0 0 2px gray) !important; /* <- gives a border */
|
||||
color: var(--fg-one);
|
||||
}
|
||||
|
||||
/* popup */
|
||||
.mapboxgl-popup {
|
||||
position: absolute !important;
|
||||
transform: none !important; /* cancel out Mapbox’s translate() */
|
||||
|
||||
overflow-y: auto;
|
||||
z-index: 1;
|
||||
|
||||
top: 1rem !important;
|
||||
left: auto !important;
|
||||
right: 1rem !important;
|
||||
}
|
||||
|
||||
/* popup bg */
|
||||
.mapboxgl-popup-content {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
-webkit-backdrop-filter: blur(4px) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
border-radius: 10px !important; /* ← rounded corners */
|
||||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||||
|
||||
color: var(--bg-one);
|
||||
padding-bottom: 5px; /* or else its too big */
|
||||
}
|
||||
|
||||
/* popup image */
|
||||
.mapboxgl-popup-content img {
|
||||
border-radius: 5px !important; /* ← rounded corners */
|
||||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||||
|
||||
width: 100%; /* fill the popup’s width */
|
||||
max-width: none; /* ignore any mapbox defaults */
|
||||
height: auto; /* maintain aspect ratio */
|
||||
|
||||
}
|
||||
|
||||
/* hide the popup tip/arrow */
|
||||
.mapboxgl-popup-tip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Caption */
|
||||
.blurb {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
|
||||
background: var(--bg-two);
|
||||
color: var(--fg-one);
|
||||
|
||||
border-radius: 10px;
|
||||
min-height: 8rem; /* optional */
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* blurb title */
|
||||
.blurb h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* fixed popup that won’t move with the map */
|
||||
.fixed-popup {
|
||||
position: absolute !important;
|
||||
transform: none !important; /* cancel out Mapbox’s translate() */
|
||||
|
||||
z-index: 1;
|
||||
|
||||
top: 1rem !important;
|
||||
right: -1rem !important;
|
||||
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
-webkit-backdrop-filter: blur(4px) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
border-radius: 10px !important; /* ← rounded corners */
|
||||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||||
|
||||
color: var(--bg-one);
|
||||
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
max-width: 200px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fixed-popup img {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
8
style/projects.css
Normal file
8
style/projects.css
Normal file
@@ -0,0 +1,8 @@
|
||||
.projects {
|
||||
width: 100%;
|
||||
height: 50vh; /* adjust as you like */
|
||||
border-radius: 10px !important; /* ← rounded corners */
|
||||
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
52
style/style.css
Normal file
52
style/style.css
Normal file
@@ -0,0 +1,52 @@
|
||||
/* styles.css
|
||||
* Global Color Theme
|
||||
* ex: ` color: var(--red);`
|
||||
*/
|
||||
:root {
|
||||
--bg-one: #111111; /* black */
|
||||
--bg-two: #303030; /* gray */
|
||||
|
||||
--fg-one: #ffffff; /* white */
|
||||
--fg-two: #f3f3f3; /* light gray */
|
||||
|
||||
--blue: #1e90ff;
|
||||
--red: #e63946;
|
||||
--green: #2a9d8f;
|
||||
}
|
||||
|
||||
/* General Site */
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
|
||||
background-color: var(--bg-one);
|
||||
color: var(--fg-one);
|
||||
}
|
||||
|
||||
/* container centered at 85% width */
|
||||
.container {
|
||||
width: 70vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
/* scroll.js */
|
||||
/* base state: slightly shrunken + faded out */
|
||||
.scroll-section {
|
||||
transform: scale(0.85);
|
||||
opacity: 0.5;
|
||||
transition:
|
||||
transform 0.6s cubic-bezier(.22,.61,.36,1),
|
||||
opacity 0.6s cubic-bezier(.22,.61,.36,1);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* when in view: full size + fully opaque */
|
||||
.scroll-section.in-view {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
8
style/thanks.css
Normal file
8
style/thanks.css
Normal file
@@ -0,0 +1,8 @@
|
||||
.thanks {
|
||||
width: 100%;
|
||||
height: 50vh; /* adjust as you like */
|
||||
border-radius: 10px !important; /* ← rounded corners */
|
||||
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
Reference in New Issue
Block a user