Files
uni-web-site/src/styles/index.styl
2025-12-29 00:12:40 +10:00

166 lines
3.1 KiB
Stylus

item_h=3em;
double-border()
border-top double thick silver
border-bottom double thick silver
flex-center()
display flex
align-items center
justify-content center
text-center-bold()
text-align center
font-weight bold
display block
grid-responsive(columns)
display grid
grid-template-columns columns
grid-template-rows 1fr
.navbar
double-border()
font-size 0
grid-responsive(repeat(7, min-content))
justify-items start
&__link-wrapper
color black
text-decoration none
&__item
display inline-block
width max-content
height item_h
line-height item_h
text-align center
vertical-align middle
padding 0 10px
margin @padding
overflow hidden
text-overflow ellipsis
font-size medium
&_selected
color green
font-weight bold
border-left double thin silver
border-right double thin silver
.gallery
display flex
flex-direction row
width 90%
margin auto
&__image
margin auto
width 100%
border thin solid black
&:nth-child(2n+1)
margin-top 10px
.main-container
grid-responsive(3fr 1fr)
.info-block
border solid thin black
padding 2vw
margin 1vw 0
&__header
text-center-bold()
&__container
&_layout-a
grid-responsive(3fr 3fr 2fr)
&_layout-b
grid-responsive(4fr 7fr 4fr)
& > *
margin 2vw
&__text, &__description
text-align justify
&__image
margin auto
width 100%
&__link
color inherit
.sidebar
border-left thin solid black
margin 30px 0 0 50px
.small-card
margin 20px 10px 0
grid-responsive(1fr 1fr)
&__content
text-align justify
&__header
text-center-bold()
text-align right
&__link
display block
text-align right
color inherit
&__image
& img
width 100%
margin-left:10px
@media screen and (max-width: 1000px)
.small-card
display flex
flex-direction column
.sidebar
margin 0
width:100%
@media screen and (max-width: 800px)
.navbar
grid-responsive(1fr 1fr)
grid-template-rows 1fr 1fr 1fr
justify-items center
&__item
&_selected
border-bottom double thick silver
border-left none
border-right none
.gallery
display inline-flex
flex-direction column
width 100%
&__image
width 100%
height 100%
&:nth-child(2n+1)
margin-top 0px
.main-container
display flex
flex-direction column
.info-block
&__container
&_layout-a, &_layout-b
display flex
flex-direction column