131 lines
2.1 KiB
CSS
131 lines
2.1 KiB
CSS
/* menu part */
|
|
.menu {
|
|
border-top: double 4px silver;
|
|
border-bottom: double 4px silver;
|
|
font-size: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.menu {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr 1fr;
|
|
}
|
|
|
|
.menu .selected {
|
|
border-bottom: double 4px silver;
|
|
|
|
}
|
|
}
|
|
|
|
.menu-item {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 3em;
|
|
line-height: 3em;
|
|
/* to align to center */
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
margin: 0 1%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: medium;
|
|
|
|
}
|
|
|
|
.menu .selected {
|
|
color: green;
|
|
font-weight: bold;
|
|
border-left: double 4px silver;
|
|
border-right: double 4px silver;
|
|
}
|
|
|
|
.menu .menu-header {
|
|
color: green;
|
|
font-weight: bold;
|
|
float: left;
|
|
}
|
|
|
|
.menu a {
|
|
color: black;
|
|
}
|
|
|
|
|
|
/* 3 images part */
|
|
.images-container {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
width: 90%;
|
|
margin: auto;
|
|
}
|
|
|
|
.images-container > img {
|
|
margin: auto;
|
|
width: 100%;
|
|
height: 30vw;
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.images-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.images-container>img {
|
|
width: 90%;
|
|
height: 90%;
|
|
/* object-fit: fill; */
|
|
}
|
|
}
|
|
|
|
|
|
/* text block part */
|
|
.info-block-header{
|
|
display: block;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.block-border{
|
|
border: solid black 2px;
|
|
padding:2vw;
|
|
}
|
|
.block-a-container{
|
|
display: grid;
|
|
grid-template-columns: 3fr 3fr 2fr;
|
|
grid-template-rows: 1fr;
|
|
}
|
|
@media screen and (max-width: 800px) {
|
|
.block-a-container{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.block-b-container{
|
|
display: grid;
|
|
grid-template-columns: 4fr 7fr 4fr;
|
|
grid-template-rows: 1fr;
|
|
}
|
|
@media screen and (max-width: 800px) {
|
|
.block-b-container{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
|
|
.h-block *{
|
|
margin: 2vw;
|
|
}
|
|
.h-block >span{
|
|
text-align: justify;
|
|
}
|
|
|
|
.h-block >img{
|
|
margin: auto;
|
|
width: 100%;
|
|
/* height: 30vw; */
|
|
}
|