Skip to content

Commit

Permalink
Align mobile card with desktop card style
Browse files Browse the repository at this point in the history
  • Loading branch information
@stijn-dejongh
stijn-dejongh committed Sep 8, 2024
1 parent 7601c76 commit 8ad3b8c
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 64 deletions.
2 changes: 1 addition & 1 deletion layouts/partials/css.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<script type="text/javascript" src="{{ $icons }}"></script>

{{ partial "stylesheet.html" (dict "css" "css/icons.css") }}
{{ partial "stylesheet.html" (dict "css" "css/custom.css") }}
{{ partial "stylesheet.html" (dict "css" "css/custom.min.css") }}
{{ partial "stylesheet.html" (dict "css" "css/glossary.min.css") }}
{{ partial "stylesheet.html" (dict "css" "css/recommendations.min.css") }}
{{ partial "stylesheet.html" (dict "css" "css/images.min.css") }}
Expand Down
14 changes: 7 additions & 7 deletions static/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ body {
z-index: 999 !important;
}

@media all and (max-width: 800px) {
@media all and (max-width: 1024px) {
body {
font-size: 14px;
line-height: 1.65rem;
Expand Down Expand Up @@ -123,7 +123,7 @@ body {
}
}

@media (max-width: 800px) {
@media (max-width: 1024px) {
.hero-links {
flex-direction: column;
}
Expand Down Expand Up @@ -151,7 +151,7 @@ body {
text-indent: 0.5em;
}

@media all and (max-width: 800px) {
@media all and (max-width: 1024px) {
.content {
text-indent: 0.25em;
}
Expand Down Expand Up @@ -211,7 +211,7 @@ body {
}


@media all and (max-width: 800px) {
@media all and (max-width: 1024px) {
.content pre {
padding: 0.75em 0.25em;
margin-left: -0.5rem;
Expand Down Expand Up @@ -314,7 +314,7 @@ body {
pre {
text-indent: 0;
}
@media all and (max-width: 800px) {
@media all and (max-width: 1024px) {

.content pre {
text-indent: 0.75rem;
Expand Down Expand Up @@ -360,7 +360,7 @@ pre {
text-indent: 0;
}

@media all and (max-width: 800px) {
@media all and (max-width: 1024px) {
.media .content {
text-align: left;
}
Expand Down Expand Up @@ -393,7 +393,7 @@ pre {
clear: both;
}

@media all and (max-width: 800px) {
@media all and (max-width: 1024px) {
.half-width {
max-width: 100%;
}
Expand Down
2 changes: 1 addition & 1 deletion static/css/custom.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

189 changes: 135 additions & 54 deletions static/css/patterns.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
}


@media (max-width: 800px) {
@media (max-width: 1024px) {
.pattern_container {
flex-direction: row;
overflow-x: scroll;
Expand Down Expand Up @@ -139,7 +139,7 @@
}
}

@media (max-width: 800px) {
@media (max-width: 1024px) {
.pattern-card {
width: calc(calc(100%) - 0.15rem);
flex-shrink: 0;
Expand Down Expand Up @@ -220,7 +220,7 @@
}
}

@media (max-width: 800px) {
@media (max-width: 1024px) {
.pattern-card .card-action {
padding-top: 0.5rem;
margin-bottom: 0.25rem;
Expand Down Expand Up @@ -257,7 +257,7 @@
}
}

@media (max-width: 800px) {
@media (max-width: 1024px) {
.pattern-list .subtitle::after {
content: 'swipe for more >>';
}
Expand Down Expand Up @@ -381,7 +381,7 @@
gap: 0.125rem;
}

@media (max-width: 800px) {
@media (max-width: 1024px) {
.card-title-wrapper {
flex-direction: column;
}
Expand Down Expand Up @@ -672,73 +672,154 @@
flex-direction: column;
padding: 0 0.5rem;
}
}

.pattern-tags .pattern-tag {
padding: 0.35rem 0.65rem;
text-align: right;
color: #fefefe;
@media (max-width: 1024px) {
.pattern-summary {
width: 100%;
padding: 0;
margin: 0;
flex-shrink: 0;
float: none;
background: linear-gradient(rgba(11, 28, 42, 0.9), rgba(1, 13, 24, 0.95)), url("/images/tiles.webp") repeat;
border: 0;
border-bottom: 2px solid #030303;
border-radius: 0;
}

.pattern-summary .title-wrapper {
background: #08141f;
padding-bottom: 1.5rem;
padding-top: 1.75rem;
margin-top: 0;
margin-bottom: 1.5rem;

a {
.title {
color: #fefefe;
}

.subtitle {
color: #f39200;
font-weight: 300;
}
}

.pattern-summary .ammerse-values {
.pattern-summary .divider {
height: 3px;
border-radius: 50px;
margin-top: 2.75rem;
margin-bottom: 0.5rem;
}

.fas {
padding-left: 10%;
}
.card-title-wrapper .card-image {
max-width: 5.5rem;
max-height: 5.5rem;
position: relative;
}

.ammerse-value {
background: #08141f;
}
.pattern-summary .summary-item {
margin: 1.75rem 0.25rem 0.75rem 0.5rem;
padding-left: 0.5rem;
padding-top: 0.5rem;
justify-content: space-between;
border-top: 1px solid #f39200;
border-radius: 0;
background: #08141f85;

.base {
background: #08141f;
color: #9e9e9e;
border: 1px solid #9e9e9e;
a {
color: #fefefe;
border-bottom: 1px dashed #f39200;
}

.down {
background: #08141f;
color: #cd0c1a;
border: 1px solid #cd0c1a;
.fa-circle-info {
font-size: 0.65rem;
color: #f39200;
}
}

.double-down {
background: #08141f;
color: #cd0c1a;
border: 1px solid #d50c1a;
}
.pattern-summary .summary-item::after {
content: '';
width: 1.75rem;
margin-right: -0.5rem;
margin-top: -0.55rem;
height: 0.75rem;
border-right: 6px solid #f39200;
}

.up {
background: #08141f;
color: #0786a6;
border: 1px solid #0786a6;
}
.pattern-summary .summary-title {
max-width: 100%;
padding-left: 0.75rem;
color: #f39200;
font-weight: 500;
}

.double-up {
background: #08141f;
color: #0786a6;
border: 1px solid #0786a6;
}
.pattern-summary .summary-content {
justify-content: start;
padding: 0.75rem 0.95rem 1.75rem;
color: #fefefe;
font-weight: 650;
flex-grow: 1;
max-width: 100%;
display: block;
width: 100%;
}

.summary-title {
flex-grow: 1;
}

}

@media (max-width: 800px) {
.pattern-summary {
width: 90%;
margin: 0.15rem 1.35rem 2.5rem 1.35rem;
flex-shrink: 0;
float: none;
padding: 0.25rem;
.pattern-summary .ammerse-values {

.fas {
padding-left: 10%;
}

.card-title-wrapper .card-image {
max-width: 5.5rem;
max-height: 5.5rem;
position: relative;
.ammerse-value {
background: #08141f;
}

.base {
background: #08141f;
color: #9e9e9e;
border: 1px solid #9e9e9e;
}

.down {
background: #08141f;
color: #cd0c1a;
border: 1px solid #cd0c1a;
}

.double-down {
background: #08141f;
color: #cd0c1a;
border: 1px solid #d50c1a;
}

.up {
background: #08141f;
color: #0786a6;
border: 1px solid #0786a6;
}

.double-up {
background: #08141f;
color: #0786a6;
border: 1px solid #0786a6;
}

}

.pattern-summary .pattern-tags .pattern-tag {
padding: 0.35rem 0.65rem;
text-align: right;
color: #fefefe;
background: #08141f;

a {
color: #fefefe;
}
}

Expand Down Expand Up @@ -799,21 +880,21 @@
padding: 0 2.75rem 1.5rem 2.75rem;
}

@media (max-width: 800px) {
@media (max-width: 1024px) {
.related .related-content {
padding: 0 0.5rem 1.5rem 0.5rem;
}
}

@media (max-width: 800px) {
@media (max-width: 1024px) {
.table-responsive {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}

@media (max-width: 800px) {
@media (max-width: 1024px) {
.img-gallery {
width: 98% !important;
max-width: 98% !important;
Expand Down
Loading

0 comments on commit 8ad3b8c

Please sign in to comment.