istio
/
istio.io
mirror of https://github.com/istio/istio.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move Blog Year Buttons to Grid Layout (#16022) 

* Move Blog Year Buttons to Grid Layout

* Resolve lint complaints

* Move to 2 Columns on Mobile & Re-center Btns

* Remove Fixed Btn Height & Lint Fixes

* Sass Linter Fix

* Return to Flexbox & Allow Wrap

* Fix Margin & Make Btns Same Size
This commit is contained in:
Michael Weiner 2024-11-30 13:52:33 -06:00 committed by GitHub
parent eb78a57fad
commit eaa92b29b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/sass/misc/_blog.scss
View File

@ -30,37 +30,37 @@
.year-buttons { .year-buttons {
display: flex; display: flex;
overflow: auto; flex-direction: row;
white-space: nowrap; flex-wrap: wrap;
@media (min-width: $bp-xl) { justify-content: center;
white-space: normal;
overflow: unset;
justify-content: center;
}
.year-button { .year-button {
padding: .5em 3.5em;
min-width: 168px;
height: 36px;
margin: 2.5em .5em 3.75em;
border-radius: 28px;
border: solid 2px $inputBorderColor;
background-color: #fff; background-color: #fff;
font-weight: $boldTextWeight; border: solid 2px $inputBorderColor;
line-height: 1.5; border-radius: 28px;
letter-spacing: normal;
color: $linkActiveColor; color: $linkActiveColor;
font-weight: $boldTextWeight;
letter-spacing: normal;
line-height: 1.5;
margin: 1em .5em;
min-width: 5rem;
padding: .5em 1.5em;
@media (min-width: $bp-md) { @media (min-width: $bp-md) {
margin: 2.5em 1.15em 3.75em 0; min-width: 10rem;
padding: .5em 3.5em;
&:hover { &:hover {
outline: 0; box-shadow: 2px 2px 15px 0 rgba(101, 126, 186, 1);
-webkit-box-shadow: 2px 2px 15px 0 rgba(101, 126, 186, 1); -webkit-box-shadow: 2px 2px 15px 0 rgba(101, 126, 186, 1);
-moz-box-shadow: 2px 2px 15px 0 rgba(101, 126, 186, 1); -moz-box-shadow: 2px 2px 15px 0 rgba(101, 126, 186, 1);
box-shadow: 2px 2px 15px 0 rgba(101, 126, 186, 1); outline: 0;
} }
} }
&:hover {
cursor: pointer;
}
} }
.active { .active {