96 lines
1.5 KiB
CSS
96 lines
1.5 KiB
CSS
|
||
|
||
.section-panel-left {
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
#panel-left-toggle:not(:checked),
|
||
#panel-left-toggle:checked {
|
||
position: absolute;
|
||
top: -100%;
|
||
}
|
||
|
||
.panel-left-icon {
|
||
cursor: pointer !important;
|
||
padding-left: var(--s);
|
||
border: 2px solid transparent;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.profile-navigation {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
|
||
/* FEED NAVIGATION / PLUGINS */
|
||
.feed-nav {
|
||
margin-bottom: var(--xl);
|
||
}
|
||
|
||
.feed-nav a {
|
||
display: flex;
|
||
}
|
||
|
||
.feed-nav hr {
|
||
flex: 1;
|
||
background: linear-gradient(90deg, var(--accent), transparent);
|
||
}
|
||
|
||
.feed-nav a {
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.feed-nav .active {
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.main-nav a {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.footer {
|
||
margin-top: auto;
|
||
font-size: var(--unit);
|
||
}
|
||
|
||
.footer ul {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.footer ul li {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
/* > 720p */
|
||
@media only screen and (min-width:1281px) {
|
||
.section-panel-left #panel-left-toggle ~ .header-panel {
|
||
left: 0;
|
||
}
|
||
|
||
.panel-left-icon {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* > 1080p */
|
||
@media only screen and (min-width:1921px) {
|
||
/*
|
||
* Using the Van de Graaf Canon and Tschichold’s recommended 2:3 page-size ratio
|
||
*
|
||
* 50% - (100 * 2/3) / 2 = 33%
|
||
*
|
||
* > .section-panel-left
|
||
* 50 % - 33% = 17%
|
||
*/
|
||
.section-panel-left {
|
||
left: 0;
|
||
margin-left: 17vw;
|
||
}
|
||
}
|