feat(cv): implement fixed sidebar layout for segment_0
Move title bar, language switcher, photo, About Me and captcha into a fixed left sidebar (280px). Main content scrolls independently with margin-left offset. On mobile (<=768px) sidebar reverts to static flow at the top. Reorder SegmentGeneral children: photo -> title/description -> captcha. Photo uses object-fit: contain to prevent cropping. Made-with: Cursormaster
sii42400
parent
e4cd265281
commit
319a6a705c
|
|
@ -389,6 +389,16 @@ const SegmentGeneral = ({ segment }) => {
|
||||||
className="segment_image cover"
|
className="segment_image cover"
|
||||||
alt={segment.title}
|
alt={segment.title}
|
||||||
/>
|
/>
|
||||||
|
<div className="segment_header_middle">
|
||||||
|
<div className="segment_title segment_title_image">
|
||||||
|
{segment.description_title}
|
||||||
|
</div>
|
||||||
|
{segment.description && (
|
||||||
|
<div className="segment_description segment_description_general">
|
||||||
|
{segment.description}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
{!isVerified ? (
|
{!isVerified ? (
|
||||||
<SimpleCaptchaWrapper
|
<SimpleCaptchaWrapper
|
||||||
onVerified={setIsVerified}
|
onVerified={setIsVerified}
|
||||||
|
|
@ -418,16 +428,6 @@ const SegmentGeneral = ({ segment }) => {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="segment_header_middle">
|
|
||||||
<div className="segment_title segment_title_image">
|
|
||||||
{segment.description_title}
|
|
||||||
</div>
|
|
||||||
{segment.description && (
|
|
||||||
<div className="segment_description segment_description_general">
|
|
||||||
{segment.description}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
@ -534,8 +534,9 @@ const IndexPage = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="page_layout">
|
||||||
<div className="global_segment">
|
<aside className="sidebar">
|
||||||
|
<div className="sidebar_header">
|
||||||
<div className="title_bar">
|
<div className="title_bar">
|
||||||
{content[0]["title"]}
|
{content[0]["title"]}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -544,20 +545,25 @@ const IndexPage = () => {
|
||||||
{content_swapper}
|
{content_swapper}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<SegmentGeneral
|
||||||
|
key="general_sidebar"
|
||||||
|
segment={content[0]}
|
||||||
|
/>
|
||||||
|
</aside>
|
||||||
|
<main className="main_content">
|
||||||
{
|
{
|
||||||
content.map((value, index) => (
|
content.slice(1).map((value, index) => (
|
||||||
<Segment
|
<Segment
|
||||||
key={`segment_${index}`}
|
key={`segment_${index + 1}`}
|
||||||
index={index}
|
index={index + 1}
|
||||||
segment={value}
|
segment={value}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
<div className="foot"></div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
<div className="foot">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,9 +30,149 @@ body {
|
||||||
src: url("../images/Lato-Regular.ttf");
|
src: url("../images/Lato-Regular.ttf");
|
||||||
}
|
}
|
||||||
|
|
||||||
.global_segment {
|
.page_layout {
|
||||||
margin-left: auto;
|
display: flex;
|
||||||
margin-right: auto;
|
flex-direction: row;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 280px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: darken($background_color, 3%);
|
||||||
|
padding: 20px 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 10;
|
||||||
|
border-right: 1px solid rgba($color, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba($color, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar_header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_bar {
|
||||||
|
flex: 1;
|
||||||
|
text-align: left;
|
||||||
|
font-family: $title_font_family;
|
||||||
|
font-size: 18pt;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language_bar {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 18pt;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment_general {
|
||||||
|
float: none;
|
||||||
|
margin-top: 0;
|
||||||
|
width: 100%;
|
||||||
|
position: static;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.segment_image {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cover {
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment_header_middle {
|
||||||
|
position: static;
|
||||||
|
left: auto;
|
||||||
|
right: auto;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment_title_image {
|
||||||
|
float: none;
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment_description_general {
|
||||||
|
clear: none;
|
||||||
|
float: none;
|
||||||
|
width: auto;
|
||||||
|
overflow: visible;
|
||||||
|
margin: 10px 0 0 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 8.5pt;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-container {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 15px;
|
||||||
|
|
||||||
|
.captcha-form {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
padding: 12px 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 9pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment_content_image {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
padding: 12px 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $regular_image_font_size;
|
||||||
|
font-family: $regular_font_family;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: $div_background_color;
|
||||||
|
color: $color;
|
||||||
|
|
||||||
|
.segment_image_item {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main_content {
|
||||||
|
margin-left: 280px;
|
||||||
max-width: 21cm;
|
max-width: 21cm;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
|
|
@ -63,23 +203,6 @@ body {
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title_bar {
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 80%;
|
|
||||||
float: left;
|
|
||||||
text-align: left;
|
|
||||||
font-family: $title_font_family;
|
|
||||||
font-size: 24pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language_bar {
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 20%;
|
|
||||||
float: left;
|
|
||||||
text-align: right;
|
|
||||||
font-size: 24pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_general {
|
.segment_general {
|
||||||
float: left;
|
float: left;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
|
|
@ -341,48 +464,22 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.global_segment {
|
.page_layout {
|
||||||
padding: 0 10px;
|
flex-direction: column;
|
||||||
|
|
||||||
.title_bar {
|
|
||||||
font-size: 18pt;
|
|
||||||
width: 75%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.language_bar {
|
.sidebar {
|
||||||
width: 25%;
|
position: static;
|
||||||
font-size: 18pt;
|
width: 100%;
|
||||||
}
|
height: auto;
|
||||||
|
overflow: visible;
|
||||||
.segment_general {
|
border-right: none;
|
||||||
.segment_image {
|
|
||||||
width: 140px;
|
|
||||||
height: 170px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_content_image {
|
|
||||||
width: 120px;
|
|
||||||
height: 150px;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-size: 6pt;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.segment_header_middle {
|
.main_content {
|
||||||
left: 140px;
|
margin-left: 0;
|
||||||
right: 150px;
|
padding: 0 10px;
|
||||||
}
|
|
||||||
|
|
||||||
.segment_title_image {
|
|
||||||
margin-left: -20px;
|
|
||||||
padding-top: 12.5px;
|
|
||||||
padding-bottom: 7.5px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_description_general {
|
|
||||||
font-size: 8pt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_title {
|
.segment_title {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
|
@ -424,36 +521,10 @@ body {
|
||||||
margin: 6px 0 6px 14px;
|
margin: 6px 0 6px 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.captcha-container .captcha-form {
|
|
||||||
width: 140px;
|
|
||||||
height: 170px;
|
|
||||||
font-size: 8pt;
|
|
||||||
padding: 0 8px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-size: 8pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha-input {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha-input, .captcha-button {
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 7pt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 500px) {
|
||||||
.global_segment {
|
.sidebar {
|
||||||
.title_bar {
|
.title_bar {
|
||||||
font-size: 15pt;
|
font-size: 15pt;
|
||||||
}
|
}
|
||||||
|
|
@ -461,38 +532,9 @@ body {
|
||||||
.language_bar {
|
.language_bar {
|
||||||
font-size: 15pt;
|
font-size: 15pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
.segment_general {
|
|
||||||
.segment_image {
|
|
||||||
width: 100px;
|
|
||||||
height: 125px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_content_image {
|
|
||||||
width: 90px;
|
|
||||||
height: 110px;
|
|
||||||
padding: 8px;
|
|
||||||
font-size: 4pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_header_middle {
|
|
||||||
left: 95px;
|
|
||||||
right: 108px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_title_image {
|
|
||||||
margin-left: -10px;
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 0px;
|
|
||||||
height: 33px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_description_general {
|
|
||||||
font-size: 6.5pt;
|
|
||||||
margin: 6px 6px 6px 14px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main_content {
|
||||||
.segment_title {
|
.segment_title {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
font-size: 13pt;
|
font-size: 13pt;
|
||||||
|
|
@ -531,44 +573,12 @@ body {
|
||||||
font-size: 7.5pt;
|
font-size: 7.5pt;
|
||||||
margin: 6px 0 6px 14px;
|
margin: 6px 0 6px 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.captcha-container .captcha-form {
|
|
||||||
width: 100px;
|
|
||||||
height: 125px;
|
|
||||||
font-size: 7pt;
|
|
||||||
padding: 0 6px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-size: 6.25pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding-left: 22px;
|
|
||||||
padding-right: 22px;
|
|
||||||
font-size: 6pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha-input {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha-input, .captcha-button {
|
|
||||||
padding: 4px;
|
|
||||||
font-size: 6pt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 415px) {
|
@media (max-width: 415px) {
|
||||||
.global_segment {
|
.sidebar {
|
||||||
padding: 0 6px;
|
padding: 6px;
|
||||||
|
|
||||||
.title_bar {
|
.title_bar {
|
||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
|
|
@ -577,36 +587,10 @@ body {
|
||||||
.language_bar {
|
.language_bar {
|
||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
.segment_general {
|
|
||||||
.segment_image {
|
|
||||||
width: 80px;
|
|
||||||
height: 100px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.segment_content_image {
|
.main_content {
|
||||||
width: 75px;
|
padding: 0 6px;
|
||||||
height: 95px;
|
|
||||||
padding: 6px;
|
|
||||||
font-size: 2.5pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_header_middle {
|
|
||||||
left: 75px;
|
|
||||||
right: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_title_image {
|
|
||||||
margin-left: -8px;
|
|
||||||
height: 26px;
|
|
||||||
font-size: 10pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_description_general {
|
|
||||||
font-size: 4.5pt;
|
|
||||||
margin: 4px 4px 4px 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.segment_title {
|
.segment_title {
|
||||||
width: 130px;
|
width: 130px;
|
||||||
|
|
@ -655,37 +639,5 @@ body {
|
||||||
font-size: 4.5pt;
|
font-size: 4.5pt;
|
||||||
margin: 4px 0 4px 10px;
|
margin: 4px 0 4px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.captcha-container .captcha-form {
|
|
||||||
width: 85px;
|
|
||||||
height: 105px;
|
|
||||||
font-size: 2.5pt;
|
|
||||||
padding: 0 5px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 4px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
font-size: 4pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding-left: 24.25px;
|
|
||||||
padding-right: 24.25px;
|
|
||||||
font-size: 4pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha-input {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha-input, .captcha-button {
|
|
||||||
padding: 3px;
|
|
||||||
font-size: 5pt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue