kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvement: various biseau additions

Browse source
This commit is contained in:
Kazhnuz 2019-10-17 15:34:11 +02:00
parent 75e0c6b39f
commit f4d918796f
6 changed files with 304 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

341
css/style.css
View file

@ -698,10 +698,27 @@ ul.social li a:hover {
font-weight: 600;
border-radius: 0;
padding: 0.75rem;
padding-left: 0;
padding-right: 0;
padding-bottom: 0.75rem !important;
margin-left: -3rem;
margin-bottom: 0.75rem;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
position: relative;
left: -1.875rem;
width: 95%;
position: relative;
z-index: 1;
overflow: visible;
}
.card-header:before, .menu-header:before {
content: " ";
position: absolute;
top: 0;
left: -0.75rem;
right: -0.75rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
}
.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, .menu-header h1, .menu-header h2, .menu-header h3, .menu-header h4, .menu-header h5, .menu-header h6, .menu-header h7, .menu-header h8, .menu-header h9, .menu-header h10 {
font-size: 1em;
@ -725,6 +742,23 @@ ul.social li a:hover {
padding-bottom: 0.325rem;
margin: 0;
justify-content: space-between;
word-wrap: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
z-index: 1;
overflow: visible;
}
.card-menu .menu-element:before, .menu-menu .menu-element:before {
content: " ";
position: absolute;
top: 0;
left: -0.375rem;
right: -0.375rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
}
.card-menu a, .menu-menu a {
text-decoration: none;
@ -734,6 +768,21 @@ ul.social li a:hover {
.card-menu a:hover, .menu-menu a:hover {
text-decoration: none;
color: #d33682;
position: relative;
z-index: 1;
overflow: visible;
}
.card-menu a:hover:before, .menu-menu a:hover:before {
content: " ";
position: absolute;
top: 0;
left: -0.375rem;
right: -0.375rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
}
.card-menu a:hover:before, .menu-menu a:hover:before {
background-color: rgba(0, 0, 0, 0.1);
}
.card-menu .menu-divider, .menu-menu .menu-divider {
@ -758,10 +807,27 @@ ul.social li a:hover {
font-weight: 600;
border-radius: 0;
padding: 0.75rem;
padding-left: 0;
padding-right: 0;
padding-bottom: 0.75rem !important;
margin-left: -3rem;
margin-bottom: 0.75rem;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
position: relative;
left: -1.875rem;
width: 95%;
position: relative;
z-index: 1;
overflow: visible;
}
.smallcard-header:before, .toast-header:before {
content: " ";
position: absolute;
top: 0;
left: -0.75rem;
right: -0.75rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
}
.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, .toast-header h1, .toast-header h2, .toast-header h3, .toast-header h4, .toast-header h5, .toast-header h6, .toast-header h7, .toast-header h8, .toast-header h9, .toast-header h10 {
font-size: 1em;
@ -774,79 +840,155 @@ ul.social li a:hover {
}
/* COLORIZE CARDS and TOASTS */
.card-blue > .card-header, .card-blue > .menu-header, .smallcard-blue > .card-header, .smallcard-blue > .menu-header, .menu-blue > .card-header, .menu-blue > .menu-header {
.card-blue .card-header, .card-blue .menu-header, .smallcard-blue .card-header, .smallcard-blue .menu-header, .menu-blue .card-header, .menu-blue .menu-header {
background-color: #268bd2 !important;
color: #fdf6e3;
}
.card-violet > .card-header, .card-violet > .menu-header, .smallcard-violet > .card-header, .smallcard-violet > .menu-header, .menu-violet > .card-header, .menu-violet > .menu-header {
.card-blue .card-header:before, .card-blue .menu-header:before, .smallcard-blue .card-header:before, .smallcard-blue .menu-header:before, .menu-blue .card-header:before, .menu-blue .menu-header:before {
background-color: #268bd2 !important;
color: #fdf6e3;
}
.card-violet .card-header, .card-violet .menu-header, .smallcard-violet .card-header, .smallcard-violet .menu-header, .menu-violet .card-header, .menu-violet .menu-header {
background-color: #d33682 !important;
color: #fdf6e3;
}
.card-purple > .card-header, .card-purple > .menu-header, .smallcard-purple > .card-header, .smallcard-purple > .menu-header, .menu-purple > .card-header, .menu-purple > .menu-header {
.card-violet .card-header:before, .card-violet .menu-header:before, .smallcard-violet .card-header:before, .smallcard-violet .menu-header:before, .menu-violet .card-header:before, .menu-violet .menu-header:before {
background-color: #d33682 !important;
color: #fdf6e3;
}
.card-purple .card-header, .card-purple .menu-header, .smallcard-purple .card-header, .smallcard-purple .menu-header, .menu-purple .card-header, .menu-purple .menu-header {
background-color: #6c71c4 !important;
color: #fdf6e3;
}
.card-red > .card-header, .card-red > .menu-header, .smallcard-red > .card-header, .smallcard-red > .menu-header, .menu-red > .card-header, .menu-red > .menu-header {
.card-purple .card-header:before, .card-purple .menu-header:before, .smallcard-purple .card-header:before, .smallcard-purple .menu-header:before, .menu-purple .card-header:before, .menu-purple .menu-header:before {
background-color: #6c71c4 !important;
color: #fdf6e3;
}
.card-red .card-header, .card-red .menu-header, .smallcard-red .card-header, .smallcard-red .menu-header, .menu-red .card-header, .menu-red .menu-header {
background-color: #dc322f !important;
color: #fdf6e3;
}
.card-orange > .card-header, .card-orange > .menu-header, .smallcard-orange > .card-header, .smallcard-orange > .menu-header, .menu-orange > .card-header, .menu-orange > .menu-header {
.card-red .card-header:before, .card-red .menu-header:before, .smallcard-red .card-header:before, .smallcard-red .menu-header:before, .menu-red .card-header:before, .menu-red .menu-header:before {
background-color: #dc322f !important;
color: #fdf6e3;
}
.card-orange .card-header, .card-orange .menu-header, .smallcard-orange .card-header, .smallcard-orange .menu-header, .menu-orange .card-header, .menu-orange .menu-header {
background-color: #cb4b16 !important;
color: #fdf6e3;
}
.card-green > .card-header, .card-green > .menu-header, .smallcard-green > .card-header, .smallcard-green > .menu-header, .menu-green > .card-header, .menu-green > .menu-header {
.card-orange .card-header:before, .card-orange .menu-header:before, .smallcard-orange .card-header:before, .smallcard-orange .menu-header:before, .menu-orange .card-header:before, .menu-orange .menu-header:before {
background-color: #cb4b16 !important;
color: #fdf6e3;
}
.card-green .card-header, .card-green .menu-header, .smallcard-green .card-header, .smallcard-green .menu-header, .menu-green .card-header, .menu-green .menu-header {
background-color: #859900 !important;
color: #fdf6e3;
}
.card-skyblue > .card-header, .card-skyblue > .menu-header, .smallcard-skyblue > .card-header, .smallcard-skyblue > .menu-header, .menu-skyblue > .card-header, .menu-skyblue > .menu-header {
.card-green .card-header:before, .card-green .menu-header:before, .smallcard-green .card-header:before, .smallcard-green .menu-header:before, .menu-green .card-header:before, .menu-green .menu-header:before {
background-color: #859900 !important;
color: #fdf6e3;
}
.card-skyblue .card-header, .card-skyblue .menu-header, .smallcard-skyblue .card-header, .smallcard-skyblue .menu-header, .menu-skyblue .card-header, .menu-skyblue .menu-header {
background-color: #2aa198 !important;
color: #fdf6e3;
}
.card-dark > .card-header, .card-dark > .menu-header, .smallcard-dark > .card-header, .smallcard-dark > .menu-header, .menu-dark > .card-header, .menu-dark > .menu-header {
.card-skyblue .card-header:before, .card-skyblue .menu-header:before, .smallcard-skyblue .card-header:before, .smallcard-skyblue .menu-header:before, .menu-skyblue .card-header:before, .menu-skyblue .menu-header:before {
background-color: #2aa198 !important;
color: #fdf6e3;
}
.card-dark .card-header, .card-dark .menu-header, .smallcard-dark .card-header, .smallcard-dark .menu-header, .menu-dark .card-header, .menu-dark .menu-header {
background-color: #002b36 !important;
color: #fdf6e3;
}
.card-light > .card-header, .card-light > .menu-header, .smallcard-light > .card-header, .smallcard-light > .menu-header, .menu-light > .card-header, .menu-light > .menu-header {
.card-dark .card-header:before, .card-dark .menu-header:before, .smallcard-dark .card-header:before, .smallcard-dark .menu-header:before, .menu-dark .card-header:before, .menu-dark .menu-header:before {
background-color: #002b36 !important;
color: #fdf6e3;
}
.card-light .card-header, .card-light .menu-header, .smallcard-light .card-header, .smallcard-light .menu-header, .menu-light .card-header, .menu-light .menu-header {
background-color: #eee8d5 !important;
color: #002b36;
}
.card-turquoise > .card-header, .card-turquoise > .menu-header, .smallcard-turquoise > .card-header, .smallcard-turquoise > .menu-header, .menu-turquoise > .card-header, .menu-turquoise > .menu-header {
.card-light .card-header:before, .card-light .menu-header:before, .smallcard-light .card-header:before, .smallcard-light .menu-header:before, .menu-light .card-header:before, .menu-light .menu-header:before {
background-color: #eee8d5 !important;
color: #002b36;
}
.card-turquoise .card-header, .card-turquoise .menu-header, .smallcard-turquoise .card-header, .smallcard-turquoise .menu-header, .menu-turquoise .card-header, .menu-turquoise .menu-header {
background-color: #2aa198 !important;
color: #fdf6e3;
}
.card-yellow > .card-header, .card-yellow > .menu-header, .smallcard-yellow > .card-header, .smallcard-yellow > .menu-header, .menu-yellow > .card-header, .menu-yellow > .menu-header {
.card-turquoise .card-header:before, .card-turquoise .menu-header:before, .smallcard-turquoise .card-header:before, .smallcard-turquoise .menu-header:before, .menu-turquoise .card-header:before, .menu-turquoise .menu-header:before {
background-color: #2aa198 !important;
color: #fdf6e3;
}
.card-yellow .card-header, .card-yellow .menu-header, .smallcard-yellow .card-header, .smallcard-yellow .menu-header, .menu-yellow .card-header, .menu-yellow .menu-header {
background-color: #b58900 !important;
color: #fdf6e3;
}
.card-brown > .card-header, .card-brown > .menu-header, .smallcard-brown > .card-header, .smallcard-brown > .menu-header, .menu-brown > .card-header, .menu-brown > .menu-header {
.card-yellow .card-header:before, .card-yellow .menu-header:before, .smallcard-yellow .card-header:before, .smallcard-yellow .menu-header:before, .menu-yellow .card-header:before, .menu-yellow .menu-header:before {
background-color: #b58900 !important;
color: #fdf6e3;
}
.card-grey > .card-header, .card-grey > .menu-header, .smallcard-grey > .card-header, .smallcard-grey > .menu-header, .menu-grey > .card-header, .menu-grey > .menu-header {
.card-brown .card-header, .card-brown .menu-header, .smallcard-brown .card-header, .smallcard-brown .menu-header, .menu-brown .card-header, .menu-brown .menu-header {
background-color: #b58900 !important;
color: #fdf6e3;
}
.card-brown .card-header:before, .card-brown .menu-header:before, .smallcard-brown .card-header:before, .smallcard-brown .menu-header:before, .menu-brown .card-header:before, .menu-brown .menu-header:before {
background-color: #b58900 !important;
color: #fdf6e3;
}
.card-grey .card-header, .card-grey .menu-header, .smallcard-grey .card-header, .smallcard-grey .menu-header, .menu-grey .card-header, .menu-grey .menu-header {
background-color: #586e75 !important;
color: #fdf6e3;
}
.card-primary > .card-header, .card-primary > .menu-header, .smallcard-primary > .card-header, .smallcard-primary > .menu-header, .menu-primary > .card-header, .menu-primary > .menu-header {
.card-grey .card-header:before, .card-grey .menu-header:before, .smallcard-grey .card-header:before, .smallcard-grey .menu-header:before, .menu-grey .card-header:before, .menu-grey .menu-header:before {
background-color: #586e75 !important;
color: #fdf6e3;
}
.card-primary .card-header, .card-primary .menu-header, .smallcard-primary .card-header, .smallcard-primary .menu-header, .menu-primary .card-header, .menu-primary .menu-header {
background-color: #6c71c4 !important;
color: #fdf6e3;
}
.card-secondary > .card-header, .card-secondary > .menu-header, .smallcard-secondary > .card-header, .smallcard-secondary > .menu-header, .menu-secondary > .card-header, .menu-secondary > .menu-header {
.card-primary .card-header:before, .card-primary .menu-header:before, .smallcard-primary .card-header:before, .smallcard-primary .menu-header:before, .menu-primary .card-header:before, .menu-primary .menu-header:before {
background-color: #6c71c4 !important;
color: #fdf6e3;
}
.card-secondary .card-header, .card-secondary .menu-header, .smallcard-secondary .card-header, .smallcard-secondary .menu-header, .menu-secondary .card-header, .menu-secondary .menu-header {
background-color: #268bd2 !important;
color: #fdf6e3;
}
.card-warning > .card-header, .card-warning > .menu-header, .smallcard-warning > .card-header, .smallcard-warning > .menu-header, .menu-warning > .card-header, .menu-warning > .menu-header {
.card-secondary .card-header:before, .card-secondary .menu-header:before, .smallcard-secondary .card-header:before, .smallcard-secondary .menu-header:before, .menu-secondary .card-header:before, .menu-secondary .menu-header:before {
background-color: #268bd2 !important;
color: #fdf6e3;
}
.card-warning .card-header, .card-warning .menu-header, .smallcard-warning .card-header, .smallcard-warning .menu-header, .menu-warning .card-header, .menu-warning .menu-header {
background-color: #cb4b16 !important;
color: #fdf6e3;
}
.card-danger > .card-header, .card-danger > .menu-header, .smallcard-danger > .card-header, .smallcard-danger > .menu-header, .menu-danger > .card-header, .menu-danger > .menu-header {
.card-warning .card-header:before, .card-warning .menu-header:before, .smallcard-warning .card-header:before, .smallcard-warning .menu-header:before, .menu-warning .card-header:before, .menu-warning .menu-header:before {
background-color: #cb4b16 !important;
color: #fdf6e3;
}
.card-danger .card-header, .card-danger .menu-header, .smallcard-danger .card-header, .smallcard-danger .menu-header, .menu-danger .card-header, .menu-danger .menu-header {
background-color: #dc322f !important;
color: #fdf6e3;
}
.card-info > .card-header, .card-info > .menu-header, .smallcard-info > .card-header, .smallcard-info > .menu-header, .menu-info > .card-header, .menu-info > .menu-header {
.card-danger .card-header:before, .card-danger .menu-header:before, .smallcard-danger .card-header:before, .smallcard-danger .menu-header:before, .menu-danger .card-header:before, .menu-danger .menu-header:before {
background-color: #dc322f !important;
color: #fdf6e3;
}
.card-info .card-header, .card-info .menu-header, .smallcard-info .card-header, .smallcard-info .menu-header, .menu-info .card-header, .menu-info .menu-header {
background-color: #2aa198 !important;
color: #fdf6e3;
}
.card-success > .card-header, .card-success > .menu-header, .smallcard-success > .card-header, .smallcard-success > .menu-header, .menu-success > .card-header, .menu-success > .menu-header {
.card-info .card-header:before, .card-info .menu-header:before, .smallcard-info .card-header:before, .smallcard-info .menu-header:before, .menu-info .card-header:before, .menu-info .menu-header:before {
background-color: #2aa198 !important;
color: #fdf6e3;
}
.card-success .card-header, .card-success .menu-header, .smallcard-success .card-header, .smallcard-success .menu-header, .menu-success .card-header, .menu-success .menu-header {
background-color: #859900 !important;
color: #fdf6e3;
}
.card-success .card-header:before, .card-success .menu-header:before, .smallcard-success .card-header:before, .smallcard-success .menu-header:before, .menu-success .card-header:before, .menu-success .menu-header:before {
background-color: #859900 !important;
color: #fdf6e3;
}
@ -1434,14 +1576,14 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
/* ------------------ PREVIEWS ------------------- */
.previews-section {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
display: grid;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
grid-gap: 1.5rem;
}
.preview-container {
margin-bottom: 1em;
padding: 0.4em;
width: 100%;
}
@ -1459,7 +1601,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
}
}
.card-preview {
border-radius: 0px 0px 0px 0px;
padding: 0;
width: 100%;
margin: auto;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
@ -1470,13 +1612,12 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
}
.preview-item {
height: 200px;
overflow: hidden;
font-size: 0.9em;
line-height: 1.5em !important;
height: 12rem;
font-size: 0.9rem;
line-height: 1.5rem !important;
padding: 0.2em;
text-align: justify;
background-color: rgba(0, 0, 0, 0.05);
background-color: rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0.4);
position: relative;
display: flex;
@ -1484,16 +1625,92 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
align-items: center !important;
justify-content: center;
}
.preview-content {
max-height: 200px;
.preview-item .preview-overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
padding: 0.75rem;
backdrop-filter: none;
transition: background 0.3s;
}
.preview-item .preview-overlay h1, .preview-item .preview-overlay h2, .preview-item .preview-overlay h3, .preview-item .preview-overlay h4, .preview-item .preview-overlay h5, .preview-item .preview-overlay h6 {
color: #fdf6e3;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
font-size: 1rem;
line-height: 1.5rem;
font-weight: 200;
}
.preview-item .preview-overlay .card-header {
font-family: Work Sans;
font-size: 1rem;
background-color: #6c71c4;
font-size: 1.1em;
font-weight: 600;
border-radius: 0;
padding: 0.375rem;
padding-left: 0;
padding-right: 0;
padding-bottom: 0.375rem !important;
margin-bottom: 0.75rem;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
position: relative;
left: -0.9375rem;
width: 95%;
position: relative;
z-index: 1;
overflow: visible;
font-weight: 200;
}
.preview-item .preview-overlay .card-header:before {
content: " ";
position: absolute;
top: 0;
left: -0.375rem;
right: -0.375rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
}
.preview-item .preview-overlay .card-header h1, .preview-item .preview-overlay .card-header h2, .preview-item .preview-overlay .card-header h3, .preview-item .preview-overlay .card-header h4, .preview-item .preview-overlay .card-header h5, .preview-item .preview-overlay .card-header h6, .preview-item .preview-overlay .card-header h7, .preview-item .preview-overlay .card-header h8, .preview-item .preview-overlay .card-header h9, .preview-item .preview-overlay .card-header h10 {
font-size: 1em;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
padding: 0px;
margin: 0px;
color: #fdf6e3;
font-weight: 600;
line-height: 1.5em;
}
.preview-item:hover .preview-overlay {
backdrop-filter: blur(2px);
background-color: rgba(0, 0, 0, 0.4);
}
.preview-item:hover .preview-overlay .preview-metadata {
opacity: 0.9;
transition: opacity 0.5s;
}
.preview-content {
max-height: 12rem;
overflow: hidden;
}
.preview-content h1, .preview-content h2, .preview-content h3, .preview-content h4, .preview-content h5, .preview-content h6 {
margin-bottom: 0px;
max-width: 100%;
display: none;
}
.preview-content > p {
width: 100%;
margin: auto;
}
.preview-content > p > img {
max-width: 100%;
height: auto;
vertical-align: middle;
margin: auto;
text-align: center;
}
.preview-content > p.p-img {
text-align: center;
margin: auto;
@ -1502,61 +1719,13 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
width: 100%;
}
.preview-content > p > img {
max-width: 100%;
height: auto;
vertical-align: middle;
margin: auto;
text-align: center;
}
.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
margin-bottom: 0px;
max-width: 100%;
display: none;
}
.preview-item h1 {
display: none;
}
.preview-overlay {
height: 100%;
width: 100%;
.preview-metadata {
opacity: 0;
top: 0;
left: 0;
position: absolute;
padding: 0;
transition: opacity 0.5s;
color: #fdf6e3;
background-color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
backdrop-filter: none;
}
.preview-overlay h1 {
max-width: 100%;
padding-top: 0.3em;
margin: auto;
margin-bottom: 0px;
text-align: center;
display: block;
font-size: 2em;
color: #fdf6e3;
}
.preview-overlay h1, .preview-overlay h2, .preview-overlay h3, .preview-overlay h4, .preview-overlay h5, .preview-overlay h6, .preview-overlay h7, .preview-overlay h8, .preview-overlay h9, .preview-overlay h10 {
transition: opacity 0.3s;
color: #fdf6e3;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
}
.preview-item:hover .preview-overlay {
opacity: 0.9;
transition: opacity 0.5s;
backdrop-filter: blur(2px);
}
.comment-text {
margin-top: 0.8em;
}

2
css/style.css.map
View file

File diff suppressed because one or more lines are too long

18
scss/_buttons.scss
View file

@ -10,24 +10,6 @@ $color-button-dark: $color-dark;
$button_large: 1.5rem;
$button_small: 0.375rem;
@mixin biseau($size) {
position: relative;
z-index:1;
overflow: visible;
&:before {
content: " ";
position: absolute;
top:0;
left:-$size/2;
right:-$size/2;
bottom:0;
z-index:-1;
transform: skewX(-15deg);
}
}
@mixin button($size) {
padding: $size;
padding-top: $size/3;

31
scss/_cards.scss
View file

@ -23,11 +23,19 @@ $card-smallpad: 0.75rem;
font-weight:600;
border-radius: 0;
padding: $size/2;
padding-left:0;
padding-right:0;
padding-bottom: $size/2!important;
margin-left: -$size*2;
margin-bottom:0.75rem;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
position:relative;
left: -$size*1.25;
width:95%;
@include biseau($size);
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-size:1em;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
@ -40,8 +48,11 @@ $card-smallpad: 0.75rem;
}
@mixin card-color($background-color, $text-color) {
& > .card-header, & > .menu-header {
@include background-color($background-color, $text-color)
& .card-header, & .menu-header {
@include background-color($background-color, $text-color);
&:before {
@include background-color($background-color, $text-color);
}
}
}
@ -71,6 +82,13 @@ $card-smallpad: 0.75rem;
padding-bottom:0.325rem;
margin:0;
justify-content: space-between;
word-wrap:none;
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
@include biseau(0.75rem);
}
a {
@ -80,10 +98,17 @@ $card-smallpad: 0.75rem;
&:hover {
text-decoration:none;
color: $color-violet;
@include biseau(0.75rem);
&:before {
background-color:rgba(0,0,0,0.1);
}
}
}
.menu-divider {
position: relative;
left: -0.325rem;

17
scss/_definitions.scss
View file

@ -14,3 +14,20 @@ $border-size: 0px;
@mixin border-radius() {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
@mixin biseau($size) {
position: relative;
z-index:1;
overflow: visible;
&:before {
content: " ";
position: absolute;
top:0;
left:-$size/2;
right:-$size/2;
bottom:0;
z-index:-1;
transform: skewX(-15deg);
}
}

3
scss/_typography.scss
View file

@ -31,7 +31,8 @@ body {
&, #wrapper {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.25) 0, rgba(255, 255, 255, 0) 1px);
background-repeat: repeat-y;
background-size: 100% 1.5rem;}
background-size: 100% 1.5rem;
}
}
.night-mode {