198 lines
3.2 KiB
CSS
198 lines
3.2 KiB
CSS
/* menu part */
|
|
.menu {
|
|
border-top: double thick silver;
|
|
border-bottom: double thick silver;
|
|
font-size: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(7, min-content);
|
|
grid-template-rows: 1fr;
|
|
justify-items: start;
|
|
}
|
|
|
|
|
|
|
|
.menu-item {
|
|
display: inline-block;
|
|
width: max-content;
|
|
height: 3em;
|
|
line-height: 3em;
|
|
/* to align to center */
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
padding: 0 10px;
|
|
margin: 0 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: medium;
|
|
|
|
}
|
|
|
|
.menu .selected {
|
|
color: green;
|
|
font-weight: bold;
|
|
border-left: double thin silver;
|
|
border-right: double thin silver;
|
|
}
|
|
|
|
.menu .menu-header {
|
|
color: green;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.menu a {
|
|
color: black;
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.menu {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
justify-items: center;
|
|
}
|
|
|
|
.menu .selected {
|
|
border-bottom: double thick silver;
|
|
|
|
}
|
|
}
|
|
|
|
/* 3 images part */
|
|
.images-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 90%;
|
|
margin: auto;
|
|
}
|
|
|
|
.images-container>img {
|
|
margin: auto;
|
|
width:100%;
|
|
border: thin solid black;
|
|
}
|
|
|
|
.images-container>img:nth-child(2n+1) {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.images-container {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.images-container>img {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.images-container>img:nth-child(2n+1) {
|
|
margin-top: 0px;
|
|
}
|
|
}
|
|
|
|
|
|
/* text block part */
|
|
.info-block-header {
|
|
display: block;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.block-border {
|
|
border: solid thin black;
|
|
padding: 2vw;
|
|
margin: 1vw 0;
|
|
}
|
|
|
|
.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,
|
|
.h-block>div {
|
|
text-align: justify;
|
|
}
|
|
|
|
.h-block>img {
|
|
margin: auto;
|
|
width: 100%;
|
|
}
|
|
/*small articles part*/
|
|
.main-right{
|
|
border-left: thin solid black;
|
|
margin: 30px 0 0 50px;
|
|
|
|
}
|
|
.small-info-block{
|
|
margin: 20px 10px 0 ;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
}
|
|
@media screen and (max-width: 1000px) {
|
|
.small-info-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.small-info-block-header{
|
|
display: block;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
|
|
.small-info-block-image >img{
|
|
width: 100%;
|
|
}
|
|
.small-info-block-text {
|
|
text-align: justify;
|
|
}
|
|
.small-info-block-text >a{
|
|
display: block;
|
|
text-align: right;
|
|
}
|
|
/*main part*/
|
|
.main{
|
|
display: grid;
|
|
grid-template-columns: 3fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|