haskal
/
Plume
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve tabs on small screens

This commit is contained in:
Bat 2018-09-05 18:07:39 +01:00
parent b66d4f73ce
commit 13a04198f0
1 changed files with 122 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

238
static/css/main.css
View File

@ -615,6 +615,123 @@
font-weight: bold;
}
/*== Pagination ==*/
.pagination {
display: flex;
justify-content: space-evenly;
}
.pagination > * {
padding: 2em;
}
/*== Flex boxes ==*/
.flex {
display: flex;
flex-direction: row;
align-items: center;
}
.flex .grow {
flex: 1;
}
.left-icon {
align-self: center;
padding: 1em;
background: #DADADA;
border-radius: 50px;
margin: 1em;
margin-right: 2em;
}
/*== Footer ==*/
body > footer {
display: flex;
align-content: center;
justify-content: space-between;
background: #ECECEC;
padding: 0 20%;
margin-top: 5em;
}
body > footer * {
margin: 5em 0;
}
/** Medias **/
figure {
text-align: center;
margin: 2em;
max-width: 100%;
width: auto;
height: auto;
}
figure > * {
max-width: 100%;
}
figcaption {
padding: 1em;
}
.preview {
display: block;
max-width: 100px;
max-height: 100px;
width: auto;
height: auto;
margin-right: 20px;
}
/** Avatars **/
.avatar {
border-radius: 100%;
}
.avatar.small {
width: 50px;
height: 50px;
}
.avatar.medium {
width: 100px;
height: 100px;
margin: 20px;
}
.avatar.padded {
margin-right: 2rem;
}
/** Tabs **/
.tabs {
border-bottom: 1px solid #DADADA;
padding: 0px;
margin: auto 20% 2em;
overflow: auto;
display: flex;
}
.tabs a {
display: inline-block;
color: #242424;
padding: 1em;
}
.tabs a.selected {
color: #7765E3;
border-bottom: 1px solid #7765E3;
}
.user-summary {
margin: 2em 0px;
}
/* ================= *
* Small Screens *
* ================= */
@ -718,120 +835,9 @@
.card {
min-width: 80%;
min-height: 80%;
}
}
.tabs {
margin: auto 0px 2em;
}
}
/*== Pagination ==*/
.pagination {
display: flex;
justify-content: space-evenly;
}
.pagination > * {
padding: 2em;
}
/*== Flex boxes ==*/
.flex {
display: flex;
flex-direction: row;
align-items: center;
}
.flex .grow {
flex: 1;
}
.left-icon {
align-self: center;
padding: 1em;
background: #DADADA;
border-radius: 50px;
margin: 1em;
margin-right: 2em;
}
/*== Footer ==*/
body > footer {
display: flex;
align-content: center;
justify-content: space-between;
background: #ECECEC;
padding: 0 20%;
margin-top: 5em;
}
body > footer * {
margin: 5em 0;
}
/** Medias **/
figure {
text-align: center;
margin: 2em;
max-width: 100%;
width: auto;
height: auto;
}
figure > * {
max-width: 100%;
}
figcaption {
padding: 1em;
}
.preview {
display: block;
max-width: 100px;
max-height: 100px;
width: auto;
height: auto;
margin-right: 20px;
}
/** Avatars **/
.avatar {
border-radius: 100%;
}
.avatar.small {
width: 50px;
height: 50px;
}
.avatar.medium {
width: 100px;
height: 100px;
margin: 20px;
}
.avatar.padded {
margin-right: 2rem;
}
/** Tabs **/
.tabs {
border-bottom: 1px solid #DADADA;
padding: 0px;
margin: auto 20% 2em;
}
.tabs a {
display: inline-block;
color: #242424;
padding: 1em;
}
.tabs a.selected {
color: #7765E3;
border-bottom: 1px solid #7765E3;
}
.user-summary {
margin: 2em 0px;
}