Change UI

This commit is contained in:
cuom1999 2022-06-02 17:09:24 -05:00
parent 5e963c6494
commit ba69ec2ffc
4 changed files with 96 additions and 91 deletions

View file

@ -39,6 +39,8 @@
.left-sidebar-item.active {
color: green;
font-weight: bold;
background-color: lightgreen;
.sidebar-icon {
color: green;
}
@ -101,67 +103,6 @@
color: #555;
}
@media (max-width: 799px) {
.left-sidebar-header {
display: none;
}
.left-sidebar-item {
display: inline-block;
flex: 1;
}
.left-sidebar {
text-align: right;
margin-bottom: 1em;
border-radius: 7px;
display: flex;
}
}
@media (min-width: 800px) {
.middle-content, .blog-sidebar, .right-sidebar {
display: block !important;
}
.middle-content {
margin-right: 1em !important;
}
#mobile.tabs {
display: none;
}
#three-col-container {
display: flex;
}
.middle-content {
max-width: 71.5%;
margin-left: 10%;
}
.blog-sidebar, .right-sidebar {
width: 18%;
}
.left-sidebar {
width: 8%;
margin-right: 1em;
position: fixed;
height: 100%;
margin-top: -4em;
padding-top: 4em;
border-right: 3px solid black;
}
.feed-table {
font-size: small;
}
.blog-box {
border-left: 2px solid black;
border-right: 2px solid black;
border-radius: 8px;
}
}
#mobile.tabs {
margin: 0;
@ -194,9 +135,9 @@
}
.blog-box {
border-bottom: 1px solid black;
border-top: 2px solid black;
margin-bottom: 1em;
border-bottom: 1.4px solid lightgray;
border-top: 1.4px solid lightgray;
margin-bottom: 1.5em;
width: 90%;
padding: 1em 1.25em 0.5em 1.25em;
background-color: white;
@ -230,22 +171,21 @@
color: gray;
}
.left-sidebar {
background-color: #f0f1f3;
color: #616161;
}
.left-sidebar-item {
padding: 1em 0.5em;
text-align: center;
padding: 0.8em 0.2em 0.8em 1em;
.sidebar-icon {
width: 1.2em;
display: inline-block;
}
}
.left-sidebar-item:hover {
background-color: lightgray;
background-color: #e3e3e3;
cursor: pointer;
}
.left-sidebar-item.active:hover {
background-color: lightgreen;
}
.sidebar-icon {
font-size: x-large;
margin-bottom: 0.1em;
color: black;
}
.left-sidebar-header {
@ -257,4 +197,72 @@
}
.feed-table {
margin: 0;
}
.pre-expand-blog {
background-image: -webkit-linear-gradient(bottom, gray, lightgray 3%, transparent 8%, transparent 100%);
padding-bottom: 0;
}
@media (max-width: 799px) {
.left-sidebar-header {
display: none;
}
.left-sidebar-item {
display: inline-block;
flex: 1;
border-radius: 8px;
}
.left-sidebar {
text-align: center;
margin-bottom: 1em;
border-radius: 7px;
display: flex;
}
}
@media (min-width: 800px) {
.middle-content, .blog-sidebar, .right-sidebar {
display: block !important;
}
.middle-content {
margin-right: 1em !important;
}
#mobile.tabs {
display: none;
}
#three-col-container {
display: flex;
}
.middle-content {
max-width: 65%;
margin-left: 13%;
}
.blog-sidebar, .right-sidebar {
width: 20%;
}
.left-sidebar {
width: 11%;
position: fixed;
height: 100%;
margin-top: -4em;
padding-top: 4em;
}
.left-sidebar-item {
border-radius: 0 2em 2em 0;
}
.feed-table {
font-size: small;
}
.blog-box {
border-left: 1.4px solid lightgray;
border-right: 1.4px solid lightgray;
border-radius: 8px;
}
}

View file

@ -318,7 +318,7 @@ ul.problem-list {
}
.problem-feed-option-item.active {
background: goldenrod;
background: lightblue;
color: darkblue;
}