Kazhnuz
parent
b62f217bbd
commit
d97c7b9df6
6 changed files with 108 additions and 111 deletions
|
|
@ -5,8 +5,8 @@
|
|||
*
|
||||
*/
|
||||
|
||||
$card-bigpad: $lineheight;
|
||||
$card-smallpad: $lineheight_half;
|
||||
$card-bigpad: $lineheight_rel;
|
||||
$card-smallpad: $lineheight_rel / 4;
|
||||
|
||||
.card {
|
||||
@include panel($card-bigpad);
|
||||
|
|
@ -35,7 +35,7 @@ $card-smallpad: $lineheight_half;
|
|||
&::before {
|
||||
font-family: "ForkAwesome";
|
||||
content:$symbol;
|
||||
padding-right:$lineheight_half;
|
||||
padding-right: $lineheight_rel / 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -52,11 +52,8 @@ ul.card-list, .card > ul {
|
|||
padding:0;
|
||||
margin:0;
|
||||
li.list-element {
|
||||
line-height:$lineheight;
|
||||
padding-right:$lineheight_half;
|
||||
padding-left:$lineheight_quarter;
|
||||
padding-top:$lineheight_quarter;
|
||||
padding-bottom:$lineheight_quarter;
|
||||
line-height:$lineheight_rel / 2;
|
||||
padding: $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 2;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $lineheight/4;
|
||||
|
||||
ul,
|
||||
li {
|
||||
|
|
@ -16,8 +15,8 @@
|
|||
a:visited {
|
||||
@include shape-style($lineheight_half);
|
||||
display: flex;
|
||||
line-height: $lineheight;
|
||||
padding: $lineheight_quarter;
|
||||
line-height: $lineheight_rel;
|
||||
padding: $lineheight_rel / 4;
|
||||
margin: 0;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -72,6 +71,7 @@
|
|||
|
||||
.toolbar {
|
||||
flex-direction: row;
|
||||
padding: $lineheight_rel/4;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
|
|
@ -89,9 +89,9 @@
|
|||
strong,
|
||||
&.toolbar-element {
|
||||
display: block;
|
||||
padding: $lineheight/3;
|
||||
padding-left: $lineheight/2;
|
||||
padding-right: $lineheight/2;
|
||||
padding: $lineheight_rel/3;
|
||||
padding-left: $lineheight_rel/2;
|
||||
padding-right: $lineheight_rel/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -102,12 +102,12 @@ ul.menu h1,
|
|||
.menu h2,
|
||||
ul.menu h2 {
|
||||
position: relative;
|
||||
left: -$lineheight_quarter;
|
||||
left: -$lineheight_rel / 4;
|
||||
font-weight: $fontweight_hyper;
|
||||
padding-top: $lineheight_quarter;
|
||||
padding-bottom: $lineheight_quarter;
|
||||
padding-top: $lineheight_rel / 4;
|
||||
padding-bottom: $lineheight_rel / 4;
|
||||
font-size:1em;
|
||||
line-height:$lineheight;
|
||||
line-height:$lineheight_rel;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
|
|
|
|||
|
|
@ -100,13 +100,13 @@ header h1 {
|
|||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
column-gap: 1.5rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: auto 360px;
|
||||
grid-template-columns: auto 300px;
|
||||
grid-template-areas: "main side";
|
||||
}
|
||||
}
|
||||
|
|
@ -117,6 +117,7 @@ header h1 {
|
|||
|
||||
.sidebar {
|
||||
grid-area: side;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
ul.tag-list {
|
||||
|
|
|
|||
|
|
@ -6,15 +6,16 @@ $baseline: 1.6;
|
|||
$lineheight: $baseline * 1rem;
|
||||
$lineheight_half: $lineheight/2;
|
||||
$lineheight_quarter: $lineheight/4;
|
||||
$lineheight_rel: $baseline * 1em;
|
||||
|
||||
$card-header-vmargin: 0px;
|
||||
$card-header-hmargin: 0px;
|
||||
$card-header-padding: $lineheight;
|
||||
$card-header-padding: $lineheight_rel;
|
||||
$card-header-width: 100%;
|
||||
$card-header-position:0px;
|
||||
// Buttons
|
||||
$button_large: $lineheight;
|
||||
$button_small: $lineheight_quarter;
|
||||
$button_large: $lineheight_rel;
|
||||
$button_small: $lineheight_rel / 4;
|
||||
$button-group-margin: 0;
|
||||
|
||||
// Responsives sizes
|
||||
|
|
|
|||
|
|
@ -33,9 +33,9 @@
|
|||
padding-right:$card-header-padding;
|
||||
padding-bottom: $size/2!important;
|
||||
margin:$card-header-hmargin;
|
||||
margin-bottom:$lineheight_half;
|
||||
margin-top:$lineheight_half;
|
||||
line-height:$lineheight;
|
||||
margin-bottom:$lineheight_rel / 2;
|
||||
margin-top:$lineheight_rel / 2;
|
||||
line-height:$lineheight_rel;
|
||||
white-space: nowrap;
|
||||
|
||||
position:relative;
|
||||
|
|
@ -55,11 +55,11 @@
|
|||
|
||||
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
||||
font-family:$basefont;
|
||||
font-size:1rem;
|
||||
font-size:1em;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
color:$color-font-light;
|
||||
font-weight: $fontweight_big;
|
||||
line-height:$lineheight;
|
||||
line-height:$lineheight_rel;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
164
style.css
164
style.css
|
|
@ -1040,11 +1040,11 @@ code {
|
|||
*
|
||||
*/
|
||||
.btn {
|
||||
padding: 1.6rem;
|
||||
padding-top: 0.5333333333rem;
|
||||
padding-bottom: 0.5333333333rem;
|
||||
margin: 0.8rem;
|
||||
margin-top: 0.5333333333rem;
|
||||
padding: 1.6em;
|
||||
padding-top: 0.5333333333em;
|
||||
padding-bottom: 0.5333333333em;
|
||||
margin: 0.8em;
|
||||
margin-top: 0.5333333333em;
|
||||
margin-bottom: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
height: auto;
|
||||
|
|
@ -1061,11 +1061,11 @@ code {
|
|||
margin-bottom: 0; }
|
||||
|
||||
.btn-small, .badge {
|
||||
padding: 0.4rem;
|
||||
padding-top: 0.1333333333rem;
|
||||
padding-bottom: 0.1333333333rem;
|
||||
margin: 0.2rem;
|
||||
margin-top: 0.1333333333rem;
|
||||
padding: 0.4em;
|
||||
padding-top: 0.1333333333em;
|
||||
padding-bottom: 0.1333333333em;
|
||||
margin: 0.2em;
|
||||
margin-top: 0.1333333333em;
|
||||
margin-bottom: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
height: auto;
|
||||
|
|
@ -1074,18 +1074,18 @@ code {
|
|||
background-color: transparent;
|
||||
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
|
||||
font-weight: 400;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
padding-left: 0.4em;
|
||||
padding-right: 0.4em;
|
||||
text-decoration: none; }
|
||||
.btn-small:hover, .btn-small:active, .badge:hover, .badge:active {
|
||||
background-color: transparent; }
|
||||
|
||||
strong.btn-fake {
|
||||
padding: 1.6rem;
|
||||
padding-top: 0.5333333333rem;
|
||||
padding-bottom: 0.5333333333rem;
|
||||
margin: 0.8rem;
|
||||
margin-top: 0.5333333333rem;
|
||||
padding: 1.6em;
|
||||
padding-top: 0.5333333333em;
|
||||
padding-bottom: 0.5333333333em;
|
||||
margin: 0.8em;
|
||||
margin-top: 0.5333333333em;
|
||||
margin-bottom: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
height: auto;
|
||||
|
|
@ -1124,7 +1124,7 @@ strong.btn-fake {
|
|||
border-color: transparent; }
|
||||
|
||||
.btn-toolbar {
|
||||
padding: 0 1.6rem; }
|
||||
padding: 0 1.6em; }
|
||||
|
||||
.btn-group > .btn {
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
|
|
@ -1161,11 +1161,11 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
|||
display: none; }
|
||||
.breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item > span {
|
||||
display: inline-block;
|
||||
padding: 1.6rem;
|
||||
padding-top: 0.5333333333rem;
|
||||
padding-bottom: 0.5333333333rem;
|
||||
margin: 0.8rem;
|
||||
margin-top: 0.5333333333rem;
|
||||
padding: 1.6em;
|
||||
padding-top: 0.5333333333em;
|
||||
padding-bottom: 0.5333333333em;
|
||||
margin: 0.8em;
|
||||
margin-top: 0.5333333333em;
|
||||
margin-bottom: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
height: auto;
|
||||
|
|
@ -1215,11 +1215,11 @@ nav.pagination {
|
|||
text-align: center;
|
||||
width: 100%; }
|
||||
nav.pagination .page-numbers, nav.pagination .next, nav.pagination .prev {
|
||||
padding: 0.4rem;
|
||||
padding-top: 0.1333333333rem;
|
||||
padding-bottom: 0.1333333333rem;
|
||||
margin: 0.2rem;
|
||||
margin-top: 0.1333333333rem;
|
||||
padding: 0.4em;
|
||||
padding-top: 0.1333333333em;
|
||||
padding-bottom: 0.1333333333em;
|
||||
margin: 0.2em;
|
||||
margin-top: 0.1333333333em;
|
||||
margin-bottom: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
height: auto;
|
||||
|
|
@ -1228,10 +1228,10 @@ nav.pagination {
|
|||
background-color: transparent;
|
||||
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
|
||||
font-weight: 400;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
margin-right: 0.05rem;
|
||||
margin-left: 0.05rem;
|
||||
padding-left: 0.4em;
|
||||
padding-right: 0.4em;
|
||||
margin-right: 0.05em;
|
||||
margin-left: 0.05em;
|
||||
text-decoration: none; }
|
||||
nav.pagination .page-numbers:hover, nav.pagination .page-numbers:active, nav.pagination .next:hover, nav.pagination .next:active, nav.pagination .prev:hover, nav.pagination .prev:active {
|
||||
background-color: transparent; }
|
||||
|
|
@ -1270,14 +1270,14 @@ nav.pagination {
|
|||
flex-direction: column;
|
||||
color: #212529; }
|
||||
.card > * {
|
||||
margin-left: 0.8rem;
|
||||
margin-right: 0.8rem; }
|
||||
margin-left: 0.8em;
|
||||
margin-right: 0.8em; }
|
||||
.card > *:first-child, .card > *.sr-only:first-child ~ * {
|
||||
margin-top: 1.6rem; }
|
||||
margin-top: 1.6em; }
|
||||
.card > *:first-child.card-header, .card > *.sr-only:first-child ~ *.card-header {
|
||||
margin-top: 0px; }
|
||||
.card > *:last-child {
|
||||
margin-bottom: 1.6rem; }
|
||||
margin-bottom: 1.6em; }
|
||||
.card > *:last-child.card-header {
|
||||
margin-bottom: 0px; }
|
||||
.card-body {
|
||||
|
|
@ -1285,14 +1285,14 @@ nav.pagination {
|
|||
.card-header {
|
||||
font-size: 1.1em;
|
||||
font-weight: 300;
|
||||
padding: 0.8rem;
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
padding-bottom: 0.8rem !important;
|
||||
padding: 0.8em;
|
||||
padding-left: 1.6em;
|
||||
padding-right: 1.6em;
|
||||
padding-bottom: 0.8em !important;
|
||||
margin: 0px;
|
||||
margin-bottom: 0.8rem;
|
||||
margin-top: 0.8rem;
|
||||
line-height: 1.6rem;
|
||||
margin-bottom: 0.8em;
|
||||
margin-top: 0.8em;
|
||||
line-height: 1.6em;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
|
|
@ -1309,12 +1309,12 @@ nav.pagination {
|
|||
border-bottom-right-radius: 8px; }
|
||||
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10 {
|
||||
font-family: Open Sans, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-size: 1em;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
color: #fefefe;
|
||||
font-weight: 300;
|
||||
line-height: 1.6rem; }
|
||||
line-height: 1.6em; }
|
||||
.card-header .fa {
|
||||
margin-right: 0.5em; }
|
||||
|
||||
|
|
@ -1323,11 +1323,8 @@ ul.card-list, .card > ul {
|
|||
padding: 0;
|
||||
margin: 0; }
|
||||
ul.card-list li.list-element, .card > ul li.list-element {
|
||||
line-height: 1.6rem;
|
||||
padding-right: 0.8rem;
|
||||
padding-left: 0.4rem;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
line-height: 0.8em;
|
||||
padding: 0.4em, 0.4em, 0.4em, 0.8em;
|
||||
margin: 0; }
|
||||
|
||||
.list-check li.list-element {
|
||||
|
|
@ -1335,14 +1332,14 @@ ul.card-list, .card > ul {
|
|||
.list-check li.list-element::before {
|
||||
font-family: "ForkAwesome";
|
||||
content: "";
|
||||
padding-right: 0.8rem; }
|
||||
padding-right: 0.4em; }
|
||||
|
||||
.list-cross li.list-element {
|
||||
list-style: none; }
|
||||
.list-cross li.list-element::before {
|
||||
font-family: "ForkAwesome";
|
||||
content: "";
|
||||
padding-right: 0.8rem; }
|
||||
padding-right: 0.4em; }
|
||||
|
||||
.list-danger li.list-element::before {
|
||||
color: #e33d22; }
|
||||
|
|
@ -1353,14 +1350,14 @@ ul.card-list, .card > ul {
|
|||
.smallcard-header {
|
||||
font-size: 1.1em;
|
||||
font-weight: 300;
|
||||
padding: 0.8rem;
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
padding-bottom: 0.8rem !important;
|
||||
padding: 0.8em;
|
||||
padding-left: 1.6em;
|
||||
padding-right: 1.6em;
|
||||
padding-bottom: 0.8em !important;
|
||||
margin: 0px;
|
||||
margin-bottom: 0.8rem;
|
||||
margin-top: 0.8rem;
|
||||
line-height: 1.6rem;
|
||||
margin-bottom: 0.8em;
|
||||
margin-top: 0.8em;
|
||||
line-height: 1.6em;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
|
|
@ -1377,18 +1374,17 @@ ul.card-list, .card > ul {
|
|||
border-bottom-right-radius: 8px; }
|
||||
.smallcard-header h1, .smallcard-header h2, .smallcard-header h3, .smallcard-header h4, .smallcard-header h5, .smallcard-header h6, .smallcard-header h7, .smallcard-header h8, .smallcard-header h9, .smallcard-header h10 {
|
||||
font-family: Open Sans, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-size: 1em;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
color: #fefefe;
|
||||
font-weight: 300;
|
||||
line-height: 1.6rem; }
|
||||
line-height: 1.6em; }
|
||||
|
||||
/* Menu handling */
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.4rem; }
|
||||
flex-direction: column; }
|
||||
.menu ul,
|
||||
.menu li {
|
||||
list-style: none;
|
||||
|
|
@ -1400,8 +1396,8 @@ ul.card-list, .card > ul {
|
|||
border-radius: 4px 4px 4px 4px;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
line-height: 1.6rem;
|
||||
padding: 0.4rem;
|
||||
line-height: 1.6em;
|
||||
padding: 0.4em;
|
||||
margin: 0;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -1434,7 +1430,8 @@ ul.card-list, .card > ul {
|
|||
outline-color: #212529; }
|
||||
|
||||
.toolbar {
|
||||
flex-direction: row; }
|
||||
flex-direction: row;
|
||||
padding: 0.4em; }
|
||||
.toolbar ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -1446,9 +1443,9 @@ ul.card-list, .card > ul {
|
|||
.toolbar li em,
|
||||
.toolbar li strong, .toolbar li.toolbar-element {
|
||||
display: block;
|
||||
padding: 0.5333333333rem;
|
||||
padding-left: 0.8rem;
|
||||
padding-right: 0.8rem; }
|
||||
padding: 0.5333333333em;
|
||||
padding-left: 0.8em;
|
||||
padding-right: 0.8em; }
|
||||
|
||||
.menu-divider,
|
||||
.menu ul h1,
|
||||
|
|
@ -1456,20 +1453,20 @@ ul.menu h1,
|
|||
.menu h2,
|
||||
ul.menu h2 {
|
||||
position: relative;
|
||||
left: -0.4rem;
|
||||
left: -0.4em;
|
||||
font-weight: 800;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
padding-top: 0.4em;
|
||||
padding-bottom: 0.4em;
|
||||
font-size: 1em;
|
||||
line-height: 1.6rem; }
|
||||
line-height: 1.6em; }
|
||||
|
||||
.menu-label {
|
||||
border: 0px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background-color: transparent;
|
||||
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem; }
|
||||
padding-left: 0.4em;
|
||||
padding-right: 0.4em; }
|
||||
.menu-label:hover, .menu-label:active {
|
||||
background-color: transparent; }
|
||||
|
||||
|
|
@ -1480,17 +1477,17 @@ ul.menu h2 {
|
|||
border: none;
|
||||
margin: 0;
|
||||
margin-bottom: 1.6rem;
|
||||
padding: 0.8rem;
|
||||
padding: 0.4em;
|
||||
font-size: 0.8rem; }
|
||||
.toast > * {
|
||||
margin-left: 0.4rem;
|
||||
margin-right: 0.4rem; }
|
||||
margin-left: 0.2em;
|
||||
margin-right: 0.2em; }
|
||||
.toast > *:first-child, .toast > *.sr-only:first-child ~ * {
|
||||
margin-top: 0.8rem; }
|
||||
margin-top: 0.4em; }
|
||||
.toast > *:first-child.card-header, .toast > *.sr-only:first-child ~ *.card-header {
|
||||
margin-top: 0px; }
|
||||
.toast > *:last-child {
|
||||
margin-bottom: 0.8rem; }
|
||||
margin-bottom: 0.4em; }
|
||||
.toast > *:last-child.card-header {
|
||||
margin-bottom: 0px; }
|
||||
.toast a {
|
||||
|
|
@ -2649,17 +2646,18 @@ header h1 {
|
|||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: 1.6rem;
|
||||
column-gap: 3rem;
|
||||
column-gap: 1.5rem;
|
||||
grid-template-areas: "main" "side"; }
|
||||
@media (min-width: 992px) {
|
||||
.container-blog {
|
||||
grid-template-columns: auto 360px;
|
||||
grid-template-columns: auto 300px;
|
||||
grid-template-areas: "main side"; } }
|
||||
.fullwidth {
|
||||
grid-column: span 2; }
|
||||
|
||||
.sidebar {
|
||||
grid-area: side; }
|
||||
grid-area: side;
|
||||
font-size: 0.8rem; }
|
||||
|
||||
ul.tag-list {
|
||||
display: flex;
|
||||
|
|
|
|||
Reference in a new issue