aljaz/njump
1
0
Fork 0
mirror of https://github.com/aljazceru/njump.git synced 2026-02-14 10:34:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve visual of links and toggles

Browse Source
This commit is contained in:
Daniele Tonon
2023-05-29 20:48:15 +02:00
parent 136d160091
commit b8526ac8a5
3 changed files with 72 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
static/styles.css
View File

@@ -285,6 +285,18 @@ h1, h2 {
.container .column_content .field {
margin-bottom: 1.5rem;
}
.container .column_content .field a {
padding-bottom: 0.05rem;
text-decoration: none;
}
.theme--default .container .column_content .field a {
color: #373737;
border-bottom: 1px solid rgba(55, 55, 55, 0.24);
}
.theme--dark .container .column_content .field a {
color: #fafafa;
border-bottom: 1px solid rgba(250, 250, 250, 0.24);
}
.container .column_content .field .label {
font-size: 0.8rem;
}
@@ -330,6 +342,7 @@ h1, h2 {
.container .column_content .field.last_notes a {
display: block;
text-decoration: none;
border-bottom: none;
}
.container .column_content .field.last_notes a.note {
margin-bottom: 1rem;
@@ -376,12 +389,17 @@ h1, h2 {
text-indent: -9999px;
width: 2.6rem;
height: 1.2rem;
background: #9a9a9a;
display: inline-block;
border-radius: 100px;
position: relative;
margin-right: 0.5rem;
}
.theme--default .container .column_content .field.advanced-switch-wrapper label:first-of-type {
background: #f3f3f3;
}
.theme--dark .container .column_content .field.advanced-switch-wrapper label:first-of-type {
background: #2d2d2d;
}
@media (max-width: 580px) {
.container .column_content .field.advanced-switch-wrapper label:first-of-type {
width: 3rem;
@@ -395,10 +413,15 @@ h1, h2 {
left: 2px;
width: 1rem;
height: 1rem;
background: #fff;
border-radius: 1rem;
transition: 0.2s;
}
.theme--default .container .column_content .field.advanced-switch-wrapper label:first-of-type:after {
background: #373737;
}
.theme--dark .container .column_content .field.advanced-switch-wrapper label:first-of-type:after {
background: #fafafa;
}
@media (max-width: 580px) {
.container .column_content .field.advanced-switch-wrapper label:first-of-type:after {
width: 1.2rem;
@@ -415,9 +438,27 @@ h1, h2 {
left: calc(100% - 2px);
transform: translateX(-100%);
}
.theme--default .container .column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
background: #ffffff;
}
.theme--dark .container .column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
background: #373737;
}
.container .column_content .field.advanced-switch-wrapper label:first-of-type:active:after {
width: 2rem;
}
.container .column_content .field.advanced-switch-wrapper label:last-of-type {
cursor: pointer;
font-size: 0.8rem;
}
.theme--default .container .column_content .field.advanced-switch-wrapper label:last-of-type {
border-bottom: 1px solid rgba(55, 55, 55, 0.24);
padding-bottom: 0.1rem;
}
.theme--dark .container .column_content .field.advanced-switch-wrapper label:last-of-type {
border-bottom: 1px solid rgba(250, 250, 250, 0.24);
padding-bottom: 0.1rem;
}
.container .column_content .field.content {
line-height: 1.4rem;
}
@@ -489,7 +530,7 @@ h1, h2 {
}
.container .column_clients {
flex-basis: 25%;
margin-top: 2rem;
margin-top: 1rem;
}
@media (max-width: 580px) {
.container .column_clients {

30
static/styles.scss
View File

@@ -320,6 +320,14 @@ a {
}
.field {
margin-bottom: 1.5rem;
a {
padding-bottom: 0.05rem;
text-decoration: none;
@include themed() {
color: t($base7);
border-bottom: 1px solid rgba( t($base7), .24 );
}
}
.label {
font-size: 0.8rem;
@include themed() {
@@ -354,6 +362,7 @@ a {
a {
display: block;
text-decoration: none;
border-bottom: none;
&.note {
margin-bottom: 1rem;
.published_at {
@@ -396,7 +405,9 @@ a {
text-indent: -9999px;
width: 2.6rem;
height: 1.2rem;
background: $color-base5;
@include themed() {
background: t($over-bg);
}
display: inline-block;
border-radius: 100px;
position: relative;
@@ -414,7 +425,9 @@ a {
left: 2px;
width: 1rem;
height: 1rem;
background: #fff;
@include themed() {
background: t($base7);
}
border-radius: 1rem;
transition: 0.2s;
@media (max-width: 580px) {
@@ -432,11 +445,22 @@ a {
input:checked + label:first-of-type:after {
left: calc(100% - 2px);
transform: translateX(-100%);
@include themed() {
background: t($base1);
}
}
label:first-of-type:active:after {
width: 2rem;
}
label:last-of-type {
cursor: pointer;
font-size: 0.8rem;
@include themed() {
border-bottom: 1px solid rgba( t($base7), .24 );
padding-bottom: 0.1rem;
}
}
}
&.content {
line-height: 1.4rem;
@@ -491,7 +515,7 @@ a {
.column_clients {
flex-basis: 25%;
margin-top: 2rem;
margin-top: 1rem;
@media (max-width: 580px) {
position: fixed;
// top: calc(100vh - 4.6rem);

2
templates/head.html
View File

@@ -62,5 +62,5 @@
{{end}}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/njump/static/styles.css?v=20230529" />
<link rel="stylesheet" href="/njump/static/styles.css?v=20230530" />
</head>