No edit summary |
No edit summary |
||
(55 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* | .page-Main_Page .firstHeading { display:none; } | ||
#home-header { | |||
padding: 0.5rem 0; | |||
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fff, #e8f2f8) repeat scroll 0 0; | |||
border-bottom:1px solid #aaa; | |||
} | |||
#home-header .title { | |||
border:none; | |||
margin-top:0 | |||
} | |||
#home-left { | |||
float:left; | |||
width:100%; | |||
clear:both; | |||
} | |||
#home-center { | |||
float:center; | |||
width:60%; | |||
word-wrap: break-word; | |||
clear:both; | |||
} | |||
#home-right { | |||
float:right; | |||
width:33%; | |||
} | |||
#home-cat { | |||
display:flex; | |||
flex-flow:row wrap; | |||
justify-content: space-evenly; | |||
align-items:stretch; | |||
} | |||
.home-block { | |||
border-radius:0.3rem; | |||
box-shadow:0 0 0.3rem #999; | |||
margin:0.8rem 0; | |||
padding: 0.1rem 1rem 1rem; | |||
} | |||
#home-cat .home-block { | |||
width:30%; | |||
padding:0; | |||
overflow:hidden; | |||
text-align:center; | |||
display:flex; | |||
flex-direction:column; | |||
} | |||
#home-cat .home-block .head { | |||
background-size: cover; | |||
height: 64px; | |||
} | |||
#home-cat .home-block .head .cattitle { | |||
display: block; | |||
position: relative; | |||
float:center; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
#home-cat .home-block .head .cattitle span { | |||
display: block; | |||
position:absolute; | |||
top:25px; | |||
left:20px; | |||
font-size:30px; | |||
} | |||
#home-cat .home-block .content { | |||
padding:0 1rem; | |||
flex:1; | |||
justify-content: flex-end | |||
} | |||
#home-cat .home-block table { | |||
font-size:8pt; | |||
width:100%; | |||
border-spacing:0px 5px; | |||
border-top: 1px solid #CCC; | |||
border-bottom: 1px solid #CCC; | |||
} | |||
.responsive-image { | |||
max-width: 100%; | |||
height: auto; | |||
display: block; | |||
margin: 0 auto; /* Center the image */ | |||
} | |||
/* Container to hold the custom boxes */ | |||
.custom-box-container { | |||
display: flex; | |||
flex-wrap: wrap; /* Allows boxes to wrap to the next line if necessary */ | |||
justify-content: center; /* Centers the boxes horizontally */ | |||
gap: 20px; /* Space between the boxes */ | |||
margin: 20px auto; /* Center the container itself */ | |||
max-width: 1000px; /* Adjust as needed */ | |||
} | |||
/* Custom box styles */ | |||
.custom-box { | |||
background-color: #444444; | |||
border: 1px solid #ccc; | |||
border-radius: 5px; | |||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |||
padding: -10px 0px; /* Adjusted padding to reduce height */ | |||
text-align: center; | |||
max-width: 300px; /* Maximum width of the box */ | |||
flex: 1 1 calc(33.333% - 40px); /* Adjust width as needed */ | |||
transition: transform 0.2s; /* Optional: Add a transition effect */ | |||
} |
Latest revision as of 12:04, 16 June 2024
.page-Main_Page .firstHeading { display:none; } #home-header { padding: 0.5rem 0; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fff, #e8f2f8) repeat scroll 0 0; border-bottom:1px solid #aaa; } #home-header .title { border:none; margin-top:0 } #home-left { float:left; width:100%; clear:both; } #home-center { float:center; width:60%; word-wrap: break-word; clear:both; } #home-right { float:right; width:33%; } #home-cat { display:flex; flex-flow:row wrap; justify-content: space-evenly; align-items:stretch; } .home-block { border-radius:0.3rem; box-shadow:0 0 0.3rem #999; margin:0.8rem 0; padding: 0.1rem 1rem 1rem; } #home-cat .home-block { width:30%; padding:0; overflow:hidden; text-align:center; display:flex; flex-direction:column; } #home-cat .home-block .head { background-size: cover; height: 64px; } #home-cat .home-block .head .cattitle { display: block; position: relative; float:center; width: 100%; height: 100%; } #home-cat .home-block .head .cattitle span { display: block; position:absolute; top:25px; left:20px; font-size:30px; } #home-cat .home-block .content { padding:0 1rem; flex:1; justify-content: flex-end } #home-cat .home-block table { font-size:8pt; width:100%; border-spacing:0px 5px; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; } .responsive-image { max-width: 100%; height: auto; display: block; margin: 0 auto; /* Center the image */ } /* Container to hold the custom boxes */ .custom-box-container { display: flex; flex-wrap: wrap; /* Allows boxes to wrap to the next line if necessary */ justify-content: center; /* Centers the boxes horizontally */ gap: 20px; /* Space between the boxes */ margin: 20px auto; /* Center the container itself */ max-width: 1000px; /* Adjust as needed */ } /* Custom box styles */ .custom-box { background-color: #444444; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: -10px 0px; /* Adjusted padding to reduce height */ text-align: center; max-width: 300px; /* Maximum width of the box */ flex: 1 1 calc(33.333% - 40px); /* Adjust width as needed */ transition: transform 0.2s; /* Optional: Add a transition effect */ }