Fixed mobile styling for table
This commit is contained in:
Luke Barrett
parent
293b58815f
commit
35d25d79eb
1 changed files with 158 additions and 87 deletions
|
|
@ -1,98 +1,169 @@
|
|||
@media only screen and (max-width: 425px) {
|
||||
thead {
|
||||
> tr {
|
||||
visibility: collapse;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
> tr {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-areas:
|
||||
"func func"
|
||||
"name name"
|
||||
"email link";
|
||||
|
||||
width: 87vw;
|
||||
}
|
||||
> tr > td:nth-child(3) {
|
||||
grid-area: email;
|
||||
}
|
||||
> tr > td:nth-child(2) {
|
||||
grid-area: name;
|
||||
}
|
||||
> tr > td:nth-child(4) {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
grid-area: link;
|
||||
}
|
||||
> tr > td:nth-child(1) {
|
||||
grid-area: func;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
> tr:last-child {
|
||||
> td:nth-child(1) {
|
||||
border: 1px solid #dbdbdb !important;
|
||||
border-width: 0 0 1px !important;
|
||||
padding: 0.5em 0.75em !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
> td:nth-child(2) {
|
||||
border: 1px solid #dbdbdb !important;
|
||||
border-width: 0 0 1px !important;
|
||||
padding: 0.5em 0.75em !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
> tr > td:nth-child(3):before {
|
||||
content: "E-mail: ";
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
> tr > td:nth-child(2):before {
|
||||
content: "Name: ";
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
> tr > td:nth-child(1):before {
|
||||
content: "Function: ";
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
> tr > td:nth-child(4):before {
|
||||
grid-area: link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#contact-icons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .column {
|
||||
max-width: 70vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .column {
|
||||
max-width: 70vw;
|
||||
}
|
||||
|
||||
.contact-circle-option {
|
||||
display: block;
|
||||
max-width: 200px;
|
||||
|
||||
.contact-circle-wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 60%;
|
||||
padding-bottom: 60%;
|
||||
height: 0;
|
||||
margin: 0 auto;
|
||||
|
||||
.contact-circle-pulse {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $secondary;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-circle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: $secondary;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
color: $highlighted-text-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-circle-option {
|
||||
display: block;
|
||||
max-width: 200px;
|
||||
|
||||
.contact-circle-wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 60%;
|
||||
padding-bottom: 60%;
|
||||
height: 0;
|
||||
margin: 0 auto;
|
||||
|
||||
.contact-circle-pulse {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $secondary;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-circle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: $secondary;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
color: $highlighted-text-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-circle-wrapper:hover, .contact-circle-wrapper:focus {
|
||||
|
||||
.grow {
|
||||
transition: all .2s ease-in-out;
|
||||
-moz-transform: scale(1.2);
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.contact-description {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.contact-text-link {
|
||||
color: $text;
|
||||
border-bottom: 1px solid $secondary;
|
||||
margin-top: 7px;
|
||||
//font-size: 1.5em;
|
||||
}
|
||||
|
||||
.contact-text-link:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
.contact-circle-wrapper:hover,
|
||||
.contact-circle-wrapper:focus {
|
||||
.grow {
|
||||
transition: all 0.2s ease-in-out;
|
||||
-moz-transform: scale(1.2);
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.contact-description {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.contact-text-link {
|
||||
color: $text;
|
||||
border-bottom: 1px solid $secondary;
|
||||
margin-top: 7px;
|
||||
//font-size: 1.5em;
|
||||
}
|
||||
|
||||
.contact-text-link:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#contact-info {
|
||||
h1 {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.is-divider {
|
||||
margin-bottom: 0.7em;
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
.is-divider {
|
||||
margin-bottom: 0.7em;
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
#contact-location-buttons {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#contact-location-buttons {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button:hover, .button:focus {
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
.button:hover,
|
||||
.button:focus {
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue